w-component-vue 2.3.1 → 2.3.3

package/src/components/WTooltip.vue

@@ -79,8 +79,8 @@ function removeTriggerMode(mode, mmkey) {
 
 /**
  * @vue-prop {String} [mode='tooltip'] 輸入組件模式字串，可選'tooltip'與'popup'，預設'tooltip'
- * @vue-prop {String} [displayType='block'] 輸入display設定字串，可選'block'與'line'，預設'block'
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
+ * @vue-prop {String} [displayType='block'] 輸入display設定字串，可選'block'與'line'，預設'block'
  * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，預設3000
  * @vue-prop {Boolean} [isolated=false] 輸入當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
  * @vue-prop {String} [placement='bottom'] 輸入內容區出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom'
@@ -108,14 +108,14 @@ export default {
             type: String,
             default: 'tooltip', //tooltip, popup
         },
-        displayType: {
-            type: String,
-            default: 'block', //line, block
-        },
         value: {
             type: Boolean,
             default: false,
         },
+        displayType: {
+            type: String,
+            default: 'block', //line, block
+        },
         cmpZIndex: {
             type: Number,
             default: 3000,

package/src/components/WTree.vue

@@ -65,25 +65,27 @@
                         <div :style="`display:table-cell; vertical-align:top; padding-right:${separation}px;`">
 
                             <!-- 若有顯隱圖標才會有min-height效果 -->
-                            <div :style="`${useItemHeightMin} display:flex; align-items:center; justify-content:center;`" v-if="hasChildren(props.index)">
+                            <div :style="`min-height:${useItemHeightMin}px; display:flex; align-items:center; justify-content:center;`" v-if="hasChildren(props.index)">
                                 <WTreeIconToggle
                                     :dir="`${props.row.unfolding?'bottom':'right'}`"
                                     :iconSize="iconSize"
                                     :iconColor="iconToggleColor"
+                                    :iconDisabledColor="iconToggleDisabledColor"
                                     :iconBackgroundColor="iconToggleBackgroundColor"
                                     :iconBackgroundColorHover="iconToggleBackgroundColorHover"
+                                    :editable="!useDraggableOrOperatable"
                                     @click.stop="toggleItems(props.row, null)"
                                 ></WTreeIconToggle>
                             </div>
 
                             <!-- 若無顯隱圖標至少要撐開寬度 -->
-                            <div :style="`${useItemHeightMin} padding-right:${iconSize}px;`" v-else></div>
+                            <div :style="`min-height:${useItemHeightMin}px; padding-right:${iconSize}px;`" v-else></div>
 
                         </div>
 
                         <!-- 因顯隱圖標較小而右側間距看起來較寬, 故核選圖標右側間距*3 -->
                         <div :style="`display:table-cell; vertical-align:top; padding-right:${3*separation}px;`" v-if="selectable">
-                            <div :style="`${useItemHeightMin} display:flex; align-items:center; justify-content:center;`">
+                            <div :style="`min-height:${useItemHeightMin}px; display:flex; align-items:center; justify-content:center;`">
                                 <WTreeIconCheckbox
                                     :mode="props.row.checked"
                                     :iconSize="iconSize"
@@ -115,30 +117,37 @@
                                 :isActive="pkActive===props.row.item[keyPrimary]"
                             >
                                 <!-- 得使用min-height否則無法撐開高度 -->
-                                <div :style="`${useItemHeightMin} display:flex; align-items:center;`">
+                                <div :style="`min-height:${useItemHeightMin}px; display:flex; align-items:center;`">
                                     {{getText(props.row.item)}}
                                 </div>
                             </slot>
 
                         </div>
 
+                        <!-- tree可能有捲軸, 給予預留與右側空間8px -->
                         <div
-                            style="position:absolute; top:2px; right:8px;"
+                            :style="`position:absolute; top:${(useItemHeightMin-(operateBtnIconSize+2*2))/2}px; right:8px;`"
                             v-if="getUseOperatable(props)"
                             @mousedown="(ev)=>{operateDisableEvent(ev,'mousedown')}"
                             @touchstart="(ev)=>{operateDisableEvent(ev,'touchstart')}"
                             @click="(ev)=>{operateDisableEvent(ev,'click')}"
                         >
 
+                            <!-- 使用displayType=line使WPopup的display:block, 避免出現text-node間隙 -->
                             <WPopup
                                 :isolated="true"
+                                :displayType="'line'"
                                 @show="operateDisplayEvent('show')"
                                 @hide="operateDisplayEvent('hide')"
                             >
 
                                 <template v-slot:trigger>
+                                    <!-- 指定display:block避免有text-node間隙 -->
                                     <WButtonCircle
+                                        style="display:block;"
+                                        :paddingStyle="{v:2,h:2}"
                                         :icon="mdiDotsVertical"
+                                        :iconSize="operateBtnIconSize"
                                         :backgroundColor="operateBtnBackgroundColor"
                                         :backgroundColorHover="operateBtnBackgroundColorHover"
                                         :backgroundColorFocus="operateBtnBackgroundColorFocus"
@@ -346,6 +355,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
  * @vue-prop {Number} [iconSize=24] 輸入顯隱與核選icon按鈕高度數字，單位為px，預設24
  * @vue-prop {String} [iconToggleColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
+ * @vue-prop {String} [iconToggleDisabledColor='grey lighten-1'] 輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [iconToggleBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconToggleBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
  * @vue-prop {String} [iconUncheckedColor='grey darken-2'] 輸入核選icon未勾選時顏色字串，預設'grey darken-2'
@@ -397,6 +407,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [operatePanelWidth=150] 輸入控制選項寬度數字，單位px，預設150
  * @vue-prop {Number} [operatePanelHeight=null] 輸入控制選項高度數字，若為null則使用選項數量*operateItemHeight，單位px，預設null
  * @vue-prop {String} [operateBtnTooltip='Operations'] 輸入控制按鈕之提示文字字串，預設'Operations'
+ * @vue-prop {Number} [operateBtnIconSize=22] 輸入控制按鈕圖標尺寸數字，單位px，預設22
  * @vue-prop {String} [operateBtnBackgroundColor='transparent'] 輸入控制按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [operateBtnBackgroundColorHover='rgba(230,230,230,0.7)'] 輸入滑鼠移入時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.7)'
  * @vue-prop {String} [operateBtnBackgroundColorFocus='rgba(230,230,230,0.9)'] 輸入取得焦點時控制按鈕背景顏色字串，預設'rgba(230,230,230,0.9)'
@@ -524,6 +535,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        iconToggleDisabledColor: {
+            type: String,
+            default: 'grey lighten-1',
+        },
         iconToggleBackgroundColor: {
             type: String,
             default: 'transparent',
@@ -733,6 +748,10 @@ export default {
             type: String,
             default: 'Operations',
         },
+        operateBtnIconSize: {
+            type: Number,
+            default: 22,
+        },
         operateBtnBackgroundColor: {
             type: String,
             default: 'transparent', //'rgba(225,225,225,0.5)',
@@ -1022,17 +1041,21 @@ export default {
             return ''
         },
 
+        useDraggableOrOperatable: function() {
+            //console.log('computed useDraggableOrOperatable')
+
+            let vo = this
+
+            return vo.draggable || vo.operatable
+        },
+
         changeDraggableAndOperatable: function() {
             //console.log('computed changeDraggableAndOperatable')
 
             let vo = this
 
-            //trigger
-            let draggable = vo.draggable
-            let operatable = vo.operatable
-
             //若draggable或operatable為true, 則defaultDisplayLevel強制為null, filterKeywords強制清空
-            if (draggable || operatable) {
+            if (vo.useDraggableOrOperatable) {
                 vo.defaultDisplayLevelTrans = null
                 vo.filterKeywordsTrans = ''
             }
@@ -1059,7 +1082,7 @@ export default {
 
             let vo = this
 
-            return `min-height:${Math.max(vo.iconSize, vo.defItemHeight)}px;`
+            return Math.max(vo.iconSize, vo.defItemHeight)
         },
 
         useIndent: function() {
@@ -2109,8 +2132,8 @@ export default {
                     return
                 }
 
-                //check draggable and operatable
-                if (vo.draggable || vo.operatable) {
+                //check useDraggableOrOperatable
+                if (vo.useDraggableOrOperatable) {
                     // console.log('禁止顯隱節點')
                     return
                 }
@@ -2599,8 +2622,9 @@ export default {
 
             let vo = this
 
-            //check draggable and operatable
-            if (vo.draggable || vo.operatable) {
+            //check useDraggableOrOperatable
+            if (vo.useDraggableOrOperatable) {
+                // console.log('禁止過濾')
                 return Promise.resolve()
             }
 

package/src/components/WTreeIconCheckbox.vue

@@ -78,10 +78,6 @@ export default {
             type: Number,
             default: 24,
         },
-        editable: {
-            type: Boolean,
-            default: true,
-        },
         uncheckedColor: {
             type: String,
             default: 'grey darken-2',
@@ -106,6 +102,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {

package/src/components/WTreeIconToggle.vue

@@ -1,12 +1,15 @@
 <template>
     <div :style="`display:inline-block; width:${iconSize}px; height:${iconSize}px; overflow:hidden;`">
         <div :style="`transform:scale(${useScale}); transform-origin:0% 0%;`">
+
             <div
-                :style="`display:inline-block; width:${defIconSize}px; height:${defIconSize}px; user-select:none; cursor:pointer; outline:none;`"
+                :style="`position:relative; display:inline-block; width:${defIconSize}px; height:${defIconSize}px; user-select:none; cursor:pointer; outline:none;`"
                 tabindex="0"
                 @keyup.enter="(v)=>{$emit('click',v)}"
                 @click="(v)=>{$emit('click',v)}"
             >
+
+                <!-- 三角形按鈕 -->
                 <div
                     class="cc"
                     style="height:100%;"
@@ -35,7 +38,28 @@
 
                     </div>
                 </div>
+
+                <!-- 禁用符號 -->
+                <template>
+
+                    <div
+                        style="position:absolute; z-index:1; left:0px; top:0px; bottom:0; right:0; margin:auto; opacity:0.75;"
+                    >
+                        <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-5px);`" v-if="!editable">
+                            <div :style="`display:inline-block; width:24px; height:1px; border-top:2px solid #fff;`"></div>
+                        </div>
+                    </div>
+
+                    <div style="position:absolute; z-index:1; left:0px; top:0px; bottom:0; right:0; margin:auto; opacity:0.75;">
+                        <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-3px);`" v-if="!editable">
+                            <div :style="`display:inline-block; width:24px; height:1px; border-top:2px solid ${useIconColor};`"></div>
+                        </div>
+                    </div>
+
+                </template>
+
             </div>
+
         </div>
     </div>
 </template>
@@ -46,11 +70,13 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 
 /**
- * @vue-prop {String} [mode='right'] 輸入圖標朝向字串，可選'right'、'bottom'、'left'、'top'，預設'right'
+ * @vue-prop {String} [dir='right'] 輸入圖標朝向字串，可選'right'、'bottom'、'left'、'top'，預設'right'
  * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，預設24
  * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
+ * @vue-prop {String} [iconDisabledColor='grey lighten-1'] 輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [iconBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
     components: {
@@ -68,6 +94,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        iconDisabledColor: {
+            type: String,
+            default: 'grey lighten-1',
+        },
         iconBackgroundColor: {
             type: String,
             default: 'transparent',
@@ -76,6 +106,10 @@ export default {
             type: String,
             default: 'rgba(128,128,128,0.15)',
         },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -107,7 +141,10 @@ export default {
 
             let vo = this
 
-            return color2hex(vo.iconColor)
+            if (vo.editable) {
+                return color2hex(vo.iconColor)
+            }
+            return color2hex(vo.iconDisabledColor)
         },
 
         useIconBackgroundColor: function() {