webcake-ui-kit 1.2.0 → 1.2.1

package/src/components/table-v2/context/createTableContext.js

@@ -0,0 +1,79 @@
+export function createTableContext() {
+  return {
+    columns: {
+      flat: [],
+      leaf: []
+    },
+
+    rows: {
+      customRow: () => {},
+      customHeaderRow: () => {}
+    },
+
+    data: {
+      source: [],
+      display: [],
+      loading: false,
+      emptyText: ''
+    },
+
+    layout: {
+      bordered: false,
+      size: 'md',
+      tableLayout: 'auto',
+      scroll: null,
+      rowKey: 'key',
+      scrollBarWidth: 0,
+      containerWidth: 0,
+      columnWidths: new Map(),
+      rowHeight: 50,
+      headerHeight: 36
+    },
+
+    sort: {
+      columnKey: null,
+      order: null
+    },
+
+    selection: {
+      selectedRowKeys: [],
+      hideSelectAll: false,
+      columnWidth: 0,
+      type: '',
+      checkAll: false,
+      onChange: (selectedRowKeys, selectedRows) => {},
+      onSelect: (ecord, selected, selectedRows, nativeEvent) => {},
+      onSelectAll: (selected, selectedRows, changeRows) => {},
+      onSelectNone: () => {}
+    },
+
+    draggable: {
+      enabled: false,
+      enableAnimationFlip: false,
+      columnWidth: 0,
+      handleReorder: (fromIndex, toIndex, dataSource) => {},
+      draggingRecord: null,
+      getPreviewEl: null
+    },
+
+    sticky: {
+      leftOffsets: {},
+      rightOffsets: {}
+    },
+
+    virtual: {
+      enabled: false,
+      startIndex: 0,
+      endIndex: 0,
+      offsetY: 0
+    },
+
+    actions: {
+      sort: null,
+      select: null,
+      resize: null,
+      expand: null,
+      reorder: null
+    }
+  }
+}

package/src/components/table-v2/header/TableHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <thead class="ui-table-v2__header">
+    <TableHeaderRow />
+  </thead>
+</template>
+
+<script>
+import TableHeaderRow from './TableHeaderRow.vue'
+
+export default {
+  name: 'TableV2Header',
+  components: { TableHeaderRow },
+  inject: ['tableContext']
+}
+</script>

package/src/components/table-v2/header/TableHeaderCell.vue

@@ -0,0 +1,89 @@
+<template>
+  <th
+    :class="[
+      'ui-table-v2__header-cell',
+      isSelectionCol && 'ui-table-v2__header-cell--selection',
+      isLastItem && 'ui-table-v2__header-cell--last',
+      isSelectionCol && !isHideSelectAll && 'ui-table-v2__header-cell--selection',
+      column.fixed && `ui-table-v2__cell--fixed-${column.fixed}`,
+      isLastFixedLeft && 'ui-table-v2__cell--fixed-left__last',
+      isFirstFixedRight && 'ui-table-v2__cell--fixed-right__first'
+    ]"
+    :style="cellStyle"
+  >
+    <div v-if="isSelectionCol && !isHideSelectAll" class="wrapper-option">
+      <Checkbox :checked="tableContext.selection.checkAll" @change="onCheckAll" />
+    </div>
+
+    <span v-else :class="[column.ellipsis && 'ui-table-v2__header-cell--ellipsis']">{{ column.title }}</span>
+
+    <slot name="drag-handle"></slot>
+  </th>
+</template>
+
+<script>
+import Checkbox from '../../checkbox/Checkbox.vue'
+import { SELECTION_COLUMN } from '../constants.js'
+import { toCssSize } from '../../../utils/common.js'
+
+export default {
+  name: 'TableV2HeaderCell',
+  components: { Checkbox },
+  inject: ['tableContext'],
+  props: {
+    column: { type: Object, required: true },
+    isLastItem: { type: Boolean, default: false },
+    offset: { type: [Number, String], default: 0 }
+  },
+  computed: {
+    isHideSelectAll() {
+      return this.tableContext.selection.hideSelectAll
+    },
+    isSelectionCol: function () {
+      return this.column.type === SELECTION_COLUMN
+    },
+    isLastFixedLeft: function () {
+      if (this.column.fixed !== 'left') return false
+      const cols = this.tableContext.columns.flat
+      let lastKey = null
+      for (let i = 0; i < cols.length; i++) {
+        if (cols[i].fixed === 'left') lastKey = cols[i].key
+      }
+      return lastKey === this.column.key
+    },
+    isFirstFixedRight: function () {
+      if (this.column.fixed !== 'right') return false
+      const cols = this.tableContext.columns.flat
+      for (let i = 0; i < cols.length; i++) {
+        if (cols[i].fixed === 'right') return cols[i].key === this.column.key
+      }
+      return false
+    },
+    cellStyle: function () {
+      const res = { textAlign: this.column.align }
+      if (this.column.fixed) {
+        if (this.column.fixed === 'left') {
+          res.left = toCssSize(this.offset)
+        } else if (this.column.fixed === 'right') {
+          res.right = toCssSize(this.offset)
+        }
+        res.position = 'sticky'
+      }
+      return res
+    }
+  },
+  methods: {
+    onCheckAll: function (checked) {
+      const key = this.tableContext.layout.rowKey
+      const allKeys = this.tableContext.data.display.map(function (r) {
+        return r[key]
+      })
+
+      this.tableContext.actions.select(checked ? allKeys : [], {
+        type: checked ? 'all' : 'none',
+        selected: checked
+      })
+    }
+  }
+}
+</script>

