w-component-vue 2.3.18 → 2.3.19

package/src/AppZoneWGroupTags.vue

@@ -17,6 +17,8 @@
                 <w-group-tags
                     v-model="WGroupTags.strings"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -30,6 +32,8 @@
                     v-model="WGroupTags.strings"
                     :icon="mdiChartBubble"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -43,6 +47,8 @@
                     v-model="WGroupTags.strings"
                     :icon="'fas fa-clipboard-check'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -57,6 +63,8 @@
                     :icon="'fas fa-clipboard-check'"
                     :shiftLeft="-3"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -72,6 +80,8 @@
                     _marginStyle="{v:0,h:20}"
                     :marginStyle="{top:0,right:25,bottom:0,left:0}"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -85,6 +95,8 @@
                     v-model="WGroupTags.strings"
                     :inputTextButtonTooltip="'新增'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -98,6 +110,8 @@
                     v-model="WGroupTags.strings"
                     :inputTextWidth="250"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -111,6 +125,8 @@
                     v-model="WGroupTags.strings"
                     :suggests="WGroupTags.suggests"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -126,6 +142,8 @@
                     :placeholder="'請輸入關鍵字'"
                     :noResultsText="'無符合項目'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -141,6 +159,8 @@
                     :inputTextColor="'orange darken-2'"
                     :inputExpansionIconColor="'orange'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -159,6 +179,8 @@
                     :suggectItemBackgroundColor="'white'"
                     :suggectItemBackgroundColorHover="'orange darken-3'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -182,6 +204,8 @@
                     :inputTextBackgroundColorHover="'#fafaff'"
                     :inputTextBackgroundColorFocus="'#f2f2ff'"
                 ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -290,7 +314,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'slot item'"
+                    :casename="'slot items'"
                 ></demolink>
 
                 <w-group-tags
@@ -335,7 +359,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & slot item'"
+                    :casename="'object items & slot items'"
                 ></demolink>
 
                 <w-group-tags
@@ -564,6 +588,7 @@
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
+                    :icon="mdiChartBubble"
                     @click="ckBtnModProg"
                 ></w-group-tags>
 
@@ -579,6 +604,7 @@
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
+                    :icon="mdiChartBubble"
                     :progColor="'rgba(250,50,150,0.4)'"
                     :progBackgroundColor="'rgba(250,50,150,0.075)'"
                     @click="ckBtnModProg"
@@ -596,6 +622,7 @@
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
+                    :icon="mdiChartBubble"
                     @click="ckBtnModLoading"
                 ></w-group-tags>
 
@@ -606,14 +633,14 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'modify loading & textColor & textColorHover'"
+                    :casename="'closeWithInterceptor'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
-                    :textColor="'rgba(255,30,60,0.9)'"
-                    :textColorHover="'rgba(255,20,50,1)'"
-                    @click="ckBtnModLoading"
+                    :icon="mdiChartBubble"
+                    :closeWithInterceptor="true"
+                    @click-close="ckBtnClosePm"
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
@@ -623,17 +650,14 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'closeWithInterceptor'"
+                    :casename="'enableCloseEventOnly'"
                 ></demolink>
 
                 <w-group-tags
+                    :enableCloseEventOnly="true"
                     v-model="WGroupTags.strings"
-                    :icon="mdiChartBubble"
-                    :closeWithInterceptor="true"
-                    @click-close="ckBtnClosePm"
+                    @click-close="ckBtnClose"
                 ></w-group-tags>
-
-                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
             </div>
 
 
@@ -650,6 +674,15 @@
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
+
+                <w-group-tags
+                    v-model="WGroupTags.objects"
+                    :icon="mdiChartBubble"
+                    :draggable="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+
             </div>
 
 
@@ -666,6 +699,15 @@
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
+
+                <w-group-tags
+                    v-model="WGroupTags.objects"
+                    :icon="mdiChartBubble"
+                    :editable="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+
             </div>
 
 
@@ -682,6 +724,15 @@
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
+
+                <w-group-tags
+                    v-model="WGroupTags.objects"
+                    :icon="mdiChartBubble"
+                    :editableClose="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+
             </div>
 
 
