@veltra/desktop 1.2.34 → 1.3.0

package/dist/components/nav/style2.css

@@ -264,7 +264,7 @@
   background-repeat: no-repeat;
   border: 1px solid var(--u-border-color);
   border-radius: calc(var(--u-radius-large) + 6px);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.08);
+  box-shadow: var(--u-shadow-lg);
 }
 .u-nav__container {
   padding: 8px;
@@ -344,7 +344,7 @@
   -webkit-backdrop-filter: var(--u-bg-filter);
   border: 1px solid var(--u-border-color);
   border-radius: calc(var(--u-radius-large) + 4px);
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
+  box-shadow: var(--u-shadow-lg);
 }
 .u-collapsed-nav__panel .u-tip__arrow {
   display: none;

package/dist/components/notification/style2.css

@@ -22,7 +22,7 @@
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
   border: var(--u-border);
   background-color: var(--u-bg-color-top);
-  box-shadow: var(--u-shadow);
+  box-shadow: var(--u-shadow-lg);
   margin: 4px;
   overflow: hidden;
 }

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

@@ -1,8 +1,8 @@
 import { NumberProps } from "../../types/number.js";
 //#region src/components/number/number.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<NumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NumberProps> & Readonly<{}>, {
-  duration: number;
   format: "currency" | "percent" | "decimal";
