w-component-vue 2.3.4 → 2.3.6

package/docs/module-WTextSelect.html

@@ -731,7 +731,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggest.html

@@ -791,7 +791,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html

@@ -563,7 +563,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html

@@ -239,7 +239,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -479,7 +479,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -263,7 +263,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -503,7 +503,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -287,7 +287,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -563,7 +563,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -347,7 +347,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -587,7 +587,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -371,7 +371,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -251,7 +251,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTooltip.html

@@ -431,7 +431,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -597,9 +597,9 @@
     </tr><tr>
         <td><code>editorRenameCancelBtnText</code></td>
         <td>String</td>
-        <td><code>'Save'</code></td>
+        <td><code>'Cancel'</code></td>
         <td>No</td>
-        <td>輸入變更文字彈窗之取消按鈕文字字串，預設'Save'</td>
+        <td>輸入變更文字彈窗之取消按鈕文字字串，預設'Cancel'</td>
     </tr><tr>
         <td><code>editorRenameCancelBtnTextColor</code></td>
         <td>String</td>
@@ -1311,9 +1311,9 @@
     </tr><tr>
         <td><code>editorRenameCancelBtnText</code></td>
         <td>String</td>
-        <td><code>'Save'</code></td>
+        <td><code>'Cancel'</code></td>
         <td>No</td>
-        <td>輸入變更文字彈窗之取消按鈕文字字串，預設'Save'</td>
+        <td>輸入變更文字彈窗之取消按鈕文字字串，預設'Cancel'</td>
     </tr><tr>
         <td><code>editorRenameCancelBtnTextColor</code></td>
         <td>String</td>
@@ -1487,7 +1487,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -299,7 +299,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -275,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -147,7 +147,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 15:49:41 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWExplorer.vue

@@ -2195,7 +2195,7 @@ export default {
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)
 
