@usssa/component-library 1.0.0-alpha.13 → 1.0.0-alpha.130

package/src/components/core/UBreadCrumbs.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  activeColor: {
+    type: String,
+    default: 'primary',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+  dataTestId: {
+    type: String,
+    default: 'breadcrumbs-std',
+  },
+  fontTypo: {
+    type: String,
+    default: 'text-body-lg',
+  },
+  links: {
+    type: Array,
+    default: () => [],
+  },
+  showActiveRoute: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const ariaLabelDisabled = computed(() => {
+  if (!props.clickable) {
+    return `disabled`
+  }
+  return ''
+})
+
+const onClick = (event) => {
+  if (!props.clickable) {
+    event.preventDefault()
+  }
+}
+</script>
+<template>
+  <q-breadcrumbs
+    v-bind="$attrs"
+    class="u-breadcrumb"
+    :active-color="activeColor"
+    :align="align"
+    :dataTestId="dataTestId"
+    gutter="none"
+  >
+    <q-breadcrumbs-el
+      v-for="(link, index) of links"
+      :class="`breadcrumb-label ${fontTypo} ${
+        index === 0
+          ? 'q-mr-xs'
+          : index === links.length - 1
+          ? 'q-ml-xs'
+          : 'q-mx-xs'
+      } ${!showActiveRoute ? 'hide-active-route' : null} ${
+        !clickable ? 'non-clickable-route' : null
+      }`"
+      :aria-label="`${ariaLabelDisabled} ${link.label}`"
+      :key="index"
+      :label="link.label"
+      :to="link.to"
+      @click="onClick"
+    />
+  </q-breadcrumbs>
+</template>
+<style lang="sass">
+.u-breadcrumb
+  .q-breadcrumbs__separator
+    font-size: 1rem
+    font-weight: 500
+    line-height: 1.25rem
+    letter-spacing: 0.03333rem
+
+  .q-router-link--active
+    cursor: default
+
+  .hide-active-route
+    color: $dark !important
+
+  .non-clickable-route
+    cursor: default !important
+    pointer-events: none
+</style>

package/src/components/core/UBtnIcon.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
-  iconClass: {
+  anchor: {
     type: String,
-    required: true,
-    default: 'fa-kit-duotone fa-circle-bolt',
+    default: 'center left',
   },
   ariaLabel: {
     type: String,
@@ -15,10 +16,27 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-icon',
+  },
+  iconClass: {
+    type: String,
+    required: true,
+    default: 'fa-kit-duotone fa-circle-bolt',
+  },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
   round: {
     type: Boolean,
     default: true,
   },
+  self: {
+    type: String,
+    default: 'center end',
+  },
   size: {
     type: String,
     default: 'md',
@@ -32,22 +50,20 @@ const props = defineProps({
     type: String,
     default: 'top',
   },
-  anchor: {
-    type: String,
-    default: 'center left',
-  },
-  self: {
-    type: String,
-    default: 'center end',
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
+const btnClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-4'
+  }
+  return props.color
+})
+const iconColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-9'
+  }
+  return props.color
+})
 const iconSize = computed(() => {
   if (props.size === 'sm') {
     return 'xs'
@@ -58,47 +74,40 @@ const iconSize = computed(() => {
   if (props.size === 'lg') {
     return 'md'
   }
-
   return props.size
 })
-const iconColor = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-9'
-  }
-  return props.color
-})
 
-const btnClass = computed(() => {
-  if (props.color === 'neutral') {
-    return 'neutral-4'
-  }
-  return props.color
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-btn
-    @click="handleClick"
+    :class="`u-btn-icon size-${size} ${btnClass}`"
+    :aria-label="ariaLabel"
+    :dataTestId="dataTestId"
     flat="flat"
     :round="round"
-    :aria-label="ariaLabel"
-    class="u-btn-icon"
-    :class="`size-${size} ${btnClass}`"
+    @click="handleClick"
   >
-    <q-icon
-      :color="iconColor"
-      :aria-hidden="true"
-      :class="`${iconClass} size-${size}`"
-      :size="iconSize"
-    />
-
-    <UTooltip
-      v-if="tooltip"
-      :description="tooltip"
-      :anchor="anchor"
-      :self="self"
-      :offset="[4, 4]"
-    />
+    <template #default>
+      <q-icon
+        :class="`${iconClass} size-${size}`"
+        :aria-hidden="true"
+        :color="iconColor"
+        :size="iconSize"
+      />
+
+      <UTooltip
+        v-if="tooltip"
+        :anchor="anchor"
+        :description="tooltip"
+        :offset="offset"
+        :self="self"
+      />
+      <slot name="menu" />
+    </template>
   </q-btn>
 </template>
 
@@ -140,6 +149,9 @@ const btnClass = computed(() => {
     &.neutral-9
       color: $neutral-9
 
+  &.accent:hover
+    background: $accent-bg-hover
+
 .icon-tooltip
   background: $dark
   border-radius: $xxs

package/src/components/core/UBtnStd.vue

@@ -1,11 +1,17 @@
 <script setup>
 import { computed } from 'vue'
 
+const emit = defineEmits(['onClick'])
+
 const props = defineProps({
   color: {
     type: String,
     default: 'neutral-7',
   },
+  dataTestId: {
+    type: String,
+    default: 'button-std',
+  },
   disable: {
     type: Boolean,
     default: false,
@@ -14,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
   label: {
     type: String,
     default: 'Button',
@@ -21,29 +31,31 @@ const props = defineProps({
   leftIcon: {
     type: String,
   },
-  rightIcon: {
+  leftIconSize: {
     type: String,
+    default: 'ba',
+    validator: (val) => ['sm', 'md', 'lg', 'ms', 'ba'].includes(val),
   },
   outline: {
     type: Boolean,
     default: false,
   },
+  rightIcon: {
+    type: String,
+  },
   size: {
     type: String,
     default: 'md',
     validator: (val) => ['sm', 'md', 'lg'].includes(val),
   },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
+const isFullWidth = computed(() => {
+  if (props.fullWidth === true) {
+    return 'full-width'
+  }
+  return ''
+})
 
 const textClass = computed(() => {
   if (props.color === 'neutral') {
@@ -52,46 +64,48 @@ const textClass = computed(() => {
   return ''
 })
 
-const isFullWidth = computed(() => {
-  if (props.fullWidth === true) {
-    return 'full-width'
-  }
-  return ''
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-btn
-    class="u-btn q-py-none"
-    :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
+    :class="`u-btn q-py-none size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
+    :dataTestId="dataTestId"
     :disable="disable"
