@usssa/component-library 1.0.0-alpha.47 → 1.0.0-alpha.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.47",
+  "version": "1.0.0-alpha.49",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/assets/logo.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="24" viewBox="0 0 95 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Lettering">
+<path d="M3.80408 2.66675H8.95923L4.80595 13.2946L11.6168 13.2333L15.8059 2.66675H20.8L16.7704 12.978C15.8482 15.3379 13.5896 16.889 11.0754 16.889H3.24023L3.23972 16.8853C0.95221 16.7796 -0.597379 14.4417 0.221722 12.2504L3.80408 2.66675Z" fill="#234BA9"/>
+<path d="M25.3431 2.66675C24.1871 2.66675 23.1592 3.40891 22.7861 4.5129L22.2017 6.24262L21.3962 8.1931L20.9479 9.20419C20.5153 10.1799 21.2229 11.2814 22.2822 11.2814H30.0955L29.3215 13.3117H19.4306L17.9807 16.8876H30.4658C31.6432 16.8876 32.7118 16.1933 33.199 15.1119L34.01 13.3117H33.9934L34.7674 11.2814H34.7746L35.0296 10.6669C35.5176 9.49105 34.6615 8.1931 33.398 8.1931H26.3902L27.1957 6.24262H36.3783L37.8282 2.66675H25.3431Z" fill="#234BA9"/>
+<path d="M65.9075 2.66675C64.7515 2.66675 63.7235 3.40891 63.3505 4.5129L62.7661 6.24262L61.9606 8.1931L61.5123 9.20419C61.0797 10.1799 61.7873 11.2814 62.8466 11.2814H70.6599L69.8859 13.3117H59.995L58.5451 16.8876H71.0302C72.2076 16.8876 73.2762 16.1933 73.7634 15.1119L74.5744 13.3117H74.5578L75.3318 11.2814H75.339L75.594 10.6669C76.0819 9.49105 75.2259 8.1931 73.9624 8.1931H66.9546L67.7601 6.24262H76.9427L78.3926 2.66675H65.9075Z" fill="#234BA9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.0723 2.66675H80.9702L79.6009 6.24262H89.5386L88.7205 8.27437H81.103C79.3981 8.27437 77.8944 9.40113 77.4017 11.0479L76.8451 12.908C76.2519 14.8906 77.7229 16.8889 79.7755 16.8888L90.3945 16.8883L93.6818 8.51818H93.697L94.5025 6.24262C95.162 4.52034 93.9023 2.66675 92.0723 2.66675ZM81.373 13.3131L82.259 11.2001H87.6558L86.7698 13.3131H81.373Z" fill="#234BA9"/>
+</g>
+<path id="top" d="M47.7783 0.00113767H62.8782C61.1471 3.8405 58.0313 4.88033 55.3948 4.88033H49.6691V1.41424L47.2456 4.88033H43.464L45.8076 6.95998L43.464 10.3994L47.3255 8.34642L49.6957 10.4794L49.6691 6.95998H54.5426C58.271 6.93332 58.8036 10.4794 58.1378 11.8125H42.7184C41.3069 11.8125 37.1258 10.7724 39.0166 5.76018C40.7743 1.78735 44.982 -0.0524702 47.7783 0.00113767Z" fill="#234BA9"/>
+<g id="bottom">
+<path d="M32.3588 20.1976C32.705 18.5712 34.7556 15.5317 38.484 15.2917H46.1804C46.3668 15.2917 46.8835 15.2704 47.2456 14.5452L47.7516 13.1987H57.6318C57.2324 14.2741 55.7943 16.5448 52.6518 16.7315H46.5532C46.5 16.7315 45.6899 16.8463 45.3282 17.6913C44.9287 18.6245 44.2097 18.7845 43.8368 18.8111H35.9007C35.2616 18.8378 33.7702 19.0511 32.3588 20.1976Z" fill="#CB2A3D"/>
+<path d="M56.1937 16.7181C55.7943 18.3445 53.8875 21.4054 50.0952 21.5973H44.1032C43.5439 21.6507 42.9484 21.7679 42.6118 22.6105C42.2603 23.4904 41.4933 23.7037 40.9873 23.7037H30.8674C31.258 22.6372 32.7902 20.4455 35.7942 20.2109H43.5173C43.7658 20.202 44.2363 20.1842 44.6092 19.3044C44.982 18.4245 45.2217 18.1312 46.0639 18.1046H52.6252C53.1844 18.1135 54.8089 17.838 56.1937 16.7181Z" fill="#CB2A3D"/>
+</g>
+<g id="shadow">
+<path d="M49.7491 13.1987L48.3643 16.7315H46.7132C46.367 16.7493 45.6394 16.9261 45.2985 17.758L46.2871 15.2864C46.4735 15.2784 46.8996 15.1611 47.2192 14.5852L47.7518 13.1987H49.7491Z" fill="#951F23"/>
+<path d="M42.6119 22.6114L42.6274 22.5736C42.959 21.7945 43.8175 21.5982 44.2631 21.5982H45.6745L47.0594 18.1055H46.0474C45.1419 18.0788 44.8377 18.6727 44.5747 19.3844C44.4761 19.651 44.1299 20.1538 43.5973 20.2072L42.6274 22.5736C42.6221 22.586 42.617 22.5986 42.6119 22.6114Z" fill="#951F23"/>
+</g>
+</g>
+</svg>

