jobdone-shared-files 1.0.9 → 1.0.11

package/autocompleteSelect.vue

@@ -3,14 +3,14 @@
         <!-- preview input -->
         <button type="button" class='form-control autocomplete-select-component-display-selecting' :disabled="disabled"
             :class="[triggerClass, previewInput]">{{
-                previewText
+                selectedPreviewText
             }}</button>
         <!-- search input -->
         <input class='form-control autocomplete-select-component-keyword-filter-input' :class="[triggerClass, searchInput]"
             type="text" ref="keywordFilterInput" v-model="keyword"
-            :placeholder="searchPlaceholder == '' ? previewText : searchPlaceholder" maxlength="50"
-            @keydown.enter="keyboardSelectConfirm()" @keydown.up="keyboardSwitch(-1)" @keydown.down="keyboardSwitch(1)"
-            @change="keyboardSwitchIndexReset()">
+            :placeholder="searchPlaceholder == '' ? selectedPreviewText : searchPlaceholder" maxlength="50"
+            @keydown.enter="keyboardSelectConfirm($event)" @keydown.up="keyboardSwitch($event, -1)"
+            @keydown.down="keyboardSwitch($event, 1)" @change="keyboardSwitchIndexReset()">
         <Teleport :to="listPut">
             <div class="autocomplete-select-component-selector-content" :class="{ 'active': active }"
                 ref="componentContentList" :style="positionStyle">
@@ -27,7 +27,8 @@
                         </div>
                     </li>
                     <template v-if="active">
-                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt.name" :id="`autocomplete-select-component-opt-item_${idx}`">
+                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt.name"
+                            :id="`autocomplete-select-component-opt-item_${idx}`">
                             <button class="autocomplete-select-component-opt-item" type="button"
                                 :class="idx == keyboardSwitchIndex ? 'active' : ''">
                                 <template v-if="htmlOption">
@@ -96,12 +97,12 @@ const props = defineProps({
     resetValue: {
         default: ''
     },
-    disabled:{
-        type:Boolean,
+    disabled: {
+        type: Boolean,
         default: false
     },
 
-   
+
     previewKey: {
         type: String,
         default: '',
@@ -122,7 +123,7 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
-    
+
 
 });
 
@@ -138,7 +139,7 @@ const keywordFilterInput = ref(null)
 const active = ref(false)
 const domPosition = ref({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 })
 function activeSelector() {
-    if(props.disabled){
+    if (props.disabled) {
         return
     }
     active.value = true
@@ -168,8 +169,6 @@ function leave() {
     keywordFilterInput.value.blur()
 }
 
-
-
 // 確認傳入選單列表內的選項Type，只檢查第一個，請內容統一，不要傳奇怪的東西進來
 const allowOptItemType = ['string', 'number', 'object']
 const optItemType = computed(() => {
@@ -217,7 +216,7 @@ const filterList = computed(() => {
     })
 })
 
-// 從選項列表中挖出整個選中的item。因選中的值(可能是某個key)，挖不到就直接吐props的值出來。
+// 從選項列表中挖出整個選中的item，因選中的值(可能是某個key)
 const selectedItem = computed(() => {
     if (!props.selectedData) {
         return
@@ -227,12 +226,11 @@ const selectedItem = computed(() => {
     if (props.bindingKey !== '') {
         return props.opts.find(i => i[props.bindingKey.toString()] == props.selectedData) ?? props.selectedData
     }
-
     return props.selectedData
 })
 
 
-// 選項的展示 與 選中的值
+// 整理 選項與選中值 的顯示文字
 function previewAdjust(itemObj) {
     if (props.previewKey !== '') {
         let strAry = props.previewKey.split('+')
@@ -253,12 +251,22 @@ function previewAdjust(itemObj) {
         if (isUndefined) {
             return props.isUndefinedHint
         }
-        return finalStr ? finalStr : itemObj
+        return finalStr ? finalStr : props.placeholder
     }
     return itemObj
 }
 
-const previewText = computed(() => {
+// 強制更新selectedPreviewText
+const selectedPreviewTextUpdateCount = ref(0)
+function selectedPreviewTextUpdate() {
+    selectedPreviewTextUpdateCount.value++
+}
+
+// 選中的值的顯示
+const selectedPreviewText = computed(() => {
+
+    let updateComputed = selectedPreviewTextUpdateCount.value + 1 // 讓外部可以強制更新這個computed,不要刪除
+
     if (!selectedItem.value || Object.keys(selectedItem.value).length === 0) {
         return props.placeholder
     }
@@ -267,6 +275,7 @@ const previewText = computed(() => {
 
 // 清除選擇內容
 function clearSelected() {
+    selectedPreviewTextUpdateCount.value = 0
     emit('select', props.resetValue)
     leave()
 }
@@ -276,21 +285,29 @@ function selectConfirm(v) {
     if (!v) {
         return
     }
+    selectedPreviewTextUpdate()
     emit('select', JSON.parse(JSON.stringify(v)))
     leave()
     keyboardSwitchIndexReset()
 }
 
 // 鍵盤送出
-function keyboardSelectConfirm() {
+function keyboardSelectConfirm(event) {
+    if (event.isComposing) {
+        return
+    }
     if (filterList.value?.length) {
         selectConfirm(filterList.value[keyboardSwitchIndex.value])
+        selectedPreviewTextUpdate()
     }
 }
 
 // 鍵盤挑選
 const keyboardSwitchIndex = ref(0)
-function keyboardSwitch(v) {
+function keyboardSwitch(event, v) {
+    if (event.isComposing) {
+        return
+    }
     if (filterList.value?.length < 1) {
         keyboardSwitchIndexReset()
         return
@@ -317,7 +334,7 @@ function keyboardSwitchIndexReset() {
 
 // 樣式
 const previewInput = computed(() => {
-    if (previewText.value == props.placeholder) {
+    if (selectedPreviewText.value == props.placeholder) {
         return 'autocomplete-select-component-value-null'
     }
     return ''
@@ -328,7 +345,7 @@ const searchInput = computed(() => {
     }
     return ''
 })
-function initTrigger() {
+function initTrigger(event) {
     if (componentContentInput.value.contains(event.target) || componentContentList.value.contains(event.target)) {
         activeSelector()
     } else {

package/package.json

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