jobdone-shared-files 1.0.4 → 1.0.6

package/README.md

@@ -114,14 +114,14 @@
 - thumbnail-group：方形大頭貼與小大頭貼相疊 style
 - filepond：客製化 filepond 樣式
 
+---
 
 # Directives
 
-## SelectPlaceholder
+## SelectPlaceholder 使用範例：
 
 `null` `false` `undefined` `''` 預設會被判斷為Placeholder，如有增減需求請參考option可用變數。
 
-### 使用範例：
 ```
 <template>
     <select class="form-select" 
@@ -155,4 +155,21 @@
 | 1   | value   |    --     |      是       |        --        | 當前選擇內容的值 |
 | 2   | placeholderValue |  `Array`  |     否       |      []      | 除了預設會被判斷為Placeholder的值，如有其他需求可增加。|
 | 3   | excludeValue |  `Array`  |     否       |      []      | 如預設會被判斷為Placeholder的值，需被排除判斷，可在此處排除|
-| 4   | unselectClass |  `String`  |     否       |      ''      | 如在未選擇值時希望有更多特殊樣式，可在此傳入Class。不需要加. |
+| 4   | unselectClass |  `String`  |     否       |      ''      | 如在未選擇值時希望有更多特殊樣式，可在此傳入Class。不需要加. |
+
+---
+
+## 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>
+```

package/common/directives/collapse.js

