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

package/src/components/core/UMenuItem.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  destructive: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+})
+
+const type = ref(props.destructive ? 'destructive' : 'default')
+
+watch(
+  () => props.destructive,
+  (newValue) => {
+    type.value = newValue ? 'destructive' : 'default'
+  }
+)
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const labelColor = computed(() => {
+  if (props.destructive) {
+    return 'text-red-6'
+  } else if (props.selected) {
+    return 'text-primary'
+  }
+  return 'text-dark'
+})
+
+const iconColor = computed(() => {
+  if (props.destructive) {
+    return 'red-6'
+  } else if (props.selected) {
+    return 'primary'
+  }
+  return 'dark'
+})
+
+const backgroundColor = computed(() => {
+  if (props.selected && !props.destructive) {
+    return 'bg-blue-1'
+  }
+  return 'bg-neutral-1'
+})
+</script>
+
+<template>
+  <div class="u-menu-link q-mb-xxs">
+    <q-item
+      clickable
+      role="button"
+      :class="`${backgroundColor} item-${type}`"
+      @click="handleClick"
+      :aria-label="label"
+    >
+      <q-item-section side v-if="leftIcon">
+        <q-icon
+          :color="iconColor"
+          :class="`${leftIcon} ${iconClass}`"
+          size="1rem"
+          :aria-hidden="true"
+        />
+      </q-item-section>
+
+      <slot name="leading_slot"></slot>
+
+      <q-item-section class="text-body-sm label" :class="labelColor">
+        {{ label }}
+      </q-item-section>
+
+      <q-item-section side v-if="rightIcon">
+        <q-icon
+          :color="iconColor"
+          :class="`${rightIcon} ${iconClass}`"
+          size="1rem"
+          :aria-hidden="true"
+        />
+      </q-item-section>
+
+      <slot name="trailing_slot"></slot>
+    </q-item>
+  </div>
+</template>
+
+<style lang="sass">
+.u-menu-link
+  .q-item
+    border-radius: $xxs
+    padding: 0rem $xs
+    align-items: center
+    display: flex
+    min-height: $lg
+    gap: $xs
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding: 0px
+    &.item-destructive
+      &.q-hoverable:hover > .q-focus-helper:after
+        background: $red-6
+        opacity: 1
+    &.item-default
+      &.q-hoverable:hover > .q-focus-helper:after
+        background: $surface-bg-link-hover
+        opacity: 1
+    .label
+      word-break: break-all
+
+.u-menu-link:last-child
+  margin-bottom : 0
+</style>

package/src/components/core/UMultiSelectStd.vue

@@ -0,0 +1,259 @@
+<script setup>
+import { ref } from 'vue'
+import UTooltip from './UTooltip.vue'
+import UChip from './UChip.vue'
+
+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',
+  },
+})
+
+const chipModelVal = ref(true)
+</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"
+      >
+        <UTooltip
+          :description="toolTipText"
+          anchor="top middle"
+          self="bottom middle"
+        />
+      </q-icon>
+    </label>
+    <q-select
+      class="u-multi-select"
+      id="multi-select"
+      :class="`field-${size}`"
+      :modelValue="modelValue"
+      :color="color"
+      multiple
+      :options="options"
+      :use-input="useInput"
+      :option-label="optionLabel"
+      :option-value="optionValue"
+      :placeholder="placeholder"
+      bottom-slots
+      outlined
+      hide-bottom-space
+      use-chips
+      :menu-offset="[0, 5]"
+      options-selected-class="primary bg-blue-1"
+      popup-content-class="u-option-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="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="q-mx-xxs text-body-xs">
+            {{ hintText }}
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:option="scope">
+        <q-item class="items-center u-custom-options" 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>
+      </template>
+      <template v-slot:selected-item="scope">
+        <UChip
+          v-model="chipModelVal"
+          :chipLabel="scope.opt.label"
+          :removable="true"
+          @remove="scope.removeAtIndex(scope.index)"
+          :tabindex="scope.tabindex"
+          dense
+        />
+      </template>
+    </q-select>
+  </div>
+</template>
+
+<style lang="sass">
+.u-multi-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 $primary-transparent
+
+  .q-field__bottom
+    padding: 4px 0 0 0
+
+  .q-chip__content
+    color: $neutral-9
+
+  .q-field__prepend
+    padding-right: $xs
+
+.u-option-menu
+  border-radius: $xs
+  box-shadow: $shadow-2
+  max-height: 11.25rem !important
+  width: 18rem
+  overflow-y: auto
+  scrollbar-width: none
+
+.u-custom-options
+  margin: $xxs
+  border-radius: $xxs
+  padding: $xs
+  min-height: $lg
+</style>

