w-component-vue 2.3.67 → 2.3.69

package/src/{AppZoneWGroupRadio.vue → AppZoneWGroupChipRadio.vue}

@@ -2,7 +2,7 @@
     <div>
 
 
-        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-group-radio</span></div>
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-group-chip-radio</span></div>
 
 
         <div style="padding:0px;">
@@ -10,274 +10,339 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'default'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.string.items"
-                    v-model="WGroupRadio.string.select"
-                ></w-group-radio>
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.string.items"
+                    v-model="WGroupChipRadio.string.select"
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'click (console.log)'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.string.items"
-                    v-model="WGroupRadio.string.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.string.items"
+                    v-model="WGroupChipRadio.string.select"
                     @click="ckBtn"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'icon (material)'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
-                ></w-group-radio>
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'icon (fontawesome)'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.objectFA.items"
-                    v-model="WGroupRadio.objectFA.select"
-                ></w-group-radio>
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectFA.items"
+                    v-model="WGroupChipRadio.objectFA.select"
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'marginStyle'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :marginStyle="{top:0,right:25,bottom:0,left:0}"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'tooltip'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.objectTP.items"
-                    v-model="WGroupRadio.objectTP.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectTP.items"
+                    v-model="WGroupChipRadio.objectTP.select"
                     :tooltip="'測試中文tooltip'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
+                    :casename="'tooltip & tooltipBorderRadius'"
+                ></demolink>
+
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectTP.items"
+                    v-model="WGroupChipRadio.objectTP.select"
+                    :tooltip="'測試中文tooltip'"
+                    :tooltipBorderRadius="10"
+                ></w-group-chip-radio>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-chip-radio'"
+                    :casename="'tooltip & tooltipPaddingStyle'"
+                ></demolink>
+
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectTP.items"
+                    v-model="WGroupChipRadio.objectTP.select"
+                    :tooltip="'測試中文tooltip'"
+                    :tooltipPaddingStyle="{v:10,h:13}"
+                ></w-group-chip-radio>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-chip-radio'"
+                    :casename="'tooltip & tooltipTextFontSize'"
+                ></demolink>
+
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectTP.items"
+                    v-model="WGroupChipRadio.objectTP.select"
+                    :tooltip="'測試中文tooltip'"
+                    :tooltipTextFontSize="'0.7rem'"
+                ></w-group-chip-radio>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-chip-radio'"
+                    :casename="'tooltip & tooltipTextColor & tooltipBackgroundColor'"
+                ></demolink>
+
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.objectTP.items"
+                    v-model="WGroupChipRadio.objectTP.select"
+                    :tooltip="'測試中文tooltip'"
+                    :tooltipTextColor="'#E65100'"
+                    :tooltipBackgroundColor="'#FFF3E0'"
+                ></w-group-chip-radio>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-chip-radio'"
                     :casename="'paddingStyle & iconSize & textFontSize'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :paddingStyle="{v:10,h:24}"
                     :iconSize="26"
                     :textFontSize="'0.9rem'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'shiftLeft'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shiftLeft="5"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'shiftLeft & shiftRight'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shiftLeft="7"
                     :shiftRight="5"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'textColor'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :textColor="'grey darken-1'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'textColor & textColorHover'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :textColor="'grey darken-1'"
                     :textColorHover="'orange darken-3'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'textColorActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :textColorActive="'white'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'iconColor & iconColorHover'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :iconColor="'orange'"
                     :iconColorHover="'orange darken-2'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'iconColorActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :iconColorActive="'yellow'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'borderRadius'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :borderRadius="0"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'borderRadius & borderRadiusStyle & paddingStyle'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :borderRadius="20"
                     :borderRadiusStyle="{top:true}"
                     :paddingStyle="{v:3,h:20}"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'borderColor & borderColorHover & borderColorActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :borderColor="'grey'"
                     :borderColorHover="'grey darken-2'"
                     :borderColorActive="'transparent'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'borderWidth & borderColor & borderColorHover & borderColorActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :borderWidth="{top:2,bottom:2,left:2,right:2}"
                     _1borderWidth="{top:1}"
                     _2borderWidth="{bottom:1}"
