jobdone-shared-files 1.0.13 → 1.0.14

package/tagEditor.vue

@@ -1,250 +1,250 @@
-<template>
-    <div class="tag-editor" v-if="tagAry">
-        <div class="main-cont">
-            <div class="form-control form-control-sm" :class="disabled ? 'is-disabled' : ''">
-                <template v-if="tagAry.length">
-                    <div class="badge rounded-pill" :class="disabled ? 'badge-outline-gray ' : 'badge-outline-purple'"
-                        v-for="(tag, index) in tagAry" :key="index" :title="tag">
-                        <div class="tag-text">{{ tag }}</div>
-                        <div class="remove-btn-box" v-if="!disabled">
-                            <button type="button" class="remove-btn" @click="removeTag(index)"><span
-                                    class="material-icons">close</span>
-                            </button>
-                        </div>
-                    </div>
-                </template>
-                <input v-if="!disabled" class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
-                    v-model.trim="newTag" @keydown.enter="addTag" @keyup="keyupFunction">
-                <datalist id="datalistOptions" v-if="autoCompleteShow">
-                    <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
-                </datalist>
-            </div>
-        </div>
-        <div class="helper-text-box" v-if="!disabled">
-            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的"Enter"鍵，即可增加標籤。(標籤僅接受中文、英文、數字、下底線)</small>
-        </div>
-    </div>
-</template>
-<script>
-import { ref, reactive, onMounted, computed } from 'vue'
-
-export default {
-    props: {
-        defaultTagList: {
-            type: Array,
-            default: () => []
-        },
-        placeholder: {
-            type: String,
-            default: '請在此處輸入標籤文字'
-        },
-        autoComplete: {
-            type: Boolean,
-            default: true
-        },
-        autoCompleteOption: {
-            type: Array,
-            default: () => []
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, { emit }) {
-        // 基本資料
-        const tagAry = reactive([])
-        const newTag = ref('')
-
-        const autoCompleteShow = computed(() => {
-            let show = props.autoComplete
-            if (!newTag.value || props.autoCompleteOption.length < 1) {
-                show = false
-            }
-            return show
-        })
-        // 輸入時 AutoComplete
-        var autoCompleteTimer
-        function updateAutoCompleteOption() {
-            clearTimeout(autoCompleteTimer);
-            if (newTag.value) {
-                autoCompleteTimer = setTimeout(() => {
-                    emit('update-auto-complete-option', newTag.value);
-                }, 500);
-            }
-        }
-
-        // 刷新預設選中內容
-        function getDefaultTag(updateData = []) {
-            tagAry.splice(0, tagAry.length, ...updateData)
-        }
-        function keyupFunction() {
-            if (props.autoCompleteOption) {
-                updateAutoCompleteOption()
-            }
-            newTag.value = newTag.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '_')
-        }
-
-        // 重複標籤禁止新增
-        var isDuplicate = computed(() => {
-            return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
-        })
-
-        // 增加Tag
-        function addTag() {
-            if (newTag.value && !isDuplicate.value) {
-                tagAry.push(newTag.value)
-            }
-            newTag.value = ''
-        }
-        // 移除Tag
-        function removeTag(index) {
-            tagAry.splice(index, 1)
-        }
-        function reset() {
-            tagAry.splice(0, tagAry.length)
-            newTag.value = ''
-        }
-
-        onMounted(() => {
-            getDefaultTag(props.defaultTagList)
-        })
-        return {
-            tagAry,
-            newTag,
-            addTag,
-            removeTag,
-            updateAutoCompleteOption,
-            autoCompleteTimer,
-            autoCompleteShow,
-            reset,
-            keyupFunction,
-            isDuplicate,
-            getDefaultTag
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.tag-editor {
-    background: var(--bs-gray-100);
-    border-radius: var(--bs-border-radius);
-    padding: .5rem;
-
-    .helper-text-box {
-        text-align: start;
-
-        .helper-text {
-            font-size: 0.75rem;
-            color: var(--bs-gray-500);
-        }
-    }
-
-    .main-cont {
-        position: relative;
-
-        .auto-complete-box {
-            all: unset;
-            display: none;
-            visibility: hidden;
-            position: absolute;
-            width: 90%;
-            overflow: hidden;
-
-            &.show {
-                visibility: visible;
-                display: block;
-                position: absolute;
-                top: calc(100% + 0.25rem);
-                background: #fff;
-                border: 1px solid var(--bs-gray-300);
-                border-radius: var(--bs-border-radius);
-                box-shadow: var(--bs-box-shadow);
-            }
-
-            .opt-item {
-                padding: 0.5rem;
-                cursor: pointer;
-                overflow: hidden;
-                text-overflow: ellipsis;
-
-                &:not(:last-child) {
-                    border-bottom: 1px solid var(--bs-gray-300);
-                }
-            }
-        }
-    }
-
-    .form-control {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        padding: .5rem .5rem .25rem .5rem;
-
-        &.is-disabled:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    .new-tag-input {
-        all: unset;
-        flex-grow: 1;
-        margin-bottom: .25rem;
-        background: var(--bs-gray-100);
-        padding: .25rem .75rem;
-        border-radius: 99px;
-        border: 1px solid rgba(#000, 0);
-    }
-
-    .badge.rounded-pill {
-        margin: 0 .25rem .25rem 0;
-        display: inline-flex;
-        align-items: stretch;
-        overflow: hidden;
-
-        .tag-text {
-            margin: auto;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .remove-btn-box {
-            display: flex;
-            align-items: stretch;
-
-            &::before {
-                display: block;
-                content: ' ';
-                height: 100%;
-                border-left: 1px solid var(--bs-gray-300);
-                margin: 0 0.25rem;
-            }
-        }
-
-        .remove-btn {
-            all: unset;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .material-icons {
-                font-size: 16px;
-                line-height: 16px;
-                color: var(--bs-purple);
-                opacity: .5;
-                transition: .3s;
-            }
-
-            &:hover {
-                cursor: pointer;
-
-                .material-icons {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-}
+<template>
+    <div class="tag-editor" v-if="tagAry">
+        <div class="main-cont">
+            <div class="form-control form-control-sm" :class="disabled ? 'is-disabled' : ''">
+                <template v-if="tagAry.length">
+                    <div class="badge rounded-pill" :class="disabled ? 'badge-outline-gray ' : 'badge-outline-purple'"
+                        v-for="(tag, index) in tagAry" :key="index" :title="tag">
+                        <div class="tag-text">{{ tag }}</div>
+                        <div class="remove-btn-box" v-if="!disabled">
+                            <button type="button" class="remove-btn" @click="removeTag(index)"><span
+                                    class="material-icons">close</span>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+                <input v-if="!disabled" class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
+                    v-model.trim="newTag" @keydown.enter="addTag" @keyup="keyupFunction">
+                <datalist id="datalistOptions" v-if="autoCompleteShow">
+                    <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
+                </datalist>
+            </div>
+        </div>
+        <div class="helper-text-box" v-if="!disabled">
+            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的"Enter"鍵，即可增加標籤。(標籤僅接受中文、英文、數字、下底線)</small>
+        </div>
+    </div>
+</template>
+<script>
+import { ref, reactive, onMounted, computed } from 'vue'
+
+export default {
+    props: {
+        defaultTagList: {
+            type: Array,
+            default: () => []
+        },
+        placeholder: {
+            type: String,
+            default: '請在此處輸入標籤文字'
+        },
+        autoComplete: {
+            type: Boolean,
+            default: true
+        },
+        autoCompleteOption: {
+            type: Array,
+            default: () => []
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        // 基本資料
+        const tagAry = reactive([])
+        const newTag = ref('')
+
+        const autoCompleteShow = computed(() => {
+            let show = props.autoComplete
+            if (!newTag.value || props.autoCompleteOption.length < 1) {
+                show = false
+            }
+            return show
+        })
+        // 輸入時 AutoComplete
+        var autoCompleteTimer
+        function updateAutoCompleteOption() {
+            clearTimeout(autoCompleteTimer);
+            if (newTag.value) {
+                autoCompleteTimer = setTimeout(() => {
+                    emit('update-auto-complete-option', newTag.value);
+                }, 500);
+            }
+        }
+
+        // 刷新預設選中內容
+        function getDefaultTag(updateData = []) {
+            tagAry.splice(0, tagAry.length, ...updateData)
+        }
+        function keyupFunction() {
+            if (props.autoCompleteOption) {
+                updateAutoCompleteOption()
+            }
+            newTag.value = newTag.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '_')
+        }
+
+        // 重複標籤禁止新增
+        var isDuplicate = computed(() => {
+            return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
+        })
+
+        // 增加Tag
+        function addTag() {
+            if (newTag.value && !isDuplicate.value) {
+                tagAry.push(newTag.value)
+            }
+            newTag.value = ''
+        }
+        // 移除Tag
+        function removeTag(index) {
+            tagAry.splice(index, 1)
+        }
+        function reset() {
+            tagAry.splice(0, tagAry.length)
+            newTag.value = ''
+        }
+
+        onMounted(() => {
+            getDefaultTag(props.defaultTagList)
+        })
+        return {
+            tagAry,
+            newTag,
+            addTag,
+            removeTag,
+            updateAutoCompleteOption,
+            autoCompleteTimer,
+            autoCompleteShow,
+            reset,
+            keyupFunction,
+            isDuplicate,
+            getDefaultTag
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag-editor {
+    background: var(--bs-gray-100);
+    border-radius: var(--bs-border-radius);
+    padding: .5rem;
+
+    .helper-text-box {
+        text-align: start;
+
+        .helper-text {
+            font-size: 0.75rem;
+            color: var(--bs-gray-500);
+        }
+    }
+
+    .main-cont {
+        position: relative;
+
+        .auto-complete-box {
+            all: unset;
+            display: none;
+            visibility: hidden;
+            position: absolute;
+            width: 90%;
+            overflow: hidden;
+
+            &.show {
+                visibility: visible;
+                display: block;
+                position: absolute;
+                top: calc(100% + 0.25rem);
+                background: #fff;
+                border: 1px solid var(--bs-gray-300);
+                border-radius: var(--bs-border-radius);
+                box-shadow: var(--bs-box-shadow);
+            }
+
+            .opt-item {
+                padding: 0.5rem;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid var(--bs-gray-300);
+                }
+            }
+        }
+    }
+
+    .form-control {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: .5rem .5rem .25rem .5rem;
+
+        &.is-disabled:hover {
+            cursor: not-allowed;
+        }
+    }
+
+    .new-tag-input {
+        all: unset;
+        flex-grow: 1;
+        margin-bottom: .25rem;
+        background: var(--bs-gray-100);
+        padding: .25rem .75rem;
+        border-radius: 99px;
+        border: 1px solid rgba(#000, 0);
+    }
+
+    .badge.rounded-pill {
+        margin: 0 .25rem .25rem 0;
+        display: inline-flex;
+        align-items: stretch;
+        overflow: hidden;
+
+        .tag-text {
+            margin: auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .remove-btn-box {
+            display: flex;
+            align-items: stretch;
+
+            &::before {
+                display: block;
+                content: ' ';
+                height: 100%;
+                border-left: 1px solid var(--bs-gray-300);
+                margin: 0 0.25rem;
+            }
+        }
+
+        .remove-btn {
+            all: unset;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .material-icons {
+                font-size: 16px;
+                line-height: 16px;
+                color: var(--bs-purple);
+                opacity: .5;
+                transition: .3s;
+            }
+
+            &:hover {
+                cursor: pointer;
+
+                .material-icons {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+}
 </style>

package/tree.vue

@@ -1,69 +1,69 @@
-<template>
-    <form ref="form">
-        <tree-item v-for="(item, index) in items" :key="item.id" :item="item" :index="index" :click-item="clickItem" :active-id="activeId" :tree-item-class="treeItemClass">
-            <template v-slot:icon>
-                <slot name="icon"></slot>
-            </template>
-        </tree-item>
-    </form>
-</template>
-
-<script>
-    import { ref, computed } from 'vue';
-    import TreeItem from './treeItem.vue';
-    export default {
-        props: {
-            items: {
-                type: Array,
-                default: function () {
-                    return [];
-                }
-            },
-            clickItem: {
-                type: Function
-            },
-            size: {
-                type: String,
-                default: ""
-            },
-            bgColor: {
-                type: String,
-                default: ""
-            }
-        },
-        components: {
-            TreeItem
-        },
-        setup(props, { emit }) {
-            const form = ref(null);
-            const activeId = ref("");
-            const clickItem = (item) => {
-                activeId.value = item.id;
-                props.clickItem(item);
-            };
-            const treeItemClass = computed(() => {
-                var classList = [];
-                if (props.size == 'sm') {
-                    classList.push('tree-item-sm');
-                }
-                if (props.bgColor == 'white') {
-                    classList.push('tree-item-in-white');
-                }
-                return classList;
-            });
-            const reset = () => {
-                activeId.value = "";
-                form.reset();
-            };
-            return {
-                form: form,
-                treeItemClass: treeItemClass,
-                activeId: activeId,
-                clickItem: clickItem,
-                reset: reset
-            };
-        }
-    }
-</script>
-<style>
-</style>
+<template>
+    <form ref="form">
+        <tree-item v-for="(item, index) in items" :key="item.id" :item="item" :index="index" :click-item="clickItem" :active-id="activeId" :tree-item-class="treeItemClass">
+            <template v-slot:icon>
+                <slot name="icon"></slot>
+            </template>
+        </tree-item>
+    </form>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import TreeItem from './treeItem.vue';
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: function () {
+                    return [];
+                }
+            },
+            clickItem: {
+                type: Function
+            },
+            size: {
+                type: String,
+                default: ""
+            },
+            bgColor: {
+                type: String,
+                default: ""
+            }
+        },
+        components: {
+            TreeItem
+        },
+        setup(props, { emit }) {
+            const form = ref(null);
+            const activeId = ref("");
+            const clickItem = (item) => {
+                activeId.value = item.id;
+                props.clickItem(item);
+            };
+            const treeItemClass = computed(() => {
+                var classList = [];
+                if (props.size == 'sm') {
+                    classList.push('tree-item-sm');
+                }
+                if (props.bgColor == 'white') {
+                    classList.push('tree-item-in-white');
+                }
+                return classList;
+            });
+            const reset = () => {
+                activeId.value = "";
+                form.reset();
+            };
+            return {
+                form: form,
+                treeItemClass: treeItemClass,
+                activeId: activeId,
+                clickItem: clickItem,
+                reset: reset
+            };
+        }
+    }
+</script>
+<style>
+</style>