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

package/src/components/core/UUploader.vue

@@ -0,0 +1,508 @@
+<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'
+
+const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
+
+const props = defineProps({
+  autoUpload: {
+    type: Boolean,
+    default: true,
+  },
+  batch: {
+    type: Boolean,
+    default: false,
+  },
+  dataTestId: {
+    type: String,
+    default: 'uploader',
+  },
+  description: {
+    type: String,
+    default: 'Drag and drop your file or select choose file.',
+  },
+  editIconLabel: {
+    type: String,
+    default: 'Edit File Name',
+  },
+  fileIconColor: {
+    type: String,
+    default: 'primary',
+  },
+  fileNameLimit: {
+    type: Number,
+    default: 25,
+  },
+  fileUploadUrl: {
+    type: String,
+  },
+  listExternal: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  noThumbnails: {
+    type: Boolean,
+    default: true,
+  },
+  removeIconLabel: {
+    type: String,
+    default: 'Remove File',
+  },
+  selectFileBtnLabel: {
+    type: String,
+    default: 'Choose File',
+  },
+  showUploadBtn: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: 'sm',
+  },
+  viewIconLabel: {
+    type: String,
+    default: 'view File Name',
+  },
+})
+
+const fileDisplayName = ref([])
+const isEditing = ref([])
+const uploaderRef = ref(null)
+
+const cancelEdit = (payload) => {
+  const { index, file } = payload
+  fileDisplayName.value[file['__key']] = file.displayName
+  isEditing.value[index] = false
+}
+
+const editFileName = (index) => {
+  isEditing.value[index] = true
+}
+
+const handleViewClick = (file) => {
+  return emit('onViewFile', file)
+}
+
+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)
+}
+
+const OnFileUploaded = ({ files, xhr }) => {
+  files.forEach((file, index) => {
+    files[index]['uploaded_date'] = new Date()
+  })
+}
+
+const removeFile = (payload) => {
+  const { scope, file } = payload
+  fileDisplayName.value.splice(file['__key'], 1)
+  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()
+}
+
+defineExpose({ upload })
+</script>
+<template>
+  <div class="u-uploader-container">
+    <q-uploader
+      v-bind="$attrs"
+      class="u-uploader"
+      :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"
+    >
+      <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 alt="Upload Files" src="../../assets/files.png" />
+            <div class="text-body-md" dataTestId="description">
+              {{ description }}
+            </div>
+          </div>
+          <div class="list-items row">
+            <UBtnStd
+              class="q-mt-md q-mb-md"
+              color="primary"
+              dataTestId="select-file-btn"
+              :full-width="true"
+              :label="selectFileBtnLabel"
+              size="lg"
+              @click="scope.pickFiles"
+            >
+              {{ selectFileBtnLabel }}
+              <q-uploader-add-trigger
+                :aria-label="selectFileBtnLabel"
+              ></q-uploader-add-trigger>
+            </UBtnStd>
+            <UBtnStd
+              v-if="scope.canUpload && showUploadBtn"
+              class="q-mt-md q-mb-md"
+              color="primary"
+              dataTestId="upload-btn"
+              flat
+              icon="cloud_upload"
+              size="sm"
+              @click="scope.upload"
+            >
+              <UTooltip description="Upload Files" />
+            </UBtnStd>
+          </div>
+        </div>
+      </template>
+      <template v-slot:list="scope">
+        <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'
+            }`"
+            :key="file.__key"
+          >
+            <!-- When File added but not uploaded on server -->
+            <q-card-section v-if="file.__status == 'idle'" class="card-section">
+              <div class="list-items row items-center">
+                <q-icon
+                  v-if="!file.__img && getFileCategory(file.type) != 'Unknown'"
+                  :class="`fa-duotone fa-solid fa-file-${getFileCategory(
+                    file.type
+                  )}`"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="getFileCategory(file.type) == 'Unknown'"
+                  class="fa-duotone fa-solid fa-file-doc"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="file.__img"
+                  class="fa-duotone fa-solid fa-file-image"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <div class="col">
+                  <span class="text-caption-md title flex">
+                    {{ file.name }}
+                  </span>
+                  <span class="text-body-xs info">
+                    {{ file.__sizeLabel }}
+                  </span>
+                </div>
+
+                <q-icon
+                  class="icon-close fa-kit-duotone fa-circle-xmark"
+                  :aria-label="removeIconLabel"
+                  size="sm"
+                  tabindex="0"
+                  @click="removeFile({ scope, file, index })"
+                />
+              </div>
+            </q-card-section>
+
+            <!-- When File start uploading on server -->
+            <q-card-section
+              v-if="file.__status == 'uploading'"
+              class="card-section"
+            >
+              <div class="list-items row items-center">
+                <q-icon
+                  v-if="!file.__img && getFileCategory(file.type) != 'Unknown'"
+                  :class="`fa-duotone fa-solid fa-file-${getFileCategory(
+                    file.type
+                  )}`"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="getFileCategory(file.type) == 'Unknown'"
+                  class="fa-duotone fa-solid fa-file-doc"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="file.__img"
+                  class="fa-duotone fa-solid fa-file-image"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <div class="col">
+                  <span class="text-caption-md title flex">
+                    {{
+                      fixStringLength(
+                        file.displayName || file.name,
+                        fileNameLimit
+                      )
+                    }}
+                  </span>
+                  <span class="text-body-xs info">
+                    {{ file.__sizeLabel }}
+                  </span>
+                </div>
+
+                <q-icon
+                  class="icon-close fa-kit-duotone fa-circle-xmark"
+                  :aria-label="removeIconLabel"
+                  size="sm"
+                  tabindex="0"
+                  @click="removeFile({ scope, file, index })"
+                />
+              </div>
+              <div class="progress-bar-container flex items-center q-mt-xxs">
+                <q-linear-progress
+                  v-if="file.__progressLabel !== undefined"
+                  class="progress-bar"
+                  color="primary"
+                  track-color="neutral-4"
+                  :value="file.__progress"
+                />
+                <span class="text-body-xxs info">
+                  {{ file.__progressLabel }}
+                </span>
+              </div>
+            </q-card-section>
+            <!--End--- When File  Uploading on server --End -->
+
+            <!-- When File  Uploaded on server -->
+            <q-card-section
+              v-if="file.__status == 'uploaded'"
+              class="card-section"
+            >
+              <div class="list-items row items-center">
+                <q-icon
+                  v-if="!file.__img && getFileCategory(file.type) != 'Unknown'"
+                  :class="`fa-duotone fa-solid fa-file-${getFileCategory(
+                    file.type
+                  )}`"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="getFileCategory(file.type) == 'Unknown'"
+                  class="fa-duotone fa-solid fa-file-doc"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+                <q-icon
+                  v-if="file.__img"
+                  class="fa-duotone fa-solid fa-file-image"
+                  :color="fileIconColor"
+                  size="md"
+                  tabindex="0"
+                />
+
+                <div class="col">
+                  <span class="text-caption-md title flex">
+                    <UTooltip
+                      anchor="center end"
+                      :description="file.displayName || file.name"
+                      :offset="[4, 4]"
+                      self="center end"
+                    />
+
+                    {{
+                      fixStringLength(
+                        file.displayName || file.name,
+                        fileNameLimit
+                      )
+                    }}
+                  </span>
+                  <span class="text-body-xs info">
+                    Uploaded: {{ formatDate(file.uploaded_date) }}
+                  </span>
+                </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"
+                  @click="editFileName(index)"
+                />
+
+                <UBtnIcon
+                  iconClass="fa-kit-duotone fa-trash-can"
+                  :aria-label="removeIconLabel"
+                  color="accent"
+                  size="md"
+                  tabindex="0"
+                  @click="removeFile({ scope, file, index })"
+                />
+
+                <UBtnStd
+                  v-if="size == 'md'"
+                  :aria-label="viewIconLabel"
+                  color="primary"
+                  label="View"
+                  outline
+                  size="sm"
+                  @onClick="handleViewClick(file)"
+                />
+              </div>
+              <div v-if="isEditing[index]" class="q-my-ba">
+                <UInputTextStd
+                  v-model="fileDisplayName[file.__key]"
+                  label="Edit file name"
+                  size="md"
+                />
+              </div>
+              <div
+                v-if="!isEditing[index] && size == 'sm'"
+                class="list-items edit-button row q-mt-ba"
+              >
+                <UBtnStd
+                  :aria-label="editIconLabel"
+                  color="primary"
+                  flat
+                  :full-width="true"
+                  label="Edit"
+                  size="md"
+                  @click="editFileName(index)"
+                />
+                <UBtnStd
+                  :aria-label="viewIconLabel"
+                  color="primary"
+                  :full-width="true"
+                  label="View File"
+                  :outline="true"
+                  size="md"
+                  @onClick="handleViewClick(file)"
+                />
+              </div>
+              <div v-if="isEditing[index]" class="list-items update-button row">
+                <UBtnStd
+                  color="primary"
+                  flat
+                  :full-width="true"
+                  label="Cancel"
+                  size="md"
+                  @click="cancelEdit({ index, file })"
+                />
+
+                <UBtnStd
+                  color="primary"
+                  :full-width="true"
+                  label="Update file name"
+                  size="md"
+                  @click="updateFileName({ scope, file, index })"
+                />
+              </div>
+            </q-card-section>
+            <q-card-section
+              v-if="file.__img && noThumbnails"
+              class="flex items-center"
+              thumbnail
+            >
+              <img :src="file.__img.src" />
+            </q-card-section>
+            <!--End--- When File  Uploaded on server --End -->
+          </q-card>
+        </div>
+      </template>
+    </q-uploader>
+  </div>
+</template>
+
+<style lang="sass">
+.u-uploader-container
+  .list-container
+    display: grid
+    place-items: center
+    gap: $xxs
+  .q-uploader
+    width: auto !important
+    max-height: unset !important
+  .uploader-list
+    background: $neutral-2
+    border-radius: $xs
+    box-shadow: 0px 0px 2px 0px rgba(16, 17, 20, 0.04)
+  .uploaded-container
+    padding: $sm
+  .list-items
+    justify-content: space-between
+    flex-wrap: nowrap
+    gap:$xs
+  .edit-button
+    gap:$ba
+  .update-button
+    gap:$sm
+  .list-size-sm
+    width: 21.75rem
+  .list-size-md
+    width: 100%
+  .title
+      color: $dark
+  .info
+    color: $neutral-9
+  .file-icon
+    font-size:$md
+  .q-uploader__header
+    padding: 0 !important
+    background-color: $neutral-2
+    .text-body-md
+      color: $dark !important
+  .q-uploader__list
+    min-height: auto !important
+    padding:0
+  .q-uploader__overlay
+    display: none !important
+  .progress-bar
+    width: 84% !important
+  .progress-bar-container
+      gap: $xs
+  .card-section
+    padding:0px
+  .q-uploader__dnd
+    background: $blue-1 !important
+    opacity: .8
+    border: 2px solid $blue-6
+    border-radius:$sm
+  .u-uploader
+    display: flex
+</style>

package/src/components/index.js

@@ -1,45 +1,83 @@
 // import BtnStd from "./BtnStd.vue";
-import UCheckboxStd from './core/UCheckboxStd.vue'
-import UBtnStd from './core/UBtnStd.vue'
-import UBtnToggle from './core/UBtnToggle.vue'
-import URadioStd from './core/URadioStd.vue'
-import UTabsStd from './core/UTabsStd.vue'
-import UTabBtnStd from './core/UTabBtnStd.vue'
-import UMultiSelectStd from './core/UMultiSelectStd.vue'
-import UTooltip from './core/UTooltip.vue'
-import UBannerStd from './core/UBannerStd.vue'
-import UToggleStd from './core/UToggleStd.vue'
-import USelectStd from './core/USelectStd.vue'
-import UTableStd from './core/UTableStd.vue'
 import UAvatar from './core/UAvatar.vue'
 import UAvatarGroup from './core/UAvatarGroup.vue'
 import UBadgeStd from './core/UBadgeStd.vue'
+import UBannerStd from './core/UBannerStd.vue'
+import UBreadCrumbs from './core/UBreadCrumbs.vue'
 import UBtnIcon from './core/UBtnIcon.vue'
+import UBtnStd from './core/UBtnStd.vue'
+import UBtnToggle from './core/UBtnToggle.vue'
+import UCheckboxStd from './core/UCheckboxStd.vue'
 import UChip from './core/UChip.vue'
+import UDate from './core/UDate.vue'
+import UDialogStd from './core/UDialogStd.vue'
+import UDrawer from './core/UDrawer.vue'
+import UInnerLoader from './core/UInnerLoader.vue'
+import UInputAddressLookup from './core/UInputAddressLookup.vue'
+import UInputPhoneStd from './core/UInputPhoneStd.vue'
 import UInputTextStd from './core/UInputTextStd.vue'
+import UInputTypeaheadAdvanceSearch from './core/UInputTypeaheadAdvanceSearch.vue'
+import UMenuButtonStd from './core/UMenuButtonStd.vue'
+import UMenuDropdown from './core/UMenuDropdown.vue'
+import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
+import UMenuItem from './core/UMenuItem.vue'
+import UMenuSearch from './core/UMenuSearch.vue'
+import UMultiSelectStd from './core/UMultiSelectStd.vue'
+import UPagination from './core/UPagination.vue'
 import URadioBtn from './core/URadioBtn.vue'
+import URadioStd from './core/URadioStd.vue'
+import USelectStd from './core/USelectStd.vue'
+import USheet from './core/USheet.vue'
+import UTabBtnStd from './core/UTabBtnStd.vue'
+import UTableStd from './core/UTableStd.vue'
+import UTabsStd from './core/UTabsStd.vue'
+import UToggleStd from './core/UToggleStd.vue'
+import UToolbar from './core/UToolbar/UToolbar.vue'
+import UTooltip from './core/UTooltip.vue'
+import UUploader from './core/UUploader.vue'
 
 import { useNotify } from '../composables/useNotify.js'
+import { useOverlayLoader } from '../composables/useOverlayLoader.js'
+import { useScreenType } from '../composables/useScreenType.js'
 
 export {
   UAvatar,
   UAvatarGroup,
   UBadgeStd,
+  UBannerStd,
+  UBreadCrumbs,
   UBtnIcon,
-  UChip,
-  UInputTextStd,
   UBtnStd,
   UBtnToggle,
   UCheckboxStd,
-  URadioStd,
-  UTooltip,
-  UToggleStd,
+  UChip,
+  UDate,
+  UDialogStd,
+  UDrawer,
+  UInnerLoader,
+  UInputAddressLookup,
+  UInputPhoneStd,
+  UInputTextStd,
+  UInputTypeaheadAdvanceSearch,
+  UMenuButtonStd,
+  UMenuDropdown,
+  UMenuDropdownAdvancedSearch,
+  UMenuItem,
+  UMenuSearch,
   UMultiSelectStd,
-  UTabsStd,
-  UTabBtnStd,
-  UBannerStd,
-  USelectStd,
+  UPagination,
   URadioBtn,
+  URadioStd,
+  USelectStd,
+  USheet,
+  UTabBtnStd,
   UTableStd,
+  UTabsStd,
+  UToggleStd,
+  UToolbar,
+  UTooltip,
+  UUploader,
   useNotify,
+  useOverlayLoader,
+  useScreenType,
 }

package/src/composables/useNotify.js

@@ -32,16 +32,20 @@ export const useNotify = () => {
    * it is chaing the custom icon with font awesome custom class
    * @param {*} icon
    */
-  const handleGetCustomIcon = (icon) => {
+
+  // Adding class to Notification element to make it customizable
+  const handleGetCustomIcon = (icon, randomId) => {
     setTimeout(() => {
-      const notifyContent = document.getElementsByClassName(
-        'q-notification__content'
+      let getNotificationElement = document.querySelector(
+        `.q-notification-elem-${randomId}`
       )
-      const notifyCustomIcon = document.getElementById('notify-custom-icon')
-      if (!notifyCustomIcon) {
-        const iconEleHTML = `<i class='${icon}' aria-label='Custom Icon' id='notify-custom-icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px' alt='Custom Icon Alt'></i>`
-        if (notifyContent.length) {
-          notifyContent[0].insertAdjacentHTML('afterbegin', iconEleHTML)
+      if (getNotificationElement) {
+        let childElement = getNotificationElement.querySelector(
+          `.q-notification__wrapper .q-notification__content`
+        )
+        if (childElement.childNodes.length == 1) {
+          const iconEleHTML = `<i class='${icon}' aria-label='Custom Icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px' alt='Custom Icon Alt'></i>`
+          childElement.insertAdjacentHTML('afterbegin', iconEleHTML)
         }
       }
     }, 100)
@@ -49,24 +53,20 @@ export const useNotify = () => {
 
   const notify = (props) => {
     if (props.label && props.type) {
+      let randomId = Math.floor(100000 + Math.random() * 900000)
       let notifyProps = {
         type: props.type === 'accent' ? 'negative' : props.type,
         message: props.label,
         caption: props.message,
         color: props.type,
         timeout: props.timeout,
-        classes: `u-notify u-type-${props.type}`,
+        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId}`,
         position: props.position,
         progress: props.progress,
-        icon: null,
+        icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,
         actions: handleGetActions(props),
       }
-      if (props.icon) {
-        notifyProps = {
-          ...notifyProps,
-          icon: handleGetCustomIcon(props.icon),
-        }
-      }
+
       $q.notify(notifyProps)
     } else {
       console.error(

package/src/composables/useOverlayLoader.js

@@ -0,0 +1,23 @@
+import { Loading, QSpinnerGears } from 'quasar'
+
+export const useOverlayLoader = () => {
+
+    const showLoader = (props = {}) => {
+
+    Loading.show({
+        backgroundColor: props?.backgroundColor,
+        customClass: props.customClass ? props.customClass : '',
+        message: props?.message,
+        messageColor: props.messageColor ? props.messageColor: 'dark',
+        spinner: props.spinner ? props.spinner : QSpinnerGears,
+        spinnerSize: props.spinnerSize ? props.spinnerSize : '6rem',
+        spinnerColor: props?.spinnerColor
+    })
+   }
+
+  const hideLoader = () =>{
+   Loading.hide()
+  }
+
+  return { showLoader, hideLoader }
+}