w-component-vue 2.3.67 → 2.3.69

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
@@ -530,7 +530,9 @@ export default {
                     ? vo.effIconColorHover
                     : vo.effIconColor
             if (!vo.editable) {
-                r = vo.activeTrans ? vo.effIconColorActive : vo.effIconColor
+                r = vo.activeTrans
+                    ? vo.effIconColorActive
+                    : vo.effIconColor
             }
             return r
         },
@@ -571,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
         },
@@ -608,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
@@ -736,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
         },
@@ -777,7 +797,7 @@ export default {
             //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 ''
             }
@@ -785,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

@@ -21,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)"
@@ -54,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>
@@ -86,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'
@@ -115,9 +115,9 @@ 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 {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
@@ -239,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)',
@@ -262,6 +252,16 @@ 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,
@@ -388,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
@@ -569,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'
 
 

package/src/components/{WGroupCheck.vue → WGroupChipCheck.vue}

@@ -27,6 +27,11 @@
                 :backgroundColor="backgroundColor"
                 :backgroundColorHover="backgroundColorHover"
                 :backgroundColorActive="backgroundColorActive"
+                :tooltipBorderRadius="tooltipBorderRadius"
+                :tooltipPaddingStyle="tooltipPaddingStyle"
+                :tooltipTextFontSize="tooltipTextFontSize"
+                :tooltipTextColor="tooltipTextColor"
+                :tooltipBackgroundColor="tooltipBackgroundColor"
                 :shadow="shadow"
                 :shadowStyle="shadowStyle"
                 :shadowActive="shadowActive"
@@ -90,6 +95,11 @@ import parseSpace from '../js/parseSpace.mjs'
  * @vue-prop {String} [backgroundColor='transparent'] 輸入背景顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
+ * @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='white'] 輸入提示文字顏色字串，預設'white'
+ * @vue-prop {String} [tooltipBackgroundColor='rgba(60,60,60,0.75)'] 輸入背景顏色字串，預設'rgba(60,60,60,0.75)'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
  * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
@@ -215,6 +225,31 @@ export default {
             type: String,
             default: 'orange',
         },
+        tooltipBorderRadius: {
+            type: Number,
+            default: 4,
+        },
+        tooltipPaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 5,
+                    h: 8,
+                }
+            },
+        },
+        tooltipTextFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        tooltipTextColor: {
+            type: String,
+            default: 'white',
+        },
+        tooltipBackgroundColor: {
+            type: String,
+            default: 'rgba(60,60,60,0.75)',
+        },
         marginStyle: {
             type: Object,
             default: () => {
@@ -340,12 +375,6 @@ export default {
                     borderColor: vo.borderColor, //供配合左右active項目邊框變色
                     borderColorHover: vo.borderColorHover, //供配合左右active項目邊框變色
                     borderColorActive: vo.borderColorActive, //供配合左右active項目邊框變色
-                    // borderLeftColor: borderColor,
-                    // borderRightColor: borderColor,
-                    // borderLeftColorHover: borderColorHover,
-                    // borderRightColorHover: borderColorHover,
-                    // borderLeftColorActive: vo.borderColorActive,
-                    // borderRightColorActive: vo.borderColorActive,
                 }
             })
 

package/src/components/{WGroupRadio.vue → WGroupChipRadio.vue}

@@ -1,5 +1,5 @@
 <template>
-    <WGroupCheck
+    <WGroupChipCheck
         v-bind="{...$props,multiCheck:false}"
         v-on="$listeners"
     >
@@ -9,11 +9,11 @@
                 :kitem="props.kitem"
             ></slot>
         </template>
-    </WGroupCheck>
+    </WGroupChipCheck>
 </template>
 
 <script>
-import WGroupCheck from './WGroupCheck.vue'
+import WGroupChipCheck from './WGroupChipCheck.vue'
 
 
 /**
@@ -39,6 +39,11 @@ import WGroupCheck from './WGroupCheck.vue'
  * @vue-prop {String} [backgroundColor='transparent'] 輸入背景顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
+ * @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='white'] 輸入提示文字顏色字串，預設'white'
+ * @vue-prop {String} [tooltipBackgroundColor='rgba(60,60,60,0.75)'] 輸入背景顏色字串，預設'rgba(60,60,60,0.75)'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
  * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
@@ -57,7 +62,7 @@ import WGroupCheck from './WGroupCheck.vue'
  */
 export default {
     components: {
-        WGroupCheck,
+        WGroupChipCheck,
     },
     props: {
         items: {
@@ -160,6 +165,31 @@ export default {
             type: String,
             default: 'orange',
         },
+        tooltipBorderRadius: {
+            type: Number,
+            default: 4,
+        },
+        tooltipPaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 5,
+                    h: 8,
+                }
+            },
+        },
+        tooltipTextFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        tooltipTextColor: {
+            type: String,
+            default: 'white',
+        },
+        tooltipBackgroundColor: {
+            type: String,
+            default: 'rgba(60,60,60,0.75)',
+        },
         marginStyle: {
             type: Object,
             default: () => {