@@ -1,13 +1,13 @@
-import Collapse from '../../../bootstrap/js/dist/collapse';
-
-export default {
-    mounted(el) {
-        Collapse.getOrCreateInstance(el, {
-            toggle: false
-        });
-    },
-    unmounted(el) {
-        var instance = Collapse.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import Collapse from '../../../bootstrap/js/dist/collapse';
+
+export default {
+    mounted(el) {
+        Collapse.getOrCreateInstance(el, {
+            toggle: false
+        });
+    },
+    unmounted(el) {
+        var instance = Collapse.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/popovers.js

@@ -1,11 +1,11 @@
-import Popover from '../../../bootstrap/js/dist/popover';
-
-export default {
-    mounted(el) {
-        Popover.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Popover.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import Popover from '../../../bootstrap/js/dist/popover';
+
+export default {
+    mounted(el) {
+        Popover.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Popover.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/selectPlaceholder.js

@@ -1,53 +1,53 @@
-/** 使用方式：
- * <select class="form-select" v-model="selectingValue" v-select-placeholder="{ value: selectingValue }">
-        <option :value="null" disabled hidden>請選擇一隻貓</option>
-        <option :value="1" v-for="(item, index) in optAry" :key="index">Jed</option>
-        <option :value="2" v-for="(item, index) in optAry" :key="index">奧迪</option>
-        <option :value="3" v-for="(item, index) in optAry" :key="index">賓士貓</option>
-    </select>
-    
-    v-select-placeholder="{ 
-        value:              value,      // 必須傳入     
-        placeholderValue:   [],         // 選擇性傳入   指定為Placeholder的值，需為陣列型式['...','...','...']
-        excludeValue:       [],         // 選擇性傳入   需排除預設 null, 0, false, undefined, '' 等等值，不將其判斷為Placeholder，需為陣列型式['...','...','...']
-        unselectClass:      ''          // 選擇性傳入   未選擇時的特殊樣式
-    }
- * 
- */
-
-    function updateDom(el, binding) {
-        el.querySelectorAll('option')?.forEach(element => {
-            element.style.color = 'var(--bs-body-color)'
-        });
-    
-        // 預設為判斷為Placeholder的值
-        let isUnselectValuePackage = [null, false, undefined, '']
-    
-        // [增加]　判斷為Placeholder的值
-        binding.value.placeholderValue?.forEach(i => {
-            !isUnselectValuePackage.includes(i) ? isUnselectValuePackage.push(i) : ""
-        })
-    
-        // [移除]　判斷為 Placeholder 的值
-        binding.value.excludeValue?.forEach(i => {
-            isUnselectValuePackage.includes(i) ? isUnselectValuePackage.splice(isUnselectValuePackage.indexOf(i), 1) : ""
-        })
-    
-        if (isUnselectValuePackage.includes(binding.value.value)) {
-            el.classList.add(binding.value.unselectClass)
-            el.classList.remove(binding.value.selectingClass)
-            el.style.color = 'var(--bs-input-placeholder-color) '
-        } else {
-            el.classList.add(binding.value.selectingClass)
-            el.classList.remove(binding.value.unselectClass)
-            el.style.color = 'var(--bs-body-color) '
-        }
-    }
-    export default {
-        mounted(el, binding) {
-            updateDom(el, binding)
-        },
-        updated(el, binding) {
-            updateDom(el, binding)
-        }
+/** 使用方式：
+ * <select class="form-select" v-model="selectingValue" v-select-placeholder="{ value: selectingValue }">
+        <option :value="null" disabled hidden>請選擇一隻貓</option>
+        <option :value="1" v-for="(item, index) in optAry" :key="index">Jed</option>
+        <option :value="2" v-for="(item, index) in optAry" :key="index">奧迪</option>
+        <option :value="3" v-for="(item, index) in optAry" :key="index">賓士貓</option>
+    </select>
+    
+    v-select-placeholder="{ 
+        value:              value,      // 必須傳入     
+        placeholderValue:   [],         // 選擇性傳入   指定為Placeholder的值，需為陣列型式['...','...','...']
+        excludeValue:       [],         // 選擇性傳入   需排除預設 null, 0, false, undefined, '' 等等值，不將其判斷為Placeholder，需為陣列型式['...','...','...']
+        unselectClass:      ''          // 選擇性傳入   未選擇時的特殊樣式
+    }
+ * 
+ */
+
+    function updateDom(el, binding) {
+        el.querySelectorAll('option')?.forEach(element => {
+            element.style.color = 'var(--bs-body-color)'
+        });
+    
+        // 預設為判斷為Placeholder的值
+        let isUnselectValuePackage = [null, false, undefined, '']
+    
+        // [增加]　判斷為Placeholder的值
+        binding.value.placeholderValue?.forEach(i => {
+            !isUnselectValuePackage.includes(i) ? isUnselectValuePackage.push(i) : ""
+        })
+    
+        // [移除]　判斷為 Placeholder 的值
+        binding.value.excludeValue?.forEach(i => {
+            isUnselectValuePackage.includes(i) ? isUnselectValuePackage.splice(isUnselectValuePackage.indexOf(i), 1) : ""
+        })
+    
+        if (isUnselectValuePackage.includes(binding.value.value)) {
+            el.classList.add(binding.value.unselectClass)
+            el.classList.remove(binding.value.selectingClass)
+            el.style.color = 'var(--bs-input-placeholder-color) '
+        } else {
+            el.classList.add(binding.value.selectingClass)
+            el.classList.remove(binding.value.unselectClass)
+            el.style.color = 'var(--bs-body-color) '
+        }
+    }
+    export default {
+        mounted(el, binding) {
+            updateDom(el, binding)
+        },
+        updated(el, binding) {
+            updateDom(el, binding)
+        }
     }

package/common/directives/textareaAutoHeight.js

@@ -0,0 +1,11 @@
+export default {
+    updated(el) {
+        setTimeout(function () {
+            el.style.height = "auto";
+            if (el.value) {
+                el.style.height = `${el.scrollHeight + 2}px`
+            }
+        }, 200);
+        // 延遲200毫秒是因為如果放在開光箱當中，需要時間處理
+    },
+}

package/common/directives/tooltip.js

@@ -1,11 +1,11 @@
-import Tooltip from '../../../bootstrap/js/dist/tooltip';
-
-export default {
-    mounted(el) {
-        Tooltip.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Tooltip.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import Tooltip from '../../../bootstrap/js/dist/tooltip';
+
+export default {
+    mounted(el) {
+        Tooltip.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Tooltip.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/format.js

@@ -1,27 +1,27 @@
-import dayjs from 'dayjs';
-import { computed } from 'vue';
-
-// 時間格式
-export const formatDate = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD');
-    }
-};
-
-export const formatDT = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
-    }
-};
-
-
-// 千分位格式
-export const formatThousands = computed(() => {
-    return function(number){
-        return new Intl.NumberFormat().format(number);
-    }
+import dayjs from 'dayjs';
+import { computed } from 'vue';
+
+// 時間格式
+export const formatDate = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD');
+    }
+};
+
+export const formatDT = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+    }
+};
+
+
+// 千分位格式
+export const formatThousands = computed(() => {
+    return function(number){
+        return new Intl.NumberFormat().format(number);
+    }
 });

package/index.js

@@ -1,15 +1,15 @@
-import paginate from "./paginate.vue";
-import tagEditor from "./tagEditor.vue";
-import tree from "./tree.vue";
-import vueLoadingOverlay from "./vueLoadingOverlay.vue";
-import projectNavbar from "./ProjectManagement/projectNavbar.vue";
-
-export default {
-    paginate,
-    tagEditor,
-    tree,
-    vueLoadingOverlay,
-
-    // ProjectManagement
-    projectNavbar
+import paginate from "./paginate.vue";
+import tagEditor from "./tagEditor.vue";
+import tree from "./tree.vue";
+import vueLoadingOverlay from "./vueLoadingOverlay.vue";
+import projectNavbar from "./ProjectManagement/projectNavbar.vue";
+
+export default {
+    paginate,
+    tagEditor,
+    tree,
+    vueLoadingOverlay,
+
+    // ProjectManagement
+    projectNavbar
 }

package/lightboxWithOverview.vue

@@ -1,157 +1,157 @@
-<template>
-    <Teleport to="body">
-        <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
-                           @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
-        <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
-            <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
-                <div class="d-inline-block">
-                    <div class="d-inline-block thumbnail-content rounded hover-border"
-                         :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
-                         @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-
-    <template v-if="preview">
-        <small class="text-gray-500" v-if="picturesData.length==0">無</small>
-        <div class="d-inline-block thumbnail-content thumbnail-clickable thumbnail-32 rounded hover-border me-2"
-             :style="'background-image: url(' + item.src +');'"
-             @click="showLightbox(index)"
-             v-for="(item, index) in previewPictures"></div>
-        <button type="button" class="btn btn-sm btn-outline-primary hover-border"
-                @click="showLightbox(previewCount)"
-                v-if="otherPictureCount">
-            +{{otherPictureCount}}
-        </button>
-    </template>
-</template>
-
-<script>
-    import { ref, computed } from 'vue';
-    import VueEasyLightbox from 'vue-easy-lightbox';
-
-    export default {
-        props: {
-            previewCount: {
-                type: Number,
-                required: false,
-                default: 5
-            },
-            picturesData: {
-                type: Array,
-                required: true
-            },
-            displayIndex: {
-                type: Number,
-                required: false,
-                default: 0
-            },
-            preview: {
-                type: Boolean,
-                required: false,
-                default: false
-            }
-        },
-        components: {
-            VueEasyLightbox
-        },
-        setup(props) {
-            const previewPictures = computed(() => {
-                return props.picturesData.slice(0, props.previewCount)
-            });
-            const otherPictureCount = computed(() => {
-                var count = props.picturesData.length - props.previewCount;
-                return count < 0 ? 0 : count;
-            });
-            const lightboxVisibleRef = ref(false);
-            const picturesIndexRef = ref(props.displayIndex);
-
-            const changePictureIndex = (index) => {
-                picturesIndexRef.value = index;
-            };
-
-            const showLightbox = (index) => {
-                changePictureIndex(index);
-                lightboxVisibleRef.value = true;
-            };
-
-            const hideLightbox = () => {
-                lightboxVisibleRef.value = false;
-            }
-
-            return {
-                lightboxVisibleRef,
-                picturesIndexRef, changePictureIndex,
-                showLightbox, hideLightbox,
-                previewCount: props.previewCount,
-                previewPictures,
-                otherPictureCount
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "../bootstrap/scss/functions";
-    @import "./style/scss/Settings/bs-variables";
-    @import "../bootstrap/scss/mixins";
-    @import "./style/scss/Settings/custom-variables";
-    @import "./style/scss/Settings/Mixins";
-    
-    .hover-border{
-        transition: $transition-base;
-        &:hover{
-            box-shadow: $focus-ring-box-shadow;
-        }
-    }
-
-    .vel-modal{
-        backdrop-filter: var(--backdrop-blur);
-    }
-
-    .lightbox-thumbnail-toolbar .thumbnail-content{
-        cursor: pointer;
-    }
-
-    .lightbox-thumbnail-toolbar{
-        $padding-x: 10vw;
-        position: fixed;
-        top: 0;
-        left: $padding-x;
-        right: $padding-x;
-        margin: auto;
-        z-index: 10000;
-        animation: fadeIn .5s;
-        pointer-events: none;
-        .overflow-x-auto{
-            display: inline-block;
-            max-width: 100%;
-            pointer-events: auto;
-        }
-        .thumbnail-content{
-            --bs-border-color: rgba(0,0,0, 0.12);
-            @include solid-size(40px);
-            filter: brightness(0.5);
-            transition: $transition-base;
-            &:not(:last-child){
-                margin-right: 1rem;
-            }
-            &:hover{
-                filter: brightness(.8);
-            }
-            &.active{
-                filter: brightness(1);
-            }
-            &:hover, &.active{
-                --bs-border-color: rgba(255,255,255, 0.3);
-            }
-        }
-        .hover-border:hover{
-            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
-        }
-        .overflow-x-auto{
-            --bs-emphasis-color-rgb: 255, 255, 255;
-        }
-    }
+<template>
+    <Teleport to="body">
+        <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
+                           @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
+        <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
+            <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
+                <div class="d-inline-block">
+                    <div class="d-inline-block thumbnail-content rounded hover-border"
+                         :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
+                         @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+
+    <template v-if="preview">
+        <small class="text-gray-500" v-if="picturesData.length==0">無</small>
+        <div class="d-inline-block thumbnail-content thumbnail-clickable thumbnail-32 rounded hover-border me-2"
+             :style="'background-image: url(' + item.src +');'"
+             @click="showLightbox(index)"
+             v-for="(item, index) in previewPictures"></div>
+        <button type="button" class="btn btn-sm btn-outline-primary hover-border"
+                @click="showLightbox(previewCount)"
+                v-if="otherPictureCount">
+            +{{otherPictureCount}}
+        </button>
+    </template>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import VueEasyLightbox from 'vue-easy-lightbox';
+
+    export default {
+        props: {
+            previewCount: {
+                type: Number,
+                required: false,
+                default: 5
+            },
+            picturesData: {
+                type: Array,
+                required: true
+            },
+            displayIndex: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+            preview: {
+                type: Boolean,
+                required: false,
+                default: false
+            }
+        },
+        components: {
+            VueEasyLightbox
+        },
+        setup(props) {
+            const previewPictures = computed(() => {
+                return props.picturesData.slice(0, props.previewCount)
+            });
+            const otherPictureCount = computed(() => {
+                var count = props.picturesData.length - props.previewCount;
+                return count < 0 ? 0 : count;
+            });
+            const lightboxVisibleRef = ref(false);
+            const picturesIndexRef = ref(props.displayIndex);
+
+            const changePictureIndex = (index) => {
+                picturesIndexRef.value = index;
+            };
+
+            const showLightbox = (index) => {
+                changePictureIndex(index);
+                lightboxVisibleRef.value = true;
+            };
+
+            const hideLightbox = () => {
+                lightboxVisibleRef.value = false;
+            }
+
+            return {
+                lightboxVisibleRef,
+                picturesIndexRef, changePictureIndex,
+                showLightbox, hideLightbox,
+                previewCount: props.previewCount,
+                previewPictures,
+                otherPictureCount
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../bootstrap/scss/functions";
+    @import "./style/scss/Settings/bs-variables";
+    @import "../bootstrap/scss/mixins";
+    @import "./style/scss/Settings/custom-variables";
+    @import "./style/scss/Settings/Mixins";
+    
+    .hover-border{
+        transition: $transition-base;
+        &:hover{
+            box-shadow: $focus-ring-box-shadow;
+        }
+    }
+
+    .vel-modal{
+        backdrop-filter: var(--backdrop-blur);
+    }
+
+    .lightbox-thumbnail-toolbar .thumbnail-content{
+        cursor: pointer;
+    }
+
+    .lightbox-thumbnail-toolbar{
+        $padding-x: 10vw;
+        position: fixed;
+        top: 0;
+        left: $padding-x;
+        right: $padding-x;
+        margin: auto;
+        z-index: 10000;
+        animation: fadeIn .5s;
+        pointer-events: none;
+        .overflow-x-auto{
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: auto;
+        }
+        .thumbnail-content{
+            --bs-border-color: rgba(0,0,0, 0.12);
+            @include solid-size(40px);
+            filter: brightness(0.5);
+            transition: $transition-base;
+            &:not(:last-child){
+                margin-right: 1rem;
+            }
+            &:hover{
+                filter: brightness(.8);
+            }
+            &.active{
+                filter: brightness(1);
+            }
+            &:hover, &.active{
+                --bs-border-color: rgba(255,255,255, 0.3);
+            }
+        }
+        .hover-border:hover{
+            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
+        }
+        .overflow-x-auto{
+            --bs-emphasis-color-rgb: 255, 255, 255;
+        }
+    }
 </style>