@veltra/desktop 1.1.5 → 1.1.7

package/dist/index.js

@@ -1,18 +1,18 @@
 import _sfc_main$39 from "./components/icon/icon.js";
 import _sfc_main$29 from "./components/empty/empty.js";
-import _sfc_main$64 from "./components/scroll/scroll.js";
+import _sfc_main$65 from "./components/scroll/scroll.js";
 import NodeRender from "./components/node-render/node-render.js";
-import _sfc_main$78 from "./components/tip/tip.js";
+import _sfc_main$79 from "./components/tip/tip.js";
 import _sfc_main$28 from "./components/dropdown/dropdown.js";
 import input_default from "./components/input/input.js";
-import _sfc_main$65 from "./components/select/select.js";
+import _sfc_main$66 from "./components/select/select.js";
 import _sfc_main$21 from "./components/condition-editor/condition-editor.js";
-import _sfc_main$72 from "./components/tabs/tabs-horizontal.js";
-import _sfc_main$73 from "./components/tabs/tabs-vertical.js";
-import _sfc_main$71 from "./components/tabs/tabs.js";
+import _sfc_main$73 from "./components/tabs/tabs-horizontal.js";
+import _sfc_main$74 from "./components/tabs/tabs-vertical.js";
+import _sfc_main$72 from "./components/tabs/tabs.js";
 import _sfc_main$15 from "./components/checkbox/checkbox.js";
-import _sfc_main$79 from "./components/tree/tree.js";
-import _sfc_main$80 from "./components/tree-select/tree-select.js";
+import _sfc_main$80 from "./components/tree/tree.js";
+import _sfc_main$81 from "./components/tree-select/tree-select.js";
 import _sfc_main$18 from "./components/code-editor/code-editor.js";
 import _sfc_main$27 from "./components/drawer/drawer.js";
 import _sfc_main$35 from "./components/grid/grid.js";
@@ -24,10 +24,10 @@ import { FormModel } from "./components/form/form-model.js";
 import { DynamicFormModel } from "./components/form/dynamic-form-model.js";
 import _sfc_main$5 from "./components/button/button.js";
 import _sfc_main$6 from "./components/button/button-group.js";
-import _sfc_main$48 from "./components/message-confirm/message-confirm.js";
+import _sfc_main$49 from "./components/message-confirm/message-confirm.js";
 import MessageConfirm from "./components/message-confirm/message-confirm2.js";
 import _sfc_main$7 from "./components/calendar/calendar.js";
-import _sfc_main$61 from "./components/radio/radio.js";
+import _sfc_main$62 from "./components/radio/radio.js";
 import _sfc_main$8 from "./components/card/card.js";
 import _sfc_main$12 from "./components/card/card-header.js";
 import _sfc_main$11 from "./components/card/card-cover.js";
@@ -35,64 +35,65 @@ import _sfc_main$10 from "./components/card/card-content.js";
 import _sfc_main$9 from "./components/card/card-action.js";
 import _sfc_main$23 from "./components/date-panel/date-panel.js";
 import _sfc_main$25 from "./components/date-range-picker/date-range-picker.js";
-import _sfc_main$43 from "./components/loading/loading.js";
+import _sfc_main$44 from "./components/loading/loading.js";
 import { vLoading } from "./components/loading/directive.js";
-import _sfc_main$60 from "./components/progress-nodes/progress-nodes.js";
+import _sfc_main$61 from "./components/progress-nodes/progress-nodes.js";
 import _sfc_main$1 from "./components/auto-complete/auto-complete.js";
-import _sfc_main$59 from "./components/progress/progress.js";
-import _sfc_main$51 from "./components/notification/notification.js";
+import _sfc_main$60 from "./components/progress/progress.js";
+import _sfc_main$52 from "./components/notification/notification.js";
 import { Notification } from "./components/notification/index.js";
-import _sfc_main$40 from "./components/layout/layout.js";
-import _sfc_main$74 from "./components/tag/tag.js";
+import _sfc_main$41 from "./components/layout/layout.js";
+import _sfc_main$75 from "./components/tag/tag.js";
 import _sfc_main$16 from "./components/checkbox/checkbox-button.js";
