@usssa/component-library 1.0.0-alpha.147 → 1.0.0-alpha.149

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.147
+# Component Library v1.0.0-alpha.149
 
 **This library provides custom UI components for USSSA applications.**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.147",
+  "version": "1.0.0-alpha.149",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/assets/no-result.svg

@@ -0,0 +1,25 @@
+<svg width="125" height="124" viewBox="0 0 125 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11793_42180)">
+<path d="M62.5 124C96.7417 124 124.5 96.2417 124.5 62C124.5 27.7583 96.7417 0 62.5 0C28.2583 0 0.5 27.7583 0.5 62C0.5 96.2417 28.2583 124 62.5 124Z" fill="#12316C"/>
+<mask id="mask0_11793_42180" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="125" height="124">
+<path d="M62.5 124C96.7417 124 124.5 96.2417 124.5 62C124.5 27.7583 96.7417 0 62.5 0C28.2583 0 0.5 27.7583 0.5 62C0.5 96.2417 28.2583 124 62.5 124Z" fill="#1048BD"/>
+</mask>
+<g mask="url(#mask0_11793_42180)">
+<path d="M-41.5147 19.8398C-78.3898 19.8398 -119.384 46.858 -133.078 80.1865C-146.773 113.515 -127.981 140.533 -91.1059 140.533H68.2098C78.0276 116.747 60.037 90.8359 33.7036 90.8359H-20.6698V126.334L-45.3014 105.035L-86.2352 126.334L-61.0733 90.8359L-86.3264 69.5371H-45.9396L-20.6745 34.0391V69.5371H42.4827C75.6912 69.5371 105.554 49.8552 117.887 19.8398H-41.5147Z" fill="#1048BD"/>
+<rect x="21.9932" y="30.5864" width="80.1867" height="107.467" rx="8" fill="white"/>
+<rect x="30.2598" y="89.2798" width="63.6533" height="23" rx="3" fill="#B9E0FF"/>
+<ellipse cx="39.7664" cy="100.78" rx="4.54667" ry="5.5" fill="white"/>
+<rect x="47.6196" y="98.2798" width="26.4533" height="3" rx="1.5" fill="white"/>
+<rect x="47.6196" y="102.28" width="9.92" height="2" rx="1" fill="white"/>
+<rect x="30.2598" y="115.28" width="63.6533" height="23" rx="3" fill="#B9E0FF"/>
+<ellipse cx="39.7664" cy="126.78" rx="4.54667" ry="5.5" fill="white"/>
+</g>
+<circle opacity="0.2" cx="62.5003" cy="62.0003" r="19.2889" fill="#CB2A3D"/>
+<path d="M69.8603 56.3566C70.3343 55.8826 70.3343 55.1141 69.8603 54.6401C69.3863 54.1662 68.6179 54.1662 68.1439 54.6401L62.5002 60.2838L56.8566 54.6401C56.3826 54.1662 55.6141 54.1662 55.1401 54.6401C54.6662 55.1141 54.6662 55.8826 55.1401 56.3566L60.7838 62.0002L55.1401 67.6439C54.6662 68.1179 54.6662 68.8863 55.1401 69.3603C55.6141 69.8343 56.3826 69.8343 56.8566 69.3603L62.5002 63.7166L68.1439 69.3603C68.6179 69.8343 69.3863 69.8343 69.8603 69.3603C70.3343 68.8863 70.3343 68.1179 69.8603 67.6439L64.2166 62.0002L69.8603 56.3566Z" fill="#CB2A3D"/>
+</g>
+<defs>
+<clipPath id="clip0_11793_42180">
+<rect width="124" height="124" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/core/UBreadCrumbs.vue

