@usssa/component-library 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist/component-library/components/core/UTabBtnStd.vue

@@ -0,0 +1,176 @@
+<script setup>
+import UBadgeStd from './UBadgeStd.vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+  standard: {
+    type: Boolean,
+    default: false,
+  },
+  buttonTabsOptions: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const selectedTab = defineModel('selectedTab', {
+  type: [String, Number],
+  default: null,
+})
+
+const emit = defineEmits(['onTabClick'])
+
+const handleTabClick = (value) => {
+  emit('onTabClick', value)
+}
+</script>
+
+<template>
+  <q-tabs
+    dense
+    indicator-color="transparent"
+    inline-label
+    :model-value="selectedTab"
+    no-caps
+    class="u-tabs-outer"
+    :active-class="`u-tab-active ${standard ? 'tab-standard' : ''}`"
+  >
+    <template v-for="(tabOption, key) in buttonTabsOptions" :key="tabOption.id">
+      <q-tab
+        v-if="tabOption.icon"
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :ripple="false"
+        :disable="tabOption.disable"
+        :name="tabOption.id"
+        :aria-label="tabOption.label"
+        @click="handleTabClick(tabOption.id)"
+      >
+        <template v-slot:default>
+          <q-icon
+            v-if="tabOption.icon"
+            :class="tabOption.icon"
+            :aria-label="tabOption.label"
+            :alt="tabOption.label"
+          />
+          <p class="u-tab-label truncated-label left-icon-label">
+            {{ tabOption.label ? tabOption.label : '' }}
+          </p>
+          <UBadgeStd
+            v-if="tabOption.badgeLabel"
+            :label="tabOption.badgeLabel"
+            color="primary"
+            :size="size === 'md' ? 'md' : ''"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
+          />
+        </template>
+      </q-tab>
+      <q-tab
+        v-else
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :ripple="false"
+        :name="tabOption.id"
+        :aria-label="tabOption.label"
+        :disable="tabOption.disable"
+        @click="handleTabClick(tabOption.id)"
+      >
+        <template v-slot:default>
+          <p class="u-tab-label truncated-label">
+            {{ tabOption.label ? tabOption.label : '' }}
+          </p>
+          <UBadgeStd
+            v-if="tabOption.badgeLabel"
+            :label="tabOption.badgeLabel"
+            color="primary"
+            :size="size === 'md' ? 'md' : ''"
+            :class="`q-ml-xs ${size === 'sm' ? 'badge-small' : ''}`"
+          />
+        </template>
+      </q-tab>
+    </template>
+  </q-tabs>
+</template>
+
+<style lang="sass">
+.u-tabs-outer
+  .u-tab-label
+    margin: 0
+    font-weight: 500
+
+  .u-tab-button
+    flex: 0 auto
+    border: 1px solid $neutral-4
+    border-radius: $xs
+    color: $dark
+    gap: $xs
+    max-width: 12.5rem
+    word-wrap: break-word
+
+    .truncated-label
+      flex: 1
+      white-space: normal
+      overflow-wrap: anywhere
+
+    &:hover
+      background: $neutral-2
+
+    & .badge-small
+      line-height: 1.013rem !important
+      & div
+        font-size: 0.55rem
+
+.u-tabs-outer
+  .left-icon-label
+    margin-left: $ba
+
+  .u-tab-sm
+    padding: 0 $sm
+    margin: $xxs
+
+  .q-tab__content
+    padding: $xxs 0
+
+    .u-tab-label
+      font-size: $sm
+
+    .q-icon
+      font-size: 1rem
+      position: absolute
+      left: -4px
+
+  .u-tab-md
+    padding: 0 $ba
+
+    .q-tab__content
+      padding: $xs 0
+
+    .u-tab-label
+      font-size: 0.875rem
+
+    .q-icon
+      font-size: 1.2rem
+      position: absolute
+      left: -8px
+
+  .u-tab-active
+    background: $blue-1 !important
+    color: $primary !important
+
+  .tab-standard
+    background: $primary !important
+    color: $neutral-1 !important
+
+  .u-tab-badge-sm
+    font-size: $xs
+    font-weight: 500
+
+  .u-tab-badge-md
+    font-size: $sm
+    font-weight: 500
+</style>

