@veltra/desktop 1.0.15 → 2.0.0

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    trigger=\"click\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    :disabled=\"disabled\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    @keydown=\"handleKeydown\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <!-- 触发 -->\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"selected ? (o(selected).get(labelKey) ?? label) : modelValue\"\n        @clear=\"handleClear\"\n        @keydown=\"handleKeydown\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\">\n            <ArrowDown />\n          </u-icon>\n        </template>\n      </u-input>\n    </template>\n\n    <!-- 下拉内容 -->\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n        <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n          <template #suffix>\n            <u-icon>\n              <Search />\n            </u-icon>\n          </template>\n        </u-input>\n      </div>\n\n      <!--\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      -->\n      <u-scroll\n        v-if=\"options.length\"\n        tag=\"ul\"\n        :class=\"cls.e('options')\"\n        ref=\"scrollRef\"\n        :content-class=\"[\n          cls.e('options-wrap'),\n          bem.is('virtual', virtualEnabled),\n          bem.is('grid', !!grid)\n        ]\"\n        :content-style=\"{\n          gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n          gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n        }\"\n      >\n        <template v-if=\"virtualEnabled\">\n          <!-- @vue-ignore -->\n          <li\n            v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :key=\"key\"\n            :style=\"{ transform: `translateY(${offset}px)` }\"\n            :data-index=\"index\"\n            :ref=\"(el) => measureElement(index, el as Element | null)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ label }}\n            </slot>\n          </li>\n        </template>\n\n        <template v-else>\n          <li\n            v-for=\"(option, index) of options\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :data-index=\"index\"\n            :title=\"o(option).get(labelKey)\"\n            :key=\"o(option).get(valueKey)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ o(option).get(labelKey) }}\n            </slot>\n          </li>\n        </template>\n      </u-scroll>\n\n      <div v-else :class=\"cls.e('empty')\">\n        <UEmpty />\n      </div>\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ label || selected?.[labelKey] || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n  SelectEmits,\n  SelectProps,\n  _SelectExposed,\n  DropdownExposed,\n  ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n  /** 前缀插槽 */\n  prefix?: () => any\n  /** 默认插槽 */\n  default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = useFormComponent()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n  return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n  props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n  userSelecting = true\n}\n\nfunction unlock() {\n  nextTick(() => {\n    userSelecting = false\n  })\n}\n\n// 回显\nwatch(\n  [() => props.modelValue, options],\n  ([modelValue, options]) => {\n    if (userSelecting) return\n\n    if (!options?.length) return\n\n    if (modelValue !== undefined) {\n      const { valueKey } = props\n      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n      selected.value = options[currentIndex.value]\n    } else {\n      currentIndex.value = -1\n      selected.value = undefined\n    }\n  },\n  { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => options.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  gap: 4,\n  estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n  const _options = options.value\n  const { labelKey, valueKey } = props\n  return items.value.map((item) => {\n    const option = _options[item.index]!\n    return {\n      option,\n      index: item.index,\n      label: o(option).get(labelKey),\n      val: o(option).get(valueKey),\n      key: item.index,\n      offset: item.start\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n  if (!scroll || !props.modelValue) return\n\n  if (virtualEnabled) {\n    const index = options.value.findIndex((option) => option === selected.value)\n    index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n  } else {\n    const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n    if (selectedEl) {\n      scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n    }\n  }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n  if (!v) {\n    queryString.value = ''\n  }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    queryString.value = ''\n  }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n  lock()\n  selected.value = option\n\n  emit('update:modelValue', option?.[props.valueKey])\n  label.value = option?.[props.labelKey]\n  emit('change', option)\n  if (option.__isTemp) {\n    temOptionsToCreatedOptions()\n  }\n  currentIndex.value = index\n  dropdownRef.value?.close()\n\n  unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n  lock()\n  selected.value = undefined\n  clearCreatedOptions()\n  emit('update:modelValue', undefined)\n  emit('change', undefined)\n  unlock()\n}\n\nfunction getCurrentEl() {\n  return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n  options,\n  currentIndex,\n  selectOption: handleSelect,\n  getCurrentEl\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["$slots"],"sources":["../../../src/components/select/select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    trigger=\"click\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    ref=\"dropdownRef\"\n    v-model:visible=\"dropdownVisible\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    :disabled=\"disabled\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    @keydown=\"handleKeydown\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <!-- 触发 -->\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"displayedValue\"\n        @clear=\"handleClear\"\n        @keydown=\"handleKeydown\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\">\n            <ArrowDown />\n          </u-icon>\n        </template>\n      </u-input>\n    </template>\n\n    <!-- 下拉内容 -->\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"cls.e('content-filter')\">\n        <u-input placeholder=\"输入关键字进行搜索\" tabindex=\"0\" v-focus v-model=\"queryString\">\n          <template #suffix>\n            <u-icon>\n              <Search />\n            </u-icon>\n          </template>\n        </u-input>\n      </div>\n\n      <!--\n        单选列表。虚拟化启用时，内容容器 height 由 useVirtualizer 命令式写入；\n        此处 content-style 仅承担 grid 相关样式，避免 height 变化触发模板重渲染。\n      -->\n      <u-scroll\n        v-if=\"options.length\"\n        tag=\"ul\"\n        :class=\"cls.e('options')\"\n        ref=\"scrollRef\"\n        :content-class=\"[\n          cls.e('options-wrap'),\n          bem.is('virtual', virtualEnabled),\n          bem.is('grid', !!grid)\n        ]\"\n        :content-style=\"{\n          gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,\n          gridGap: grid ? withUnit(grid.gap, 'px') : undefined\n        }\"\n      >\n        <template v-if=\"virtualEnabled\">\n          <!-- @vue-ignore -->\n          <li\n            v-for=\"{ option, index, val, label, key, offset } of virtualOptions\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :key=\"key\"\n            :style=\"{ transform: `translateY(${offset}px)` }\"\n            :data-index=\"index\"\n            :ref=\"(el) => measureElement(index, el as Element | null)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ label }}\n            </slot>\n          </li>\n        </template>\n\n        <template v-else>\n          <li\n            v-for=\"(option, index) of options\"\n            :class=\"[optionClass, bem.is('selected', index === currentIndex)]\"\n            @click=\"handleSelect(option, index)\"\n            :data-index=\"index\"\n            :title=\"o(option).get(labelKey)\"\n            :key=\"o(option).get(valueKey)\"\n          >\n            <slot v-bind=\"{ option, index }\">\n              {{ o(option).get(labelKey) }}\n            </slot>\n          </li>\n        </template>\n      </u-scroll>\n\n      <div v-else :class=\"cls.e('empty')\">\n        <UEmpty />\n      </div>\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ displayedValue || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { vFocus } from '@veltra/directives'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView, withUnit } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type {\n  SelectEmits,\n  SelectProps,\n  _SelectExposed,\n  DropdownExposed,\n  ScrollExposed\n} from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UEmpty } from '../empty'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UScroll } from '../scroll'\nimport { useKeyboard } from './use-keyboard'\nimport { useOptions } from './use-options'\n\ndefineOptions({ name: 'Select' })\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst emit = defineEmits<SelectEmits>()\n\ndefineSlots<{\n  /** 前缀插槽 */\n  prefix?: () => any\n  /** 默认插槽 */\n  default?: (scope: { option: Record<string, any>; index: number }) => any\n}>()\n\nconst cls = bem('select')\n\nconst optionClass = cls.e('option')\n\nconst { formProps } = useFormComponent()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst currentIndex = shallowRef(-1)\nconst label = defineModel('text')\nconst selected = shallowRef<Record<string, any>>()\n\nconst displayedValue = computed(() => {\n  if (label.value) return label.value\n\n  return selected.value ? o(selected.value).get(props.labelKey) : String(props.modelValue)\n})\n\nconst dropdownRef = shallowRef<DropdownExposed>()\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst filterable = computed(() => {\n  return props.filterable || typeof props.options === 'function'\n})\n\nconst { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({\n  props\n})\n\n// TODO: 优化\nlet userSelecting = false\nfunction lock() {\n  userSelecting = true\n}\n\nfunction unlock() {\n  nextTick(() => {\n    userSelecting = false\n  })\n}\n\n// 回显\nwatch(\n  [() => props.modelValue, options],\n  ([modelValue, options]) => {\n    if (userSelecting) return\n\n    if (!options?.length) return\n\n    if (modelValue !== undefined) {\n      const { valueKey } = props\n      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)\n\n      selected.value = options[currentIndex.value]\n    } else {\n      currentIndex.value = -1\n      selected.value = undefined\n    }\n  },\n  { immediate: true }\n)\n\nconst baseVirtualEnabled = computed(() => options.value.length > 80)\nconst virtualEnabled = computed(() => baseVirtualEnabled.value && !props.grid)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => options.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  gap: 4,\n  estimateSize: () => 40\n})\n\nconst virtualOptions = computed(() => {\n  const _options = options.value\n  const { labelKey, valueKey } = props\n  return items.value.map((item) => {\n    const option = _options[item.index]!\n    return {\n      option,\n      index: item.index,\n      label: o(option).get(labelKey),\n      val: o(option).get(valueKey),\n      key: item.index,\n      offset: item.start\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nwatch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {\n  if (!scroll || !props.modelValue) return\n\n  if (virtualEnabled) {\n    const index = options.value.findIndex((option) => option === selected.value)\n    index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))\n  } else {\n    const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]\n    if (selectedEl) {\n      scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)\n    }\n  }\n})\n\nconst dropdownVisible = shallowRef(false)\n\nwatch(dropdownVisible, (v) => {\n  if (!v) {\n    queryString.value = ''\n  }\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    queryString.value = ''\n  }\n}\n\n/** 单选 */\nconst handleSelect = (option: Record<string, any>, index: number) => {\n  lock()\n  selected.value = option\n\n  emit('update:modelValue', option?.[props.valueKey])\n  label.value = option?.[props.labelKey]\n  emit('change', option)\n  if (option.__isTemp) {\n    temOptionsToCreatedOptions()\n  }\n  currentIndex.value = index\n  dropdownRef.value?.close()\n\n  unlock()\n}\n\n/** 清除选项 */\nconst handleClear = () => {\n  lock()\n  selected.value = undefined\n  clearCreatedOptions()\n  emit('update:modelValue', undefined)\n  emit('change', undefined)\n  unlock()\n}\n\nfunction getCurrentEl() {\n  return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined\n}\n\nconst { handleKeydown } = useKeyboard({\n  options,\n  currentIndex,\n  selectOption: handleSelect,\n  getCurrentEl\n})\n</script>\n"],"mappings":"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"}

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;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  disabled: boolean;
+  readonly: boolean;
   placeholder: string;
   clearable: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/switch/style2.css

