w-component-vue 2.1.76 → 2.1.79

package/src/components/WCheckbox.vue

@@ -1,38 +1,59 @@
 <template>
     <div
         :style="`display:inline-block; ${editable?'cursor:pointer;':''}`"
+        tabindex="0"
         :changeParam="changeParam"
         @click="toogleValue"
+        @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
+        @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
     >
-        <WIcon
-            :icon="checkedIcon"
-            :color="editable?checkedIconColor:checkedIconColorDisabled"
-            :size="iconSize"
-            v-if="b"
-        ></WIcon>
-        <WIcon
-            :icon="uncheckedIcon"
-            :color="editable?uncheckedIconColor:uncheckedIconColorDisabled"
-            :size="iconSize"
-            v-else
-        ></WIcon>
+
+        <div style="display:flex; align-items:center;">
+
+            <WIcon
+                :icon="checkedIcon"
+                :color="useCheckedIconColor"
+                :size="iconSize"
+                v-if="b"
+            ></WIcon>
+            <WIcon
+                :icon="uncheckedIcon"
+                :color="useUncheckedIconColor"
+                :size="iconSize"
+                v-else
+            ></WIcon>
+
+            <div :style="`transition:all 0.3s; text-transform:none; padding-left:5px; color:${useTextColor}; ${useTextFontSize}`" v-if="text!==''">
+                {{text}}
+            </div>
+
+        </div>
+
     </div>
 </template>
 
 <script>
 import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js/mdi.js'
 import isbol from 'wsemi/src/isbol.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 import WIcon from './WIcon.vue'
 
 
 /**
  * @vue-prop {Boolean|String} [value=false] 輸入是否狀態的布林值或字串，可接受true或false，或是'y'或'n'，預設false
+ * @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} [iconSize=24] 輸入圖標大小，單位為px，預設24
  * @vue-prop {String} [checkedIcon=mdiCheckboxMarked] 輸入有效(true|'y')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarked
  * @vue-prop {String} [checkedIconColor='blue darken-3'] 輸入可編輯時，有效(true|'y')圖標顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedIconColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')圖標顏色字串，預設'blue darken-2'
  * @@vue-prop {String} [checkedIconColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')圖標顏色字串，預設'grey'
  * @vue-prop {String} [uncheckedIcon=mdiCheckboxBlankOutline] 輸入無效(false|'n')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxBlankOutline
  * @vue-prop {String} [uncheckedIconColor='blue darken-3'] 輸入可編輯時，無效(false|'n')圖標顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [uncheckedIconColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，無效(false|'n')圖標顏色字串，預設'blue darken-2'
  * @@vue-prop {String} [uncheckedIconColorDisabled='grey'] 輸入不可編輯時，無效(false|'n')圖標顏色字串，預設'grey'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
@@ -45,6 +66,22 @@ export default {
             type: [Boolean, String],
             default: false,
         },
+        text: {
+            type: String,
+            default: '',
+        },
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        textColorHover: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         iconSize: {
             type: Number,
             default: 24,
@@ -57,6 +94,10 @@ export default {
             type: String,
             default: 'blue darken-3',
         },
+        checkedIconColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
         checkedIconColorDisabled: {
             type: String,
             default: 'grey',
@@ -69,6 +110,10 @@ export default {
             type: String,
             default: 'blue darken-3',
         },
+        uncheckedIconColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
         uncheckedIconColorDisabled: {
             type: String,
             default: 'grey',
@@ -80,7 +125,11 @@ export default {
     },
     data: function() {
         return {
+
+            hoverTrans: false,
+
             b: false,
+
         }
     },
     computed: {
@@ -104,6 +153,79 @@ export default {
             return ''
         },
 
+        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};`
+        },
+
+        effCheckedIconColor: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColor)
+        },
+
+        effCheckedIconColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColorHover)
+        },
+
+        effCheckedIconColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColorDisabled)
+        },
+
+        useCheckedIconColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedIconColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedIconColorHover : vo.effCheckedIconColor
+        },
+
+        effUncheckedIconColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColor)
+        },
+
+        effUncheckedIconColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColorHover)
+        },
+
+        effUncheckedIconColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColorDisabled)
+        },
+
+        useUncheckedIconColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedIconColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedIconColorHover : vo.effUncheckedIconColor
+        },
+
     },
     methods: {
 

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>