@@ -286,120 +351,120 @@
                     :borderColor="'grey'"
                     :borderColorHover="'grey darken-2'"
                     :borderColorActive="'#fff'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'backgroundColor & backgroundColorHover'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :backgroundColor="'grey lighten-4'"
                     :backgroundColorHover="'grey lighten-2'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'backgroundColorActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :backgroundColorActive="'light-blue darken-2'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'shadow'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shadow="true"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'shadow & shadowStyle'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shadow="true"
                     :shadowStyle="'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)'"
                     _shadowStyle="'0 3px 1px -2px {backgroundColorAlpha=0.2}, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 {backgroundColorAlpha=0.12}'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'shadowActiveStyle'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shadowActiveStyle="'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)'"
                     _shadowActiveStyle="'0 3px 1px -2px {backgroundColorActiveAlpha=0.2}, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 {backgroundColorActiveAlpha=0.12}'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'no shadowActive'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :shadowActive="false"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'group & borderColor & borderColorHover & borderColorActive'"
                 ></demolink>
 
                 <div style="padding:10px 0px;"><!-- 因使用group故marginStyle會被取消, 此處添加padding只是讓排版一致 -->
-                    <w-group-radio
-                        :items="WGroupRadio.object.items"
-                        v-model="WGroupRadio.object.select"
+                    <w-group-chip-radio
+                        :items="WGroupChipRadio.object.items"
+                        v-model="WGroupChipRadio.object.select"
                         :group="true"
                         :borderColor="'#aaa'"
                         :borderColorHover="'#aaa'"
                         :borderColorActive="'orange lighten-2'"
-                    ></w-group-radio>
+                    ></w-group-chip-radio>
                 </div>
 
             </div>
@@ -407,14 +472,14 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'group & borderColor & borderColorHover & borderColorActive & textColorActive & iconColorActive & backgroundColorActive & no shadowActive'"
                 ></demolink>
 
                 <div style="padding:10px 0px;"><!-- 因使用group故marginStyle會被取消, 此處添加padding只是讓排版一致 -->
-                    <w-group-radio
-                        :items="WGroupRadio.object.items"
-                        v-model="WGroupRadio.object.select"
+                    <w-group-chip-radio
+                        :items="WGroupChipRadio.object.items"
+                        v-model="WGroupChipRadio.object.select"
                         :group="true"
                         :borderColor="'#ccc'"
                         :borderColorHover="'#ccc'"
@@ -423,7 +488,7 @@
                         :iconColorActive="'orange darken-3'"
                         :backgroundColorActive="'orange lighten-5'"
                         :shadowActive="false"
-                    ></w-group-radio>
+                    ></w-group-chip-radio>
                 </div>
 
             </div>
@@ -431,20 +496,20 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'group (only one)'"
                 ></demolink>
 
                 <div style="padding:10px 0px;"><!-- 因使用group故marginStyle會被取消, 此處添加padding只是讓排版一致 -->
-                    <w-group-radio
-                        :items="WGroupRadio.objectOne.items"
-                        v-model="WGroupRadio.objectOne.select"
+                    <w-group-chip-radio
+                        :items="WGroupChipRadio.objectOne.items"
+                        v-model="WGroupChipRadio.objectOne.select"
                         :group="true"
                         :borderColor="'#aaa'"
                         :borderColorHover="'#aaa'"
                         :borderColorActive="'orange lighten-2'"
                         :shadowActive="false"
-                    ></w-group-radio>
+                    ></w-group-chip-radio>
                 </div>
 
             </div>
@@ -452,15 +517,15 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'group & groupBorderRadiusStyle & groupShift & borderRadius & borderColor & borderColorHover & borderColorActive & marginStyle'"
                 ></demolink>
 
                 <div style="margin:20px 0px">
                     <div style="padding-left:20px; margin-bottom:-1px;"><!-- 因上下皆有border, 故需負margin-bottom來吃掉重複border -->
-                        <w-group-radio
-                            :items="WGroupRadio.object.items"
-                            v-model="WGroupRadio.object.select"
+                        <w-group-chip-radio
+                            :items="WGroupChipRadio.object.items"
+                            v-model="WGroupChipRadio.object.select"
                             :group="true"
                             :groupBorderRadiusStyle="{top:true}"
                             :groupShift="7"
@@ -469,7 +534,7 @@
                             :borderColorHover="'#aaa'"
                             :borderColorActive="'orange lighten-2'"
                             :marginStyle="{}"
