jobdone-shared-files v1.1.5

Vue Components

如果要使用 vue 檔，需要直接引用 node_modules 裡的檔案，例如：

import OOXX from '../../node_modules/jobdone-shared-files/OOXX.vue';

.

01.ProjectManagement/projectNavbar - 專案資訊Navbar(2024.07.30_v2版本為破壞性更新)

可用參數

02-1.ModuleInfo/LayoutNav - 模組首頁 Sidebar

LayoutNav 是用於模組首頁的側邊欄 Component，會顯示模組資訊、使用者資訊以及該模組的待辦事項列表 (單單) 的連結。

其中 module-info 可以傳入 API URL 或者直接傳入物件。如果是 API URL，組件將自動發出 GET 請求來獲取資料。

LayoutNav 內已包含 navButton 模組功能總表按鈕/下拉選單。

可用參數

Slot 說明

LayoutNav 組件提供多個插槽 (slots) 讓開發者自定義內容：

• list-content-top: 放於「我的待辦事項列表 (單單) 」之上的內容。

• list-content-bottom: 放於「我的待辦事項列表 (單單) 」之下的內容。

• bottom-link: 固定於側邊欄底部的插槽，放在「我的聯絡人」旁的按鈕。可添加其他重要的按鈕，例如「通知」等功能。

02-2.ModuleInfo/navButton - 模組功能總表按鈕/下拉選單

navButton 是用於顯示模組功能總表的按鈕及下拉選單的組件。按下按鈕後，會顯示與模組相關的功能連結，例如待辦事項、公司資訊和個人資料等連結。

其中 module-info 可以傳入 API URL 或者直接傳入物件。如果是 API URL，組件將自動發出 GET 請求來獲取資料，同 LayoutNav。

可用參數

.

03.Paginate - 分頁

範例

<template>
    <paginate 
        container-class="..." 
        :total-pages="..." 
        :current-page="..." 
        @to-page="...">
    </paginate>
</template>

<script setup>
    import paginate from 'jobdone-shared-files/paginate.vue';
<script>

可用參數

可用方法

.

04.TagEditor - 標籤

範例

<template>
    <tagEditor 
        ref="tagEditorComponent" 
        :auto-complete-option='autoCompleteTagList'
        @update-auto-complete-option="getTagListByKeyWord">
    </tagEditor>
</template>

<script setup>
    import tagEditor from 'jobdone-shared-files/tagEditor.vue';
    
<!-- autoComplete 功能 -->
    const autoCompleteTagList = ref([]);
    async function getTagListByKeyWord(keyword) {
        autoCompleteTagList.value = await axios.get(...).data;
    }
    
<!-- 取得建立的TAG值 -->
    const tagEditorComponent = ref(null);
    const tags = ref([])
    functio getTag(){
        tags.value = tagEditorComponent.value.tagAry
    }
<script>

可用參數

可用方法

.

05.Tree - 樹狀結構

需另外引入 ../../node_modules/jobdone-shared-files/style/scss/Tree.scss 檔案

範例

<template>
     <tree :items="items" :click-item="clickItem" size="sm">
        <template v-slot:icon-start>
            // 前方箭頭後的 slot 插槽
        </template>
        <template v-slot:icon="slotProps">
            // 後方的 slot 插槽，預設為 radio icon
            // 透過 slotProps 取得每一個 item 的資料
            {{slotProps.item}}
        </template>
     </tree>
</template>

<script setup>
    import tree from 'jobdone-shared-files/tree.vue';
    const items = [
        {
            id:1,
            name:'分類A',
            children{
                id:11,
                title:'分類A'-1,
                children:[
                    ...
                ]
            }
        },{
            id:2,
            name:'分類B',
            children{
                id:12,
                title:'分類B-1',
                children:[
                    ...
                ]
            }
        },
        ...
    ]
    
    function clickItem(v){
        console.log(v)
    }
<script>

可用參數

可用方法

.

06.VueLoadingOverlay - 指定樣式讀取樣式

範例

<template>
    <Loading :is-active="isLoading"></Loading>
</template>
<script setup>
    import Loading from "jobdone-shared-files/vueLoadingOverlay.vue";

    <!-- loading 初始化 "isLoading" => 自定義變數 -->
    const isLoading = ref(false);
    
    <!--  開啟loading   -->
    function showLodaing(){
        isLoading.value = true;
    }
    
    <!--  關閉loading   -->
    function showLodaing(){
        isLoading.value = false;
    }
    
</script>

可用變數：

其他可用變數(統一樣式不推薦修改)：

.

07.lightboxWithOverview - 有縮圖的圖片光箱

<lightbox-with-overview 
    :pictures-data="picturesData" 
    ref="lightboxWithOverviewRef">
</lightbox-with-overview>

可傳入的值：

.

08.autocompleteSelect - autocomplete下拉選單

範例1：簡易型，String Array 的選單