@@ -698,22 +749,75 @@
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
+
+                <w-group-tags
+                    v-model="WGroupTags.objects"
+                    :icon="mdiChartBubble"
+                    :editableInput="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+
             </div>
 
 
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'editableInput(no input button)'"
+                    :casename="'editableClose(no close button) & editableInput(no input text)'"
                 ></demolink>
 
+                <w-group-tags
+                    v-model="WGroupTags.strings"
+                    :icon="mdiChartBubble"
+                    :editableClose="false"
+                    :editableInput="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: strings</div>
+
                 <w-group-tags
                     v-model="WGroupTags.objects"
                     :icon="mdiChartBubble"
+                    :editableClose="false"
                     :editableInput="false"
                 ></w-group-tags>
 
                 <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-group-tags'"
+                    :casename="'enableNodata'"
+                ></demolink>
+
+                <w-group-tags
+                    v-model="WGroupTags.empty"
+                    :enableNodata="true"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: empty</div>
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-group-tags'"
+                    :casename="'enableNodata & nodata & editableClose(no close button) & editableInput(no input text)'"
+                ></demolink>
+
+                <w-group-tags
+                    v-model="WGroupTags.empty"
+                    :editableClose="false"
+                    :editableInput="false"
+                    :enableNodata="true"
+                    :nodata="'無'"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: empty</div>
             </div>
 
 
@@ -747,28 +851,12 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'not editable & nodata'"
-                ></demolink>
-
-                <w-group-tags
-                    v-model="WGroupTags.empty"
-                    :editable="false"
-                    :nodata="'無'"
-                ></w-group-tags>
-
-                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: empty</div>
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <demolink
-                    :kbname="'w-group-tags'"
-                    :casename="'useActive & valueActive'"
+                    :casename="'enableActive & valueActive'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
-                    :useActive="true"
+                    :enableActive="true"
                     :valueActive.sync="WGroupTags.stringActive"
                 ></w-group-tags>
 
@@ -779,12 +867,12 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'slot item & useActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
+                    :casename="'slot items & enableActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
-                    :useActive="true"
+                    :enableActive="true"
                     :valueActive.sync="WGroupTags.stringActive"
                     :paddingStyle="{v:1,h:13}"
                     :textColor="'pink lighten-1'"
@@ -816,13 +904,13 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & slot item & editableInput(no input button) & useActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
+                    :casename="'object items & slot items & editableInput(no input button) & enableActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.objectsSlotText"
                     :editableInput="false"
-                    :useActive="true"
+                    :enableActive="true"
                     :valueActive.sync="WGroupTags.objectsSlotTextActive"
                     :paddingStyle="{v:1,h:13}"
                     :textColor="'pink lighten-1'"
@@ -854,21 +942,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'enableCloseEventOnly'"
-                ></demolink>
-
-                <w-group-tags
-                    :enableCloseEventOnly="true"
-                    v-model="WGroupTags.strings"
-                    @click-close="ckBtnClose"
-                ></w-group-tags>
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <demolink
-                    :kbname="'w-group-tags'"
-                    :casename="'object items & slot item & useColorsFromItem & editableInput(no input button) & no shadow & no shadowActive & useActive & valueActive & paddingStyle'"
+                    :casename="'object items & slot items & enableColorsFromItem & editableInput(no input button) & no shadow & no shadowActive & enableActive & valueActive & paddingStyle'"
                 ></demolink>
 
                 <w-group-tags
@@ -876,10 +950,10 @@
                     :editableInput="false"
                     :shadow="false"
                     :shadowActive="false"
-                    :useActive="true"
+                    :enableActive="true"
                     :valueActive.sync="WGroupTags.objectsColorActive"
                     :paddingStyle="{v:1,h:12}"
-                    :useColorsFromItem="true"
+                    :enableColorsFromItem="true"
                 >
                     <template v-slot:items="props">
                         <div style="display:flex; align-items:center;">

package/src/AppZoneWListVertical.vue

@@ -183,14 +183,14 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-list-vertical'"
-                    :casename="'useActive (no active)'"
+                    :casename="'enableActive (no active)'"
                 ></demolink>
 
                 <div style="display:inline-block; border:1px dashed #ddd;">
                     <w-list-vertical
                         style="height:400px; width:250px;"
                         :items="WListVertical.itemsObj"
