webcake-ui-kit 1.1.26 → 1.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -17,6 +17,7 @@
     "./styles/*": "./src/styles/*",
     "./WkAccordion": "./src/components/accordion/Accordion.vue",
     "./WkAccordionItem": "./src/components/accordion-item/AccordionItem.vue",
+    "./WkAlert": "./src/components/alert/Alert.vue",
     "./WkAlertDialog": "./src/components/alert-dialog/AlertDialog.vue",
     "./WkAvatar": "./src/components/avatar/Avatar.vue",
     "./WkAvatarStack": "./src/components/avatar-stack/AvatarStack.vue",

package/src/components/alert/Alert.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="ui-alert" :class="`ui-alert--${type}`" role="alert">
+    <div class="ui-alert__body">
+      <span class="ui-alert__icon">
+        <slot name="icon"><component :is="iconComponent" :size="20" /></slot>
+      </span>
+      <div class="ui-alert__content">
+        <div v-if="hasTitle" class="ui-alert__title">
+          <slot>{{ title }}</slot>
+        </div>
+        <div v-if="hasDescription" class="ui-alert__description">
+          <slot name="description">{{ description }}</slot>
+        </div>
+      </div>
+    </div>
+    <div v-if="hasAction" class="ui-alert__action">
+      <slot name="action" />
+    </div>
+    <button v-if="closable" class="ui-alert__close" type="button" aria-label="Close" @click.stop="$emit('close')">
+      <WkiX :size="16" class="ui-alert__close-icon" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { WkiCircleCheck, WkiCircleAlert, WkiTriangleAlert, WkiInfo, WkiX } from '../../icons'
+
+const ICON_BY_TYPE = {
+  neutral: 'WkiCircleCheck',
+  error: 'WkiCircleAlert',
+  warning: 'WkiTriangleAlert',
+  info: 'WkiInfo'
+}
+
+export default {
+  name: 'Alert',
+  components: { WkiCircleCheck, WkiCircleAlert, WkiTriangleAlert, WkiInfo, WkiX },
+  props: {
+    type: {
+      type: String,
+      default: 'neutral',
+      validator: function (v) {
+        return ['neutral', 'error', 'warning', 'info'].includes(v)
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close'],
+  computed: {
+    iconComponent: function () {
+      return ICON_BY_TYPE[this.type] || ICON_BY_TYPE.neutral
+    },
+    hasTitle: function () {
+      return !!(this.title || this.$slots.default)
+    },
+    hasDescription: function () {
+      return !!(this.description || this.$slots.description)
+    },
+    hasAction: function () {
+      return !!this.$slots.action
+    }
+  }
+}
+</script>
+
+<style src="./alert.css" scoped></style>

package/src/components/alert/alert.css

@@ -0,0 +1,117 @@
+.ui-alert {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-10) var(--spacing-sm);
+  border: 1px solid transparent;
+  border-radius: var(--rounded-xl);
+  overflow: hidden;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+/* — layout — */
+.ui-alert__body {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+}
+
+.ui-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.ui-alert__content {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-3xs);
+}
+
+.ui-alert__title {
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-medium-font-weight);
+  word-break: break-word;
+}
+
+.ui-alert__description {
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-font-weight);
+  color: var(--muted-fg);
+  word-break: break-word;
+}
+
+.ui-alert__action {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ui-alert__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--rounded-md);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.ui-alert__close:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.ui-alert__close:focus-visible {
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-alert__close-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* — types — */
+.ui-alert--neutral {
+  background: var(--card);
+  border-color: var(--border-primary);
+  color: var(--primary-fg);
+}
+
+.ui-alert--error {
+  background: var(--destructive-subtle);
+  border-color: var(--destructive-border-subtle);
+  color: var(--destructive-text);
+}
+
+.ui-alert--warning {
+  background: var(--warning-subtle);
+  border-color: var(--warning-border-subtle);
+  color: var(--warning-text);
+}
+
+.ui-alert--info {
+  background: var(--infor-subtle);
+  border-color: var(--infor-border-subtle);
+  color: var(--infor-text);
+}

package/src/components/dropdown/dropdown-menu-items.css

@@ -50,6 +50,10 @@
   color: var(--destructive-text);
 }
 
+.ui-dropdown-items__item--destructive:hover {
+  background: var(--destructive-subtle) !important;
+}
+
 .ui-dropdown-items__item--sub {
   padding-left: calc(var(--spacing-sm) + var(--spacing-md));
 }

package/src/components/select/Select.vue

@@ -75,6 +75,7 @@
             {{ selectedLabel || placeholder }}
           </span>
         </span>
+        <span v-if="append" class="ui-select__append">{{ append }}</span>
         <Spinner v-if="loading" type="mirrored" size="sm" />
         <span v-else class="ui-select__chevron">
           <WkiChevronDown :size="16" />
