@usssa/component-library 1.0.0-alpha.171 → 1.0.0-alpha.173

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.171
+# Component Library v1.0.0-alpha.173
 
 **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.171",
+  "version": "1.0.0-alpha.173",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UModal.vue

@@ -56,16 +56,15 @@ const dialogMaxHeight = ref(null)
 const dialogRef = ref(true)
 const scrollableMarginHeight = ref(null)
 
+const className = computed(() => {
+  return props.class ? props.class : 'filter-dialog-modal'
+})
 const dialogStyle = computed(() => ({
   '--customSize': props.customSize,
 }))
 const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
-
-const className = computed(() => {
-  return props.class ? props.class: 'filter-dialog-modal'
-})
 const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
 const isSmallWidthDevices = computed(() => $q.screen.width < 400)
@@ -119,37 +118,44 @@ const getContentBottomSpace = () => {
 }
 
 const getDialogHeaderheight = () => {
+  currentDialogHeight.value =
+    props.showActionButtons && props.showSecondaryButtons
+      ? $q.screen.height - 80
+      : props.showActionButtons || props.showSecondaryButtons
+      ? !isTablet.value
+        ? $q.screen.height - 50 + 'px !important'
+        : $q.screen.height / 2 - 50 + 'px !important'
+      : $q.screen.height - 10
+
   setTimeout(() => {
     const headingWrapper =
       document.getElementsByClassName('no-heading-section')[0]
     if (headingWrapper) {
       scrollableMarginHeight.value = headingWrapper.clientHeight
     }
-  }, 100)
-  setTimeout(() => {
+
     // dynamically adding height by removing toolbar height of 50px
     const dialogWrapper = document.getElementsByClassName('dialog-wrapper')[0]
     if (dialogWrapper) {
       dialogWrapper?.setAttribute(
         'style',
-        `max-height: ${ !isTablet.value ? $q.screen.height - 50+ 'px !important' : ($q.screen.height/2)- 50+ 'px !important'}`
+        `max-height: ${
+          !isTablet.value
+            ? $q.screen.height - 80 + 'px !important'
+            : $q.screen.height / 2 - 50 + 'px !important'
+        }`
       )
     }
+  },50)
 
-    currentDialogHeight.value =
-      props.showActionButtons && props.showSecondaryButtons
-        ? $q.screen.height - 80
-        : props.showActionButtons || props.showSecondaryButtons
-        ?  !isTablet.value ? $q.screen.height - 50+ 'px !important' : ($q.screen.height/2)- 50+ 'px !important'
-        : $q.screen.height - 10
-
+  setTimeout(() => {
     dialogMaxHeight.value =
       props.showActionButtons && props.showSecondaryButtons
         ? $q.screen.height - 80
         : props.showActionButtons || props.showSecondaryButtons
         ? $q.screen.height - 50
         : $q.screen.height - 10
-  }, 200)
+  }, 100)
 }
 
 const handleBackClick = () => {
@@ -252,7 +258,9 @@ watch(
   <q-dialog
     v-bind="$attrs"
     v-model="model"
-    :class="`filter-dialog-${isMobile ? 'full' : (isTablet ? 'tab' : size )} filter-dialog ${className}`"
+    :class="`filter-dialog-${
+      isMobile ? 'full' : isTablet ? 'tab' : size
+    } filter-dialog ${className}`"
     :dataTestId="dataTestId"
     full-width
     no-backdrop-dismiss
@@ -343,8 +351,8 @@ watch(
         :class="[
           ` main-content-dialog scroll q-px-ba${
             isMobile ? ' scrollable-content' : ''
-    } `,
-          { mobile: isMobile, desktop: isDesktop ,tablet: isTablet },
+          } `,
+          { mobile: isMobile, desktop: isDesktop, tablet: isTablet },
         ]"
         :style="{
           'margin-top': `${

package/src/components/core/UMultiSelectStd.vue

@@ -1,14 +1,24 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, nextTick, watch } from 'vue'
 import UBtnStd from './UBtnStd.vue'
+import UBtnToggle from './UBtnToggle.vue'
 import UChip from './UChip.vue'
 import UMenuItem from './UMenuItem.vue'
 import USheet from './USheet.vue'
+import UTabBtnStd from './UTabBtnStd.vue'
 import UTooltip from './UTooltip.vue'
 import { useScreenType } from '../../composables/useScreenType'
 
-const emit = defineEmits(['update:modelValue', 'onClick'])
+const emit = defineEmits([
+  'update:modelValue',
+  'onClick',
+  'handleTabChange',
+  'updateButtonToggle',
+])
 const props = defineProps({
+  beforeOptions: {
+    type: Array,
+  },
   caption: {
     type: String,
     default: '',
@@ -32,10 +42,18 @@ const props = defineProps({
   hintText: {
     type: String,
   },
+  isBeforeOptions: {
+    type: Boolean,
+    default: false,
+  },
   isRequired: {
     type: Boolean,
     default: false,
   },
+  isTabBeforeOptions: {
+    type: Boolean,
+    default: true,
+  },
   label: {
     type: String,
   },
@@ -58,10 +76,6 @@ const props = defineProps({
     type: String,
     default: 'label',
   },
-  options: {
-    type: Array,
-    required: true,
-  },
   optionValue: {
     type: String,
     default: 'value',
@@ -92,27 +106,39 @@ const props = defineProps({
   },
 })
 
+const options = defineModel('options', {
+  type: Array,
+  default: [],
+})
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
 const $screen = useScreenType()
 
+const cloneOptions = JSON.parse(JSON.stringify(options.value))
+
 const chipModelVal = ref(true)
 const dialogs = ref([])
-const filterOptions = ref([...props.options])
 const placeholderText = ref(props.placeholder)
 const selectedItems = ref([...props.modelValue])
+const selectRef = ref(null)
 
 const sheetHeading = computed(() => props.label)
 
 const filterSheetOptions = (val, update) => {
   if (val === '') {
     update(() => {
-      filterOptions.value = [...props.options]
+      options.value = cloneOptions
     })
     return
   }
 
   const typeValue = val.toLowerCase()
   update(() => {
-    filterOptions.value = props.options.filter((option) =>
+    options.value = options.value.filter((option) =>
       option.label.toLowerCase().includes(typeValue)
     )
   })
@@ -133,7 +159,7 @@ const handleClick = (event) => {
     emit('onClick')
     return
   }
- if ($screen.value.isMobile && isSelectElement) {
+  if ($screen.value.isMobile && isSelectElement) {
     event.stopPropagation()
 
     dialogs.value = [
@@ -176,6 +202,13 @@ const handleSheetSelectionUpdate = (val) => {
   selectedItems.value = val
 }
 
+const handleTabChange = (val) => {
+  nextTick(() => {
+    selectRef.value?.focus()
+  })
+  emit('handleTabChange', val)
+}
+
 const isSelected = (value) => {
   let getItems = selectedItems.value.filter((e) => e.value === value)
   return getItems.length ? true : false
@@ -187,6 +220,10 @@ const removeItems = (item) => {
   )
 }
 
+const updateButtonToggle = () => {
+  emit('updateButtonToggle')
+}
+
 const updateVal = (val) => {
   props.updateFn(val)
   placeholderText.value = val.length ? '' : props.placeholder
@@ -201,6 +238,7 @@ watch(
 watch(
   () => $screen.value,
   (newValue) => {
+    dialogs.value = []
     if (newValue) {
       selectedItems.value = [...props.modelValue]
     }
@@ -249,6 +287,7 @@ watch(
       outlined
       :placeholder="modelValue.length ? '' : placeholderText"
       popup-content-class="u-option-menu"
+      ref="selectRef"
       use-chips
       :use-input="useInput"
       @add="
@@ -270,8 +309,27 @@ watch(
       @update:model-value="(val) => updateVal(val)"
     >
       <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
+        <q-item :class="[{ 'no-result-container': isBeforeOptions }]">
+          <div v-if="isBeforeOptions">
+            <div
+              v-if="isTabBeforeOptions"
+              class="tab-container q-mt-sm q-mx-xs"
+            >
+              <UTabBtnStd
+                v-model:selectedTab="selectedTab"
+                :buttonTabsOptions="beforeOptions"
+                size="sm"
+                @on-tab-click="(val) => handleTabChange(val)"
+              />
+            </div>
+            <slot v-else name="before-options" />
+          </div>
+          <q-item-section
+            :class="[
+              'text-grey',
+              { 'q-mt-xs q-mx-sm q-mb-xs': isBeforeOptions },
+            ]"
+          >
             {{ noSearchText }}
           </q-item-section>
         </q-item>
@@ -299,6 +357,23 @@ watch(
         </div>
       </template>
 
+      <template v-slot:before-options>
+        <div v-if="isBeforeOptions">
+          <div
+            v-if="isTabBeforeOptions"
+            class="tab-container q-mx-xs q-mt-sm q-mb-xs"
+          >
+            <UTabBtnStd
+              v-model:selectedTab="selectedTab"
+              :buttonTabsOptions="beforeOptions"
+              size="sm"
+              @on-tab-click="(val) => handleTabChange(val)"
+            />
+          </div>
+          <slot v-else name="before-options" />
+        </div>
+      </template>
+
       <template v-slot:option="scope">
         <q-item
           v-bind="scope.itemProps"
@@ -342,11 +417,22 @@ watch(
   <USheet
     v-if="$screen.isMobile && !useCustomComponent"
     v-model:dialogs="dialogs"
+    dialog-class="options-dialog"
     :heading="sheetHeading"
     :heading-caption="caption"
     :show-action-buttons="true"
   >
     <template #header>
+      <div v-if="isBeforeOptions" class="q-mt-xs">
+        <UBtnToggle
+          v-if="isTabBeforeOptions"
+          v-model="selectedTab"
+          :options="beforeOptions"
+          size="md"
+          @update:model-value="updateButtonToggle"
+        />
+        <slot v-else name="before-options" />
+      </div>
       <q-select
         :model-value="selectedItems"
         :class="`u-multi-select field-md q-mt-ba`"
@@ -367,6 +453,7 @@ watch(
         <template v-slot:selected-item="scope">
           <UChip
             v-model="chipModelVal"
+            :avatar="scope.opt.img"
             :chipLabel="scope.opt.label"
             dense
             :removable="true"
@@ -376,9 +463,10 @@ watch(
         </template>
       </q-select>
     </template>
+
     <template #content>
-      <template v-if="filterOptions.length > 0">
-        <template v-for="(item, index) in filterOptions" :key="index">
+      <template v-if="options.length > 0">
+        <template v-for="(item, index) in options" :key="index">
           <UMenuItem
             iconClass=""
             :destructive="item.destructive"
@@ -479,7 +567,7 @@ watch(
 .u-option-menu
   border-radius: $xs
   box-shadow: $shadow-2
-  max-height: 11.25rem !important
+  max-height: 12.25rem !important
   width: 18rem
   overflow-y: auto
   scrollbar-width: none
@@ -492,4 +580,18 @@ watch(
 
 .sheet-card-wrapper .q-select__dropdown-icon
   display: none !important
+
+.options-dialog
+  .heading-row
+    margin-bottom: $xs
+  .main-content-dialog
+    padding-top: $xs
+
+.tab-container
+  .q-tabs__content--align-center
+    justify-content: flex-start
+
+.no-result-container
+  display:  block
+  padding: 0px
 </style>