-                        :useActive="false"
+                        :enableActive="false"
                     >
                     </w-list-vertical>
                 </div>
@@ -201,14 +201,14 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-list-vertical'"
-                    :casename="'useActive (no active) & itemRippleColor'"
+                    :casename="'enableActive (no active) & itemRippleColor'"
                 ></demolink>
 
                 <div style="display:inline-block; border:1px dashed #ddd;">
                     <w-list-vertical
                         style="height:400px; width:250px;"
                         :items="WListVertical.itemsObj"
-                        :useActive="false"
+                        :enableActive="false"
                         :itemRippleColor="'rgba(155, 1, 87, 0.4)'"
                     >
                     </w-list-vertical>

package/src/AppZoneWTableDyn.vue

@@ -51,12 +51,12 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-table-dyn'"
-                    :casename="'no useInfor'"
+                    :casename="'no enableInfor'"
                 ></demolink>
 
                 <w-table-dyn
                     style="width:600px; height:400px;"
-                    :useInfor="false"
+                    :enableInfor="false"
                     :name="WTableDyn.name"
                     :description="WTableDyn.description"
                     :opt="WTableDyn.opt1"
@@ -70,12 +70,12 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-table-dyn'"
-                    :casename="'no useMenu'"
+                    :casename="'no enableMenu'"
                 ></demolink>
 
                 <w-table-dyn
                     style="width:600px; height:400px;"
-                    :useMenu="false"
+                    :enableMenu="false"
                     :name="WTableDyn.name"
                     :description="WTableDyn.description"
                     :opt="WTableDyn.opt1"
@@ -260,12 +260,12 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-table-dyn'"
-                    :casename="'editable & no useInfor'"
+                    :casename="'editable & no enableInfor'"
                 ></demolink>
 
                 <w-table-dyn
                     style="width:600px; height:400px;"
-                    :useInfor="false"
+                    :enableInfor="false"
                     :name="WTableDyn.name"
                     :description="WTableDyn.description"
                     :opt="WTableDyn.opt2"
@@ -280,12 +280,12 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-table-dyn'"
-                    :casename="'editable & no useMenu'"
+                    :casename="'editable & no enableMenu'"
                 ></demolink>
 
                 <w-table-dyn
                     style="width:600px; height:400px;"
-                    :useMenu="false"
+                    :enableMenu="false"
                     :name="WTableDyn.name"
                     :description="WTableDyn.description"
                     :opt="WTableDyn.opt2"

package/src/components/WDialog.vue

@@ -86,11 +86,9 @@
                                     <!-- 使用display:flex排版會無法支援動態變更btns, 故改為使用display:table -->
                                     <div
                                         :style="`
-                                            _display:flex; _align-items:center;
                                             display:table;
                                             padding:0px ${headSpace}px;
                                             height:${headerHeight}px; max-height:${headerHeight}px;
