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

package/src/components/core/UInputTextStd.vue

@@ -1,13 +1,42 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onRightIconClick'])
+
+const modelValue = defineModel()
+defineOptions({
+  inheritAttrs: false,
+})
 const props = defineProps({
-  hintText: {
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  dataTestId: {
+    type: String,
+    default: 'input-text-std',
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
     type: String,
   },
   hintIcon: {
     type: String,
   },
+  hintText: {
+    type: String,
+  },
+  inputType: {
+    type: String,
+    default: 'text',
+  },
   isRequired: {
     type: Boolean,
     default: false,
@@ -15,21 +44,32 @@ const props = defineProps({
   label: {
     type: String,
   },
+  leftBorderRadius: {
+    type: Boolean,
+    default: false,
+  },
   leftIcon: {
     type: String,
   },
-  rightIcon: {
-    type: String,
+  loading: {
+    type: Boolean,
   },
+  mask: { default: '' },
   outlined: {
     type: Boolean,
     default: true,
   },
-  borderless: {
+  parentClass: {
+    type: String,
+  },
+  placeholder: {
+    type: String,
+  },
+  readonly: {
     type: Boolean,
     default: false,
   },
-  placeholder: {
+  rightIcon: {
     type: String,
   },
   rightIconAriaLabel: {
@@ -46,24 +86,6 @@ const props = defineProps({
   validationRules: {
     type: Array,
   },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  disable: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-  },
-  errorMessage: {
-    type: String,
-  },
-  leftBorderRadius: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const leftBorderRadius = computed(() => {
@@ -72,9 +94,6 @@ const leftBorderRadius = computed(() => {
   }
   return ''
 })
-const modelValue = defineModel()
-
-const emit = defineEmits(['onRightIconClick'])
 
 const handleRightIconClick = () => {
   emit('onRightIconClick')
@@ -82,104 +101,106 @@ const handleRightIconClick = () => {
 </script>
 
 <template>
-  <div class="q-gutter-xs q-pb-ms">
-    <div>
-      <label
-        v-if="label"
-        role="label"
-        for="input"
-        class="row items-center q-mb-xxs"
+  <div :class="`q-gutter-xs ${parentClass}`" :dataTestId="dataTestId">
+    <label
+      v-if="label"
+      class="row items-center q-mb-xxs"
+      for="input"
+      role="label"
+    >
+      <div class="u-input-label text-body-sm">
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 text-body-sm q-mx-xs">
+          {{ '*' }}
+        </span>
+      </div>
+      <q-icon
+        v-if="toolTipText"
+        class="fa-kit-duotone fa-circle-info cursor-pointer"
+        :aria-label="toolTipText"
+        color="neutral-9"
+        size="1rem"
       >
-        <div class="u-input-label text-body-sm">
-          {{ label }}
-          <span class="text-red-5 text-body-sm q-mx-xxs" v-if="isRequired">
-            *
-          </span>
-        </div>
+        <UTooltip
+          anchor="top middle"
+          :description="toolTipText"
+          :offset="[0, 0]"
+          self="bottom middle"
+        />
+      </q-icon>
+    </label>
+    <q-input
+      v-bind="$attrs"
+      v-model="modelValue"
+      :class="`u-input field-${size} ${leftBorderRadius}`"
+      :aria-describedby="hintText"
+      :borderless="borderless"
+      :bottom-slots="!!hintText"
+      :disable="disable"
+      :error="error"
+      hide-bottom-space
+      id="input"
+      :mask="mask"
+      name="input"
+      :outlined="outlined"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :rules="validationRules"
+      :standout="!outlined"
+      :type="inputType"
+    >
+      <!--Added below line to resolve "Missing form label" accessibility issue -->
+      <template class="hidden">{{ label }}</template>
+      <template v-if="leftIcon" #prepend>
+        <slot name="prepend"></slot>
         <q-icon
-          class="q-ml-xxs fa-kit-duotone fa-circle-info cursor-pointer"
-          v-if="toolTipText"
-          size="1rem"
-          color="neutral-9"
-          :aria-label="toolTipText"
-        >
-          <UTooltip
-            :description="toolTipText"
-            anchor="top middle"
-            self="bottom middle"
-            :offset="[0, 0]"
+          v-if="!$slots.prepend"
+          :class="`slot-icon-size-${size} ${leftIcon}`"
+        />
+      </template>
+      <template v-if="hintText" #hint>
+        <div class="row items-center text-neutral-9 no-wrap">
+          <q-icon
+            v-if="hintIcon"
+            :class="`${hintIcon} icon-secondary-opacity`"
+            :aria-label="hintText"
+            size="1rem"
           />
-        </q-icon>
-      </label>
-      <q-input
-        id="input"
-        class="u-input"
-        :class="`field-${size} ${leftBorderRadius}`"
-        v-model="modelValue"
-        name="input"
-        :outlined="outlined"
-        :placeholder="placeholder"
-        :rules="validationRules"
-        :standout="!outlined"
-        type="text"
-        :bottom-slots="!!hintText"
-        hide-bottom-space
-        :readonly="readonly"
-        :disable="disable"
-        :borderless="borderless"
-        :error="error"
-        v-bind="$attrs"
-      >
-        <template #prepend v-if="leftIcon">
-          <slot name="prepend"></slot>
+          <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
+        </div>
+      </template>
+      <template #append>
+        <slot name="append">
+          <q-spinner v-if="loading" size="1rem" />
           <q-icon
-            v-if="!$slots.prepend"
-            :class="`slot-icon-size-${size} ${leftIcon}`"
+            v-if="rightIcon"
+            :class="`slot-icon-size-${size} ${rightIcon}`"
+            :aria-label="
+              rightIcon && rightIconAriaLabel
+                ? rightIconAriaLabel
+                : 'right input icon '
+            "
+            :tabindex="0"
+            @click="handleRightIconClick"
           />
-        </template>
-        <template #hint v-if="hintText">
-          <div class="row items-center text-neutral-9 no-wrap">
-            <q-icon
-              :class="hintIcon"
-              v-if="hintIcon"
-              size="1rem"
-              :aria-label="hintText"
-            />
-            <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
-          </div>
-        </template>
-        <template #append>
-          <slot name="append">
-            <q-icon
-              v-if="rightIcon"
-              @click="handleRightIconClick"
-              :class="`slot-icon-size-${size} ${rightIcon}`"
-              :tabindex="0"
-              :aria-label="
-                rightIcon && rightIconAriaLabel
-                  ? rightIconAriaLabel
-                  : 'right input icon '
-              "
-            />
-          </slot>
-        </template>
-        <template v-slot:error>
-          <div class="row items-center no-wrap" v-if="errorMessage">
-            <q-icon
-              class="fa-kit-duotone fa-warning-octagon"
-              size="1rem"
-              :aria-label="errorMessage"
-            />
-            <div class="q-ml-xxs text-body-xs" role="validation error">
-              {{ errorMessage }}
-            </div>
+        </slot>
+      </template>
+      <template v-slot:error>
+        <div v-if="errorMessage" class="row items-center no-wrap">
+          <q-icon
+            class="fa-kit-duotone fa-warning-octagon"
+            :aria-label="errorMessage"
+            size="1rem"
+          />
+          <div class="q-ml-xxs text-body-xs" role="validation error">
+            {{ errorMessage }}
           </div>
-        </template>
-      </q-input>
-    </div>
+        </div>
+      </template>
+      <slot name="menu" />
+    </q-input>
   </div>
 </template>
-
 <style lang="sass">
 .u-input
   .q-field--with-bottom

package/src/components/core/UInputTypeahead.vue

@@ -0,0 +1,44 @@
+<script setup>
+import UInputTextStd from './UInputTextStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['updateInputVal'])
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+  searchText: {
+    type: String,
+  },
+})
+
+const $screen = useScreenType()
+
+const updateInputVal = (event) => {
+  emit('updateInputVal', event)
+}
+</script>
+
+<template>
+  <UInputTextStd
+    v-bind="$attrs"
+    :aria-label="label"
+    autocapitalize="off"
+    autocomplete="off"
+    autocorrect="off"
+    :debounce="500"
+    :label="label"
+    :loading="loading"
+    :modelValue="searchText"
+    spellcheck="false"
+    @update:modelValue="updateInputVal($event)"
+  >
+    <template v-if="!$screen.isMobile" v-slot:menu>
+      <slot name="menu" />
+    </template>
+  </UInputTextStd>
+</template>

package/src/components/core/UInputTypeaheadAdvanceSearch.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref } from 'vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UInputTypeahead from './UInputTypeahead.vue'
+import USheet from './USheet.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits([
+  'addDialog',
+  'onCloseDialog',
+  'onInputFocus',
+  'updateInputVal',
+])
+
+const dialogs = defineModel('dialogs', { default: () => [], type: Array })
+
+const props = defineProps({
+  closeIconLabel:{
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+  searchText: {
+    type: String,
+  },
+  selectOptionLabel: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+})
+
+const $screen = useScreenType()
+
+const searchInputRef = ref(null)
+
+const onCloseDialog = () => {
+  emit('onCloseDialog')
+}
+
+const onInputFocus = (event) => {
+  setTimeout(() => {
+    emit('addDialog')
+    if (event.target === document.activeElement) {
+      event.target.blur()
+    }
+  }, 300)
+}
+
+const updateInputVal = (event) => {
+  emit('updateInputVal', event)
+}
+</script>
+
+<template>
+  <div class="typeahead-advance-search">
+    <div v-if="$screen.isMobile">
+      <UInputTextStd
+        v-bind="$attrs"
+        :aria-label="label"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        :label="label"
+        readonly
+        ref="searchInputRef"
+        @click="onInputFocus"
+        @update:modelValue="updateInputVal($event)"
+      />
+      <USheet
+        v-model:dialogs="dialogs"
+        dialogClass="typeahead-sheet"
+        :close-icon-label="closeIconLabel"
+        :heading="selectOptionLabel"
+        @onCloseDialog="onCloseDialog"
+      >
+        <template #content>
+          <div class="q-mx-ba">
+            <UInputTypeahead
+              v-bind="$attrs"
+              :aria-label="label"
+              :label="label"
+              :loading="loading"
+              :modelValue="searchText"
+              @update:modelValue="updateInputVal($event)"
+            />
+          </div>
+
+          <slot name="menuContent" />
+        </template>
+      </USheet>
+    </div>
+    <div v-else>
+      <div :class="`input-search size-${size}`">
+        <UInputTypeahead
+          v-bind="$attrs"
+          :aria-label="label"
+          :label="label"
+          :loading="loading"
+          :modelValue="searchText"
+          @update:modelValue="updateInputVal($event)"
+        />
+        <slot name="menu" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="sass">
+.input-search
+  display: flex
+  flex-direction: column
+  &.size-sm
+    width: 24.5625rem
+  &.size-md
+    width: 26.5rem
+.typeahead-sheet
+  .sheet-card-wrapper
+    .q-card__section--vert
+      padding:0px
+    .heading-row
+      padding: 0.125rem $ba $xs $ba
+    .q-card__section .q-item
+      padding: $xs $xs $xs $ba !important
+      align-items: center !important
+      border-radius: $xs !important
+      margin-bottom: 0px !important
+</style>