-                        ></w-group-radio>
+                        ></w-group-chip-radio>
                     </div>
                     <div style="border:1px solid #aaa; padding:15px; font-size:0.85rem;">
                         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
@@ -480,10 +545,10 @@
                     <div style="border:1px solid #aaa; padding:15px; font-size:0.85rem;">
                         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                     </div>
-                    <div style="padding-left:20px; margin-top:-0.5px;"><!-- 因上下皆有border, 故需負margin-top來吃掉重複border, 0.5因渲染問題為手動調整結果 -->
-                        <w-group-radio
-                            :items="WGroupRadio.object.items"
-                            v-model="WGroupRadio.object.select"
+                    <div style="padding-left:20px; margin-top:-1px;"><!-- 因上下皆有border, 故需負margin-top來吃掉重複border -->
+                        <w-group-chip-radio
+                            :items="WGroupChipRadio.object.items"
+                            v-model="WGroupChipRadio.object.select"
                             :group="true"
                             :groupBorderRadiusStyle="{bottom:true}"
                             :groupShift="7"
@@ -492,7 +557,7 @@
                             :borderColorHover="'#aaa'"
                             :borderColorActive="'orange lighten-2'"
                             :marginStyle="{}"
-                        ></w-group-radio>
+                        ></w-group-chip-radio>
                     </div>
                 </div>
 
@@ -501,13 +566,13 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'slot & shadow'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.string.items"
-                    v-model="WGroupRadio.string.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.string.items"
+                    v-model="WGroupChipRadio.string.select"
                     :shadow="true"
                     :backgroundColorActive="'grey'"
                 >
@@ -524,52 +589,52 @@
 
                         </div>
                     </template>
-                </w-group-radio>
+                </w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'loading'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :loading="true"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'loading & loadingColor'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :loading="true"
                     :loadingColor="'orange darken-4'"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'paddingStyle & borderRadius & textColor & iconColor & backgroundColor & backgroundColorHover & backgroundColorActive & shadowActive'"
                 ></demolink>
 
                 <div style="padding:0px 10px; background:linear-gradient(60deg,#ab47bc,#7b1fa2); box-shadow:0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);">
-                    <w-group-radio
-                        :items="WGroupRadio.object.items"
-                        v-model="WGroupRadio.object.select"
+                    <w-group-chip-radio
+                        :items="WGroupChipRadio.object.items"
+                        v-model="WGroupChipRadio.object.select"
                         :paddingStyle="{v:12,h:27}"
                         :borderRadius="5"
                         :textColor="'white'"
@@ -582,7 +647,7 @@
                         :backgroundColorHover="'rgba(255,255,255,0)'"
                         :backgroundColorActive="'rgba(255,255,255,0.15)'"
                         :shadowActive="false"
-                    ></w-group-radio>
+                    ></w-group-chip-radio>
                 </div>
 
             </div>
@@ -590,15 +655,15 @@
 
             <div class="bk">
                 <demolink
-                    :kbname="'w-group-radio'"
+                    :kbname="'w-group-chip-radio'"
                     :casename="'not editable'"
                 ></demolink>
 
-                <w-group-radio
-                    :items="WGroupRadio.object.items"
-                    v-model="WGroupRadio.object.select"
+                <w-group-chip-radio
+                    :items="WGroupChipRadio.object.items"
+                    v-model="WGroupChipRadio.object.select"
                     :editable="false"
-                ></w-group-radio>
+                ></w-group-chip-radio>
 
             </div>
 
@@ -610,22 +675,21 @@
 </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 WGroupRadio from './components/WGroupRadio.vue'
+import WGroupChipRadio from './components/WGroupChipRadio.vue'
 
 
 export default {
     components: {
         demolink,
-        WGroupRadio,
+        WGroupChipRadio,
     },
     props: {
     },
     data: function() {
         return {
-            mdiAccountSupervisorCircle,
-            'WGroupRadio': {
+            'WGroupChipRadio': {
                 'string': {
                     'items': [
                         'Dashboard',
@@ -707,7 +771,7 @@ export default {
                     ],
                     'select': {
                         text: 'Dashboard',
-                        icon: mdiAccountSupervisorCircle,
+                        icon: mdiViewDashboard,
                         tooltip: 'tooltip for Dashboard',
                     }
                 },