@@ -1,5 +1,8 @@
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useScreenType } from '../../composables/useScreenType'
+import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   activeColor: {
@@ -10,17 +13,13 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
-  clickable: {
-    type: Boolean,
-    default: true,
-  },
   dataTestId: {
     type: String,
     default: 'breadcrumbs-std',
   },
   fontTypo: {
     type: String,
-    default: 'text-body-lg',
+    default: 'text-caption-sm',
   },
   links: {
     type: Array,
@@ -32,62 +31,141 @@ const props = defineProps({
   },
 })
 
-const ariaLabelDisabled = computed(() => {
-  if (!props.clickable) {
-    return `disabled`
+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 ''
+  return false
 })
 
-const onClick = (event) => {
-  if (!props.clickable) {
-    event.preventDefault()
+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="activeColor"
+    :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-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"
+      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
-    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
+    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>

package/src/components/core/UInputTextStd.vue

@@ -193,6 +193,7 @@ const handleRightIconClick = () => {
           </div>
         </div>
       </template>
+      <slot name="menu"/>
     </q-input>
   </div>
 </template>

package/src/components/core/UInputTypeahead.vue

@@ -0,0 +1,44 @@
+<script setup>
+import UInputTextStd from './UInputTextStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['updateInputVal'])
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+  searchText: {
+    type: String,
+  },
+})
+
+const $screen = useScreenType()
+
+const updateInputVal = (event) => {
+  emit('updateInputVal', event)
+}
+</script>
+
+<template>
+  <UInputTextStd
+    v-bind="$attrs"
+    :aria-label="label"
+    autocapitalize="off"
+    autocomplete="off"
+    autocorrect="off"
+    :debounce="500"
+    :label="label"
+    :loading="loading"
+    :modelValue="searchText"
+    spellcheck="false"
+    @update:modelValue="updateInputVal($event)"
+  >
+    <template v-if="!$screen.isMobile" v-slot:menu>
+      <slot name="menu" />
+    </template>
+  </UInputTextStd>
+</template>

package/src/components/core/UInputTypeaheadAdvanceSearch.vue

@@ -1,11 +1,26 @@
 <script setup>
 import { ref } from 'vue'
 import UInputTextStd from './UInputTextStd.vue'
+import UInputTypeahead from './UInputTypeahead.vue'
+import USheet from './USheet.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits([
+  'addDialog',
+  'onCloseDialog',
+  'onInputFocus',
+  'updateInputVal',
+])
+
+const dialogs = defineModel('dialogs', { default: () => [], type: Array })
 
 const props = defineProps({
   label: {
     type: String,
   },
+  loading: {
+    type: Boolean,
+  },
   searchText: {
     type: String,
   },
@@ -13,17 +28,23 @@ const props = defineProps({
     type: String,
     default: 'md',
   },
-  loading: {
-    type: Boolean,
-  },
 })
 
-const emit = defineEmits(['updateInputVal', 'onInputBlur'])
+const $screen = useScreenType()
 
 const searchInputRef = ref(null)
 
-const onInputBlur = () => {
-  emit('onInputBlur')
+const onCloseDialog = () => {
+  emit('onCloseDialog')
+}
+
+const onInputFocus = (event) => {
+  setTimeout(() => {
+    emit('addDialog')
+    if (event.target === document.activeElement) {
+      event.target.blur()
+    }
+  }, 300)
 }
 
 const updateInputVal = (event) => {
@@ -32,24 +53,54 @@ const updateInputVal = (event) => {
 </script>
 
 <template>
-  <div :class="`input-search size-${size}`">
-    <UInputTextStd
-      v-bind="$attrs"
-      autocorrect="off"
-      autocapitalize="off"
-      autocomplete="off"
-      :aria-label="label"
-      :debounce="500"
-      :label="label"
-      :loading="loading"
-      :modelValue="searchText"
-      ref="searchInputRef"
-      spellcheck="false"
-      @blur="onInputBlur"
-      @update:modelValue="updateInputVal($event)"
-    />
+  <div class="typeahead-advance-search">
+    <div v-if="$screen.isMobile">
+      <UInputTextStd
+        v-bind="$attrs"
+        :aria-label="label"
+        autocapitalize="off"
+        autocomplete="off"
+        autocorrect="off"
+        :label="label"
+        readonly
+        ref="searchInputRef"
+        @click="onInputFocus"
+        @update:modelValue="updateInputVal($event)"
+      />
+      <USheet
+        v-model:dialogs="dialogs"
+        dialogClass="typeahead-sheet"
+        @onCloseDialog="onCloseDialog"
+      >
+        <template #content>
+          <div class="q-mx-ba">
+            <UInputTypeahead
+              v-bind="$attrs"
+              :aria-label="label"
+              :label="label"
+              :loading="loading"
+              :modelValue="searchText"
+              @update:modelValue="updateInputVal($event)"
+            />
+          </div>
 
-    <slot name="menu"></slot>
+          <slot name="menuContent" />
+        </template>
+      </USheet>
+    </div>
+    <div v-else>
+      <div :class="`input-search size-${size}`">
+        <UInputTypeahead
+          v-bind="$attrs"
+          :aria-label="label"
+          :label="label"
+          :loading="loading"
+          :modelValue="searchText"
+          @update:modelValue="updateInputVal($event)"
+        />
+        <slot name="menu" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -61,4 +112,15 @@ const updateInputVal = (event) => {
     width: 24.5625rem
   &.size-md
     width: 26.5rem
+.typeahead-sheet
+  .sheet-card-wrapper
+    .q-card__section--vert
+      padding:0px
+    .heading-row
+      padding: 0.125rem $ba $xs $ba
+    .q-card__section .q-item
+      padding: $xs $xs $xs $ba !important
+      align-items: center !important
+      border-radius: $xs !important
+      margin-bottom: 0px !important
 </style>

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { computed } from 'vue'
 import UBtnStd from './UBtnStd.vue'
 import UInputPhoneStd from './UInputPhoneStd.vue'
 import UInputTextStd from './UInputTextStd.vue'
 import UMultiSelectStd from './UMultiSelectStd.vue'
 import USelectStd from './USelectStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
 
 const props = defineProps({
   disbaleApplyFilter: {
@@ -48,6 +48,8 @@ const emit = defineEmits([
   'updateAdvanceSearchToggle',
 ])
 
+const $screen = useScreenType()
+
 const clearFields = () => {
   emit('onClearAdvancedSearchFilter')
 }
@@ -118,7 +120,7 @@ const updateToggle = (val) => {
         <slot name="custom-menu" />
       </template>
 
-      <section v-else class="bg-neutral-2 q-px-ba q-pb-ba">
+      <section v-else class="q-px-ba q-pb-ba bg-neutral-2">
         <div class="row items-container">
           <div
             v-for="(item, index) in fields && fields.length ? fields : []"
@@ -277,6 +279,9 @@ const updateToggle = (val) => {
   .action-wrapper
     display: flex
     gap: $xs
+    background: $neutral-2 !important
+    .button-label
+      word-break: break-word
   .q-card__actions
     padding: 0px
     margin: $ba 0px $ba 0px