@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/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
+    class="phone-input"
+    :label="label"
+    :isRequired="isRequired"
+    v-model="modelValue"
+    :mask="mask"
+    :validationRules="validationRules"
+    leftIcon="true"
+    :rightIcon="rightIcon"
+    :hintText="hintText"
+    :hintIcon="hintIcon"
+    :toolTipText="toolTipText"
+    :placeholder="placeholder"
+    :size="size"
+    :disable="disable"
+    :readonly="readonly"
+    :error="error"
+    :error-message="errorMessage"
+    :borderless="borderless"
+    :outlined="outlined"
+  >
+    <template v-slot:prepend>
+      <q-btn-dropdown
+        :disable="readonly"
+        rounded
+        flat
+        class="u-phone-dropdown text-body-sm"
+        :class="`btn-field-${size}`"
+        content-class="u-dropdown-list"
+        menu-anchor="top right"
+        menu-self="bottom middle"
+        :menu-offset="[30, 5]"
+      >
+        <template #label>
+          <q-icon
+            left
+            :aria-label="selectedCountry.name"
+            :class="`fi fi-${toLowerCase(
+              selectedCountry.flag
+            )} flag-icon q-mr-xs`"
+          />
+          <label class="selected-code"> {{ selectedCountry.code }}</label>
+        </template>
+
+        <q-list class="u-list">
+          <q-item
+            v-for="country in options"
+            :key="country.code"
+            clickable
+            v-close-popup
+            v-ripple
+            @click="selectCountry(country)"
+            class="q-my-xxs"
+          >
+            <q-item-section class="flag-section">
+              <q-icon
+                :aria-label="country.name"
+                left
+                :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
+                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/components/core/UInputTextStd.vue

@@ -0,0 +1,293 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  hintText: {
+    type: String,
+  },
+  hintIcon: {
+    type: String,
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+  },
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  outlined: {
+    type: Boolean,
+    default: true,
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+  },
+  rightIconAriaLabel: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  validationRules: {
+    type: Array,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
+    type: String,
+  },
+  leftBorderRadius: {
+    type: Boolean,
+    default: false,
+  },
+  parentClass: {
+    type: String,
+  },
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const leftBorderRadius = computed(() => {
+  if (props.leftBorderRadius === true) {
+    return 'leftBorderRadius'
+  }
+  return ''
+})
+const modelValue = defineModel()
+
+const emit = defineEmits(['onRightIconClick'])
+
+const handleRightIconClick = () => {
+  emit('onRightIconClick')
+}
+</script>
+
+<template>
+  <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"
+      >
+        <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
+          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"
+          />
+          <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>
+        </div>
+      </template>
+    </q-input>
+  </div>
+</template>
+
+<style lang="sass">
+.u-input
+  .q-field--with-bottom
+    padding-bottom: 0px
+  &.q-field--outlined.q-field--disabled .q-field__control
+    background: $neutral-3
+  &.leftBorderRadius
+    &.q-field--outlined .q-field__control
+      border-radius: 0px $xs $xs 0px
+    &.q-field--borderless
+      .q-field__control
+        border-radius: 0px $xs $xs 0px
+
+  .q-field__inner
+    border-radius: $xs
+
+  &.q-field--borderless
+    .q-field__control
+      padding: 0 $xs
+      background: $neutral-1
+      border-radius: $xs
+      &:hover
+        box-shadow : 0px 0px 0px 2px $primary-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: $xs
+
+  .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: $md
+
+  &.q-field--outlined .q-field__control
+    border-radius: $xs
+    padding: 0 $xs
+    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-field__control:focus-within
+    box-shadow : 0px 0px 0px 2px $primary-transparent
+
+  &.field-sm
+    .q-field__control,
+    .q-field__marginal
+      height: $md
+    &.q-field--outlined.q-field__control
+      padding: 0 $xs
+
+    &.q-field__prepend .q-field__marginal
+      padding: 0 $xs
+
+  &.field-md
+    .q-field__control,
+    .q-field__marginal
+      height: $lg
+    &.q-field--outlined.q-field__control
+      padding: 0 $xs
+
+    &.q-field__prepend.q-field__marginal
+      padding: 0 $xs
+      padding-left: 0
+
+  &.field-lg
+    .q-field__control,
+    .q-field__marginal
+      height: $xl
+    &.q-field--outlined .q-field__control
+      padding: 0 $sm
+    .q-field__prepend.q-field__marginal
+      padding-left: 0px
+
+  .q-field__bottom
+    padding: 0
+    align-items: center
+
+  .q-field__messages
+    margin-top: $xxs
+</style>