-import _sfc_main$49 from "./components/multi-select/multi-select.js";
-import _sfc_main$66 from "./components/slider/slider.js";
+import _sfc_main$50 from "./components/multi-select/multi-select.js";
+import _sfc_main$67 from "./components/slider/slider.js";
 import _sfc_main$34 from "./components/gantt-chart/gantt-chart.js";
-import _sfc_main$47 from "./components/message/message.js";
+import _sfc_main$48 from "./components/message/message.js";
 import { message } from "./components/message/message2.js";
 import _sfc_main$31 from "./components/file-picker/file-picker.js";
-import _sfc_main$53 from "./components/number-input/number-input.js";
-import _sfc_main$54 from "./components/number-range-input/number-range-input.js";
+import _sfc_main$54 from "./components/number-input/number-input.js";
+import _sfc_main$55 from "./components/number-range-input/number-range-input.js";
 import _sfc_main$19 from "./components/collapse/collapse.js";
 import _sfc_main$20 from "./components/collapse/collapse-item.js";
 import { defineTableColumns } from "./components/table/use-columns.js";
-import _sfc_main$69 from "./components/table/table.js";
-import _sfc_main$70 from "./components/table-editor/table-editor.js";
+import _sfc_main$70 from "./components/table/table.js";
+import _sfc_main$71 from "./components/table-editor/table-editor.js";
 import _sfc_main$14 from "./components/check-tag/check-tag.js";
 import _sfc_main$22 from "./components/context-menu/context-menu.js";
 import { contextmenu } from "./components/context-menu/api.js";
-import _sfc_main$57 from "./components/password-input/password-input.js";
-import _sfc_main$52 from "./components/number/number.js";
+import _sfc_main$58 from "./components/password-input/password-input.js";
+import _sfc_main$53 from "./components/number/number.js";
 import _sfc_main$26 from "./components/dialog/dialog.js";
 import _sfc_main$30 from "./components/expression-editor/expression-editor.js";
-import _sfc_main$81 from "./components/watermark/watermark.js";
-import _sfc_main$58 from "./components/pop-confirm/pop-confirm.js";
+import _sfc_main$82 from "./components/watermark/watermark.js";
+import _sfc_main$40 from "./components/kbd/kbd.js";
+import _sfc_main$59 from "./components/pop-confirm/pop-confirm.js";
 import _sfc_main from "./components/action/action.js";
 import action_group_default from "./components/action/action-group.js";
 import _sfc_main$3 from "./components/batch-edit/batch-edit.js";
 import { defineBatchEditColumns } from "./components/batch-edit/helper.js";
-import _sfc_main$76 from "./components/textarea/textarea.js";
+import _sfc_main$77 from "./components/textarea/textarea.js";
 import _sfc_main$13 from "./components/cascade/cascade.js";
-import _sfc_main$67 from "./components/steps/steps.js";
+import _sfc_main$68 from "./components/steps/steps.js";
 import _sfc_main$24 from "./components/date-picker/date-picker.js";
-import _sfc_main$56 from "./components/palette/palette.js";
-import _sfc_main$77 from "./components/theme/theme.js";
-import _sfc_main$50 from "./components/multi-tree-select/multi-tree-select.js";
+import _sfc_main$57 from "./components/palette/palette.js";
+import _sfc_main$78 from "./components/theme/theme.js";
+import _sfc_main$51 from "./components/multi-tree-select/multi-tree-select.js";
 import _sfc_main$38 from "./components/group-input/group-input.js";
-import _sfc_main$41 from "./components/list/list.js";
-import _sfc_main$42 from "./components/list/list-item.js";
-import _sfc_main$63 from "./components/rich-text-editor/rich-text-editor.js";
-import _sfc_main$45 from "./components/menu/menu-item.js";
-import _sfc_main$46 from "./components/menu/menu-sub.js";
-import _sfc_main$44 from "./components/menu/menu.js";
+import _sfc_main$42 from "./components/list/list.js";
+import _sfc_main$43 from "./components/list/list-item.js";
+import _sfc_main$64 from "./components/rich-text-editor/rich-text-editor.js";
+import _sfc_main$46 from "./components/menu/menu-item.js";
+import _sfc_main$47 from "./components/menu/menu-sub.js";
+import _sfc_main$45 from "./components/menu/menu.js";
 import _sfc_main$36 from "./components/grid-input/grid-input.js";
-import _sfc_main$68 from "./components/switch/switch.js";
-import _sfc_main$62 from "./components/radio-group/radio-group.js";
+import _sfc_main$69 from "./components/switch/switch.js";
+import _sfc_main$63 from "./components/radio-group/radio-group.js";
 import _sfc_main$17 from "./components/checkbox-group/checkbox-group.js";
 import _sfc_main$32 from "./components/file-viewer/file-viewer.js";
-import _sfc_main$75 from "./components/text/text.js";
+import _sfc_main$76 from "./components/text/text.js";
 import _sfc_main$4 from "./components/breadcrumb/breadcrumb.js";
-import _sfc_main$55 from "./components/paginator/paginator.js";
+import _sfc_main$56 from "./components/paginator/paginator.js";
 import _sfc_main$33 from "./components/float-button/float-button.js";
 import _sfc_main$2 from "./components/badge/badge.js";
-export { DynamicFormModel, FormModel, MessageConfirm, Notification, _sfc_main as UAction, action_group_default as UActionGroup, _sfc_main$1 as UAutoComplete, _sfc_main$2 as UBadge, _sfc_main$3 as UBatchEdit, _sfc_main$4 as UBreadcrumb, _sfc_main$5 as UButton, _sfc_main$6 as UButtonGroup, _sfc_main$7 as UCalendar, _sfc_main$8 as UCard, _sfc_main$9 as UCardAction, _sfc_main$10 as UCardContent, _sfc_main$11 as UCardCover, _sfc_main$12 as UCardHeader, _sfc_main$13 as UCascade, _sfc_main$14 as UCheckTag, _sfc_main$15 as UCheckbox, _sfc_main$16 as UCheckboxButton, _sfc_main$17 as UCheckboxGroup, _sfc_main$18 as UCodeEditor, _sfc_main$19 as UCollapse, _sfc_main$20 as UCollapseItem, _sfc_main$21 as UConditionEditor, _sfc_main$22 as UContextMenu, _sfc_main$23 as UDatePanel, _sfc_main$24 as UDatePicker, _sfc_main$25 as UDateRangePicker, _sfc_main$26 as UDialog, _sfc_main$27 as UDrawer, _sfc_main$28 as UDropdown, _sfc_main$29 as UEmpty, _sfc_main$30 as UExpressionEditor, _sfc_main$31 as UFilePicker, _sfc_main$32 as UFileViewer, _sfc_main$33 as UFloatButton, form_default as UForm, form_item_default as UFormItem, _sfc_main$34 as UGanttChart, _sfc_main$35 as UGrid, _sfc_main$36 as UGridInput, _sfc_main$37 as UGridItem, _sfc_main$38 as UGroupInput, _sfc_main$39 as UIcon, input_default as UInput, _sfc_main$40 as ULayout, _sfc_main$41 as UList, _sfc_main$42 as UListItem, _sfc_main$43 as ULoading, _sfc_main$44 as UMenu, _sfc_main$45 as UMenuItem, _sfc_main$46 as UMenuSub, _sfc_main$47 as UMessage, _sfc_main$48 as UMessageConfirm, _sfc_main$49 as UMultiSelect, _sfc_main$50 as UMultiTreeSelect, NodeRender as UNodeRender, _sfc_main$51 as UNotification, _sfc_main$52 as UNumber, _sfc_main$53 as UNumberInput, _sfc_main$54 as UNumberRangeInput, _sfc_main$55 as UPaginator, _sfc_main$56 as UPalette, _sfc_main$57 as UPasswordInput, _sfc_main$58 as UPopConfirm, _sfc_main$59 as UProgress, _sfc_main$60 as UProgressNodes, _sfc_main$61 as URadio, _sfc_main$62 as URadioGroup, _sfc_main$63 as URichTextEditor, _sfc_main$64 as UScroll, _sfc_main$65 as USelect, _sfc_main$66 as USlider, _sfc_main$67 as USteps, _sfc_main$68 as USwitch, _sfc_main$69 as UTable, _sfc_main$70 as UTableEditor, _sfc_main$71 as UTabs, _sfc_main$72 as UTabsHorizontal, _sfc_main$73 as UTabsVertical, _sfc_main$74 as UTag, _sfc_main$75 as UText, _sfc_main$76 as UTextarea, _sfc_main$77 as UTheme, _sfc_main$78 as UTip, _sfc_main$79 as UTree, _sfc_main$80 as UTreeSelect, _sfc_main$81 as UWatermark, contextmenu, defineBatchEditColumns, defineTableColumns, formField, message, vLoading };
+export { DynamicFormModel, FormModel, MessageConfirm, Notification, _sfc_main as UAction, action_group_default as UActionGroup, _sfc_main$1 as UAutoComplete, _sfc_main$2 as UBadge, _sfc_main$3 as UBatchEdit, _sfc_main$4 as UBreadcrumb, _sfc_main$5 as UButton, _sfc_main$6 as UButtonGroup, _sfc_main$7 as UCalendar, _sfc_main$8 as UCard, _sfc_main$9 as UCardAction, _sfc_main$10 as UCardContent, _sfc_main$11 as UCardCover, _sfc_main$12 as UCardHeader, _sfc_main$13 as UCascade, _sfc_main$14 as UCheckTag, _sfc_main$15 as UCheckbox, _sfc_main$16 as UCheckboxButton, _sfc_main$17 as UCheckboxGroup, _sfc_main$18 as UCodeEditor, _sfc_main$19 as UCollapse, _sfc_main$20 as UCollapseItem, _sfc_main$21 as UConditionEditor, _sfc_main$22 as UContextMenu, _sfc_main$23 as UDatePanel, _sfc_main$24 as UDatePicker, _sfc_main$25 as UDateRangePicker, _sfc_main$26 as UDialog, _sfc_main$27 as UDrawer, _sfc_main$28 as UDropdown, _sfc_main$29 as UEmpty, _sfc_main$30 as UExpressionEditor, _sfc_main$31 as UFilePicker, _sfc_main$32 as UFileViewer, _sfc_main$33 as UFloatButton, form_default as UForm, form_item_default as UFormItem, _sfc_main$34 as UGanttChart, _sfc_main$35 as UGrid, _sfc_main$36 as UGridInput, _sfc_main$37 as UGridItem, _sfc_main$38 as UGroupInput, _sfc_main$39 as UIcon, input_default as UInput, _sfc_main$40 as UKbd, _sfc_main$41 as ULayout, _sfc_main$42 as UList, _sfc_main$43 as UListItem, _sfc_main$44 as ULoading, _sfc_main$45 as UMenu, _sfc_main$46 as UMenuItem, _sfc_main$47 as UMenuSub, _sfc_main$48 as UMessage, _sfc_main$49 as UMessageConfirm, _sfc_main$50 as UMultiSelect, _sfc_main$51 as UMultiTreeSelect, NodeRender as UNodeRender, _sfc_main$52 as UNotification, _sfc_main$53 as UNumber, _sfc_main$54 as UNumberInput, _sfc_main$55 as UNumberRangeInput, _sfc_main$56 as UPaginator, _sfc_main$57 as UPalette, _sfc_main$58 as UPasswordInput, _sfc_main$59 as UPopConfirm, _sfc_main$60 as UProgress, _sfc_main$61 as UProgressNodes, _sfc_main$62 as URadio, _sfc_main$63 as URadioGroup, _sfc_main$64 as URichTextEditor, _sfc_main$65 as UScroll, _sfc_main$66 as USelect, _sfc_main$67 as USlider, _sfc_main$68 as USteps, _sfc_main$69 as USwitch, _sfc_main$70 as UTable, _sfc_main$71 as UTableEditor, _sfc_main$72 as UTabs, _sfc_main$73 as UTabsHorizontal, _sfc_main$74 as UTabsVertical, _sfc_main$75 as UTag, _sfc_main$76 as UText, _sfc_main$77 as UTextarea, _sfc_main$78 as UTheme, _sfc_main$79 as UTip, _sfc_main$80 as UTree, _sfc_main$81 as UTreeSelect, _sfc_main$82 as UWatermark, contextmenu, defineBatchEditColumns, defineTableColumns, formField, message, vLoading };