-            //fun, 僅處理並回傳新項目, 不處理刪除項目
+            //fun, 僅處理並回傳新項目, 不處理其他項目
             let fun = function() {
                 return new Promise(function(resolve, reject) {
                     let id = Math.floor(Math.random() * 1000)

package/src/AppZoneWGroupTags.vue

@@ -165,7 +165,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'inputTextColor & inputTextBorderColor & inputTextBorderColorHover & inputTextBorderColorFocus & inputTextButtonColor & inputTextButtonColorHover & inputTextButtonColorHover & inputTextBackgroundColor & inputTextBackgroundColorHover & inputTextBackgroundColorFocus'"
+                    :casename="'inputTextColor & inputTextBorderColor & inputTextBorderColorHover & inputTextBorderColorFocus & inputTextButtonIcon & inputTextButtonColor & inputTextButtonColorHover & inputTextButtonColorHover & inputTextBackgroundColor & inputTextBackgroundColorHover & inputTextBackgroundColorFocus'"
                 ></demolink>
 
                 <w-group-tags
@@ -174,6 +174,7 @@
                     :inputTextBorderColor="'indigo darken-1'"
                     :inputTextBorderColorHover="'indigo darken-1'"
                     :inputTextBorderColorFocus="'indigo darken-2'"
+                    :inputTextButtonIcon="mdiCloudPlus"
                     :inputTextButtonColor="'indigo'"
                     :inputTextButtonColorHover="'indigo'"
                     :inputTextButtonColorFocus="'indigo darken-1'"
@@ -267,11 +268,12 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & addButtonTextColor & addButtonTextColorHover & addButtonIconColor & addButtonIconColorHover & addButtonBackgroundColor &  addButtonBackgroundColorHover'"
+                    :casename="'object items & addButtonIcon & addButtonTextColor & addButtonTextColorHover & addButtonIconColor & addButtonIconColorHover & addButtonBackgroundColor &  addButtonBackgroundColorHover'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.objects"
+                    :addButtonIcon="mdiCloudPlus"
                     :addButtonTextColor="'white'"
                     :addButtonTextColorHover="'white'"
                     :addButtonIconColor="'white'"
@@ -889,7 +891,7 @@
 </template>
 
 <script>
-import { mdiEmailVariant, mdiChartBubble, mdiCodepen, mdiPlusCircle } from '@mdi/js'
+import { mdiEmailVariant, mdiChartBubble, mdiCodepen, mdiPlusCircle, mdiCloudPlus } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WGroupTags from './components/WGroupTags.vue'
 import WButtonChip from './components/WButtonChip.vue'
@@ -909,6 +911,7 @@ export default {
             mdiChartBubble,
             mdiCodepen,
             mdiPlusCircle,
+            mdiCloudPlus,
             'WGroupTags': {
                 'strings': [
                     'Dashboard',

package/src/AppZoneWSegmentsVertical.vue

@@ -162,13 +162,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-segments-vertical'"
-                    :casename="'funSegmentBackgroundColor & segmentBorderColor'"
+                    :casename="'funSegmentBackgroundColor & funSegmentBorderColor'"
                 ></demolink>
 
                 <w-segments-vertical
                     :items="WSegmentsVertical.items"
-                    :funSegmentBackgroundColor="genSegmentBackgroundColor"
-                    :segmentBorderColor="'rgba(200,200,200,0.1)'"
+                    :funSegmentBackgroundColor="getSegmentBackgroundColor"
+                    :funSegmentBorderColor="getSegmentBorderColor"
                 ></w-segments-vertical>
 
             </div>
@@ -498,8 +498,19 @@ export default {
         }
     },
     methods: {
-        genSegmentBackgroundColor: function(item) {
-            // console.log('genSegmentBackgroundColor', item)
+        getSegmentBackgroundColor: function(item) {
+            // console.log('getSegmentBackgroundColor', item)
+            let kp = {
+                Audience: '#ffb13e',
+                Conversions: '#a2cf70',
+                Management: '#4ac2fd',
+                Actions: '#9f77ff',
+            }
+            let c = kp[item.type]
+            return c
+        },
+        getSegmentBorderColor: function(item) {
+            // console.log('getSegmentBorderColor', item)
             let kp = {
                 Audience: '#FF9800',
                 Conversions: '#8BC34A',

package/src/AppZoneWTree.vue

@@ -1915,7 +1915,7 @@ export default {
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)
 
-            //fun, 僅處理並回傳新項目, 不處理刪除項目
+            //fun, 僅處理並回傳新項目, 不處理其他項目
             let fun = function() {
                 return new Promise(function(resolve, reject) {
                     let id = Math.floor(Math.random() * 1000)

package/src/components/WGroupTags.vue

@@ -114,7 +114,7 @@
                 <template v-if="isObjValue">
                     <WButtonChip
                         :style="`${useMarginStyle}`"
-                        :icon="mdiPlusCircle"
+                        :icon="addButtonIcon"
                         :iconColor="addButtonIconColor"
                         :iconColorHover="addButtonIconColorHover"
                         :text="addButtonText"
@@ -123,6 +123,9 @@
                         :backgroundColor="addButtonBackgroundColor"
                         :backgroundColorHover="addButtonBackgroundColorHover"
                         :tooltip="addButtonTooltip"
+                        :paddingStyle="{v:3,h:12}"
+                        _shiftLeft="shiftLeft"
+                        _shiftRight="shiftRight"
                         @click="clickAddBtn"
                     ></WButtonChip>
                 </template>
@@ -145,7 +148,7 @@
                         :backgroundColorHover="inputTextBackgroundColorHover"
                         :backgroundColorFocus="inputTextBackgroundColorFocus"
                         :showExpansionIcon="false"
-                        :rightIcon="mdiPlusCircle"
+                        :rightIcon="inputTextButtonIcon"
                         :rightIconColor="inputTextButtonColor"
                         :rightIconColorHover="inputTextButtonColorHover"
                         :rightIconColorFocus="inputTextButtonColorFocus"
@@ -231,6 +234,7 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [inputTextBorderColor='grey lighten-1'] 輸入輸入框邊框顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [inputTextBorderColorHover='grey'] 輸入滑鼠移入時輸入框邊框字串，預設'grey'
  * @vue-prop {String} [inputTextBorderColorFocus='grey'] 輸入取得焦點時輸入框文字邊框字串，預設'grey'
+ * @vue-prop {String} [inputTextButtonIcon=mdiPlusCircle] 輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle
  * @vue-prop {String} [inputTextButtonColor='grey lighten-1'] 輸入輸入框按鈕顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [inputTextButtonColorHover='grey'] 輸入滑鼠移入時輸入框按鈕顏色字串，預設'grey'
  * @vue-prop {String} [inputTextButtonColorFocus='grey'] 輸入取得焦點時輸入框按鈕顏色字串，預設'grey'
@@ -244,6 +248,7 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [addButtonText='Add'] 輸入新增按鈕文字字串，預設'Add'
  * @vue-prop {String} [addButtonTextColor='black'] 輸入新增按鈕文字顏色字串，預設'black'
  * @vue-prop {String} [addButtonTextColorHover='black'] 輸入滑鼠移入時新增按鈕文字顏色字串，預設'black'
+ * @vue-prop {String} [addButtonIcon=mdiPlusCircle] 輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle
  * @vue-prop {String} [addButtonIconColor='pink darken-1'] 輸入新增按鈕圖標顏色字串，預設'pink darken-1'
  * @vue-prop {String} [addButtonIconColorHover='pink darken-1'] 輸入滑鼠移入時新增按鈕圖標顏色字串，預設'pink darken-1'
  * @vue-prop {String} [addButtonBackgroundColor='white'] 輸入新增按鈕背景顏色字串，預設'white'
@@ -457,6 +462,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        inputTextButtonIcon: {
+            type: String,
+            default: mdiPlusCircle,
+        },
         inputTextButtonColor: {
             type: String,
             default: 'grey lighten-1',
@@ -509,6 +518,10 @@ export default {
             type: String,
             default: 'black',
         },
+        addButtonIcon: {
+            type: String,
+            default: mdiPlusCircle,
+        },
         addButtonIconColor: {
             type: String,
             default: 'pink darken-1',
@@ -779,47 +792,63 @@ export default {
 
             let vo = this
 
-            //check
-            if (trim(vo.userinput) === '') {
-                return
-            }
-
-            //check
-            let r = filter(vo.itemsTrans, (v) => {
-                return isEqual(v, vo.userinput)
-            })
-            if (size(r) >= 1) {
+            //isObjValue
+            if (vo.isObjValue) {
 
                 //$nextTick
                 vo.$nextTick(() => {
 
                     //emit
-                    vo.$emit('error', 'disable duplicate values')
-
-                    //clear
-                    vo.userinput = ''
+                    vo.$emit('click-add', null)
 
                 })
 
-                return
             }
+            else {
 
-            //$nextTick
-            vo.$nextTick(() => {
+                //check
+                if (trim(vo.userinput) === '') {
+                    return
+                }
+
+                //check
+                let r = filter(vo.itemsTrans, (v) => {
+                    return isEqual(v, vo.userinput)
+                })
+                if (size(r) >= 1) {
 
-                //push
-                vo.itemsTrans.push(trim(vo.userinput))
+                    //$nextTick
+                    vo.$nextTick(() => {
 
-                //emit
-                vo.$emit('input', vo.itemsTrans)
+                        //emit
+                        vo.$emit('error', 'disable duplicate values')
 
-                //emit
-                vo.$emit('click-add', vo.userinput)
+                        //clear
+                        vo.userinput = ''
 
-                //clear
-                vo.userinput = ''
+                    })
 
-            })
+                    return
+                }
+
+                //$nextTick
+                vo.$nextTick(() => {
+
+                    //push
+                    vo.itemsTrans.push(trim(vo.userinput))
+
+                    //emit
+                    vo.$emit('input', vo.itemsTrans)
+
+                    //emit
+                    vo.$emit('click-add', vo.userinput)
+
+                    //clear
+                    vo.userinput = ''
+
+                })
+
+            }
 
         },
 

package/src/components/WSegmentsVertical.vue

@@ -24,7 +24,7 @@
                 </div>
 
                 <div
-                    :style="`position:absolute; top:${s.y}px; left:-${segmentSize/2}px; width:${segmentSize}px; height:${s.height}px; background:${getSegmentBackgroundColor(ks)}; border:1px solid ${useSegmentBorderColor}; ${useSegmentCursor}`"
+                    :style="`position:absolute; top:${s.y}px; left:-${segmentSize/2}px; width:${segmentSize}px; height:${s.height}px; background:${getSegmentBackgroundColor(ks)}; border:1px solid ${getSegmentBorderColor(ks)}; ${useSegmentCursor}`"
                     :key="'sample-block'+ks"
                     v-for="(s,ks) in useSamplesLocs"
                     @click="(ev)=>{clickSegment(ev,s.data)}"
@@ -159,9 +159,10 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String} [tickLabelColor='#666'] 輸入刻度文字顏色字串，預設'#666'
  * @vue-prop {String} [tickLabelFontSize='0.7rem'] 輸入刻度文字字型大小字串，預設'0.7rem'
  * @vue-prop {String} [segmentBackgroundColor='#FFB74D'] 輸入區塊背景顏色字串，預設'#FFB74D'
+ * @vue-prop {Function} [funSegmentBackgroundColor=null] 輸入處理項目數據之區塊背景函數，預設null
  * @vue-prop {String} [segmentBorderColor='#FFB74D'] 輸入區塊邊框顏色字串，預設'#FB8C00'
+ * @vue-prop {Function} [funSegmentBorderColor=null] 輸入處理項目數據之區塊邊框函數，預設null
  * @vue-prop {Number} [segmentSize=6] 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6
- * @vue-prop {Function} [funSegmentBackgroundColor=null] 輸入處理項目數據之區塊背景函數，預設null
  * @vue-prop {Boolean} [textWithPopup=false] 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false
  * @vue-prop {String} [textFontSize='0.7rem'] 輸入項目文字區之文字字型大小字串，預設'0.7rem'
  * @vue-prop {String} [textColor='#222'] 輸入項目文字區之文字顏色字串，預設'#222'
@@ -256,18 +257,22 @@ export default {
             type: String,
             default: '#FFB74D',
         },
+        funSegmentBackgroundColor: {
+            type: Function,
+            default: null,
+        },
         segmentBorderColor: {
             type: String,
             default: '#FB8C00',
         },
+        funSegmentBorderColor: {
+            type: Function,
+            default: null,
+        },
         segmentSize: {
             type: Number,
             default: 6,
         },
-        funSegmentBackgroundColor: {
-            type: Function,
-            default: null,
-        },
         textWithPopup: {
             type: Boolean,
             default: false,
@@ -642,11 +647,6 @@ export default {
             return color2hex(vo.tickLabelColor)
         },
 
-        useSegmentBorderColor: function() {
-            let vo = this
-            return color2hex(vo.segmentBorderColor)
-        },
-
         useSegmentCursor: function() {
             let vo = this
             let b = vo.segmentCanClick
@@ -723,6 +723,26 @@ export default {
             return c
         },
 
+        getSegmentBorderColor: function(k) {
+            let vo = this
+
+            //color2hex
+            let c = color2hex(vo.segmentBorderColor)
+
+            //check
+            if (isfun(vo.funSegmentBorderColor)) {
+
+                //item
+                let item = get(vo, `useItems.${k}.data`, {})
+
+                //funSegmentBorderColor
+                c = vo.funSegmentBorderColor(item, c)
+
+            }
+
+            return c
+        },
+
         clickText: function(ev, item) {
             let vo = this
 

package/src/components/WTree.vue

@@ -426,7 +426,7 @@ let gm = globalMemory()
  * @vue-prop {String} [editorRenameInputTextBottomLineBorderColor='grey lighten-1'] 輸入變更文字彈窗之輸入文字框之底部線顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [editorRenameInputTextBottomLineBorderColorHover='grey'] 輸入變更文字彈窗之輸入文字框之滑鼠移入時底部線顏色字串，預設'grey'
  * @vue-prop {String} [editorRenameInputTextBottomLineBorderColorFocus='blue darken-1'] 輸入變更文字彈窗之輸入文字框之取得焦點時底部線顏色字串，預設'blue darken-1'
- * @vue-prop {String} [editorRenameCancelBtnText='Save'] 輸入變更文字彈窗之取消按鈕文字字串，預設'Save'
+ * @vue-prop {String} [editorRenameCancelBtnText='Cancel'] 輸入變更文字彈窗之取消按鈕文字字串，預設'Cancel'
  * @vue-prop {String} [editorRenameCancelBtnTextColor='grey darken-3'] 輸入變更文字彈窗之取消按鈕文字顏色字串，預設'grey darken-3'
  * @vue-prop {String} [editorRenameCancelBtnTextColorHover='grey darken-2'] 輸入變更文字彈窗之滑鼠移入時取消按鈕文字顏色字串，預設'grey darken-2'
  * @vue-prop {String} [editorRenameCancelBtnIcon=mdiCloseCircleOutline] 輸入變更文字彈窗之取消按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCloseCircleOutline