@usssa/component-library 1.0.0-alpha.13 → 1.0.0-alpha.15

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.13
+# Component Library v1.0.0-alpha.15
 
 This library provides custom UI components for USSSA applications.
 

package/package.json

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

package/src/components/core/UBannerStd.vue

@@ -22,11 +22,9 @@ const props = defineProps({
   },
   primaryActionLabel: {
     type: String,
-    default: 'Action 1',
   },
   secondaryActionLabel: {
     type: String,
-    default: 'Action 2',
   },
 })
 

package/src/components/core/UBtnIcon.vue

@@ -40,6 +40,10 @@ const props = defineProps({
     type: String,
     default: 'center end',
   },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
 })
 
 const emit = defineEmits(['onClick'])
@@ -97,7 +101,7 @@ const btnClass = computed(() => {
       :description="tooltip"
       :anchor="anchor"
       :self="self"
-      :offset="[4, 4]"
+      :offset="offset"
     />
   </q-btn>
 </template>
@@ -140,6 +144,9 @@ const btnClass = computed(() => {
     &.neutral-9
       color: $neutral-9
 
+  &.accent
+    background: $accent-bg-hover
+
 .icon-tooltip
   background: $dark
   border-radius: $xxs

package/src/components/core/UBtnStd.vue

@@ -72,26 +72,30 @@ const isFullWidth = computed(() => {
     :flat="flat"
     @click="handleClick"
   >
-    <div class="row items-center no-wrap">
-      <q-icon
-        v-if="leftIcon"
-        left
-        :class="leftIcon"
-        class="q-mr-xs"
-        size="1.25rem"
-      />
+    <template #default>
+      <slot name="default">
+        <div class="row items-center no-wrap">
+          <q-icon
+            v-if="leftIcon"
+            left
+            :class="leftIcon"
+            class="q-mr-xs"
+            size="1.25rem"
+          />
 
-      <div class="text-center text-caption-md button-label">
-        {{ label }}
-      </div>
-      <q-icon
-        v-if="rightIcon"
-        right
-        :class="rightIcon"
-        class="q-ml-xs"
-        size="1.25rem"
-      />
-    </div>
+          <div class="text-center text-caption-md button-label">
+            {{ label }}
+          </div>
+          <q-icon
+            v-if="rightIcon"
+            right
+            :class="rightIcon"
+            class="q-ml-xs"
+            size="1.25rem"
+          />
+        </div>
+      </slot>
+    </template>
   </q-btn>
 </template>
 

package/src/components/core/UInputTextStd.vue

@@ -7,7 +7,6 @@ const props = defineProps({
   },
   hintIcon: {
     type: String,
-    default: 'fa-kit-duotone fa-circle-info',
   },
   isRequired: {
     type: Boolean,
@@ -32,7 +31,9 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: 'Input Text',
+  },
+  rightIconAriaLabel: {
+    type: String,
   },
   size: {
     type: String,
@@ -147,14 +148,21 @@ const handleRightIconClick = () => {
             <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
           </div>
         </template>
-        <template #append v-if="rightIcon">
-          <q-icon
-            @click="handleRightIconClick"
-            :class="`slot-icon-size-${size} ${rightIcon}`"
-            :tabindex="0"
-          />
+        <template #append>
+          <slot name="append">
+            <q-icon
+              v-if="rightIcon"
+              @click="handleRightIconClick"
+              :class="`slot-icon-size-${size} ${rightIcon}`"
+              :tabindex="0"
+              :aria-label="
+                rightIcon && rightIconAriaLabel
+                  ? rightIconAriaLabel
+                  : 'right input icon '
+              "
+            />
+          </slot>
         </template>
-
         <template v-slot:error>
           <div class="row items-center no-wrap" v-if="errorMessage">
             <q-icon

package/src/components/core/UMultiSelectStd.vue

@@ -113,7 +113,6 @@ const chipModelVal = ref(true)
       :option-label="optionLabel"
       :option-value="optionValue"
       :placeholder="placeholder"
-      dropdown-icon="img:icons/caret-down.svg"
       bottom-slots
       outlined
       hide-bottom-space

package/src/components/core/USelectStd.vue

@@ -108,7 +108,6 @@ const model = computed({
       :class="`field-${size}`"
       id="select"
       :color="color"
-      dropdown-icon="img:/icons/caret-down.svg"
       emit-value
       map-options
       :menu-offset="[0, 5]"

package/src/components/core/UTableStd.vue

@@ -383,24 +383,32 @@ const onRowPerPageChange = (value) => {
             <template v-else-if="col.avatarKey">
               <div class="flex justify-start items-center">
                 <div
-                  :class="`${
-                    !multiSelection
-                      ? 'table-data-avatar-right'
-                      : 'table-data-avatar-left'
-                  }`"
+                  v-if="
+                    props.row[col.avatarKey] &&
+                    typeof props.row[col.avatarKey] === 'object'
+                  "
+                  class="table-data-avatar"
                 >
                   <UAvatar
+                    v-if="props.row[col.avatarKey]?.type === 'initials'"
+                    size="md"
+                    :name="`${props.row[col.avatarKey]?.value}`"
+                  />
+                  <UAvatar
+                    v-else-if="props.row[col.avatarKey]?.type === 'image'"
+                    size="md"
                     :name="
-                      props.row[col.avatarKey]
-                        ? props.row[col.avatarKey]
-                        : 'Need to get initials of Name, replace with initial common function'
+                      props.row[col.avatarKey]?.name ??
+                      props.row[col.avatarKey]?.value
                     "
+                    :image="`${props.row[col.avatarKey]?.value}`"
+                  />
+                </div>
+                <div v-else class="table-data-avatar">
+                  <UAvatar
                     size="md"
-                    :image="`${
-                      props.row[col.avatarKey]
-                        ? props.row[col.avatarKey]
-                        : 'https://cdn.quasar.dev/img/avatar1.jpg'
-                    }`"
+                    :name="`${props.row[col.avatarKey]}`"
+                    :image="`${props.row[col.avatarKey]}`"
                   />
                 </div>
                 <div class="td-grid-content">
@@ -521,13 +529,10 @@ const onRowPerPageChange = (value) => {
   width: $md
   color: $neutral-9
 
-.table-data-avatar-left
+.table-data-avatar
   padding: $xs
   padding-left: 0px
 
-.table-data-avatar-right
-  padding: $xs
-
 .td-caption
   color: $description