-    :unelevated="!outline"
-    :outline="outline"
-    no-caps
     :flat="flat"
+    no-caps
+    :outline="outline"
+    :unelevated="!outline"
     @click="handleClick"
   >
-    <div class="row items-center no-wrap">
-      <q-icon
-        v-if="leftIcon"
-        left
-        :class="leftIcon"
-        class="q-mr-xs"
-        size="1.25rem"
-      />
+    <template #default>
+      <slot name="default">
+        <div class="row items-center no-wrap">
+          <q-icon
+            v-if="leftIcon"
+            :class="`q-mr-xs ${leftIcon}`"
+            left
+            :size="leftIconSize"
+          />
+
+          <div class="text-center text-caption-md button-label">
+            {{ label }}
+          </div>
+          <q-icon
+            v-if="rightIcon"
+            :class="`q-ml-xs ${rightIcon}`"
+            right
+            size="1rem"
+          />
+        </div>
+      </slot>
 
-      <div class="text-center text-caption-md button-label">
-        {{ label }}
-      </div>
-      <q-icon
-        v-if="rightIcon"
-        right
-        :class="rightIcon"
-        class="q-ml-xs"
-        size="1.25rem"
-      />
-    </div>
+      <slot name="tooltip" />
+      <slot name="menu" />
+    </template>
   </q-btn>
 </template>
 
