@usssa/component-library 1.0.0-alpha.179 → 1.0.0-alpha.180

package/package.json

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

package/src/components/core/UDialogStd.vue

@@ -4,7 +4,7 @@ import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
 
-const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const emit = defineEmits(['onBackIconClick', 'hideDialog', 'handleCloseIconClick'])
 const model = defineModel()
 const props = defineProps({
   closeIcon: String,
@@ -57,25 +57,25 @@ const headerClass = computed(() => {
 
 const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
+const isTablet = computed(() => $screen.value.isTablet)
 const isSmallWidthDevices = computed(() => $q.screen.width < 400)
 const isWidthChanging = computed(() => {
   return {
     width: $q.screen.width,
   }
 })
-const smallDevices = computed(() => {
-  return {
-    sm: $q.screen.height < 800 && $q.screen.height > 700,
-    xs: $q.screen.height < 700,
-  }
-})
-const isTablet = computed(() => $screen.value.isTablet)
 const slotsLength = computed(
   () =>
     Object.keys($slots).filter(
       (slot) => !['content', 'secondary_row'].includes(slot)
     ).length
 )
+const smallDevices = computed(() => {
+  return {
+    sm: $q.screen.height < 800 && $q.screen.height > 700,
+    xs: $q.screen.height < 700,
+  }
+})
 
 const getActionsWrapperFlex = () => {
   if (isMobile.value) {
@@ -133,6 +133,11 @@ const handleBackClick = () => {
   return emit('onBackIconClick')
 }
 
+const handleCloseIconClick = () => {
+  dialogRef.value.hide()
+  emit('handleCloseIconClick')
+}
+
 const hasSlots = () => {
   return (!!$slots['action_secondary_one'] ||
     !!$slots['action_secondary_two']) &&
@@ -189,6 +194,10 @@ const onTouchStart = (event) => {
   window.addEventListener('touchend', onDragEnd)
 }
 
+onMounted(() => {
+  getDialogHeaderheight()
+})
+
 onUnmounted(() => {
   window.removeEventListener('mousemove', onDragMove)
   window.removeEventListener('mouseup', onDragEnd)
@@ -196,10 +205,6 @@ onUnmounted(() => {
   window.removeEventListener('touchend', onDragEnd)
 })
 
-onMounted(() => {
-  getDialogHeaderheight()
-})
-
 watch(
   isWidthChanging,
   () => {
@@ -296,7 +301,7 @@ watch(
             :aria-label="closeIconLabel"
             :flat="true"
             tabindex="0"
-            @click="dialogRef.hide()"
+            @click="handleCloseIconClick()"
           >
             <q-icon
               v-if="closeIcon"

package/src/components/core/UUploader.vue

@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     default: 'Drag and drop your file or select choose file.',
   },
+  disableActions: {
+    type: Boolean,
+    default: false,
+  },
   editIconLabel: {
     type: String,
     default: 'Edit File Name',
@@ -83,9 +87,9 @@ const $q = useQuasar()
 
 const fileDisplayName = ref([])
 const isEditing = ref([])
-const uploaderRef = ref(null)
-
+const isFileUploaded= ref(false)
 const isSmallWidthDevices = computed(() => $q.screen.width < 350)
+const uploaderRef = ref(null)
 
 const cancelEdit = (payload) => {
   const { index, file } = payload
@@ -114,12 +118,14 @@ const OnFileUploaded = ({ files, xhr }) => {
   files.forEach((file, index) => {
     files[index]['uploaded_date'] = new Date()
   })
+  isFileUploaded.value = true
 }
 
 const removeFile = (payload) => {
   const { scope, file } = payload
   fileDisplayName.value.splice(file['__key'], 1)
   scope.removeFile(file)
+  isFileUploaded.value = false
 }
 
 const updateFileName = (payload) => {
@@ -151,7 +157,7 @@ defineExpose({ upload })
       @uploaded="OnFileUploaded"
     >
       <template v-slot:header="scope">
-        <div v-if="scope.canAddFiles" class="q-py-md q-px-xl bg-neutral-2">
+        <div v-if="scope.canAddFiles && (multiple || !isFileUploaded)" class="q-py-md q-px-xl bg-neutral-2 uploader-content">
           <div class="text-center">
             <img
               alt="Upload Files"
@@ -164,6 +170,7 @@ defineExpose({ upload })
           <div class="list-items row">
             <UBtnStd
               class="q-mt-md"
+              :aria-label="selectFileBtnLabel"
               color="primary"
               dataTestId="select-file-btn"
               :disable="selectFileBtnDisable"
@@ -246,6 +253,7 @@ defineExpose({ upload })
                 <q-icon
                   class="icon-close fa-kit-duotone fa-circle-xmark"
                   :aria-label="removeIconLabel"
+                  :disabled="disableActions"
                   size="sm"
                   tabindex="0"
                   @click="removeFile({ scope, file, index })"
@@ -299,6 +307,7 @@ defineExpose({ upload })
                 <q-icon
                   class="icon-close fa-kit-duotone fa-circle-xmark"
                   :aria-label="removeIconLabel"
+                  :disabled="disableActions"
                   size="sm"
                   tabindex="0"
                   @click="removeFile({ scope, file, index })"
@@ -375,6 +384,7 @@ defineExpose({ upload })
                   iconClass="fa-kit-duotone fa-pen-to-square"
                   :aria-label="editIconLabel"
                   color="primary"
+                  :disabled="disableActions"
                   size="md"
                   tabindex="0"
                   @click="editFileName(index)"
@@ -384,6 +394,7 @@ defineExpose({ upload })
                   iconClass="fa-kit-duotone fa-trash-can"
                   :aria-label="removeIconLabel"
                   color="accent"
+                  :disabled="disableActions"
                   size="md"
                   tabindex="0"
                   @click="removeFile({ scope, file, index })"
@@ -413,6 +424,7 @@ defineExpose({ upload })
                 <UBtnStd
                   :aria-label="editIconLabel"
                   color="primary"
+                  :disable="disableActions"
                   flat
                   :full-width="true"
                   label="Edit"
@@ -477,6 +489,7 @@ defineExpose({ upload })
   .q-uploader
     width: auto !important
     max-height: unset !important
+    box-shadow: none
     .q-uploader__list
       background: $neutral-2
   .uploader-list
@@ -502,11 +515,13 @@ defineExpose({ upload })
     font-size:$md
   .q-uploader__header
     padding: 0 !important
+    border-radius: $xs
     background-color: $neutral-2
     .text-body-md
       color: $dark !important
   .q-uploader__list
     min-height: auto !important
+    border-radius: $xs
     padding:0
   .q-uploader__overlay
     display: none !important
@@ -532,4 +547,6 @@ defineExpose({ upload })
       width: 6.5rem
       overflow: hidden
       text-overflow: ellipsis
+  .uploader-content
+    border-radius: $xs
 </style>