jobdone-shared-files 1.1.11 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {

package/tagEditor.vue

@@ -13,135 +13,156 @@
                         </div>
                     </div>
                 </template>
-                <input v-if="!disabled" class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
-                    v-model.trim="newTag" @keydown.enter="addTag($event)" @keyup="keyupFunction">
-                <datalist id="datalistOptions" v-if="autoCompleteShow">
-                    <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
-                </datalist>
+                <template v-if="!disabled && !isMaxTagCountReached">
+                    <input class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
+                        :maxlength="singleTagMaxLength || 50" v-model.trim="newTag" @keydown.enter="addTag($event)"
+                        @keyup="keyupFunction">
+                    <datalist id="datalistOptions" v-if="autoCompleteShow">
+                        <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
+                    </datalist>
+                </template>
             </div>
         </div>
         <div class="helper-text-box" v-if="!disabled">
-            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的"Enter"鍵，即可增加標籤。(標籤僅接受中文、英文、數字、下底線)</small>
+            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的「Enter鍵」即可增加標籤。標籤僅接受中文、英文、數字、下底線、<span class="text-danger">長度限制
+                    {{ singleTagMaxLength }} 個字元</span>。
+                <template v-if="maxTagCount > 0">
+                    <span class="text-danger">最多新增 {{ maxTagCount }} 個標籤</span>，
+                </template>標籤不可重複。</small>
         </div>
     </div>
 </template>
-<script>
+<script setup>
 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
-        }
+const props = defineProps({
+    defaultTagList: {
+        type: Array,
+        default: () => []
     },
-    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);
-            }
-        }
+    placeholder: {
+        type: String,
+        default: '請輸入標籤文字'
+    },
+    autoComplete: {
+        type: Boolean,
+        default: true
+    },
+    autoCompleteOption: {
+        type: Array,
+        default: () => []
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    singleTagMaxLength: {
+        type: Number,
+        default: 50
+    },
+    maxTagCount: {
+        type: Number,
+        default: 0
+    }
+})
 
-        // 刷新預設選中內容
-        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, '_')
-        }
+// 基本資料
+const tagAry = reactive([])
+const newTag = ref('')
 
-        // 重複標籤禁止新增
-        var isDuplicate = computed(() => {
-            return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
-        })
+const autoCompleteShow = computed(() => {
+    let show = props.autoComplete
+    if (!newTag.value || props.autoCompleteOption.length < 1) {
+        show = false
+    }
+    return show
+})
 
-        // 增加Tag
-        function addTag(event) {
-            // 檢查是否為中文輸入法組合狀態
-            if (event.isComposing || event.keyCode === 229) {
-                return
-            }
-            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 = ''
-        }
+// 輸入時 AutoComplete
+var autoCompleteTimer
+function updateAutoCompleteOption() {
+    clearTimeout(autoCompleteTimer);
+    if (newTag.value) {
+        autoCompleteTimer = setTimeout(() => {
+            emit('update-auto-complete-option', newTag.value);
+        }, 500);
+    }
+}
 
-        onMounted(() => {
-            getDefaultTag(props.defaultTagList)
-        })
-        return {
-            tagAry,
-            newTag,
-            addTag,
-            removeTag,
-            updateAutoCompleteOption,
-            autoCompleteTimer,
-            autoCompleteShow,
-            reset,
-            keyupFunction,
-            isDuplicate,
-            getDefaultTag
-        }
+// 刷新預設選中內容
+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
+})
+const isMaxTagCountReached = computed(() => {
+    return props.maxTagCount > 0 ? tagAry.length >= props.maxTagCount : false
+})
+
+// 增加Tag
+function addTag(event) {
+    // 檢查是否為中文輸入法組合狀態
+    if (event.isComposing || event.keyCode === 229) {
+        return
+    }
+    if (newTag.value && !isDuplicate.value && !isMaxTagCountReached.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)
+})
+
+defineExpose({
+    tagAry,
+    newTag,
+    addTag,
+    removeTag,
+    updateAutoCompleteOption,
+    autoCompleteTimer,
+    autoCompleteShow,
+    reset,
+    keyupFunction,
+    isDuplicate,
+    getDefaultTag,
+    isMaxTagCountReached
+})
+const emit = defineEmits(['update-auto-complete-option'])
+
 </script>
 
 <style lang="scss" scoped>
 .tag-editor {
-    background: var(--bs-gray-100);
-    border-radius: var(--bs-border-radius);
-    padding: .5rem;
+    background: var(--bs-gray-100, #f9f9fd);
+    border-radius: var(--bs-border-radius-lg, 0.5rem);
+    padding: .75rem;
 
     .helper-text-box {
+        margin-top: .25rem;
         text-align: start;
 
         .helper-text {
-            font-size: 0.75rem;
-            color: var(--bs-gray-500);
+            line-height: 125%;
+            font-size: 0.875rem;
+            color: var(--bs-gray-500, #A9B3BD);
         }
     }
 
@@ -162,9 +183,9 @@ export default {
                 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);
+                border: 1px solid var(--bs-gray-300, #DBE2E7);
+                border-radius: var(--bs-border-radius, 0.375rem);
+                box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(73, 85, 98, 0.15));
             }
 
             .opt-item {
@@ -184,7 +205,8 @@ export default {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        padding: .5rem .5rem .25rem .5rem;
+        gap: .25rem;
+        padding: .5rem;
 
         &.is-disabled:hover {
             cursor: not-allowed;
@@ -192,22 +214,41 @@ export default {
     }
 
     .new-tag-input {
+        height: 32px;
         all: unset;
         flex-grow: 1;
-        margin-bottom: .25rem;
-        background: var(--bs-gray-100);
+        background: var(--bs-gray-100, #f9f9fd);
         padding: .25rem .75rem;
         border-radius: 99px;
         border: 1px solid rgba(#000, 0);
+        transition: .2s ease-out;
+        border: 1px solid var(--bs-gray-200, #e8edf4);
+        outline-width: 3px;
+        outline-color: rgba(var(--purple-500-rgb, 100, 122, 241), 0);
+        outline-style: solid;
+
+        &::placeholder {
+            color: var(--bs-secondary-color, rgba(103, 120, 137, 0.5));
+        }
+
+        &:focus {
+            outline-width: 3px;
+            outline-color: rgba(var(--purple-500-rgb, 100, 122, 241), .25);
+            outline-style: solid;
+        }
     }
 
     .badge.rounded-pill {
-        margin: 0 .25rem .25rem 0;
         display: inline-flex;
         align-items: stretch;
         overflow: hidden;
+        height: 32px;
+        padding: .5rem .75rem;
+        margin: 0;
 
         .tag-text {
+            font-size: .75rem;
+            font-weight: 500;
             margin: auto;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -221,7 +262,7 @@ export default {
                 display: block;
                 content: ' ';
                 height: 100%;
-                border-left: 1px solid var(--bs-gray-300);
+                border-left: 1px solid var(--bs-gray-300, #DBE2E7);
                 margin: 0 0.25rem;
             }
         }
@@ -235,7 +276,7 @@ export default {
             .material-icons {
                 font-size: 16px;
                 line-height: 16px;
-                color: var(--bs-purple);
+                color: var(--bs-purple, #647AF1);
                 opacity: .5;
                 transition: .3s;
             }
@@ -249,6 +290,5 @@ export default {
             }
         }
     }
-
 }
 </style>