@@ -67,8 +67,11 @@
   visibility: hidden;
 }
 .u-switch__button {
+  display: flex;
+  align-items: center;
   border-radius: 100px;
   background-color: var(--u-bg-color-bottom);
+  border: 1px solid var(--u-border-color);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 2px;
   flex-shrink: 0;

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

@@ -24,9 +24,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onClose?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
-  block: boolean;
   rounded: boolean;
   position: "top" | "bottom";
+  block: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -19,9 +19,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   onClose?: ((item: TabItem, index: number) => any) | undefined;
 }>, {
   closable: boolean;
-  block: boolean;
   rounded: boolean;
   position: "left" | "right" | "top" | "bottom";
+  block: boolean;
   keepAlive: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/textarea/style2.css

@@ -18,13 +18,14 @@
 .u-textarea {
   position: relative;
   width: 100%;
-  box-shadow: inset 0 0 1px 1px var(--u-border-color);
-  transition: box-shadow 0.25s ease;
+  border: var(--u-border);
+  box-shadow: var(--u-shadow-emboss);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;
   vertical-align: middle;
 }
-.u-textarea:hover {
-  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+.u-textarea:not(.is-disabled):hover {
+  border-color: var(--u-color-primary);
 }
 .u-textarea--small {
   border-radius: var(--u-radius-small);
@@ -77,11 +78,11 @@
   color: var(--u-text-color-placeholder);
 }
 .u-textarea.is-focus {
-  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+  border-color: var(--u-color-primary);
 }
 .u-textarea.is-disabled {
   background-color: var(--u-color-disabled);
-  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  box-shadow: none;
 }
 .u-textarea.is-disabled .u-textarea__native {
   cursor: not-allowed;

package/dist/components/theme/style2.css

@@ -26,7 +26,8 @@
   border-radius: var(--u-radius-large);
   background: radial-gradient(circle at top right, rgba(30, 136, 229, 0.14), transparent 36%), linear-gradient(180deg, var(--u-bg-color-top) 0%, var(--u-bg-color-middle) 100%);
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px) saturate(150%);
+  backdrop-filter: var(--u-bg-filter);
+  -webkit-backdrop-filter: var(--u-bg-filter);
   overflow: hidden;
 }
 .u-theme__header {

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

@@ -24,11 +24,11 @@ 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;
 }>, {
-  disabled: boolean;
-  readonly: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
+  disabled: boolean;
+  readonly: boolean;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;

package/dist/types/badge.d.ts

@@ -4,7 +4,7 @@ import { ColorType, ComponentProps, DeconstructValue } from "@veltra/utils";
 /** 徽章组件属性 */
 interface BadgeProps extends ComponentProps {
   /** 显示值 */
-  value?: number;
+  value?: number | string;
   /** 类别 */
   type?: ColorType;
   /** 自定义背景色 */

package/dist/types/check-tag.d.ts

@@ -3,7 +3,7 @@ import { DeconstructValue } from "@veltra/utils";
 //#region src/types/check-tag.d.ts
 /** check-tag组件属性 */
 interface CheckTagProps {
-  modelValue?: string;
+  modelValue?: boolean;
   checked?: boolean;
 }
 /** check-tag组件定义的事件 */

package/dist/types/date-picker.d.ts

@@ -4,7 +4,7 @@ import { Dater } from "@cat-kit/core";
 //#region src/types/date-picker.d.ts
 /** date-picker组件属性 */
 interface DatePickerProps extends FormComponentProps {
-  modelValue?: string;
+  modelValue?: string | number | Date;
   /** 占位 */
   placeholder?: string;
   /** 日期类型 */
@@ -20,7 +20,7 @@ interface DatePickerProps extends FormComponentProps {
 }
 /** date-picker组件定义的事件 */
 interface DatePickerEmits {
-  (e: 'update:modelValue', value?: string): void;
+  (e: 'update:modelValue', value?: string | number | Date): void;
 }
 /** date-picker组件暴露的属性和方法(组件内部使用) */
 interface _DatePickerExposed {}

package/dist/types/number-input.d.ts

@@ -25,6 +25,7 @@ interface NumberInputProps extends Omit<InputProps, 'modelValue'> {
 interface NumberInputEmits {
   (event: 'update:modelValue', value?: number): void;
   (event: 'change', value?: number): void;
+  (event: 'clear'): void;
 }
 /** 数字输入组件暴露的属性和方法 */
 interface NumberInputExposed {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.0.15",
+  "version": "2.0.0",
   "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.0.15",
-    "@veltra/directives": "1.0.15",
-    "@veltra/icons": "1.0.15",
-    "@veltra/styles": "1.0.15",
-    "@veltra/utils": "1.0.15",
+    "@veltra/compositions": "2.0.0",
+    "@veltra/directives": "2.0.0",
+    "@veltra/icons": "2.0.0",
+    "@veltra/styles": "2.0.0",
+    "@veltra/utils": "2.0.0",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.0.15",
-    "@veltra/directives": "1.0.15",
-    "@veltra/icons": "1.0.15",
-    "@veltra/styles": "1.0.15",
-    "@veltra/utils": "1.0.15",
+    "@veltra/compositions": "2.0.0",
+    "@veltra/directives": "2.0.0",
+    "@veltra/icons": "2.0.0",
+    "@veltra/styles": "2.0.0",
+    "@veltra/utils": "2.0.0",
     "vue": "^3.5.33"
   }
 }

package/src/components/action/style.scss

@@ -31,8 +31,8 @@ $group-name: action-group;
     &:focus-within {
       opacity: 1;
       background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
-      backdrop-filter: blur(8px);
-      -webkit-backdrop-filter: blur(8px);
+      backdrop-filter: fn.use-var(bg-filter);
+      -webkit-backdrop-filter: fn.use-var(bg-filter);
       box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
     }
   }

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

@@ -14,7 +14,7 @@ $root-name: auto-complete;
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
     cursor: not-allowed;
 
     @include m.bem($root-name, arrow) {
@@ -68,12 +68,13 @@ $root-name: auto-complete;
 
   @include m.is(multiple) {
     line-height: 1;
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-    transition: box-shadow 0.25s ease;
+    border: fn.use-var(border);
+    box-shadow: fn.use-var(shadow, emboss);
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;
     @include m.flex($display: inline-flex);
     &:hover {
-      box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+      border-color: fn.use-var(color, primary);
     }
   }
 

package/src/components/badge/badge.vue

@@ -28,7 +28,10 @@ const { size } = useFallbackProps([props], {
 
 const badgeValue = computed(() => {
   if (props.dot) return ''
-  return props.value! > props.max ? `${props.max}+` : props.value
+  if (typeof props.value === 'number' && typeof props.max === 'number') {
+    return props.value > props.max ? `${props.max}+` : props.value
+  }
+  return props.value
 })
 
 const classList = computed(() => {

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

@@ -21,8 +21,8 @@ $root-name: batch-edit;
   .u-table__row.is-current .#{vars.$namespace}action-group.is-hover {
     opacity: 1;
     background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
     box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
   }
 

package/src/components/breadcrumb/style.scss

@@ -44,8 +44,10 @@ $root-name: breadcrumb;
     border-radius: fn.use-var(radius, small);
     transition: color 0.15s ease;
 
-    &:hover:not(.is-disabled) {
-      color: fn.use-var(color, primary);
+    @include m.is-not(disabled) {
+      &:hover {
+        color: fn.use-var(color, primary);
+      }
     }
 
     &:focus-visible {

package/src/components/button/style.scss

@@ -19,6 +19,7 @@ $root-name: button;
   -webkit-appearance: none;
   border: none;
   background-color: fn.use-var(color, default);
+  box-shadow: fn.use-var(shadow, emboss);
   transition:
     background-color 0.25s,
     box-shadow 0.2s;
@@ -101,7 +102,7 @@ $root-name: button;
           box-shadow: 0px 0px 0px 1px fn.use-var(color, $type);
         }
 
-        &:not(.is-disabled, .is-loading) {
+        @include m.is-not(disabled, loading) {
           &:hover,
           &:focus {
             background-color: fn.use-var(color, $type, 'light-9');

package/src/components/card/style.scss

@@ -8,6 +8,8 @@ $root-name: card;
   border-radius: fn.use-var(radius, default);
   background-color: fn.use-var(bg-color, top);
   box-shadow: fn.use-var(shadow);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
   overflow: hidden;
 
   @include m.is(integrate) {

package/src/components/cascade/style.scss

@@ -10,16 +10,16 @@ $menu-name: $root-name + '-panel-item';
   width: 100%;
 
   @include m.is(multiple) {
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-    transition: box-shadow 0.25s ease;
+    border: fn.use-var(border);
+    box-shadow: fn.use-var(shadow, emboss);
+    transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;
     cursor: pointer;
 
     @include m.flex($display: inline-flex);
 
     &:hover {
-      // 悬浮时边框颜色为 var(--u-color-primary);
-      box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+      border-color: fn.use-var(color, primary);
     }
   }
 

package/src/components/checkbox/style.scss

@@ -3,6 +3,7 @@
 @use 'pkg:@veltra/styles/vars';
 
 $root-name: checkbox;
+
 @include m.b($root-name) {
   user-select: none;
   vertical-align: middle;
@@ -51,7 +52,7 @@ $root-name: checkbox;
   @include m.e(wrap) {
     border: fn.use-var(border, width) fn.use-var(border, style)
       #{fn.component-var(checkbox, border, #ccc)};
-    border-radius: fn.use-var(radius, default);
+    border-radius: 6px;
     color: #fff;
     transition: background-color 0.15s ease;
     @include m.flex(inline-flex, center);

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

@@ -21,13 +21,14 @@ $root-name: code-editor;
   max-height: 480px;
   border-radius: fn.use-var(radius, default);
   background-color: var(--u-code-editor-bg);
-  box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+  border: 1px solid var(--u-code-editor-border);
+  box-shadow: fn.use-var(shadow, emboss);
   overflow: hidden;
-  transition: box-shadow 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 
   &:hover,
   &:focus-within {
-    box-shadow: inset 0 0 0 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   .cm-editor {
@@ -106,12 +107,12 @@ $root-name: code-editor;
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+    box-shadow: none;
     cursor: not-allowed;
 
     &:hover,
     &:focus-within {
-      box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+      border-color: var(--u-code-editor-border);
     }
 
     .cm-editor,
@@ -121,11 +122,9 @@ $root-name: code-editor;
   }
 
   @include m.is(readonly) {
-    box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
-
     &:hover,
     &:focus-within {
-      box-shadow: inset 0 0 0 1px var(--u-code-editor-border);
+      border-color: var(--u-code-editor-border);
     }
   }
 }

package/src/components/collapse/style.scss

@@ -73,8 +73,10 @@ $header-padding-y: (
       color $transition-fast,
       background-color $transition-fast;
 
-    &:hover:not(.is-disabled) {
-      background-color: fn.use-var(bg-color, hover);
+    @include m.is-not(disabled) {
+      &:hover {
+        background-color: fn.use-var(bg-color, hover);
+      }
     }
 
     &:focus-visible {
@@ -158,7 +160,7 @@ $header-padding-y: (
 
   // ===== Ghost（无边框）：项级胶囊化，反馈完全由 item hover 承担 =====
   // 嵌入卡片 / 对话框时使用，不引入额外的容器边界
-  &:not(.is-bordered) {
+  @include m.is-not(bordered) {
     background-color: transparent;
 
     #{fn.bem($root-name, item)} {
@@ -169,8 +171,10 @@ $header-padding-y: (
         margin-top: 4px;
       }
 
-      &:hover:not(.is-disabled) {
-        background-color: fn.use-var(bg-color, hover);
+      @include m.is-not(disabled) {
+        &:hover {
+          background-color: fn.use-var(bg-color, hover);
+        }
       }
     }
 
@@ -178,8 +182,10 @@ $header-padding-y: (
     #{fn.bem($root-name, header)} {
       border-radius: inherit;
 
-      &:hover:not(.is-disabled) {
-        background-color: transparent;
+      @include m.is-not(disabled) {
+        &:hover {
+          background-color: transparent;
+        }
       }
     }
   }

package/src/components/context-menu/style.scss

@@ -11,6 +11,8 @@ $root-name: context-menu;
   box-shadow: fn.use-var(shadow);
   border-radius: fn.use-var(radius, default);
   padding: fn.use-var(gap, small);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
 
   @include m.e(label) {
     margin-left: fn.use-var(gap, small);
@@ -31,8 +33,10 @@ $root-name: context-menu;
     border-radius: fn.use-var(radius, default);
     @include m.flex;
 
-    &:not(.is-disabled, .is-loading):hover {
-      background-color: fn.use-var(color, primary, light-9);
+    @include m.is-not(disabled, loading) {
+      &:hover {
+        background-color: fn.use-var(color, primary, light-9);
+      }
     }
 
     @include m.is(disabled, loading) {

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

@@ -9,8 +9,9 @@ $root-name: date-range-picker;
   width: 100%;
   vertical-align: middle;
   line-height: 1;
-  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
-  transition: box-shadow 0.25s ease;
+  border: fn.use-var(border);
+  box-shadow: fn.use-var(shadow, emboss);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;
 
   @include m.flex($display: inline-flex);
@@ -26,8 +27,7 @@ $root-name: date-range-picker;
   }
 
   &:hover {
-    // 悬浮时边框颜色为 var(--u-color-primary);
-    box-shadow: inset 0 0 0px 1px fn.use-var(color, primary);
+    border-color: fn.use-var(color, primary);
   }
 
   @include m.e(input) {
@@ -71,7 +71,7 @@ $root-name: date-range-picker;
 
   @include m.is(disabled) {
     background-color: fn.use-var(color, disabled);
-    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    box-shadow: none;
 
     @include m.bem($root-name, input) {
       cursor: not-allowed;

package/src/components/dialog/style.scss

@@ -40,7 +40,8 @@ $root-name: dialog;
     flex-shrink: 0;
     overflow: hidden;
     background-color: fn.use-var(bg-color, middle);
-    // backdrop-filter: fn.use-var(bg-filter);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   // 弹框头

package/src/components/drawer/style.scss

@@ -24,7 +24,8 @@ $direction-map: (
   position: absolute;
   border-radius: fn.use-var(radius, large);
   background-color: fn.use-var(bg-color, top);
-  backdrop-filter: blur(10px);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
   box-shadow: 0 0 10px 2px fn.use-var(shadow, color);
 
   @include m.e(close) {

package/src/components/dropdown/style.scss

@@ -12,6 +12,8 @@ $root-name: dropdown;
     border: fn.use-var(border);
     border-radius: fn.use-var(radius, default);
     box-shadow: fn.use-var(shadow);
+    backdrop-filter: fn.use-var(bg-filter);
+    -webkit-backdrop-filter: fn.use-var(bg-filter);
     top: 0;
     left: 0;
   }

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

@@ -12,13 +12,15 @@ $root-name: expression-editor;
   border-color: fn.use-var(border, color);
   border-radius: fn.use-var(radius, default);
 
-  &:hover:not(.is-disabled):not(.is-readonly) {
-    border-color: fn.use-var(color, primary);
-  }
+  @include m.is-not(disabled, readonly) {
+    &:hover {
+      border-color: fn.use-var(color, primary);
+    }
 
-  &:focus-within:not(.is-disabled):not(.is-readonly) {
-    border-color: fn.use-var(color, primary);
-    outline: none;
+    &:focus-within {
+      border-color: fn.use-var(color, primary);
+      outline: none;
+    }
   }
 
   @include m.is('disabled') {