@usssa/component-library 1.0.0-beta.9 → 1.0.0-rc.1

package/src/components/core/UTableStd.vue

@@ -125,6 +125,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  minOverflowLength: {
+    type: Number,
+    default: 12,
+  },
   multiSelection: {
     type: Boolean,
     default: false,
@@ -320,10 +324,9 @@ const handleMenuHide = () => {
 }
 
 const handleMenuShow = (id) => {
- activeMenuId.value = id
- checkMenuPosition(id)
- window.addEventListener('scroll', onScroll, true)
-
+  activeMenuId.value = id
+  checkMenuPosition(id)
+  window.addEventListener('scroll', onScroll, true)
 }
 // handling the large selection data in chunks
 const handleSelectAllData = () => {
@@ -445,7 +448,7 @@ const onRowPerPageChange = (value) => {
 }
 
 const onScroll = () => {
-  if(activeMenuId.value !== null) {
+  if (activeMenuId.value !== null) {
     checkMenuPosition(activeMenuId.value)
   }
 }
@@ -480,6 +483,7 @@ watch(
     :infinite-scroll="infiniteScroll"
     :infinite-scroll-property="infiniteScrollProperty"
     :loading="loading"
+    :minOverflowLength="minOverflowLength"
     :row-card-height="rowCardHeight"
     :select-more-options="selectMoreOptions"
     :separator="separator"
@@ -509,9 +513,11 @@ watch(
         </UTh>
         <template v-for="(col, key) in props.cols">
           <UTh
-            v-if="typeof col.show === 'function'
+            v-if="
+              typeof col.show === 'function'
                 ? col.show()
-                : (typeof col.show === 'undefined' || col.show)"
+                : typeof col.show === 'undefined' || col.show
+            "
             :class="`${col.sortable ? 'cursor-pointer' : ''} ${
               col.headerClasses
             }`"
@@ -580,7 +586,7 @@ watch(
               col.field !== 'action' &&
               (typeof col.show === 'function'
                 ? col.show()
-                : (typeof col.show === 'undefined' || col.show))
+                : typeof col.show === 'undefined' || col.show)
             "
             :class="col.classes"
             :col="col"
@@ -723,6 +729,21 @@ watch(
                     />
                   </div>
                 </div>
+                <div v-if="col.colIcon" class="q-ml-xxs">
+                  <UBtnIcon
+                    :iconClass="col.colIcon.icon"
+                    :ariaLabel="
+                      typeof col.colIcon.ariaLabel === 'function'
+                        ? col.colIcon.ariaLabel(props.row)
+                        : col.colIcon.ariaLabel
+                    "
+                    ref="btn-icon"
+                    size="16px"
+                    @click.stop="col.colIcon.colIconClick()"
+                    @on-click="col.colIcon.colIconClick()"
+                  >
+                  </UBtnIcon>
+                </div>
               </div>
             </template>
             <!-- to show other cell data -->
@@ -733,8 +754,20 @@ watch(
                   col.combineColoumn(props.row)
                     ? ' combine-col-wrapper'
                     : ''
+                } ${
+                  typeof col?.colorMap === 'function'
+                    ? `combine-col-wrapper`
+                    : ``
                 }`"
               >
+                <span
+                  v-if="typeof col?.colorMap === 'function'"
+                  :class="`table-text-colormap-${
+                    col?.colorMap(props.row)?.color
+                  } text-caption-md`"
+                >
+                  {{ col?.colorMap(props.row)?.value }}
+                </span>
                 <div v-if="col.type !== 'icon'">
                   {{ props.row[col.field] }}
                 </div>
@@ -753,7 +786,16 @@ watch(
                   v-if="col.captionKey && col.type !== 'icon'"
                   class="td-caption text-body-xs"
                 >
-                  {{ props.row[col.captionKey] }}
+                  <span
+                    v-if="
+                      col.strikeCaptionKey && props.row[col.strikeCaptionKey]
+                    "
+                    class="text-strike"
+                  >
+                    {{ props.row[col.strikeCaptionKey] }}
+                  </span>
+                  {{ col?.captionKeyPrefix }}
+                  {{ `${props.row[col.captionKey]} ${col?.captionKeyPostfix??''}` }}
                 </div>
                 <template
                   v-if="
@@ -785,9 +827,11 @@ watch(
           <!-- to the action cell, it can have single and multiple  -->
 
           <UTd
-            v-else-if="typeof col.show === 'function'
+            v-else-if="
+              typeof col.show === 'function'
                 ? col.show()
-                : (typeof col.show === 'undefined' || col.show)"
+                : typeof col.show === 'undefined' || col.show
+            "
             :class="col.classes"
             :index="index"
             :separator="separator"
@@ -805,64 +849,100 @@ watch(
                   v-for="(action, key) in getInlineActions(col)"
                   :key="key"
                 >
-                  <UBtnStd
-                    v-if="
-                      typeof action.hide === 'function'
-                        ? !action.hide(props.row)
-                        : true
-                    "
-                    :class="`more-action-icon cursor-pointer table-more-action`"
-                    :iconClass="
-                      typeof action.icon === 'function'
-                        ? action.icon(props.row)
-                        : action.icon
-                    "
-                    :anchor="action.anchor"
-                    :ariaLabel="
-                      typeof action.label === 'function'
-                        ? action.label(props.row)
-                        : action.label
-                    "
-                    :color="
-                      typeof action.color === 'function'
-                        ? action.color(props.row)
-                        : action.color
-                    "
-                    :disable="
-                      typeof action.disable === 'function' &&
-                      action.disable(props.row)
-                    "
-                    :flat="
-                      typeof action.flat === 'function'
-                        ? action.flat(props.row)
-                        : action.flat
-                    "
-                    :label="
-                      typeof action.label === 'function'
-                        ? action.label(props.row)
-                        : action.label
-                    "
-                    :loading="
-                      typeof action.loading === 'function'
-                        ? action.loading(props.row)
-                        : action.loading
-                    "
-                    :offset="action.offset ? action.offset : [10, 40]"
-                    :outline="
-                      typeof action.outline === 'function'
-                        ? action.outline()
-                        : action.outline
-                    "
-                    :self="action.self"
-                    :size="action.size"
-                    :tooltip="
-                      typeof action.tooltip === 'function'
-                        ? action.tooltip(props.row)
-                        : action.tooltip
-                    "
-                    @click.stop="handleMenuEventStop"
-                    @on-click="action.handler(props.row)"
-                  />
+                  <div v-if="action.btnIcon">
+                    <q-icon
+                      v-if="
+                        typeof action.hide === 'function'
+                          ? !action.hide(props.row)
+                          : true
+                      "
+                      :class="`${action.btnIconClass} icon-container-border cursor-pointer`"
+                      :ariaLabel="
+                        typeof action.label === 'function'
+                          ? action.label(props.row)
+                          : action.label
+                      "
+                      color="primary"
+                      :id="`actionPopupRefBtn-${props.row.id}`"
+                      ref="btn-icon"
+                      :showIconBorder="true"
+                      tabindex="0"
+                      size="16px"
+                      @click.stop="handleMenuEventStop"
+                      @on-click="onMoreActionButtonClick(props.row.id)"
+                    />
+                    <UTooltip
+                      anchor="center right"
+                      :description="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :offset="[4, 14]"
+                      self="center start"
+                    />
+                  </div>
+
+                  <div v-else>
+                    <UBtnStd
+                      v-if="
+                        typeof action.hide === 'function'
+                          ? !action.hide(props.row)
+                          : true
+                      "
+                      :class="`more-action-icon cursor-pointer table-more-action`"
+                      :iconClass="
+                        typeof action.icon === 'function'
+                          ? action.icon(props.row)
+                          : action.icon
+                      "
+                      :anchor="action.anchor"
+                      :ariaLabel="
+                        typeof action.label === 'function'
+                          ? action.label(props.row)
+                          : action.label
+                      "
+                      :color="
+                        typeof action.color === 'function'
+                          ? action.color(props.row)
+                          : action.color
+                      "
+                      :disable="
+                        typeof action.disable === 'function' &&
+                        action.disable(props.row)
+                      "
+                      :flat="
+                        typeof action.flat === 'function'
+                          ? action.flat(props.row)
+                          : action.flat
+                      "
+                      :label="
+                        typeof action.label === 'function'
+                          ? action.label(props.row)
+                          : action.label
+                      "
+                      :loading="
+                        typeof action.loading === 'function'
+                          ? action.loading(props.row)
+                          : action.loading
+                      "
+                      :offset="action.offset ? action.offset : [10, 40]"
+                      :outline="
+                        typeof action.outline === 'function'
+                          ? action.outline()
+                          : action.outline
+                      "
+                      :self="action.self"
+                      :size="action.size"
+                      :tooltip="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      @click.stop="handleMenuEventStop"
+                      @on-click="action.handler(props.row)"
+                    />
+                  </div>
                 </template>
                 <!-- Three-dot menu for menu actions -->
                 <UBtnIcon
@@ -1631,7 +1711,6 @@ watch(
   width: 10.5rem
 
 .mobile-primary-caption
-  width: 11.5rem !important
   white-space: nowrap
   overflow: hidden
   text-overflow: ellipsis
@@ -1656,10 +1735,8 @@ watch(
   .u-expansion-body
     display: flex
     flex-wrap: wrap
-    gap: $xs
-
-    > *:not(:last-child)
-      margin-bottom: $ba
+    column-gap: $xs
+    row-gap: $ba
 
     .table-data-avatar
       display: flex
@@ -1682,4 +1759,28 @@ watch(
 
 .mobile-expansion-item
   flex: calc(50% - 8px)
+
+.card-header-table
+  text-overflow: ellipsis
+  overflow: hidden
+  white-space: nowrap
+  display: block
+
+.table-text-colormap-positive
+  color: $green-6 !important
+
+.table-text-colormap-accent
+  color: $red-5 !important
+
+.icon-container-border
+  height: $md
+  width: $md
+  align-items: center
+  border-radius: $xs
+  border: 1.5px solid $primary
+  &:hover
+    background: #234ba926
+  .q-btn--round
+    width: 0px
+    min-width: 0px
 </style>

package/src/components/core/UTooltip.vue

@@ -68,6 +68,7 @@ const getTooltipText = computed(() => {
   border-radius: $xs
   padding: $xs $sm
   max-width: 22.5rem !important
+  word-break: break-word
 
 .tooltip-text
   color: $neutral-1

package/src/components/core/UVenueCard.vue

@@ -0,0 +1,221 @@
+<script setup>
+import { AdvancedMarker, GoogleMap } from 'vue3-google-map'
+import { computed, onMounted, ref } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+import UChip from './UChip.vue'
+import { useScreenType } from '../../composables/useScreenType'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  address: {
+    default: '',
+    type: String,
+  },
+  dataTestId: {
+    type: String,
+    default: 'u-venue-card',
+  },
+  divisionLabel: {
+    default: '',
+    type: String,
+  },
+  divisions: {
+    default: () => [],
+    type: Array,
+  },
+  lat: {
+    default: 0,
+    type: Number,
+  },
+  lng: {
+    default: 0,
+    type: Number,
+  },
+  venueMapBtnLabel: {
+    default: 'Open in Map',
+    type: String,
+  },
+  venueName: {
+    default: '',
+    type: String,
+  },
+  zoom: {
+    default: 14,
+    type: Number,
+  },
+})
+
+const googleApiKey = process.env.GOOGLE_MAP_API_KEY
+
+const $screen = useScreenType()
+
+const addressRef = ref(null)
+const chip = ref(true)
+const isAddressOverflow = ref(false)
+const isVenueNameOverflow = ref(false)
+const venueNameRef = ref(null)
+
+const mapUrl = computed(() => {
+  const encodedName = encodeURIComponent(props.venueName)
+  const latLng = `${props.lat},${props.lng}`
+
+  if ($screen.value.isMobile) {
+    return `https://www.google.com/maps/dir/?api=1&destination=${latLng}`
+  } else {
+    return `https://www.google.com/maps/search/?api=1&query=${encodedName}%20(${latLng})`
+  }
+})
+
+const handleMapBtn = () => {
+  const isMobile = $screen.value.isMobile
+
+  if (isMobile) {
+    window.location.href = mapUrl.value
+  } else {
+    window.open(mapUrl.value, '_blank', 'noopener,noreferrer')
+  }
+}
+
+onMounted(() => {
+  if (venueNameRef.value) {
+    isVenueNameOverflow.value =
+      venueNameRef.value.scrollWidth > venueNameRef.value.clientWidth
+  }
+
+  if (addressRef.value) {
+    isAddressOverflow.value =
+      addressRef.value.scrollWidth > addressRef.value.clientWidth
+  }
+})
+</script>
+
+<template>
+  <q-card v-bind="$attrs" class="u-venue-card full-width">
+    <q-card-section class="u-venue-card-header col">
+      <span
+        class="text-heading-xxs q-mb-0 ellipsis"
+        ref="venueNameRef"
+        tabindex="0"
+      >
+        {{ venueName }}
+      </span>
+      <UTooltip
+        v-if="isVenueNameOverflow"
+        anchor="bottom middle"
+        :description="venueName"
+        :offset="[4, 4]"
+        self="top middle"
+      />
+
+      <span
+        class="text-body-xs text-description ellipsis"
+        ref="addressRef"
+        tabindex="0"
+      >
+        {{ address }}
+      </span>
+      <UTooltip
+        v-if="isAddressOverflow"
+        anchor="bottom middle"
+        :description="address"
+        :offset="[4, 4]"
+        self="top middle"
+      />
+    </q-card-section>
+
+    <q-card-section class="u-venue-card-body">
+      <GoogleMap
+        :api-key="googleApiKey"
+        :center="{ lat, lng }"
+        :clickable-icons="false"
+        :disable-default-u-i="true"
+        :fullscreen-control="false"
+        :gesture-handling="'none'"
+        :keyboard-shortcuts="false"
+        mapId="roadmap"
+        :map-type-control="false"
+        :street-view-control="false"
+        style="width: 100%; height: 7.25rem"
+        :zoom="zoom"
+        :zoom-control="false"
+      >
+        <AdvancedMarker :options="{ position: { lat, lng } }" />
+      </GoogleMap>
+
+      <UBtnStd
+        class="u-venue-card-map-btn"
+        :aria-label="venueMapBtnLabel"
+        color="primary"
+        data-test-id="open-map"
+        :label="venueMapBtnLabel"
+        size="sm"
+        @click="handleMapBtn"
+      />
+    </q-card-section>
+
+    <q-card-section class="u-venue-card-footer">
+      <span class="text-body-sm">{{ divisionLabel }}</span>
+      <div class="width-full chip-container">
+        <UChip
+          v-for="(item, index) in divisions"
+          v-model="chip"
+          :chip-label="item.label"
+          dense
+          :key="index"
+          :removable="false"
+        />
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style lang="sass">
+.u-venue-card
+  display: flex
+  flex-direction: column
+  border-radius: $xs
+  box-shadow: none
+  padding: $ba
+  border: 1px solid $neutral-4
+  gap: $ba
+
+  .u-venue-card-header
+    display: flex
+    flex-direction: column
+    padding: 0
+
+  .u-venue-card-body
+    padding: 0
+    height: 7.25rem
+    background: $neutral-4
+    border-radius: $xs !important
+    position: relative
+
+    .u-venue-card-map-btn
+      position: absolute
+      bottom: $ba
+      right: $ba
+
+  .u-venue-card-footer
+    gap: $xs
+    padding: 0
+
+.chip-container
+  display: flex
+  flex-wrap: nowrap
+  gap: $xs
+  margin-top: $xs
+  overflow-x: auto
+  white-space: nowrap
+  width: 100%
+  max-width: 100%
+  -ms-overflow-style: none  // IE/Edge
+  scrollbar-width: none     // Firefox
+
+  .q-chip
+    flex: 0 0 auto
+    margin: 0 !important
+
+.chip-container::-webkit-scrollbar
+  display: none
+</style>

