webcake-ui-kit 1.1.19 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -51,6 +51,7 @@
     "./WkTable": "./src/components/table/Table.vue",
     "./WkTabs": "./src/components/tabs/Tabs.vue",
     "./WkTag": "./src/components/tag/Tag.vue",
+    "./WkTextarea": "./src/components/textarea/Textarea.vue",
     "./WkToggle": "./src/components/toggle/Toggle.vue",
     "./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
     "./WkTooltip": "./src/components/tooltip/Tooltip.vue",

package/src/components/table/Table.vue

@@ -35,6 +35,7 @@
             @click="onHeaderClick(col)"
             @keydown.enter.prevent="onHeaderClick(col)"
             @keydown.space.prevent="onHeaderClick(col)"
+            v-bind="customHeader ? customHeader(col, i) : {}"
           >
             <span class="ui-table__th-inner">
               <slot name="headerCell" :column="col">{{ col.title }}</slot>
@@ -57,7 +58,7 @@
           />
         </tr>
       </thead>
-      <tbody class="ui-table__body" :style="bodyStyle">
+      <tbody class="ui-table__body" :style="bodyStyle" @scroll="onBodyScroll">
         <tr v-if="!rows.length" class="ui-table__row ui-table__row--empty">
           <td class="ui-table__cell ui-table__empty-cell" :colspan="totalColumns">
             <slot name="emptyText">
@@ -65,33 +66,56 @@
             </slot>
           </td>
         </tr>
-        <tr
-          v-for="(record, index) in rows"
-          v-else
-          :key="getRowKey(record, index)"
-          :class="['ui-table__row', 'ui-table__row--body', isSelected(record, index) && 'ui-table__row--selected']"
-          :style="{ height: toCssSize(rowHeight) }"
-          @click="onRowClick(record, index, $event)"
-        >
-          <td v-if="hasSelection" class="ui-table__cell ui-table__td ui-table__cell--selection">
-            <WkCheckbox :checked="isSelected(record, index)" @change="checked => onToggleRow(record, index, checked)" />
-          </td>
-          <td
-            v-for="col in columns"
-            :key="colKey(col)"
+        <template v-else>
+          <!-- Top spacer reserves the height of the rows scrolled out above the window. -->
+          <tr v-if="isVirtual" class="ui-table__spacer" :style="{ height: topSpacerHeight + 'px' }" aria-hidden="true">
+            <td class="ui-table__spacer-cell" :colspan="totalColumns" />
+          </tr>
+          <tr
+            v-for="(record, i) in renderRows"
+            :key="getRowKey(record, rowIndex(i))"
             :class="[
-              'ui-table__cell',
-              'ui-table__td',
-              `ui-table__cell--${alignOf(col)}`,
-              col.ellipsis && 'ui-table__cell--ellipsis'
+              'ui-table__row',
+              'ui-table__row--body',
+              isSelected(record, rowIndex(i)) && 'ui-table__row--selected'
             ]"
-            :style="colStyle(col)"
+            :style="{ height: toCssSize(rowHeight) }"
+            v-bind="customRow ? customRow(record, rowIndex(i)) : {}"
+            @click="hasSelection ? onRowClick(record, rowIndex(i), $event) : undefined"
           >
-            <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="index">{{
-              cellText(col, record)
-            }}</slot>
-          </td>
-        </tr>
+            <td
+              v-if="hasSelection"
+              class="ui-table__cell ui-table__td ui-table__cell--selection"
+              @click.stop="onSelectionCellClick(record, rowIndex(i), $event)"
+            >
+              <WkCheckbox :checked="isSelected(record, rowIndex(i))" />
+            </td>
+            <td
+              v-for="col in columns"
+              :key="colKey(col)"
+              :class="[
+                'ui-table__cell',
+                'ui-table__td',
+                `ui-table__cell--${alignOf(col)}`,
+                col.ellipsis && 'ui-table__cell--ellipsis'
+              ]"
+              :style="colStyle(col)"
+            >
+              <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="rowIndex(i)">{{
+                cellText(col, record)
+              }}</slot>
+            </td>
+          </tr>
+          <!-- Bottom spacer reserves the height of the rows below the window. -->
+          <tr
+            v-if="isVirtual"
+            class="ui-table__spacer"
+            :style="{ height: bottomSpacerHeight + 'px' }"
+            aria-hidden="true"
+          >
+            <td class="ui-table__spacer-cell" :colspan="totalColumns" />
+          </tr>
+        </template>
       </tbody>
     </table>
   </div>
