@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UExpansionStd.vue

@@ -0,0 +1,380 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+import URadioStd from './URadioStd.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['handleSelectChange'])
+const isSelected = defineModel('isSelected', {
+  default: '',
+  type: [String, Number, Object, Array],
+})
+const props = defineProps({
+  caption: {
+    type: String,
+    default: '',
+  },
+  collapsedAriaLabel: {
+    type: String,
+    default: 'Collapsed',
+  },
+  dataTestId: {
+    type: String,
+    default: 'expansion-std',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  enableIconToggle: {
+    type: Boolean,
+    default: false,
+  },
+  enableSelection: {
+    type: Boolean,
+    default: false,
+  },
+  expandAriaLabel: {
+    type: String,
+    default: 'Expand',
+  },
+  expansionButtonProps: {
+    type: Object,
+    default: () => ({
+      flat: true,
+      outline: false,
+      color: 'primary',
+      label: '',
+      size: '',
+      rightIcon: 'fa-kit fa-caret-down',
+      leftIcon: '',
+      disable: false,
+    }),
+  },
+  expansionIcon: {
+    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,
+  },
+  rowCardHeight: {
+    type: Number,
+    default: 20.563,
+  },
+  useExpansionButton: {
+    type: Boolean,
+    default: false,
+  },
+  toggleIconLeft: {
+    type: Boolean,
+    default: false,
+  },
+  toggleIconRotationClass: {
+    type: String,
+    default: 'rotate-180',
+  },
+})
+
+const isExpanded = ref(false)
+const isOverflowing = ref(false)
+const labelRef = ref(null)
+
+const checkOverflow = () => {
+  nextTick(() => {
+    if (labelRef.value) {
+      const el = labelRef.value
+      isOverflowing.value = el.scrollWidth > el.clientWidth
+    }
+  })
+}
+
+const handleChange = (value) => {
+  emit('handleSelectChange', value)
+}
+
+const onIconKeydown = (event) => {
+  if (props.disabled) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleExpansion()
+  }
+}
+
+const toggleExpansion = () => {
+  if (!props.disabled) {
+    isExpanded.value = !isExpanded.value
+  }
+}
+
+watch(
+  () => props.label,
+  () => {
+    checkOverflow()
+  },
+  {
+    immediate: true,
+  }
+)
+</script>
+
+<template>
+  <!-- For expand on expansion icon -->
+  <q-expansion-item
+    v-bind="$attrs"
+    v-if="enableIconToggle"
+    v-model="isExpanded"
+    class="u-expansion"
+    :dataTestId="dataTestId"
+    :disable="disabled"
+    expand-icon-class="hidden"
+    expand-icon-toggle
+    :style="{
+      'min-height': `${isExpanded ? rowCardHeight + 'rem' : 'auto'}`,
+      overflowX: 'hidden',
+    }"
+  >
+    <template v-slot:header>
+      <div class="u-expansion-header">
+        <URadioStd
+          v-if="enableSelection"
+          v-model="isSelected"
+          class="expansion-radio-wrapper"
+          :aria-label="option.ariaLabel"
+          :dataTestId="`expansion-radio-std-${option.id}`"
+          :disable="option.disable || disabled"
+          :id="option.id"
+          :value="option.id"
+          @update:model-value="handleChange"
+        />
+        <q-icon
+          v-if="toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            isExpanded ? toggleIconRotationClass : '',
+          ]"
+          :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+          :tabindex="disabled ? -1 : 0"
+          @click.stop="toggleExpansion"
+          @keydown.stop="onIconKeydown"
+        >
+        </q-icon>
+        <slot name="avatar" />
+        <div class="column u-expansion-label">
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
+        </div>
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-bind="expansionButtonProps"
+            v-if="useExpansionButton"
+            :class="{ 'u-expansion-btn--expanded': isExpanded }"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+            :class="[
+              'cursor-pointer',
+              'icon-secondary-opacity',
+              'transition-all',
+              expansionIcon,
+              isExpanded ? toggleIconRotationClass : '',
+            ]"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :color="expansionIconColor"
+            :size="expansionIconSize"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+        </template>
+      </div>
+    </template>
+    <slot name="body" />
+    <slot name="footer" />
+  </q-expansion-item>
+
+  <!-- For default expansion behavior -->
+  <q-expansion-item
+    v-bind="$attrs"
+    v-else
+    v-model="isExpanded"
+    class="u-expansion"
+    :dataTestId="dataTestId"
+    :disable="disabled"
+    expand-icon-class="hidden"
+    :style="{
+      'min-height': `${isExpanded ? rowCardHeight + 'rem' : 'auto'}`,
+      overflowX: 'hidden',
+    }"
+    :toggle-aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+    @keydown.space.prevent
+  >
+    <template v-slot:header>
+      <div class="u-expansion-header">
+        <URadioStd
+          v-if="enableSelection"
+          v-model="isSelected"
+          class="expansion-radio-wrapper"
+          :aria-label="option.ariaLabel"
+          :dataTestId="`expansion-radio-std-${option.id}`"
+          :disable="option.disable || disabled"
+          :id="option.id"
+          :value="option.id"
+          @update:model-value="handleChange"
+        />
+        <q-icon
+          v-if="toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            isExpanded ? toggleIconRotationClass : '',
+          ]"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+        >
+        </q-icon>
+        <slot name="avatar" />
+        <div class="column u-expansion-label">
+          <span
+            :class="`text-caption-lg text-truncate ${
+              isOverflowing ? `cursor-pointer` : ``
+            }`"
+            ref="labelRef"
+            @mouseenter="checkOverflow"
+            >{{ label }}</span
+          >
+          <UTooltip
+            v-if="isOverflowing"
+            anchor="bottom middle"
+            :description="label"
+            :offset="[14, 14]"
+          />
+          <template v-if="$slots.caption">
+            <slot name="caption" />
+          </template>
+          <template v-else>
+            <span class="text-body-xs text-description">{{ caption }}</span>
+          </template>
+        </div>
+        <template v-if="!toggleIconLeft">
+          <UBtnStd
+            v-if="useExpansionButton"
+            v-bind="expansionButtonProps"
+            :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+            :tabindex="disabled ? -1 : 0"
+            @click.stop="toggleExpansion"
+            @keydown.stop="onIconKeydown"
+          />
+          <q-icon
+            v-else
+            :class="[
+              'cursor-pointer',
+              'icon-secondary-opacity',
+              'transition-all',
+              expansionIcon,
+              isExpanded ? toggleIconRotationClass : '',
+            ]"
+            :color="expansionIconColor"
+            :size="expansionIconSize"
+          />
+        </template>
+      </div>
+    </template>
+    <slot name="body" />
+    <slot name="footer" />
+  </q-expansion-item>
+</template>
+
+<style lang="sass">
+.u-expansion
+  border-radius: $border-radius-sm
+  border: 1px solid $neutral-4
+  overflow: hidden
+  width: 100%
+
+  .q-item
+    padding: $ba !important
+
+  .u-expansion-header
+    width: 100%
+    display: flex
+    align-items: center
+    gap: $xs
+
+  .u-expansion-label
+    flex: 1 1 0
+    min-width: 0
+    word-break: break-word
+    overflow-wrap: break-word
+
+    .text-truncate
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      display: block
+      max-width: 100%
+
+  .q-expansion-item__content > :first-child
+    padding: $xs $ba $ba $ba
+
+  .q-expansion-item__content > :nth-child(2)
+    padding: $ba
+
+  .rotate-180
+    transform: rotate(180deg)
+    transition: 0.3s
+
+  .rotate-90
+    transform: rotate(90deg)
+    transition: 0.3s
+
+  .u-expansion-btn--expanded .q-icon.on-right
+    transform: rotate(180deg)
+    transition: 0.3s
+
+.expansion-radio-wrapper
+  .q-radio__label
+    padding-left: 0px !important
+</style>

package/src/components/core/UExpansionTableStd.vue

@@ -0,0 +1,311 @@
+<script setup>
+import { ref } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UExpansionStd from './UExpansionStd.vue'
+import UTableStd from './UTableStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+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: '',
+  },
+  closeIconLabel: {
+    default: '',
+    type: String,
+  },
+  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,
+  },
+  selectMoreOptions: {
+    default: '',
+    type: String,
+  },
+  showAvatar: {
+    type: Boolean,
+    default: false,
+  },
+  showCustomTable: {
+    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-grid-expansion-table ${
+      !$screen.isMobile
+        ? 'desktop-tablet-mode desktop-expansion-grid-table'
+        : ''
+    }`"
+    :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>
+      <slot v-if="showCustomTable" name="custom_table" />
+      <UTableStd
+        v-else
+        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"
+        :close-icon-label="closeIconLabel"
+        :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"
+        :select-more-options="selectMoreOptions"
+        :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-grid-expansion-table.desktop-tablet-mode.desktop-expansion-grid-table
+  .q-expansion-item__content
+    padding: $xxs !important
+
+.u-grid-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
+
+  .q-expansion-item__content > :first-child
+    padding: 0px !important
+
+  .q-expansion-item__content
+    padding: 0px !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>