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

package/src/components/core/USelectStd.vue

@@ -1,129 +1,329 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UMenuItem from './UMenuItem.vue'
+import USheet from './USheet.vue'
 import UTooltip from './UTooltip.vue'
 
+const emit = defineEmits(['update:modelValue'])
+
 const props = defineProps({
-  label: {
+  applyLabel: {
     type: String,
+    default: 'Apply',
   },
-  modelValue: {
-    type: [String, Number],
-    requried: true,
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
   },
-  options: {
-    type: Array,
-    required: true,
+  caption: {
+    type: String,
+    default: '',
   },
-  optionValue: {
+  color: {
     type: String,
+    default: 'neutral-7',
   },
-  optionLabel: {
+  closeIconLabel: {
+    type: String,
+    default: 'Close Icon',
+  },
+  dataTestId: {
+    type: String,
+    default: 'select-std',
+  },
+  disableAvatar: {
+    type: Boolean,
+    default: true,
+  },
+  filterFn: {
+    type: Function,
+    required: false,
+  },
+  hintIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-triangle-exclamation',
+  },
+  hintText: {
     type: String,
   },
   isRequired: {
     type: Boolean,
     default: false,
   },
-  toolTipText: {
+  label: {
     type: String,
   },
   leftIcon: {
     type: String,
   },
-  hintText: {
+  modelValue: {
+    type: [String, Number],
+    requried: true,
+  },
+  noSearchText: {
     type: String,
+    required: false,
   },
-  hintIcon: {
+  optionLabel: {
     type: String,
-    default: 'fa-kit-duotone fa-triangle-exclamation',
+  },
+  optionValue: {
+    type: String,
+  },
+  options: {
+    type: Array,
+    required: true,
   },
   placeholder: {
     type: String,
     default: 'Select',
   },
-  useInput: {
+  popupClass: {
+    type: String,
+    default: '',
+  },
+  readonly: {
     type: Boolean,
-    required: false,
+    default: false,
+  },
+  sheetLabel: {
+    type: String,
+    default: '',
+  },
+  showErrorIcon: {
+    type: Boolean,
+    default: false,
   },
   size: {
     type: String,
     default: 'md',
     validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  noSearchText: {
+  toolTipText: {
     type: String,
-    required: false,
   },
-  filterFn: {
-    type: Function,
+  useInput: {
+    type: Boolean,
     required: false,
   },
-  color: {
-    type: String,
-    default: 'neutral-7',
-  },
-  popupClass: {
-    type: String,
-    default: '',
-  },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const $screen = useScreenType()
+
+const dialogs = ref([])
+const initialOptions = ref([...props.options])
+const placeholderText = ref(props?.placeholder)
+const search = ref('')
+const selectedItem = ref(props.modelValue)
+const selectRef = ref(null)
+
+const filterOptions = computed(() => {
+  if (!search.value) return initialOptions.value
+  return [...initialOptions.value].filter((option) =>
+    option.label.toLowerCase().includes(search.value.toLocaleLowerCase())
+  )
+})
 
 const model = computed({
   get() {
     return props.modelValue
   },
   set(value) {
+    selectedItem.value = value
     return emit('update:modelValue', value)
   },
 })
+
+const sheetHeading = computed(() => {
+  if (props.sheetLabel) {
+    return props.sheetLabel
+  }
+  return props.label
+})
+
+// sheet apply action
+const handleApply = () => {
+  dialogs.value[0].open = false
+  model.value = selectedItem.value
+}
+
+// for opening the sheet in mobile screen
+const handleClick = (event) => {
+  if (props.readonly) return
+  if (!$screen.value.isMobile) return
+  const isBorderClick = event.target.classList.contains('q-field__control')
+
+  if (
+    isBorderClick ||
+    event.target.closest('.q-field__control') ||
+    event.target.closest('.q-field__append')
+  ) {
+    event.preventDefault()
+    event.stopPropagation()
+    dialogs.value = [
+      {
+        open: true,
+        height: 350,
+        persistent: true,
+        transitionDuration: 500,
+        position: 'bottom',
+      },
+    ]
+    search.value = ''
+    if (model.value === '') {
+      selectedItem.value = ''
+    } else {
+      selectedItem.value = model.value
+    }
+  }
+}
+
+// sheet closing action
+const handleClose = () => {
+  dialogs.value[0].open = false
+  if (model.value) {
+    if (selectedItem.value) {
+      if (model.value !== selectedItem.value) {
+        selectedItem.value = model.value
+      }
+    }
+  } else {
+    selectedItem.value = ''
+  }
+}
+
+const handleInput = (event) => {
+  if (event.type == 'input' && props.useInput && $screen.value.isMobile) {
+    let inputElement = document.querySelector('.q-field__input')
+    event.preventDefault()
+    inputElement.value = ''
+    handleClick(event)
+  }
+}
+
+// adding scroll if highlighted menu is not visible to user
+const handleKeydown = () => {
+  setTimeout(() => {
+    const currentItem = document.getElementsByClassName(
+      'q-manual-focusable--focused'
+    )[0]
+    const dropdownContainer =
+      document.getElementsByClassName('u-options-menu')[0]
+    if (currentItem && dropdownContainer) {
+      const itemRect = currentItem.getBoundingClientRect()
+      const containerRect = dropdownContainer.getBoundingClientRect()
+      const isVisible =
+        itemRect.top >= containerRect.top &&
+        itemRect.bottom <= containerRect.bottom
+      if (!isVisible) {
+        currentItem.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }
+  }, 100)
+}
+
+const handleKeydownEnter = (event) => {
+  handleClick(event)
+}
+
+// selecting sheet items
+const handleSheetItemClick = (item, key) => {
+  selectedItem.value = item.value
+}
+
+const updateVal = (val) => {
+  placeholderText.value = val?.length ? '' : props?.placeholder
+}
+
+onMounted(() => {
+  // Add click listener to handle border clicks more reliably
+  if (selectRef.value) {
+    const controlContainer =
+      selectRef.value?.$el.querySelector('.q-field__control')
+    if (controlContainer) {
+      controlContainer.addEventListener('click', handleClick, {
+        passive: false,
+      })
+    }
+  }
+})
+watch(
+  () => props?.placeholder,
+  (value) => {
+    placeholderText.value = value
+  }
+)
+watch(
+  () => $screen.value,
+  (newValue) => {
+    if (newValue) {
+      selectedItem.value = props.modelValue
+    }
+  }
+)
 </script>
 
 <template>
-  <section class="column q-gutter-y-xs">
-    <label for="select" class="row items-center">
+  <section class="column q-gutter-xs" :dataTestId="dataTestId">
+    <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-select"
-      :class="`field-${size}`"
-      id="select"
+      v-bind="$attrs"
+      v-model="model"
+      :class="`u-select field-${size}`"
+      options-selected-class="primary bg-blue-1"
+      :popup-content-class="`u-options-menu ${popupClass}`"
+      behavior="menu"
+      bottom-slots
       :color="color"
       emit-value
+      hide-bottom-space
+      :hide-dropdown-icon="$screen.isMobile ? true : false"
+      id="select"
       map-options
       :menu-offset="[0, 5]"
-      :option-value="optionValue"
+      :no-error-icon="!showErrorIcon"
       :option-label="optionLabel"
+      :option-value="optionValue"
       :options="options"
       outlined
-      options-selected-class="primary bg-blue-1"
-      :popup-content-class="`u-options-menu ${popupClass}`"
-      v-model="model"
-      hide-bottom-space
-      bottom-slots
-      v-bind="$attrs"
+      :placeholder="placeholderText"
+      :readonly="readonly"
+      ref="selectRef"
       :use-input="useInput"
+      @click="handleClick"
       @filter="filterFn"
-      :placeholder="placeholder"
+      @input="handleInput"
+      @keydown="handleKeydown"
+      @keydown.enter="handleKeydownEnter"
+      @update:model-value="(val) => updateVal(val)"
     >
       <template v-slot:no-option>
         <q-item>
@@ -132,15 +332,21 @@ const model = computed({
           </q-item-section>
         </q-item>
       </template>
+      <template v-if="$screen.isMobile && !readonly" v-slot:append>
+        <q-icon
+          class="cursor-pointer"
+          name="arrow_drop_down"
+          @click.stop="handleClick"
+        />
+      </template>
 
       <template v-if="leftIcon" v-slot:prepend>
         <q-icon :class="leftIcon" size="1rem" />
       </template>
 
       <template v-if="hintText" v-slot:hint>
-        <div class="row no-wrap items-center">
-          <q-icon :class="hintIcon" size="1rem" v-if="hintIcon" />
-
+        <div class="row no-wrap items-center text-neutral-9">
+          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem" />
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
           </div>
@@ -148,30 +354,133 @@ const model = computed({
       </template>
 
       <template v-slot:option="scope">
-        <q-item class="items-center u-custom-option" v-bind="scope.itemProps">
-          <div class="q-pr-xs" v-if="scope.opt.icon">
-            <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 caption v-if="scope.opt.description">
-              {{ 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>
+        <UMenuItem
+          v-bind="scope.itemProps"
+          v-if="!$screen.isMobile"
+          class="q-ma-xxs"
+          iconClass="icon-secondary-opacity"
+          :label="scope.opt.label"
+          :leftIcon="scope.opt.leftIcon"
+          :key="scope.opt.value"
+          :rightIcon="scope.opt.rightIcon"
+          :selected="scope.selected || model === scope.label"
+        >
+          <template #leading_slot>
+            <slot name="leading_slot" />
+            <div v-if="!disableAvatar">
+              <UAvatar
+                v-if="scope.opt.avatarUrl"
+                :image="scope.opt.avatarUrl"
+                :name="scope.opt.label"
+                size="md"
+              />
+              <UAvatar v-else :name="scope.opt.label" size="md" />
+            </div>
+          </template>
+          <template #trailing_slot>
+            <slot name="trailing_slot">
+              <q-icon
+                v-if="scope.selected || model === scope.label"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+                size="1rem"
+              />
+            </slot>
+          </template>
+        </UMenuItem>
       </template>
     </q-select>
+    <USheet
+      v-if="$screen.isMobile"
+      v-model:dialogs="dialogs"
+      :close-icon-label="closeIconLabel"
+      dialogClass="select-sheet"
+      :heading="sheetHeading"
+      :heading-caption="caption"
+      :show-action-buttons="true"
+    >
+      <template #header>
+        <UInputTextStd
+          v-if="useInput"
+          v-model="search"
+          class="q-mt-ba"
+          :leftIcon="leftIcon"
+          :placeholder="placeholder"
+          size="md"
+        />
+      </template>
+      <template #content>
+        <template v-if="filterOptions.length > 0">
+          <template v-for="(item, index) in filterOptions" :key="item.value">
+            <UMenuItem
+              iconClass=""
+              :destructive="item.destructive"
+              :disable="item.disable"
+              :hide="item.hide"
+              :inSheet="true"
+              :label="item.label"
+              labelStyle="text-caption-lg"
+              :leftIcon="item.leftIcon"
+              :positive="item.positive"
+              :rightIcon="item.rightIcon"
+              :selected="
+                item.value === selectedItem || item.label === selectedItem
+              "
+              @onClick="handleSheetItemClick(item, index)"
+            >
+              <template #leading_slot>
+                <slot name="leading_slot" />
+                <div v-if="!disableAvatar">
+                  <UAvatar
+                    v-if="item.avatarUrl"
+                    :image="item.avatarUrl"
+                    :name="item.label"
+                    size="md"
+                  />
+                  <UAvatar v-else :name="item.label" size="md" />
+                </div>
+              </template>
+              <template #trailing_slot>
+                <slot name="trailing_slot">
+                  <q-icon
+                    v-if="
+                      item.value === selectedItem || item.label === selectedItem
+                    "
+                    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>
   </section>
 </template>
 
@@ -188,7 +497,7 @@ const model = computed({
 
     &::before
       background: white
-      border: 1.5px solid $neutral-4
+      border: 0.094rem solid $neutral-4
 
   &.field-sm
     .q-field__marginal
@@ -197,37 +506,59 @@ const model = computed({
   &.field-md
     .q-field__marginal
       height: $lg
-
   &.field-lg
     .q-field__marginal
       height: $xl
 
   &:hover .q-field__control::before
-    border: 1.5px solid $primary
+    border: 0.094rem solid $primary
 
   &.q-field--with-bottom
     padding-bottom: 0
 
   .q-field__control:focus-within
-    box-shadow : 0 0 0 2px rgba(35, 75, 169, .20)
+    box-shadow : 0 0 0 0.125rem rgba(35, 75, 169, .20)
 
   .q-field__bottom
-    padding: 4px 0 0 0
+    padding: $xxs 0 0 0
 
   .q-field__prepend
     padding-right: $xs
 
+.u-select.q-field--disabled
+  &.q-field--outlined .q-field__control
+    &::before
+      background: $neutral-3
+
+.select-sheet
+  .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
+
+  .sheet-action-wrapper .action-buttons
+    gap: $ba !important
+    padding: $ba !important
+
+  .sheet-card-wrapper .main-content-dialog
+    padding-top: $xs !important
+    padding-bottom: $xs !important
+
 .u-options-menu
   border-radius: $xs
   box-shadow: $shadow-2
   max-height: 11.25rem !important
-  width: 18rem
   overflow-y: auto
   scrollbar-width: none
 
-.u-custom-option
-  margin: $xxs
-  border-radius: $xxs
-  padding: $xs
-  min-height: $lg
+.u-options-menu
+  .q-item:last-child
+    margin-bottom: $xxs
 </style>