@@ -111,12 +125,10 @@ const isFullWidth = computed(() => {
     min-height: $lg
     padding: 0 $ba !important
 
-
   &.size-lg
     min-height: $xl
     padding: 0 $ba !important
 
-
 .button-label
   word-break: break-all
 </style>

package/src/components/core/UBtnToggle.vue

@@ -1,5 +1,9 @@
 <script setup>
 const props = defineProps({
+  dataTestId: {
+    type: String,
+    default: 'toggle-btn',
+  },
   options: {
     type: Array,
     require: true,
@@ -10,16 +14,17 @@ const model = defineModel()
 
 <template>
   <q-btn-toggle
-    class="u-btn-toggle"
     v-model="model"
-    size="md"
-    text-color="dark"
-    unelevated
+    class="u-btn-toggle"
     color="white"
+    :dataTestId="dataTestId"
     no-caps
+    :options="options"
+    size="md"
     spread
+    text-color="dark"
     toggle-color="primary"
-    :options="options"
+    unelevated
   >
     <template
       v-for="(option, index) in options"
@@ -28,8 +33,8 @@ const model = defineModel()
     >
       <div class="row items-center no-wrap slot">
         <q-icon
-          :class="options[index].iconClass"
           v-if="options[index].iconClass"
+          :class="options[index].iconClass"
         />
         <div class="text-center text-caption-md">
           {{ options[index].name }}

package/src/components/core/UCheckboxStd.vue

@@ -1,23 +1,16 @@
 <script setup>
 import { onMounted } from 'vue'
 
+const isChecked = defineModel({ default: false, type: Boolean })
 const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  name: {
+  dataTestId: {
     type: String,
-    default: '',
+    default: 'checkbox-std',
   },
   disabled: {
     type: Boolean,
     default: false,
   },
-  showLabel: {
-    type: Boolean,
-    default: true,
-  },
   id: {
     type: [String, Number],
     default: 'u-checkbox',
@@ -27,15 +20,27 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const isChecked = defineModel({ default: false, type: Boolean })
-
 onMounted(() => {
   const checkboxElement = document.getElementById(`${props.id}`)
   if (checkboxElement) {
     const inputElement = checkboxElement.querySelector('input')
-    inputElement.id = `${props.id}`
+    if (inputElement) {
+      inputElement.id = `${props.id}`
+    }
   } else {
     // need to add if element is not found
   }
@@ -43,19 +48,20 @@ onMounted(() => {
 </script>
 
 <template>
-  <label style="display: none" :for="`${id}`">Checkbox </label>
+  <label :for="`${id}`" style="display: none">Checkbox</label>
   <q-checkbox
-    :id="`${id}`"
-    class="u-checkbox text-caption-lg"
-    :name="name"
+    v-bind="$attrs"
     v-model="isChecked"
+    class="u-checkbox text-caption-lg"
+    color="primary"
+    :dataTestId="dataTestId"
     :disable="disabled"
+    :id="`${id}`"
+    keep-color
     :label="showLabel ? label : ''"
+    :name="name"
     size="md"
-    keep-color
-    color="primary"
     :toggle-indeterminate="indeterminate"
-    v-bind="$attrs"
   />
 </template>
 

package/src/components/core/UChip.vue

@@ -1,32 +1,46 @@
 <script setup>
 import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
 
+const emit = defineEmits(['update:modelValue', 'onClick'])
 const props = defineProps({
+  anchor: {
+    type: String,
+    default: 'bottom middle',
+  },
+  avatarLabel: {
+    type: String,
+    default: '',
+  },
   chipLabel: {
     type: String,
     default: 'Chip',
   },
-  dense: {
-    type: Boolean,
-    default: false,
+  dataTestId: {
+    type: String,
+    default: 'u-chip'
   },
-  modelValue: {
+  dense: {
     type: Boolean,
     default: false,
   },
-  avatarLabel: {
-    type: String,
-    default: '',
-  },
   icon: {
     type: String,
   },
   iconClass: {
     type: String,
   },
-  type: {
-    type: String,
-    default: 'neutral',
+  isShowTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  offset: {
+    default: () => [14, 14],
+    type: Array,
   },
   removable: {
     type: Boolean,
@@ -35,13 +49,19 @@ const props = defineProps({
   remove: {
     type: Function,
   },
+  type: {
+    type: String,
+    default: 'neutral',
+  },
 })
 
-const emit = defineEmits(['update:modelValue', 'onClick'])
+const avatarLabel = computed(() => {
+  if (props.avatarLabel && props.avatarLabel.length > 2) {
+    return props.avatarLabel.substring(0, 2)
+  }
+  return props.avatarLabel
+})
 
-const handleClick = () => {
-  return emit('onClick')
-}
 const size = computed(() => {
   if (props.dense) {
     return 'xs'
@@ -49,26 +69,24 @@ const size = computed(() => {
   return 'sm'
 })
 
-const avatarLabel = computed(() => {
-  if (props.avatarLabel && props.avatarLabel.length > 2) {
-    return props.avatarLabel.substring(0, 2)
-  }
-  return props.avatarLabel
-})
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
   <q-chip
+    v-bind="$attrs"
     v-if="chipLabel"
     class="u-chip q-px-xs"
-    v-bind="$attrs"
     :class="type"
-    :modelValue="modelValue"
+    :aria-label="chipLabel"
+    :dataTestId="dataTestId"
     :dense="dense"
-    @remove="remove"
+    :modelValue="modelValue"
     :removable="removable"
-    :aria-label="chipLabel"
     @click="handleClick"
+    @remove="remove"
   >
     <q-avatar v-if="avatarLabel" class="u-avatar">
       <span class="text-caption-xs">{{ avatarLabel }}</span>
@@ -79,6 +97,12 @@ const avatarLabel = computed(() => {
     <span :class="`chip-label text-overline-${size} text-uppercase`">
       {{ chipLabel }}
     </span>
+    <UTooltip
+      v-if="isShowTooltip"
+      :anchor="anchor"
+      :description="chipLabel"
+      :offset="offset"
+    />
   </q-chip>
 </template>
 
@@ -87,13 +111,13 @@ const avatarLabel = computed(() => {
   padding: $xs
   border-radius: 20px
   height: $lg
+  margin-left: 0px !important
 
   .u-avatar
     width: $ms
     height: $ms
     margin-left:0 !important
 
-
   .q-icon
     width: $ba
     height: $ba
@@ -106,7 +130,6 @@ const avatarLabel = computed(() => {
     padding: $xs 0 $xs $xs
     margin:0
 
-
   &.neutral
     background-color: $neutral-3
     color: $neutral-9
@@ -223,4 +246,10 @@ const avatarLabel = computed(() => {
 
     .q-chip__icon--remove
       padding: $xxs
+
+.chip-label
+  max-width: 12.5rem
+  white-space: normal
+  overflow-wrap: break-word
+  line-height: 1.2 !important // over-ridding this in long chip label case
 </style>