@usssa/component-library 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist/component-library/components/core/UInputPhoneStd.vue

@@ -0,0 +1,295 @@
+<script setup>
+import UInputTextStd from './UInputTextStd.vue'
+
+const props = defineProps({
+  hintText: {
+    type: String,
+  },
+  hintIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-info',
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  outlined: {
+    type: Boolean,
+    default: true,
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: 'Input Text',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  validationRules: {
+    type: Array,
+    default: () => [(val) => val.length === 10],
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
+    type: String,
+  },
+  options: {
+    type: Array,
+  },
+  selectedCountry: {
+    type: Object,
+  },
+  mask: {
+    type: String,
+    default: '##########',
+  },
+})
+
+const modelValue = defineModel()
+const emit = defineEmits(['update-country'])
+
+const selectCountry = (country) => {
+  emit('update-country', country)
+}
+
+const toLowerCase = (str) => str.toLowerCase()
+</script>
+
+<template>
+  <UInputTextStd
+    v-model="modelValue"
+    :borderless="borderless"
+    class="phone-input"
+    :disable="disable"
+    :error="error"
+    :error-message="errorMessage"
+    :hintText="hintText"
+    :hintIcon="hintIcon"
+    :label="label"
+    :isRequired="isRequired"
+    leftIcon="true"
+    :mask="mask"
+    :outlined="outlined"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :rightIcon="rightIcon"
+    :size="size"
+    :toolTipText="toolTipText"
+    :validationRules="validationRules"
+  >
+    <template v-slot:prepend>
+      <q-btn-dropdown
+        v-bind="$attrs"
+        :disable="readonly"
+        :class="`btn-field-${size}`"
+        class="u-phone-dropdown text-body-sm"
+        content-class="u-dropdown-list"
+        flat
+        menu-anchor="top right"
+        menu-self="bottom middle"
+        :menu-offset="[30, 5]"
+        rounded
+      >
+        <template #label>
+          <q-icon
+            :aria-label="selectedCountry.name"
+            :class="`fi fi-${toLowerCase(
+              selectedCountry.flag
+            )} flag-icon q-mr-xs`"
+            left
+          />
+          <label class="selected-code">{{ selectedCountry.code }}</label>
+        </template>
+
+        <q-list class="u-list">
+          <q-item
+            v-for="country in options"
+            class="q-my-xxs"
+            clickable
+            :key="country.code"
+            v-close-popup
+            v-ripple
+            @click="selectCountry(country)"
+          >
+            <q-item-section class="flag-section">
+              <q-icon
+                :aria-label="country.name"
+                :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
+                left
+                size="1.25rem"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-body-sm">
+                {{ country.name }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </template>
+  </UInputTextStd>
+</template>
+
+<style lang="sass">
+.selected-code
+  width: 1.5rem
+  color: $dark
+.u-dropdown-list
+  .q-item__section--main
+    margin-left: 0px
+
+.flag-icon
+  width: 1rem
+  height: 0.65rem
+.phone-input
+  .q-field__control
+    &:hover
+      .q-btn-dropdown.u-phone-dropdown
+        border-right: 1.5px solid $primary
+  &.q-field--outlined .q-field__control:before
+    transition: none
+  .u-phone-dropdown
+    background: #6f7d9812
+
+  &.q-field--error .q-field__control
+    &:hover
+      .u-phone-dropdown
+        border-right: 2px solid $accent
+  &.q-field--outlined.q-field--readonly .q-field__control:focus-within::before
+    border: 1.5px solid $primary
+
+  &.q-field--error
+    &:hover
+      .u-phone-dropdown
+        border-right: 2px solid $accent
+    .u-phone-dropdown
+      border-right: 2px solid $accent
+
+    &.q-field--borderless
+      .q-field__control.relative-position.row.no-wrap.text-negative:focus-within
+        .q-btn-dropdown.u-phone-dropdown
+          border-right: 2px solid $accent-transparent
+  &.field-lg
+    &.q-field--outlined .q-field__control
+      padding: 0 $sm 0 0
+
+.u-list
+  width: 15rem
+  padding: $xxs
+  .q-item
+    height: $md
+    padding: 0px $xs
+  .q-item__section--main
+    flex: none
+.u-phone-dropdown
+  border-radius: $xs 0px 0px $xs
+  border-right: 1.5px solid $neutral-4
+  &:hover::before
+    border: 0px solid $primary
+
+  &.q-btn
+    height: 2rem
+    min-height: 2rem
+    padding: 0px $xs
+
+  &.btn-field-sm
+    height: $md
+  &.btn-field-md
+    height: $lg
+  &.btn-field-lg
+    height: $xl
+
+  .q-btn-dropdown__arrow
+    width: 1rem
+    height: 1rem
+
+.phone-input
+  .q-field__inner
+    border-radius: $xs
+  &.q-field--borderless
+    .q-field__control
+      padding: 0 $xs 0 0
+      background: $neutral-1
+      border-radius: $xs
+      &:hover
+        box-shadow : 0px 0px 0px 2px $primary-transparent
+        .q-btn-dropdown.u-phone-dropdown
+          border-right: 2px solid $neutral-4
+      .q-btn-dropdown.u-phone-dropdown
+        border-right: none
+      &:focus-within
+        .q-btn-dropdown.u-phone-dropdown
+          border-right: 2px solid $neutral-4
+      .q-btn-dropdown.u-phone-dropdown
+        border-right: 2px solid transparent
+
+  .q-field--standout .q-field__control
+    border-radius: $xs
+
+  .q-field__append.q-field__marginal.row.no-wrap.items-center.q-anchor--skip
+    display: none
+
+  .q-field__before,
+  .q-field__prepend
+    padding: 0 $xs
+    padding-left: 0
+
+  .q-field__after,
+  .q-field__append
+    padding-left: 0px
+
+  .q-icon
+    &.slot-icon-size-sm
+      font-size: $sm
+    &.slot-icon-size-md
+      font-size: $ba
+    &.slot-icon-size-lg
+      font-size: $ba
+
+  &.q-field--auto-height .q-field__control,
+  &.q-field--auto-height .q-field__native
+    min-height: 2rem
+
+  &.q-field--outlined .q-field__control
+    border-radius: $xs
+    padding: 0 $xs 0 0
+    background: $neutral-1
+    &::before
+      border:1.5px solid $neutral-4
+    &:hover::before
+      border:1.5px solid $primary
+
+  .q-field__control.relative-position.row.no-wrap.text-negative:focus-within
+    box-shadow: 0px 0px 0px 2px $accent-transparent
+    .q-btn-dropdown.u-phone-dropdown
+      border-right: 2px solid $accent
+  .q-field__control:focus-within
+    box-shadow : 0px 0px 0px 2px $primary-transparent
+    .q-btn-dropdown.u-phone-dropdown
+      border-right: 2px solid $primary
+</style>

package/{src → dist/component-library}/components/core/UInputTextStd.vue

@@ -1,18 +1,13 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
 const props = defineProps({
-  modelValue: {
-    type: [String, null],
-    required: true,
-    default: '',
-  },
   hintText: {
     type: String,
   },
   hintIcon: {
     type: String,
-    default: 'fa-kit-duotone fa-circle-info',
   },
   isRequired: {
     type: Boolean,
@@ -37,7 +32,9 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: 'Input Text',
+  },
+  rightIconAriaLabel: {
+    type: String,
   },
   size: {
     type: String,
@@ -68,6 +65,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  parentClass: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+})
+
+defineOptions({
+  inheritAttrs: false,
 })
 
 const leftBorderRadius = computed(() => {
@@ -76,90 +83,110 @@ const leftBorderRadius = computed(() => {
   }
   return ''
 })
+const modelValue = defineModel()
+
+const emit = defineEmits(['onRightIconClick'])
+
+const handleRightIconClick = () => {
+  emit('onRightIconClick')
+}
 </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" :class="parentClass">
+    <label
+      v-if="label"
+      role="label"
+      for="input"
+      class="row items-center q-mb-xxs"
+    >
+      <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>
+      <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"
       >
-        <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
+          :description="toolTipText"
+          anchor="top middle"
+          self="bottom middle"
+          :offset="[0, 0]"
+        />
+      </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>
         <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 #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"
           />
-        </q-icon>
-      </label>
-      <q-input
-        id="input"
-        class="u-input"
-        :class="`field-${size} ${leftBorderRadius}`"
-        :modelValue="modelValue"
-        name="input"
-        :outlined="outlined"
-        :placeholder="placeholder"
-        :rules="validationRules"
-        :standout="!outlined"
-        type="text"
-        @update:modelValue="$emit('update:modelValue', $event)"
-        :bottom-slots="!!hintText"
-        hide-bottom-space
-        :readonly="readonly"
-        :disable="disable"
-        :borderless="borderless"
-        :error="error"
-        v-bind="$attrs"
-      >
-        <template #prepend v-if="leftIcon">
-          <q-icon :class="`slot-icon-size-${size} ${leftIcon}`" />
-        </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 v-if="rightIcon">
-          <q-icon :class="`slot-icon-size-${size} ${rightIcon}`" />
-        </template>
-
-        <template v-slot:error>
-          <div class="row items-center no-wrap">
-            <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>
+          <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="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>
-        </template>
-      </q-input>
-    </div>
+        </div>
+      </template>
+    </q-input>
   </div>
 </template>
 

package/dist/component-library/components/core/UInputTypeaheadAdvanceSearch.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue'
+import UInputTextStd from './UInputTextStd.vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  searchText: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+  },
+  loading: {
+    type: Boolean,
+  },
+})
+
+const emit = defineEmits(['updateInputVal'])
+
+const searchInputRef = ref(null)
+
+const updateInputVal = (event) => {
+  emit('updateInputVal', event)
+}
+</script>
+
+<template>
+  <div :class="`input-search size-${size}`">
+    <UInputTextStd
+      v-bind="$attrs"
+      autocorrect="off"
+      autocapitalize="off"
+      autocomplete="off"
+      :aria-label="label"
+      :debounce="500"
+      :label="label"
+      :loading="loading"
+      :modelValue="searchText"
+      ref="searchInputRef"
+      spellcheck="false"
+      @update:modelValue="updateInputVal($event)"
+    />
+
+    <slot name="menu"></slot>
+  </div>
+</template>
+
+<style lang="sass">
+.input-search
+  display: flex
+  flex-direction: column
+  &.size-sm
+    width: 24.5625rem
+  &.size-md
+    width: 26.5rem
+</style>