@usssa/component-library 1.0.0-alpha.10 → 1.0.0-alpha.100

package/src/components/core/UUploader.vue

@@ -0,0 +1,497 @@
+<script setup>
+import { ref } from 'vue'
+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 props = defineProps({
+  autoUpload: {
+    type: Boolean,
+    default: true,
+  },
+  noThumbnails: {
+    type: Boolean,
+    default: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  batch: {
+    type: Boolean,
+    default: false,
+  },
+  fileUploadUrl: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'sm',
+  },
+  removeIconLabel: {
+    type: String,
+    default: 'Remove File',
+  },
+  editIconLabel: {
+    type: String,
+    default: 'Edit File Name',
+  },
+  viewIconLabel: {
+    type: String,
+    default: 'view File Name',
+  },
+  listExternal: {
+    type: Boolean,
+    default: false,
+  },
+  selectFileBtnLabel: {
+    type: String,
+    default: 'Choose File',
+  },
+  description: {
+    type: String,
+    default: 'Drag and drop your file or select choose file.',
+  },
+  showUploadBtn: {
+    type: Boolean,
+    default: true,
+  },
+  fileNameLimit: {
+    type: Number,
+    default: 25,
+  },
+  fileIconColor: {
+    type: String,
+    default: 'primary',
+  },
+})
+
+const emit = defineEmits(['onUploadFactory', 'onViewFile', 'getFilesOnAdded'])
+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 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 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 upload = () => {
+  uploaderRef.value.upload()
+}
+
+defineExpose({ upload })
+</script>
+<template>
+  <div class="u-uploader-container">
+    <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"
+      :multiple="multiple"
+      :no-thumbnails="noThumbnails"
+      :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 src="../../assets/files.png" alt="Upload Files" />
+            <div class="text-body-md">
+              {{ description }}
+            </div>
+          </div>
+          <div class="list-items row">
+            <UBtnStd
+              class="q-mt-md q-mb-md"
+              color="primary"
+              size="lg"
+              :full-width="true"
+              :label="selectFileBtnLabel"
+              @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"
+              size="sm"
+              icon="cloud_upload"
+              color="primary"
+              flat
+              @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"
+        >
+          <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"
+                  size="sm"
+                  tabindex="0"
+                  :aria-label="removeIconLabel"
+                  @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"
+                  size="sm"
+                  tabindex="0"
+                  :aria-label="removeIconLabel"
+                  @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"
+                      self="center end"
+                      :description="file.displayName || file.name"
+                      :offset="[4, 4]"
+                    />
+
+                    {{
+                      fixStringLength(
+                        file.displayName || file.name,
+                        fileNameLimit
+                      )
+                    }}
+                  </span>
+                  <span class="text-body-xs info">
+                    Uploaded: {{ formatDate(file.uploaded_date) }}
+                  </span>
+                </div>
+
+                <UBtnIcon
+                  iconClass="fa-kit-duotone fa-pen-to-square"
+                  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"
+                  color="accent"
+                  size="md"
+                  tabindex="0"
+                  :aria-label="removeIconLabel"
+                  @click="removeFile({ scope, file, index })"
+                />
+
+                <UBtnStd
+                  color="primary"
+                  label="View"
+                  size="sm"
+                  outline
+                  :aria-label="viewIconLabel"
+                  @onClick="handleViewClick(file)"
+                  v-if="size == 'md'"
+                />
+              </div>
+              <div class="q-my-ba" v-if="isEditing[index]">
+                <UInputTextStd
+                  label="Edit file name"
+                  size="md"
+                  v-model="fileDisplayName[file.__key]"
+                />
+              </div>
+              <div
+                v-if="!isEditing[index] && size == 'sm'"
+                class="list-items edit-button row q-mt-ba"
+              >
+                <UBtnStd
+                  color="primary"
+                  label="Edit"
+                  size="md"
+                  flat
+                  :aria-label="editIconLabel"
+                  :full-width="true"
+                  @click="editFileName(index)"
+                />
+                <UBtnStd
+                  color="primary"
+                  label="View File"
+                  size="md"
+                  :full-width="true"
+                  :outline="true"
+                  :aria-label="viewIconLabel"
+                  @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"
+                  @click="cancelEdit({ index, file })"
+                />
+
+                <UBtnStd
+                  color="primary"
+                  label="Update file name"
+                  size="md"
+                  :full-width="true"
+                  @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,6 +1,7 @@
 // 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'