package/dist/style.js

@@ -17,6 +17,7 @@ import "./components/checkbox/style.js";
 import "./components/radio/style.js";
 import "./components/empty/style.js";
 import "./components/table/style.js";
+import "./components/kbd/style.js";
 import "./components/batch-edit/style.js";
 import "./components/breadcrumb/style.js";
 import "./components/calendar/style.js";

package/dist/types/table.d.ts

@@ -125,8 +125,6 @@ interface TableProps {
   virtualThreshold?: number;
   /** 是否开启展开行, 只在非树形模式下有效 */
   expandable?: boolean;
-  /** 是否开启虚拟列表 */
-  virtual?: boolean;
   /**  默认展开全部 */
   defaultExpandAll?: boolean;
   /** 文本溢出省略 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "files": [
     "dist",
     "src"
@@ -61,22 +61,22 @@
     "@lexical/rich-text": "^0.43.0",
     "@lexical/selection": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@veltra/compositions": "1.1.5",
-    "@veltra/directives": "1.1.5",
-    "@veltra/icons": "1.1.5",
-    "@veltra/styles": "1.1.5",
-    "@veltra/utils": "1.1.5",
+    "@veltra/compositions": "1.1.7",
+    "@veltra/directives": "1.1.7",
+    "@veltra/icons": "1.1.7",
+    "@veltra/styles": "1.1.7",
+    "@veltra/utils": "1.1.7",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.1.5",
-    "@veltra/directives": "1.1.5",
-    "@veltra/icons": "1.1.5",
-    "@veltra/styles": "1.1.5",
-    "@veltra/utils": "1.1.5",
+    "@veltra/compositions": "1.1.7",
+    "@veltra/directives": "1.1.7",
+    "@veltra/icons": "1.1.7",
+    "@veltra/styles": "1.1.7",
+    "@veltra/utils": "1.1.7",
     "vue": "^3.5.33"
   }
 }

package/src/components/auto-complete/style.scss

@@ -70,7 +70,9 @@ $root-name: auto-complete;
     line-height: 1;
     border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
-    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+    transition:
+      border-color 0.25s ease,
+      box-shadow 0.25s ease;
     overflow: hidden;
     @include m.flex($display: inline-flex);
     &:hover {

package/src/components/batch-edit/batch-edit-form.vue

@@ -28,7 +28,7 @@
         <u-form
           :model="props.model"
           :readonly="props.readonly"
-          @keyup.enter="handleSave"
+          @keydown="handleFormKeydown"
           :label-width="props.labelWidth"
         >
           <template #default="{ data, model }">
@@ -52,7 +52,7 @@
         有未保存改动
       </span>
       <span :class="cls.e('form-hint')" v-else-if="!props.readonly">
-        <kbd>Enter</kbd> 保存 · <kbd>Esc</kbd> 关闭
+        <u-kbd>Ctrl + Enter</u-kbd> 保存 · <u-kbd>Esc</u-kbd> 关闭
       </span>
       <span :class="cls.e('form-hint')" v-else>只读模式</span>
 
@@ -80,6 +80,7 @@ import { computed, inject, type Component } from 'vue'
 import { UButton } from '../button'
 import { UForm } from '../form'
 import { UIcon } from '../icon'
+import { UKbd } from '../kbd'
 import { UScroll } from '../scroll'
 import { BatchEditDIKey } from './di'
 
@@ -153,4 +154,11 @@ const headerInfo = computed<HeaderInfo>(() => {
 const bodyKey = computed(() => {
   return `${state.type}-${state.row?.uid ?? 'create'}-${state.parentRow?.uid ?? 'root'}`
 })
+
+function handleFormKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+    e.preventDefault()
+    handleSave()
+  }
+}
 </script>

package/src/components/batch-edit/style.ts

@@ -5,6 +5,7 @@ import '../icon/style'
 import '../layout/style'
 import '../scroll/style'
 import '../table/style'
+import '../kbd/style'
 import '@veltra/directives/ripple/style.js'
 import '@veltra/styles/anime/fade.scss'
 import './style.scss'

package/src/components/button/style.scss

@@ -6,7 +6,8 @@
 $root-name: button;
 
 @include m.b($root-name) {
-  color: fn.use-var(text-color, main);
+  color: fn.component-var(button, default-color, fn.use-var(text-color, main));
+  box-sizing: border-box;
 
   line-height: 1;
   outline: none;
@@ -17,8 +18,8 @@ $root-name: button;
   cursor: pointer;
   padding: 0 0.8em;
   -webkit-appearance: none;
-  border: none;
-  background-color: fn.use-var(color, default);
+  border: 1px solid fn.component-var(button, default-border, transparent);
+  background-color: fn.component-var(button, default-bg, fn.use-var(color, default));
   box-shadow: fn.use-var(shadow, emboss);
   transition:
     background-color 0.25s,
@@ -29,6 +30,11 @@ $root-name: button;
 
   @include m.flex($display: inline-flex, $justify: center);
 
+  &:hover {
+    background-color: fn.component-var(button, default-hover-bg, fn.use-var(color, default, 'dark-1'));
+    border-color: fn.component-var(button, default-hover-border, transparent);
+  }
+
   &:active {
     box-shadow: none;
   }
@@ -80,10 +86,11 @@ $root-name: button;
 
     @include m.m(color-#{$type}) {
       background-color: fn.use-var(color, $type);
-      color: fn.use-var(text-color, white);
+      color: fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white));
 
       &:hover {
-        background-color: fn.use-var(color, $type, dark-1);
+        background-color: fn.component-var(button, #{$type}-hover-bg, fn.use-var(color, $type, dark-1));
+        color: fn.component-var(button, #{$type}-hover-color, fn.component-var(button, #{$type}-text-color, fn.use-var(text-color, white)));
       }
 
       // 禁用
@@ -105,7 +112,7 @@ $root-name: button;
         @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
-            background-color: fn.use-var(color, $type, 'light-9');
+            background-color: fn.component-var(button, #{$type}-plain-bg, fn.use-var(color, $type, 'light-9'));
           }
         }
 
@@ -115,9 +122,9 @@ $root-name: button;
       }
 
       @include m.is(plain) {
-        color: fn.use-var(color, $type);
-        background-color: fn.use-var(color, $type, light-9);
-        box-shadow: 0px 0px 2px 1px fn.use-var(color, $type, light-5);
+        color: fn.component-var(button, #{$type}-plain-color, fn.use-var(color, $type));
+        background-color: fn.component-var(button, #{$type}-plain-bg, fn.use-var(color, $type, light-9));
+        box-shadow: 0px 0px 2px 1px fn.component-var(button, #{$type}-plain-shadow, fn.use-var(color, $type, light-5));
 
         &:active {
           box-shadow: none;

package/src/components/cascade/style.scss

@@ -12,7 +12,9 @@ $menu-name: $root-name + '-panel-item';
   @include m.is(multiple) {
     border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
-    transition: border-color 0.25s ease, box-shadow 0.25s ease;
+    transition:
+      border-color 0.25s ease,
+      box-shadow 0.25s ease;
     overflow: hidden;
     cursor: pointer;
 
@@ -114,7 +116,8 @@ $menu-name: $root-name + '-panel-item';
     }
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary, light-9);
+      background-color: fn.component-var(cascade, node-active-bg, fn.use-var(color, primary, light-9));
+      color: fn.component-var(cascade, node-active-color, fn.use-var(color, primary));
       border-radius: fn.use-var(radius, default);
     }
 

package/src/components/checkbox/style.scss

@@ -53,7 +53,7 @@ $root-name: checkbox;
     border: fn.use-var(border, width) fn.use-var(border, style)
       #{fn.component-var(checkbox, border, #ccc)};
     border-radius: 6px;
-    color: #fff;
+    color: fn.component-var(checkbox, color, #fff);
     transition: background-color 0.15s ease;
     @include m.flex(inline-flex, center);
   }
@@ -63,7 +63,7 @@ $root-name: checkbox;
   }
 
   @include m.m(indeterminate) {
-    background-color: #fff;
+    background-color: fn.component-var(checkbox, color, #fff);
     width: 10px;
     height: 2px;
     vertical-align: middle;

package/src/components/code-editor/style.scss

@@ -24,7 +24,9 @@ $root-name: code-editor;
   border: 1px solid var(--u-code-editor-border);
   box-shadow: fn.use-var(shadow, emboss);
   overflow: hidden;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 
   &:hover,
   &:focus-within {
@@ -36,7 +38,8 @@ $root-name: code-editor;
     color: var(--u-code-editor-fg);
     font-size: var(--u-code-editor-font-size);
     line-height: var(--u-code-editor-line-height);
-    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas,
+    font-family:
+      ui-monospace, 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Consolas,
       'Liberation Mono', monospace;
     outline: none;
 

package/src/components/date-range-picker/style.scss

@@ -11,7 +11,9 @@ $root-name: date-range-picker;
   line-height: 1;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
 
   @include m.flex($display: inline-flex);

package/src/components/expression-editor/style.scss

@@ -84,8 +84,8 @@ $root-name: expression-editor;
     height: 22px;
     line-height: 1;
     font-size: 12px;
-    color: fn.use-var(color, primary);
-    background-color: fn.use-var(color, primary, light-9);
+    color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
+    background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-9));
     border-radius: 999px;
     cursor: pointer;
     user-select: none;
@@ -94,8 +94,8 @@ $root-name: expression-editor;
       box-shadow 0.12s ease;
 
     &:hover {
-      color: fn.use-var(color, primary);
-      background-color: fn.use-var(color, primary, light-8);
+      color: fn.component-var(expression-editor, chip-color, fn.use-var(color, primary));
+      background-color: fn.component-var(expression-editor, chip-bg, fn.use-var(color, primary, light-8));
       box-shadow: 0 1px 4px fn.use-var(shadow, color);
 
       .#{vars.$namespace}#{$root-name}__chip-close {

package/src/components/index.ts

@@ -130,6 +130,8 @@ export * from './breadcrumb'
 
 export * from './icon'
 
+export * from './kbd'
+
 export * from './pop-confirm'
 
 export * from './paginator'

package/src/components/kbd/index.ts

@@ -0,0 +1 @@
+export { default as UKbd } from './kbd.vue'

package/src/components/kbd/kbd.vue

@@ -0,0 +1,13 @@
+<template>
+  <kbd :class="cls.b">
+    <slot />
+  </kbd>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+defineOptions({ name: 'Kbd' })
+
+const cls = bem('kbd')
+</script>

package/src/components/kbd/style.scss

@@ -0,0 +1,37 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+@include m.b(kbd) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: fn.use-var(font-family);
+  font-weight: normal;
+  vertical-align: text-top;
+  white-space: nowrap;
+  user-select: none;
+
+  position: relative;
+  top: -0.03em;
+
+  font-size: 0.75em;
+  min-width: 1.75em;
+  line-height: 1.7em;
+  padding: 0 0.5em 0.05em;
+  border-radius: calc(fn.use-var(radius, default) * 0.35);
+  height: fit-content;
+
+  color: fn.use-var(text-color, main);
+  background: fn.use-var(bg-color, top);
+
+  /*
+   * Adapted from Radix UI Themes Kbd.
+   * Multi-layer box-shadow simulates a 3D keycap appearance.
+   */
+  box-shadow:
+    inset 0 0.05em
+      color-mix(in srgb, #{fn.use-var(bg-color, top)} 75%, #{fn.use-var(bg-color, black)}),
+    0 0 0 0.05em color-mix(in srgb, #{fn.use-var(border, color)} 50%, transparent),
+    0 0.08em 0.17em color-mix(in srgb, #{fn.use-var(shadow, color)} 60%, transparent);
+}

package/src/components/kbd/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/message-confirm/style.scss

@@ -19,7 +19,9 @@ $root-name: message-confirm;
 
   @include m.e(box) {
     width: 420px;
-    background-color: #fff;
+    background-color: fn.use-var(bg-color, top);
+    border: fn.use-var(border);
+    box-shadow: fn.use-var(shadow);
     transition:
       opacity 0.3s,
       transform 0.4s;

package/src/components/multi-select/style.scss

@@ -10,7 +10,9 @@ $root-name: multi-select;
   line-height: 1;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
   cursor: pointer;
   @include m.flex($display: inline-flex);

package/src/components/multi-tree-select/style.scss

@@ -9,7 +9,9 @@ $root-name: multi-tree-select;
   width: 100%;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
   cursor: pointer;
   line-height: 1;

package/src/components/notification/style.scss

@@ -16,7 +16,7 @@ $positions: ('top-left', 'top-right', 'bottom-left', 'bottom-right');
     transform 0.4s,
     top 0.4s;
   border: fn.use-var(border);
-  background-color: #fff;
+  background-color: fn.use-var(bg-color, top);
   box-shadow: fn.use-var(shadow);
   margin: 4px;
   overflow: hidden;

package/src/components/paginator/style.scss

@@ -39,12 +39,13 @@ $root-name: paginator;
     @include m.flex($justify: center);
 
     &:hover {
-      background-color: fn.use-var(color, primary, 'light-9');
+      background-color: fn.component-var(paginator, btn-hover-bg, fn.use-var(color, primary, 'light-9'));
+      color: fn.component-var(paginator, btn-hover-color, fn.use-var(text, color, title));
     }
 
     @include m.is(active) {
-      background-color: fn.use-var(color, primary, 'light-9');
-      color: fn.use-var(color, primary);
+      background-color: fn.component-var(paginator, btn-active-bg, fn.use-var(color, primary, 'light-9'));
+      color: fn.component-var(paginator, btn-active-color, fn.use-var(color, primary));
     }
 
     @include m.is(disabled) {

package/src/components/tabs/style.scss

@@ -2,11 +2,11 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 
 /** shadcn 风格 TabsList：hover 背景底色容器 + 白底活动态；rounded=true 时水平为胶囊状。 */
-$list-bg: fn.use-var(bg-color, hover);
+$list-bg: fn.component-var(tabs, bar-bg, fn.use-var(bg-color, hover));
 $list-radius: fn.use-var(radius, default);
 $item-radius: calc(fn.use-var(radius, default) - 2px);
 $list-padding: 4px;
-$active-bg: fn.use-var(bg-color, top);
+$active-bg: fn.component-var(tabs, active-bg, fn.use-var(bg-color, top));
 $active-shadow:
   0 1px 2px rgba(15, 23, 42, 0.08),
   0 1px 3px rgba(15, 23, 42, 0.06);

package/src/components/tag/style.scss

@@ -52,13 +52,13 @@ $root-name: tag;
   // 颜色样式
   @each $type in vars.$color-types {
     @include m.m(color-#{$type}) {
-      color: fn.use-var(color, $type);
-      border-color: fn.use-var(color, $type);
-      background-color: fn.use-var(color, $type, light-9);
+      color: fn.component-var(tag, #{$type}-color, fn.use-var(color, $type));
+      border-color: fn.component-var(tag, #{$type}-border, fn.use-var(color, $type));
+      background-color: fn.component-var(tag, #{$type}-bg, fn.use-var(color, $type, light-9));
 
       @include m.is(dark) {
-        color: fn.use-var(text-color, white);
-        background-color: fn.use-var(color, $type);
+        color: fn.component-var(tag, #{$type}-dark-color, fn.use-var(text-color, white));
+        background-color: fn.component-var(tag, #{$type}-dark-bg, fn.use-var(color, $type));
       }
 
       @include m.bem($root-name, icon-close) {

package/src/components/textarea/style.scss

@@ -9,7 +9,9 @@ $root-name: textarea;
   width: 100%;
   border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
-  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+  transition:
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
   overflow: hidden;
   vertical-align: middle;
 

package/src/components/tree/style.scss

@@ -74,8 +74,8 @@ $indent-width: 20px;
 
     @include m.is(selected) {
       @include m.bem($root-name, node-content) {
-        background-color: fn.use-var(color, primary, light-9);
-        color: fn.use-var(color, primary);
+        background-color: fn.component-var(tree, node-selected-bg, fn.use-var(color, primary, light-9));
+        color: fn.component-var(tree, node-selected-color, fn.use-var(color, primary));
         font-weight: 500;
 
         // 左侧 3px 色带，配合淡色背景共同构成选中态；

package/src/style.ts

@@ -32,6 +32,7 @@ import './components/grid-input/style'
 import './components/grid/style'
 import './components/group-input/style'
 import './components/icon/style'
+import './components/kbd/style'
 import './components/input/style'
 import './components/layout/style'
 import './components/list/style'