-                                            _overflow:hidden;
                                         `"
                                         v-domresize
                                         @domresize="resizeHead"
@@ -115,7 +113,6 @@
                                             ref="hdTitleAndStl"
                                             style="
                                                 width:100%;
-                                                _display:flex; _align-items:center;
                                                 display:table-cell; vertical-align:middle;
                                             "
                                         >
@@ -157,7 +154,6 @@
                                         <div
                                             ref="hdBtns"
                                             style="
-                                                _display:flex; _align-items:center;
                                                 display:table-cell; vertical-align:middle;
                                             "
                                         >

package/src/components/WGroupTags.vue

@@ -191,12 +191,12 @@ import domDragDrop from '../js/domDragDrop.mjs'
 
 /**
  * @vue-prop {Array} [value=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {Boolean} [enableActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
  * @vue-prop {Object} [valueActive=null] 輸入活耀項目物件，預設null
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
  * @vue-prop {String} [keyTooltip='tooltip'] 輸入項目為物件時，存放提示之欄位字串，預設'tooltip'
- * @vue-prop {Boolean} [useColorsFromItem=false] 輸入當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false
+ * @vue-prop {Boolean} [enableColorsFromItem=false] 輸入當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false
  * @vue-prop {String} [icon=''] 輸入左側圖標字串，預設''
  * @vue-prop {String} [iconColor='black'] 輸入圖標顏色字串，預設'black'
  * @vue-prop {String} [iconColorHover='grey darken-3'] 輸入滑鼠移入時圖標顏色字串，預設'grey darken-3'
@@ -260,7 +260,8 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {Boolean} [editableClose=true] 輸入editable=true時是否顯示關閉按鈕布林值，預設true
  * @vue-prop {Boolean} [editableInput=true] 輸入editable=true時是否使用預設的slot input布林值，預設true
  * @vue-prop {Boolean} [enableCloseEventOnly=false] 輸入點擊移除按鈕時是否僅開啟關閉事件，代表不自動刪除項目，需通過監聽關閉事件@click-close自行處理刪除功能，預設false
- * @vue-prop {String} [nodata='無'] 輸入無任何字串陣列時的預設文字字串，預設'無'
+ * @vue-prop {Boolean} [enableNodata=false] 輸入是否使用nodata展示布林值，預設false
+ * @vue-prop {String} [nodata='Empty'] 輸入無任何字串陣列時的預設文字字串，預設'Empty'
  */
 export default {
     directives: {
@@ -275,7 +276,7 @@ export default {
             type: Array,
             default: () => [],
         },
-        useActive: {
+        enableActive: {
             type: Boolean,
             default: false,
         },
@@ -295,7 +296,7 @@ export default {
             type: String,
             default: 'tooltip',
         },
-        useColorsFromItem: {
+        enableColorsFromItem: {
             type: Boolean,
             default: false,
         },
@@ -568,7 +569,7 @@ export default {
         },
         nodata: {
             type: String,
-            default: 'empty',
+            default: 'Empty',
         },
     },
     data: function() {
@@ -681,7 +682,7 @@ export default {
 
             //c
             let c = null
-            if (vo.isObjValue) {
+            if (vo.enableColorsFromItem && vo.isObjValue) {
                 c = get(item, keyColor, null)
             }
             if (!c) {
@@ -697,7 +698,7 @@ export default {
             let vo = this
 
             //check
-            if (!vo.useActive) {
+            if (!vo.enableActive) {
                 return false
             }
 
@@ -765,8 +766,8 @@ export default {
             //$nextTick
             vo.$nextTick(() => {
 
-                //useActive
-                if (vo.useActive) {
+                //enableActive
+                if (vo.enableActive) {
 
                     //emit
                     vo.$emit('update:valueActive', item)
@@ -911,8 +912,8 @@ export default {
                         .then(() => { //確認關閉
                             //console.log('pm then')
 
-                            //useActive and isActive
-                            if (vo.useActive && vo.isActive(item)) {
+                            //enableActive and isActive
+                            if (vo.enableActive && vo.isActive(item)) {
 
                                 //emit
                                 vo.$emit('update:valueActive', null)
@@ -942,8 +943,8 @@ export default {
                     //emit
                     vo.$emit('click-close', msg)
 
-                    //useActive and isActive
-                    if (vo.useActive && vo.isActive(item)) {
+                    //enableActive and isActive
+                    if (vo.enableActive && vo.isActive(item)) {
 
                         //emit
                         vo.$emit('update:valueActive', null)

package/src/components/WListHorizontal.vue

@@ -85,7 +85,7 @@ import WListItem from './WListItem.vue'
 
 /**
  * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {Boolean} [enableActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
  * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目字串或物件，預設null
  * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
@@ -122,7 +122,7 @@ export default {
             type: Array,
             default: () => [],
         },
-        useActive: {
+        enableActive: {
             type: Boolean,
             default: true,
         },
@@ -254,7 +254,7 @@ export default {
 
         changeItemActive: function() {
             let vo = this
-            if (vo.useActive) {
+            if (vo.enableActive) {
                 vo.itemActiveTrans = vo.itemActive
             }
             return ''
@@ -312,7 +312,7 @@ export default {
         getActive: function(item) {
             let vo = this
             let b = false
-            if (vo.useActive) {
+            if (vo.enableActive) {
                 b = isEqual(item, vo.itemActiveTrans)
             }
             return b