w-component-vue 2.3.66 → 2.3.68

package/src/AppZoneWInputCheckbox.vue

@@ -201,7 +201,7 @@
 </template>
 
 <script>
-import { mdiAccountSupervisorCircle, mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
+import { mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WInputCheckbox from './components/WInputCheckbox.vue'
 import WIcon from './components/WIcon.vue'
@@ -217,7 +217,6 @@ export default {
     },
     data: function() {
         return {
-            mdiAccountSupervisorCircle,
             'WInputCheckbox': {
                 'string': {
                     'items': [

package/src/AppZoneWInputRadio.vue

@@ -201,7 +201,7 @@
 </template>
 
 <script>
-import { mdiAccountSupervisorCircle, mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
+import { mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WInputRadio from './components/WInputRadio.vue'
 import WIcon from './components/WIcon.vue'
@@ -217,7 +217,6 @@ export default {
     },
     data: function() {
         return {
-            mdiAccountSupervisorCircle,
             'WInputRadio': {
                 'string': {
                     'items': [

package/src/AppZoneWPanelBulge.vue

@@ -153,7 +153,7 @@
                 >
                     <template v-slot:header>
 
-                        <w-group-radio
+                        <w-group-chip-radio
                             style="margin:0px 10px;"
                             :items="WPanelBulge.menu.items"
                             v-model="WPanelBulge.menu.select"
@@ -169,7 +169,7 @@
                             :backgroundColorHover="'rgba(255,255,255,0)'"
                             :backgroundColorActive="'rgba(255,255,255,0.15)'"
                             :shadowActive="false"
-                        ></w-group-radio>
+                        ></w-group-chip-radio>
 
                     </template>
 
@@ -189,14 +189,14 @@
 import { mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WPanelBulge from './components/WPanelBulge.vue'
-import WGroupRadio from './components/WGroupRadio.vue'
+import WGroupChipRadio from './components/WGroupChipRadio.vue'
 
 
 export default {
     components: {
         demolink,
         WPanelBulge,
-        WGroupRadio,
+        WGroupChipRadio,
     },
     props: {
     },

package/src/components/WBadge.vue

@@ -29,7 +29,7 @@
 <script>
 import get from 'lodash-es/get'
 import replace from 'wsemi/src/replace.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import domResize from '../js/domResize.mjs'
 
 

package/src/components/WButtonChip.vue

@@ -24,7 +24,7 @@
 
                     <!-- 使用overflow:hidden預先測試, 因ripple會自行添加, 先行測試添加後狀態 -->
                     <div
-                        :style="`transition:all 0.3s; ${useBorderRadius} background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} box-shadow:${useShadow}; outline:none; user-select:none; overflow:hidden;`"
+                        :style="`transition:all 0.3s; ${useBorderRadius} background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} ${useShadow}; outline:none; user-select:none; overflow:hidden;`"
                         tabindex="0"
                         v-domripple="useRipple"
                         @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
@@ -149,7 +149,7 @@ import sep from 'wsemi/src/sep.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import oc from 'wsemi/src/color.mjs'
 import domCancelEvent from 'wsemi/src/domCancelEvent.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domRipple from '../js/domRipple.mjs'
 import WIcon from './WIcon.vue'
@@ -185,7 +185,7 @@ import WTooltip from './WTooltip.vue'
  * @vue-prop {Number} [tooltipBorderRadius=4] 輸入提示文字框圓角度數字，單位為px，預設4
  * @vue-prop {Object} [tooltipPaddingStyle={v:5,h:8}] 輸入提示文字內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:5,h:8}
  * @vue-prop {String} [tooltipTextFontSize='0.85rem'] 輸入提示文字字型大小字串，預設'0.85rem'
- * @vue-prop {String} [tooltipTextColor='black'] 輸入提示文字顏色字串，預設'white'
+ * @vue-prop {String} [tooltipTextColor='white'] 輸入提示文字顏色字串，預設'white'
  * @vue-prop {String} [tooltipBackgroundColor='rgba(60,60,60,0.75)'] 輸入背景顏色字串，預設'rgba(60,60,60,0.75)'
  * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
@@ -524,9 +524,15 @@ export default {
             if (vo.loadingTrans || vo.isProging) {
                 return vo.effIconColor
             }
-            r = vo.activeTrans ? vo.effIconColorActive : vo.hoverTrans ? vo.effIconColorHover : vo.effIconColor
+            r = vo.activeTrans
+                ? vo.effIconColorActive
+                : vo.hoverTrans
+                    ? vo.effIconColorHover
+                    : vo.effIconColor
             if (!vo.editable) {
-                r = vo.activeTrans ? vo.effIconColorActive : vo.effIconColor
+                r = vo.activeTrans
+                    ? vo.effIconColorActive
+                    : vo.effIconColor
             }
             return r
         },
@@ -567,9 +573,15 @@ export default {
             if (vo.loadingTrans || vo.isProging) {
                 return vo.effTextColor
             }
-            r = vo.activeTrans ? vo.effTextColorActive : vo.hoverTrans ? vo.effTextColorHover : vo.effTextColor
+            r = vo.activeTrans
+                ? vo.effTextColorActive
+                : vo.hoverTrans
+                    ? vo.effTextColorHover
+                    : vo.effTextColor
             if (!vo.editable) {
-                r = vo.activeTrans ? vo.effTextColorActive : vo.effTextColor
+                r = vo.activeTrans
+                    ? vo.effTextColorActive
+                    : vo.effTextColor
             }
             return r
         },
@@ -604,9 +616,15 @@ export default {
             if (vo.loadingTrans || vo.isProging) {
                 r = vo.effBorderColor //不能直接return, 得由後面join產生border樣式字串
             }
-            r = vo.activeTrans ? vo.effBorderColorActive : vo.hoverTrans ? vo.effBorderColorHover : vo.effBorderColor
+            r = vo.activeTrans
+                ? vo.effBorderColorActive
+                : vo.hoverTrans
+                    ? vo.effBorderColorHover
+                    : vo.effBorderColor
             if (!vo.editable) {
-                r = vo.activeTrans ? vo.effBorderColorActive : vo.effBorderColor
+                r = vo.activeTrans
+                    ? vo.effBorderColorActive
+                    : vo.effBorderColor
             }
 
             //useBorderUsed
@@ -732,9 +750,15 @@ export default {
             if (vo.loadingTrans || vo.isProging) {
                 return vo.effBackgroundColor
             }
-            r = vo.activeTrans ? vo.effBackgroundColorActive : vo.hoverTrans ? vo.effBackgroundColorHover : vo.effBackgroundColor
+            r = vo.activeTrans
+                ? vo.effBackgroundColorActive
+                : vo.hoverTrans
+                    ? vo.effBackgroundColorHover
+                    : vo.effBackgroundColor
             if (!vo.editable) {
-                r = vo.activeTrans ? vo.effBackgroundColorActive : vo.effBackgroundColor
+                r = vo.activeTrans
+                    ? vo.effBackgroundColorActive
+                    : vo.effBackgroundColor
             }
             return r
         },
@@ -771,9 +795,9 @@ export default {
             }
 
             //shadowActive
-            if (vo.active && vo.shadowActive) {
+            if (vo.activeTrans && vo.shadowActive) {
                 if (isestr(vo.shadowActiveStyle)) {
-                    return repColor(vo.shadowActiveStyle, 'backgroundColorActiveAlpha', vo.backgroundColorActive)
+                    return 'box-shadow:' + repColor(vo.shadowActiveStyle, 'backgroundColorActiveAlpha', vo.backgroundColorActive)
                 }
                 return ''
             }
@@ -781,7 +805,7 @@ export default {
             //shadow
             if (vo.shadow) {
                 if (isestr(vo.shadowStyle)) {
-                    return repColor(vo.shadowStyle, 'backgroundColorAlpha', vo.backgroundColor)
+                    return 'box-shadow:' + repColor(vo.shadowStyle, 'backgroundColorAlpha', vo.backgroundColor)
                 }
                 return ''
             }

package/src/components/WButtonCircle.vue

@@ -2,6 +2,7 @@
     <div
         style="display:inline-block; vertical-align:middle; outline:none; user-select:none;"
         :role="editable?role:''"
+        :changeActive="changeActive"
         :changeLoading="changeLoading"
     >
 
@@ -20,7 +21,7 @@
 
                 <!-- 使用overflow:hidden預先測試, 因ripple會自行添加, 先行測試添加後狀態 -->
                 <div
-                    :style="`position:relative; transition:all 0.3s; ${usePadding} ${useBorderRadius} border:${borderWidth}px solid ${useBorderColor}; background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} box-shadow:${useShadow}; outline:none; user-select:none; overflow:hidden;`"
+                    :style="`position:relative; transition:all 0.3s; ${usePadding} ${useBorderRadius} border:${borderWidth}px solid ${useBorderColor}; background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} ${useShadow}; outline:none; user-select:none; overflow:hidden;`"
                     tabindex="0"
                     @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
                     @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
@@ -53,7 +54,7 @@
                         style="position:absolute; left:0; right:0; top:0; bottom:0;"
                         v-if="!editable"
                     >
-                        <div :style="`border-radius:50%; overflow:hidden; width:100%; height:100%;`">
+                        <div :style="`${useBorderRadius} overflow:hidden; width:100%; height:100%;`">
                             <div :style="`background:${effDisabledColor}; height:100%;`">
                             </div>
                         </div>
@@ -85,7 +86,7 @@ import sep from 'wsemi/src/sep.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import domRipple from 'wsemi/src/domRipple.mjs'
 import oc from 'wsemi/src/color.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import WIcon from './WIcon.vue'
 import WIconLoading from './WIconLoading.vue'
@@ -99,24 +100,28 @@ import WTooltip from './WTooltip.vue'
  * @vue-prop {String} [iconColor='grey darken-1'] 輸入按鈕圖標顏色字串，預設'grey darken-1'
  * @vue-prop {String} [iconColorHover='grey darken-2'] 輸入滑鼠移入時按鈕圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [iconColorFocus='grey darken-3'] 輸入取得焦點時按鈕圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [iconColorActive='grey darken-3'] 輸入主動模式時按鈕圖標顏色字串，預設'grey darken-3'
  * @vue-prop {Number|String} [borderRadius='50%'] 輸入框圓角度數字或字串，若給予數字時單位為px，預設'50%'
  * @vue-prop {Object} [borderRadiusStyle={left:true,right:true}] 輸入框圓角設定物件，可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right，left代表設定top-left與bottom-left，right代表設定top-right與bottom-right，top代表設定top-left與top-right，bottom代表設定bottom-left與bottom-right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為布林值，預設{left:true,right:true}
  * @vue-prop {Number} [borderWidth=0] 輸入框線寬度數字，單位為px，預設0
  * @vue-prop {String} [borderColor='transparent'] 輸入按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [borderColorHover='transparent'] 輸入滑鼠移入時按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [borderColorFocus='transparent'] 輸入取得焦點時按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorActive='transparent'] 輸入主動模式時按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColor='rgb(241,241,241)'] 輸入按鈕背景顏色字串，預設'rgb(241,241,241)'
  * @vue-prop {String} [backgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時按鈕背景顏色字串，預設'rgb(236,236,236)'
  * @vue-prop {String} [backgroundColorFocus='rgb(230,230,230)'] 輸入取得焦點時按鈕背景顏色字串，預設'rgb(230,230,230)'
+ * @vue-prop {String} [backgroundColorActive='rgb(230,230,230)'] 輸入主動模式時按鈕背景顏色字串，預設'rgb(230,230,230)'
  * @vue-prop {Number} [tooltipBorderRadius=4] 輸入提示文字框圓角度數字，單位為px，預設4
  * @vue-prop {Object} [tooltipPaddingStyle={v:5,h:8}] 輸入提示文字內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:5,h:8}
  * @vue-prop {String} [tooltipTextFontSize='0.85rem'] 輸入提示文字字型大小字串，預設'0.85rem'
- * @vue-prop {String} [tooltipTextColor='black'] 輸入提示文字顏色字串，預設'white'
+ * @vue-prop {String} [tooltipTextColor='white'] 輸入提示文字顏色字串，預設'white'
  * @vue-prop {String} [tooltipBackgroundColor='rgba(60,60,60,0.75)'] 輸入背景顏色字串，預設'rgba(60,60,60,0.75)'
- * @vue-prop {String} [rippleColor='rgba(255, 255, 255, 0.5)'] 輸入ripple效果顏色字串，預設'rgba(255, 255, 255, 0.5)'
+ * @vue-prop {String} [rippleColor='rgba(255,255,255,0.5)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.5)'
  * @vue-prop {Object} [paddingStyle={v:4,h:4}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:4,h:4}
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Boolean} [active=false] 輸入是否為主動模式布林值，預設false
  * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
@@ -156,6 +161,10 @@ export default {
             type: String,
             default: 'grey darken-3',
         },
+        iconColorActive: {
+            type: String,
+            default: 'grey darken-3',
+        },
         borderRadius: {
             type: [Number, String],
             default: '50%',
@@ -185,6 +194,10 @@ export default {
             type: String,
             default: 'transparent',
         },
+        borderColorActive: {
+            type: String,
+            default: 'transparent',
+        },
         backgroundColor: {
             type: String,
             default: 'rgb(241,241,241)',
@@ -197,6 +210,10 @@ export default {
             type: String,
             default: 'rgb(230,230,230)',
         },
+        backgroundColorActive: {
+            type: String,
+            default: 'rgb(230,230,230)',
+        },
         tooltipBorderRadius: {
             type: Number,
             default: 4,
@@ -222,16 +239,6 @@ export default {
             type: String,
             default: 'rgba(60,60,60,0.75)',
         },
-        shadow: {
-            type: Boolean,
-            default: true,
-        },
-        shadowStyle: {
-            type: String,
-            // default: '0 12px 20px -10px {backgroundColorAlpha=0.28}, 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px {backgroundColorAlpha=0.2}',
-            //使用黑色短陰影比較符合button形象
-            default: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
-        },
         rippleColor: {
             type: String,
             default: 'rgba(255, 255, 255, 0.5)',
@@ -245,6 +252,20 @@ export default {
                 }
             },
         },
+        shadow: {
+            type: Boolean,
+            default: true,
+        },
+        shadowStyle: {
+            type: String,
+            // default: '0 12px 20px -10px {backgroundColorAlpha=0.28}, 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px {backgroundColorAlpha=0.2}',
+            //使用黑色短陰影比較符合button形象
+            default: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
+        },
+        active: {
+            type: Boolean,
+            default: false,
+        },
         cursorPointer: {
             type: Boolean,
             default: true,
@@ -276,15 +297,29 @@ export default {
     },
     data: function() {
         return {
-            loadingTrans: false,
+
+            activeTrans: false,
             hoverTrans: false,
             focusTrans: false,
+            loadingTrans: false,
+
         }
     },
     mounted: function() {
     },
     computed: {
 
+        changeActive: function() {
+            //console.log('computed changeActive')
+
+            let vo = this
+
+            //save
+            vo.activeTrans = vo.active
+
+            return ''
+        },
+
         changeLoading: function() {
             //console.log('computed changeLoading')
 
@@ -311,16 +346,28 @@ export default {
             return color2hex(vo.iconColorFocus)
         },
 
+        effIconColorActive: function() {
+            let vo = this
+            return color2hex(vo.iconColorActive)
+        },
+
         useIconColor: function() {
             let vo = this
             let r
             if (vo.loadingTrans) {
                 return vo.effIconColor
             }
-            r = vo.focusTrans ? vo.effIconColorFocus : vo.hoverTrans ? vo.effIconColorHover : vo.effIconColor
+            r = vo.activeTrans
+                ? vo.effIconColorActive
+                : vo.focusTrans
+                    ? vo.effIconColorFocus
+                    : vo.hoverTrans
+                        ? vo.effIconColorHover
+                        : vo.effIconColor
             if (!vo.editable) {
-                // r = vo.focusTrans ? vo.effIconColorFocus : vo.effIconColor
-                r = vo.effIconColor
+                r = vo.activeTrans
+                    ? vo.effIconColorActive
+                    : vo.effIconColor
             }
             return r
         },
@@ -341,10 +388,10 @@ export default {
             }
 
             //四方向radius
-            let tl = ''
-            let tr = ''
-            let bl = ''
-            let br = ''
+            let tl = '0px'
+            let tr = '0px'
+            let bl = '0px'
+            let br = '0px'
             if (get(vo, 'borderRadiusStyle.left') === true) {
                 tl = bdr
                 bl = bdr
@@ -395,15 +442,28 @@ export default {
             return color2hex(vo.borderColorFocus)
         },
 
+        effBorderColorActive: function() {
+            let vo = this
+            return color2hex(vo.borderColorActive)
+        },
+
         useBorderColor: function() {
             let vo = this
             let r
             if (vo.loadingTrans) {
                 return vo.effBorderColor
             }
-            r = vo.focusTrans ? vo.effBorderColorFocus : vo.hoverTrans ? vo.effBorderColorHover : vo.effBorderColor
+            r = vo.activeTrans
+                ? vo.effBorderColorActive
+                : vo.focusTrans
+                    ? vo.effBorderColorFocus
+                    : vo.hoverTrans
+                        ? vo.effBorderColorHover
+                        : vo.effBorderColor
             if (!vo.editable) {
-                r = vo.focusTrans ? vo.effBorderColorFocus : vo.effBorderColor
+                r = vo.activeTrans
+                    ? vo.effBorderColorActive
+                    : vo.effBorderColor
             }
             return r
         },
@@ -423,15 +483,28 @@ export default {
             return color2hex(vo.backgroundColorFocus)
         },
 
+        effBackgroundColorActive: function() {
+            let vo = this
+            return color2hex(vo.backgroundColorActive)
+        },
+
         useBackgroundColor: function() {
             let vo = this
             let r
             if (vo.loadingTrans) {
                 return vo.effBackgroundColor
             }
-            r = vo.focusTrans ? vo.effBackgroundColorFocus : vo.hoverTrans ? vo.effBackgroundColorHover : vo.effBackgroundColor
+            r = vo.activeTrans
+                ? vo.effBackgroundColorActive
+                : vo.focusTrans
+                    ? vo.effBackgroundColorFocus
+                    : vo.hoverTrans
+                        ? vo.effBackgroundColorHover
+                        : vo.effBackgroundColor
             if (!vo.editable) {
-                r = vo.focusTrans ? vo.effBackgroundColorFocus : vo.effBackgroundColor
+                r = vo.activeTrans
+                    ? vo.effBackgroundColorActive
+                    : vo.effBackgroundColor
             }
             return r
         },
@@ -496,18 +569,10 @@ export default {
                 return join(s, '')
             }
 
-            // //shadowActive
-            // if (vo.active && vo.shadowActive) {
-            //     if (isestr(vo.shadowActiveStyle)) {
-            //         return repColor(vo.shadowActiveStyle, 'backgroundColorActiveAlpha', vo.backgroundColorActive)
-            //     }
-            //     return ''
-            // }
-
             //shadow
             if (vo.shadow) {
                 if (isestr(vo.shadowStyle)) {
-                    return repColor(vo.shadowStyle, 'backgroundColorAlpha', vo.backgroundColor)
+                    return 'box-shadow:' + repColor(vo.shadowStyle, 'backgroundColorAlpha', vo.backgroundColor)
                 }
                 return ''
             }

package/src/components/WCheckbox.vue

@@ -43,7 +43,7 @@
 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 color2hex from '../js/color2hex.mjs'
 import WIcon from './WIcon.vue'
 
 

package/src/components/WComponentVue.vue

@@ -16,9 +16,11 @@ import WEchartsVueDyn from './WEchartsVueDyn.vue'
 import WExplorer from './WExplorer.vue'
 import WGroupBaggage from './WGroupBaggage.vue'
 import WGroupBaggageItem from './WGroupBaggageItem.vue'
-import WGroupCheck from './WGroupCheck.vue'
+import WGroupChipCheck from './WGroupChipCheck.vue'
+import WGroupChipRadio from './WGroupChipRadio.vue'
 import WGroupDragdrop from './WGroupDragdrop.vue'
-import WGroupRadio from './WGroupRadio.vue'
+import WGroupIconCheck from './WGroupIconCheck.vue'
+import WGroupIconRadio from './WGroupIconRadio.vue'
 import WGroupTags from './WGroupTags.vue'
 import WHighchartsBitmapDyn from './WHighchartsBitmapDyn.vue'
 import WHighchartsVueDyn from './WHighchartsVueDyn.vue'
@@ -101,9 +103,11 @@ let WComponentVue = {
         Vue.component('w-explorer', WExplorer)
         Vue.component('w-group-baggage', WGroupBaggage)
         Vue.component('w-group-baggage-item', WGroupBaggageItem)
-        Vue.component('w-group-check', WGroupCheck)
+        Vue.component('w-group-chip-check', WGroupChipCheck)
+        Vue.component('w-group-chip-radio', WGroupChipRadio)
         Vue.component('w-group-dragdrop', WGroupDragdrop)
-        Vue.component('w-group-radio', WGroupRadio)
+        Vue.component('w-group-icon-check', WGroupIconCheck)
+        Vue.component('w-group-icon-radio', WGroupIconRadio)
         Vue.component('w-group-tags', WGroupTags)
         Vue.component('w-highcharts-bitmap-dyn', WHighchartsBitmapDyn)
         Vue.component('w-highcharts-vue-dyn', WHighchartsVueDyn)

package/src/components/WConfirm.vue

@@ -88,7 +88,7 @@
 
 <script>
 import { mdiAlert, mdiCheckboxMarkedCircle, mdiCloseCircle } from '@mdi/js'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import WButtonChip from './WButtonChip.vue'
 import WIcon from './WIcon.vue'
 import WDialog from './WDialog.vue'

package/src/components/WDialog.vue

@@ -293,7 +293,7 @@ import genID from 'wsemi/src/genID.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import domResize from '../js/domResize.mjs'
 import domZIndex from '../js/domZIndex.mjs'
 import WButtonCircle from './WButtonCircle.vue'

package/src/components/WDrawer.vue

@@ -124,7 +124,7 @@ import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
 import domGetWindowSize from 'wsemi/src/domGetWindowSize.mjs'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 
 
 /**

package/src/components/WDropfiles.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import domDropFiles from 'wsemi/src/domDropFiles.mjs'
 
 

package/src/components/WDynamicList.vue

@@ -93,7 +93,7 @@ import debounce from 'wsemi/src/debounce.mjs'
 import pmThrottle from 'wsemi/src/pmThrottle.mjs'
 import binarySearch from '../js/binarySearch.mjs'
 import globalMemory from '../js/globalMemory.mjs'
-// import color2hex from '../js/vuetifyColor.mjs'
+// import color2hex from '../js/color2hex.mjs'
 import WPanelScrollyCore from './WPanelScrollyCore.vue'
 
 

package/src/components/WExplorer.vue

@@ -419,7 +419,7 @@ import arrSort from 'wsemi/src/arrSort.mjs'
 import filepathToTree from 'wsemi/src/filepathToTree.mjs'
 // import filepathToTreeWk from '../js/filepathToTreeWk.wk.umd.js'
 import parseSpace from '../js/parseSpace.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import domResize from '../js/domResize.mjs'
 import WIcon from './WIcon.vue'
 import WTree from './WTree.vue'

package/src/components/WGroupBaggage.vue

@@ -99,7 +99,7 @@ import get from 'lodash-es/get'
 import isNumber from 'lodash-es/isNumber'
 import replace from 'wsemi/src/replace.mjs'
 import parseSpace from '../js/parseSpace.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import color2hex from '../js/color2hex.mjs'
 import WGroupBaggageItem from './WGroupBaggageItem.vue'