@veltra/desktop 1.1.6 → 1.1.9

package/dist/components/paginator/style2.css

@@ -82,11 +82,12 @@
   flex-wrap: nowrap;
 }
 .u-paginator__btn:hover {
-  background-color: var(--u-color-primary-light-9);
+  background-color: var(--u-paginator-btn-hover-bg, var(--u-color-primary-light-9));
+  color: var(--u-paginator-btn-hover-color, var(--u-text-color-title));
 }
 .u-paginator__btn.is-active {
-  background-color: var(--u-color-primary-light-9);
-  color: var(--u-color-primary);
+  background-color: var(--u-paginator-btn-active-bg, var(--u-color-primary-light-9));
+  color: var(--u-paginator-btn-active-color, var(--u-color-primary));
 }
 .u-paginator__btn.is-disabled {
   cursor: not-allowed;

package/dist/components/progress-nodes/progress-nodes.vue.d.ts

@@ -16,11 +16,11 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
-  "update:modelValue": (value: string | number) => any;
   click: (node: Record<string, any>, index: number) => any;
+  "update:modelValue": (value: string | number) => any;
 }, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
   labelKey: string;
   valueKey: string;

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -16,10 +16,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "onUpdate:modelValue"?: ((value: any) => any) | undefined;
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
-  labelKey: string;
-  valueKey: string;
   disabled: boolean;
   readonly: boolean;
+  labelKey: string;
+  valueKey: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/select/select.vue.d.ts

@@ -26,10 +26,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:text"?: ((value: any) => any) | undefined;
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
-  labelKey: string;
-  valueKey: string;
   disabled: boolean;
   readonly: boolean;
+  labelKey: string;
+  valueKey: string;
   placeholder: string;
   clearable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/tabs/style2.css

@@ -53,7 +53,7 @@
   max-width: 100%;
   min-width: 0;
   padding: 0 4px;
-  background-color: var(--u-bg-color-hover);
+  background-color: var(--u-tabs-bar-bg, var(--u-bg-color-hover));
   border-radius: var(--u-radius-default);
   gap: 2px;
 }
@@ -114,7 +114,7 @@
 }
 .u-tabs-bar__item.is-active {
   color: var(--u-color-primary);
-  background-color: var(--u-bg-color-top);
+  background-color: var(--u-tabs-active-bg, var(--u-bg-color-top));
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
 .u-tabs-bar__item-label {
@@ -181,7 +181,7 @@
 }
 .u-tabs-bar__nav:hover:not(:disabled) {
   color: var(--u-text-color-title);
-  background-color: var(--u-bg-color-top);
+  background-color: var(--u-tabs-active-bg, var(--u-bg-color-top));
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
 }
 .u-tabs-bar__nav:disabled {

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -15,13 +15,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -14,13 +14,13 @@ type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tabs/tabs.vue.d.ts

@@ -10,13 +10,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tag/style2.css

@@ -79,85 +79,85 @@
   border-color: var(--u-color-default);
 }
 .u-tag--color-primary {
-  color: var(--u-color-primary);
-  border-color: var(--u-color-primary);
-  background-color: var(--u-color-primary-light-9);
+  color: var(--u-tag-primary-color, var(--u-color-primary));
+  border-color: var(--u-tag-primary-border, var(--u-color-primary));
+  background-color: var(--u-tag-primary-bg, var(--u-color-primary-light-9));
 }
 .u-tag--color-primary.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-primary);
+  color: var(--u-tag-primary-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-primary-dark-bg, var(--u-color-primary));
 }
 .u-tag--color-primary .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-primary);
 }
 .u-tag--color-success {
-  color: var(--u-color-success);
-  border-color: var(--u-color-success);
-  background-color: var(--u-color-success-light-9);
+  color: var(--u-tag-success-color, var(--u-color-success));
+  border-color: var(--u-tag-success-border, var(--u-color-success));
+  background-color: var(--u-tag-success-bg, var(--u-color-success-light-9));
 }
 .u-tag--color-success.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-success);
+  color: var(--u-tag-success-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-success-dark-bg, var(--u-color-success));
 }
 .u-tag--color-success .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-success);
 }
 .u-tag--color-warning {
-  color: var(--u-color-warning);
-  border-color: var(--u-color-warning);
-  background-color: var(--u-color-warning-light-9);
+  color: var(--u-tag-warning-color, var(--u-color-warning));
+  border-color: var(--u-tag-warning-border, var(--u-color-warning));
+  background-color: var(--u-tag-warning-bg, var(--u-color-warning-light-9));
 }
 .u-tag--color-warning.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-warning);
+  color: var(--u-tag-warning-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-warning-dark-bg, var(--u-color-warning));
 }
 .u-tag--color-warning .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-warning);
 }
 .u-tag--color-danger {
-  color: var(--u-color-danger);
-  border-color: var(--u-color-danger);
-  background-color: var(--u-color-danger-light-9);
+  color: var(--u-tag-danger-color, var(--u-color-danger));
+  border-color: var(--u-tag-danger-border, var(--u-color-danger));
+  background-color: var(--u-tag-danger-bg, var(--u-color-danger-light-9));
 }
 .u-tag--color-danger.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-danger);
+  color: var(--u-tag-danger-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-danger-dark-bg, var(--u-color-danger));
 }
 .u-tag--color-danger .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-danger);
 }
 .u-tag--color-info {
-  color: var(--u-color-info);
-  border-color: var(--u-color-info);
-  background-color: var(--u-color-info-light-9);
+  color: var(--u-tag-info-color, var(--u-color-info));
+  border-color: var(--u-tag-info-border, var(--u-color-info));
+  background-color: var(--u-tag-info-bg, var(--u-color-info-light-9));
 }
 .u-tag--color-info.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-info);