package/src/components/core/UDrawer.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { useRouter } from 'vue-router'
-import UMenuItem from './UMenuItem.vue'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import UBadgeStd from './UBadgeStd.vue'
 import UBtnIcon from './UBtnIcon.vue'
+import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
-import UBadgeStd from './UBadgeStd.vue'
 const props = defineProps({
   menu: {
     default: () => [],
@@ -191,6 +191,10 @@ const getXOffset = (label) => {
 .drawer-menu-list
   padding: 0px $xs
 
+  .u-menu-link
+    .q-item
+      margin-bottom: 0
+
 .drawer-menu-mini-list
   display: grid
   place-content: center

package/src/components/core/UInputPhoneStd.vue

@@ -70,7 +70,6 @@ const props = defineProps({
 })
 
 const modelValue = defineModel()
-
 const emit = defineEmits(['update-country'])
 
 const selectCountry = (country) => {
@@ -82,64 +81,65 @@ const toLowerCase = (str) => str.toLowerCase()
 
 <template>
   <UInputTextStd
+    v-model="modelValue"
+    :borderless="borderless"
     class="phone-input"
+    :disable="disable"
+    :error="error"
+    :error-message="errorMessage"
+    :hintText="hintText"
+    :hintIcon="hintIcon"
     :label="label"
     :isRequired="isRequired"
-    v-model="modelValue"
-    :mask="mask"
-    :validationRules="validationRules"
     leftIcon="true"
-    :rightIcon="rightIcon"
-    :hintText="hintText"
-    :hintIcon="hintIcon"
-    :toolTipText="toolTipText"
+    :mask="mask"
+    :outlined="outlined"
     :placeholder="placeholder"
-    :size="size"
-    :disable="disable"
     :readonly="readonly"
-    :error="error"
-    :error-message="errorMessage"
-    :borderless="borderless"
-    :outlined="outlined"
+    :rightIcon="rightIcon"
+    :size="size"
+    :toolTipText="toolTipText"
+    :validationRules="validationRules"
   >
     <template v-slot:prepend>
       <q-btn-dropdown
+        v-bind="$attrs"
         :disable="readonly"
-        rounded
-        flat
-        class="u-phone-dropdown text-body-sm"
         :class="`btn-field-${size}`"
+        class="u-phone-dropdown text-body-sm"
         content-class="u-dropdown-list"
+        flat
         menu-anchor="top right"
         menu-self="bottom middle"
         :menu-offset="[30, 5]"
+        rounded
       >
         <template #label>
           <q-icon
-            left
             :aria-label="selectedCountry.name"
             :class="`fi fi-${toLowerCase(
               selectedCountry.flag
             )} flag-icon q-mr-xs`"
+            left
           />
-          <label class="selected-code"> {{ selectedCountry.code }}</label>
+          <label class="selected-code">{{ selectedCountry.code }}</label>
         </template>
 
         <q-list class="u-list">
           <q-item
             v-for="country in options"
-            :key="country.code"
+            class="q-my-xxs"
             clickable
+            :key="country.code"
             v-close-popup
             v-ripple
             @click="selectCountry(country)"
-            class="q-my-xxs"
           >
             <q-item-section class="flag-section">
               <q-icon
                 :aria-label="country.name"
-                left
                 :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
+                left
                 size="1.25rem"
               />
             </q-item-section>

package/src/components/core/UMenuDropdown.vue

@@ -24,12 +24,6 @@ const props = defineProps({
     type: Boolean,
   },
 })
-
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
 </script>
 
 <template>
@@ -39,9 +33,11 @@ const handleClick = () => {
         :label="item.label"
         :leftIcon="item.leftIcon"
         :rightIcon="item.rightIcon"
-        @onClick="handleClick"
         :destructive="destructive"
         :iconClass="iconClass"
+        :hide="item.hide"
+        :disable="item.disable"
+        @onClick="item.handler"
       >
         <template #leading_slot>
           <slot name="leading_slot"></slot>

package/src/components/core/UMenuItem.vue

@@ -22,6 +22,14 @@ const props = defineProps({
   iconClass: {
     type: String,
   },
+  hide: {
+    default: false,
+    type: Boolean,
+  },
+  disable: {
+    default: false,
+    type: Boolean,
+  },
 })
 
 const type = ref(props.destructive ? 'destructive' : 'default')
@@ -66,12 +74,15 @@ const backgroundColor = computed(() => {
 </script>
 
 <template>
+  <div v-if="!hide" class="u-menu-link">
     <q-item
+      :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
       clickable
       role="button"
-      :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
-      @click="handleClick"
+      tabindex="0"
       :aria-label="label"
+      :disable="disable"
+      @click="handleClick"
     >
       <q-item-section side v-if="leftIcon">
         <q-icon
@@ -99,6 +110,7 @@ const backgroundColor = computed(() => {
 
       <slot name="trailing_slot"></slot>
     </q-item>
+  </div>
 </template>
 
 <style lang="sass">

package/src/components/core/UMenuSearch.vue

@@ -234,7 +234,7 @@ const onInvitePerson = (item) => {
         <div v-if="searchText.length && !searchResults.length && !exceedLimit">
           <div class="items-center column q-py-ba">
             <img
-              src="/images/no-result.png"
+              src="../../assets/no-result.png"
               alt="No result found"
               aria-label="No result found"
             />
@@ -263,7 +263,7 @@ const onInvitePerson = (item) => {
             <img
               alt="No result found"
               aria-label="No result found"
-              src="/images/no-result.png"
+              src="../../assets/no-result.png"
             />
             <span class="text-caption-lg">Results exceeds limit.</span>
             <span class="text-body-sm text-neutral-9 q-mt-xxs text-center">

package/src/components/core/UTabBtnStd.vue

@@ -10,15 +10,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  selectedTab: {
-    type: [String, Number],
-    default: null,
-  },
   buttonTabsOptions: {
     type: Array,
     default: () => [],
   },
 })
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
+const emit = defineEmits(['onTabClick'])
+
+const handleTabClick = (value) => {
+  emit('onTabClick', value)
+}
 </script>
 
 <template>
@@ -33,21 +40,22 @@ const props = defineProps({
   >
     <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"
+        :disable="tabOption.disable"
         :name="tabOption.id"
-        v-if="tabOption.icon"
         :aria-label="tabOption.label"
-        :disable="tabOption.disable"
+        @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tabOption.label"
-            :alt="tabOption.label"
             v-if="tabOption.icon"
             :class="tabOption.icon"
+            :aria-label="tabOption.label"
+            :alt="tabOption.label"
           />
           <p class="u-tab-label truncated-label left-icon-label">
             {{ tabOption.label ? tabOption.label : '' }}
@@ -62,14 +70,15 @@ const props = defineProps({
         </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"
+        @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
           <p class="u-tab-label truncated-label">

package/src/components/core/UTableStd.vue

@@ -11,7 +11,6 @@ import UTable from './UTable/UTable.vue'
 import UTd from './UTable/UTd.vue'
 import UTh from './UTable/UTh.vue'
 import UTr from './UTable/UTr.vue'
-import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   title: {
@@ -290,7 +289,6 @@ const handleMouseLeave = (type, index) => {
   } else {
     hoveringMenu.value[index] = false
   }
-
   setTimeout(() => {
     if (!hoveringButton.value[index] && !hoveringMenu.value[index]) {
       openMenu.value[index] = false
@@ -332,47 +330,42 @@ const handleMouseLeave = (type, index) => {
             :indeterminate="true"
           />
         </UTh>
-        <UTh
-          v-for="(col, key) in props.cols"
-          :class="`${col.sortable ? 'cursor-pointer' : ''} ${
-            col.headerClasses
-          }`"
-          :key="key"
-          :tableHeaderAutoWidth="col.autoWidth"
-          :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
-          @click="
-            col.sortable
-              ? isCustomSort
-                ? handleCustomSort(col.field, col.sortOrder, col.type)
-                : handleSort(col.field, col.sortOrder, col.type)
-              : null
-          "
-          :separator="separator"
-          :style="col.headerStyle"
-        >
-          <span
-            :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
+        <template v-for="(col, key) in props.cols">
+          <UTh
+            v-if="typeof col.show === 'undefined' || col.show"
+            :class="`${col.sortable ? 'cursor-pointer' : ''} ${
+              col.headerClasses
+            }`"
+            :key="key"
+            :tableHeaderAutoWidth="col.autoWidth"
+            :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
+            @click="
+              col.sortable
+                ? isCustomSort
+                  ? handleCustomSort(col.field, col.sortOrder, col.type)
+                  : handleSort(col.field, col.sortOrder, col.type)
+                : null
+            "
+            :separator="separator"
+            :style="col.headerStyle"
           >
-            {{ col.field === 'action' ? 'Action' : col.label }}
-          </span>
-
-          <span v-if="col.sortable && col.field !== 'action'">
-            <q-btn
-              class="u-sorting-btn"
-              :aria-label="`Sort ${col.label}`"
-              label="Sorting Button"
-              :ripple="false"
-              tabindex="0"
+            <span
+              :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
             >
-              <q-icon
-                :class="`${getSortingIcon(col)} sorting-icon`"
-                size="xs"
-                alt="sort-desc"
-                tabindex="-1"
-              ></q-icon>
-            </q-btn>
-          </span>
-        </UTh>
+              {{ col.field === 'action' ? 'Action' : col.label }}
+            </span>
+
+            <span v-if="col.sortable && col.field !== 'action'">
+              <UBtnIcon
+                :class="`more-action-icon cursor-pointer`"
+                :iconClass="`${getSortingIcon(col)}`"
+                ref="btn-icon"
+                :aria-label="`Sort ${col.label}`"
+                size="sm"
+              />
+            </span>
+          </UTh>
+        </template>
       </UTr>
     </template>
     <!-- custom body slots to add customized cell data -->
@@ -399,7 +392,10 @@ const handleMouseLeave = (type, index) => {
         <template v-for="(col, index) in props.cols" :key="index">
           <!-- to show the cell data without the action cell -->
           <UTd
-            v-if="col.field !== 'action'"
+            v-if="
+              col.field !== 'action' &&
+              (typeof col.show === 'undefined' || col.show)
+            "
             :row="props.row"
             :col="col"
             :index="index"
@@ -493,7 +489,7 @@ const handleMouseLeave = (type, index) => {
           <!-- to the action cell, it can have single and multiple  -->
 
           <UTd
-            v-else
+            v-else-if="typeof col.show === 'undefined' || col.show"
             :class="col.classes"
             :index="index"
             :tableDataAlignment="col.align"
@@ -513,6 +509,7 @@ const handleMouseLeave = (type, index) => {
                   :key="key"
                   :label="action.label"
                   :flat="action.flat"
+                  :outline="action.outline"
                   :leftIcon="action.icon"
                   :color="action.color"
                   :disable="
@@ -521,17 +518,7 @@ const handleMouseLeave = (type, index) => {
                   "
                   :size="action.size"
                   @onClick="action.handler(props.row)"
-                >
-                  <template v-slot:tooltip>
-                    <UTooltip
-                      v-if="action.tooltip"
-                      :description="action.tooltip"
-                      :anchor="action.anchor ? action.anchor : 'bottom middle'"
-                      :self="action.self ? action.self : 'bottom middle'"
-                      :offset="action.offset ? action.offset : [14, 40]"
-                    />
-                  </template>
-                </UBtnStd>
+                />
               </template>
             </template>
             <!-- to show the actions list if the actions are multiple -->
@@ -542,21 +529,24 @@ const handleMouseLeave = (type, index) => {
                 iconClass="fa-kit fa-ellipsis-vertical"
                 ref="btn-icon"
                 ariaLabel="More action"
-                tooltip="More actions"
+                @focus="handleMouseEnter('button', props.row.id)"
                 @mouseover="handleMouseEnter('button', props.row.id)"
                 @mouseleave="handleMouseLeave('button', props.row.id)"
+                @blur="handleMouseLeave('button', props.row.id)"
                 @click.stop="handleMenuEventStop"
               >
                 <template #menu>
                   <q-menu
                     v-if="!verticalMoreActions"
                     v-model="openMenu[props.row.id]"
+                    role="list"
                     no-focus
                     no-refocus
-                    role="list"
                     persistent
+                    @focus="handleMouseEnter('button', props.row.id)"
                     @mouseleave="handleMouseLeave('menu', props.row.id)"
                     @mouseover="handleMouseEnter('menu', props.row.id)"
+                    @blur="handleMouseLeave('button', props.row.id)"
                   >
                     <div
                       :class="`${
@@ -583,6 +573,7 @@ const handleMouseLeave = (type, index) => {
                           :tooltip="action.tooltip"
                           @onClick="action.handler(props.row)"
                           @click.stop="handleMenuEventStop"
+                          @focus="handleMouseEnter('button', props.row.id)"
                         />
                       </template>
                     </div>
@@ -591,12 +582,14 @@ const handleMouseLeave = (type, index) => {
                   <q-menu
                     v-else
                     v-model="openMenu[props.row.id]"
+                    role="list"
                     no-focus
                     no-refocus
-                    role="list"
                     persistent
+                    @focus="handleMouseEnter('button', props.row.id)"
                     @mouseleave="handleMouseLeave('menu', props.row.id)"
                     @mouseover="handleMouseEnter('menu', props.row.id)"
+                    @blur="handleMouseLeave('button', props.row.id)"
                   >
                     <UMenuDropdown
                       v-if="verticalMoreActions"
@@ -605,6 +598,15 @@ const handleMouseLeave = (type, index) => {
                           return {
                             label: action.label,
                             leftIcon: action.icon,
+                            hide: !(typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true),
+                            disable:
+                              typeof action.disable === 'function' &&
+                              action.disable(props.row),
+                            handler: function () {
+                              return action.handler(props.row)
+                            },
                           }
                         })
                       "
@@ -717,11 +719,6 @@ const handleMouseLeave = (type, index) => {
     color: $neutral-9 !important
     font-size: $ba !important
 
-.sorting-icon
-  color: $description
-  padding-left: $xs
-  font-size: $ba !important
-
 .selected-data-row
   background: #F7F7F7
 

package/src/components/core/UUploader.vue

@@ -138,7 +138,7 @@ defineExpose({ upload })
       <template v-slot:header="scope">
         <div v-if="scope.canAddFiles" class="q-py-md q-px-xl bg-neutral-2">
           <div class="text-center">
-            <img src="/images/files.png" alt="Upload Files" />
+            <img src="../../assets/files.png" alt="Upload Files" />
             <div class="text-body-md">
               {{ description }}
             </div>

package/src/pages/InputPhone.vue

@@ -79,26 +79,27 @@ defineOptions({
     >
       <template v-slot:component>
         <UInputPhoneStd
-          :label="label"
+          v-model="inputValue"
+          aria-label="Country code selection"
+          :borderless="borderless"
+          :disable="disabled"
+          :error="isError"
+          :error-message="errorMessage"
           :isRequired="isRequired"
+          :label="label"
+          lazy-rules
           :mask="mask"
-          v-model="inputValue"
-          :validationRules="validationRules"
-          :rightIcon="rightIcon"
           :hintText="hintText"
           :hintIcon="hintIcon"
-          :toolTipText="toolTipText"
+          :options="countryOptions"
+          :outlined="outline"
           :placeholder="placeholder"
-          :size="size"
-          :disable="disabled"
+          :rightIcon="rightIcon"
           :readonly="readonly"
-          :error="isError"
-          lazy-rules
-          :error-message="errorMessage"
-          :borderless="borderless"
-          :outlined="outline"
-          :options="countryOptions"
+          :size="size"
           :selected-country="selectedCountry"
+          :toolTipText="toolTipText"
+          :validationRules="validationRules"
           @update-country="selectCountry"
         />
       </template>
@@ -120,11 +121,11 @@ defineOptions({
             <div>
               <q-radio dense v-model="type" val="outline" label="Outline" />
               <q-radio
-                dense
                 v-model="type"
-                val="borderless"
-                label="Borderless"
                 class="q-pa-sm"
+                dense
+                label="Borderless"
+                val="borderless"
               />
             </div>
           </div>

package/src/pages/MenuDropdown.vue

@@ -1,20 +1,25 @@
 <script setup>
-import { ref } from 'vue'
 import { UMenuDropdown } from 'src/components'
+import { ref } from 'vue'
 import ComponentBase from './ComponentBase.vue'
 
 const Data = [
   {
     label: 'Profile',
     leftIcon: 'fa-kit-duotone fa-user',
+    hide: false,
   },
   {
     label: 'Settings',
     leftIcon: 'fa-kit-duotone fa-admin',
+    disable: true,
   },
   {
     label: 'Logout',
     leftIcon: 'fa-kit-duotone fa-logout',
+    handler: function () {
+      console.log('demoooo')
+    },
   },
 ]
 

package/src/pages/TabButtonPage.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { UTabBtnStd } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
 import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
 
 defineOptions({
   name: 'TabButtonPage',
@@ -11,6 +11,8 @@ const htmlContent = `<UTabBtnStd
   :buttonTabsOptions="buttonTabsOptions"
   v-model="selectedTab"
   :size="size"
+  :standard="standard"
+  @on-tab-click="handleTabChange"
 />`
 
 const selectedTab = ref('1')
@@ -37,6 +39,14 @@ const buttonTabsOptions = ref([
 const updateItem = (index, key, value) => {
   buttonTabsOptions.value[index][key] = value
 }
+
+const handleTabChange = (value) => {
+  if (selectedTab.value === value) {
+    selectedTab.value = null
+  } else {
+    selectedTab.value = value
+  }
+}
 </script>
 
 <template>
@@ -48,9 +58,10 @@ const updateItem = (index, key, value) => {
       <template v-slot:component>
         <UTabBtnStd
           :buttonTabsOptions="buttonTabsOptions"
-          v-model="selectedTab"
+          v-model:selectedTab="selectedTab"
           :size="size"
           :standard="standard"
+          @on-tab-click="handleTabChange"
         />
         <q-tab-panels
           class="bg-transparent"

package/src/pages/TablePage.vue

@@ -47,6 +47,7 @@ const htmlContent = `<UTableStd
   headerStyle: 'width:50%', // custom header style
   headerClasses: 'my-header-class', // custom header classes
   showChipTooltip:true/false // to hide show tooltip on chip
+  show: to show/hide columns
 }
 `
 
@@ -107,6 +108,14 @@ const columns = ref([
     align: 'center',
     autoWidth: true,
   },
+  // {
+  //   label: '',
+  //   field: 'test',
+  //   type: 'text',
+  //   align: 'center',
+  //   autoWidth: true,
+  //   show: false,
+  // },
   {
     label: 'Active',
     field: 'active',
@@ -146,6 +155,7 @@ const columns = ref([
       // {
       //   label: 'View Team',
       //   flat: true,
+      //   outline: false,
       //   icon: 'fa-kit-duotone fa-eye',
       //   handler: () => {
       //     console.log('clicked', row)
@@ -166,9 +176,6 @@ const columns = ref([
         anchor: 'bottom middle',
         self: 'bottom middle',
         hide: () => {
-          return false
-        },
-        disable: () => {
           return true
         },
       },
@@ -189,15 +196,21 @@ const columns = ref([
         tooltip: 'Down',
         anchor: 'bottom middle',
         self: 'bottom middle',
+        disable: () => {
+          return true
+        },
       },
       {
         icon: 'fa-kit-duotone fa-circle-arrow-up',
-        label: 'Open', //for aria label
+        label: 'Open 2', //for aria label
         handler: (row) => handleOpen(row),
         size: 'sm',
         tooltip: 'UP',
         anchor: 'bottom middle',
         self: 'bottom middle',
+        hide: (row) => {
+          return row.test
+        },
       },
     ],
   },
@@ -234,6 +247,7 @@ const rowsData = computed(() => {
       active: index % 2 ? 'Active' : isPrime(index) ? 'Reghold' : 'Inactive',
       iron: index % 2 ? `fa-kit-duotone fa-circle-bolt` : null,
       // iconColor: 'primary',
+      test: index % 2 ? true : false,
       image: {
         type: 'initials',
         value: 'AC',