+  duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/pop-confirm/pop-confirm.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<PopConfirmProps, {}, {},
   onCancel?: (() => any) | undefined;
 }>, {
   trigger: "hover" | "click";
-  icon: import("vue").Component;
   direction: TipDirection;
+  icon: import("vue").Component;
   iconColor: string;
   confirmText: string;
   cancelText: string;

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

@@ -19,8 +19,8 @@ declare const __VLS_base: import("vue").DefineComponent<ProgressNodesProps, {},
   "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
 }>, {
-  valueKey: string;
   labelKey: string;
+  valueKey: string;
   colorType: import("@veltra/utils").ColorType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/radio/radio.js

@@ -45,15 +45,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("label", { class: normalizeClass(classList.value) }, [
-				createCommentVNode(" radio框 "),
-				createElementVNode("section", { class: normalizeClass(unref(cls).e("button")) }, [withDirectives(createElementVNode("input", {
+				withDirectives(createElementVNode("input", {
 					type: "radio",
 					class: normalizeClass(unref(cls).e("native")),
 					value: __props.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-					disabled: unref(disabled),
-					hidden: ""
-				}, null, 10, _hoisted_1), [[vModelRadio, model.value]]), createVNode(Transition, { name: "zoom-in" }, {
+					disabled: unref(disabled)
+				}, null, 10, _hoisted_1), [[vModelRadio, model.value]]),
+				createCommentVNode(" radio框 "),
+				createElementVNode("section", { class: normalizeClass(unref(cls).e("button")) }, [createVNode(Transition, { name: "zoom-in" }, {
 					default: withCtx(() => [radioChecked.value ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						class: normalizeClass(unref(cls).e("inner"))

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n  <label :class=\"classList\">\n    <!-- radio框 -->\n    <section :class=\"cls.e('button')\">\n      <input\n        type=\"radio\"\n        :class=\"cls.e('native')\"\n        :value=\"value\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        hidden\n      />\n\n      <transition name=\"zoom-in\">\n        <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n      </transition>\n    </section>\n\n    <span :class=\"cls.e('label')\">\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'URadio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('checked', radioChecked.value)\n  ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAO;EAEvB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GACxE,MAAM;GACN,UAAU;EACZ,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,KAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,aAAa,KAAK;GACtC;EACF,CAAC;;uBAzDC,mBAoBQ,SAAA,EApBA,OAAK,eAAE,UAAA,KAAS,EAAA,GAAA;IACtB,mBAAA,UAAA;IACA,mBAaU,WAAA,EAbA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA,CAAA,eACpB,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACZ,OAAO,QAAA;kEACC,MAAK,QAAA;KACb,UAAU,MAAA,QAAA;KACX,QAAA;6CAFS,MAAA,KAAK,CAAA,CAAA,GAKhB,YAEa,YAAA,EAFD,MAAK,UAAS,GAAA;4BACiC,CAArB,aAAA,SAAA,UAAA,GAApC,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GAAA,CACjB,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAA,gBAAA,gBAAf,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.vue"],"sourcesContent":["<template>\n  <label :class=\"classList\">\n    <input\n      type=\"radio\"\n      :class=\"cls.e('native')\"\n      :value=\"value\"\n      v-model=\"model\"\n      :disabled=\"disabled\"\n    />\n\n    <!-- radio框 -->\n    <section :class=\"cls.e('button')\">\n      <transition name=\"zoom-in\">\n        <span :class=\"cls.e('inner')\" v-if=\"radioChecked\"></span>\n      </transition>\n    </section>\n\n    <span :class=\"cls.e('label')\">\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { RadioProps, RadioEmits } from '../../types'\n\ndefineOptions({ name: 'URadio' })\n\nconst model = defineModel<any>()\n\nconst props = withDefaults(defineProps<RadioProps>(), { disabled: undefined })\n\ndefineEmits<RadioEmits>()\n\nconst cls = bem('radio')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false\n})\n\nconst radioChecked = computed(() => model.value === props.value)\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('checked', radioChecked.value)\n  ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ,SAAgB,SAAA,YAAC;EAE/B,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAO;EAEvB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,GAAG;GACxE,MAAM;GACN,UAAU;EACZ,CAAC;EAED,MAAM,eAAe,eAAe,MAAM,UAAU,MAAM,KAAK;EAE/D,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,aAAa,KAAK;GACtC;EACF,CAAC;;uBAxDC,mBAmBQ,SAAA,EAnBA,OAAK,eAAE,UAAA,KAAS,EAAA,GAAA;mBACtB,mBAME,SAAA;KALA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACZ,OAAO,QAAA;kEACC,MAAK,QAAA;KACb,UAAU,MAAA,QAAA;6CADF,MAAA,KAAK,CAAA,CAAA;IAIhB,mBAAA,UAAA;IACA,mBAIU,WAAA,EAJA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA,CACpB,YAEa,YAAA,EAFD,MAAK,UAAS,GAAA;4BACiC,CAArB,aAAA,SAAA,UAAA,GAApC,mBAAyD,QAAA;;MAAlD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;;;;IAIvB,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GAAA,CACjB,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAA,gBAAA,gBAAf,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/radio/style2.css

@@ -71,12 +71,18 @@
   border-radius: 50%;
   border: var(--u-border-width) var(--u-border-style) var(--u-radio-border, #ccc);
   overflow: hidden;
+  transition: border-color var(--u-transition-fast) var(--u-transition-ease), box-shadow var(--u-transition-fast) var(--u-transition-ease);
 }
 .u-radio.is-checked .u-radio__button {
   border-color: var(--u-color-primary);
 }
 .u-radio__native {
+  position: absolute;
+  width: 0;
+  height: 0;
   opacity: 0;
+  margin: 0;
+  pointer-events: none;
 }
 .u-radio__label {
   padding-left: var(--u-gap-small);
@@ -87,6 +93,12 @@
   display: block;
   height: 100%;
 }
+.u-radio:not(.is-disabled):hover .u-radio__button {
+  border-color: var(--u-color-primary);
+}
+.u-radio:not(.is-disabled) .u-radio__native:focus-visible + .u-radio__button {
+  box-shadow: var(--u-focus-ring);
+}
 .u-radio.is-disabled {
   color: var(--u-text-color-disabled);
   cursor: not-allowed;

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

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
   "onUpdate:modelValue"?: ((value: any) => any) | undefined;
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
-  valueKey: string;
   labelKey: string;
+  valueKey: string;
   disabled: boolean;
   readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/rich-text-editor/style2.css

@@ -30,7 +30,7 @@
 }
 .u-rich-text-editor:focus-within {
   border-color: var(--u-color-primary);
-  box-shadow: 0 0 0 2px rgba(var(--u-color-primary), 0.1);
+  box-shadow: 0 0 0 2px var(--u-color-primary-a-22);
 }
 .u-rich-text-editor--small {
   border-radius: var(--u-radius-small);

package/dist/components/scroll/style2.css

@@ -46,18 +46,18 @@
   cursor: default;
   position: absolute;
   border-radius: 6px;
-  background-color: rgba(153, 153, 153, 0.4);
+  background-color: var(--u-text-color-assist-a-40);
   will-change: transform;
   transition: opacity 0.3s ease-in, background-color 0.3s ease-in, height 0.15s ease-in, width 0.15s ease-in;
   z-index: 1;
 }
 .u-scroll__bar-x:hover, .u-scroll__bar-y:hover {
-  background-color: rgba(153, 153, 153, 0.6);
+  background-color: var(--u-text-color-assist-a-60);
   border-radius: 10px;
 }
 .u-scroll__bar-x.is-active, .u-scroll__bar-y.is-active {
   opacity: 1;
-  background-color: #999;
+  background-color: var(--u-text-color-assist);
   border-radius: 10px;
 }
 .u-scroll.is-always .u-scroll__bar-y {

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

@@ -24,8 +24,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:text"?: ((value: any) => any) | undefined;
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
-  valueKey: string;
   labelKey: string;
+  valueKey: string;
   clearable: boolean;
   placeholder: string;
   disabled: boolean;

package/dist/components/slider/slider-thumb.js

@@ -2,6 +2,7 @@ import { sliderContextKey } from "./di.js";
 import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, unref, useTemplateRef, watch } from "vue";
 import { useDrag, useUserAction } from "@veltra/compositions";
 //#region src/components/slider/slider-thumb.vue
+const _hoisted_1 = ["tabindex"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "slider-thumb",
 	props: { modelValue: {} },
@@ -44,8 +45,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock("div", {
 				ref: "thumb",
 				class: normalizeClass(unref(cls).e("thumb")),
-				style: normalizeStyle(style.value)
-			}, null, 6);
+				style: normalizeStyle(style.value),
+				tabindex: unref(disabled) ? -1 : 0
+			}, null, 14, _hoisted_1);
 		};
 	}
 });

package/dist/components/slider/slider-thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n  <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{ modelValue: number }>()\n\nconst emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n  if (sliderProps.vertical) {\n    return { transform: `translate(0, ${props.modelValue}px)` }\n  }\n  return { transform: `translate(${props.modelValue}px, 0)` }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n  offset = getOffsetByStep(offset)\n  emit('update:modelValue', offset)\n  return offset\n}\n\nconst dragger = useDrag({\n  target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n  onDrag: userAction(({ offsetX, offsetY }) => {\n    updateModel(sliderProps.vertical ? offsetY : offsetX)\n  }),\n  rangeX: range,\n  rangeY: range,\n  onDragEnd: userAction(({ offsetX, offsetY }) => {\n    const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n    updateDragger(offset)\n  })\n})\n\nfunction updateDragger(offset: number) {\n  if (sliderProps.vertical) {\n    dragger.update({ offsetY: offset })\n  } else {\n    dragger.update({ offsetX: offset })\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  (offset) => {\n    if (isUserActive()) return\n    updateDragger(offset)\n  }\n)\n</script>\n"],"mappings":";;;;;;;;;EASA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,gBAAgB;EAEtF,MAAM,WAAW,eAAe,OAAO;EAEvC,MAAM,QAAQ,eAAe;GAC3B,IAAI,YAAY,UACd,OAAO,EAAE,WAAW,gBAAgB,MAAM,WAAW,KAAK;GAE5D,OAAO,EAAE,WAAW,aAAa,MAAM,WAAW,QAAQ;EAC5D,CAAC;EAED,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,SAAS,YAAY,QAAgB;GACnC,SAAS,gBAAgB,MAAM;GAC/B,KAAK,qBAAqB,MAAM;GAChC,OAAO;EACT;EAEA,MAAM,UAAU,QAAQ;GACtB,QAAQ,eAAgB,SAAS,QAAQ,OAAO,SAAS,KAAM;GAE/D,QAAQ,YAAY,EAAE,SAAS,cAAc;IAC3C,YAAY,YAAY,WAAW,UAAU,OAAO;GACtD,CAAC;GACD,QAAQ;GACR,QAAQ;GACR,WAAW,YAAY,EAAE,SAAS,cAAc;IAE9C,cADe,YAAY,YAAY,WAAW,UAAU,OAC9C,CAAM;GACtB,CAAC;EACH,CAAC;EAED,SAAS,cAAc,QAAgB;GACrC,IAAI,YAAY,UACd,QAAQ,OAAO,EAAE,SAAS,OAAO,CAAC;QAElC,QAAQ,OAAO,EAAE,SAAS,OAAO,CAAC;EAEtC;EAEA,YACQ,MAAM,aACX,WAAW;GACV,IAAI,aAAa,GAAG;GACpB,cAAc,MAAM;EACtB,CACF;;uBA3DE,mBAAsD,OAAA;IAAjD,KAAI;IAAS,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IAAY,OAAK,eAAL,MAAA,KAAK"}
+{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../src/components/slider/slider-thumb.vue"],"sourcesContent":["<template>\n  <div ref=\"thumb\" :class=\"cls.e('thumb')\" :style :tabindex=\"disabled ? -1 : 0\"></div>\n</template>\n<script lang=\"ts\" setup>\nimport { useDrag, useUserAction } from '@veltra/compositions'\nimport { computed, inject, useTemplateRef, watch } from 'vue'\n\nimport { sliderContextKey } from './di'\n\nconst props = defineProps<{ modelValue: number }>()\n\nconst emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()\n\nconst { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!\n\nconst thumbRef = useTemplateRef('thumb')\n\nconst style = computed(() => {\n  if (sliderProps.vertical) {\n    return { transform: `translate(0, ${props.modelValue}px)` }\n  }\n  return { transform: `translate(${props.modelValue}px, 0)` }\n})\n\nconst { userAction, isUserActive } = useUserAction()\n\nfunction updateModel(offset: number) {\n  offset = getOffsetByStep(offset)\n  emit('update:modelValue', offset)\n  return offset\n}\n\nconst dragger = useDrag({\n  target: computed(() => (disabled.value ? null : thumbRef.value)),\n\n  onDrag: userAction(({ offsetX, offsetY }) => {\n    updateModel(sliderProps.vertical ? offsetY : offsetX)\n  }),\n  rangeX: range,\n  rangeY: range,\n  onDragEnd: userAction(({ offsetX, offsetY }) => {\n    const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)\n    updateDragger(offset)\n  })\n})\n\nfunction updateDragger(offset: number) {\n  if (sliderProps.vertical) {\n    dragger.update({ offsetY: offset })\n  } else {\n    dragger.update({ offsetX: offset })\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  (offset) => {\n    if (isUserActive()) return\n    updateDragger(offset)\n  }\n)\n</script>\n"],"mappings":";;;;;;;;;;EASA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,EAAE,KAAK,OAAO,UAAU,aAAa,oBAAoB,OAAO,gBAAgB;EAEtF,MAAM,WAAW,eAAe,OAAO;EAEvC,MAAM,QAAQ,eAAe;GAC3B,IAAI,YAAY,UACd,OAAO,EAAE,WAAW,gBAAgB,MAAM,WAAW,KAAK;GAE5D,OAAO,EAAE,WAAW,aAAa,MAAM,WAAW,QAAQ;EAC5D,CAAC;EAED,MAAM,EAAE,YAAY,iBAAiB,cAAc;EAEnD,SAAS,YAAY,QAAgB;GACnC,SAAS,gBAAgB,MAAM;GAC/B,KAAK,qBAAqB,MAAM;GAChC,OAAO;EACT;EAEA,MAAM,UAAU,QAAQ;GACtB,QAAQ,eAAgB,SAAS,QAAQ,OAAO,SAAS,KAAM;GAE/D,QAAQ,YAAY,EAAE,SAAS,cAAc;IAC3C,YAAY,YAAY,WAAW,UAAU,OAAO;GACtD,CAAC;GACD,QAAQ;GACR,QAAQ;GACR,WAAW,YAAY,EAAE,SAAS,cAAc;IAE9C,cADe,YAAY,YAAY,WAAW,UAAU,OAC9C,CAAM;GACtB,CAAC;EACH,CAAC;EAED,SAAS,cAAc,QAAgB;GACrC,IAAI,YAAY,UACd,QAAQ,OAAO,EAAE,SAAS,OAAO,CAAC;QAElC,QAAQ,OAAO,EAAE,SAAS,OAAO,CAAC;EAEtC;EAEA,YACQ,MAAM,aACX,WAAW;GACV,IAAI,aAAa,GAAG;GACpB,cAAc,MAAM;EACtB,CACF;;uBA3DE,mBAAoF,OAAA;IAA/E,KAAI;IAAS,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;IAAY,OAAK,eAAL,MAAA,KAAK;IAAE,UAAU,MAAA,QAAA,IAAQ,KAAA"}

package/dist/components/slider/style2.css

@@ -163,7 +163,14 @@
   cursor: grab;
   z-index: 1;
   border: 4px solid var(--u-color-primary);
+  transition: box-shadow var(--u-transition-fast) var(--u-transition-ease);
+}
+.u-slider__thumb:hover {
+  box-shadow: 0 0 0 3px var(--u-color-primary-a-8);
 }
 .u-slider__thumb:active {
   cursor: grabbing;
 }
+.u-slider__thumb:focus-visible {
+  box-shadow: var(--u-focus-ring);
+}

package/dist/components/switch/style2.css

@@ -38,6 +38,16 @@
 .u-switch.is-readonly {
   cursor: default;
 }
+.u-switch:not(.is-disabled):not(.is-readonly):hover .u-switch__button {
+  background-color: var(--u-color-primary-light-7);
+  border-color: var(--u-color-primary-light-5);
+}
+.u-switch:not(.is-disabled):not(.is-readonly):hover.is-checked .u-switch__button {
+  background-color: var(--u-color-primary-dark-1);
+}
+.u-switch:not(.is-disabled):not(.is-readonly) .u-switch__native:focus-visible ~ .u-switch__button {
+  box-shadow: var(--u-focus-ring);
+}
 .u-switch--small .u-switch__button {
   height: var(--u-switch-height-small);
   width: calc(var(--u-switch-height-small) * 2 - 4px);
@@ -63,8 +73,12 @@
   height: calc(var(--u-switch-height-large) - 4px);
 }
 .u-switch__native {
+  position: absolute;
+  width: 0;
+  height: 0;
   opacity: 0;
-  visibility: hidden;
+  margin: 0;
+  pointer-events: none;
 }
 .u-switch__button {
   display: flex;

package/dist/components/switch/switch.js

@@ -59,7 +59,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				createElementVNode("input", {
 					type: "checkbox",
 					class: normalizeClass(unref(cls).e("native")),
-					hidden: "",
 					checked: model.value,
 					disabled: unref(disabled),
 					onInput: handleInput

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n  <label :class=\"switchClass\" @click.stop>\n    <input\n      type=\"checkbox\"\n      :class=\"cls.e('native')\"\n      hidden\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      @input=\"handleInput\"\n    />\n    <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n      {{ inactiveText }}\n    </span>\n\n    <div :class=\"cls.e('button')\">\n      <span :class=\"cls.e('thumb')\"></span>\n    </div>\n\n    <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n      {{ activeText }}\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({ name: 'USwitch' })\n\nconst props = withDefaults(defineProps<SwitchProps>(), { disabled: undefined, readonly: undefined })\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('readonly', readonly.value),\n    bem.is('checked', model.value)\n  ]\n})\n\nconst handleInput = (e: Event) => {\n  if (disabled.value || readonly.value) return\n\n  const newValue = (e.target as HTMLInputElement).checked\n  model.value = newValue\n  emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,YAAC;EAEnC,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,cAAc,eAAe;GACjC,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,MAAM,KAAK;GAC/B;EACF,CAAC;EAED,MAAM,eAAe,MAAa;GAChC,IAAI,SAAS,SAAS,SAAS,OAAO;GAEtC,MAAM,WAAY,EAAE,OAA4B;GAChD,MAAM,QAAQ;GACd,KAAK,UAAU,QAAQ;EACzB;;uBA7DE,mBAoBQ,SAAA;IApBA,OAAK,eAAE,YAAA,KAAW;IAAG,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IACrC,mBAOE,SAAA;KANA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACb,QAAA;KACC,SAAS,MAAA;KACT,UAAU,MAAA,QAAA;KACV,SAAO;;IAEuD,QAAA,gBAAA,UAAA,GAAjE,mBAEO,QAAA;;KAFA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,GAAE,YAAA,CAAc,MAAA,KAAK,CAAA,CAAA;uBAClD,QAAA,YAAY,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;IAGjB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA,CAChB,mBAAqC,QAAA,EAA9B,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA;IAGT,QAAA,cAAA,UAAA,GAAZ,mBAEO,QAAA;;KAFkB,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,MAAA,KAAK,CAAA,CAAA;uBACnE,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.vue"],"sourcesContent":["<template>\n  <label :class=\"switchClass\" @click.stop>\n    <input\n      type=\"checkbox\"\n      :class=\"cls.e('native')\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      @input=\"handleInput\"\n    />\n    <span :class=\"[cls.e('text'), bem.is('selected', !model)]\" v-if=\"inactiveText\">\n      {{ inactiveText }}\n    </span>\n\n    <div :class=\"cls.e('button')\">\n      <span :class=\"cls.e('thumb')\"></span>\n    </div>\n\n    <span v-if=\"activeText\" :class=\"[cls.e('text'), bem.is('selected', model)]\">\n      {{ activeText }}\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'\n\ndefineOptions({ name: 'USwitch' })\n\nconst props = withDefaults(defineProps<SwitchProps>(), { disabled: undefined, readonly: undefined })\n\nconst emit = defineEmits<SwitchEmits>()\n\nconst model = defineModel<boolean>()\n\nconst cls = bem('switch')\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst switchClass = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('disabled', disabled.value),\n    bem.is('readonly', readonly.value),\n    bem.is('checked', model.value)\n  ]\n})\n\nconst handleInput = (e: Event) => {\n  if (disabled.value || readonly.value) return\n\n  const newValue = (e.target as HTMLInputElement).checked\n  model.value = newValue\n  emit('change', newValue)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAoB,SAAA,YAAC;EAEnC,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,cAAc,eAAe;GACjC,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,YAAY,SAAS,KAAK;IACjC,IAAI,GAAG,WAAW,MAAM,KAAK;GAC/B;EACF,CAAC;EAED,MAAM,eAAe,MAAa;GAChC,IAAI,SAAS,SAAS,SAAS,OAAO;GAEtC,MAAM,WAAY,EAAE,OAA4B;GAChD,MAAM,QAAQ;GACd,KAAK,UAAU,QAAQ;EACzB;;uBA5DE,mBAmBQ,SAAA;IAnBA,OAAK,eAAE,YAAA,KAAW;IAAG,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IACrC,mBAME,SAAA;KALA,MAAK;KACJ,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;KACZ,SAAS,MAAA;KACT,UAAU,MAAA,QAAA;KACV,SAAO;;IAEuD,QAAA,gBAAA,UAAA,GAAjE,mBAEO,QAAA;;KAFA,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,GAAE,YAAA,CAAc,MAAA,KAAK,CAAA,CAAA;uBAClD,QAAA,YAAY,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;IAGjB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA,EAAA,GAAA,CAChB,mBAAqC,QAAA,EAA9B,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA;IAGT,QAAA,cAAA,UAAA,GAAZ,mBAEO,QAAA;;KAFkB,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,MAAA,GAAU,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,MAAA,KAAK,CAAA,CAAA;uBACnE,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA"}

package/dist/components/tabs/style2.css

@@ -115,7 +115,10 @@
 .u-tabs-bar__item.is-active {
   color: var(--u-color-primary);
   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);
+  box-shadow: var(--u-shadow-sm);
+}
+.u-tabs-bar__item:focus-visible {
+  box-shadow: var(--u-focus-ring);
 }
 .u-tabs-bar__item-label {
   display: inline-flex;
@@ -143,10 +146,10 @@
 }
 .u-tabs-bar__close:hover {
   color: var(--u-text-color-title);
-  background-color: rgba(15, 23, 42, 0.08);
+  background-color: var(--u-text-color-title-a-8);
 }
 .u-tabs-bar__close:active {
-  background-color: rgba(15, 23, 42, 0.14);
+  background-color: var(--u-text-color-title-a-11);
 }
 .u-tabs-bar--horizontal .u-tabs-bar__item .u-tabs-bar__close {
   width: 0;
@@ -182,7 +185,7 @@
 .u-tabs-bar__nav:hover:not(:disabled) {
   color: var(--u-text-color-title);
   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);
+  box-shadow: var(--u-shadow-sm);
 }
 .u-tabs-bar__nav:disabled {
   cursor: not-allowed;

package/dist/components/text/style2.css

@@ -24,27 +24,27 @@
 .u-text.is-main-title {
   font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: var(--u-text-color-title);
 }
 .u-text.is-title {
   font-size: 16px;
   font-weight: 600;
-  color: #333;
+  color: var(--u-text-color-main);
 }
 .u-text.is-sub-title {
   font-size: 16px;
   font-weight: 500;
-  color: #999;
+  color: var(--u-text-color-placeholder);
 }
 .u-text.is-content {
   font-size: 14px;
   font-weight: 300;
-  color: #666;
+  color: var(--u-text-color-second);
 }
 .u-text.is-additional {
   font-size: 12px;
   font-weight: 300;
-  color: #999;
+  color: var(--u-text-color-assist);
 }
 .u-text.is-italic {
   font-style: italic;

package/dist/components/tip/style2.css

@@ -22,7 +22,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  box-shadow: var(--u-shadow);
+  box-shadow: var(--u-shadow-lg);
   border-radius: var(--u-radius-default);
   color: var(--u-text-color-main);
 }
@@ -40,7 +40,7 @@
 .u-tip__arrow {
   position: absolute;
   z-index: -1;
-  box-shadow: var(--u-shadow);
+  box-shadow: var(--u-shadow-lg);
   background-color: var(--u-bg-color-top);
   transform: rotate(45deg);
 }

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

@@ -19,11 +19,11 @@ declare const __VLS_base: import("vue").DefineComponent<TreeProps, _TreeExposed,
   "onNode-contextmenu"?: ((event: MouseEvent, node: TreeNode<Record<string, any>>) => any) | undefined;
   "onSelected-synced"?: ((selected?: Record<string, any> | undefined) => any) | undefined;
 }>, {
-  valueKey: string;
-  labelKey: string;
-  data: Record<string, any>[];
   expandOnClickNode: boolean;
+  labelKey: string;
+  valueKey: string;
   childrenKey: string;
+  data: Record<string, any>[];
   checkStrictly: boolean;
 }, {}, {}, {}, string, import("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: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onClear?: (() => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
-  valueKey: string;
+  expandAll: boolean;
   labelKey: string;
+  valueKey: string;
   clearable: boolean;
   placeholder: string;
   filterable: boolean;
   minWidth: string;
   disabled: boolean;
   readonly: boolean;
-  expandAll: boolean;
 }, {}, {}, {}, string, import("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.2.34",
+  "version": "1.3.0",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.2.34",
-    "@veltra/directives": "1.2.34",
-    "@veltra/icons": "1.2.34",
-    "@veltra/styles": "1.2.34",
-    "@veltra/utils": "1.2.34",
+    "@veltra/compositions": "1.3.0",
+    "@veltra/directives": "1.3.0",
+    "@veltra/icons": "1.3.0",
+    "@veltra/styles": "1.3.0",
+    "@veltra/utils": "1.3.0",
     "vue": ">=3.5.39"
   },
   "devDependencies": {

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

@@ -10,11 +10,6 @@ $root-name: batch-edit;
   border-radius: fn.use-var(radius, default);
   min-height: 0;
 
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
   // 根节点设 max-height 时，列表与侧栏表单均不超出该高度（内部各自滚动）
   > :not(.u-layout__resizer) {
     min-height: 0;

package/src/components/button/style.scss

@@ -8,7 +8,6 @@ $root-name: button;
 @include m.b($root-name) {
   color: fn.component-var(button, default-color, fn.use-var(text-color, main));
   box-sizing: border-box;
-  border-radius: 9999px;
   line-height: 1;
   outline: none;
   text-decoration: none;
@@ -21,9 +20,10 @@ $root-name: button;
   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,
-    box-shadow 0.2s;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    background-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    border-color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    color fn.use-var(transition, fast) fn.use-var(transition, ease),
+    box-shadow fn.use-var(transition, fast) fn.use-var(transition, ease);
   -webkit-tap-highlight-color: transparent; /* For some Androids */
   gap: fn.use-var(gap-small);
 
@@ -42,6 +42,10 @@ $root-name: button;
     box-shadow: none;
   }
 
+  &:focus-visible {
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.is(disabled, loading) {
     box-shadow: none !important;
   }
@@ -65,6 +69,7 @@ $root-name: button;
     height: fn.use-var(form-component-height, $size);
     line-height: fn.use-var(form-component-height, $size);
     font-size: fn.use-var(font-size-main, $size);
+    border-radius: fn.use-var(radius, $size);
 
     @include m.is(circle) {
       width: fn.use-var(form-component-height, $size);
@@ -197,11 +202,13 @@ $root-name: button;
   @include m.b($root-name) {
     border-radius: 0;
 
-    &:first-child {
-      border-radius: 9999px 0 0 9999px;
-    }
-    &:last-child {
-      border-radius: 0 9999px 9999px 0;
+    @include m.size using ($size) {
+      &:first-child {
+        border-radius: fn.use-var(radius, $size) 0 0 fn.use-var(radius, $size);
+      }
+      &:last-child {
+        border-radius: 0 fn.use-var(radius, $size) fn.use-var(radius, $size) 0;
+      }
     }
   }
 }

package/src/components/calendar/style.scss

@@ -27,6 +27,10 @@ $root-name: calendar;
     position: relative;
     @include m.flex($justify: center, $align: center);
 
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
     @include m.m(pre, next) {
       color: fn.use-var(text-color, disabled);
     }

package/src/components/card/style.scss

@@ -7,12 +7,14 @@ $root-name: card;
 @include m.b($root-name) {
   border-radius: fn.use-var(radius, default);
   background-color: fn.use-var(bg-color, top);
-  box-shadow: fn.use-var(shadow);
+  border: fn.use-var(border-muted);
+  box-shadow: fn.use-var(shadow, sm);
   backdrop-filter: fn.use-var(bg-filter);
   -webkit-backdrop-filter: fn.use-var(bg-filter);
   overflow: hidden;
 
   @include m.is(integrate) {
+    border: none;
     box-shadow: none;
     --u-card-header-bg: transparent;
     --u-card-action-bg: transparent;
@@ -27,7 +29,7 @@ $root-name: card;
     font-size: fn.use-var(font-size-main, $size);
 
     @include m.b(card__header, card__content, card__action) {
-      padding: fn.use-var(gap, $size);
+      padding: fn.component-var(card, padding-#{$size}, fn.use-var(gap, $size));
     }
 
     @include m.bem($root-name, header) {

package/src/components/check-tag/style.scss

@@ -10,7 +10,7 @@
   vertical-align: middle;
   height: 24px;
   padding: 0 9px;
-  color: #333;
+  color: fn.use-var(text-color, main);
   border: 1px solid fn.use-var(color-primary);
   border-radius: fn.use-var(radius-default);
   background: fn.use-var(color-primary-light-9);
@@ -24,4 +24,10 @@
     border: 1px solid fn.use-var(color-primary-dark-3);
     background-color: fn.use-var(color-primary-dark-3);
   }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+    color: fn.use-var(text-color, disabled);
+    background-color: fn.use-var(color, disabled);
+  }
 }

package/src/components/checkbox/checkbox.vue

@@ -1,5 +1,13 @@
 <template>
   <label :class="className">
+    <input
+      type="checkbox"
+      :class="cls.e('native')"
+      :checked="checked"
+      :disabled="disabled"
+      @click="handleInput"
+    />
+
     <span :class="cls.e('wrap')">
       <transition name="zoom-in" mode="out-in">
         <svg viewBox="0 0 64 64" v-if="checked" fill="currentColor">
@@ -11,8 +19,6 @@
       </transition>
     </span>
 
-    <input type="checkbox" :checked="checked" :disabled="disabled" hidden @click="handleInput" />
-
     <span :class="cls.e('label')" v-if="$slots.default"><slot /> </span>
   </label>
 </template>