@usssa/component-library 1.0.0-beta.5 → 1.0.0-beta.7

package/README.md

@@ -1,6 +1,6 @@
-# Component Library v1.0.0-alpha.150
+# Component Library v1.0.0-alpha.238 
 
-**This library provides custom UI components for USSSA applications.**
+**This library provides custom UI components for USSSA applications**
 
 ## Installation
 
@@ -25,11 +25,11 @@ yarn dev
 
 ## Usage in other local projects
 
-1. Clone the component-library repo and install dependencies
+1. Clone the component-library repo and install dependencies.
 2. In component-library directory run `yarn link`
 3. In Nuxt or Quasar project directory run `yarn link @usssa/component-library`
 
 When done:
 
-1. In Nuxt or Quasar project directory run `yarn unlink @usssa/component-library`
+1. In Nuxt or Quasar project directory run to unlink `yarn unlink @usssa/component-library`
 2. In component-library directory run `yarn unlink`

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
-  "author": "Troy Moreland <troy.moreland@usssa.com>",
+  "author": "Engineering Team <engineering@usssa.com>",
   "main": "src/components/index.js",
   "files": [
     "src/assets",
@@ -39,9 +39,11 @@
     "@usssa/core-client": "^0.0.19",
     "algoliasearch": "4",
     "flag-icons": "^7.2.3",
+    "heic2any": "^0.0.4",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "d3": "^7.9.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",

package/src/assets/VS.svg

@@ -0,0 +1,5 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8001 0H45.4001L34.2001 32H0.600098L11.8001 0Z" fill="#CB2A3D"/>
+<path d="M15.1951 16.8368L16.1599 10.3384H12.1279L10.3999 22.1538H15.2671L23.9647 10.3384H19.9327L15.1951 16.8368Z" fill="white"/>
+<path d="M27.432 15.0645L28.1088 13.2922H35.7552L36.9072 10.3384H27.2304C26.6256 10.3384 26.064 10.5255 25.5456 10.8996C25.0272 11.2639 24.6528 11.7365 24.4224 12.3175L23.2272 15.4338C23.1504 15.6208 23.112 15.8178 23.112 16.0245C23.112 16.4184 23.2512 16.7531 23.5296 17.0288C23.808 17.2947 24.1152 17.4276 24.4512 17.4276H30.6864L29.9952 19.1999H21.7584L20.6064 22.1538H30.6C31.2048 22.1538 31.7664 21.9716 32.2848 21.6073C32.8032 21.243 33.1776 20.7704 33.408 20.1895L34.6032 17.0731C34.6704 16.8959 34.704 16.7138 34.704 16.5267C34.704 16.1328 34.5648 15.7931 34.2864 15.5076C34.0176 15.2122 33.7104 15.0645 33.3648 15.0645H27.432Z" fill="white"/>
+</svg>

package/src/components/core/UAccordionSelect.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onItemClick'])
+
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  dataTestId: {
+    type: String,
+    default: 'accordion-select',
+  },
+  multiple: { type: Boolean, default: false },
+  title: { type: String, default: 'Select Division' },
+})
+
+const activeLineStyles = ref({})
+const selectedRows = ref({})
+const showTooltipFor = ref({})
+
+//Tooltip handling
+const checkEllipsis = (sectionIndex, rowIndex, el) => {
+  if (!el) return
+  setTimeout(() => {
+    const isEllipsed = el.scrollWidth > el.clientWidth
+    if (!showTooltipFor.value[sectionIndex]) {
+      showTooltipFor.value[sectionIndex] = {}
+    }
+    showTooltipFor.value[sectionIndex][rowIndex] = isEllipsed
+  }, 50)
+}
+
+//Selection handling
+const isSelected = (sectionIndex, rowIndex) =>
+  selectedRows.value[sectionIndex]?.includes(rowIndex)
+
+const selectItem = (sectionIndex, rowIndex, item) => {
+  if (item.disabled) return
+
+  let isSelected = false
+  if (props.multiple) {
+    if (!selectedRows.value[sectionIndex]) {
+      selectedRows.value[sectionIndex] = []
+    }
+    const idx = selectedRows.value[sectionIndex].indexOf(rowIndex)
+    if (idx > -1) {
+      selectedRows.value[sectionIndex].splice(idx, 1)
+      isSelected = false
+    } else {
+      selectedRows.value[sectionIndex].push(rowIndex)
+      isSelected = true
+    }
+
+    selectedRows.value[sectionIndex].sort((a, b) => a - b)
+    updateActiveLine(sectionIndex)
+  } else {
+    const alreadySelected =
+      selectedRows.value[sectionIndex]?.[0] === rowIndex &&
+      Object.keys(selectedRows.value).length === 1
+
+    if (alreadySelected) {
+      selectedRows.value = {}
+      activeLineStyles.value = {}
+      isSelected = false
+    } else {
+      selectedRows.value = { [sectionIndex]: [rowIndex] }
+      activeLineStyles.value = {}
+      updateActiveLine(sectionIndex)
+      isSelected = true
+    }
+  }
+
+  emit('onItemClick', { sectionIndex, item, selected: isSelected })
+}
+
+//Active line handling
+const updateActiveLine = (sectionIndex) => {
+  nextTick(() => {
+    const container = document.querySelector(`[data-section="${sectionIndex}"]`)
+    const allRows = [...(container?.querySelectorAll('.row-item') || [])]
+
+    const selectedIndexes = selectedRows.value[sectionIndex] || []
+    const groups = []
+    let currentGroup = []
+
+    selectedIndexes.forEach((idx, i) => {
+      if (i === 0 || idx === selectedIndexes[i - 1] + 1) {
+        currentGroup.push(idx)
+      } else {
+        groups.push(currentGroup)
+        currentGroup = [idx]
+      }
+    })
+    if (currentGroup.length) groups.push(currentGroup)
+
+    activeLineStyles.value[sectionIndex] = groups.map((group) => {
+      const firstEl = allRows[group[0]]
+      const lastEl = allRows[group[group.length - 1]]
+      const top = firstEl.offsetTop
+      const height = lastEl.offsetTop + lastEl.offsetHeight - top
+      return { top: `${top}px`, height: `${height}px` }
+    })
+  })
+}
+
+//Reset when switching to single select
+watch(
+  () => props.multiple,
+  (value) => {
+    if (!value) {
+      selectedRows.value = {}
+      activeLineStyles.value = {}
+      showTooltipFor.value = {}
+    }
+  }
+)
+</script>
+
+<template>
+  <div class="u-accordion-select" :dataTestId="dataTestId">
+    <div class="q-pa-xs">
+      <span class="text-heading-xxs text-dark" tabindex="0">{{ title }}</span>
+    </div>
+
+    <q-expansion-item
+      v-bind="$attrs"
+      v-for="(item, sectionIndex) in data"
+      header-class="q-px-xxs accordion-header text-caption-md"
+      :caption="item.caption"
+      dataTestId="division-item"
+      :disable="item.disabled"
+      :key="sectionIndex"
+      :label="item.title"
+      switch-toggle-side
+    >
+      <div class="content-with-line q-mx-sm" :data-section="sectionIndex">
+        <template
+          v-for="styleObj in activeLineStyles[sectionIndex] || []"
+          :key="styleObj.index"
+        >
+          <div class="active-line" :style="styleObj" />
+        </template>
+
+        <div
+          v-for="(row, rowIndex) in item?.children"
+          :class="[
+            'row-item q-py-xs',
+            row.disabled ? 'disabled' : '',
+            isSelected(sectionIndex, rowIndex) ? 'active' : '',
+          ]"
+          dataTestId="division-child"
+          :key="rowIndex"
+          role="option"
+          :tabindex="row.disabled ? -1 : 0"
+          @click="selectItem(sectionIndex, rowIndex, row)"
+          @keydown.enter.prevent="selectItem(sectionIndex, rowIndex, row)"
+        >
+          <span
+            class="text-body-sm row-text ellipsis"
+            dataTestId="child-item"
+            :ref="(el) => checkEllipsis(sectionIndex, rowIndex, el)"
+          >
+            {{ row.title }}
+            <UTooltip
+              v-if="showTooltipFor[sectionIndex]?.[rowIndex] && row?.title"
+              :description="row?.title"
+            />
+          </span>
+        </div>
+      </div>
+    </q-expansion-item>
+  </div>
+</template>
+
+<style lang="sass">
+.u-accordion-select
+  border: 1.5px solid $neutral-4
+  border-radius: $xs
+  padding: $xxs
+
+  .accordion-header
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding-right: $xxs
+    border-radius: $xxs
+    .q-item__label
+      word-break: break-word
+
+  .q-expansion-item__toggle-icon
+    font-size: $ba
+  .q-expansion-item--expanded .q-expansion-item__toggle-icon
+    line-height: 4.5
+
+  .content-with-line
+    position: relative
+    padding-left: $sm
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      bottom: 2px
+      left: 0
+      width: 2px
+      background-color: $neutral-4
+
+    .active-line
+      position: absolute
+      left: 0
+      width: 2px
+      background-color: $primary
+      z-index: 1
+      border-radius: $xs
+
+  .row-text
+    flex: 1 1 auto
+    word-wrap: break-word
+    min-width: 0px
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis
+
+  .row-item
+    border: 0px
+    cursor: pointer
+    position: relative
+    display: flex
+    align-items: center
+    &:hover:not(.disabled)
+      .row-text
+        color: $primary
+    .row-item.disabled
+      opacity: 0.5
+      cursor: not-allowed
+      pointer-events: none
+</style>

