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

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.202
+# 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.202",
+  "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/core/UExpansionTableStd.vue

@@ -0,0 +1,287 @@
+<script setup>
+import { ref } from "vue";
+import { UAvatar, UExpansionStd, UTableStd, useScreenType } from "src/components";
+
+const emit = defineEmits(["onCustomSort", "onLoadMore"]);
+
+const columns = defineModel("columns", {
+  default: () => [],
+  type: Array,
+});
+const expansionMinHeight = defineModel("expansionMinHeight", {
+  default: 14,
+  type: Number,
+});
+const filteredRows = defineModel("filteredRows", { default: [], type: Array });
+const grid = defineModel("grid", {
+  default: false,
+  type: Boolean,
+});
+const infiniteScroll = defineModel("infiniteScroll", {
+  default: false,
+  type: Boolean,
+});
+const infiniteScrollProperty = defineModel("infiniteScrollProperty", {
+  default: () => {
+    return {
+      color: "primary",
+      height: "55rem",
+      image: "",
+      loading: false,
+      loadingMessage: "Loading data",
+      noMoreData: false,
+      noMoreDataText: "No more data",
+      padding: true,
+      size: "1rem",
+      type: "default",
+    };
+  },
+  type: Object,
+});
+const loading = defineModel("table-loading", {
+  default: () => {},
+  type: Boolean,
+});
+const moreActionDialogData = defineModel("moreActionDialogData", {
+  type: Object,
+  default: null,
+});
+const pagination = defineModel("pagination", {
+  default: { page: 1, rowsPerPage: 5 },
+  type: Object,
+});
+const rows = defineModel("rows", {
+  default: () => [],
+  type: Array,
+});
+const rowCardHeight = defineModel("gridCardHeight", {
+  default: 25,
+  type: Number,
+});
+const selectedRows = defineModel("selectedRows", {
+  default: () => [],
+  type: Array,
+});
+const separator = defineModel("separator", {
+  default: "horizontal",
+  type: String,
+});
+const showPagination = defineModel("showPagination", {
+  default: false,
+  type: Boolean,
+});
+const stickyHeader = defineModel("stickyHeader", {
+  default: false,
+  type: Boolean,
+});
+const tableRowHover = defineModel("tableRowHover", {
+  default: false,
+  type: Boolean,
+});
+const tableTitle = defineModel("tableTitle", {
+  default: "",
+  type: String,
+});
+
+const props = defineProps({
+  caption: {
+    type: String,
+    default: "",
+  },
+  collapsedAriaLabel: {
+    type: String,
+    default: "Collapsed",
+  },
+  dataTestId: {
+    type: String,
+    default: "expansion-table-std",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  enableGridOn: {
+    type: Array,
+    default: () => ["tablet", "mobile"],
+  },
+  enableIconToggle: {
+    type: Boolean,
+    default: false,
+  },
+  enableSelection: {
+    type: Boolean,
+    default: false,
+  },
+  expandAriaLabel: {
+    type: String,
+    default: "Expand",
+  },
+  expansionIconClass: {
+    type: String,
+    default: "fa-kit fa-caret-down",
+  },
+  expansionIconColor: {
+    type: String,
+    default: "description",
+  },
+  expansionIconSize: {
+    type: String,
+    default: "1rem", // accept px , rem and (xs|sm|md|lg|xl)
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  option: {
+    default: null,
+    type: Object,
+  },
+  showAvatar: {
+    type: Boolean,
+    default: false,
+  },
+  tableCustomClass: {
+    type: String,
+    default: "",
+  },
+  toggleIconLeft: {
+    type: Boolean,
+    default: false,
+  },
+  viewMoreLabel: {
+    type: String,
+    default: "View Options",
+  },
+});
+
+const $screen = useScreenType();
+
+const bordered = ref(false);
+const expansion = ref(false);
+const flat = ref(true);
+const isCustomSort = ref(false);
+const multiSelection = ref(false);
+const verticalMoreActions = ref(true);
+const virtualScroll = ref(false);
+</script>
+
+<template>
+  <UExpansionStd
+    :class="`u-expansion-table ${!$screen.isMobile ? 'desktop-tablet-mode' : ''}`"
+    :caption="caption"
+    :collapsed-aria-label="collapsedAriaLabel"
+    :dataTestId="dataTestId"
+    :disabled="disabled"
+    :enable-icon-toggle="enableIconToggle"
+    :enable-selection="enableSelection"
+    :expand-aria-label="expandAriaLabel"
+    :expansion-icon="expansionIconClass"
+    :expansion-icon-color="expansionIconColor"
+    :label="label"
+    :row-card-height="expansionMinHeight"
+    :toggle-icon-left="toggleIconLeft"
+  >
+    <template v-if="showAvatar" #avatar>
+      <UAvatar name="UExpansion" :round="true" size="lg" />
+    </template>
+    <template #body>
+      <UTableStd
+        v-model:columns="columns"
+        v-model:grid="grid"
+        v-model:pagination="pagination"
+        v-model:loading="loading"
+        v-model:selected-rows="selectedRows"
+        v-model:rows="rows"
+        :customClass="tableCustomClass"
+        :bordered="bordered"
+        :enable-grid-on="enableGridOn"
+        :expansion="expansion"
+        :flat="flat"
+        :infiniteScroll="infiniteScroll"
+        :infiniteScrollProperty="infiniteScrollProperty"
+        :isCustomSort="isCustomSort"
+        :more-action-dialog-data="moreActionDialogData"
+        :multiSelection="multiSelection"
+        :row-card-height="rowCardHeight"
+        :separator="separator"
+        :showPagination="showPagination"
+        :stickyHeader="stickyHeader"
+        :tableRowHover="tableRowHover"
+        :title="tableTitle"
+        :vertical-more-actions="verticalMoreActions"
+        :viewMoreLabel="viewMoreLabel"
+        :virtualScroll="virtualScroll"
+        @onCustomSort="
+          (key, sortOrder, type) => $emit('onCustomSort', key, sortOrder, type)
+        "
+        @onLoadMore="(payload) => $emit('onLoadMore', payload)"
+      />
+    </template>
+  </UExpansionStd>
+</template>
+
+<style lang="sass">
+.u-expansion-table
+ background:  $neutral-2 !important
+ .u-expansion-label > :first-child
+  margin-bottom: $xxs !important
+
+ table tbody tr:last-child
+  .u-td-std
+   border-bottom: none !important
+
+.u-expansion .q-expansion-item__content > :first-child
+  padding: 0px !important
+
+.u-expansion .q-expansion-item__content
+  padding: 0px !important
+
+.desktop-tablet-mode .q-expansion-item__content
+  padding: $xxs !important
+
+.q-table__grid-content
+  .expansion-table-card
+    padding: 0px !important
+    .q-card
+      border-radius: inherit !important
+      border: none !important
+      box-shadow: none
+      .q-list
+        padding: $ba $ba 0px $ba !important
+        column-gap: $xs !important
+        row-gap: $ba !important
+        .q-item
+         .long-text-content
+          width: 8.2rem !important
+      .q-item.q-item-type:first-child
+        grid-column: auto !important
+        padding-top: 0 !important
+        padding-bottom: 0 !important
+        .q-item__section--main
+          display: inline !important
+        .q-item__label.q-item__label--caption span
+          font-weight: normal !important
+          line-height: normal !important
+          width: 100%
+      .q-item.q-item-type:last-child
+        padding-top: 0 !important
+        margin-bottom: 0 !important
+    .u-expansion-body
+      display: flex
+    .expansion-table-card-action
+      display: flex
+      justify-content: space-between
+      align-items: center
+      gap: $xs
+      width: 100%
+      padding: $xs 0px
+
+.expansion-table-card-separator
+ width: 100%
+ padding: $xs $ba
+ background-color: white
+
+.expansion-table-card:last-of-type
+ .q-card .q-list
+  padding-bottom: $xs !important
+</style>