package/src/components/core/UPagination.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { ref, watch } from 'vue'
+import USelectStd from './USelectStd.vue'
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  rowPerPage: {
+    type: Number,
+    default: 5,
+  },
+  maxPageLink: {
+    //Maximum number of page links to display at a time
+    type: Number,
+    default: 2,
+  },
+  maxPages: {
+    type: Number,
+    default: 10,
+  },
+  perPageOptions: {
+    type: Array,
+    default: () => [
+      { label: '5 / per page', value: 5 },
+      { label: '10 / per page', value: 10 },
+      { label: '15 / per page', value: 15 },
+      { label: '20 / per page', value: 20 },
+    ],
+  },
+})
+const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
+const rowPerPage = ref(props.rowPerPage)
+const currentPage = ref(props.modelValue)
+
+watch(currentPage, (newValue) => {
+  emit('update:modelValue', newValue)
+  emit('onPageChange', newValue)
+})
+const onPageChange = (newPage) => {
+  currentPage.value = newPage
+}
+const onRowChange = (newRowPerPage) => {
+  emit('onRowChange', newRowPerPage)
+}
+</script>
+
+<template>
+  <div class="row u-pagination-container"> 
+    <q-pagination
+      class="u-pagination"
+      v-model="currentPage"
+      direction-links
+      flat
+      color="dark"
+      active-color="primary"
+      :max="maxPages"
+      :max-pages="maxPageLink"
+      boundary-numbers
+      @update:model-value="onPageChange"
+      gutter="sm"
+    />
+
+    <USelectStd
+      class="q-gutter-x-sm text-body-sm perpage-dropdown"
+      v-model="rowPerPage"
+      color="primary"
+      :options="perPageOptions"
+      popupClass="pagination-dropdown"
+      @update:model-value="onRowChange"
+    />
+  </div>
+</template>
+
+<style lang="sass">
+.pagination-dropdown
+  width: auto !important
+
+.perpage-dropdown
+  width: 9.375rem
+  .q-field__marginal
+    padding-left: $xs
+  .q-field--outlined .q-field__control
+    display: inline-flex
+    width: 8.75rem
+
+.u-pagination
+  .q-icon
+    font-size: $ba
+  .q-btn
+    background: $neutral-1
+    border-radius: $xs
+    width: $md
+    height: $md
+    font-size: $sm
+    font-style: normal
+    font-weight: 500
+    line-height: 1.25rem
+    letter-spacing: .03333rem
+    &:hover
+      background: $blue-1
+    &::before
+      box-shadow: none
+</style>

package/src/components/core/URadioBtn.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed } from 'vue'
+import URadioStd from './URadioStd.vue'
+const props = defineProps({
+  iconClass: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: '',
+  },
+  image: {
+    type: String,
+    default: '',
+  },
+  imgAriaLabel: {
+    type: String,
+    default: '',
+  },
+  altText: {
+    type: String,
+    default: '',
+  },
+  iconColor: {
+    type: String,
+    default: 'primary',
+  },
+
+  id: { String },
+})
+
+const emit = defineEmits(['onClick', 'onButtonClick'])
+const model = defineModel()
+
+const handleChange = () => {
+  model.value = props.value
+}
+
+const activeClass = computed(() => {
+  if (model.value === props.value) {
+    return 'active'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <q-btn flat class="u-radio-btn" @click="handleChange" :class="activeClass">
+    <div class="radio-btn-content flex items-center">
+      <URadioStd v-model="model" :value="value" :id="id" :aria-label="label" />
+      <div class="button-text">
+        <div class="text-caption-lg">{{ label }}</div>
+        <div class="description-text text-body-sm">{{ description }}</div>
+      </div>
+
+      <img
+        class="radio-btn-img"
+        v-if="image"
+        size="1.5rem"
+        :src="image"
+        :alt="altText"
+        :aria-label="imgAriaLabel"
+      />
+      <q-icon
+        v-if="iconClass"
+        :aria-label="imgAriaLabel"
+        :color="iconColor"
+        size="1.5rem"
+        :class="iconClass"
+      />
+    </div>
+  </q-btn>
+</template>
+
+<style lang="sass">
+.u-radio-btn
+  padding: $xs $sm
+  border: 2px solid $neutral-4
+  border-radius: $xs
+  min-height: $lg
+  .q-radio__label
+    padding-left: 0 !important
+
+  .radio-btn-content
+    gap: $xs
+
+  .button-text
+    text-align: left !important
+    min-width: 6.063rem
+
+  .description-text
+    color: $description
+
+  .radio-btn-img
+    width: $ms
+    height: $ms
+
+.active
+  border: 2px solid $primary
+
+.u-radio-btn:hover
+  border: 2px solid $primary
+  background-color: $primary-transparent
+
+  .q-radio .q-radio__inner
+    color: $primary !important
+</style>

package/src/components/core/URadioStd.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  ariaLabel: {
+    type: String,
+  },
+  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" v-if="label || ariaLabel">{{
+    label || ariaLabel
+  }}</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" v-if="label">
+      {{ label }}
+    </div>
+  </q-radio>
+</template>
+
+<style lang="sass">
+.u-radio
+  .q-radio__label
+    padding-left: $xs !important
+.radio-label
+  color: $primary
+</style>