w-component-vue 2.2.27 → 2.2.30

package/src/components/WTimeminuteCore.vue

@@ -1,7 +1,6 @@
 <template>
-    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
     <div
-        style="display:inline-block;"
+        style=""
         :changeParam="changeParam"
     >
         <!-- 盡量不要讓display:flex暴露至外層 -->
@@ -13,7 +12,7 @@
                 :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="value_day"
                 @update:focused="(v)=>{focused_day=v;changeFocused()}"
@@ -26,11 +25,11 @@
                     :mode="'select'"
                     :textFontSize="textFontSize"
                     :textColor="textColor"
+                    :distY="distY"
                     :minWidth="70"
                     :expansionIcon="expansionIcon"
                     :expansionIconSize="expansionIconSize"
                     :expansionIconColor="expansionIconColor"
-                    :height="height"
                     :editable="editable"
                     :items="getUseMinutes"
                     :value="value_time"
@@ -65,13 +64,13 @@ import WTextSuggestCore from './WTextSuggestCore.vue'
  * @vue-prop {Number} [hourMax=8] 輸入可選最大小時，單位為小時，預設8
  * @vue-prop {Number} [minuteInter=15] 輸入每小時的切分區間，單位為分鐘，預設15
  * @vue-prop {Array} [minutesCustom=null] 輸入自訂可選的時分點字串陣列，單位為時分(00:00)，若給予，則上述hourMin,hourMax,minuteInter自動失效，預設null
- * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
  * @vue-prop {String} [expansionIcon=mdiPlay] 輸入顯隱圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiPlay)
  * @vue-prop {Number} [expansionIconSize=18] 輸入顯隱圖標尺寸數字，單位為px，預設18
  * @vue-prop {String} [expansionIconColor='grey'] 輸入顯隱圖標顏色字串，預設'grey'
- * @vue-prop {Number} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -102,7 +101,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -124,9 +123,9 @@ export default {
             type: String,
             default: 'grey',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,

package/src/components/WTimeminuteRange.vue

@@ -29,6 +29,7 @@
         >
 
             <WTimeminuteRangeCore
+                :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :expansionIcon="expansionIcon"
@@ -41,6 +42,7 @@
                 :between="between"
                 :minuteEnd="minuteEnd"
                 :minuteStart="minuteStart"
+                :distY="distY"
                 :editable="editable"
                 @update:focused="changeFocused"
                 @update:minuteEnd="(v)=>{$emit('update:minuteEnd', v)}"
@@ -59,7 +61,7 @@ import WTimeminuteRangeCore from './WTimeminuteRangeCore.vue'
 
 
 /**
- * @vue-prop {Object} [paddingStyle={v:0,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:15}
+ * @vue-prop {Object} [paddingStyle={v:2,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:2,h:15}
  * @vue-prop {Number} [borderRadius=30] 輸入框圓角度數字，單位為px，預設30
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [minuteStart=''] 輸入時間字串，預設''
@@ -83,11 +85,13 @@ import WTimeminuteRangeCore from './WTimeminuteRangeCore.vue'
  * @vue-prop {String} [borderColor='white'] 輸入邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
  * @vue-prop {String} [expansionIcon=mdiPlay] 輸入顯隱圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiPlay)
  * @vue-prop {Number} [expansionIconSize=18] 輸入顯隱圖標尺寸數字，單位為px，預設18
  * @vue-prop {String} [expansionIconColor='grey'] 輸入顯隱圖標顏色字串，預設'grey'
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
  */
@@ -101,7 +105,7 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    v: 0,
+                    v: 2,
                     h: 15,
                 }
             },
