jobdone-shared-files v1.0.23

Vue Components

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

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

.

01.ProjectManagement/projectNavbar - 專案資訊Navbar

需要傳入的值：

.

02.Paginate - 分頁

範例

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

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

可用參數

可用方法

.

03.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>

可用參數

可用方法

.

04.Tree - 樹狀結構

範例

<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>

可用參數

可用方法

.

05.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>

可用變數：

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

.

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

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

可傳入的值：

.

07.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']" 
        preview-key="enName + ' ( ' + lastName + ' ' + firstName + ' ) '"
        binding-key="id"
        @select="(v) => selected = v.id"
        :html-option='true'
    >
      <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	選項 Option	說明 Description
1	selected-data	String Number Object	none		當前選擇的值(類似平常vModel的用法)
2	opts	Array	[]		選項列表，只接受StringArray NumberArray ObjectArray，且請陣列內容格
3	placeholder	String	'請選擇'		未選擇內容時的提示文字
4	search-placeholder	String	''		自定義搜尋框的提示文字。如未設定，有選擇內容時會將選擇的內容當成提示文字，而未選擇時則顯示placeholder(參數3)的值
5	trigger-class	String	''		預覽框與輸入框的樣式CLSS，可用於驗證提示
6	list-put	String	'body'		列表Dom放置位置

清除按鈕參數

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 樣式