w-component-vue 2.2.2 → 2.2.5

package/src/components/WTreeIconCheckbox.vue

@@ -1,49 +1,53 @@
 <template>
-    <div
-        :style="`position:relative; display:inline-block; user-select:none; ${editable?'cursor:pointer;':''} outline:none;`"
-        tabindex="0"
-        @keyup.enter="emitClick"
-        @click="emitClick"
-    >
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='unchecked'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useUncheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checked'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path v-if="false" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
-                    <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checkedPartially'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedPartiallyColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path v-if="false" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"></path>
-                    <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
-            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
-                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid #fff; transform:translateY(-1px) rotate(45deg);`"></div>
-            </div>
-        </div>
+    <div :style="`display:inline-block; width:${iconSize}px; height:${iconSize}px; overflow:hidden;`">
+        <div :style="`transform:scale(${useScale}); transform-origin:0% 0%;`">
+            <div
+                :style="`position:relative; display:inline-block; width:${defIconSize}px; height:${defIconSize}px; user-select:none; ${editable?'cursor:pointer;':''} outline:none;`"
+                tabindex="0"
+                @keyup.enter="emitClick"
+                @click="emitClick"
+            >
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='unchecked'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useUncheckedColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='checked'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path v-if="false" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
+                            <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='checkedPartially'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedPartiallyColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path v-if="false" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"></path>
+                            <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div style="position:absolute; z-index:1; left:0px; top:0px; bottom:0; right:0; margin:auto;">
+                    <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-3px);`" v-if="!editable">
+                        <div :style="`display:inline-block; width:30px; height:2px; 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;">
+                    <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-1px);`" v-if="!editable">
+                        <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid ${useDisabledColor};`"></div>
+                    </div>
+                </div>
 
-        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
-            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
-                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid ${useDisabledColor}; transform:translateY(1px)rotate(45deg);`"></div>
             </div>
         </div>
-
     </div>
 </template>
 
@@ -53,6 +57,7 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {String} [mode='unchecked'] 輸入勾選模式字串，可選'unchecked'、'checked'、'checkedPartially'，預設'unchecked'
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，預設24
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {String} [uncheckedColor='grey darken-2'] 輸入未勾選時顏色字串，預設'grey darken-2'
  * @vue-prop {String} [uncheckedDisabledColor='grey'] 輸入禁用時未勾選時顏色字串，預設'grey'
@@ -69,6 +74,10 @@ export default {
             type: String,
             default: 'unchecked',
         },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
         editable: {
             type: Boolean,
             default: true,
@@ -100,10 +109,15 @@ export default {
     },
     data: function() {
         return {
+            defIconSize: 24,
         }
     },
     computed: {
 
+        useScale: function() {
+            return this.iconSize / this.defIconSize
+        },
+
         useDisabledColor: function() {
             //console.log('computed useDisabledColor')
 

package/src/components/WTreeIconToggle.vue

@@ -1,32 +1,38 @@
 <template>
-    <div
-        style="display:inline-block; 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%;"
-        >
+    <div :style="`display:inline-block; width:${iconSize}px; height:${iconSize}px; overflow:hidden;`">
+        <div :style="`transform:scale(${useScale}); transform-origin:0% 0%;`">
             <div
-                :style="`transition:all 0.1s; transform:rotate(${useRotate}deg)`"
+                :style="`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 circle"
-                    :style="`transition: all 0.5s; background:${useIconBackgroundColor};`"
-                    @mouseenter="mouseenter"
-                    @mouseleave="mouseleave"
+                    class="cc"
+                    style="height:100%;"
                 >
-                    <!-- 圖標稍微偏左1px得強制移動 -->
                     <div
-                        class="caretRight"
-                        style="transform:translateX(1px);"
+                        :style="`transition:all 0.1s; transform:rotate(${useRotate}deg); transform-origin:50% 50%;`"
                     >
-                        <span style="display:flex;">
-                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useIconColor" width="11px" height="11px" x="0px" y="0px" viewBox="0 0 415.346 415.346" xml:space="preserve"><g><path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697 c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/></g></svg>
-                        </span>
+
+                        <div style="padding:1px;">
+                            <div
+                                class="cc circle"
+                                :style="`transition:all 0.5s; background:${useIconBackgroundColor};`"
+                                @mouseenter="mouseenter"
+                                @mouseleave="mouseleave"
+                            >
+                                <!-- 圖標稍微偏左1px得強制移動 -->
+                                <div
+                                    class="caretRight"
+                                >
+                                    <span style="display:flex;">
+                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useIconColor" width="11px" height="11px" x="0px" y="0px" viewBox="-70 0 475.346 415.346" xml:space="preserve"><g><path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697 c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/></g></svg>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -41,6 +47,7 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {String} [mode='right'] 輸入圖標朝向字串，可選'right'、'bottom'、'left'、'top'，預設'right'
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，預設24
  * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
  * @vue-prop {String} [iconBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
@@ -53,6 +60,10 @@ export default {
             type: String,
             default: 'right',
         },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
         iconColor: {
             type: String,
             default: 'grey',
@@ -68,6 +79,7 @@ export default {
     },
     data: function() {
         return {
+            defIconSize: 24,
         }
     },
     computed: {
@@ -86,6 +98,10 @@ export default {
             return get(kp, vo.dir, 0)
         },
 
+        useScale: function() {
+            return this.iconSize / this.defIconSize
+        },
+
         useIconColor: function() {
             //console.log('computed useIconColor')
 
@@ -147,9 +163,13 @@ export default {
     justify-content: center;
 }
 .circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 24px;
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    min-height: 22px;
+    max-width: 22px;
+    max-height: 22px;
+    border-radius: 50%;
 }
 </style>