@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/components/core/USelectStd.vue

@@ -0,0 +1,233 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  modelValue: {
+    type: [String, Number],
+    requried: true,
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  optionValue: {
+    type: String,
+  },
+  optionLabel: {
+    type: String,
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  toolTipText: {
+    type: String,
+  },
+  leftIcon: {
+    type: String,
+  },
+  hintText: {
+    type: String,
+  },
+  hintIcon: {
+    type: String,
+    default: 'fa-kit-duotone fa-triangle-exclamation',
+  },
+  placeholder: {
+    type: String,
+    default: 'Select',
+  },
+  useInput: {
+    type: Boolean,
+    required: false,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  noSearchText: {
+    type: String,
+    required: false,
+  },
+  filterFn: {
+    type: Function,
+    required: false,
+  },
+  color: {
+    type: String,
+    default: 'neutral-7',
+  },
+  popupClass: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    return emit('update:modelValue', value)
+  },
+})
+</script>
+
+<template>
+  <section class="column q-gutter-y-xs">
+    <label for="select" class="row items-center">
+      <div class="u-select-label text-body-sm">
+        {{ label }}
+        <span class="text-red-5 q-ml-xs" v-if="isRequired">*</span>
+      </div>
+
+      <q-icon
+        class="q-ml-xs fa-kit-duotone fa-circle-info cursor-pointer"
+        v-if="toolTipText"
+        size="1rem"
+        color="neutral-9"
+        aria-hidden="true"
+      >
+        <UTooltip
+          :description="toolTipText"
+          anchor="top middle"
+          self="bottom middle"
+        />
+      </q-icon>
+    </label>
+
+    <q-select
+      class="u-select"
+      :class="`field-${size}`"
+      id="select"
+      :color="color"
+      emit-value
+      map-options
+      :menu-offset="[0, 5]"
+      :option-value="optionValue"
+      :option-label="optionLabel"
+      :options="options"
+      outlined
+      options-selected-class="primary bg-blue-1"
+      :popup-content-class="`u-options-menu ${popupClass}`"
+      v-model="model"
+      hide-bottom-space
+      bottom-slots
+      v-bind="$attrs"
+      :use-input="useInput"
+      @filter="filterFn"
+      :placeholder="placeholder"
+    >
+      <template v-slot:no-option>
+        <q-item>
+          <q-item-section class="text-grey">
+            {{ noSearchText }}
+          </q-item-section>
+        </q-item>
+      </template>
+
+      <template v-if="leftIcon" v-slot:prepend>
+        <q-icon :class="leftIcon" size="1rem" />
+      </template>
+
+      <template v-if="hintText" v-slot:hint>
+        <div class="row no-wrap items-center text-neutral-9">
+          <q-icon :class="hintIcon" size="1rem" v-if="hintIcon" />
+
+          <div class="q-mx-xxs text-body-xs">
+            {{ hintText }}
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:option="scope">
+        <q-item class="items-center u-custom-option" v-bind="scope.itemProps">
+          <div class="q-pr-xs" v-if="scope.opt.icon">
+            <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
+          </div>
+
+          <q-item-section>
+            <q-item-label class="text-body-sm">
+              {{ scope.opt.label }}
+            </q-item-label>
+            <q-item-label caption v-if="scope.opt.description">
+              {{ scope.opt.description }}
+            </q-item-label>
+          </q-item-section>
+
+          <q-item-section v-if="scope.selected" side>
+            <q-icon
+              class="fa-kit-duotone fa-circle-check"
+              color="primary"
+              size="1rem"
+            />
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+  </section>
+</template>
+
+<style lang="sass">
+.u-select
+  &.q-field--auto-height .q-field__control,
+  &.q-field--auto-height .q-field__native
+    min-height: $md
+    align-items: center
+
+  &.q-field--outlined .q-field__control
+    border-radius: $xs
+    padding: 0 $xs
+
+    &::before
+      background: white
+      border: 1.5px solid $neutral-4
+
+  &.field-sm
+    .q-field__marginal
+      height: $md
+
+  &.field-md
+    .q-field__marginal
+      height: $lg
+
+  &.field-lg
+    .q-field__marginal
+      height: $xl
+
+  &:hover .q-field__control::before
+    border: 1.5px solid $primary
+
+  &.q-field--with-bottom
+    padding-bottom: 0
+
+  .q-field__control:focus-within
+    box-shadow : 0 0 0 2px rgba(35, 75, 169, .20)
+
+  .q-field__bottom
+    padding: 4px 0 0 0
+
+  .q-field__prepend
+    padding-right: $xs
+
+.u-options-menu
+  border-radius: $xs
+  box-shadow: $shadow-2
+  max-height: 11.25rem !important
+  width: 18rem
+  overflow-y: auto
+  scrollbar-width: none
+
+.u-custom-option
+  margin: $xxs
+  border-radius: $xxs
+  padding: $xs
+  min-height: $lg
+</style>

package/src/components/core/UTabBtnStd.vue

@@ -0,0 +1,167 @@
+<script setup>
+import UBadgeStd from './UBadgeStd.vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+  standard: {
+    type: Boolean,
+    default: false,
+  },
+  selectedTab: {
+    type: [String, Number],
+    default: null,
+  },
+  buttonTabsOptions: {
+    type: Array,
+    default: () => [],
+  },
+})
+</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
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :ripple="false"
+        :name="tabOption.id"
+        v-if="tabOption.icon"
+        :aria-label="tabOption.label"
+        :disable="tabOption.disable"
+      >
+        <template v-slot:default>
+          <q-icon
+            :aria-label="tabOption.label"
+            :alt="tabOption.label"
+            v-if="tabOption.icon"
+            :class="tabOption.icon"
+          />
+          <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
+        :class="`u-tab-button text-caption-${size} u-tab-${size} ${
+          key !== buttonTabsOptions.length - 1 ? 'q-mr-xs' : ''
+        }`"
+        :ripple="false"
+        :name="tabOption.id"
+        v-else
+        :aria-label="tabOption.label"
+        :disable="tabOption.disable"
+      >
+        <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/src/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/src/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/src/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/src/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>