@usssa/component-library 1.0.0-alpha.245 → 1.0.0-alpha.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.245",
+  "version": "1.0.0-alpha.246",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UExpansionStd.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 import URadioStd from './URadioStd.vue'
 import UTooltip from './UTooltip.vue'
 
@@ -37,6 +38,19 @@ const props = defineProps({
     type: String,
     default: 'Expand',
   },
+  expansionButtonProps: {
+    type: Object,
+    default: () => ({
+      flat: true,
+      outline: false,
+      color: 'primary',
+      label: '',
+      size: '',
+      rightIcon: 'fa-kit fa-caret-down',
+      leftIcon: '',
+      disable: false,
+    }),
+  },
   expansionIcon: {
     type: String,
     default: 'fa-kit fa-caret-down',
@@ -61,6 +75,10 @@ const props = defineProps({
     type: Number,
     default: 20.563,
   },
+  useExpansionButton: {
+    type: Boolean,
+    default: false,
+  },
   toggleIconLeft: {
     type: Boolean,
     default: false,
@@ -175,25 +193,39 @@ watch(
             :description="label"
             :offset="[14, 14]"
           />
-          <span class="text-body-xs">{{ caption }}</span>
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
         </div>
-        <q-icon
-          v-if="!toggleIconLeft"
-          :class="[
-            'cursor-pointer',
-            'icon-secondary-opacity',
-            'transition-all',
-            expansionIcon,
-            isExpanded ? toggleIconRotationClass : '',
-          ]"
-          :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
-          :color="expansionIconColor"
-          :size="expansionIconSize"
-          :tabindex="disabled ? -1 : 0"
-          @click.stop="toggleExpansion"
-          @keydown.stop="onIconKeydown"
-        >
-        </q-icon>
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-if="useExpansionButton"
+            v-bind="expansionButtonProps"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+            :class="[
+              'cursor-pointer',
+              'icon-secondary-opacity',
+              'transition-all',
+              expansionIcon,
+              isExpanded ? toggleIconRotationClass : '',
+            ]"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :color="expansionIconColor"
+            :size="expansionIconSize"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+        </template>
       </div>
     </template>
     <slot name="body" />
@@ -258,11 +290,25 @@ watch(
             :description="label"
             :offset="[14, 14]"
           />
-          <span class="text-body-xs text-description">{{ caption }}</span>
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
         </div>
-        <q-icon
-          v-if="!toggleIconLeft"
-          :class="[
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-if="useExpansionButton"
+            v-bind="expansionButtonProps"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+             :class="[
             'cursor-pointer',
             'icon-secondary-opacity',
             'transition-all',
@@ -271,8 +317,8 @@ watch(
           ]"
           :color="expansionIconColor"
           :size="expansionIconSize"
-        >
-        </q-icon>
+          />
+        </template>
       </div>
     </template>
     <slot name="body" />

package/src/components/core/UTableStd.vue

@@ -1697,4 +1697,6 @@ watch(
 .table-text-colormap-positive
   color: $green-6 !important
 
+.table-text-colormap-accent
+  color: $red-5 !important
 </style>