@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.210

package/src/components/core/UAvatarGroup.vue

@@ -1,16 +1,23 @@
 <script setup>
 import { computed } from 'vue'
-import UTooltip from './UTooltip.vue'
 import UAvatar from './UAvatar.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onClick'])
 const props = defineProps({
+  avatarLimit: {
+    type: Number,
+    default: 4,
+  },
   color: {
     type: String,
     default: 'primary',
   },
-  icon: {
+  dataTestId: {
     type: String,
+    default: 'avatar-group',
   },
-  size: {
+  icon: {
     type: String,
   },
   image: {
@@ -23,73 +30,76 @@ const props = defineProps({
     type: String,
     default: 'neutral-4',
   },
-  name: {
-    type: String,
-    required: true,
-  },
-  showIndicator: {
+  round: {
     type: Boolean,
     default: false,
   },
-  round: {
+  showEachTooltip: {
     type: Boolean,
     default: true,
   },
-  avatarLimit: {
-    type: Number,
-    default: 4,
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
   },
 })
 
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
+// computed properties
 const displayedAvatars = computed(() => {
   return props.images.slice(0, props.avatarLimit)
 })
 const remainingAvatars = computed(() => {
   return props.images.slice(props.avatarLimit)
 })
+
+//custom functions
+const handleClick = () => {
+  return emit('onClick')
+}
 </script>
 
 <template>
-  <UAvatar
-    v-for="(avatar, index) in displayedAvatars"
-    class="avatarGroup"
-    :name="avatar.name"
-    :size="size"
-    :showIndicator="showIndicator"
-    :indicatorColor="indicatorColor"
-    :round="round"
-    :image="avatar.image"
-    :key="index"
-    @click="handleClick"
-  />
-
-  <q-icon
-    :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
-    color="primary"
-    aria-label="See more Avatar"
-    v-if="remainingAvatars.length"
-  >
-    <UTooltip
-      anchor="bottom middle"
-      description=""
-      self="top middle"
-      :offset="[4, 4]"
+  <div :dataTestId="dataTestId">
+    <UAvatar
+      v-for="(avatar, index) in displayedAvatars"
+      class="avatarGroup"
+      :aria-label="avatar.name"
+      :image="avatar.image"
+      :indicatorColor="indicatorColor"
+      :key="index"
+      :name="avatar.name"
+      :round="round"
+      :showIndicator="showIndicator"
+      :showTooltip="showEachTooltip"
+      :size="size"
+      tabindex="0"
+      @click="handleClick"
+    />
+    <q-icon
+      v-if="remainingAvatars.length"
+      :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
+      aria-label="See more Avatar"
+      color="primary"
     >
-      <template v-slot:item>
-        <div class="text-body-xs tooltip-text">
-          <span v-for="(avatar, index) in remainingAvatars" :key="index">
-            {{ avatar.name }}<br />
-          </span>
-        </div>
-      </template>
-    </UTooltip>
-  </q-icon>
+      <UTooltip
+        anchor="bottom middle"
+        description=""
+        :offset="[4, 4]"
+        self="top middle"
+      >
+        <template v-slot:item>
+          <div class="text-body-xs tooltip-text">
+            <span v-for="(avatar, index) in remainingAvatars" :key="index">
+              {{ avatar.name }}<br />
+            </span>
+          </div>
+        </template>
+      </UTooltip>
+    </q-icon>
+  </div>
 </template>
 <style lang="sass">
 .additonalUsersAvatar:after
@@ -97,7 +107,6 @@ const remainingAvatars = computed(() => {
   border-radius:50%
 
 .additonalUsersAvatar
-  cursor: pointer
 
   &.size-sm
     font-size: $ba !important
@@ -113,6 +122,7 @@ const remainingAvatars = computed(() => {
 
 .avatarGroup
   margin: -0.125rem
+
 .avatarGroup:not(:nth-child(1)) .q-avatar__content
     border: 1.5px solid $neutral-1
     background : lightgray 0px -0.033px / 100% 150.273% no-repeat

package/src/components/core/UBadgeStd.vue

@@ -6,6 +6,10 @@ const props = defineProps({
     type: String,
     default: 'primary',
   },
+  dataTestId: {
+    type: String,
+    default: 'badge-std'
+  },
   label: {
     type: String,
     default: '',
@@ -42,10 +46,11 @@ const currentColor = computed(() => {
           : `text-overline-sm`
         : '',
     ]"
+    :aria-label="label"
     :color="currentColor"
+    :dataTestId="dataTestId"
     rounded
     tabindex="0"
-    :aria-label="label"
   >
     <div v-if="type === 'basic'">
       {{ label }}

package/src/components/core/UBannerStd.vue

@@ -1,34 +1,57 @@
 <script setup>
+import { computed } from 'vue'
 import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
 
 const props = defineProps({
-  type: {
+  dataTestId: {
     type: String,
-    default: 'info',
+    default: 'banner-std',
   },
   icon: {
     type: String,
     default: 'fa-kit-duotone fa-circle-info',
   },
+  label: {
+    type: String,
+    default: '',
+  },
   message: {
     type: String,
     default: '',
     required: true,
   },
+  primaryActionLabel: {
+    type: String,
+  },
+  secondaryActionLabel: {
+    type: String,
+  },
   show: {
     type: Boolean,
     default: false,
     required: true,
   },
-  primaryActionLabel: {
-    type: String,
+  showBorder: {
+    type: Boolean,
+    default: true,
   },
-  secondaryActionLabel: {
+  type: {
     type: String,
+    default: 'info',
   },
 })
 
-const emit = defineEmits(['primaryAction', 'secondaryAction'])
+const $screen = useScreenType()
+
+const bordered = computed(() => {
+  if (props.showBorder) {
+    return 'bordered'
+  }
+  return ''
+})
 
 const handlePrimaryActionClick = () => {
   emit('primaryAction')
@@ -41,75 +64,121 @@ const handleSecondaryActionClick = () => {
 
 <template>
   <q-banner
-    v-if="show && message"
+    v-if="show && (message.trim() || label.trim())"
+    :class="[
+      `u-banner u-banner-${type}`,
+      !icon ? 'no-padding-label' : '',
+      bordered,
+      $screen.isMobile ? 'u-banner-sm' : 'u-banner-md',
+    ]"
+    :dataTestId="dataTestId"
     inline-actions
-    :class="`u-banner u-banner-${type} ${!icon ? 'no-padding-label' : ''}`"
     tabindex="0"
   >
     <template v-slot:avatar>
       <q-icon
         v-if="icon"
-        aria-label="Banner Icon"
         :class="icon"
-        size="1.5rem"
-        :color="type"
         alt="Banner Info Icon"
+        aria-label="Banner Icon"
+        :color="type"
+        size="sm"
       />
     </template>
-    <span class="text-caption-lg">{{ message }}</span>
+
+    <div>
+      <span v-if="!label" class="text-caption-lg">{{ message }}</span>
+      <div v-else class="column">
+        <span class="text-caption-lg">{{ label }}</span>
+        <span class="text-body-sm">{{ message }}</span>
+      </div>
+    </div>
+
     <template v-slot:action>
-      <u-btn-std
-        v-if="primaryActionLabel"
-        :flat="false"
-        :label="primaryActionLabel"
-        @onClick="handlePrimaryActionClick"
-        :color="type"
-        size="md"
-      />
-      <u-btn-std
-        class="q-ml-sm"
-        :outline="true"
-        v-if="secondaryActionLabel"
-        :label="secondaryActionLabel"
-        @onClick="handleSecondaryActionClick"
-        :color="type"
-        size="md"
-      />
+      <div :class="['row', $screen.isMobile ? 'full-width q-mt-ba' : '']">
+        <u-btn-std
+          v-if="secondaryActionLabel"
+          :color="type"
+          :label="secondaryActionLabel"
+          :outline="true"
+          size="md"
+          @onClick="handleSecondaryActionClick"
+        />
+        <u-btn-std
+          v-if="primaryActionLabel"
+          :color="type"
+          :label="primaryActionLabel"
+          size="md"
+          @onClick="handlePrimaryActionClick"
+        />
+      </div>
     </template>
   </q-banner>
 </template>
 
 <style lang="sass">
 .u-banner
-  min-width: 24.563rem
-  padding: $sm
   .q-banner__avatar
     align-self: center
 
   .q-banner__content
     padding-left: $xs !important
+    word-break: break-word
+    overflow-wrap: break-word
+
+.u-banner-sm
+  flex-wrap: wrap
+  padding: $ba
+  .q-banner__actions
+    width: 100%
+    padding-left: 0px !important
+    >div
+      gap: $sm
+    .q-btn
+      flex: 1
+      min-width: 0
+
+.u-banner-md
+  padding: $sm
+  .q-banner__actions
+    padding-left: $xs
+    >div
+      gap: $xs !important
 
 .u-banner-positive
   background: $green-1 !important
   color: $green-7 !important
+  &.bordered
+    border: 0.094rem solid $green-7
 
 .u-banner-info
   background: $purple-1 !important
   color: $info !important
+  &.bordered
+    border: 0.094rem solid $purple-7
 
 .u-banner-warning
   background: $orange-1 !important
   color: $orange-7 !important
+  &.bordered
+    border: 0.094rem solid $orange-7
 
 .u-banner-accent
   background: $red-1 !important
   color: $red-7 !important
+  &.bordered
+    border: 0.094rem solid $red-7
 
 .u-banner-primary
   background: $blue-1 !important
   color: $primary !important
+  &.bordered
+    border: 0.094rem solid $primary
 
 .no-padding-label
   .q-banner__content
     padding-left: 0px !important
+
+.bordered
+  border-radius: $xs
 </style>

package/src/components/core/UBreadCrumbs.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScreenType } from '../../composables/useScreenType'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  activeColor: {
+    type: String,
+    default: 'primary',
+  },
+  align: {
+    type: String,
+    default: 'left',
+  },
+  dataTestId: {
+    type: String,
+    default: 'breadcrumbs-std',
+  },
+  fontTypo: {
+    type: String,
+    default: 'text-caption-sm',
+  },
+  links: {
+    type: Array,
+    default: () => [],
+  },
+  showActiveRoute: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const router = useRouter()
+const $screen = useScreenType()
+
+const isOverflowing = ref(false)
+const textEl = ref(null)
+
+const currentLink = computed(() => {
+  return props.links[props.links.length - 1]
+})
+
+const lastTwoLinks = computed(() => {
+  return props.links.slice(-2)
+})
+
+const previousLinks = computed(() => {
+  if (props.links.length < 2) return []
+  return props.links.slice(0, -1).reverse()
+})
+
+const previousLinksForDesktop = computed(() => {
+  if (props.links.length <= 2) return []
+  return props.links.slice(0, -2).reverse()
+})
+
+const showMenuDropdown = computed(() => {
+  if ($screen.value.isMobile) {
+    if (previousLinks.value.length) {
+      return true
+    }
+  } else {
+    if (previousLinksForDesktop.value.length) {
+      return true
+    }
+  }
+  return false
+})
+
+const checkOverflow = () => {
+  if (textEl.value) {
+    isOverflowing.value = textEl.value.scrollWidth > textEl.value.clientWidth
+  }
+}
+
+const onClick = (link) => {
+  if (link.to) router.push(link.to)
+}
+</script>
+
+<template>
+  <q-breadcrumbs
+    v-bind="$attrs"
+    class="u-breadcrumb"
+    :active-color="showActiveRoute ? activeColor : 'text-dark'"
+    :align="align"
+    :dataTestId="dataTestId"
+    gutter="none"
+    separator-color="text-dark"
+  >
+    <template v-slot:separator>
+      <span :class="fontTypo">/</span>
+    </template>
+
+    <!-- Dropdown for previous links -->
+    <q-breadcrumbs-el v-if="showMenuDropdown">
+      <span :class="`${fontTypo} cursor-pointer`">...</span>
+      <q-menu class="breadcrumb-menu">
+        <q-list class="u-menu-dropdown">
+          <q-item
+            v-for="(link, i) in $screen.isMobile
+              ? previousLinks
+              : previousLinksForDesktop"
+            class="u-menu-link"
+            clickable
+            :key="i"
+            @click="onClick(link)"
+          >
+            <q-item-section
+              :class="`text-body-sm text-${
+                showActiveRoute ? activeColor : 'dark'
+              }`"
+            >
+              {{ link.label }}
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-breadcrumbs-el>
+
+    <!-- For mobile -->
+
+    <q-breadcrumbs-el
+      v-if="currentLink && $screen.isMobile"
+      :class="fontTypo"
+      :aria-label="currentLink.label"
+      @click="onClick"
+    >
+      <div class="ellipsis-label" ref="textEl" @mouseenter="checkOverflow">
+        {{ currentLink?.label }}
+      </div>
+      <UTooltip v-if="isOverflowing" :description="currentLink?.label" />
+    </q-breadcrumbs-el>
+
+    <!-- For Desktop and Tablet -->
+
+    <template v-if="lastTwoLinks && !$screen.isMobile">
+      <q-breadcrumbs-el
+        v-for="(link, index) in lastTwoLinks"
+        :class="`${fontTypo}`"
+        :aria-label="link.label"
+        :key="index"
+        :to="link.to"
+        @click="onClick"
+      >
+        <div class="ellipsis-label" ref="textEl" @mouseenter="checkOverflow">
+          {{ link.label }}
+        </div>
+        <UTooltip v-if="isOverflowing" :description="link.label" />
+      </q-breadcrumbs-el>
+    </template>
+  </q-breadcrumbs>
+</template>
+
+<style lang="sass">
+.u-breadcrumb
+  .q-breadcrumbs__separator
+    margin-left: $xs
+    margin-right: $xs
+  .ellipsis-label
+    max-width: 80vw
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+.breadcrumb-menu
+  .u-menu-dropdown
+    .u-menu-link.q-item
+      padding: $xxs $xs
+      gap: 0px
+</style>