package/src/components/table-v2/header/TableHeaderRow.vue

@@ -0,0 +1,107 @@
+<template>
+  <tr
+    v-bind="customAttrs"
+    v-on="customListeners"
+    :class="['ui-table-v2__header-row', customAttrs.class]"
+    :style="rowStyle"
+  >
+    <TableHeaderCell
+      v-for="(column, index) in tableContext.columns.flat"
+      :key="column.key"
+      :column="column"
+      :is-last-item="index === tableContext.columns.flat.length - 1"
+      :offset="column.fixed === 'left' ? leftStickyOffsets[column.key] : rightStickyOffsets[column.key]"
+    >
+      <template v-if="column.resizable && !isEmpty" #drag-handle>
+        <ColumnDragHandle
+          :column="column"
+          :width="columnWidths.get(column.key)"
+          :min-width="column.minWidth"
+          :max-width="column.maxWidth"
+          @resize="hanldeResize"
+        />
+      </template>
+    </TableHeaderCell>
+    <th v-if="hasScrollBar" class="ui-table-v2__scrollbar-cell" aria-hidden="true" :style="styleFakeScrollbar" />
+  </tr>
+</template>
+
+<script>
+import TableHeaderCell from './TableHeaderCell.vue'
+import { splitProps } from '../../../utils/common.js'
+import ColumnDragHandle from '../ColumnDragHandle.vue'
+
+export default {
+  name: 'TableV2HeaderRow',
+  components: {
+    TableHeaderCell,
+    ColumnDragHandle
+  },
+  inject: ['tableContext'],
+
+  computed: {
+    rowStyle() {
+      return { height: this.tableContext.layout.headerHeight + 'px' }
+    },
+
+    hasScrollBar: function () {
+      const w = parseFloat(this.tableContext.layout.scrollBarWidth)
+      return !!w
+    },
+
+    columnWidths() {
+      return this.tableContext.layout.columnWidths
+    },
+
+    leftStickyOffsets() {
+      return this.tableContext.sticky.leftOffsets
+    },
+
+    rightStickyOffsets() {
+      const scrollBarWidth = parseFloat(this.tableContext.layout.scrollBarWidth) || 0
+      const rightOffsets = Object.fromEntries(
+        Object.entries(this.tableContext.sticky.rightOffsets).map(([key, value]) => [key, value + scrollBarWidth])
+      )
+
+      return rightOffsets
+    },
+
+    hasFixedRight: function () {
+      return Object.keys(this.rightStickyOffsets).length > 0
+    },
+
+    styleFakeScrollbar: function () {
+      if (this.hasFixedRight) {
+        return {
+          position: 'sticky',
+          right: '0'
+        }
+      }
+      return {}
+    },
+
+    customProps: function () {
+      var fn = this.tableContext.rows.customHeaderRow
+      return typeof fn === 'function' ? fn(this.tableContext.columns.flat, 0) || {} : {}
+    },
+
+    customAttrs: function () {
+      return splitProps(this.customProps).attrs
+    },
+
+    customListeners: function () {
+      return splitProps(this.customProps).listeners
+    },
+
+    isEmpty: function () {
+      return this.tableContext.data.display.length === 0
+    }
+  },
+
+  methods: {
+    hanldeResize(width, column) {
+      this.tableContext.actions.resize(column.key, width)
+    }
+  }
+}
+</script>

package/src/components/table-v2/style/table-loading.css

@@ -0,0 +1,19 @@
+.ui-table-v2__loading-wrap {
+  position: relative;
+}
+
+.ui-table-v2__loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: inherit;
+}
+
+.ui-table-v2__loading-wrap--loading > :not(.ui-table-v2__loading-overlay) {
+  pointer-events: none;
+  user-select: none;
+}