@@ -198,6 +202,10 @@ export default {
             type: String,
             default: 'white',
         },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         textColor: {
             type: String,
             default: 'black',
@@ -218,6 +226,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        distY: {
+            type: Number,
+            default: 7,
+        },
         editable: {
             type: Boolean,
             default: true,

package/src/components/WTimeminuteRangeCore.vue

@@ -1,6 +1,5 @@
 <template>
-    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
-    <div style="display:inline-block;">
+    <div style="">
         <!-- 盡量不要讓display:flex暴露至外層 -->
         <div style="display:flex; align-items:center;">
 
@@ -16,14 +15,14 @@
                 :expansionIcon="expansionIcon"
                 :expansionIconSize="expansionIconSize"
                 :expansionIconColor="expansionIconColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="minuteStart"
                 @update:focused="(v)=>{focused_start=v;changeFocused()}"
                 @input="(v)=>{$emit('update:minuteStart', v)}"
             ></WTimeminuteCore>
 
-            <div :style="`display:inline-block; padding-left:9px; padding-right:11px; height:${height}px; line-height:${height}px; color:${useTextColor}; ${useTextFontSize} vertical-align:middle;`">
+            <div :style="`padding-left:9px; padding-right:11px; color:${useTextColor}; ${useTextFontSize}`">
                 {{between}}
             </div>
 
@@ -39,7 +38,7 @@
                 :expansionIcon="expansionIcon"
                 :expansionIconSize="expansionIconSize"
                 :expansionIconColor="expansionIconColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="minuteEnd"
                 @update:focused="(v)=>{focused_end=v;changeFocused()}"
@@ -65,13 +64,13 @@ import WTimeminuteCore from './WTimeminuteCore.vue'
  * @vue-prop {Number} [hourMax=8] 輸入可選最大小時，單位為小時，預設8
  * @vue-prop {Number} [minuteInter=15] 輸入每小時的切分區間，單位為分鐘，預設15
  * @vue-prop {Array} [minutesCustom=null] 輸入自訂可選的時分點字串陣列，單位為時分(00:00)，若給予，則上述hourMin,hourMax,minuteInter自動失效，預設null
- * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
  * @vue-prop {String} [expansionIcon=mdiPlay] 輸入顯隱圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiPlay)
  * @vue-prop {Number} [expansionIconSize=18] 輸入顯隱圖標尺寸數字，單位為px，預設18
  * @vue-prop {String} [expansionIconColor='grey'] 輸入顯隱圖標顏色字串，預設'grey'
- * @vue-prop {Number} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -109,7 +108,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -131,9 +130,9 @@ export default {
             type: String,
             default: 'grey',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,

package/src/components/WTree.vue

@@ -213,9 +213,11 @@ import genID from 'wsemi/src/genID.mjs'
 import sep from 'wsemi/src/sep.mjs'
 import isarr from 'wsemi/src/isarr.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
+import isbol from 'wsemi/src/isbol.mjs'
 import ispm from 'wsemi/src/ispm.mjs'
 import cint from 'wsemi/src/cint.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
@@ -248,7 +250,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
  * @vue-prop {Boolean} [activable=false] 輸入是否使用主動模式布林值，預設false
  * @vue-prop {Function} [funActive=null] 輸入主動模式時處理點擊項目函數，給予並回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null
- * @vue-prop {Object} [activeItem={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}
+ * @vue-prop {Object} [itemActive={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}
  * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
  * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
  * @vue-prop {String} [itemTextColorActive='#d72'] 輸入主動模式時文字顏色字串，預設'#d72'
@@ -350,7 +352,7 @@ export default {
             type: Function,
             default: null
         },
-        activeItem: {
+        itemActive: {
             type: Object,
             default: () => {},
         },
@@ -711,8 +713,8 @@ export default {
             let vo = this
 
             //pk
-            let pk = get(vo.activeItem, vo.keyPrimary)
-            // console.log('clickItem pk', pk)
+            let pk = get(vo.itemActive, vo.keyPrimary)
+            // console.log('pk', pk)
 
             //save pkActive
             if (vo.isKey(pk)) {
@@ -1212,12 +1214,12 @@ export default {
                     //save pkActive
                     vo.pkActive = pk
 
-                    //activeItem
-                    let activeItem = { [vo.keyPrimary]: pk }
-                    //  console.log('clickItem activeItem', activeItem)
+                    //itemActive
+                    let itemActive = { [vo.keyPrimary]: pk }
+                    //  console.log('clickItem itemActive', itemActive)
 
                     //emit
-                    vo.$emit('update:activeItem', activeItem)
+                    vo.$emit('update:itemActive', itemActive)
 
                     break
                 }
@@ -1638,8 +1640,8 @@ export default {
 
         },
 
-        toggleItems: function(item) {
-            //console.log('methods toggleItems', item)
+        toggleItems: function(item, toUnfolding) {
+            // console.log('methods toggleItems', item, toUnfolding)
 
             let vo = this
 
@@ -1662,7 +1664,32 @@ export default {
                         //console.log('items', cloneDeep(items))
 
                         //ind
-                        let ind = item.index
+                        let ind = get(item, 'index', null)
+                        if (ind === null) {
+                            console.log('invalid ind')
+                            return
+                        }
+
+                        //wdl rows, 取得wdl內展示數據
+                        let rows = vo.$refs.wdl.getRows()
+                        // console.log('wdl rows', rows)
+
+                        //displayShow, 提取節點之直接顯示狀態
+                        let displayShow = get(rows, `${ind}.displayShow`)
+                        // console.log('displayShow', displayShow)
+
+                        //filterShow, 提取節點之過濾後顯示狀態
+                        let filterShow = get(rows, `${ind}.filterShow`)
+                        // console.log('filterShow', filterShow)
+
+                        //show, 節點是否為顯示狀態
+                        let show = !(!displayShow || !filterShow)
+                        // console.log('show', show)
+
+                        //check show, 若非顯示代表由上層隱藏或被過濾而隱藏, 不提供切換功能
+                        if (!show) {
+                            return
+                        }
 
                         //unfolding
                         let unfolding = get(items, `${ind}.row.unfolding`, null)
@@ -1671,6 +1698,14 @@ export default {
                             return
                         }
 
+                        //toUnfolding
+                        if (isbol(toUnfolding)) { //若有指定要展開或隱藏
+                            // console.log('toUnfolding', toUnfolding, '(!unfolding)', (!unfolding))
+                            if (toUnfolding === unfolding) { //若節點當前已為指定要展開或隱藏, 則不用處理
+                                return
+                            }
+                        }
+
                         //本身節點變更unfolding
                         unfolding = !unfolding
 
@@ -1693,6 +1728,51 @@ export default {
 
         },
 
+        toggleItemsByFun: async function(cb) {
+            // console.log('methods toggleItemsByFun', cb)
+
+            let vo = this
+
+            //check
+            if (!isfun(cb)) {
+                return
+            }
+
+            //getRows, 取得展開後數據
+            let rows = vo.getRows()
+            // console.log('rows', rows)
+
+            //r, 通過cb回傳操作物件, 包含欲顯隱之row與toUnfolding, 若toUnfolding不給則進行反向切換顯隱, cb亦支援使用async function使用resolve回傳操作物件
+            let r = cb(rows)
+
+            //check
+            if (ispm(r)) {
+                r = await r
+            }
+
+            //row
+            let row = get(r, 'row')
+
+            //check
+            if (!iseobj(row)) {
+                console.log('invalid row', row)
+                return
+            }
+
+            //toUnfolding
+            let toUnfolding = get(r, 'toUnfolding')
+
+            //check
+            if (!isbol(toUnfolding)) {
+                // console.log('invalid toUnfolding', toUnfolding, 'default to null')
+                toUnfolding = null
+            }
+
+            //toggleItems, 切換或指定顯隱狀態
+            vo.toggleItems(row, toUnfolding)
+
+        },
+
         getAllParentIndex: function(items, ind) {
             //console.log('methods getAllParentIndex', items, ind)
             //取得全部父層節點指標與path