package/src/components/index.js

@@ -24,6 +24,7 @@ import UInputPhoneStd from './core/UInputPhoneStd.vue'
 import UInputTextStd from './core/UInputTextStd.vue'
 import UInputTypeaheadAdvanceSearch from './core/UInputTypeaheadAdvanceSearch.vue'
 import UMenuButtonStd from './core/UMenuButtonStd.vue'
+import UMatchup from './core/UMatchup.vue'
 import UMenuDropdown from './core/UMenuDropdown.vue'
 import UMenuDropdownAdvancedSearch from './core/UMenuDropdownAdvancedSearch.vue'
 import UMenuItem from './core/UMenuItem.vue'
@@ -44,6 +45,7 @@ import UToolbar from './core/UToolbar/UToolbar.vue'
 import UTooltip from './core/UTooltip.vue'
 import UTypeahead from './core/UTypeahead.vue'
 import UUploader from './core/UUploader.vue'
+import UVenueCard from './core/UVenueCard.vue'
 
 import { useNotify } from '../composables/useNotify.js'
 import { useOverlayLoader } from '../composables/useOverlayLoader.js'
@@ -75,6 +77,7 @@ export {
   UInputPhoneStd,
   UInputTextStd,
   UInputTypeaheadAdvanceSearch,
+  UMatchup,
   UMenuButtonStd,
   UMenuDropdown,
   UMenuDropdownAdvancedSearch,
@@ -99,4 +102,5 @@ export {
   UTooltip,
   UTypeahead,
   UUploader,
+  UVenueCard
 }

package/src/composables/useNotify.js

@@ -44,7 +44,7 @@ export const useNotify = () => {
           `.q-notification__wrapper .q-notification__content`
         )
         if (childElement.childNodes.length == 1) {
-          const iconEleHTML = `<i class='${icon}' aria-label='Custom Icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px;line-height: 1 !important' alt='Custom Icon Alt'></i>`
+          const iconEleHTML = `<i class='${icon} icon-secondary-opacity' aria-label='Custom Icon' style='height:24px; width:24px; font-size: 24px; margin-right: 8px;line-height: 1 !important' alt='Custom Icon Alt'></i>`
           childElement.insertAdjacentHTML('afterbegin', iconEleHTML)
         }
       }
@@ -60,7 +60,7 @@ export const useNotify = () => {
         caption: props.message,
         color: props.type,
         timeout: props.timeout,
-        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId} ${props?.altclasses}`,
+        classes: `u-notify u-type-${props.type} q-notification-elem-${randomId} ${props.altclasses}`,
         position: props.position,
         progress: props.progress,
         icon: props.icon ? handleGetCustomIcon(props.icon, randomId) : null,