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

package/src/components/core/UMultiSelectStd.vue

@@ -1,4 +1,8 @@
 <script setup>
+import { ref, watch } from 'vue'
+import UChip from './UChip.vue'
+import UTooltip from './UTooltip.vue'
+
 const props = defineProps({
   modelValue: {
     type: [Array, String, null],
@@ -32,7 +36,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: 'Select',
+    default: '',
   },
   size: {
     type: String,
@@ -71,49 +75,66 @@ const props = defineProps({
     default: 'label',
   },
 })
+
+const chipModelVal = ref(true)
+
+const placeholderText = ref(props.placeholder)
+
+const updateVal = (val) => {
+  props.updateFn(val)
+  placeholderText.value = val.length ? '' : props.placeholder
+}
+
+watch(
+  () => props.placeholder,
+  (value) => {
+    placeholderText.value = value
+  }
+)
 </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>
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 q-ml-xs">*</span>
       </div>
 
       <q-icon
-        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
-        size="1rem"
-        color="neutral-9"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         aria-hidden="true"
+        color="neutral-9"
+        size="1rem"
       >
-        <q-tooltip anchor="top right" self="top left" :offset="[0, 24]">
-          {{ toolTipText }}
-        </q-tooltip>
+        <UTooltip
+          anchor="top middle"
+          :description="toolTipText"
+          self="bottom middle"
+        />
       </q-icon>
     </label>
     <q-select
-      class="u-select"
-      id="select"
+      v-bind="$attrs"
+      class="u-multi-select"
       :class="`field-${size}`"
-      :modelValue="modelValue"
+      options-selected-class="primary bg-blue-1"
+      bottom-slots
       :color="color"
+      hide-bottom-space
+      id="multi-select"
+      :menu-offset="[0, 5]"
+      :modelValue="modelValue"
       multiple
-      :options="options"
-      :use-input="useInput"
       :option-label="optionLabel"
       :option-value="optionValue"
-      :placeholder="placeholder"
-      dropdown-icon="img:icons/caret-down.svg"
-      bottom-slots
+      :options="options"
       outlined
-      hide-bottom-space
+      :placeholder="placeholderText"
+      popup-content-class="u-option-menu"
       use-chips
-      :menu-offset="[0, 5]"
-      options-selected-class="primary bg-blue-1"
-      popup-content-class="u-options-menu"
-      v-bind="$attrs"
+      :use-input="useInput"
       @add="
         (details) =>
           updateFn({
@@ -121,6 +142,7 @@ const props = defineProps({
             multiSelect,
           })
       "
+      @filter="filterFn"
       @remove="
         (details) =>
           updateFn({
@@ -128,8 +150,7 @@ const props = defineProps({
             ...details,
           })
       "
-      @update:model-value="(val) => updateFn(val)"
-      @filter="filterFn"
+      @update:model-value="(val) => updateVal(val)"
     >
       <template v-slot:no-option>
         <q-item>
@@ -140,12 +161,12 @@ const props = defineProps({
       </template>
 
       <template v-if="leftIcon" v-slot:prepend>
-        <q-icon :class="leftIcon" size="16px" />
+        <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" />
+          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem"/>
 
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
@@ -154,8 +175,8 @@ const props = defineProps({
       </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-item v-bind="scope.itemProps" class="items-center u-custom-options">
+          <div v-if="scope.opt.icon" class="q-pr-xs">
             <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
           </div>
 
@@ -172,33 +193,32 @@ const props = defineProps({
             <q-icon
               class="fa-kit-duotone fa-circle-check"
               color="primary"
-              size="$ba"
+              size="1rem"
             />
           </q-item-section>
         </q-item>
       </template>
       <template v-slot:selected-item="scope">
-        <q-chip
-          removable
-          @remove="scope.removeAtIndex(scope.index)"
+        <UChip
+          v-model="chipModelVal"
+          dense
+          :chipLabel="scope.opt.label"
+          :removable="true"
           :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>
+          @remove="scope.removeAtIndex(scope.index)"
+        />
       </template>
     </q-select>
   </div>
 </template>
 
 <style lang="sass">
-.u-select
+.u-multi-select
   &.q-field--auto-height .q-field__control,
   &.q-field--auto-height .q-field__native
     min-height: $md
     align-items: center
+    padding: 0px
 
   &.q-field--outlined .q-field__control
     border-radius: $xs
@@ -227,7 +247,7 @@ const props = defineProps({
     padding-bottom: 0
 
   .q-field__control:focus-within
-    box-shadow : 0 0 0 2px rgba(35, 75, 169, .20)
+    box-shadow : 0 0 0 2px $primary-transparent
 
   .q-field__bottom
     padding: 4px 0 0 0
@@ -238,31 +258,17 @@ const props = defineProps({
   .q-field__prepend
     padding-right: $xs
 
-.u-options-menu
+.u-option-menu
   border-radius: $xs
-  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  box-shadow: $shadow-2
   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
+.u-custom-options
   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/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

@@ -4,7 +4,9 @@ import { onMounted } from 'vue'
 const props = defineProps({
   label: {
     type: String,
-    default: 'Radio',
+  },
+  ariaLabel: {
+    type: String,
   },
   value: {
     type: String,
@@ -31,7 +33,9 @@ const radioValue = defineModel()
 </script>
 
 <template>
-  <label class="hidden" :for="id">Radio</label>
+  <label class="hidden" :for="id" v-if="label || ariaLabel">{{
+    label || ariaLabel
+  }}</label>
   <q-radio
     v-model="radioValue"
     class="u-radio"
@@ -43,7 +47,7 @@ const radioValue = defineModel()
     :disable="disable"
     :id="id"
   >
-    <div class="text-center text-caption-lg radio-label">
+    <div class="text-center text-caption-lg radio-label" v-if="label">
       {{ label }}
     </div>
   </q-radio>

package/src/components/core/USelectStd.vue

@@ -1,14 +1,17 @@
 <script setup>
 import { computed } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
 
+const emit = defineEmits(['update:modelValue'])
+
 const props = defineProps({
   label: {
     type: String,
-    required: true,
   },
   modelValue: {
-    type: String,
+    type: [String, Number],
     requried: true,
   },
   options: {
@@ -46,6 +49,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  disableAvatar: {
+    type: Boolean,
+    default: true,
+  },
   size: {
     type: String,
     default: 'md',
@@ -63,10 +70,16 @@ const props = defineProps({
     type: String,
     default: 'neutral-7',
   },
+  popupClass: {
+    type: String,
+    default: '',
+  },
+  showErrorIcon: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const model = computed({
   get() {
     return props.modelValue
@@ -79,48 +92,48 @@ const model = computed({
 
 <template>
   <section class="column q-gutter-y-xs">
-    <label for="select" class="row items-center">
+    <label class="row items-center" for="select">
       <div class="u-select-label text-body-sm">
-        {{ label }}
-        <span class="text-red-5 q-ml-xs" v-if="isRequired">*</span>
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 q-ml-xs">*</span>
       </div>
 
       <q-icon
-        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         v-if="toolTipText"
-        size="1rem"
-        color="neutral-9"
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
         aria-hidden="true"
+        color="neutral-9"
+        size="1rem"
       >
         <UTooltip
-          :description="toolTipText"
           anchor="top middle"
+          :description="toolTipText"
           self="bottom middle"
         />
       </q-icon>
     </label>
 
     <q-select
-      class="u-select"
-      :class="`field-${size}`"
-      id="select"
+      v-bind="$attrs"
+      v-model="model"
+      :class="`u-select field-${size}`"
+      :popup-content-class="`u-options-menu ${popupClass}`"
+      bottom-slots
       :color="color"
-      dropdown-icon="img:icons/caret-down.svg"
       emit-value
+      hide-bottom-space
+      id="select"
+      map-options
       :menu-offset="[0, 5]"
-      :option-value="optionValue"
+      :no-error-icon="!showErrorIcon"
       :option-label="optionLabel"
+      :option-value="optionValue"
       :options="options"
-      outlined
       options-selected-class="primary bg-blue-1"
-      popup-content-class="u-options-menu"
-      v-model="model"
-      hide-bottom-space
-      bottom-slots
-      v-bind="$attrs"
+      outlined
+      :placeholder="placeholder"
       :use-input="useInput"
       @filter="filterFn"
-      :placeholder="placeholder"
     >
       <template v-slot:no-option>
         <q-item>
@@ -135,9 +148,8 @@ const model = computed({
       </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="row no-wrap items-center text-neutral-9">
+          <q-icon v-if="hintIcon" :class="hintIcon" size="1rem" />
           <div class="q-mx-xxs text-body-xs">
             {{ hintText }}
           </div>
@@ -145,28 +157,38 @@ const model = computed({
       </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="1rem"
-            />
-          </q-item-section>
-        </q-item>
+        <UMenuItem
+          v-bind="scope.itemProps"
+          class="q-ma-xxs"
+          iconClass="icon-secondary-opacity"
+          :label="scope.opt.label"
+          :leftIcon="scope.opt.leftIcon"
+          :rightIcon="scope.opt.rightIcon"
+          :selected="scope.selected"
+        >
+          <template #leading_slot>
+            <slot name="leading_slot" />
+            <div v-if="!disableAvatar">
+              <UAvatar
+                v-if="scope.opt.avatarUrl"
+                :image="scope.opt.avatarUrl"
+                :name="scope.opt.label"
+                size="md"
+              />
+              <UAvatar v-else :name="scope.opt.label" size="md" />
+            </div>
+          </template>
+          <template #trailing_slot>
+            <slot name="trailing_slot">
+              <q-icon
+                v-if="scope.selected"
+                class="fa-kit-duotone fa-circle-check"
+                color="primary"
+                size="1rem"
+              />
+            </slot>
+          </template>
+        </UMenuItem>
       </template>
     </q-select>
   </section>
@@ -216,20 +238,13 @@ const model = computed({
 
 .u-options-menu
   border-radius: $xs
-  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+  box-shadow: $shadow-2
   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-options-menu
+  .q-item:last-child
+    margin-bottom: $xxs
 </style>