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

package/package.json

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

package/src/components/core/UAvatar.vue

@@ -7,6 +7,9 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  bgColor: {
+    type: String,
+  },
   icon: {
     type: String,
   },
@@ -80,10 +83,11 @@ const initials = computed(() => {
   <q-avatar
     class="u-avatar"
     :class="`size-${size}`"
-    @click="handleClick"
+    :color="bgColor"
     :round="round"
     :rounded="!round"
     :icon="icon"
+    @click="handleClick"
     v-bind="$attrs"
   >
     <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />

package/src/components/core/UMenuDropdown.vue

@@ -33,7 +33,7 @@ const handleClick = () => {
 </script>
 
 <template>
-  <q-list :class="`u-menu-dropdown size-${size} ${menuClass}`">
+  <q-list :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`">
     <template v-for="(item, index) in data" :key="index">
       <UMenuItem
         :label="item.label"

package/src/components/core/UMenuItem.vue

@@ -66,11 +66,10 @@ const backgroundColor = computed(() => {
 </script>
 
 <template>
-  <div class="u-menu-link q-mb-xxs">
     <q-item
       clickable
       role="button"
-      :class="`${backgroundColor} item-${type}`"
+      :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
       @click="handleClick"
       :aria-label="label"
     >
@@ -100,12 +99,11 @@ const backgroundColor = computed(() => {
 
       <slot name="trailing_slot"></slot>
     </q-item>
-  </div>
 </template>
 
 <style lang="sass">
 .u-menu-link
-  .q-item
+  &.q-item
     border-radius: $xxs
     padding: 0rem $xs
     align-items: center
@@ -126,7 +124,4 @@ const backgroundColor = computed(() => {
         opacity: 1
     .label
       word-break: break-all
-
-.u-menu-link:last-child
-  margin-bottom : 0
 </style>

package/src/components/core/USelectStd.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+import UMenuItem from './UMenuItem.vue'
+import UAvatar from './UAvatar.vue'
 
 const props = defineProps({
   label: {
@@ -45,6 +47,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  disableAvatar: {
+    type: Boolean,
+    default: true,
+  },
   size: {
     type: String,
     default: 'md',
@@ -89,26 +95,29 @@ const model = computed({
       </div>
 
       <q-icon
-        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
+        aria-hidden="true"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         size="1rem"
         color="neutral-9"
-        aria-hidden="true"
       >
         <UTooltip
-          :description="toolTipText"
           anchor="top middle"
+          :description="toolTipText"
           self="bottom middle"
         />
       </q-icon>
     </label>
 
     <q-select
-      class="u-select"
-      :class="`field-${size}`"
-      id="select"
+      v-model="model"
+      v-bind="$attrs"
+      bottom-slots
+      :class="`u-select field-${size}`"
       :color="color"
       emit-value
+      hide-bottom-space
+      id="select"
       map-options
       :menu-offset="[0, 5]"
       :option-value="optionValue"
@@ -117,13 +126,9 @@ const model = computed({
       outlined
       options-selected-class="primary bg-blue-1"
       :popup-content-class="`u-options-menu ${popupClass}`"
-      v-model="model"
-      hide-bottom-space
-      bottom-slots
-      v-bind="$attrs"
+      :placeholder="placeholder"
       :use-input="useInput"
       @filter="filterFn"
-      :placeholder="placeholder"
     >
       <template v-slot:no-option>
         <q-item>
@@ -140,7 +145,6 @@ const model = computed({
       <template v-if="hintText" v-slot:hint>
         <div class="row no-wrap items-center text-neutral-9">
           <q-icon :class="hintIcon" size="1rem" v-if="hintIcon" />
-
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
           </div>
@@ -148,28 +152,42 @@ const model = computed({
       </template>
 
       <template v-slot:option="scope">
-        <q-item class="items-center u-custom-option" v-bind="scope.itemProps">
-          <div class="q-pr-xs" v-if="scope.opt.icon">
-            <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
-          </div>
-
-          <q-item-section>
-            <q-item-label class="text-body-sm">
-              {{ scope.opt.label }}
-            </q-item-label>
-            <q-item-label caption v-if="scope.opt.description">
-              {{ scope.opt.description }}
-            </q-item-label>
-          </q-item-section>
-
-          <q-item-section v-if="scope.selected" side>
-            <q-icon
-              class="fa-kit-duotone fa-circle-check"
-              color="primary"
-              size="1rem"
-            />
-          </q-item-section>
-        </q-item>
+        <UMenuItem
+          v-bind="scope.itemProps"
+          class="q-ma-xxs"
+          iconClass="icon-secondary-opacity"
+          :label="scope.opt.label"
+          :leftIcon="scope.opt.leftIcon"
+          :rightIcon="scope.opt.rightIcon"
+          :selected="scope.selected"
+        >
+          <template #leading_slot>
+            <slot name="leading_slot"/>
+            <div v-if="!disableAvatar">
+              <UAvatar
+                v-if="scope.opt.avatarUrl"
+                :image="scope.opt.avatarUrl"
+                :name="scope.opt.label"
+                size="md"
+              />
+              <UAvatar
+                v-else
+                :name="scope.opt.label"
+                size="md"
+              />
+            </div>
+          </template>
+          <template #trailing_slot>
+            <slot name="trailing_slot">
+              <q-icon
+                v-if="scope.selected"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+                size="1rem"
+              />
+            </slot>
+          </template> 
+        </UMenuItem>
       </template>
     </q-select>
   </section>
@@ -224,10 +242,9 @@ const model = computed({
   width: 18rem
   overflow-y: auto
   scrollbar-width: none
-
-.u-custom-option
-  margin: $xxs
-  border-radius: $xxs
-  padding: $xs
-  min-height: $lg
+    
+.u-options-menu
+  .q-item:last-child
+    margin-bottom: $xxs
+    
 </style>

package/src/components/core/UUploader.vue

@@ -4,7 +4,7 @@ import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
 import UInputTextStd from './UInputTextStd.vue'
 import UTooltip from './UTooltip.vue'
-import { fixStringLength, formatDate, getFileCategory } from 'src/utils/data'
+import { fixStringLength, formatDate, getFileCategory } from '../../utils/data'
 
 const props = defineProps({
   autoUpload: {
@@ -34,6 +34,14 @@ const props = defineProps({
     type: String,
     default: 'Remove File',
   },
+  editIconLabel: {
+    type: String,
+    default: 'Edit File Name',
+  },
+  viewIconLabel: {
+    type: String,
+    default: 'view File Name',
+  },
   listExternal: {
     type: Boolean,
     default: false,
@@ -61,11 +69,13 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
-
+const fileDisplayName = ref([])
 const isEditing = ref([])
 const uploaderRef = ref(null)
 
-const cancelEdit = (index) => {
+const cancelEdit = (payload) => {
+  const { index, file } = payload
+  fileDisplayName.value[file['__key']] = file.displayName
   isEditing.value[index] = false
 }
 
@@ -78,14 +88,17 @@ const editFileName = (index) => {
 }
 
 const updateFileName = (payload) => {
-  const { index } = payload
+  const { index, scope, file } = payload
+  scope.files[index].displayName = fileDisplayName.value[file['__key']]
   isEditing.value[index] = false
 }
 
 const OnFileAdded = (files) => {
   files.forEach((file, index) => {
     files[index]['displayName'] = files[index]['name']
+    fileDisplayName.value[file['__key']] = files[index]['displayName']
   })
+
   return emit('getFilesOnAdded', uploaderRef.value.files)
 }
 
@@ -95,7 +108,9 @@ const OnFileUploaded = ({ files, xhr }) => {
   })
 }
 
-const removeFile = (scope, file) => {
+const removeFile = (payload) => {
+  const { scope, file } = payload
+  fileDisplayName.value.splice(file['__key'], 1)
   scope.removeFile(file)
 }
 
@@ -135,6 +150,7 @@ defineExpose({ upload })
               size="lg"
               :full-width="true"
               :label="selectFileBtnLabel"
+              @click="scope.pickFiles"
             >
               {{ selectFileBtnLabel }}
               <q-uploader-add-trigger
@@ -206,7 +222,7 @@ defineExpose({ upload })
                   size="sm"
                   tabindex="0"
                   :aria-label="removeIconLabel"
-                  @click="removeFile(scope, file)"
+                  @click="removeFile({ scope, file, index })"
                 />
               </div>
             </q-card-section>
@@ -259,7 +275,7 @@ defineExpose({ upload })
                   size="sm"
                   tabindex="0"
                   :aria-label="removeIconLabel"
-                  @click="removeFile(scope, file)"
+                  @click="removeFile({ scope, file, index })"
                 />
               </div>
               <div class="progress-bar-container flex items-center q-mt-xxs">
@@ -333,6 +349,7 @@ defineExpose({ upload })
                   color="primary"
                   size="md"
                   tabindex="0"
+                  :aria-label="editIconLabel"
                   @click="editFileName(index)"
                   v-if="!isEditing[index] && size == 'md'"
                 />
@@ -342,7 +359,8 @@ defineExpose({ upload })
                   color="accent"
                   size="md"
                   tabindex="0"
-                  @click="removeFile(scope, file)"
+                  :aria-label="removeIconLabel"
+                  @click="removeFile({ scope, file, index })"
                 />
 
                 <UBtnStd
@@ -350,7 +368,7 @@ defineExpose({ upload })
                   label="View"
                   size="sm"
                   outline
-                  tabindex="-1"
+                  :aria-label="viewIconLabel"
                   @onClick="handleViewClick(file)"
                   v-if="size == 'md'"
                 />
@@ -359,7 +377,7 @@ defineExpose({ upload })
                 <UInputTextStd
                   label="Edit file name"
                   size="md"
-                  v-model="file.displayName"
+                  v-model="fileDisplayName[file.__key]"
                 />
               </div>
               <div
@@ -371,6 +389,7 @@ defineExpose({ upload })
                   label="Edit"
                   size="md"
                   flat
+                  :aria-label="editIconLabel"
                   :full-width="true"
                   @click="editFileName(index)"
                 />
@@ -380,6 +399,7 @@ defineExpose({ upload })
                   size="md"
                   :full-width="true"
                   :outline="true"
+                  :aria-label="viewIconLabel"
                   @onClick="handleViewClick(file)"
                 />
               </div>
@@ -390,7 +410,7 @@ defineExpose({ upload })
                   size="md"
                   flat
                   :full-width="true"
-                  @click="cancelEdit(index)"
+                  @click="cancelEdit({ index, file })"
                 />
 
                 <UBtnStd

package/src/pages/MenuDropdown.vue

@@ -40,7 +40,7 @@ const onClick = () => {
 <template>
   <q-page class="flex flex-center">
     <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=8616-334031&node-type=canvas"
     >
       <template v-slot:component>
         <!-- Using test-cls to demonstrate how to pass custom css -->

package/src/pages/SelectStd.vue

@@ -1,73 +1,75 @@
 <script setup>
 import { ref } from 'vue'
 import ComponentBase from './ComponentBase.vue'
-import { USelectStd } from 'src/components'
+import { USelectStd, UBtnStd } from 'src/components'
 
 const options_data = [
   {
     label: 'Guatemala',
     value: 'Guatemala',
-    icon: 'fa-kit-duotone fa-home',
+    description: 'Guatemala',
+    leftIcon: 'fa-kit-duotone fa-home',
+    avatarUrl: 'https://cdn.quasar.dev/img/avatar2.jpg',
+    rightIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Philippines',
     value: 'Philippines',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Colombia',
     value: 'Colombia',
-    icon: 'fa-kit-duotone fa-home',
+    avatarUrl: 'https://cdn.quasar.dev/img/avatar2.jpg',
   },
   {
     label: 'Turkmenistan',
     value: 'Turkmenistan',
-    icon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'France',
     value: 'France',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Philippines',
     value: 'Philippines',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Greece',
     value: 'Greece',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Indonesia',
     value: 'Indonesia',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Russia',
     value: 'Russia',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Albania',
     value: 'Albania',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Sweden',
     value: 'Sweden',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Japan',
     value: 'Japan',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
   {
     label: 'Czech Republic',
     value: 'Czech Republic',
-    icon: 'fa-kit-duotone fa-home',
+    leftIcon: 'fa-kit-duotone fa-home',
   },
 ]
 const options = ref(options_data)
@@ -87,12 +89,14 @@ const filterFn = (val, update) => {
 
 const size = ref('sm')
 const useInput = ref(false)
+const trailingSlot = ref(false)
 const hintText = ref('This is hint text')
 const toolTipText = ref('This is tooltip text')
 const label = ref('Label')
 const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
 const leftIcon = ref('')
 const isRequired = ref(true)
+const disableAvatar = ref(true) // disable avatar of both type image and initials
 const placeholderText = ref('Placeholder')
 const htmlContent = `<USelectStd
     v-model="modelMultiple"
@@ -109,7 +113,16 @@ const htmlContent = `<USelectStd
     :leftIcon="leftIcon"
     :filterFn="filterFn"
     :placeholder="placeholderText"
-  />`
+  >
+    <template #trailing_slot>
+      <UBtnStd
+          color="primary"
+          label="Label"
+          size="sm"
+          outline
+        /> 
+    </template>
+  </USelectStd>`
 </script>
 
 <template>
@@ -133,7 +146,17 @@ const htmlContent = `<USelectStd
           :leftIcon="leftIcon"
           :filterFn="filterFn"
           :placeholder="placeholderText"
-        />
+          :disableAvatar="disableAvatar"
+        >
+          <template #trailing_slot v-if="trailingSlot">
+            <UBtnStd
+                color="primary"
+                label="Label"
+                size="sm"
+                outline
+              /> 
+          </template>
+        </USelectStd>
       </template>
 
       <template v-slot:properties>
@@ -149,6 +172,8 @@ const htmlContent = `<USelectStd
           <div class="row">
             <q-checkbox size="xs" v-model="isRequired" label="Required" />
             <q-checkbox size="xs" v-model="useInput" label="Use Input" />
+            <q-checkbox size="xs" v-model="trailingSlot" label="Trailing Slot" />
+            <q-checkbox size="xs" v-model="disableAvatar" label="Disable Avatar" />
           </div>
         </div>
       </template>

package/src/pages/TablePage.vue

@@ -223,6 +223,7 @@ const rowsData = computed(() => {
   let newRows = []
   for (let index = 0; index < 5000; index++) {
     newRows.push({
+      id: `${index + 1 * 295}`,
       _id: `${index + 1 * 295}`,
       name: `Frozen Yogurt - ${index}`,
       calories: index % 2 ? `fa-kit-duotone fa-jersey` : null,

package/src/pages/Uploader.vue

@@ -85,13 +85,16 @@ const upload = () => {
   refUpload.value.upload()
 }
 
-const removeFile = (scope, file) => {
+const removeFile = (file) => {
   //remove file from File list goes here
 }
 
 const editFileName = (index) => {
   isEditing.value[index] = true
 }
+const cancelEdit = (index) => {
+  isEditing.value[index] = false
+}
 
 const updateFileName = (payload) => {
   const { index } = payload