@@ -104,6 +128,7 @@ import WkiArrowUp from '../../icons/ArrowUp.vue'
 import WkiArrowDown from '../../icons/ArrowDown.vue'
 import WkiArrowDownUp from '../../icons/ArrowDownUp.vue'
 import { toCssSize } from '../../utils/common'
+import { computeVirtualWindow } from '../../utils/virtualScroll'
 
 function defaultCompare(a, b) {
   if (a == null && b == null) return 0
@@ -137,9 +162,16 @@ export default {
     // Fixed overall height of the table viewport (px number or CSS size). Enables vertical scroll + sticky header.
     height: { type: [Number, String], default: null },
     rowHeight: { type: [Number, String], default: 39 },
-    headerHeight: { type: [Number, String], default: 39 }
+    headerHeight: { type: [Number, String], default: 39 },
+    customRow: { type: Function, default: null },
+    customHeader: { type: Function, default: null },
+    // Virtualize the body: render only the rows visible in the viewport (+ overscan).
+    // Requires a vertical-scroll viewport (height or scroll.y) and a numeric rowHeight.
+    virtual: { type: Boolean, default: false },
+    // Extra rows rendered above and below the viewport to cushion fast scrolling.
+    overscan: { type: Number, default: 8 }
   },
-  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change', 'row-click'],
+  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change'],
   data() {
     return {
       sortField: null,
@@ -147,6 +179,10 @@ export default {
       internalSelected: this.selectedRowKeys.slice(),
       scrollbarWidth: 0,
       colWidths: [],
+      lastClickedIndex: null,
+      scrollTop: 0,
+      containerHeight: 0,
+      rafId: null,
       toCssSize
     }
   },
@@ -188,6 +224,39 @@ export default {
     tableStyle() {
       const scroll = this.scroll || {}
       return scroll.x != null ? { minWidth: toCssSize(scroll.x) } : {}
+    },
+    // Numeric row height — virtualization needs a fixed px value. String sizes are
+    // parsed (e.g. '40px' -> 40); anything unparseable falls back to the prop default.
+    rowHeightPx() {
+      if (typeof this.rowHeight === 'number') return this.rowHeight
+      const parsed = parseFloat(this.rowHeight)
+      return Number.isFinite(parsed) ? parsed : 39
+    },
+    // Virtualization is only meaningful inside a bounded, scrollable viewport.
+    isVirtual() {
+      return this.virtual && this.hasVerticalScroll && this.rows.length > 0
+    },
+    virtualWindow() {
+      return computeVirtualWindow({
+        scrollTop: this.scrollTop,
+        rowHeight: this.rowHeightPx,
+        containerHeight: this.containerHeight,
+        total: this.rows.length,
+        overscan: this.overscan
+      })
+    },
+    // Rows actually committed to the DOM: a slice when virtual, otherwise everything.
+    renderRows() {
+      if (!this.isVirtual) return this.rows
+      return this.rows.slice(this.virtualWindow.startIndex, this.virtualWindow.endIndex)
+    },
+    topSpacerHeight() {
+      return this.isVirtual ? this.virtualWindow.offsetY : 0
+    },
+    bottomSpacerHeight() {
+      if (!this.isVirtual) return 0
+      const rendered = this.renderRows.length * this.rowHeightPx
+      return Math.max(0, this.virtualWindow.totalHeight - this.virtualWindow.offsetY - rendered)
     }
   },
   watch: {
@@ -197,15 +266,48 @@ export default {
   },
   mounted() {
     this.$nextTick(this.syncScrollbarGutter)
+    window.addEventListener('resize', this.onResize)
   },
   updated() {
     this.$nextTick(this.syncScrollbarGutter)
   },
+  // Declare both teardown hooks: Vue 2.7 fires beforeDestroy, Vue 3.4 fires beforeUnmount.
+  // The runtime that doesn't recognize a hook simply ignores it.
+  beforeUnmount() {
+    this.teardown()
+  },
   methods: {
+    teardown() {
+      window.removeEventListener('resize', this.onResize)
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+    },
+    onResize() {
+      this.syncScrollbarGutter()
+    },
+    onBodyScroll(e) {
+      const top = e.target.scrollTop
+      // Coalesce bursts of scroll events into a single state update per frame so we
+      // re-slice at most once per repaint — keeps 10k+ rows smooth.
+      if (this.rafId != null) return
+      this.rafId = requestAnimationFrame(() => {
+        this.rafId = null
+        this.scrollTop = top
+      })
+    },
+    // Absolute index of a rendered row within the full (sorted) dataset.
+    rowIndex(i) {
+      return this.isVirtual ? this.virtualWindow.startIndex + i : i
+    },
     syncScrollbarGutter() {
       if (!this.$el) return
       const body = this.$el.querySelector('.ui-table__body')
       this.scrollbarWidth = body && this.hasVerticalScroll ? body.offsetWidth - body.clientWidth : 0
+      if (body && this.hasVerticalScroll) {
+        this.containerHeight = body.clientHeight
+      }
 
       if (this.hasVerticalScroll) {
         const firstRow = this.$el.querySelector('.ui-table__row--body')
@@ -289,19 +391,48 @@ export default {
       this.$emit('update:selectedRowKeys', keys)
       this.$emit('selection-change', keys, selectedRows)
     },
-    onToggleRow(record, index, checked) {
-      const key = this.getRowKey(record, index)
-      const set = this.internalSelected.filter(k => k !== key)
-      if (checked) set.push(key)
-      this.internalSelected = set
+    handleSelection(record, index, checked, e) {
+      const isShiftKey = e && e.shiftKey
+
+      if (isShiftKey && this.lastClickedIndex != null) {
+        // Shift+click: select range from lastClickedIndex to current index
+        const start = Math.min(this.lastClickedIndex, index)
+        const end = Math.max(this.lastClickedIndex, index)
+        const rangeKeys = []
+        for (let i = start; i <= end; i++) {
+          rangeKeys.push(this.getRowKey(this.rows[i], i))
+        }
+        // Merge with existing selection (union)
+        const set = new Set(this.internalSelected)
+        rangeKeys.forEach(k => set.add(k))
+        this.internalSelected = Array.from(set)
+      } else {
+        // Normal click / Cmd+click: toggle individual row
+        const key = this.getRowKey(record, index)
+        const set = this.internalSelected.filter(k => k !== key)
+        if (checked) set.push(key)
+        this.internalSelected = set
+      }
+      this.lastClickedIndex = index
       this.emitSelection()
     },
+    onSelectionCellClick(record, index, e) {
+      // Click on the checkbox <td> — MouseEvent has modifier keys
+      const currentlySelected = this.isSelected(record, index)
+      this.handleSelection(record, index, !currentlySelected, e)
+    },
+    onRowClick(record, index, e) {
+      // Click on the row body — handle Shift/Cmd selection
+      const isMetaKey = e.metaKey || e.ctrlKey
+      const isShiftKey = e.shiftKey
+      if (!isMetaKey && !isShiftKey) return
+      const key = this.getRowKey(record, index)
+      const currentlySelected = this.internalSelected.includes(key)
+      this.handleSelection(record, index, !currentlySelected, e)
+    },
     onToggleAll(checked) {
       this.internalSelected = checked ? this.rows.map((record, index) => this.getRowKey(record, index)) : []
       this.emitSelection()
-    },
-    onRowClick(record, index, event) {
-      this.$emit('row-click', record, index, event)
     }
   }
 }

package/src/components/table/table.css

@@ -195,3 +195,22 @@
 .ui-table--scroll-y .ui-table__cell--selection {
   width: 44px;
 }
+
+/* ---------- Virtual scroll spacers ---------- */
+/*
+ * Spacer rows reserve the scroll height of the off-window rows. They must paint
+ * nothing (no border/padding/background) so the row-height math stays exact, and
+ * are display:block so their inline height is honored verbatim inside the
+ * block-level scrolling tbody (the real rows are display:table; table-layout:fixed).
+ */
+.ui-table__spacer {
+  display: block;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.ui-table__spacer-cell {
+  padding: 0;
+  border: none;
+}

package/src/components/tag/tag.css

@@ -1,7 +1,7 @@
 .ui-tag {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-6);
   padding: var(--spacing-3xs) var(--spacing-xs);
   border-radius: var(--rounded-lg);
   font-family: var(--font-family-body);
@@ -35,6 +35,10 @@
 /* — sizes — */
 /* sm: mini font, 6px radius, 2px 8px padding — same as base */
 
+.ui-tag--sm {
+  gap: var(--spacing-2xs);
+}
+
 .ui-tag--md {
   border-radius: var(--radius);
   font-size: var(--paragraph-small-font-size);

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,111 @@
+<template>
+  <span
+    :class="[
+      'ui-textarea',
+      `ui-textarea--size-${size}`,
+      `ui-textarea--round-${roundness}`,
+      error && 'ui-textarea--error',
+      disabled && 'ui-textarea--disabled',
+      $attrs.class
+    ]"
+  >
+    <textarea
+      ref="textarea"
+      class="ui-textarea__field"
+      :class="{ 'ui-textarea__field--no-resize': !resizable || autosize }"
+      :value="currentValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :name="name"
+      :rows="rows"
+      :maxlength="maxLength"
+      v-bind="{ ...$attrs, class: undefined }"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    ></textarea>
+    <span v-if="showCounter" class="ui-textarea__counter"
+      >{{ charCount }}<template v-if="maxLength !== undefined"> / {{ maxLength }}</template></span
+    >
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Textarea',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'mini'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
+    },
+    value: { type: [String, Number], default: '' },
+    modelValue: { type: [String, Number], default: undefined },
+    placeholder: { type: String, default: '' },
+    name: { type: String, default: '' },
+    rows: { type: [String, Number], default: 3 },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    resizable: { type: Boolean, default: true },
+    autosize: { type: Boolean, default: false },
+    showCount: { type: Boolean, default: false },
+    maxLength: { type: Number, default: undefined }
+  },
+  emits: ['input', 'change', 'update:modelValue', 'focus', 'blur'],
+  computed: {
+    currentValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value
+    },
+    charCount() {
+      return String(this.currentValue).length
+    },
+    showCounter() {
+      return this.showCount || this.maxLength !== undefined
+    }
+  },
+  watch: {
+    currentValue() {
+      this.$nextTick(this.resize)
+    }
+  },
+  mounted() {
+    this.$nextTick(this.resize)
+  },
+  methods: {
+    focus() {
+      if (this.$refs.textarea) this.$refs.textarea.focus()
+    },
+    blur() {
+      if (this.$refs.textarea) this.$refs.textarea.blur()
+    },
+    resize() {
+      if (!this.autosize || !this.$refs.textarea) return
+      const el = this.$refs.textarea
+      el.style.height = 'auto'
+      el.style.height = el.scrollHeight + 'px'
+    },
+    onInput(e) {
+      const next = e.target.value
+      this.$emit('input', next)
+      this.$emit('update:modelValue', next)
+      this.$emit('change', next, e)
+    },
+    onFocus(e) {
+      this.$emit('focus', e.target.value, e)
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value, e)
+    }
+  }
+}
+</script>
+
+<style src="./textarea.css" scoped></style>

package/src/components/textarea/textarea.css

@@ -0,0 +1,121 @@
+.ui-textarea {
+  display: block;
+  width: 100%;
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+  box-sizing: border-box;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+/* Roundness — Round uses an 18px corner for both sizes; Default tracks size. */
+.ui-textarea--round-default.ui-textarea--size-default {
+  border-radius: var(--rounded-xl);
+}
+
+.ui-textarea--round-default.ui-textarea--size-mini {
+  border-radius: var(--radius);
+}
+
+.ui-textarea--round-round {
+  border-radius: var(--radius-18);
+}
+
+/* Focus (interactive) — wrapper highlights when the field is focused. */
+.ui-textarea:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus-ring);
+}
+
+/* Error (logical) — red border, no base shadow. */
+.ui-textarea--error {
+  border-color: var(--destructive-border);
+  box-shadow: none;
+}
+
+.ui-textarea--error:focus-within {
+  border-color: var(--destructive-border);
+  box-shadow: var(--shadow-focus-ring-error);
+}
+
+/* Disabled — visual only; cursor handled by the inner field. */
+.ui-textarea--disabled {
+  opacity: 0.5;
+}
+
+.ui-textarea--disabled:focus-within {
+  border-color: var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* The native textarea — strips browser chrome and inherits typography. */
+.ui-textarea__counter {
+  display: block;
+  text-align: right;
+  padding: 0 var(--spacing-xs) var(--spacing-xs);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.ui-textarea--size-mini .ui-textarea__counter {
+  padding: 0 var(--spacing-6) var(--spacing-6);
+}
+
+.ui-textarea__field {
+  display: block;
+  width: 100%;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.ui-textarea__field--no-resize {
+  resize: none;
+}
+
+.ui-textarea--size-default .ui-textarea__field {
+  min-height: 60px;
+  padding: var(--spacing-xs);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+}
+
+.ui-textarea--size-mini .ui-textarea__field {
+  min-height: 48px;
+  padding: var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
+/* Round nudges the text off the larger corner (matches Figma insets). */
+.ui-textarea--round-round.ui-textarea--size-default .ui-textarea__field {
+  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+}
+
+.ui-textarea--round-round.ui-textarea--size-mini .ui-textarea__field {
+  padding: var(--spacing-10) var(--spacing-xs) var(--spacing-xs) var(--spacing-10);
+}
+
+.ui-textarea__field::placeholder {
+  color: var(--muted-fg);
+  opacity: 1;
+}
+
+.ui-textarea__field:disabled {
+  cursor: not-allowed;
+}

package/src/index.js

@@ -34,6 +34,7 @@ export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.
 export { default as WkTable } from './components/table/Table.vue'
 export { default as WkTabs } from './components/tabs/Tabs.vue'
 export { default as WkTag } from './components/tag/Tag.vue'
+export { default as WkTextarea } from './components/textarea/Textarea.vue'
 export { default as WkToggle } from './components/toggle/Toggle.vue'
 export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
 export { default as WkTooltip } from './components/tooltip/Tooltip.vue'

package/src/styles/border_radius.css

@@ -7,6 +7,7 @@
   --radius-10: 10px;
   --radius-12: 12px;
   --radius-16: 16px;
+  --radius-18: 18px;
   --radius-24: 24px;
   --radius-infinite: 9999px;
 

package/src/utils/virtualScroll.js

@@ -0,0 +1,37 @@
+/**
+ * Framework-agnostic virtual-scroll window calculator.
+ *
+ * Given the current scroll position and a fixed row height, returns the slice of
+ * rows that should be rendered (plus an overscan buffer) and the vertical offset
+ * needed to position them. Kept as a pure function — no Vue, no DOM — so it works
+ * under both Vue 2.7 and Vue 3.4 Options API (the library bans the Composition API)
+ * and can be unit-tested in isolation.
+ *
+ * @param {Object}  o
+ * @param {number}  o.scrollTop        Current scrollTop of the scroll container (px).
+ * @param {number}  o.rowHeight        Fixed height of a single row (px).
+ * @param {number}  o.containerHeight  Visible height of the scroll viewport (px).
+ * @param {number}  o.total            Total number of rows in the dataset.
+ * @param {number}  o.overscan         Extra rows rendered above/below the viewport.
+ * @returns {{ startIndex: number, endIndex: number, offsetY: number,
+ *            totalHeight: number, visibleCount: number }}
+ */
+export function computeVirtualWindow({ scrollTop, rowHeight, containerHeight, total, overscan }) {
+  const rh = rowHeight > 0 ? rowHeight : 0
+  const over = overscan > 0 ? overscan : 0
+  const count = total > 0 ? total : 0
+
+  // Rows that fit in the viewport. Guard rowHeight=0 to avoid Infinity/NaN.
+  const visibleCount = rh > 0 ? Math.max(1, Math.ceil(containerHeight / rh)) : count
+
+  const startIndex = rh > 0 ? Math.max(0, Math.floor(scrollTop / rh) - over) : 0
+  const endIndex = Math.min(count, startIndex + visibleCount + over * 2)
+
+  return {
+    startIndex,
+    endIndex,
+    offsetY: startIndex * rh,
+    totalHeight: count * rh,
+    visibleCount
+  }
+}