@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.211

package/src/components/core/UMultiSelectStd.vue

@@ -1,42 +1,111 @@
 <script setup>
-import { ref } from 'vue'
-import UTooltip from './UTooltip.vue'
+import { computed, nextTick, ref, 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',
+  'handleTabChange',
+  'updateButtonToggle',
+])
+
+const options = defineModel('options', {
+  type: Array,
+  default: [],
+})
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
 
 const props = defineProps({
-  modelValue: {
-    type: [Array, String, null],
-    required: true,
+  applyLabel: {
+    type: String,
+    default: 'Apply',
+  },
+  beforeOptions: {
+    type: Array,
+  },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
+  },
+  caption: {
+    type: String,
+    default: '',
   },
   color: {
     type: String,
     default: 'neutral-7',
   },
-  hintText: {
+  dataTestId: {
     type: String,
+    default: 'multi-select',
+  },
+  filterFn: {
+    type: Function,
+    required: false,
   },
   hintIcon: {
     type: String,
     default: 'fa-kit-duotone fa-triangle-exclamation',
   },
+  hintText: {
+    type: String,
+  },
+  isBeforeOptions: {
+    type: Boolean,
+    default: false,
+  },
   isRequired: {
     type: Boolean,
     default: false,
   },
+  isTabBeforeOptions: {
+    type: Boolean,
+    default: true,
+  },
   label: {
     type: String,
-    default: 'Label',
   },
   leftIcon: {
     type: String,
   },
-  options: {
-    type: Array,
+  modelValue: {
+    type: [Array, String, null],
     required: true,
   },
+  multiSelect: {
+    type: Boolean,
+    default: true,
+  },
+  noSearchText: {
+    type: String,
+    required: false,
+  },
+  optionLabel: {
+    type: String,
+    default: 'label',
+  },
+  optionValue: {
+    type: String,
+    default: 'value',
+  },
   placeholder: {
     type: String,
-    default: 'Select',
+    default: '',
+  },
+  showSheetInput: {
+    type: Boolean,
+    default: true,
   },
   size: {
     type: String,
@@ -50,77 +119,256 @@ const props = defineProps({
     type: Function,
     required: true,
   },
-  filterFn: {
-    type: Function,
-    required: false,
-  },
-  useInput: {
+  useCustomComponent: {
     type: Boolean,
-    required: false,
+    default: false,
   },
-  multiSelect: {
+  useInput: {
     type: Boolean,
-    default: true,
-  },
-  noSearchText: {
-    type: String,
     required: false,
   },
-  optionValue: {
-    type: String,
-    default: 'value',
-  },
-  optionLabel: {
-    type: String,
-    default: 'label',
-  },
 })
 
+const $screen = useScreenType()
+let cloneOptions = JSON.parse(JSON.stringify(options.value))
+
 const chipModelVal = ref(true)
+const dialogs = ref([])
+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(() => {
+      options.value = cloneOptions
+    })
+    return
+  }
+
+  const typeValue = val.toLowerCase()
+  update(() => {
+    options.value = cloneOptions.filter((option) =>
+      option.label.toLowerCase().includes(typeValue)
+    )
+  })
+}
+
+const handleApply = () => {
+  dialogs.value[0].open = false
+  emit('update:modelValue', selectedItems.value)
+}
+
+const handleClick = (event) => {
+  if (!$screen.value.isMobile) return
+
+  // Prevent default behavior in mobile screen
+  event.preventDefault()
+  event.stopPropagation()
+  nextTick(() => {
+    selectRef.value.hidePopup()
+  })
+
+  const isSelectElement = event.target.closest('.q-field__control')
+
+  if (props.useCustomComponent && isSelectElement) {
+    // Emit click event for handling in parent component
+    emit('onClick')
+    return
+  }
+  if (isSelectElement) {
+    dialogs.value = [
+      {
+        open: true,
+        height: 350,
+        persistent: true,
+        transitionDuration: 500,
+        position: 'bottom',
+      },
+    ]
+    selectedItems.value = props.modelValue
+  }
+}
+
+const handleClose = () => {
+  dialogs.value[0].open = false
+  selectedItems.value = props.modelValue.length ? props.modelValue : []
+  options.value = cloneOptions
+}
+
+// adding scroll if highlighted menu is not visible to user
+const handleKeydown = (event) => {
+  if (event.key === 'Enter') {
+    handleClick(event)
+    return
+  }
+
+  // Only handle arrow keys for scrolling
+  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+    nextTick(() => {
+      scrollToFocusedOption()
+    })
+  }
+}
+
+const handleSheetItemClick = (val) => {
+  const exists = selectedItems.value.find((item) => item.value === val.value)
+
+  if (!exists) {
+    selectedItems.value = [...selectedItems.value, val]
+  } else {
+    selectedItems.value = selectedItems.value.filter(
+      (item) => item.value !== val.value
+    )
+  }
+}
+
+const handleSheetItemRemove = (item) => {
+  selectedItems.value = selectedItems.value.filter(
+    (option) => option.value !== item.value
+  )
+}
+
+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
+}
+
+const removeItems = (item) => {
+  selectedItems.value = selectedItems.value.filter(
+    (option) => option.value !== item.value
+  )
+}
+
+const scrollToFocusedOption = () => {
+  requestAnimationFrame(() => {
+    if (!selectRef.value) return
+
+    const selectElement = selectRef.value.$el
+    const dropdownContainer =
+      selectElement?.querySelector('.u-option-menu') ||
+      document.querySelector('.u-option-menu')
+
+    if (!dropdownContainer) return
+
+    const focusedElement = dropdownContainer.querySelector(
+      '.q-manual-focusable--focused'
+    )
+
+    if (focusedElement) {
+      const itemRect = focusedElement.getBoundingClientRect()
+      const containerRect = dropdownContainer.getBoundingClientRect()
+
+      const isVisible =
+        itemRect.top >= containerRect.top &&
+        itemRect.bottom <= containerRect.bottom
+
+      if (!isVisible) {
+        focusedElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }
+  })
+}
+
+const updateButtonToggle = () => {
+  emit('updateButtonToggle')
+}
+
+const updateVal = (val) => {
+  props.updateFn(val)
+  placeholderText.value = val.length ? '' : props.placeholder
+}
+
+watch(
+  () => dialogs.value[0]?.open,
+  () => {
+    options.value = cloneOptions
+  }
+)
+
+watch(
+  () => props.placeholder,
+  (value) => {
+    placeholderText.value = value
+  }
+)
+
+watch(
+  () => $screen.value,
+  (newValue) => {
+    dialogs.value = []
+    if (newValue) {
+      selectedItems.value = [...props.modelValue]
+    }
+  }
+)
+
+watch(selectedTab, () => {
+  cloneOptions = JSON.parse(JSON.stringify(options.value))
+})
 </script>
 
 <template>
-  <div class="q-gutter-xs">
-    <label for="select" class="row items-center">
+  <div class="q-gutter-xs" :dataTestId="dataTestId" @click="handleClick">
+    <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
-        {{ label }}
-        <span class="text-red-5 q-ml-xs" v-if="isRequired">*</span>
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 q-ml-xs">*</span>
       </div>
 
       <q-icon
-        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
-        size="1rem"
-        color="neutral-9"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         aria-hidden="true"
+        color="neutral-9"
+        size="1rem"
       >
         <UTooltip
-          :description="toolTipText"
           anchor="top middle"
+          :description="toolTipText"
           self="bottom middle"
         />
       </q-icon>
     </label>
     <q-select
-      class="u-multi-select"
+      v-bind="$attrs"
+      :class="`u-multi-select field-${size}`"
+      behavior="menu"
+      bottom-slots
+      :color="color"
+      hide-bottom-space
+      :hide-dropdown-icon="$screen.isMobile ? true : false"
       id="multi-select"
-      :class="`field-${size}`"
+      :menu-offset="[0, 5]"
       :modelValue="modelValue"
-      :color="color"
       multiple
-      :options="options"
-      :use-input="useInput"
       :option-label="optionLabel"
       :option-value="optionValue"
-      :placeholder="placeholder"
-      bottom-slots
-      outlined
-      hide-bottom-space
-      use-chips
-      :menu-offset="[0, 5]"
+      :options="options"
       options-selected-class="primary bg-blue-1"
+      outlined
+      :placeholder="modelValue.length ? '' : placeholderText"
       popup-content-class="u-option-menu"
-      v-bind="$attrs"
+      ref="selectRef"
+      use-chips
+      :use-input="useInput"
       @add="
         (details) =>
           updateFn({
@@ -128,6 +376,9 @@ const chipModelVal = ref(true)
             multiSelect,
           })
       "
+      @click.prevent="handleClick"
+      @filter="filterFn"
+      @keydown="handleKeydown"
       @remove="
         (details) =>
           updateFn({
@@ -135,12 +386,30 @@ const chipModelVal = ref(true)
             ...details,
           })
       "
-      @update:model-value="(val) => updateFn(val)"
-      @filter="filterFn"
+      @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>
@@ -150,9 +419,17 @@ const chipModelVal = ref(true)
         <q-icon :class="leftIcon" size="1rem" />
       </template>
 
+      <template v-if="$screen.isMobile" v-slot:append>
+        <q-icon
+          class="cursor-pointer"
+          name="arrow_drop_down"
+          @click.stop="handleClick"
+        />
+      </template>
+
       <template v-if="hintText" v-slot:hint>
         <div class="row no-wrap items-center">
-          <q-icon :class="hintIcon" size="1rem" v-if="hintIcon" />
+          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem" />
 
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
@@ -160,9 +437,31 @@ const chipModelVal = ref(true)
         </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 class="items-center u-custom-options" v-bind="scope.itemProps">
-          <div class="q-pr-xs" v-if="scope.opt.icon">
+        <q-item
+          v-bind="scope.itemProps"
+          v-if="!$screen.isMobile && !useCustomComponent"
+          class="items-center u-custom-options"
+          :key="scope.opt.value"
+        >
+          <div v-if="scope.opt.icon" class="q-pr-xs">
             <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
           </div>
 
@@ -170,7 +469,7 @@ const chipModelVal = ref(true)
             <q-item-label class="text-body-sm">
               {{ scope.opt.label }}
             </q-item-label>
-            <q-item-label caption v-if="scope.opt.description">
+            <q-item-label v-if="scope.opt.description" caption>
               {{ scope.opt.description }}
             </q-item-label>
           </q-item-section>
@@ -188,14 +487,121 @@ const chipModelVal = ref(true)
         <UChip
           v-model="chipModelVal"
           :chipLabel="scope.opt.label"
+          dense
           :removable="true"
-          @remove="scope.removeAtIndex(scope.index)"
           :tabindex="scope.tabindex"
-          dense
+          @remove="scope.removeAtIndex(scope.index)"
         />
       </template>
     </q-select>
   </div>
+  <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
+        v-if="showSheetInput"
+        :model-value="selectedItems"
+        :class="`u-multi-select field-md q-mt-ba`"
+        behavior="menu"
+        multiple
+        outlined
+        :placeholder="selectedItems.length ? '' : placeholderText"
+        use-chips
+        :use-input="useInput"
+        @click="() => null"
+        @filter="filterSheetOptions"
+        @remove="handleSheetItemRemove"
+        @update:model-value="handleSheetSelectionUpdate"
+      >
+        <template v-if="leftIcon" v-slot:prepend>
+          <q-icon :class="leftIcon" size="1rem" />
+        </template>
+        <template v-slot:selected-item="scope">
+          <UChip
+            v-model="chipModelVal"
+            :avatar="scope.opt.img"
+            :chipLabel="scope.opt.label"
+            dense
+            :removable="true"
+            :tabindex="scope.tabindex"
+            @remove="removeItems(scope.opt)"
+          />
+        </template>
+      </q-select>
+    </template>
+
+    <template #content>
+      <template v-if="options.length > 0">
+        <template v-for="(item, index) in options" :key="index">
+          <UMenuItem
+            :destructive="item.destructive"
+            :disable="item.disable"
+            :hide="item.hide"
+            :index="index"
+            :inSheet="true"
+            :label="item.label"
+            labelStyle="text-caption-lg"
+            :leftIcon="item.icon"
+            :positive="item.positive"
+            :rightIcon="item.rightIcon"
+            :selected="isSelected(item.value)"
+            @onClick="handleSheetItemClick(item, index)"
+          >
+            <template #trailing_slot>
+              <slot name="trailing_slot">
+                <q-icon
+                  v-if="isSelected(item.value)"
+                  class="fa-kit-duotone fa-circle-check"
+                  color="primary"
+                  size="1rem"
+                />
+              </slot>
+            </template>
+          </UMenuItem>
+        </template>
+      </template>
+      <template v-else>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ noSearchText }}
+          </q-item-section>
+        </q-item>
+      </template>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        :label="cancelLabel"
+        outline
+        size="md"
+        @onClick="handleClose"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        :label="applyLabel"
+        size="md"
+        @onClick="handleApply"
+      />
+    </template>
+  </USheet>
 </template>
 
 <style lang="sass">
@@ -204,6 +610,7 @@ const chipModelVal = ref(true)
   &.q-field--auto-height .q-field__native
     min-height: $md
     align-items: center
+    padding: 0px
 
   &.q-field--outlined .q-field__control
     border-radius: $xs
@@ -235,7 +642,7 @@ const chipModelVal = ref(true)
     box-shadow : 0 0 0 2px $primary-transparent
 
   .q-field__bottom
-    padding: 4px 0 0 0
+    padding: $xxs 0 0 0
 
   .q-chip__content
     color: $neutral-9
@@ -243,10 +650,13 @@ const chipModelVal = ref(true)
   .q-field__prepend
     padding-right: $xs
 
+  .q-chip
+    padding-left: $xs !important
+
 .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
@@ -256,4 +666,34 @@ const chipModelVal = ref(true)
   border-radius: $xxs
   padding: $xs
   min-height: $lg
+
+.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
+
+.options-dialog
+  .sheet-card-wrapper .q-card__section .q-item
+    padding:$ba $ba !important
+    margin-bottom: $xs !important
+    border-radius: $sm !important
+    align-items: flex-start !important
+    .label
+      line-height: $ms !important
+    .q-icon
+      font-size: $ms !important
+    .q-focus-helper
+      display: none
 </style>