@@ -152,6 +153,10 @@ export default {
       type: String,
       default: ''
     },
+    append: {
+      type: String,
+      default: ''
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -399,14 +404,41 @@ export default {
       // Vue 3: $slots.default is a function; Vue 2: it's an array
       return typeof this.$slots.default === 'function' ? this.$slots.default() : this.$slots.default || []
     },
+    _slotText(vnode) {
+      // Vue 2: text lives in componentOptions.children as text-vnodes
+      if (vnode.componentOptions && Array.isArray(vnode.componentOptions.children)) {
+        return vnode.componentOptions.children
+          .map(function (c) {
+            return c.text || ''
+          })
+          .join('')
+          .trim()
+      }
+      // Vue 3: text lives in children.default() as vnodes with string .children
+      if (vnode.children && typeof vnode.children.default === 'function') {
+        try {
+          return vnode.children
+            .default()
+            .map(function (c) {
+              return typeof c.children === 'string' ? c.children : ''
+            })
+            .join('')
+            .trim()
+        } catch (e) {
+          return ''
+        }
+      }
+      return ''
+    },
     _syncSlotLabels() {
       const collect = nodes => {
         if (!Array.isArray(nodes)) return
         nodes.forEach(vnode => {
           if (!vnode) return
           const props = vnode.props || (vnode.componentOptions && vnode.componentOptions.propsData)
-          if (props && props.value != null && props.label) {
-            this.registerOption(String(props.value), String(props.label))
+          if (props && props.value != null) {
+            const label = props.label || this._slotText(vnode)
+            if (label) this.registerOption(String(props.value), String(label))
           }
           if (Array.isArray(vnode.children)) collect(vnode.children)
         })
@@ -419,8 +451,9 @@ export default {
         for (const vnode of nodes) {
           if (!vnode) continue
           const props = vnode.props || (vnode.componentOptions && vnode.componentOptions.propsData)
-          if (props && String(props.value) === String(value) && props.label) {
-            return String(props.label)
+          if (props && String(props.value) === String(value)) {
+            const label = props.label || this._slotText(vnode)
+            if (label) return String(label)
           }
           if (Array.isArray(vnode.children)) {
             const found = scan(vnode.children)

package/src/components/select/select.css

@@ -70,7 +70,8 @@
   color: var(--muted-fg);
 }
 
-.ui-select__prepend {
+.ui-select__prepend,
+.ui-select__append {
   font-family: var(--font-family-body);
   font-size: var(--paragraph-small-font-size);
   line-height: var(--paragraph-small-line-height);
@@ -145,7 +146,8 @@
 }
 
 .ui-select--xs .ui-select__value,
-.ui-select--xs .ui-select__prepend {
+.ui-select--xs .ui-select__prepend,
+.ui-select--xs .ui-select__append {
   font-size: var(--paragraph-mini-font-size);
   line-height: var(--paragraph-mini-line-height);
 }

package/src/components/switch/switch.css

@@ -13,6 +13,7 @@
   transition: background 0.15s ease;
   box-shadow: var(--shadow-xs);
   outline: none;
+  background: var(--color-neutral-300);
 }
 
 .ui-switch--on {

package/src/components/table/Table.vue

@@ -6,7 +6,7 @@
     <table class="ui-table__table" :style="tableStyle">
       <colgroup>
         <col v-if="hasSelection" class="ui-table__col ui-table__col--selection" />
-        <col v-for="col in columns" :key="colKey(col)" :style="colStyle(col)" />
+        <col v-for="col in normalizedColumns" :key="col._key" :style="col._style" />
       </colgroup>
       <thead class="ui-table__head">
         <tr
@@ -21,17 +21,17 @@
             <WkCheckbox :checked="allSelected" :disabled="!rows.length" @change="onToggleAll" />
           </th>
           <th
-            v-for="(col, i) in columns"
-            :key="colKey(col)"
+            v-for="(col, i) in normalizedColumns"
+            :key="col._key"
             :class="[
               'ui-table__cell',
               'ui-table__th',
-              `ui-table__cell--${alignOf(col)}`,
-              isSortable(col) && 'ui-table__th--sortable'
+              `ui-table__cell--${col._align}`,
+              col._isSortable && 'ui-table__th--sortable'
             ]"
             :style="headCellStyle(hasSelection ? i + 1 : i, col)"
-            :tabindex="isSortable(col) ? 0 : undefined"
-            :aria-sort="ariaSort(col)"
+            :tabindex="col._isSortable ? 0 : undefined"
+            :aria-sort="col._ariaSort"
             @click="onHeaderClick(col)"
             @keydown.enter.prevent="onHeaderClick(col)"
             @keydown.space.prevent="onHeaderClick(col)"
@@ -41,12 +41,12 @@
             <span class="ui-table__th-inner">
               <slot name="headerCell" :column="col">{{ col.title }}</slot>
               <span
-                v-if="isSortable(col)"
-                :class="['ui-table__sort', sortStateOf(col) ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
+                v-if="col._isSortable"
+                :class="['ui-table__sort', col._sortState ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
                 aria-hidden="true"
               >
-                <WkiArrowUp v-if="sortStateOf(col) === 'ascend'" :size="16" />
-                <WkiArrowDown v-else-if="sortStateOf(col) === 'descend'" :size="16" />
+                <WkiArrowUp v-if="col._sortState === 'ascend'" :size="16" />
+                <WkiArrowDown v-else-if="col._sortState === 'descend'" :size="16" />
                 <WkiArrowDownUp v-else :size="16" />
               </span>
             </span>
@@ -93,15 +93,15 @@
               <WkCheckbox :checked="isSelected(record, rowIndex(i))" />
             </td>
             <td
-              v-for="col in columns"
-              :key="colKey(col)"
+              v-for="col in normalizedColumns"
+              :key="col._key"
               :class="[
                 'ui-table__cell',
                 'ui-table__td',
-                `ui-table__cell--${alignOf(col)}`,
+                `ui-table__cell--${col._align}`,
                 col.ellipsis && 'ui-table__cell--ellipsis'
               ]"
-              :style="colStyle(col)"
+              :style="col._style"
             >
               <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="rowIndex(i)">{{
                 cellText(col, record)
@@ -189,6 +189,41 @@ export default {
     }
   },
   computed: {
+    selectedKeysSet() {
+      return new Set(this.internalSelected)
+    },
+    normalizedColumns() {
+      return this.columns.map(col => {
+        const _key = col.key != null ? col.key : col.dataIndex
+        const _align = ['left', 'right', 'center'].includes(col.align) ? col.align : 'left'
+        let _style = {}
+        if (col.width != null) {
+          _style = { width: typeof col.width === 'number' ? `${col.width}px` : col.width }
+        }
+        const _isSortable = !!col.sorter
+        const _field = col.dataIndex != null ? col.dataIndex : col.key
+
+        let _sortState = null
+        if (this.sortField === _field) {
+          _sortState = this.sortOrder
+        }
+
+        let _ariaSort = undefined
+        if (_sortState === 'ascend') _ariaSort = 'ascending'
+        else if (_sortState === 'descend') _ariaSort = 'descending'
+
+        return {
+          ...col,
+          _key,
+          _align,
+          _style,
+          _isSortable,
+          _field,
+          _sortState,
+          _ariaSort
+        }
+      })
+    },
     hasSelection() {
       return !!this.rowSelection
     },
@@ -198,7 +233,7 @@ export default {
     rows() {
       const data = this.dataSource.slice()
       if (!this.sortField || !this.sortOrder) return data
-      const col = this.columns.find(c => this.fieldOf(c) === this.sortField)
+      const col = this.normalizedColumns.find(c => c._field === this.sortField)
       if (!col || !col.sorter) return data
       const cmp =
         typeof col.sorter === 'function' ? col.sorter : (a, b) => defaultCompare(a[this.sortField], b[this.sortField])
@@ -208,7 +243,7 @@ export default {
     },
     allSelected() {
       if (!this.rows.length) return false
-      return this.rows.every((record, index) => this.internalSelected.includes(this.getRowKey(record, index)))
+      return this.rows.every((record, index) => this.selectedKeysSet.has(this.getRowKey(record, index)))
     },
     hasVerticalScroll() {
       return this.height != null || !!(this.scroll && this.scroll.y != null)
@@ -365,40 +400,15 @@ export default {
       if (this.hasVerticalScroll && this.colWidths[index] !== undefined) {
         return { width: `${this.colWidths[index]}px` }
       }
-      return col ? this.colStyle(col) : {}
-    },
-    fieldOf(col) {
-      return col.dataIndex != null ? col.dataIndex : col.key
-    },
-    colKey(col) {
-      return col.key != null ? col.key : col.dataIndex
-    },
-    colStyle(col) {
-      if (col.width == null) return {}
-      return { width: typeof col.width === 'number' ? `${col.width}px` : col.width }
-    },
-    alignOf(col) {
-      return ['left', 'right', 'center'].includes(col.align) ? col.align : 'left'
+      return col ? col._style : {}
     },
     cellText(col, record) {
-      const field = this.fieldOf(col)
+      const field = col._field
       return field != null ? record[field] : ''
     },
-    isSortable(col) {
-      return !!col.sorter
-    },
-    sortStateOf(col) {
-      return this.sortField === this.fieldOf(col) ? this.sortOrder : null
-    },
-    ariaSort(col) {
-      const state = this.sortStateOf(col)
-      if (state === 'ascend') return 'ascending'
-      if (state === 'descend') return 'descending'
-      return undefined
-    },
     onHeaderClick(col) {
-      if (!this.isSortable(col)) return
-      const field = this.fieldOf(col)
+      if (!col._isSortable) return
+      const field = col._field
       let order
       if (this.sortField !== field) {
         order = 'ascend'
@@ -417,7 +427,7 @@ export default {
       return key != null ? key : index
     },
     isSelected(record, index) {
-      return this.internalSelected.includes(this.getRowKey(record, index))
+      return this.selectedKeysSet.has(this.getRowKey(record, index))
     },
     emitSelection() {
       const keys = this.internalSelected.slice()

package/src/components/textarea/textarea.css

@@ -6,7 +6,7 @@
   box-shadow: var(--shadow-xs);
   font-family: var(--font-family-body);
   color: var(--primary-fg);
-  box-sizing: border-box;
+  overflow: hidden;
   transition:
     border-color 0.12s ease,
     box-shadow 0.12s ease;
@@ -119,3 +119,19 @@
 .ui-textarea__field:disabled {
   cursor: not-allowed;
 }
+
+.ui-textarea__field::-webkit-scrollbar {
+  width: 8px;
+}
+
+.ui-textarea__field::-webkit-scrollbar-track {
+  border-left: 1px solid var(--border-primary);
+}
+
+.ui-textarea__field::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+  border-left: 2px solid transparent;
+  border-right: 1px solid transparent;
+  background-clip: content-box;
+}

package/src/index.js

@@ -1,5 +1,6 @@
 export { default as WkAccordion } from './components/accordion/Accordion.vue'
 export { default as WkAccordionItem } from './components/accordion-item/AccordionItem.vue'
+export { default as WkAlert } from './components/alert/Alert.vue'
 export { default as WkAlertDialog } from './components/alert-dialog/AlertDialog.vue'
 export { default as WkAvatar } from './components/avatar/Avatar.vue'
 export { default as WkAvatarStack } from './components/avatar-stack/AvatarStack.vue'

package/src/styles/color_general.css

@@ -31,13 +31,16 @@
   --destructive-hover: var(--color-red-500);
   --destructive-subtle: var(--color-red-50);
   --destructive-border: var(--color-red-500);
+  --destructive-border-subtle: var(--color-red-200);
   --destructive-text: var(--color-red-600);
-  --warning-subtle: var(--color-orange-50);
-  --warning-border: var(--color-orange-400);
-  --warning-text: var(--color-orange-500);
-  --info-subtle: var(--color-indigo-50);
-  --info-border: var(--color-indigo-500);
-  --info-text: var(--color-indigo-600);
+  --warning-subtle: var(--color-yellow-50);
+  --warning-border: var(--color-yellow-500);
+  --warning-border-subtle: var(--color-yellow-200);
+  --warning-text: var(--color-orange-800);
+  --infor-subtle: var(--color-blue-50);
+  --infor-border: var(--color-blue-500);
+  --infor-border-subtle: var(--color-blue-200);
+  --infor-text: var(--color-blue-800);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-700);
   --ghost-hover: var(--color-black-alpha-5);
@@ -143,13 +146,16 @@
   --destructive-hover: var(--color-red-500);
   --destructive-subtle: var(--color-red-950);
   --destructive-border: var(--color-red-500);
+  --destructive-border-subtle: var(--color-red-800);
   --destructive-text: var(--color-red-400);
   --warning-subtle: var(--color-yellow-950);
-  --warning-border: var(--color-orange-600);
-  --warning-text: var(--color-orange-500);
-  --info-subtle: var(--color-indigo-950);
-  --info-border: var(--color-indigo-500);
-  --info-text: var(--color-indigo-600);
+  --warning-border: var(--color-yellow-500);
+  --warning-border-subtle: var(--color-yellow-800);
+  --warning-text: var(--color-orange-300);
+  --infor-subtle: var(--color-blue-950);
+  --infor-border: var(--color-blue-500);
+  --infor-border-subtle: var(--color-blue-800);
+  --infor-text: var(--color-blue-300);
   --ghost: var(--color-white-alpha-001);
   --ghost-foreground: var(--color-brand-neutrals-200);
   --ghost-hover: var(--color-black-alpha-10);

package/src/styles/spacing.css

@@ -29,4 +29,6 @@
   --spacing-10: 10px;
   --spacing-14: 14px;
   --spacing-15p5: 15.5px;
+  --spacing-28: 28px;
+  --spacing-36: 36px;
 }