package/src/components/core/UAvatar.vue

@@ -23,9 +23,13 @@ const props = defineProps({
     type: String,
   },
   indicatorColor: {
-    type: String,
+    type: [Function, String, Object],
     default: 'neutral-4',
   },
+  indicatorIcon: {
+    type: [Function, String, Object],
+    default: '',
+  },
   name: {
     type: String,
     required: true,
@@ -111,13 +115,17 @@ const handleClick = () => {
       {{ initials }}
     </span>
     <UBadgeStd
-      v-if="showIndicator"
+      v-if="!indicatorIcon && showIndicator && indicatorColor"
       :class="`indicator`"
       :color="indicatorColor"
       size="xs"
       tabindex="-1"
       type="indicator"
     />
+    <div v-if="showIndicator && indicatorIcon" class="indicator-icon">
+      <q-icon :class="`${indicatorIcon}`" :color="indicatorColor" />
+    </div>
+
     <slot name="item" />
   </q-avatar>
 </template>
@@ -140,6 +148,9 @@ const handleClick = () => {
       width: $xs
       height: $xs
 
+    .q-icon
+      font-size: $xs
+
     .q-avatar__content .name
       line-height: $xs !important
 
@@ -151,6 +162,9 @@ const handleClick = () => {
       width: $xs
       height: $xs
 
+    .q-icon
+      font-size: $sm
+
   &.size-lg
     width: $md
     height: $md
@@ -159,6 +173,9 @@ const handleClick = () => {
       width: $sm
       height: $sm
 
+    .q-icon
+      font-size: $sm
+
   &.size-xl
     width: $lg
     height: $lg
@@ -167,6 +184,21 @@ const handleClick = () => {
       width: $ba
       height: $ba
 
+    .q-icon
+      font-size: $ba
+
+  .indicator-icon
+    position: absolute
+    bottom: -$xxs
+    right: -$xxs
+    width: $sm
+    height: $sm
+    border-radius: 50%
+    background: $neutral-1
+    display: flex
+    justify-content: center
+    align-items: center
+
   .indicator
     position: absolute
     bottom: 0

package/src/components/core/UBannerStd.vue

@@ -97,19 +97,19 @@ const handleSecondaryActionClick = () => {
     <template v-slot:action>
       <div :class="['row', $screen.isMobile ? 'full-width q-mt-ba' : '']">
         <u-btn-std
-          v-if="primaryActionLabel"
+          v-if="secondaryActionLabel"
           :color="type"
-          :label="primaryActionLabel"
+          :label="secondaryActionLabel"
           :outline="true"
           size="md"
-          @onClick="handlePrimaryActionClick"
+          @onClick="handleSecondaryActionClick"
         />
         <u-btn-std
-          v-if="secondaryActionLabel"
+          v-if="primaryActionLabel"
           :color="type"
-          :label="secondaryActionLabel"
+          :label="primaryActionLabel"
           size="md"
-          @onClick="handleSecondaryActionClick"
+          @onClick="handlePrimaryActionClick"
         />
       </div>
     </template>
@@ -149,31 +149,31 @@ const handleSecondaryActionClick = () => {
   background: $green-1 !important
   color: $green-7 !important
   &.bordered
-    border: 1.5px solid $green-7
+    border: 0.094rem solid $green-7
 
 .u-banner-info
   background: $purple-1 !important
   color: $info !important
   &.bordered
-    border: 1.5px solid $purple-7
+    border: 0.094rem solid $purple-7
 
 .u-banner-warning
   background: $orange-1 !important
   color: $orange-7 !important
   &.bordered
-    border: 1.5px solid $orange-7
+    border: 0.094rem solid $orange-7
 
 .u-banner-accent
   background: $red-1 !important
   color: $red-7 !important
   &.bordered
-    border: 1.5px solid $red-7
+    border: 0.094rem solid $red-7
 
 .u-banner-primary
   background: $blue-1 !important
   color: $primary !important
   &.bordered
-    border: 1.5px solid $primary
+    border: 0.094rem solid $primary
 
 .no-padding-label
   .q-banner__content