@@ -9,16 +10,66 @@ 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 UBtnIcon from './core/UBtnIcon.vue'
+import UChip from './core/UChip.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 UDialogStd from './core/UDialogStd.vue'
+import URadioBtn from './core/URadioBtn.vue'
+import UInnerLoader from './core/UInnerLoader.vue'
+import UMenuItem from './core/UMenuItem.vue'
+import UDrawer from './core/UDrawer.vue'
+import UMenuDropdown from './core/UMenuDropdown.vue'
+import UMenuButtonStd from './core/UMenuButtonStd.vue'
+import UBreadCrumbs from './core/UBreadCrumbs.vue'
+import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
+import UMenuSearch from './core/UMenuSearch.vue'
+import UToolbar from './core/UToolbar.vue'
+
+import { useNotify } from '../composables/useNotify.js'
+import { useOverlayLoader } from '../composables/useOverlayLoader.js'
+import UUploader from './core/UUploader.vue'
 
 export {
+  useOverlayLoader,
+  useNotify,
+  UAvatar,
+  UAvatarGroup,
+  UBadgeStd,
+  UBannerStd,
+  UBreadCrumbs,
+  UBtnIcon,
   UBtnStd,
+  UBtnToggle,
   UCheckboxStd,
-  URadioStd,
-  UTooltip,
-  UToggleStd,
+  UChip,
+  UDialogStd,
+  UDrawer,
+  UInnerLoader,
+  UInputAddressLookup,
+  UInputPhoneStd,
+  UInputTextStd,
+  UInputTypeaheadAdvanceSearch,
+  UMenuButtonStd,
+  UMenuDropdown,
+  UMenuItem,
   UMultiSelectStd,
-  UTabsStd,
-  UTabBtnStd,
-  UBannerStd,
+  URadioBtn,
+  URadioStd,
   USelectStd,
+  UTabBtnStd,
+  UTableStd,
+  UTabsStd,
+  UToggleStd,
+  UTooltip,
+  UUploader,
+  UMenuDropdownAdvancedSearch,
+  UMenuSearch,
+  UToolbar,
 }

package/src/composables/useNotify.js

@@ -0,0 +1,79 @@
+import { useQuasar } from 'quasar'
+
+export const useNotify = () => {
+  const $q = useQuasar()
+
+  const handleGetActions = (data) => {
+    if (data.actionLabel) {
+      return [
+        {
+          label: data.actionLabel,
+          color: 'white',
+          noCaps: true,
+          unelevated: true,
+          class: 'u-notify-action-button',
+          handler: data.handler,
+        },
+      ]
+    } else {
+      return [
+        {
+          round: true,
+          color: 'white',
+          flat: true,
+          class: `u-notify-action-icon u-action-icon-${data.type}`,
+          icon: 'close',
+          handler: data.handler,
+        },
+      ]
+    }
+  }
+  /**
+   * it is chaing the custom icon with font awesome custom class
+   * @param {*} icon
+   */
+
+  // Adding class to Notification element to make it customizable
+  const handleGetCustomIcon = (icon, randomId) => {
+    setTimeout(() => {
+      let getNotificationElement = document.querySelector(
+        `.q-notification-elem-${randomId}`
+      )
+      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)
+  }
+
+  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} q-notification-elem-${randomId}`,
+        position: props.position,
+        progress: props.progress,
+        icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,
+        actions: handleGetActions(props),
+      }
+
+      $q.notify(notifyProps)
+    } else {
+      console.error(
+        'Error: Failed prop types: The props `label` and `type` are marked as required in Notify, but its values are `undefined'
+      )
+    }
+  }
+
+  return { notify }
+}

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 }
+}