Added sizes to TwButtonGroup.vue

Author: richardhulbert

src/App.vue

@@ -53,6 +53,7 @@ const blurRollout = ref(true)
 const rangeValue = ref(0)
 const rangeStep = ref(1)
 const rangeShowLabels = ref(true)
+const buttonGroupSize = ref('sm')
 
 let numOfPages = computed(() => {
   return Math.ceil(records.value.length / pageSize.value)
@@ -106,6 +107,14 @@ const notificationPositions = [
   {label: 'Bottom Right', value: 'bottom-right'},
 ]
 
+const buttonGroupSizes = [
+  {label: 'Large', value: 'lg'},
+  {label: 'Medium', value: 'md'},
+  {label: 'Small', value: 'sm'},
+  {label: 'Extra Small', value: 'xs'},
+
+]
+
 
 const headings = [
   {
@@ -207,6 +216,7 @@ function handleChangeTheme() {
 
     </section>
     <section class=" p-4">
+      <h1 class="my-2 text-2xl">Tables</h1>
       <tw-collapse label="Table Operations" :color="accentColor">
         <template #label>
           <h3>
@@ -365,8 +375,12 @@ function handleChangeTheme() {
             Toggle button
           </tw-button>
         </div>
-        <div>
-          <tw-button-group :color="accentColor" :items="colors" v-model="accentColor"></tw-button-group>
+        <div class="block">
+          <div class="mb-4">
+            <tw-button-group :color="accentColor" :items="colors" v-model="accentColor" :size="buttonGroupSize"></tw-button-group>
+          </div>
+
+          <tw-button-group :color="accentColor" :items="buttonGroupSizes" v-model="buttonGroupSize" :size="buttonGroupSize" ></tw-button-group>
         </div>
 
       </div>

src/components/buttonGroup/README.md

@@ -7,9 +7,10 @@ This is a simple button group. the v-model equals the selected value in the item
 ```
 ## Properties
 
-| Property    |  Type   | Required |  default  | notes                                                                          |
-|:------------|:-------:|:--------:|:---------:|:-------------------------------------------------------------------------------|
-| v-model     | Boolean |   yes    |   false   | The value of the selected item                                                 |
-| color       | String  |    no    | 'primary' | The color scheme of the button group                                           |
-| items       |  Array  |   yes    |    []     | An array of name value objects `[{label:"A Label",value:"a343",icon:"circle"}]` |
+| Property |  Type   | Required |  default  | notes                                                                           |
+|:---------|:-------:|:--------:|:---------:|:--------------------------------------------------------------------------------|
+| v-model  | Boolean |   yes    |   false   | The value of the selected item                                                  |
+| color    | String  |    no    | 'primary' | The color scheme of the button group                                            |
+| items    |  Array  |   yes    |    []     | An array of name value objects `[{label:"A Label",value:"a343",icon:"circle"}]` |
+| size     | string  |    no    |   'md'    | A sting either "xs", "sm","md" or "lg"                                          |
 

src/components/buttonGroup/TwButtonGroup.vue

@@ -20,6 +20,11 @@ const props = defineProps({
   color:{
     type: String,
     default:'primary'
+  },
+  size:{
+    type:String,
+    default:'md',
+    accept:['sm','md','lg','xs']
   }
 })
 
@@ -34,7 +39,7 @@ function handleClick(i){
 <template>
 <div class="inline-flex -space-x-0 divide-x  overflow-hidden rounded-lg border text-sm " :class="baseClass">
 
-  <tw-button-group-item :color="props.color"  v-for="(item, index) in items" :key="index" @click="handleClick(item.value)" :item="item" :value="item.value" :selected-value="props.modelValue"></tw-button-group-item>
+  <tw-button-group-item :color="props.color"  v-for="(item, index) in items" :key="index" @click="handleClick(item.value)" :item="item" :size="size" :value="item.value" :selected-value="props.modelValue"></tw-button-group-item>
 
 </div>
 </template>

src/components/buttonGroup/TwButtonGroupItem.vue

@@ -9,30 +9,42 @@ const props=defineProps(
         default:{
           label:'Not set',
           value:0,
-          icon:'gauge'
+          icon:'gauge',
         }
       },
 
       value:{},
       selectedValue:{},
       color:{type:String, default:'primary'},
+      size:{type:String, default:'md', accept:['sm','md','lg','xs']}
     }
 )
 
 const hasIcon = computed(()=>{
   return props.item.hasOwnProperty('icon')
 })
 
-const selectedClass = computed(() => {
- return props.selectedValue === props.value? `bg-${props.color}-200   dark:bg-${props.color}-700 `:`hover:bg-${props.color}-100 dark:hover:bg-${props.color}-500`;
+const dynamicClass = computed(() => {
+  let _cls = ''
+  switch (props.size) {
+    case 'xs': _cls = ' text-[11px] py-[4px] px-3 '
+          break;
+    case 'sm': _cls = ' text-xs py-1 px-3 '
+          break;
+    case 'lg': _cls = ' text-lg py-3 px-8 '
+          break;
+    default: _cls = ' py-2 px-4 '
+  }
+  _cls+= props.selectedValue === props.value? `bg-${props.color}-200   dark:bg-${props.color}-700 `:`hover:bg-${props.color}-100 dark:hover:bg-${props.color}-500`;
+ return _cls
 })
 
 </script>
 
 <template>
 
 
-    <div class="px-4 py-2  cursor-pointer" :class="selectedClass">
+    <div class="px-4 py-2  cursor-pointer" :class="dynamicClass">
       <tw-icon class="mr-1" v-if="hasIcon" :icon="props.item.icon"></tw-icon>
       {{ props.item.label }}