@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UMultiSelectStd.vue

@@ -0,0 +1,699 @@
+<script setup>
+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({
+  applyLabel: {
+    type: String,
+    default: 'Apply',
+  },
+  beforeOptions: {
+    type: Array,
+  },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
+  },
+  caption: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: 'neutral-7',
+  },
+  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,
+  },
+  leftIcon: {
+    type: String,
+  },
+  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: '',
+  },
+  showSheetInput: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  updateFn: {
+    type: Function,
+    required: true,
+  },
+  useCustomComponent: {
+    type: Boolean,
+    default: false,
+  },
+  useInput: {
+    type: Boolean,
+    required: false,
+  },
+})
+
+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" :dataTestId="dataTestId" @click="handleClick">
+    <label class="row items-center" for="select">
+      <div class="u-select-label text-body-sm">
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 q-ml-xs">*</span>
+      </div>
+
+      <q-icon
+        v-if="toolTipText"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
+        aria-hidden="true"
+        color="neutral-9"
+        size="1rem"
+      >
+        <UTooltip
+          anchor="top middle"
+          :description="toolTipText"
+          self="bottom middle"
+        />
+      </q-icon>
+    </label>
+    <q-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"
+      :menu-offset="[0, 5]"
+      :modelValue="modelValue"
+      multiple
+      :option-label="optionLabel"
+      :option-value="optionValue"
+      :options="options"
+      options-selected-class="primary bg-blue-1"
+      outlined
+      :placeholder="modelValue.length ? '' : placeholderText"
+      popup-content-class="u-option-menu"
+      ref="selectRef"
+      use-chips
+      :use-input="useInput"
+      @add="
+        (details) =>
+          updateFn({
+            ...details,
+            multiSelect,
+          })
+      "
+      @click.prevent="handleClick"
+      @filter="filterFn"
+      @keydown="handleKeydown"
+      @remove="
+        (details) =>
+          updateFn({
+            remove: true,
+            ...details,
+          })
+      "
+      @update:model-value="(val) => updateVal(val)"
+    >
+      <template v-slot:no-option>
+        <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>
+      </template>
+
+      <template v-if="leftIcon" v-slot:prepend>
+        <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 v-if="hintIcon" :class="hintIcon" size="1rem" />
+
+          <div class="q-mx-xxs text-body-xs">
+            {{ hintText }}
+          </div>
+        </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"
+          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>
+
+          <q-item-section>
+            <q-item-label class="text-body-sm">
+              {{ scope.opt.label }}
+            </q-item-label>
+            <q-item-label v-if="scope.opt.description" caption>
+              {{ scope.opt.description }}
+            </q-item-label>
+          </q-item-section>
+
+          <q-item-section v-if="scope.selected" side>
+            <q-icon
+              class="fa-kit-duotone fa-circle-check"
+              color="primary"
+              size="1rem"
+            />
+          </q-item-section>
+        </q-item>
+      </template>
+      <template v-slot:selected-item="scope">
+        <UChip
+          v-model="chipModelVal"
+          :chipLabel="scope.opt.label"
+          dense
+          :removable="true"
+          :tabindex="scope.tabindex"
+          @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">
+.u-multi-select
+  &.q-field--auto-height .q-field__control,
+  &.q-field--auto-height .q-field__native
+    min-height: $md
+    align-items: center
+    padding: 0px
+
+  &.q-field--outlined .q-field__control
+    border-radius: $xs
+    padding: 0 $xs
+
+    &::before
+      background: white
+      border: 1.5px solid $neutral-4
+
+  &.field-sm
+    .q-field__marginal
+      height: $md
+
+  &.field-md
+    .q-field__marginal
+      height: $lg
+
+  &.field-lg
+    .q-field__marginal
+      height: $xl
+
+  &:hover .q-field__control::before
+    border: 1.5px solid $primary
+
+  &.q-field--with-bottom
+    padding-bottom: 0
+
+  .q-field__control:focus-within
+    box-shadow : 0 0 0 2px $primary-transparent
+
+  .q-field__bottom
+    padding: $xxs 0 0 0
+
+  .q-chip__content
+    color: $neutral-9
+
+  .q-field__prepend
+    padding-right: $xs
+
+  .q-chip
+    padding-left: $xs !important
+
+.u-option-menu
+  border-radius: $xs
+  box-shadow: $shadow-2
+  max-height: 12.25rem !important
+  width: 18rem
+  overflow-y: auto
+  scrollbar-width: none
+
+.u-custom-options
+  margin: $xxs
+  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>