<template>
    <autocomplete-select 
        :opts="opts"
        :selected-data="selected"
        @select="(v) => selected = v">
    </autocomplete-select>
</template>

<script setup>
    import autocompleteSelect from 'jobdone-shared-files/autocompleteSelect.vue';
    
    const selected =''
    const opts =['汪汪汪','喵喵喵','啾啾啾']
<script>

範例2：複雜型，Object Array 的選單

<template>
    <autocomplete-select
        :selected-data="selected" 
        :opts="members"
        :filter-keys="['firstName','lastName','enName']" 
        preview-key="enName + ' ( ' + lastName + ' ' + firstName + ' ) '"
        binding-key="id"
        @select="(v) => selected = v.id"
    ></autocomplete-select>
</template>
<script setup>
    import autocompleteSelect from 'jobdone-shared-files/autocompleteSelect.vue';
    
    const selected = '1'
    const members =[{
        id:'1',
        firstName:'美美',
        lastName:'陳',
        enName:'Amy'
    },{
        id:'2',
        firstName:'大蒙',
        lastName:'王',
        enName:'Jed'
    },{
        ...
    }]
<script>

範例3：自訂選單樣式()

<template>
    <autocomplete-select
        :selected-data="selected" 
        :opts="members"
        :filter-keys="['firstName','lastName','enName']"
        binding-key="id"
        @select="(v) => selected = v.id"
        :html-option='true'
        opt-class='border-bottom'
    >
      <template #option = "{ optData }">
            <div>我全要喵喵喵喵!!</div>
            <div>
                {{optData.phoneNumber}}
            </div>
            <div>
                {{ `${optData.enName} (${ optData.firstName } ${ optData.lastName })` }}
            </div>
        </template> 
    </autocomplete-select>
</template>
<script setup>
    import autocompleteSelect from 'jobdone-shared-files/autocompleteSelect.vue';
    
    const selected = '1'
    const members =[{
        id:'1',
        firstName:'美美',
        lastName:'陳',
        enName:'Amy',
        phoneNumber:'0911111111',
    },{
        id:'2',
        firstName:'大蒙',
        lastName:'王',
        enName:'Jed',
        phoneNumber:'092222222',
    },{
        ...
    }]
<script>

基本參數

#	參數 Attribute	型別 Type	預設值 Default	說明 Description
1	selected-data	String Number Object	none	當前選擇的值(類似平常vModel的用法)
2	opts	Array	[]	選項列表，只接受StringArray NumberArray ObjectArray，且請陣列內容格式統一
3	opt-class	String	''	選項列表客製化樣式
4	placeholder	String	'請選擇'	未選擇內容時的提示文字
5	search-placeholder	String	''	自定義搜尋框的提示文字。如未設定，有選擇內容時會將選擇的內容當成提示文字，而未選擇時則顯示placeholder(參數2)的值
6	trigger-class	String	''	預覽框與輸入框的樣式CLASS，可用於驗證提示
7	list-put	String	'body'	列表Dom放置位置
8	is-unselected-extend-value	Array	[]	如未設定 null undefined 0 '' 辯視為未選擇內容

清除按鈕參數

Object陣列選項清單用參數

可用方法

.

.

.

Directives

01.SelectPlaceholder

<select>未選擇值時加上Placeholder樣式 null false undefined '' 預設會被判斷為Placeholder，如有增減需求請參考option可用變數。

使用範例：

<template>
    <select class="form-select" 
        v-model="selectingValue" 
        v-select-placeholder="{ 
            value: selectingValue,
            placeholderValue: [1,2],
            excludeValue: [false],
            unselectClass:'is-invalid'
        }">
        <option :value="null">請選擇一隻貓，這是Placeholder</option>
        <option :value="false">雖然是false，但是我任性地說他一個正常的選項</option>
        <option :value="1">雖然是1，但是我任性地說他Placeholder選項</option>
        <option :value="2">雖然是2，但是我任性地說他Placeholder選項</option>
        <option :value="3">Candy</option>
        ...
    </select>
</template>
<script setup>
    import { ref } from "vue";
    import vSelectPlaceholder from 'jobdone-shared-files/common/directives/selectPlaceholder.js';
    
    const selectingValue = ref(null)
    
</script>

可用變數

.

02.textareaAutoHeight

使用範例：

<template>
    <textarea v-textarea-auto-height v-model="inputValue"></textarea>
</template>
<script setup>
    import { ref } from "vue";
    import vTextareaAutoHeight from 'jobdone-shared-files/common/directives/textareaAutoHeight.js';
    
    const inputValue = ref(null)
    
</script>

SCSS

Layout

Common

• Animation：目前只有 Fade In keyframe
• SelectableTable：勾選 tr focus style
• thumbnail-group：方形大頭貼與小大頭貼相疊 style
• filepond：客製化 filepond 樣式
• Tree：Tree Component 樣式