@veltra/desktop 1.0.7 → 1.0.9

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

@@ -20,10 +20,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
   onChange?: ((value?: number | undefined) => any) | undefined;
 }>, {
-  placeholder: string;
-  clearable: boolean;
   disabled: boolean;
   readonly: boolean;
+  placeholder: string;
+  clearable: 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/number-input/style.js

@@ -1,2 +1,3 @@
+import "../input/style.js";
 import "./style2.css";
 import "@veltra/directives/ripple/style.js";

package/dist/components/number-range-input/number-range-input.vue.d.ts

@@ -24,10 +24,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "onUpdate:start"?: ((value: number | undefined) => any) | undefined;
   "onUpdate:end"?: ((value: number | undefined) => any) | undefined;
 }>, {
-  clearable: boolean;
+  separator: string;
   disabled: boolean;
   readonly: boolean;
-  separator: string;
+  clearable: boolean;
   startPlaceholder: string;
   endPlaceholder: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/number-range-input/style.js

@@ -1 +1,2 @@
+import "../number-input/style.js";
 import "./style2.css";

package/dist/components/paginator/style.js

@@ -1 +1,4 @@
+import "../icon/style.js";
+import "../number-input/style.js";
+import "../select/style.js";
 import "./style2.css";

package/dist/components/palette/di.js.map

@@ -1 +1 @@
-{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type { Updater } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, Ref, ComputedRef } from 'vue'\n\nimport type { PaletteHSV, PaletteRGB } from '../../types'\n\nexport const PaletteDIKey: InjectionKey<{\n  cls: BEM<'palette', 'u-'>\n  /** 色调 RGB 值 */\n  hueRGB: ComputedRef<PaletteRGB>\n  /** 色调 饱和度 亮度 */\n  HSV: PaletteHSV\n  /** RGB 值 */\n  RGB: ComputedRef<PaletteRGB>\n  /** 透明度 */\n  alpha: Ref<number>\n  /** 更新器 */\n  updater: Updater\n  /** 更新色调 */\n  updateHue: (deg: number) => void\n  /** 更新调色盘透明度 */\n  updateAlpha: (alpha: number) => void\n  /** 更新饱和度 亮度 */\n  updateSV: (sv: { s: number; v: number }) => void\n}> = Symbol('PaletteDIKey')\n"],"mappings":";AAMA,MAAa,eAkBR,OAAO,eAAe"}
+{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/palette/di.ts"],"sourcesContent":["import type { UserAction } from '@veltra/compositions'\nimport type { BEM } from '@veltra/utils'\nimport type { InjectionKey, Ref, ComputedRef } from 'vue'\n\nimport type { PaletteHSV, PaletteRGB } from '../../types'\n\nexport const PaletteDIKey: InjectionKey<{\n  cls: BEM<'palette', 'u-'>\n  /** 色调 RGB 值 */\n  hueRGB: ComputedRef<PaletteRGB>\n  /** 色调 饱和度 亮度 */\n  HSV: PaletteHSV\n  /** RGB 值 */\n  RGB: ComputedRef<PaletteRGB>\n  /** 透明度 */\n  alpha: Ref<number>\n  /** 将函数包装为用户动作（阻断 modelValue 回流副作用） */\n  userAction: UserAction\n  /** 当前是否处于用户动作期间 */\n  isUserActive: () => boolean\n  /** 更新色调 */\n  updateHue: (deg: number) => void\n  /** 更新调色盘透明度 */\n  updateAlpha: (alpha: number) => void\n  /** 更新饱和度 亮度 */\n  updateSV: (sv: { s: number; v: number }) => void\n}> = Symbol('PaletteDIKey')\n"],"mappings":";AAMA,MAAa,eAoBR,OAAO,eAAe"}

package/dist/components/palette/palette-alpha.js

@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "PaletteAlpha",
 	__name: "palette-alpha",
 	setup(__props, { expose: __expose }) {
-		const { cls, updateAlpha, hueRGB, alpha, updater } = inject(PaletteDIKey);
+		const { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey);
 		const alphaRef = shallowRef();
 		const alphaThumbTransformX = shallowRef(0);
 		const alphaThumbStyle = computed(() => {
@@ -18,12 +18,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			alphaWidth = alphaRef.value?.offsetWidth ?? 0;
 			rangeX[1] = alphaWidth;
 		}
-		function updateOffsetX(offsetX) {
-			updater.updateAndLock(() => {
-				alphaThumbTransformX.value = offsetX;
-				updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0);
-			});
-		}
+		const updateOffsetX = userAction((offsetX) => {
+			alphaThumbTransformX.value = offsetX;
+			updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0);
+		});
 		const alphaDragger = useDrag({
 			target: alphaRef,
 			rangeX,
@@ -48,9 +46,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			init();
 		});
 		watch(alpha, (newAlphaValue) => {
-			updater.update(() => {
-				alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0;
-			});
+			if (isUserActive()) return;
+			alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0;
 		}, { flush: "post" });
 		__expose({ init });
 		return (_ctx, _cache) => {

package/dist/components/palette/palette-alpha.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n    <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n    <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha, updater } = inject(PaletteDIKey)!\n\nconst alphaRef = shallowRef<HTMLElement>()\n\nconst alphaThumbTransformX = shallowRef(0)\n\nconst alphaThumbStyle = computed(() => {\n  return { transform: `translateX(${alphaThumbTransformX.value}px)` }\n})\n\nlet alphaWidth = 0\nconst rangeX = [0, 0] as [number, number]\n\nfunction getAlphaWidth() {\n  alphaWidth = alphaRef.value?.offsetWidth ?? 0\n  rangeX[1] = alphaWidth\n}\n\nfunction updateOffsetX(offsetX: number) {\n  updater.updateAndLock(() => {\n    alphaThumbTransformX.value = offsetX\n    updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)\n  })\n}\n\nconst alphaDragger = useDrag({\n  target: alphaRef,\n  rangeX,\n  onDrag({ offsetX }) {\n    updateOffsetX(offsetX)\n  },\n  onDragStart(e) {\n    getAlphaWidth()\n\n    alphaDragger.update({ offsetX: e.offsetX })\n\n    updateOffsetX(e.offsetX)\n  }\n})\n\nconst alphaSliderBG = computed(() => {\n  const { r, g, b } = hueRGB.value\n  return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`\n})\n\nfunction init(): void {\n  getAlphaWidth()\n  alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0\n}\n\nonMounted(() => {\n  init()\n})\n\nwatch(\n  alpha,\n  (newAlphaValue) => {\n    updater.update(() => {\n      alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0\n    })\n  },\n  { flush: 'post' }\n)\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EAkBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,OAAO,aAAa;EAEzE,MAAM,WAAW,YAAwB;EAEzC,MAAM,uBAAuB,WAAW,EAAC;EAEzC,MAAM,kBAAkB,eAAe;AACrC,UAAO,EAAE,WAAW,cAAc,qBAAqB,MAAM,MAAK;IACnE;EAED,IAAI,aAAa;EACjB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,SAAS,gBAAgB;AACvB,gBAAa,SAAS,OAAO,eAAe;AAC5C,UAAO,KAAK;;EAGd,SAAS,cAAc,SAAiB;AACtC,WAAQ,oBAAoB;AAC1B,yBAAqB,QAAQ;AAC7B,gBAAY,aAAa,IAAI,UAAU,aAAa,EAAC;KACtD;;EAGH,MAAM,eAAe,QAAQ;GAC3B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;AAClB,kBAAc,QAAO;;GAEvB,YAAY,GAAG;AACb,mBAAc;AAEd,iBAAa,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;AAE1C,kBAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,kCAAkC,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;IACnF;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,wBAAqB,QAAQ,aAAa,IAAI,aAAa,MAAM,QAAQ;;AAG3E,kBAAgB;AACd,SAAK;IACN;AAED,QACE,QACC,kBAAkB;AACjB,WAAQ,aAAa;AACnB,yBAAqB,QAAQ,aAAa,IAAI,aAAa,gBAAgB;KAC5E;KAEH,EAAE,OAAO,QAAO,CAClB;AAEA,WAAa,EACX,MACD,CAAA;;uBAnFC,mBAIM,OAAA;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;aAAe;IAAJ,KAAI;OAC/B,mBAA6E,OAAA;IAAvE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IAAe,OAAK,eAAA,EAAA,YAAgB,cAAA,OAAa,CAAA;gBAEnE,mBAAgF,QAAA;IAAzE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IAAkB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,gBAAA,MAAe"}
+{"version":3,"file":"palette-alpha.js","names":[],"sources":["../../../src/components/palette/palette-alpha.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('alpha')\" ref=\"alphaRef\">\n    <div :class=\"cls.e('alpha-bg')\" :style=\"{ background: alphaSliderBG }\"></div>\n\n    <span :class=\"cls.e('alpha-thumb')\" @click.stop :style=\"alphaThumbStyle\"></span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, shallowRef, onMounted, watch } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteAlpha'\n})\n\nconst { cls, updateAlpha, hueRGB, alpha, userAction, isUserActive } = inject(PaletteDIKey)!\n\nconst alphaRef = shallowRef<HTMLElement>()\n\nconst alphaThumbTransformX = shallowRef(0)\n\nconst alphaThumbStyle = computed(() => {\n  return { transform: `translateX(${alphaThumbTransformX.value}px)` }\n})\n\nlet alphaWidth = 0\nconst rangeX = [0, 0] as [number, number]\n\nfunction getAlphaWidth() {\n  alphaWidth = alphaRef.value?.offsetWidth ?? 0\n  rangeX[1] = alphaWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n  alphaThumbTransformX.value = offsetX\n  updateAlpha(alphaWidth > 0 ? offsetX / alphaWidth : 0)\n})\n\nconst alphaDragger = useDrag({\n  target: alphaRef,\n  rangeX,\n  onDrag({ offsetX }) {\n    updateOffsetX(offsetX)\n  },\n  onDragStart(e) {\n    getAlphaWidth()\n\n    alphaDragger.update({ offsetX: e.offsetX })\n\n    updateOffsetX(e.offsetX)\n  }\n})\n\nconst alphaSliderBG = computed(() => {\n  const { r, g, b } = hueRGB.value\n  return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`\n})\n\nfunction init(): void {\n  getAlphaWidth()\n  alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * alpha.value : 0\n}\n\nonMounted(() => {\n  init()\n})\n\nwatch(\n  alpha,\n  (newAlphaValue) => {\n    if (isUserActive()) return\n    alphaThumbTransformX.value = alphaWidth > 0 ? alphaWidth * newAlphaValue : 0\n  },\n  { flush: 'post' }\n)\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EAkBA,MAAM,EAAE,KAAK,aAAa,QAAQ,OAAO,YAAY,iBAAiB,OAAO,aAAa;EAE1F,MAAM,WAAW,YAAwB;EAEzC,MAAM,uBAAuB,WAAW,EAAC;EAEzC,MAAM,kBAAkB,eAAe;AACrC,UAAO,EAAE,WAAW,cAAc,qBAAqB,MAAM,MAAK;IACnE;EAED,IAAI,aAAa;EACjB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,SAAS,gBAAgB;AACvB,gBAAa,SAAS,OAAO,eAAe;AAC5C,UAAO,KAAK;;EAGd,MAAM,gBAAgB,YAAY,YAAoB;AACpD,wBAAqB,QAAQ;AAC7B,eAAY,aAAa,IAAI,UAAU,aAAa,EAAC;IACtD;EAED,MAAM,eAAe,QAAQ;GAC3B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;AAClB,kBAAc,QAAO;;GAEvB,YAAY,GAAG;AACb,mBAAc;AAEd,iBAAa,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;AAE1C,kBAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,kCAAkC,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;IACnF;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,wBAAqB,QAAQ,aAAa,IAAI,aAAa,MAAM,QAAQ;;AAG3E,kBAAgB;AACd,SAAK;IACN;AAED,QACE,QACC,kBAAkB;AACjB,OAAI,cAAc,CAAE;AACpB,wBAAqB,QAAQ,aAAa,IAAI,aAAa,gBAAgB;KAE7E,EAAE,OAAO,QAAO,CAClB;AAEA,WAAa,EACX,MACD,CAAA;;uBAhFC,mBAIM,OAAA;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;aAAe;IAAJ,KAAI;OAC/B,mBAA6E,OAAA;IAAvE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;IAAe,OAAK,eAAA,EAAA,YAAgB,cAAA,OAAa,CAAA;gBAEnE,mBAAgF,QAAA;IAAzE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IAAkB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,gBAAA,MAAe"}

package/dist/components/palette/palette-hue.js

@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "PaletteHue",
 	__name: "palette-hue",
 	setup(__props, { expose: __expose }) {
-		const { cls, updateHue, HSV, updater } = inject(PaletteDIKey);
+		const { cls, updateHue, HSV, userAction } = inject(PaletteDIKey);
 		const hueRef = shallowRef();
 		const transformX = shallowRef(0);
 		let sliderWidth = 0;
@@ -18,12 +18,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			sliderWidth = hueRef.value?.offsetWidth ?? 0;
 			rangeX[1] = sliderWidth;
 		}
-		function updateOffsetX(offsetX) {
-			updater.updateAndLock(() => {
-				transformX.value = offsetX;
-				updateHue(Math.round(offsetX / sliderWidth * 360));
-			});
-		}
+		const updateOffsetX = userAction((offsetX) => {
+			transformX.value = offsetX;
+			updateHue(Math.round(offsetX / sliderWidth * 360));
+		});
 		const sliderDragger = useDrag({
 			target: hueRef,
 			rangeX,

package/dist/components/palette/palette-hue.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette-hue.js","names":[],"sources":["../../../src/components/palette/palette-hue.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('hue')\" ref=\"hueRef\">\n    <span :class=\"cls.e('hue-thumb')\" @click.stop :style=\"hueThumbStyle\"></span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { inject, onMounted } from 'vue'\nimport { shallowRef, computed } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteHue'\n})\n\nconst { cls, updateHue, HSV, updater } = inject(PaletteDIKey)!\n\nconst hueRef = shallowRef<HTMLElement>()\n\nconst transformX = shallowRef(0)\nlet sliderWidth = 0\n\nconst hueThumbStyle = computed(() => {\n  return { transform: `translateX(${transformX.value}px)` }\n})\n\nconst rangeX = [0, 0] as [number, number]\n\nfunction getSliderWidth() {\n  sliderWidth = hueRef.value?.offsetWidth ?? 0\n  rangeX[1] = sliderWidth\n}\n\nfunction updateOffsetX(offsetX: number) {\n  updater.updateAndLock(() => {\n    transformX.value = offsetX\n    updateHue(Math.round((offsetX / sliderWidth) * 360))\n  })\n}\n\nconst sliderDragger = useDrag({\n  target: hueRef,\n  rangeX,\n  onDrag({ offsetX }) {\n    updateOffsetX(offsetX)\n  },\n  onDragStart(e) {\n    getSliderWidth()\n\n    sliderDragger.update({ offsetX: e.offsetX })\n\n    updateOffsetX(e.offsetX)\n  }\n})\n\nfunction init(): void {\n  getSliderWidth()\n  transformX.value = (sliderWidth * HSV.h) / 360\n}\n\nonMounted(() => {\n  init()\n})\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EAiBA,MAAM,EAAE,KAAK,WAAW,KAAK,YAAY,OAAO,aAAa;EAE7D,MAAM,SAAS,YAAwB;EAEvC,MAAM,aAAa,WAAW,EAAC;EAC/B,IAAI,cAAc;EAElB,MAAM,gBAAgB,eAAe;AACnC,UAAO,EAAE,WAAW,cAAc,WAAW,MAAM,MAAK;IACzD;EAED,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,SAAS,iBAAiB;AACxB,iBAAc,OAAO,OAAO,eAAe;AAC3C,UAAO,KAAK;;EAGd,SAAS,cAAc,SAAiB;AACtC,WAAQ,oBAAoB;AAC1B,eAAW,QAAQ;AACnB,cAAU,KAAK,MAAO,UAAU,cAAe,IAAI,CAAA;KACpD;;EAGH,MAAM,gBAAgB,QAAQ;GAC5B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;AAClB,kBAAc,QAAO;;GAEvB,YAAY,GAAG;AACb,oBAAe;AAEf,kBAAc,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;AAE3C,kBAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,SAAS,OAAa;AACpB,mBAAe;AACf,cAAW,QAAS,cAAc,IAAI,IAAK;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;uBAnEC,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA;aAAa;IAAJ,KAAI;OAC7B,mBAA4E,QAAA;IAArE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,YAAA,CAAA;IAAgB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,cAAA,MAAa"}
+{"version":3,"file":"palette-hue.js","names":[],"sources":["../../../src/components/palette/palette-hue.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('hue')\" ref=\"hueRef\">\n    <span :class=\"cls.e('hue-thumb')\" @click.stop :style=\"hueThumbStyle\"></span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { inject, onMounted } from 'vue'\nimport { shallowRef, computed } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteHue'\n})\n\nconst { cls, updateHue, HSV, userAction } = inject(PaletteDIKey)!\n\nconst hueRef = shallowRef<HTMLElement>()\n\nconst transformX = shallowRef(0)\nlet sliderWidth = 0\n\nconst hueThumbStyle = computed(() => {\n  return { transform: `translateX(${transformX.value}px)` }\n})\n\nconst rangeX = [0, 0] as [number, number]\n\nfunction getSliderWidth() {\n  sliderWidth = hueRef.value?.offsetWidth ?? 0\n  rangeX[1] = sliderWidth\n}\n\nconst updateOffsetX = userAction((offsetX: number) => {\n  transformX.value = offsetX\n  updateHue(Math.round((offsetX / sliderWidth) * 360))\n})\n\nconst sliderDragger = useDrag({\n  target: hueRef,\n  rangeX,\n  onDrag({ offsetX }) {\n    updateOffsetX(offsetX)\n  },\n  onDragStart(e) {\n    getSliderWidth()\n\n    sliderDragger.update({ offsetX: e.offsetX })\n\n    updateOffsetX(e.offsetX)\n  }\n})\n\nfunction init(): void {\n  getSliderWidth()\n  transformX.value = (sliderWidth * HSV.h) / 360\n}\n\nonMounted(() => {\n  init()\n})\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EAiBA,MAAM,EAAE,KAAK,WAAW,KAAK,eAAe,OAAO,aAAa;EAEhE,MAAM,SAAS,YAAwB;EAEvC,MAAM,aAAa,WAAW,EAAC;EAC/B,IAAI,cAAc;EAElB,MAAM,gBAAgB,eAAe;AACnC,UAAO,EAAE,WAAW,cAAc,WAAW,MAAM,MAAK;IACzD;EAED,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,SAAS,iBAAiB;AACxB,iBAAc,OAAO,OAAO,eAAe;AAC3C,UAAO,KAAK;;EAGd,MAAM,gBAAgB,YAAY,YAAoB;AACpD,cAAW,QAAQ;AACnB,aAAU,KAAK,MAAO,UAAU,cAAe,IAAI,CAAA;IACpD;EAED,MAAM,gBAAgB,QAAQ;GAC5B,QAAQ;GACR;GACA,OAAO,EAAE,WAAW;AAClB,kBAAc,QAAO;;GAEvB,YAAY,GAAG;AACb,oBAAe;AAEf,kBAAc,OAAO,EAAE,SAAS,EAAE,SAAS,CAAA;AAE3C,kBAAc,EAAE,QAAO;;GAE1B,CAAA;EAED,SAAS,OAAa;AACpB,mBAAe;AACf,cAAW,QAAS,cAAc,IAAI,IAAK;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;uBAjEC,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA;aAAa;IAAJ,KAAI;OAC7B,mBAA4E,QAAA;IAArE,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,YAAA,CAAA;IAAgB,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;IAAE,OAAK,eAAE,cAAA,MAAa"}

package/dist/components/palette/palette-sv.js

@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "PaletteSV",
 	__name: "palette-sv",
 	setup(__props, { expose: __expose }) {
-		const { cls, hueRGB, HSV, updateSV, updater } = inject(PaletteDIKey);
+		const { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey);
 		const svRef = shallowRef();
 		const canvasSize = {
 			width: 0,
@@ -29,16 +29,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		const svThumbStyle = computed(() => {
 			return { transform: `translate(${transform.x}px, ${transform.y}px)` };
 		});
-		function updateThumb(offsetX, offsetY) {
-			updater.updateAndLock(() => {
-				transform.x = offsetX;
-				transform.y = offsetY;
-				updateSV({
-					s: Math.max(0, Math.min(1, offsetX / canvasSize.width)),
-					v: Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
-				});
+		const updateThumb = userAction((offsetX, offsetY) => {
+			transform.x = offsetX;
+			transform.y = offsetY;
+			updateSV({
+				s: Math.max(0, Math.min(1, offsetX / canvasSize.width)),
+				v: Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))
 			});
-		}
+		});
 		const svDragger = useDrag({
 			target: svRef,
 			rangeX,

package/dist/components/palette/palette-sv.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n  <!-- 调色画布 -->\n  <div :class=\"cls.e('sv')\" ref=\"svRef\">\n    <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n    <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n    <div\n      :class=\"cls.e('sv-thumb')\"\n      ref=\"svThumbRef\"\n      @click.stop\n      @mousedown.stop\n      :style=\"svThumbStyle\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, updater } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n  width: 0,\n  height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n  if (!svRef.value) return\n  const { offsetHeight, offsetWidth } = svRef.value!\n\n  canvasSize.width = offsetWidth\n  rangeX[1] = offsetWidth\n\n  canvasSize.height = offsetHeight\n  rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n  x: 0,\n  y: 0\n})\n\nconst svThumbStyle = computed(() => {\n  return {\n    transform: `translate(${transform.x}px, ${transform.y}px)`\n  }\n})\n\nfunction updateThumb(offsetX: number, offsetY: number) {\n  updater.updateAndLock(() => {\n    transform.x = offsetX\n    transform.y = offsetY\n\n    // 根据画布位置计算饱和度和亮度\n    // 水平方向表示饱和度，从左到右饱和度逐渐增高\n    // 垂直方向表示亮度，上亮下暗\n    const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n    const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n    // 更新饱和度和亮度\n    updateSV({ s, v })\n  })\n}\n\nconst svDragger = useDrag({\n  target: svRef,\n  rangeX,\n  rangeY,\n\n  onDrag({ offsetX, offsetY }) {\n    updateThumb(offsetX, offsetY)\n  },\n  onDragStart(e) {\n    getCanvasSize()\n\n    const { offsetX, offsetY } = e\n\n    updateThumb(offsetX, offsetY)\n\n    svDragger.update({ offsetX, offsetY })\n  }\n})\n\nconst canvasBackground = computed(() => {\n  const { r, g, b } = hueRGB.value\n  return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n  getCanvasSize()\n  transform.x = canvasSize.width * HSV.s\n  transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n  init()\n})\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,YAAY,OAAO,aAAa;EAEpE,MAAM,QAAQ,YAA2B;EAEzC,MAAM,aAAa;GACjB,OAAO;GACP,QAAQ;GACV;EAEA,MAAM,SAAS,CAAC,GAAG,EAAE;EACrB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,MAAM,sBAAsB;AAC1B,OAAI,CAAC,MAAM,MAAO;GAClB,MAAM,EAAE,cAAc,gBAAgB,MAAM;AAE5C,cAAW,QAAQ;AACnB,UAAO,KAAK;AAEZ,cAAW,SAAS;AACpB,UAAO,KAAK;;EAGd,MAAM,YAAY,SAAS;GACzB,GAAG;GACH,GAAG;GACJ,CAAA;EAED,MAAM,eAAe,eAAe;AAClC,UAAO,EACL,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,MACxD;IACD;EAED,SAAS,YAAY,SAAiB,SAAiB;AACrD,WAAQ,oBAAoB;AAC1B,cAAU,IAAI;AACd,cAAU,IAAI;AASd,aAAS;KAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,MAAM,CAAA;KAI/C,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,OAAO,CAAA;KAGjD,CAAA;KAClB;;EAGH,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;AAC3B,gBAAY,SAAS,QAAO;;GAE9B,YAAY,GAAG;AACb,mBAAc;IAEd,MAAM,EAAE,SAAS,YAAY;AAE7B,gBAAY,SAAS,QAAO;AAE5B,cAAU,OAAO;KAAE;KAAS;KAAS,CAAA;;GAExC,CAAA;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;IAC3E;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,aAAU,IAAI,WAAW,QAAQ,IAAI;AACrC,aAAU,IAAI,WAAW,UAAU,IAAI,IAAI;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;2DA/GC,mBAAA,SAAa,EACb,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,KAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,OAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,iBAAA,EAAA,EAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;KACd,OAAK,eAAE,aAAA,MAAY"}
+{"version":3,"file":"palette-sv.js","names":[],"sources":["../../../src/components/palette/palette-sv.vue"],"sourcesContent":["<template>\n  <!-- 调色画布 -->\n  <div :class=\"cls.e('sv')\" ref=\"svRef\">\n    <div :class=\"cls.e('sv-s')\" :style=\"{ backgroundImage: canvasBackground }\"></div>\n    <div :class=\"cls.e('sv-v')\">{{}}</div>\n\n    <div\n      :class=\"cls.e('sv-thumb')\"\n      ref=\"svThumbRef\"\n      @click.stop\n      @mousedown.stop\n      :style=\"svThumbStyle\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useDrag } from '@veltra/compositions'\nimport { computed, inject, reactive, shallowRef, onMounted } from 'vue'\n\nimport { PaletteDIKey } from './di'\n\ndefineOptions({\n  name: 'PaletteSV'\n})\n\nconst { cls, hueRGB, HSV, updateSV, userAction } = inject(PaletteDIKey)!\n\nconst svRef = shallowRef<HTMLDivElement>()\n\nconst canvasSize = {\n  width: 0,\n  height: 0\n}\n\nconst rangeX = [0, 0] as [number, number]\nconst rangeY = [0, 0] as [number, number]\n\nconst getCanvasSize = () => {\n  if (!svRef.value) return\n  const { offsetHeight, offsetWidth } = svRef.value!\n\n  canvasSize.width = offsetWidth\n  rangeX[1] = offsetWidth\n\n  canvasSize.height = offsetHeight\n  rangeY[1] = offsetHeight\n}\n\nconst transform = reactive({\n  x: 0,\n  y: 0\n})\n\nconst svThumbStyle = computed(() => {\n  return {\n    transform: `translate(${transform.x}px, ${transform.y}px)`\n  }\n})\n\nconst updateThumb = userAction((offsetX: number, offsetY: number) => {\n  transform.x = offsetX\n  transform.y = offsetY\n\n  // 根据画布位置计算饱和度和亮度\n  // 水平方向表示饱和度，从左到右饱和度逐渐增高\n  // 垂直方向表示亮度，上亮下暗\n  const s = Math.max(0, Math.min(1, offsetX / canvasSize.width))\n  const v = Math.max(0, Math.min(1, 1 - offsetY / canvasSize.height))\n\n  // 更新饱和度和亮度\n  updateSV({ s, v })\n})\n\nconst svDragger = useDrag({\n  target: svRef,\n  rangeX,\n  rangeY,\n\n  onDrag({ offsetX, offsetY }) {\n    updateThumb(offsetX, offsetY)\n  },\n  onDragStart(e) {\n    getCanvasSize()\n\n    const { offsetX, offsetY } = e\n\n    updateThumb(offsetX, offsetY)\n\n    svDragger.update({ offsetX, offsetY })\n  }\n})\n\nconst canvasBackground = computed(() => {\n  const { r, g, b } = hueRGB.value\n  return `linear-gradient(to right, rgb(255, 255, 255), rgb(${r}, ${g}, ${b}))`\n})\n\nfunction init(): void {\n  getCanvasSize()\n  transform.x = canvasSize.width * HSV.s\n  transform.y = canvasSize.height * (1 - HSV.v)\n}\n\nonMounted(() => {\n  init()\n})\n\ndefineExpose({\n  init\n})\n</script>\n"],"mappings":";;;;;;;;EA0BA,MAAM,EAAE,KAAK,QAAQ,KAAK,UAAU,eAAe,OAAO,aAAa;EAEvE,MAAM,QAAQ,YAA2B;EAEzC,MAAM,aAAa;GACjB,OAAO;GACP,QAAQ;GACV;EAEA,MAAM,SAAS,CAAC,GAAG,EAAE;EACrB,MAAM,SAAS,CAAC,GAAG,EAAE;EAErB,MAAM,sBAAsB;AAC1B,OAAI,CAAC,MAAM,MAAO;GAClB,MAAM,EAAE,cAAc,gBAAgB,MAAM;AAE5C,cAAW,QAAQ;AACnB,UAAO,KAAK;AAEZ,cAAW,SAAS;AACpB,UAAO,KAAK;;EAGd,MAAM,YAAY,SAAS;GACzB,GAAG;GACH,GAAG;GACJ,CAAA;EAED,MAAM,eAAe,eAAe;AAClC,UAAO,EACL,WAAW,aAAa,UAAU,EAAE,MAAM,UAAU,EAAE,MACxD;IACD;EAED,MAAM,cAAc,YAAY,SAAiB,YAAoB;AACnE,aAAU,IAAI;AACd,aAAU,IAAI;AASd,YAAS;IAAE,GAJD,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,WAAW,MAAM,CAAA;IAI/C,GAHJ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,UAAU,WAAW,OAAO,CAAA;IAGjD,CAAA;IAClB;EAED,MAAM,YAAY,QAAQ;GACxB,QAAQ;GACR;GACA;GAEA,OAAO,EAAE,SAAS,WAAW;AAC3B,gBAAY,SAAS,QAAO;;GAE9B,YAAY,GAAG;AACb,mBAAc;IAEd,MAAM,EAAE,SAAS,YAAY;AAE7B,gBAAY,SAAS,QAAO;AAE5B,cAAU,OAAO;KAAE;KAAS;KAAS,CAAA;;GAExC,CAAA;EAED,MAAM,mBAAmB,eAAe;GACtC,MAAM,EAAE,GAAG,GAAG,MAAM,OAAO;AAC3B,UAAO,qDAAqD,EAAE,IAAI,EAAE,IAAI,EAAE;IAC3E;EAED,SAAS,OAAa;AACpB,kBAAc;AACd,aAAU,IAAI,WAAW,QAAQ,IAAI;AACrC,aAAU,IAAI,WAAW,UAAU,IAAI,IAAI;;AAG7C,kBAAgB;AACd,SAAK;IACN;AAED,WAAa,EACX,MACD,CAAA;;2DA7GC,mBAAA,SAAa,EACb,mBAWM,OAAA;IAXA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,KAAA,CAAA;aAAY;IAAJ,KAAI;;IAC5B,mBAAiF,OAAA;KAA3E,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;KAAW,OAAK,eAAA,EAAA,iBAAqB,iBAAA,OAAgB,CAAA;;IACvE,mBAAsC,OAAA,EAAhC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,iBAAA,EAAA,EAAA;IAElB,mBAMO,OAAA;KALJ,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;KACb,KAAI;KACH,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;KACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,IAAe,CAAA,OAAA,CAAA;KACd,OAAK,eAAE,aAAA,MAAY"}

package/dist/components/palette/palette.js

@@ -8,7 +8,7 @@ import _sfc_main$5 from "./palette-sv.js";
 import { useHSV } from "./use-hsv.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, provide, shallowRef, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { bem } from "@veltra/utils";
-import { useFormComponent, useFormFallbackProps, useUpdateLock } from "@veltra/compositions";
+import { useFormComponent, useFormFallbackProps, useUserAction } from "@veltra/compositions";
 //#region src/components/palette/palette.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "Palette",
@@ -48,43 +48,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		const { HSV, alpha, ...rest } = useHSV();
 		const color = useModel(__props, "modelValue");
 		const RGB = computed(() => HSV2RGB(HSV));
-		const updater = useUpdateLock();
+		const { userAction, isUserActive } = useUserAction();
 		watch([alpha, RGB], ([alpha, RGB]) => {
 			color.value = `#${RGB2HEX(RGB, alpha)}`;
 		});
 		const visible = shallowRef(false);
-		function handleClear() {
-			updater.updateAndLock(() => {
-				color.value = "";
-				rest.updateAlpha(1);
-				visible.value = false;
-			});
-		}
+		const handleClear = userAction(() => {
+			color.value = "";
+			rest.updateAlpha(1);
+			visible.value = false;
+		});
 		const paletteSVRef = useTemplateRef("palette-sv");
 		const paletteHueRef = useTemplateRef("palette-hue");
 		const paletteAlphaRef = useTemplateRef("palette-alpha");
 		watch(color, (color) => {
 			if (!color) return;
-			updater.update(() => {
-				const { RGB, alpha } = HEX2RGBA(color);
-				const hsv = RGB2HSV(RGB);
-				rest.updateHue(hsv.h);
-				rest.updateSV({
-					s: hsv.s,
-					v: hsv.v
-				});
-				rest.updateAlpha(alpha);
-				paletteSVRef.value?.init();
-				paletteHueRef.value?.init();
-				paletteAlphaRef.value?.init();
+			if (isUserActive()) return;
+			const { RGB, alpha } = HEX2RGBA(color);
+			const hsv = RGB2HSV(RGB);
+			rest.updateHue(hsv.h);
+			rest.updateSV({
+				s: hsv.s,
+				v: hsv.v
 			});
+			rest.updateAlpha(alpha);
+			paletteSVRef.value?.init();
+			paletteHueRef.value?.init();
+			paletteAlphaRef.value?.init();
 		}, { immediate: true });
 		provide(PaletteDIKey, {
 			cls,
 			HSV,
 			RGB,
 			alpha,
-			updater,
+			userAction,
+			isUserActive,
 			...rest
 		});
 		return (_ctx, _cache) => {
@@ -106,8 +104,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					createVNode(_sfc_main$3, {
 						color: color.value,
 						"onUpdate:color": _cache[0] || (_cache[0] = ($event) => color.value = $event),
-						onClear: handleClear
-					}, null, 8, ["color"])
+						onClear: unref(handleClear)
+					}, null, 8, ["color", "onClear"])
 				]),
 				default: withCtx(() => [createElementVNode("span", {
 					class: normalizeClass(className.value),

package/dist/components/palette/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n  <u-tip\n    trigger=\"click\"\n    :class=\"cls.e('panel')\"\n    v-model:visible=\"visible\"\n    :disabled=\"disabled || readonly\"\n  >\n    <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n    <template #content>\n      <!-- 饱和度和亮度 -->\n      <PaletteSV ref=\"palette-sv\" />\n\n      <!-- 色相 -->\n      <PaletteHue ref=\"palette-hue\" />\n\n      <!-- 透明度 -->\n      <PaletteAlpha ref=\"palette-alpha\" />\n\n      <!-- 颜色切换 -->\n      <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({\n  name: 'Palette'\n})\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst updater = useUpdateLock()\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n  color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst visible = shallowRef(false)\n\nfunction handleClear() {\n  updater.updateAndLock(() => {\n    color.value = ''\n    rest.updateAlpha(1)\n    visible.value = false\n  })\n}\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n  color,\n  (color) => {\n    if (!color) return\n\n    updater.update(() => {\n      const { RGB, alpha } = HEX2RGBA(color)\n      const hsv = RGB2HSV(RGB)\n      rest.updateHue(hsv.h)\n      rest.updateSV({ s: hsv.s, v: hsv.v })\n      rest.updateAlpha(alpha)\n\n      paletteSVRef.value?.init()\n      paletteHueRef.value?.init()\n      paletteAlphaRef.value?.init()\n    })\n  },\n  { immediate: true }\n)\n\nprovide(PaletteDIKey, {\n  cls,\n  HSV,\n  RGB,\n  alpha,\n  updater,\n  ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAM;IAAE,IAAI,GAAG,YAAY,CAAC,MAAM,MAAM;IAAA;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,UAAU,eAAc;AAE9B,QAAM,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,SAAS;AACpC,SAAM,QAAQ,IAAI,QAAQ,KAAK,MAAM;IACtC;EAED,MAAM,UAAU,WAAW,MAAK;EAEhC,SAAS,cAAc;AACrB,WAAQ,oBAAoB;AAC1B,UAAM,QAAQ;AACd,SAAK,YAAY,EAAC;AAClB,YAAQ,QAAQ;KACjB;;EAGH,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;AAEtD,QACE,QACC,UAAU;AACT,OAAI,CAAC,MAAO;AAEZ,WAAQ,aAAa;IACnB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;IACrC,MAAM,MAAM,QAAQ,IAAG;AACvB,SAAK,UAAU,IAAI,EAAC;AACpB,SAAK,SAAS;KAAE,GAAG,IAAI;KAAG,GAAG,IAAI;KAAG,CAAA;AACpC,SAAK,YAAY,MAAK;AAEtB,iBAAa,OAAO,MAAK;AACzB,kBAAc,OAAO,MAAK;AAC1B,oBAAgB,OAAO,MAAK;KAC7B;KAEH,EAAE,WAAW,MAAK,CACpB;AAEA,UAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBA7GC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAQ,IAAI,MAAA,SAAQ;;IAIpB,SAAO,cACD;KAAf,mBAAA,WAAe;KACf,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAW;KACX,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAY;KACZ,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAa;KACb,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO;;;2BAbiB,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}
+{"version":3,"file":"palette.js","names":[],"sources":["../../../src/components/palette/palette.vue"],"sourcesContent":["<template>\n  <u-tip\n    trigger=\"click\"\n    :class=\"cls.e('panel')\"\n    v-model:visible=\"visible\"\n    :disabled=\"disabled || readonly\"\n  >\n    <span :class=\"className\" :style=\"{ backgroundColor: color }\"> </span>\n\n    <template #content>\n      <!-- 饱和度和亮度 -->\n      <PaletteSV ref=\"palette-sv\" />\n\n      <!-- 色相 -->\n      <PaletteHue ref=\"palette-hue\" />\n\n      <!-- 透明度 -->\n      <PaletteAlpha ref=\"palette-alpha\" />\n\n      <!-- 颜色切换 -->\n      <PaletteColorSwitch v-model:color=\"color\" @clear=\"handleClear\" />\n    </template>\n  </u-tip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, provide, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { PaletteProps } from '../../types'\nimport { UTip } from '../tip'\nimport { HSV2RGB, RGB2HEX, HEX2RGBA, RGB2HSV } from './color-transform'\nimport { PaletteDIKey } from './di'\nimport PaletteAlpha from './palette-alpha.vue'\nimport PaletteColorSwitch from './palette-color-switch.vue'\nimport PaletteHue from './palette-hue.vue'\nimport PaletteSV from './palette-sv.vue'\nimport { useHSV } from './use-hsv'\n\ndefineOptions({\n  name: 'Palette'\n})\n\nconst props = withDefaults(defineProps<PaletteProps>(), {\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst cls = bem('palette')\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('no-color', !color.value)]\n})\n\nconst { HSV, alpha, ...rest } = useHSV()\n\nconst color = defineModel<string>()\nconst RGB = computed(() => HSV2RGB(HSV))\nconst { userAction, isUserActive } = useUserAction()\n\nwatch([alpha, RGB], ([alpha, RGB]) => {\n  color.value = `#${RGB2HEX(RGB, alpha)}`\n})\n\nconst visible = shallowRef(false)\n\nconst handleClear = userAction(() => {\n  color.value = ''\n  rest.updateAlpha(1)\n  visible.value = false\n})\n\nconst paletteSVRef = useTemplateRef('palette-sv')\nconst paletteHueRef = useTemplateRef('palette-hue')\nconst paletteAlphaRef = useTemplateRef('palette-alpha')\n\nwatch(\n  color,\n  (color) => {\n    if (!color) return\n    if (isUserActive()) return\n\n    const { RGB, alpha } = HEX2RGBA(color)\n    const hsv = RGB2HSV(RGB)\n    rest.updateHue(hsv.h)\n    rest.updateSV({ s: hsv.s, v: hsv.v })\n    rest.updateAlpha(alpha)\n\n    paletteSVRef.value?.init()\n    paletteHueRef.value?.init()\n    paletteAlphaRef.value?.init()\n  },\n  { immediate: true }\n)\n\nprovide(PaletteDIKey, {\n  cls,\n  HSV,\n  RGB,\n  alpha,\n  userAction,\n  isUserActive,\n  ...rest\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EAKd,MAAM,EAAE,cAAc,kBAAiB;EAEvC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAE,EAAE,MAAM,CAAA;EAElF,MAAM,MAAM,IAAI,UAAS;EAEzB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,EAAE,KAAK,MAAM;IAAE,IAAI,GAAG,YAAY,CAAC,MAAM,MAAM;IAAA;IACnE;EAED,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,QAAO;EAEvC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAClC,MAAM,MAAM,eAAe,QAAQ,IAAI,CAAA;EACvC,MAAM,EAAE,YAAY,iBAAiB,eAAc;AAEnD,QAAM,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,SAAS;AACpC,SAAM,QAAQ,IAAI,QAAQ,KAAK,MAAM;IACtC;EAED,MAAM,UAAU,WAAW,MAAK;EAEhC,MAAM,cAAc,iBAAiB;AACnC,SAAM,QAAQ;AACd,QAAK,YAAY,EAAC;AAClB,WAAQ,QAAQ;IACjB;EAED,MAAM,eAAe,eAAe,aAAY;EAChD,MAAM,gBAAgB,eAAe,cAAa;EAClD,MAAM,kBAAkB,eAAe,gBAAe;AAEtD,QACE,QACC,UAAU;AACT,OAAI,CAAC,MAAO;AACZ,OAAI,cAAc,CAAE;GAEpB,MAAM,EAAE,KAAK,UAAU,SAAS,MAAK;GACrC,MAAM,MAAM,QAAQ,IAAG;AACvB,QAAK,UAAU,IAAI,EAAC;AACpB,QAAK,SAAS;IAAE,GAAG,IAAI;IAAG,GAAG,IAAI;IAAG,CAAA;AACpC,QAAK,YAAY,MAAK;AAEtB,gBAAa,OAAO,MAAK;AACzB,iBAAc,OAAO,MAAK;AAC1B,mBAAgB,OAAO,MAAK;KAE9B,EAAE,WAAW,MAAK,CACpB;AAEA,UAAQ,cAAc;GACpB;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;GACJ,CAAA;;uBA3GC,YAqBQ,MAAA,YAAA,EAAA;IApBN,SAAQ;IACP,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;IACL,SAAS,QAAA;8DAAA,QAAO,QAAA;IACvB,UAAU,MAAA,SAAQ,IAAI,MAAA,SAAQ;;IAIpB,SAAO,cACD;KAAf,mBAAA,WAAe;KACf,YAA8B,aAAA,EAAnB,KAAI,cAAY,EAAA,MAAA,IAAA;KAE3B,mBAAA,OAAW;KACX,YAAgC,aAAA,EAApB,KAAI,eAAa,EAAA,MAAA,IAAA;KAE7B,mBAAA,QAAY;KACZ,YAAoC,aAAA,EAAtB,KAAI,iBAAe,EAAA,MAAA,IAAA;KAEjC,mBAAA,SAAa;KACb,YAAiE,aAAA;MAArC,OAAO,MAAA;8DAAA,MAAK,QAAA;MAAG,SAAO,MAAA,YAAW;;;2BAbM,CAArE,mBAAqE,QAAA;KAA9D,OAAK,eAAE,UAAA,MAAS;KAAG,OAAK,eAAA,EAAA,iBAAqB,MAAA,OAAK,CAAA"}

package/dist/components/palette/style.js

@@ -1 +1,4 @@
+import "../button/style.js";
+import "../tip/style.js";
+import "../input/style.js";
 import "./style2.css";

package/dist/components/password-input/password-input.vue.d.ts

@@ -15,9 +15,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  clearable: boolean;
   disabled: boolean;
   readonly: boolean;
+  clearable: 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/password-input/style.js

@@ -1 +1,3 @@
+import "../icon/style.js";
+import "../input/style.js";
 import "./style2.css";

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

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

package/dist/components/pop-confirm/style.js

@@ -1 +1,4 @@
+import "../icon/style.js";
+import "../button/style.js";
+import "../tip/style.js";
 import "./style2.css";

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;
 }>, {
   colorType: _$_veltra_utils0.ColorType;
   labelKey: string;

package/dist/components/progress-nodes/style2.css

@@ -16,11 +16,8 @@
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
 .u-progress-nodes {
-  --checked-color: var(--u-color-primary);
-  --node-color: var(--u-text-color-placeholder);
-  --dot-size: 14px;
   position: relative;
-  color: var(--node-color);
+  color: var(--u-text-color-placeholder);
   overflow: auto;
   cursor: default;
   scrollbar-width: none;
@@ -34,27 +31,6 @@
 .u-progress-nodes.is-dragging {
   cursor: grabbing;
 }
-.u-progress-nodes--primary {
-  --checked-color: var(--u-color-primary);
-}
-.u-progress-nodes--success {
-  --checked-color: var(--u-color-success);
-}
-.u-progress-nodes--warning {
-  --checked-color: var(--u-color-warning);
-}
-.u-progress-nodes--danger {
-  --checked-color: var(--u-color-danger);
-}
-.u-progress-nodes--info {
-  --checked-color: var(--u-color-info);
-}
-.u-progress-nodes--disabled {
-  --checked-color: var(--u-color-disabled);
-}
-.u-progress-nodes--default {
-  --checked-color: var(--u-color-default);
-}
 .u-progress-nodes__list {
   position: relative;
   display: flex;
@@ -87,8 +63,8 @@
 }
 .u-progress-nodes__dot {
   position: relative;
-  width: var(--dot-size);
-  height: var(--dot-size);
+  width: 14px;
+  height: 14px;
   border: 2px solid currentColor;
   border-radius: 50%;
   background-color: var(--u-bg-color-top);
@@ -112,14 +88,84 @@
   white-space: nowrap;
 }
 .u-progress-nodes .u-progress-nodes__item.is-checked {
-  color: var(--checked-color);
+  color: var(--u-color-primary);
 }
 .u-progress-nodes .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
-  background-color: var(--checked-color);
-  border-color: var(--checked-color);
+  background-color: var(--u-color-primary);
+  border-color: var(--u-color-primary);
 }
 .u-progress-nodes .u-progress-nodes__item.is-checked .u-progress-nodes__label {
-  color: var(--checked-color);
+  color: var(--u-color-primary);
+}
+.u-progress-nodes--primary .u-progress-nodes__item.is-checked {
+  color: var(--u-color-primary);
+}
+.u-progress-nodes--primary .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-primary);
+  border-color: var(--u-color-primary);
+}
+.u-progress-nodes--primary .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-primary);
+}
+.u-progress-nodes--success .u-progress-nodes__item.is-checked {
+  color: var(--u-color-success);
+}
+.u-progress-nodes--success .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-success);
+  border-color: var(--u-color-success);
+}
+.u-progress-nodes--success .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-success);
+}
+.u-progress-nodes--warning .u-progress-nodes__item.is-checked {
+  color: var(--u-color-warning);
+}
+.u-progress-nodes--warning .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-warning);
+  border-color: var(--u-color-warning);
+}
+.u-progress-nodes--warning .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-warning);
+}
+.u-progress-nodes--danger .u-progress-nodes__item.is-checked {
+  color: var(--u-color-danger);
+}
+.u-progress-nodes--danger .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-danger);
+  border-color: var(--u-color-danger);
+}
+.u-progress-nodes--danger .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-danger);
+}
+.u-progress-nodes--info .u-progress-nodes__item.is-checked {
+  color: var(--u-color-info);
+}
+.u-progress-nodes--info .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-info);
+  border-color: var(--u-color-info);
+}
+.u-progress-nodes--info .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-info);
+}
+.u-progress-nodes--disabled .u-progress-nodes__item.is-checked {
+  color: var(--u-color-disabled);
+}
+.u-progress-nodes--disabled .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-disabled);
+  border-color: var(--u-color-disabled);
+}
+.u-progress-nodes--disabled .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-disabled);
+}
+.u-progress-nodes--default .u-progress-nodes__item.is-checked {
+  color: var(--u-color-default);
+}
+.u-progress-nodes--default .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--u-color-default);
+  border-color: var(--u-color-default);
+}
+.u-progress-nodes--default .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--u-color-default);
 }
 .u-progress-nodes .u-progress-nodes__item.is-active {
   isolation: isolate;
@@ -152,10 +198,10 @@
   width: 100%;
 }
 .u-progress-nodes__link {
-  width: calc(100% - var(--dot-size) + 24px);
+  width: calc(100% - 14px + 24px);
   height: 0;
   border-width: 1px 0 0 0;
-  left: calc(50% + var(--dot-size) / 2);
+  left: calc(50% + 7px);
   top: 50%;
   transform: translateY(-50%);
 }

package/dist/components/radio/style2.css

@@ -15,14 +15,6 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
-html[data-theme=dark] .u-radio {
-  --u-radio-border: #595959;
-}
-@media (prefers-color-scheme: dark) {
-  html:not([data-theme=light]) .u-radio {
-    --u-radio-border: #595959;
-  }
-}
 .u-radio {
   cursor: pointer;
   vertical-align: middle;

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/radio-group/style.js

@@ -1 +1,2 @@
+import "../radio/style.js";
 import "./style2.css";

package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts

@@ -12,10 +12,10 @@ declare const __VLS_export: _$vue.DefineComponent<RichTextEditorProps & {
 }> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  placeholder: string;
+  format: RichTextFormat;
   disabled: boolean;
   readonly: boolean;
-  format: RichTextFormat;
+  placeholder: string;
   toolbar: ToolbarItem[];
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 //#endregion