+  color: var(--u-tag-info-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-info-dark-bg, var(--u-color-info));
 }
 .u-tag--color-info .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-info);
 }
 .u-tag--color-disabled {
-  color: var(--u-color-disabled);
-  border-color: var(--u-color-disabled);
-  background-color: var(--u-color-disabled-light-9);
+  color: var(--u-tag-disabled-color, var(--u-color-disabled));
+  border-color: var(--u-tag-disabled-border, var(--u-color-disabled));
+  background-color: var(--u-tag-disabled-bg, var(--u-color-disabled-light-9));
 }
 .u-tag--color-disabled.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-disabled);
+  color: var(--u-tag-disabled-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-disabled-dark-bg, var(--u-color-disabled));
 }
 .u-tag--color-disabled .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-disabled);
 }
 .u-tag--color-default {
-  color: var(--u-color-default);
-  border-color: var(--u-color-default);
-  background-color: var(--u-color-default-light-9);
+  color: var(--u-tag-default-color, var(--u-color-default));
+  border-color: var(--u-tag-default-border, var(--u-color-default));
+  background-color: var(--u-tag-default-bg, var(--u-color-default-light-9));
 }
 .u-tag--color-default.is-dark {
-  color: var(--u-text-color-white);
-  background-color: var(--u-color-default);
+  color: var(--u-tag-default-dark-color, var(--u-text-color-white));
+  background-color: var(--u-tag-default-dark-bg, var(--u-color-default));
 }
 .u-tag--color-default .u-tag__icon-close:hover {
   border: 1px solid var(--u-color-default);

package/dist/components/tree/style2.css

@@ -82,8 +82,8 @@
   flex-wrap: nowrap;
 }
 .u-tree__node.is-selected .u-tree__node-content {
-  background-color: var(--u-color-primary-light-9);
-  color: var(--u-color-primary);
+  background-color: var(--u-tree-node-selected-bg, var(--u-color-primary-light-9));
+  color: var(--u-tree-node-selected-color, var(--u-color-primary));
   font-weight: 500;
 }
 .u-tree__node.is-selected .u-tree__node-content::before {

package/dist/components/tree/tree.vue.d.ts

@@ -21,11 +21,11 @@ declare const __VLS_base: _$vue.DefineComponent<TreeProps, _TreeExposed, {}, {},
   "onNode-contextmenu"?: ((event: MouseEvent, node: TreeNode<Record<string, any>>) => any) | undefined;
   "onSelected-synced"?: ((selected?: Record<string, any> | undefined) => any) | undefined;
 }>, {
+  data: Record<string, any>[];
   expandOnClickNode: boolean;
   labelKey: string;
   valueKey: string;
   childrenKey: string;
-  data: Record<string, any>[];
   checkStrictly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -24,15 +24,15 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  minWidth: string;
+  disabled: boolean;
+  readonly: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "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.6",
-    "@veltra/directives": "1.1.6",
-    "@veltra/icons": "1.1.6",
-    "@veltra/styles": "1.1.6",
-    "@veltra/utils": "1.1.6",
+    "@veltra/compositions": "1.1.9",
+    "@veltra/directives": "1.1.9",
+    "@veltra/icons": "1.1.9",
+    "@veltra/styles": "1.1.9",
+    "@veltra/utils": "1.1.9",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.1.6",
-    "@veltra/directives": "1.1.6",
-    "@veltra/icons": "1.1.6",
-    "@veltra/styles": "1.1.6",
-    "@veltra/utils": "1.1.6",
+    "@veltra/compositions": "1.1.9",
+    "@veltra/directives": "1.1.9",
+    "@veltra/icons": "1.1.9",
+    "@veltra/styles": "1.1.9",
+    "@veltra/utils": "1.1.9",
     "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/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,15 @@ $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 +90,19 @@ $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 +124,11 @@ $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 +138,14 @@ $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,12 @@ $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,12 @@ $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 +98,12 @@ $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/file-viewer/previewers/image-previewer.vue

@@ -18,6 +18,7 @@ import { bem } from '@veltra/utils'
 import { onBeforeUnmount, ref, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerImagePreviewer', inheritAttrs: false })
 
@@ -34,11 +35,10 @@ const failed = ref(false)
 
 let revoke: (() => void) | undefined
 
-async function load() {
+function load() {
   loading.value = true
   failed.value = false
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime)
   url.value = r.url
   revoke = r.revoke

package/src/components/file-viewer/previewers/pdf-previewer.vue

@@ -39,6 +39,7 @@ import { bem } from '@veltra/utils'
 import { computed, onBeforeUnmount, shallowRef, useAttrs, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerPdfPreviewer', inheritAttrs: false })
 
@@ -54,9 +55,8 @@ const { engine, isLoading, error } = usePdfiumEngine()
 const pdfUrl = shallowRef<string>('')
 let revoke: (() => void) | undefined
 
-async function load() {
+function load() {
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime ?? 'application/pdf')
   pdfUrl.value = r.url
   revoke = r.revoke

package/src/components/file-viewer/previewers/video-previewer.vue

@@ -18,6 +18,7 @@ import { bem } from '@veltra/utils'
 import { onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { FileViewerItem } from '../../../types/file-viewer'
+import { toBlobUrl } from '../helper'
 
 defineOptions({ name: 'FileViewerVideoPreviewer' })
 
@@ -33,9 +34,8 @@ const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
 let revoke: (() => void) | undefined
 let unmounting = false
 
-async function load() {
+function load() {
   revoke?.()
-  const { toBlobUrl } = await import('../helper')
   const r = toBlobUrl(props.file.src, props.file.mime)
   url.value = r.url
   revoke = r.revoke

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;