@usssa/component-library 1.0.0-alpha.203 → 1.0.0-alpha.204

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.203
+# Component Library v1.0.0-alpha.204
 
 **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.203",
+  "version": "1.0.0-alpha.204",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

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/index.js

@@ -1,4 +1,4 @@
-// import BtnStd from "./BtnStd.vue";
+import UAccordionSelect from './core/UAccordionSelect.vue'
 import UAvatar from './core/UAvatar.vue'
 import UAvatarGroup from './core/UAvatarGroup.vue'
 import UBadgeStd from './core/UBadgeStd.vue'
@@ -46,6 +46,7 @@ import { useOverlayLoader } from '../composables/useOverlayLoader.js'
 import { useScreenType } from '../composables/useScreenType.js'
 
 export {
+  UAccordionSelect,
   UAvatar,
   UAvatarGroup,
   UBadgeStd,