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

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.14
+# 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.14",
+  "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

@@ -144,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/UInputTextStd.vue

@@ -32,6 +32,9 @@ const props = defineProps({
   placeholder: {
     type: String,
   },
+  rightIconAriaLabel: {
+    type: String,
+  },
   size: {
     type: String,
     default: 'md',
@@ -152,6 +155,11 @@ const handleRightIconClick = () => {
               @click="handleRightIconClick"
               :class="`slot-icon-size-${size} ${rightIcon}`"
               :tabindex="0"
+              :aria-label="
+                rightIcon && rightIconAriaLabel
+                  ? rightIconAriaLabel
+                  : 'right input icon '
+              "
             />
           </slot>
         </template>

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