@usssa/component-library 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/components/core/UInputTextStd.vue

@@ -0,0 +1,270 @@
+<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,
+    default: false,
+  },
+  label: {
+    type: String,
+  },
+  leftIcon: {
+    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,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
+    type: String,
+  },
+  leftBorderRadius: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const leftBorderRadius = computed(() => {
+  if (props.leftBorderRadius === true) {
+    return 'leftBorderRadius'
+  }
+  return ''
+})
+</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="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}`"
+        :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>
+        </template>
+      </q-input>
+    </div>
+  </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>

package/src/components/core/UMultiSelectStd.vue

@@ -0,0 +1,268 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [Array, String, null],
+    required: true,
+  },
+  color: {
+    type: String,
+    default: 'neutral-7',
+  },
+  hintText: {
+    type: String,
+  },
+  hintIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-triangle-exclamation',
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: 'Label',
+  },
+  leftIcon: {
+    type: String,
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: 'Select',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  updateFn: {
+    type: Function,
+    required: true,
+  },
+  filterFn: {
+    type: Function,
+    required: false,
+  },
+  useInput: {
+    type: Boolean,
+    required: false,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: true,
+  },
+  noSearchText: {
+    type: String,
+    required: false,
+  },
+  optionValue: {
+    type: String,
+    default: 'value',
+  },
+  optionLabel: {
+    type: String,
+    default: 'label',
+  },
+})
+</script>
+
+<template>
+  <div class="q-gutter-xs">
+    <label for="select" class="row items-center">
+      <div class="u-select-label text-body-sm">
+        {{ label }}
+        <span class="text-red-5 q-ml-xs" v-if="isRequired">*</span>
+      </div>
+
+      <q-icon
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
+        v-if="toolTipText"
+        size="1rem"
+        color="neutral-9"
+        aria-hidden="true"
+      >
+        <q-tooltip anchor="top right" self="top left" :offset="[0, 24]">
+          {{ toolTipText }}
+        </q-tooltip>
+      </q-icon>
+    </label>
+    <q-select
+      class="u-select"
+      id="select"
+      :class="`field-${size}`"
+      :modelValue="modelValue"
+      :color="color"
+      multiple
+      :options="options"
+      :use-input="useInput"
+      :option-label="optionLabel"
+      :option-value="optionValue"
+      :placeholder="placeholder"
+      dropdown-icon="img:icons/caret-down.svg"
+      bottom-slots
+      outlined
+      hide-bottom-space
+      use-chips
+      :menu-offset="[0, 5]"
+      options-selected-class="primary bg-blue-1"
+      popup-content-class="u-options-menu"
+      v-bind="$attrs"
+      @add="
+        (details) =>
+          updateFn({
+            ...details,
+            multiSelect,
+          })
+      "
+      @remove="
+        (details) =>
+          updateFn({
+            remove: true,
+            ...details,
+          })
+      "
+      @update:model-value="(val) => updateFn(val)"
+      @filter="filterFn"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ noSearchText }}
+          </q-item-section>
+        </q-item>
+      </template>
+
+      <template v-if="leftIcon" v-slot:prepend>
+        <q-icon :class="leftIcon" size="16px" />
+      </template>
+
+      <template v-if="hintText" v-slot:hint>
+        <div class="row no-wrap items-center">
+          <q-icon :class="hintIcon" size="1rem" />
+
+          <div class="q-mx-xxs text-body-xs">
+            {{ hintText }}
+          </div>
+        </div>
+      </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="$ba"
+            />
+          </q-item-section>
+        </q-item>
+      </template>
+      <template v-slot:selected-item="scope">
+        <q-chip
+          removable
+          @remove="scope.removeAtIndex(scope.index)"
+          :tabindex="scope.tabindex"
+          color="neutral-3"
+          class="u-chip text-overline-sm text-uppercase"
+          icon-remove="img:icons/circle-xmark.svg"
+        >
+          {{ scope.opt.label }}
+        </q-chip>
+      </template>
+    </q-select>
+  </div>
+</template>
+
+<style lang="sass">
+.u-select
+  &.q-field--auto-height .q-field__control,
+  &.q-field--auto-height .q-field__native
+    min-height: $md
+    align-items: center
+
+  &.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 rgba(35, 75, 169, .20)
+
+  .q-field__bottom
+    padding: 4px 0 0 0
+
+  .q-chip__content
+    color: $neutral-9
+
+  .q-field__prepend
+    padding-right: $xs
+
+.u-options-menu
+  border-radius: $xs
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  max-height: 11.25rem !important
+  width: 18rem
+  overflow-y: auto
+  scrollbar-width: none
+
+.no-option-menu
+  border-radius: $xs
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  height: 3.125rem
+
+.u-custom-option
+  margin: $xxs
+  border-radius: $xxs
+  padding: $xs
+  min-height: $lg
+
+.u-chip
+  min-height: $ms
+
+  .q-icon
+    font-size: 0.75rem
+
+  .q-chip__icon--remove
+    margin-left: $xs
+</style>

package/src/components/core/URadioStd.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'Radio',
+  },
+  value: {
+    type: String,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  id: {
+    type: [String, Number],
+    default: 'u-radio',
+    required: true, // it is required for to match accessibility crieteria
+  },
+})
+onMounted(() => {
+  const radioElement = document.getElementById(props.id)
+  if (radioElement) {
+    const inputElement = radioElement.querySelector('input')
+    inputElement.id = props.id
+  }
+})
+
+const radioValue = defineModel()
+</script>
+
+<template>
+  <label class="hidden" :for="id">Radio</label>
+  <q-radio
+    v-model="radioValue"
+    class="u-radio"
+    :val="value"
+    color="primary"
+    keep-color
+    dense
+    size="3rem"
+    :disable="disable"
+    :id="id"
+  >
+    <div class="text-center text-caption-lg radio-label">
+      {{ label }}
+    </div>
+  </q-radio>
+</template>
+
+<style lang="sass">
+.u-radio
+  .q-radio__label
+    padding-left: $xs !important
+.radio-label
+  color: $primary
+</style>