package/src/components/table-v2/style/table-wrapper.css

@@ -0,0 +1,287 @@
+.ui-table-v2__wrapper {
+  overflow: hidden;
+  border-radius: var(--rounded-2xl);
+  border-inline-end: 1px solid var(--border-primary);
+  border-inline-start: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__wrapper table {
+  width: 100%;
+  text-align: start;
+  border-radius: 8px 8px 0 0;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.ui-table-v2__wrapper .ui-table-v2__content {
+  border-top: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__wrapper .ui-table-v2__header-hold {
+  border-top: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__wrapper .ui-table-v2__body-hold {
+  border-bottom: 1px solid var(--border-primary);
+}
+
+/* Common betwenn Header and Body */
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__header > tr > th,
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td {
+  color: var(--primary-fg);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr:last-child td {
+  border-bottom: none;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header > tr > th:not(:last-child),
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__body > tr > td:not(:last-child) {
+  border-inline-end: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__table--bordered .ui-table-v2__header .ui-table-v2__header-cell--last {
+  border-inline-end: 1px solid transparent !important;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__header-cell--ellipsis,
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  min-width: 0;
+  display: block;
+}
+
+.ui-table-v2__wrapper ::v-deep .wrapper-option {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ui-table-v2__wrapper ::v-deep .wrapper-option .ui-checkbox {
+  margin: auto;
+}
+
+.ui-table-v2__wrapper ::v-deep .wrapper-option .drag-handle {
+  cursor: grab;
+}
+
+.ui-table-v2__wrapper--ping-left ::v-deep .ui-table-v2__cell--fixed-left__last {
+  box-shadow: var(--shadow-fixed-column-left);
+  border-inline-end: none !important;
+}
+
+.ui-table-v2__wrapper--ping-right ::v-deep .ui-table-v2__cell--fixed-right__first {
+  box-shadow: var(--shadow-fixed-column-right);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-left,
+.ui-table-v2__wrapper::v-deep .ui-table-v2__cell--fixed-right {
+  background: var(--primary-bg);
+  z-index: 2;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-left__last::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: -1px;
+  width: 30px;
+  transform: translateX(100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell--fixed-right__first::before {
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  width: 30px;
+  transform: translateX(-100%);
+  transition: box-shadow 0.3s;
+  content: '';
+  pointer-events: none;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle {
+  position: absolute;
+  top: 0;
+  height: 100% !important;
+  bottom: 0;
+  left: auto;
+  right: -8px;
+  cursor: col-resize;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  width: 16px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle .ui-table-v2__cell-resize-line {
+  display: block;
+  width: 2px;
+  margin-left: 7px;
+  height: 1.6em;
+  background: var(--border-focus);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle.reversed {
+  right: auto;
+  left: -8px;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle:hover .ui-table-v2__cell-resize-line,
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__cell-resize-handle.dragging .ui-table-v2__cell-resize-line {
+  opacity: 1;
+  background-color: #1677ff;
+  height: 100% !important;
+}
+
+/* Header */
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__header > tr > th {
+  background: var(--secondary-bg);
+  padding: var(--spacing-xs);
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+}
+
+/* Body */
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body .ui-table-v2__row {
+  height: 50px;
+}
+
+.ui-table-v2__wrapper ::v-deep .drag-handle {
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  color: var(--secondary-fg, #999);
+}
+
+.ui-table-v2__wrapper ::v-deep .drag-handle:active {
+  cursor: grabbing;
+}
+
+.ui-table-v2__wrapper ::v-deep .sortable-chosen > td {
+  background: var(--accent-1);
+  opacity: 0.8;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td {
+  padding: var(--spacing-xs);
+  font-weight: 400;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > .ui-table-v2__row:hover > td {
+  background: var(--accent-1);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body .ui-table-v2__row--selected > td {
+  background: var(--accent-1);
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__drag-preview .ui-table-v2__body > tr > td {
+  background: var(--primary-bg);
+  position: unset;
+}
+
+/* Empty */
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__body > tr > td:has(.ui-table-v2__row-empty):hover {
+  background: transparent;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty {
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty .wrapper-img {
+  width: 120px;
+  height: 120px;
+  user-select: none;
+}
+
+.ui-table-v2__wrapper ::v-deep .ui-table-v2__row-empty .wrapper-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Scrollbar */
+.ui-table-v2__body-hold::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.ui-table-v2__body-hold::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__body-hold::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__body-hold::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.ui-table-v2__body-hold::-webkit-scrollbar-thumb:vertical {
+  border-left: 2px solid transparent;
+  border-right: 1px solid transparent;
+  background-clip: content-box;
+}
+
+.ui-table-v2__body-hold::-webkit-scrollbar-thumb:horizontal {
+  border-top: 2px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-clip: content-box;
+}
+
+.ui-table-v2__content::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.ui-table-v2__content::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__content::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--border-primary);
+}
+
+.ui-table-v2__content::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.ui-table-v2__content::-webkit-scrollbar-thumb:vertical {
+  border-left: 2px solid transparent;
+  border-right: 1px solid transparent;
+  background-clip: content-box;
+}
+
+.ui-table-v2__content::-webkit-scrollbar-thumb:horizontal {
+  border-top: 2px solid transparent;
+  border-bottom: 1px solid transparent;
+  background-clip: content-box;
+}

package/src/components/table-v2/style/table.css

@@ -0,0 +1,5 @@
+.ui-table-v2 {
+  width: 100%;
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+}

package/src/icons/BoxShadow.vue

@@ -0,0 +1,35 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.8188 19.0986C20.936 18.7828 21 18.4411 21 18.0845V5.91549C21 4.30531 19.6947 3 18.0845 3H5.91549C4.30531 3 3 4.30531 3 5.91549V18.0845C3 18.4411 3.06402 18.7828 3.1812 19.0986C3.59313 20.2088 4.66192 21 5.91549 21H18.0845C19.3381 21 20.4069 20.2088 20.8188 19.0986ZM19.2254 5.91549C19.2254 5.28542 18.7146 4.77465 18.0845 4.77465H5.91549C5.28542 4.77465 4.77465 5.28542 4.77465 5.91549V17.4288V18.0845C4.77465 18.7146 5.28542 19.2254 5.91549 19.2254H18.0845C18.7146 19.2254 19.2254 18.7146 19.2254 18.0845V17.4288V5.91549Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.3"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 20.8534V21C5 22.1046 5.89543 23 7 23H21C22.1046 23 23 22.1046 23 21V6C23 4.89543 22.1046 4 21 4H20.2825C20.7294 4.51231 21 5.1823 21 5.9155V18.0845C21 18.4411 20.936 18.7828 20.8188 19.0986C20.4069 20.2088 19.3381 21 18.0845 21H5.9155C5.59569 21 5.28792 20.9485 5 20.8534Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'BoxShadow',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/Carousel.vue

@@ -0,0 +1,34 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M1.8045 6.90671V17.053C1.8047 18.3081 2.82214 19.3255 4.07721 19.3257H6.42169C6.78413 19.3257 7.07794 19.0318 7.07794 18.6694C7.07794 18.307 6.78413 18.0132 6.42169 18.0132H4.07721C3.547 18.013 3.1172 17.5832 3.117 17.053V6.90671C3.11718 6.37646 3.54698 5.9467 4.07721 5.94651H6.50299C6.86533 5.94641 7.15922 5.65261 7.15924 5.29026C7.15924 4.92788 6.86534 4.63411 6.50299 4.63401H4.07721C2.82213 4.6342 1.80468 5.65156 1.8045 6.90671Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.8833 6.90667V17.0529C20.8831 17.5833 20.4527 18.0131 19.9224 18.0131H17.5779C17.2155 18.0132 16.9216 18.307 16.9216 18.6694C16.9216 19.0318 17.2155 19.3255 17.5779 19.3256H19.9224C21.1776 19.3256 22.1956 18.3082 22.1958 17.0529V6.90667C22.1956 5.6514 21.1776 4.63397 19.9224 4.63397H17.5376C17.1752 4.63397 16.8814 4.92778 16.8814 5.29022C16.8814 5.65263 17.1752 5.94647 17.5376 5.94647H19.9224C20.4528 5.94647 20.8831 6.3763 20.8833 6.90667Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.8409 19.9228C16.8407 20.4531 16.4104 20.883 15.88 20.883H8.11926C7.58905 20.8828 7.15925 20.453 7.15906 19.9228V4.07758C7.15906 3.54718 7.58893 3.11757 8.11926 3.11737H15.88C16.4105 3.11737 16.8409 3.54706 16.8409 4.07758V19.9228ZM18.1534 4.07758C18.1534 2.82216 17.1354 1.80487 15.88 1.80487H8.11926C6.86407 1.80507 5.84656 2.82228 5.84656 4.07758V19.9228C5.84675 21.1779 6.8642 22.1953 8.11926 22.1955H15.88C17.1352 22.1955 18.1532 21.178 18.1534 19.9228V4.07758Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'Carousel',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>