@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UTabBtnStd.vue

@@ -1,7 +1,22 @@
 <script setup>
 import UBadgeStd from './UBadgeStd.vue'
 
+const emit = defineEmits(['onTabClick'])
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
 const props = defineProps({
+  buttonTabsOptions: {
+    type: Array,
+    default: () => [],
+  },
+  dataTestId: {
+    type: String,
+    default: 'tab-btn-std',
+  },
   size: {
     type: String,
     default: 'md',
@@ -10,66 +25,65 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  selectedTab: {
-    type: [String, Number],
-    default: null,
-  },
-  buttonTabsOptions: {
-    type: Array,
-    default: () => [],
-  },
 })
+
+const handleTabClick = (value) => {
+  emit('onTabClick', value)
+}
 </script>
 
 <template>
   <q-tabs
+    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
+    class="u-tabs-outer"
+    :dataTestId="dataTestId"
     dense
     indicator-color="transparent"
     inline-label
     :model-value="selectedTab"
     no-caps
-    class="u-tabs-outer"
-    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
   >
     <template v-for="(tabOption, key) in buttonTabsOptions" :key="tabOption.id">
       <q-tab
+        v-if="tabOption.icon"
         :class="`u-tab-button text-caption-${size} u-tab-${size} ${
           key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
         }`"
-        :ripple="false"
-        :name="tabOption.id"
-        v-if="tabOption.icon"
         :aria-label="tabOption.label"
         :disable="tabOption.disable"
+        :name="tabOption.id"
+        :ripple="false"
+        @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tabOption.label"
-            :alt="tabOption.label"
             v-if="tabOption.icon"
             :class="tabOption.icon"
+            :alt="tabOption.label"
+            :aria-label="tabOption.label"
           />
           <p class="u-tab-label truncated-label left-icon-label">
             {{ tabOption.label ? tabOption.label : '' }}
           </p>
           <UBadgeStd
             v-if="tabOption.badgeLabel"
-            :label="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
             color="primary"
+            :label="tabOption.badgeLabel"
             :size="size === 'md' ? 'md' : ''"
-            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
           />
         </template>
       </q-tab>
       <q-tab
+        v-else
         :class="`u-tab-button text-caption-${size} u-tab-${size} ${
           key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
         }`"
-        :ripple="false"
-        :name="tabOption.id"
-        v-else
         :aria-label="tabOption.label"
         :disable="tabOption.disable"
+        :name="tabOption.id"
+        :ripple="false"
+        @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
           <p class="u-tab-label truncated-label">
@@ -77,10 +91,10 @@ const props = defineProps({
           </p>
           <UBadgeStd
             v-if="tabOption.badgeLabel"
-            :label="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
             color="primary"
+            :label="tabOption.badgeLabel"
             :size="size === 'md' ? 'md' : ''"
-            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
           />
         </template>
       </q-tab>