@usssa/component-library 1.0.0-alpha.116 → 1.0.0-alpha.118

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.116
+# Component Library v1.0.0-alpha.118
 
 **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.116",
+  "version": "1.0.0-alpha.118",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuButtonStd.vue

@@ -1,58 +1,62 @@
 <script setup>
-import { computed, ref } from 'vue'
 import UAvatar from './UAvatar.vue'
-import UBtnStd from './UBtnStd.vue'
 import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['update-country', 'onClick'])
 
 const props = defineProps({
-  color: {
+  anchor: {
     type: String,
   },
-  label: {
-    type: String
+  ariaLabel: {
+    type: String,
   },
-  iconClass: {
+  avatarUrl: {
     type: String,
   },
-  size: {
+  color: {
     type: String,
-    default: 'md',
-    validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  states: {
+  dataTestId: {
     type: String,
-    default: 'Basic',
-    validator: (val) => ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix'].includes(val),
+    default: 'menu-button',
   },
-  selectedCountry: {
-    type: Object,
+  displayName: {
+    type: String,
   },
-  tooltip: {
+  iconClass: {
     type: String,
   },
-  anchor: {
+  label: {
     type: String,
   },
+  menuOffset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+  selectedCountry: {
+    type: Object,
+  },
   self: {
     type: String,
   },
-  displayName: {
+  size: {
     type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  avatarUrl: {
-    type: String,
-  },  
-  ariaLabel: {
+  states: {
     type: String,
+    default: 'Basic',
+    validator: (val) =>
+      ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix'].includes(val),
   },
-   menuOffset: {
-    type: Array,
-    default: () => [4, 4],
+  tooltip: {
+    type: String,
   },
 })
 
-const emit = defineEmits(['update-country', 'onClick'])
-
 const handleClick = () => {
   return emit('onClick')
 }
@@ -63,47 +67,43 @@ const toLowerCase = (str) => str.toLowerCase()
 </script>
 
 <template>
-
   <!-- 1. Menu button Basic state -->
   <q-btn-dropdown
     v-if="states === 'Basic'"
-    :aria-label="label"
     :class="`u-mb-btn u-mb-basic size-${size}`"
+    :aria-label="label"
     :color="color"
+    :dataTestId="dataTestId"
     flat
     :menu-offset="menuOffset"
     no-caps
-    text-color='dark'
+    text-color="dark"
   >
     <template #label>
-      <q-icon
-        v-if="iconClass"
-        :class="iconClass"
-        size='sm'
-      />
+      <q-icon v-if="iconClass" :class="iconClass" size="sm" />
       <div class="text-body-md q-ml-xs">{{ label }}</div>
     </template>
-    <slot name='menu' />
+    <slot name="menu" />
   </q-btn-dropdown>
-  
-  
+
   <!-- 2. Menu button Icon state -->
   <UBtnIcon
     v-if="states === 'Icon'"
-    :ariaLabel="ariaLabel"
-    :anchor="anchor"
     class="u-mb-icon"
+    :anchor="anchor"
+    :ariaLabel="ariaLabel"
     :color="color"
+    :dataTestId="dataTestId"
     :iconClass="iconClass"
     :offset="menuOffset"
     ref="btn-icon"
-    :size="size"
     :self="self"
+    :size="size"
     :tooltip="tooltip"
     @onClick="handleClick"
   >
     <template v-slot:menu>
-      <slot name='menu' />
+      <slot name="menu" />
     </template>
   </UBtnIcon>
 
@@ -112,13 +112,14 @@ const toLowerCase = (str) => str.toLowerCase()
     v-if="states === 'Button'"
     class="u-mb-btn"
     :color="color"
-    :left-icon="iconClass"
+    :dataTestId="dataTestId"
     :label="label"
+    :left-icon="iconClass"
     outline
     :size="size"
   >
     <template v-slot:menu>
-      <slot name='menu' />
+      <slot name="menu" />
     </template>
   </UBtnStd>
 
@@ -128,29 +129,30 @@ const toLowerCase = (str) => str.toLowerCase()
     :class="`u-mb-avatar size-${size}`"
     :color="color"
     content-class="u-options-menu"
-    no-caps
+    :dataTestId="dataTestId"
     :menu-offset="menuOffset"
+    no-caps
     rounded
     text-color="black"
     unelevated
   >
     <template #label>
       <q-item class="account-drop-down">
-        <q-item-section avatar class="q-pr-xs">
+        <q-item-section class="q-pr-xs" avatar>
           <UAvatar
             v-if="avatarUrl"
             :image="avatarUrl"
             :name="displayName"
-            size="md"
-            :showIndicator="false"
             :round="true"
+            :showIndicator="false"
+            size="md"
           />
           <UAvatar
             v-else
             :name="displayName"
-            size="md"
-            :showIndicator="false"
             :round="true"
+            :showIndicator="false"
+            size="md"
           />
         </q-item-section>
         <q-item-section v-if="displayName">
@@ -160,20 +162,19 @@ const toLowerCase = (str) => str.toLowerCase()
         </q-item-section>
       </q-item>
     </template>
-    <slot name='menu' />
+    <slot name="menu" />
   </q-btn-dropdown>
 
-
   <!-- 5. Menu button Prefix state -->
   <q-btn-dropdown
     v-if="states === 'Prefix'"
-    class="u-prefix-dropdown text-body-sm"
-    :class="`btn-field-${size}`"
+    :class="`u-prefix-dropdown text-body-sm btn-field-${size}`"
     content-class="u-prefix-dropdown-list"
+    :dataTestId="dataTestId"
     flat
     menu-anchor="top right"
-    menu-self="bottom middle"
     :menu-offset="menuOffset"
+    menu-self="bottom middle"
     rounded
   >
     <template #label>
@@ -184,7 +185,7 @@ const toLowerCase = (str) => str.toLowerCase()
       />
       <label class="selected-code"> {{ selectedCountry.code }}</label>
     </template>
-    <slot name='menu' />
+    <slot name="menu" />
   </q-btn-dropdown>
 </template>
 

package/src/components/core/UMenuDropdown.vue

@@ -5,6 +5,10 @@ const props = defineProps({
   data: {
     type: Array,
   },
+  dataTestId: {
+    type: String,
+    default: 'menu-dropdown',
+  },
   iconClass: {
     type: String,
   },
@@ -23,7 +27,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-list :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`">
+  <q-list
+    :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`"
+    :dataTestId="dataTestId"
+  >
     <template v-for="(item, index) in data" :key="index">
       <UMenuItem
         :iconClass="iconClass"

package/src/components/core/UTabBtnStd.vue

@@ -1,7 +1,22 @@
 <script setup>
 import UBadgeStd from './UBadgeStd.vue'
 
+const emit = defineEmits(['onTabClick'])
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
 const props = defineProps({
+  buttonTabsOptions: {
+    type: Array,
+    default: () => [],
+  },
+  dataTestId: {
+    type: String,
+    default: 'tab-btn-std',
+  },
   size: {
     type: String,
     default: 'md',
@@ -10,19 +25,8 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  buttonTabsOptions: {
-    type: Array,
-    default: () => [],
-  },
 })
 
-const selectedTab = defineModel('selectedTab', {
-  type: [String, Number],
-  default: null,
-})
-
-const emit = defineEmits(['onTabClick'])
-
 const handleTabClick = (value) => {
   emit('onTabClick', value)
 }
@@ -30,13 +34,14 @@ const handleTabClick = (value) => {
 
 <template>
   <q-tabs
+    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
+    class="u-tabs-outer"
+    :dataTestId="dataTestId"
     dense
     indicator-color="transparent"
     inline-label
     :model-value="selectedTab"
     no-caps
-    class="u-tabs-outer"
-    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
   >
     <template v-for="(tabOption, key) in buttonTabsOptions" :key="tabOption.id">
       <q-tab
@@ -44,28 +49,28 @@ const handleTabClick = (value) => {
         :class="`u-tab-button text-caption-${size} u-tab-${size} ${
           key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
         }`"
-        :ripple="false"
+        :aria-label="tabOption.label"
         :disable="tabOption.disable"
         :name="tabOption.id"
-        :aria-label="tabOption.label"
+        :ripple="false"
         @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
           <q-icon
             v-if="tabOption.icon"
             :class="tabOption.icon"
-            :aria-label="tabOption.label"
             :alt="tabOption.label"
+            :aria-label="tabOption.label"
           />
           <p class="u-tab-label truncated-label left-icon-label">
             {{ tabOption.label ? tabOption.label : '' }}
           </p>
           <UBadgeStd
             v-if="tabOption.badgeLabel"
-            :label="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
             color="primary"
+            :label="tabOption.badgeLabel"
             :size="size === 'md' ? 'md' : ''"
-            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
           />
         </template>
       </q-tab>
@@ -74,10 +79,10 @@ const handleTabClick = (value) => {
         :class="`u-tab-button text-caption-${size} u-tab-${size} ${
           key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
         }`"
-        :ripple="false"
-        :name="tabOption.id"
         :aria-label="tabOption.label"
         :disable="tabOption.disable"
+        :name="tabOption.id"
+        :ripple="false"
         @click="handleTabClick(tabOption.id)"
       >
         <template v-slot:default>
@@ -86,10 +91,10 @@ const handleTabClick = (value) => {
           </p>
           <UBadgeStd
             v-if="tabOption.badgeLabel"
-            :label="tabOption.badgeLabel"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
             color="primary"
+            :label="tabOption.badgeLabel"
             :size="size === 'md' ? 'md' : ''"
-            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
           />
         </template>
       </q-tab>

package/src/components/core/UTabsStd.vue

@@ -1,77 +1,82 @@
 <script setup>
+const selectedTab = defineModel({
+  required: true,
+  type: [Boolean, String, Number],
+})
+
 const props = defineProps({
+  align: { type: String, default: 'justify' },
+  dataTestId: {
+    type: String,
+    default: 'tabs-std',
+  },
   tabs: {
     type: Array,
     required: true,
   },
-  align: { type: String, default: 'justify' },
-})
-
-const selectedTab = defineModel({
-  required: true,
-  type: [Boolean, String, Number],
 })
 </script>
 
 <template>
   <q-tabs
     v-model="selectedTab"
-    :dense="true"
+    class="u-tabs-std text-caption-md"
     active-color="primary"
+    :align="align"
+    :dataTestId="dataTestId"
+    :dense="true"
     indicator-color="primary"
-    outside-arrows
     inline-label
     mobile-arrows
-    :align="align"
     no-caps
-    class="u-tabs-std text-caption-md"
+    outside-arrows
   >
     <template v-for="tab in tabs" :key="tab.name">
       <q-tab
-        :aria-label="tab.label"
         v-if="!tab.route"
+        :aria-label="tab.label"
+        :disable="tab.disable"
         :name="tab.name"
         :ripple="false"
-        :disable="tab.disable"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.leftIcon"
             :class="`left-icon ${tab.leftIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
           <p class="q-ma-none">{{ tab.label }}</p>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.rightIcon"
             :class="`right-icon ${tab.rightIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
         </template>
       </q-tab>
       <q-route-tab
         v-else
+        :aria-label="tab.label"
+        :disable="tab.disable"
+        exact
         :name="tab.name"
         :ripple="false"
         :to="`${tab.route}`"
-        exact
-        :aria-label="tab.label"
-        :disable="tab.disable"
       >
         <template v-slot:default>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.leftIcon"
             :class="`left-icon ${tab.leftIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
           <p class="q-ma-none">{{ tab.label }}</p>
           <q-icon
-            :aria-label="tab.label"
-            :alt="tab.label"
             v-if="tab.rightIcon"
             :class="`right-icon ${tab.rightIcon}`"
+            :alt="tab.label"
+            :aria-label="tab.label"
           />
         </template>
       </q-route-tab>

package/src/components/core/UToggleStd.vue

@@ -2,27 +2,31 @@
 import { onMounted, watch } from 'vue'
 
 const props = defineProps({
-  name: {
+  checkedIcon: {
     type: String,
-    default: 'toggle',
+    default: '',
+  },
+  dataTestId: {
+    type: String,
+    default: 'toggle-std',
   },
   disabled: {
     type: Boolean,
     default: false,
   },
-  label: {
-    type: String,
-    default: '',
-  },
   id: {
     type: [String, Number],
     default: 'u-toggle',
     required: true, // it is required for to match accessibility crieteria
   },
-  checkedIcon: {
+  label: {
     type: String,
     default: '',
   },
+  name: {
+    type: String,
+    default: 'toggle',
+  },
   unCheckedIcon: {
     type: String,
     default: '',
@@ -82,27 +86,28 @@ watch(toggle, () => {
 <template>
   <label class="hidden" :for="`u-toggle-${id}`">{{ label }}</label>
   <q-toggle
-    :id="`u-toggle-${id}`"
+    v-bind="$attrs"
     v-model="toggle"
-    :name="name"
-    color="primary"
     class="u-toggle"
+    color="primary"
+    :dataTestId="dataTestId"
     :disable="disabled"
-    v-bind="$attrs"
+    :id="`u-toggle-${id}`"
+    :name="name"
   >
     <template v-slot:default>
       <q-icon
         v-if="checkedIcon && toggle"
-        :id="`u-toggle-right-icon-${name}`"
         :class="`${checkedIcon} u-checked-icon`"
         :aria-label="`${name ? name : ''} checked toggle icon`"
+        :id="`u-toggle-right-icon-${name}`"
       >
       </q-icon>
       <q-icon
         v-if="unCheckedIcon && !toggle"
-        :id="`u-toggle-left-icon-${name}`"
         :class="`${unCheckedIcon} u-unchecked-icon`"
         :aria-label="`${name ? name : ''} unchecked toggle icon`"
+        :id="`u-toggle-left-icon-${name}`"
       >
       </q-icon>
     </template>

package/src/components/core/UToolbar.vue

@@ -1,23 +1,26 @@
 <script setup>
 import { computed } from 'vue'
 import UBtnIcon from './UBtnIcon.vue'
-import UBtnStd from './UBtnStd.vue';
-
+import UBtnStd from './UBtnStd.vue'
 
 const emit = defineEmits(['navigateBack'])
 const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toolbar',
+  },
   isMiniState: {
     type: Boolean,
     required: true,
   },
-  title: {
-    type: String,
-    required: true,
-  },
   isSubPage: {
     type: Boolean,
     required: true,
   },
+  title: {
+    type: String,
+    required: true,
+  },
 })
 
 // Computed property for the title text
@@ -32,13 +35,14 @@ const handleClick = () => {
 </script>
 
 <template>
-  <q-toolbar class="u-header-toolbar-container">
+  <q-toolbar class="u-header-toolbar-container" :dataTestId="dataTestId">
     <!-- Expand icon to open sidebar or drawer-->
     <UBtnIcon
       v-if="isMiniState"
+      class="q-ml-xxs"
       ariaLabel="Sidebar expand icon"
       color="primary"
-      class="q-ml-xxs"
+      dataTestId="expand-button"
       iconClass="fa-kit-duotone fa-sidebar-shrink"
       size="md"
     />
@@ -46,26 +50,29 @@ const handleClick = () => {
     <section class="fit row justify-between items-center q-mx-ms">
       <!-- Title container with dynamic title and optional back button -->
       <UBtnStd
-       v-if="isSubPage"
-       :aria-label="pageTitle"
-       class="back_to_button"
-       color="primary"
-       :flat="true"
-       :label="pageTitle"
-       left-icon="fa-kit-duotone fa-circle-arrow-left"
-       @click="handleClick"
-       />
-      <span v-else class="q-my-none text-heading-sm">{{ pageTitle }}</span>
+        v-if="isSubPage"
+        class="back_to_button"
+        :aria-label="pageTitle"
+        color="primary"
+        dataTestId="back-button"
+        :flat="true"
+        :label="pageTitle"
+        left-icon="fa-kit-duotone fa-circle-arrow-left"
+        @click="handleClick"
+      />
+      <span v-else class="q-my-none text-heading-sm" dataTestId="toolbar-title">
+        {{ pageTitle }}
+      </span>
 
       <!-- Action element container -->
       <div class="u-header-toolbar-action-container">
-        <slot name="right_section"/>
+        <slot name="right_section" />
       </div>
     </section>
   </q-toolbar>
 </template>
 
-<style lang="sass"> 
+<style lang="sass">
 .u-header-toolbar-container
   background-color: white
   width: 100%

package/src/components/core/UUploader.vue

@@ -1,74 +1,79 @@
 <script setup>
 import { ref } from 'vue'
+import { fixStringLength, formatDate, getFileCategory } from '../../utils/data'
 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 '../../utils/data'
+
+const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
 
 const props = defineProps({
   autoUpload: {
     type: Boolean,
     default: true,
   },
-  noThumbnails: {
-    type: Boolean,
-    default: true,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
   batch: {
     type: Boolean,
     default: false,
   },
-  fileUploadUrl: {
+  dataTestId: {
     type: String,
+    default: 'uploader',
   },
-  size: {
-    type: String,
-    default: 'sm',
-  },
-  removeIconLabel: {
+  description: {
     type: String,
-    default: 'Remove File',
+    default: 'Drag and drop your file or select choose file.',
   },
   editIconLabel: {
     type: String,
     default: 'Edit File Name',
   },
-  viewIconLabel: {
+  fileIconColor: {
+    type: String,
+    default: 'primary',
+  },
+  fileNameLimit: {
+    type: Number,
+    default: 25,
+  },
+  fileUploadUrl: {
     type: String,
-    default: 'view File Name',
   },
   listExternal: {
     type: Boolean,
     default: false,
   },
-  selectFileBtnLabel: {
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  noThumbnails: {
+    type: Boolean,
+    default: true,
+  },
+  removeIconLabel: {
     type: String,
-    default: 'Choose File',
+    default: 'Remove File',
   },
-  description: {
+  selectFileBtnLabel: {
     type: String,
-    default: 'Drag and drop your file or select choose file.',
+    default: 'Choose File',
   },
   showUploadBtn: {
     type: Boolean,
     default: true,
   },
-  fileNameLimit: {
-    type: Number,
-    default: 25,
+  size: {
+    type: String,
+    default: 'sm',
   },
-  fileIconColor: {
+  viewIconLabel: {
     type: String,
-    default: 'primary',
+    default: 'view File Name',
   },
 })
 
-const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
 const fileDisplayName = ref([])
 const isEditing = ref([])
 const uploaderRef = ref(null)
@@ -79,18 +84,12 @@ const cancelEdit = (payload) => {
   isEditing.value[index] = false
 }
 
-const handleViewClick = (file) => {
-  return emit('onViewFile', file)
-}
-
 const editFileName = (index) => {
   isEditing.value[index] = true
 }
 
-const updateFileName = (payload) => {
-  const { index, scope, file } = payload
-  scope.files[index].displayName = fileDisplayName.value[file['__key']]
-  isEditing.value[index] = false
+const handleViewClick = (file) => {
+  return emit('onViewFile', file)
 }
 
 const OnFileAdded = (files) => {
@@ -114,6 +113,12 @@ const removeFile = (payload) => {
   scope.removeFile(file)
 }
 
+const updateFileName = (payload) => {
+  const { index, scope, file } = payload
+  scope.files[index].displayName = fileDisplayName.value[file['__key']]
+  isEditing.value[index] = false
+}
+
 const upload = () => {
   uploaderRef.value.upload()
 }
@@ -125,12 +130,13 @@ defineExpose({ upload })
     <q-uploader
       v-bind="$attrs"
       class="u-uploader"
-      label="Drag and drop your file or select choose file."
-      ref="uploaderRef"
       :auto-upload="autoUpload"
       :batch="batch"
+      :dataTestId="dataTestId"
+      label="Drag and drop your file or select choose file."
       :multiple="multiple"
       :no-thumbnails="noThumbnails"
+      ref="uploaderRef"
       :url="fileUploadUrl"
       @added="OnFileAdded"
       @uploaded="OnFileUploaded"
@@ -138,8 +144,8 @@ 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="../../assets/files.png" alt="Upload Files" />
-            <div class="text-body-md">
+            <img alt="Upload Files" src="../../assets/files.png" />
+            <div class="text-body-md" dataTestId="description">
               {{ description }}
             </div>
           </div>
@@ -147,9 +153,10 @@ defineExpose({ upload })
             <UBtnStd
               class="q-mt-md q-mb-md"
               color="primary"
-              size="lg"
+              dataTestId="select-file-btn"
               :full-width="true"
               :label="selectFileBtnLabel"
+              size="lg"
               @click="scope.pickFiles"
             >
               {{ selectFileBtnLabel }}
@@ -160,10 +167,11 @@ defineExpose({ upload })
             <UBtnStd
               v-if="scope.canUpload && showUploadBtn"
               class="q-mt-md q-mb-md"
-              size="sm"
-              icon="cloud_upload"
               color="primary"
+              dataTestId="upload-btn"
               flat
+              icon="cloud_upload"
+              size="sm"
               @click="scope.upload"
             >
               <UTooltip description="Upload Files" />
@@ -175,11 +183,14 @@ defineExpose({ upload })
         <div
           v-if="!listExternal && scope.files"
           class="list-container q-my-xxs"
+          dataTestId="file-list"
         >
           <q-card
             v-for="(file, index) in scope.files"
             :class="`uploader-list list-size-${size} ${
-              file.__status == 'uploading' ? 'q-py-xs q-px-sm' : 'uploaded-container'
+              file.__status == 'uploading'
+                ? 'q-py-xs q-px-sm'
+                : 'uploaded-container'
             }`"
             :key="file.__key"
           >
@@ -220,9 +231,9 @@ defineExpose({ upload })
 
                 <q-icon
                   class="icon-close fa-kit-duotone fa-circle-xmark"
+                  :aria-label="removeIconLabel"
                   size="sm"
                   tabindex="0"
-                  :aria-label="removeIconLabel"
                   @click="removeFile({ scope, file, index })"
                 />
               </div>
@@ -273,9 +284,9 @@ defineExpose({ upload })
 
                 <q-icon
                   class="icon-close fa-kit-duotone fa-circle-xmark"
+                  :aria-label="removeIconLabel"
                   size="sm"
                   tabindex="0"
-                  :aria-label="removeIconLabel"
                   @click="removeFile({ scope, file, index })"
                 />
               </div>
@@ -328,9 +339,9 @@ defineExpose({ upload })
                   <span class="text-caption-md title flex">
                     <UTooltip
                       anchor="center end"
-                      self="center end"
                       :description="file.displayName || file.name"
                       :offset="[4, 4]"
+                      self="center end"
                     />
 
                     {{
@@ -346,39 +357,39 @@ defineExpose({ upload })
                 </div>
 
                 <UBtnIcon
+                  v-if="!isEditing[index] && size == 'md'"
                   iconClass="fa-kit-duotone fa-pen-to-square"
+                  :aria-label="editIconLabel"
                   color="primary"
                   size="md"
                   tabindex="0"
-                  :aria-label="editIconLabel"
                   @click="editFileName(index)"
-                  v-if="!isEditing[index] && size == 'md'"
                 />
 
                 <UBtnIcon
                   iconClass="fa-kit-duotone fa-trash-can"
+                  :aria-label="removeIconLabel"
                   color="accent"
                   size="md"
                   tabindex="0"
-                  :aria-label="removeIconLabel"
                   @click="removeFile({ scope, file, index })"
                 />
 
                 <UBtnStd
+                  v-if="size == 'md'"
+                  :aria-label="viewIconLabel"
                   color="primary"
                   label="View"
-                  size="sm"
                   outline
-                  :aria-label="viewIconLabel"
+                  size="sm"
                   @onClick="handleViewClick(file)"
-                  v-if="size == 'md'"
                 />
               </div>
-              <div class="q-my-ba" v-if="isEditing[index]">
+              <div v-if="isEditing[index]" class="q-my-ba">
                 <UInputTextStd
+                  v-model="fileDisplayName[file.__key]"
                   label="Edit file name"
                   size="md"
-                  v-model="fileDisplayName[file.__key]"
                 />
               </div>
               <div
@@ -386,39 +397,39 @@ defineExpose({ upload })
                 class="list-items edit-button row q-mt-ba"
               >
                 <UBtnStd
+                  :aria-label="editIconLabel"
                   color="primary"
-                  label="Edit"
-                  size="md"
                   flat
-                  :aria-label="editIconLabel"
                   :full-width="true"
+                  label="Edit"
+                  size="md"
                   @click="editFileName(index)"
                 />
                 <UBtnStd
+                  :aria-label="viewIconLabel"
                   color="primary"
-                  label="View File"
-                  size="md"
                   :full-width="true"
+                  label="View File"
                   :outline="true"
-                  :aria-label="viewIconLabel"
+                  size="md"
                   @onClick="handleViewClick(file)"
                 />
               </div>
               <div v-if="isEditing[index]" class="list-items update-button row">
                 <UBtnStd
                   color="primary"
-                  label="Cancel"
-                  size="md"
                   flat
                   :full-width="true"
+                  label="Cancel"
+                  size="md"
                   @click="cancelEdit({ index, file })"
                 />
 
                 <UBtnStd
                   color="primary"
+                  :full-width="true"
                   label="Update file name"
                   size="md"
-                  :full-width="true"
                   @click="updateFileName({ scope, file, index })"
                 />
               </div>