w-component-vue 2.1.77 → 2.1.80

package/src/components/WSwitch.vue

@@ -1,45 +1,136 @@
 <template>
     <div
-        style="display:inline-block;"
+        :style="`display:inline-block; ${editable?'cursor:pointer;':''}`"
         :changeParam="changeParam"
+        @click="toogleValue"
+        @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
+        @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
     >
 
-        <v-switch
-            style="margin:0px; padding:0px;"
-            hide-details
-            :label="text"
-            :color="color"
-            :disabled="!editable"
-            v-model="b"
-            @change="toogleValue"
-        ></v-switch>
+        <div style="display:flex; align-items:center;">
+
+            <!-- 用padding:2px 0px與height+4撐開至預設高度24px -->
+            <div :style="`padding:2px 0px; height:${4+Math.max(heightCir,heightBar)}px;`">
+                <div :style="`position:relative; padding-top:${(heightCir-heightBar)/2}px;`">
+
+                    <div class="ts" :style="`width:${widthBar}px; height:${heightBar}px; border-radius:8px; background:${useSwitchBarColor};`">
+                    </div>
+
+                    <div class="ts bs" :style="`position:absolute; top:0px; left:${ b ? widthBar-widthCir : 0 }px; width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSwitchCircleColor};`">
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="ts" :style="`text-transform:none; padding-left:5px; color:${useTextColor}; ${useTextFontSize}`" v-if="text!==''">
+                {{text}}
+            </div>
+
+        </div>
 
     </div>
 </template>
 
 <script>
 import isbol from 'wsemi/src/isbol.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 
 
 /**
- * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {Boolean|String} [value=false] 輸入是否狀態的布林值或字串，可接受true或false，或是'y'或'n'，預設false
- * @vue-prop {String} [color='pink accent-3'] 輸入切換開關開啟狀態(yes或true)的顏色字串，預設'pink accent-3'
+ * @vue-prop {String} [text=''] 輸入文字字串，預設''
+ * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
+ * @vue-prop {String} [textColorHover='grey darken-3'] 輸入滑鼠移入時文字顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
+ * @vue-prop {Number} [switchSize=24] 輸入切換器大小，單位為px，預設24
+ * @vue-prop {String} [checkedSwitchCircleColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedSwitchCircleColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'blue darken-2'
+ * @vue-prop {String} [checkedSwitchCircleColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedSwitchCircleColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#8ad'
+ * @vue-prop {String} [uncheckedSwitchCircleColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#9bd'
+ * @vue-prop {String} [uncheckedSwitchCircleColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#bbb'
+ * @vue-prop {String} [checkedSwitchBarColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedSwitchBarColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'blue darken-2'
+ * @@vue-prop {String} [checkedSwitchBarColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedSwitchBarColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#8ad'
+ * @vue-prop {String} [uncheckedSwitchBarColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#9bd'
+ * @vue-prop {String} [uncheckedSwitchBarColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#bbb'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
     props: {
+        value: {
+            type: [Boolean, String],
+            default: false,
+        },
         text: {
             type: String,
             default: '',
         },
-        value: {
-            type: [Boolean, String],
-            default: false,
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        textColorHover: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        switchSize: {
+            type: Number,
+            default: 24,
+        },
+        checkedSwitchCircleColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        checkedSwitchCircleColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
+        checkedSwitchCircleColorDisabled: {
+            type: String,
+            default: 'grey',
+        },
+        uncheckedSwitchCircleColor: {
+            type: String,
+            default: '#fafafa',
+        },
+        uncheckedSwitchCircleColorHover: {
+            type: String,
+            default: '#fff',
+        },
+        uncheckedSwitchCircleColorDisabled: {
+            type: String,
+            default: '#bbb',
+        },
+        checkedSwitchBarColor: {
+            type: String,
+            default: 'rgba(24, 103, 192, 0.6)',
+        },
+        checkedSwitchBarColorHover: {
+            type: String,
+            default: 'rgba(24, 103, 192, 0.5)',
+        },
+        checkedSwitchBarColorDisabled: {
+            type: String,
+            default: '#ececec',
+        },
+        uncheckedSwitchBarColor: {
+            type: String,
+            default: '#c5c5c5',
+        },
+        uncheckedSwitchBarColorHover: {
+            type: String,
+            default: '#ccc',
         },
-        color: {
+        uncheckedSwitchBarColorDisabled: {
             type: String,
-            default: 'pink accent-3',
+            default: '#ececec',
         },
         editable: {
             type: Boolean,
@@ -48,11 +139,15 @@ export default {
     },
     data: function() {
         return {
+
+            hoverTrans: false,
+
+            dh: 4,
+
             b: false,
+
         }
     },
-    mounted: function() {
-    },
     computed: {
 
         changeParam: function () {
@@ -74,14 +169,172 @@ export default {
             return ''
         },
 
+        heightCir: function() { // heightCir: 20,
+            let vo = this
+            return vo.switchSize - vo.dh
+        },
+
+        widthCir: function() { // widthCir: 20,
+            let vo = this
+            return vo.heightCir
+        },
+
+        heightBar: function() { // heightBar: 14,
+            let vo = this
+            return vo.switchSize / 24 * 14
+        },
+
+        widthBar: function() { // widthBar: 36,
+            let vo = this
+            return vo.switchSize / 24 * 36
+        },
+
+        effTextColor: function() {
+            let vo = this
+            return color2hex(vo.textColor)
+        },
+
+        effTextColorHover: function() {
+            let vo = this
+            return color2hex(vo.textColorHover)
+        },
+
+        useTextColor: function() {
+            let vo = this
+            let r
+            if (!vo.editable) {
+                return vo.effTextColor
+            }
+            r = vo.hoverTrans ? vo.effTextColorHover : vo.effTextColor
+            return r
+        },
+
+        useTextFontSize: function() {
+            let vo = this
+            let s = vo.textFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        effCheckedSwitchCircleColor: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColor)
+        },
+
+        effCheckedSwitchCircleColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColorHover)
+        },
+
+        effCheckedSwitchCircleColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColorDisabled)
+        },
+
+        useCheckedSwitchCircleColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedSwitchCircleColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedSwitchCircleColorHover : vo.effCheckedSwitchCircleColor
+        },
+
+        effUncheckedSwitchCircleColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColor)
+        },
+
+        effUncheckedSwitchCircleColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColorHover)
+        },
+
+        effUncheckedSwitchCircleColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColorDisabled)
+        },
+
+        useUncheckedSwitchCircleColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedSwitchCircleColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedSwitchCircleColorHover : vo.effUncheckedSwitchCircleColor
+        },
+
+        useSwitchCircleColor: function() {
+            let vo = this
+            return vo.b ? vo.useCheckedSwitchCircleColor : vo.useUncheckedSwitchCircleColor
+        },
+
+        effCheckedSwitchBarColor: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchBarColor)
+        },
+
+        effCheckedSwitchBarColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchBarColorHover)
+        },
+
+        effCheckedSwitchBarColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchBarColorDisabled)
+        },
+
+        useCheckedSwitchBarColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedSwitchBarColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedSwitchBarColorHover : vo.effCheckedSwitchBarColor
+        },
+
+        effUncheckedSwitchBarColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchBarColor)
+        },
+
+        effUncheckedSwitchBarColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchBarColorHover)
+        },
+
+        effUncheckedSwitchBarColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchBarColorDisabled)
+        },
+
+        useUncheckedSwitchBarColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedSwitchBarColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedSwitchBarColorHover : vo.effUncheckedSwitchBarColor
+        },
+
+        useSwitchBarColor: function() {
+            let vo = this
+            return vo.b ? vo.useCheckedSwitchBarColor : vo.useUncheckedSwitchBarColor
+        },
+
     },
     methods: {
 
-        toogleValue: function (b) {
-            //console.log('methods toogleValue', b)
+        toogleValue: function () {
+            // console.log('methods toogleValue')
 
             let vo = this
 
+            //check
+            if (!vo.editable) {
+                return
+            }
+
+            //toogle
+            let b = vo.b
+            b = !b
+
             //value
             let value = null
             if (isbol(vo.value)) {
@@ -97,7 +350,7 @@ export default {
                 }
             }
 
-            //$nextTick
+            //nextTick
             vo.$nextTick(() => {
 
                 //emit
@@ -112,4 +365,10 @@ export default {
 </script>
 
 <style scoped>
+.ts {
+    transition:all 0.3s;
+}
+.bs {
+    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+}
 </style>

package/src/components/WTree.vue

@@ -2,6 +2,7 @@
     <!-- 拖曳區可能超過組件區域外, 故得使用overflow:hidden -->
     <div
         style="position:relative; overflow:hidden;"
+        :changeViewHeightMax="changeViewHeightMax"
         :changeDefaultDisplayLevel="changeDefaultDisplayLevel"
         :changeDraggableAndOperatable="changeDraggableAndOperatable"
         :changeFilterKeyWords="changeFilterKeyWords"
@@ -9,7 +10,7 @@
 
         <WDynamicList
             ref="wdl"
-            :viewHeightMax="viewHeightMax"
+            :viewHeightMax="viewHeightMaxTrans"
             :itemMinHeight="defItemHeight"
             :itemsPreload="itemsPreload"
             :loadingText="loadingText"
@@ -17,7 +18,7 @@
             :searchingText="searchingText"
             :show="show"
             @change-view-items="(msg)=>{$emit('change-view-items',msg)}"
-            @change-height-of-items="(msg)=>{$emit('change-height-of-items',msg)}"
+            @change-height-of-items="(msg)=>{updateViewHeightMaxTrans(msg);$emit('change-height-of-items',msg)}"
         >
             <template v-slot="props">
 
@@ -237,7 +238,7 @@ let gm = globalMemory()
 
 /**
  * @vue-prop {Array|Object} [data=[]] 輸入資料陣列，預設[]，各元素配合slot顯示即可，slot內提供row與irow，對應原始rows內各元素與指標，另外各元素slot時不要用margin避免計算高度有誤差
- * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400
+ * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
  * @vue-prop {Boolean} [selectable=false] 輸入是否具有勾選模式，預設false
  * @vue-prop {Array} [selections=[]] 輸入勾選項目陣列，當selectable=true時才可使用，預設[]
@@ -579,6 +580,8 @@ export default {
 
             mmkey: null,
 
+            viewHeightMaxTrans: 2, //預設給予>=2最小內容區高度, 使能觸發顯示渲染連動機制
+
             separation: 3,
             defIconHeight: 34,
             selectionsTrans: [],
@@ -632,6 +635,18 @@ export default {
     },
     computed: {
 
+        changeViewHeightMax: function() {
+            let vo = this
+
+            //save
+            if (isNumber(vo.viewHeightMax)) {
+                vo.viewHeightMaxTrans = vo.viewHeightMax
+                // console.log('changeViewHeightMax viewHeightMaxTrans', vo.viewHeightMaxTrans)
+            }
+
+            return ''
+        },
+
         changeDefaultDisplayLevel: function() {
             //console.log('computed changeDefaultDisplayLevel')
 
@@ -788,6 +803,25 @@ export default {
             return { event: e, ele: e.currentTarget, row: props.row, item: props.row.item, index: props.index }
         },
 
+        updateViewHeightMaxTrans: function(msg) {
+            //console.log('methods updateViewHeightMaxTrans', msg)
+
+            let vo = this
+
+            //check, 若viewHeightMax給予數字則將直接使用, 故不更新viewHeightMaxTrans
+            if (isNumber(vo.viewHeightMax)) {
+                return
+            }
+
+            //update viewHeightMaxTrans
+            let h = get(msg, 'height')
+            if (isNumber(h)) {
+                vo.viewHeightMaxTrans = h
+                // console.log('updateViewHeightMaxTrans viewHeightMaxTrans', vo.viewHeightMaxTrans)
+            }
+
+        },
+
         getRowsFromData: function(data) {
             //console.log('methods getRowsFromData', data)