package/dist/component-library/components/core/UTable/UTable.vue

@@ -0,0 +1,93 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  rowKey: {
+    type: String,
+    default: 'name',
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false,
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: null,
+  type: Boolean,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+</script>
+
+<template>
+  <q-table
+    v-bind="$attrs"
+    :title="title"
+    :columns="columns"
+    :rows="rows"
+    :row-key="rowKey"
+    :flat="flat"
+    :bordered="bordered"
+    :separator="separator"
+    :loading="loading"
+    hide-pagination
+    :grid="grid"
+    :class="`u-table ${virtualScroll ? 'u-virtualscroll-table' : ''} ${
+      grid ? 'u-virtualscroll-grid-table' : ''
+    } ${stickyHeader ? 'u-sticky-table-header' : ''} ${
+      showPagination && pagination.rowsPerPage < 50
+        ? 'force-auto-height-table'
+        : ''
+    }`"
+    :virtual-scroll="!grid && virtualScroll"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[0]"
+    :virtual-scroll-item-size="48"
+    :virtual-scroll-sticky-size-start="48"
+  >
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
+      <slot :name="slotName" v-bind="{ ...scope }" />
+    </template>
+  </q-table>
+</template>

package/dist/component-library/components/core/UTable/UTd.vue

@@ -0,0 +1,63 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: [Object, Array, Number, String],
+  },
+  col: {
+    type: [Object, Array, Number, String],
+  },
+  index: { type: Number },
+  tableDataAutoWidth: {
+    type: Boolean,
+    default: true,
+  },
+  tableDataAlignment: {
+    type: String,
+    default: 'left',
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+})
+</script>
+
+<template>
+  <q-td
+    :class="`u-td-std text-body-sm u-td-primary-text ${
+      tableDataAutoWidth ? 'td-col-auto-width' : ''
+    } text-${tableDataAlignment} ${
+      separator === 'vertical' || separator === 'none'
+        ? 'no-border-bottom-cell'
+        : ''
+    }`"
+    v-bind="$attrs"
+    :auto-width="tableDataAutoWidth"
+  >
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
+      <slot :name="slotName" v-bind="{ ...scope }" />
+    </template>
+  </q-td>
+</template>
+
+<style lang="sass">
+.u-td-std
+  min-height: $xl
+  padding: $xs !important
+  color: $dark
+  background: $surface-bg-1
+  width: 11.938rem
+  line-height: 1.5rem
+  letter-spacing: .01786rem
+  border-bottom: 1.5px solid $neutral-4 !important
+
+.u-td-primary-text
+  font-size: 0.875rem !important
+
+.td-col-auto-width
+  width: 1px !important
+</style>

package/dist/component-library/components/core/UTable/UTh.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  tableHeaderAutoWidth: {
+    type: Boolean,
+    default: true,
+  },
+  tableHeadAlignment: {
+    type: String,
+    default: 'left',
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+})
+</script>
+
+<template>
+  <q-th
+    :class="`u-table-th text-caption-md text-${tableHeadAlignment} ${
+      tableHeaderAutoWidth ? 'th-col-auto-width' : ''
+    } ${separator === 'none' ? 'no-border-bottom-cell' : ''}`"
+    v-bind="$attrs"
+    :auto-width="tableHeaderAutoWidth"
+  >
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
+      <slot :name="slotName" v-bind="{ ...scope }" />
+    </template>
+  </q-th>
+</template>
+
+<style lang="sass">
+.u-table-th
+  min-height: $xl
+  width: 16.188rem
+  padding: $xs !important
+  border-bottom: 1.5px solid $neutral-4 !important
+  background: $neutral-1
+  font-size: 0.875rem !important
+  color: $description
+
+.th-col-auto-width
+  width: auto !important
+</style>

package/dist/component-library/components/core/UTable/UTr.vue

@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  tableRowHover: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <q-tr v-bind="$attrs" :no-hover="tableRowHover" :props="props">
+    <template
+      v-for="(_, slotName, index) in $slots"
+      v-slot:[slotName]="scope"
+      :key="index"
+    >
+      <slot :name="slotName" v-bind="{ ...scope }" />
+    </template>
+  </q-tr>
+</template>