@sdata/web-vue 3.30.0 → 4.0.0

package/es/color-picker/{control-bar.d.ts → control-bar.vue.d.ts}

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
-import { Color } from './interface';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import { type PropType } from 'vue';
+import type { Color } from './interface';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     x: {
         type: NumberConstructor;
         required: true;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     colorString: StringConstructor;
     type: PropType<"hue" | "alpha">;
     onChange: PropType<(x: number) => void>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     x: {
         type: NumberConstructor;
         required: true;
@@ -25,4 +25,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     type: PropType<"hue" | "alpha">;
     onChange: PropType<(x: number) => void>;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/es/color-picker/control-bar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useControlBlock } from "./hooks/use-control-block.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/color-picker/control-bar.vue?vue&type=script&setup=true&lang.ts
+var control_bar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "ControlBar",
+	inheritAttrs: false
+}), {}, {
+	__name: "control-bar",
+	props: {
+		x: {
+			type: Number,
+			required: true
+		},
+		color: {
+			type: Object,
+			required: true
+		},
+		colorString: String,
+		type: String,
+		onChange: Function
+	},
+	setup(__props) {
+		const props = __props;
+		const prefixCls = getPrefixCls("color-picker");
+		const rgb = computed(() => props.color.rgb);
+		const [DefineHandler, ReuseHandler] = createReusableTemplate();
+		const { blockRef, handlerRef, onMouseDown } = useControlBlock({
+			value: [props.x, 0],
+			onChange: (pos) => {
+				var _props$onChange;
+				return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, pos[0]);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineHandler), null, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "handlerRef",
+					ref: handlerRef,
+					class: normalizeClass(`${unref(prefixCls)}-handler`),
+					style: normalizeStyle({
+						left: `${__props.x * 100}%`,
+						color: __props.colorString
+					})
+				}, null, 6)]),
+				_: 1
+			}), __props.type === "alpha" ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				class: `${unref(prefixCls)}-control-bar-bg`
+			}, _ctx.$attrs), [createElementVNode("div", {
+				ref_key: "blockRef",
+				ref: blockRef,
+				class: normalizeClass([`${unref(prefixCls)}-control-bar`, `${unref(prefixCls)}-control-bar-alpha`]),
+				style: normalizeStyle({ background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}))` }),
+				onMousedown: _cache[0] || (_cache[0] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args))
+			}, [createVNode(unref(ReuseHandler))], 38)], 16)) : (openBlock(), createElementBlock("div", mergeProps({
+				key: 1,
+				ref_key: "blockRef",
+				ref: blockRef,
+				class: [`${unref(prefixCls)}-control-bar`, `${unref(prefixCls)}-control-bar-hue`]
+			}, _ctx.$attrs, { onMousedown: _cache[1] || (_cache[1] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args)) }), [createVNode(unref(ReuseHandler))], 16))], 64);
+		};
+	}
+}));
+//#endregion
+export { control_bar_vue_vue_type_script_setup_true_lang_default as default };

package/es/color-picker/gradient-thumb.js

@@ -0,0 +1,5 @@
+import gradient_thumb_vue_vue_type_script_setup_true_lang_default from "./gradient-thumb.vue_vue_type_script_setup_true_lang.js";
+//#region components/color-picker/gradient-thumb.vue
+var gradient_thumb_default = gradient_thumb_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { gradient_thumb_default as default };

package/es/color-picker/gradient-thumb.vue.d.ts

@@ -0,0 +1,13 @@
+import type { GradientColorPoint } from './interface';
+type __VLS_Props = {
+    point: GradientColorPoint;
+    prefixCls: string;
+    active?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+    onMove?: (clientX: number) => void;
+    onRemove?: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/color-picker/gradient-thumb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,69 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { formatColor } from "./utils.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, unref } from "vue";
+import { useDraggable } from "@vueuse/core";
+//#region components/color-picker/gradient-thumb.vue?vue&type=script&setup=true&lang.ts
+var gradient_thumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "GradientThumb" }), {}, {
+	__name: "gradient-thumb",
+	props: {
+		point: {},
+		prefixCls: {},
+		active: { type: Boolean },
+		disabled: { type: Boolean },
+		onSelect: { type: Function },
+		onMove: { type: Function },
+		onRemove: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const thumbRef = ref();
+		const shouldIgnoreClick = ref(false);
+		useDraggable(thumbRef, {
+			axis: "x",
+			buttons: [0, -1],
+			disabled: computed(() => props.disabled),
+			preventDefault: true,
+			stopPropagation: true,
+			onStart: () => {
+				var _props$onSelect;
+				(_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props);
+				shouldIgnoreClick.value = false;
+			},
+			onMove: (_, event) => {
+				var _props$onMove;
+				shouldIgnoreClick.value = true;
+				(_props$onMove = props.onMove) === null || _props$onMove === void 0 || _props$onMove.call(props, event.clientX);
+			},
+			onEnd: () => {
+				window.setTimeout(() => {
+					shouldIgnoreClick.value = false;
+				}, 0);
+			}
+		});
+		const handleClick = (event) => {
+			var _props$onSelect2;
+			event.stopPropagation();
+			if (!shouldIgnoreClick.value) (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 || _props$onSelect2.call(props);
+		};
+		const handleKeyDown = (event) => {
+			var _props$onRemove;
+			if (event.key === "Delete" || event.key === "Backspace") (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 || _props$onRemove.call(props);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "thumbRef",
+				ref: thumbRef,
+				type: "button",
+				class: normalizeClass([`${props.prefixCls}-gradient-thumb`, { [`${props.prefixCls}-gradient-thumb-active`]: props.active }]),
+				style: normalizeStyle({ left: `${props.point.left}%` }),
+				onClick: handleClick,
+				onKeydown: handleKeyDown
+			}, [createElementVNode("span", {
+				class: normalizeClass(`${props.prefixCls}-gradient-thumb-inner`),
+				style: normalizeStyle({ backgroundColor: unref(formatColor)(props.point.hsva, "CSS", true) })
+			}, null, 6)], 38);
+		};
+	}
+}));
+//#endregion
+export { gradient_thumb_vue_vue_type_script_setup_true_lang_default as default };

package/es/color-picker/index.d.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
-import _ColorPicker from './color-picker';
+import _ColorPicker from './color-picker.vue';
 declare const ColorPicker: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         borderless: BooleanConstructor;
@@ -23,7 +23,7 @@ declare const ColorPicker: {
             default: string;
         };
         size: {
-            type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
+            type: import("vue").PropType<import("../index.ts").Size | "small" | "medium" | "large">;
             default: string;
         };
         enableAlpha: BooleanConstructor;
@@ -56,10 +56,10 @@ declare const ColorPicker: {
         };
         hideTrigger: BooleanConstructor;
         triggerProps: {
-            type: import("vue").PropType<Partial<import("..").TriggerProps>>;
+            type: import("vue").PropType<Partial<import("../index.ts").TriggerProps>>;
         };
         floatingOptions: {
-            type: import("vue").PropType<import("..").FloatingOptions>;
+            type: import("vue").PropType<import("../index.ts").FloatingOptions>;
         };
     }>> & Readonly<{
         onClear?: ((_context: {
@@ -75,20 +75,20 @@ declare const ColorPicker: {
             color: import("./interface").ColorObject;
         }) => any) | undefined;
         "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
-    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        'update:modelValue': (_value: string) => true;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        clear: (_context: {
+            e: MouseEvent;
+        }) => void;
         change: (_value: string, _context: {
             color: import("./interface").ColorObject;
             trigger: import("./interface").ColorPickerChangeTrigger;
-        }) => true;
-        'popup-visible-change': (_visible: boolean, _value: string) => true;
-        clear: (_context: {
-            e: MouseEvent;
-        }) => true;
-        'palette-bar-change': (_context: {
+        }) => void;
+        "update:modelValue": (_value: string) => void;
+        "popup-visible-change": (_visible: boolean, _value: string) => void;
+        "palette-bar-change": (_context: {
             color: import("./interface").ColorObject;
-        }) => true;
-        'recent-colors-change': (_value: string[]) => true;
+        }) => void;
+        "recent-colors-change": (_value: string[]) => void;
     }, import("vue").PublicProps, {
         size: "small" | "medium" | "large" | "mini";
         disabled: boolean;
@@ -133,7 +133,7 @@ declare const ColorPicker: {
             default: string;
         };
         size: {
-            type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
+            type: import("vue").PropType<import("../index.ts").Size | "small" | "medium" | "large">;
             default: string;
         };
         enableAlpha: BooleanConstructor;
@@ -166,10 +166,10 @@ declare const ColorPicker: {
         };
         hideTrigger: BooleanConstructor;
         triggerProps: {
-            type: import("vue").PropType<Partial<import("..").TriggerProps>>;
+            type: import("vue").PropType<Partial<import("../index.ts").TriggerProps>>;
         };
         floatingOptions: {
-            type: import("vue").PropType<import("..").FloatingOptions>;
+            type: import("vue").PropType<import("../index.ts").FloatingOptions>;
         };
     }>> & Readonly<{
         onClear?: ((_context: {
@@ -185,7 +185,7 @@ declare const ColorPicker: {
             color: import("./interface").ColorObject;
         }) => any) | undefined;
         "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
-    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+    }>, {}, {}, {}, {}, {
         size: "small" | "medium" | "large" | "mini";
         disabled: boolean;
         readonly: string | boolean;
@@ -226,7 +226,7 @@ declare const ColorPicker: {
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("..").Size | "small" | "medium" | "large">;
+        type: import("vue").PropType<import("../index.ts").Size | "small" | "medium" | "large">;
         default: string;
     };
     enableAlpha: BooleanConstructor;
@@ -259,10 +259,10 @@ declare const ColorPicker: {
     };
     hideTrigger: BooleanConstructor;
     triggerProps: {
-        type: import("vue").PropType<Partial<import("..").TriggerProps>>;
+        type: import("vue").PropType<Partial<import("../index.ts").TriggerProps>>;
     };
     floatingOptions: {
-        type: import("vue").PropType<import("..").FloatingOptions>;
+        type: import("vue").PropType<import("../index.ts").FloatingOptions>;
     };
 }>> & Readonly<{
     onClear?: ((_context: {
@@ -278,20 +278,20 @@ declare const ColorPicker: {
         color: import("./interface").ColorObject;
     }) => any) | undefined;
     "onRecent-colors-change"?: ((_value: string[]) => any) | undefined;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (_value: string) => true;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (_context: {
+        e: MouseEvent;
+    }) => void;
     change: (_value: string, _context: {
         color: import("./interface").ColorObject;
         trigger: import("./interface").ColorPickerChangeTrigger;
-    }) => true;
-    'popup-visible-change': (_visible: boolean, _value: string) => true;
-    clear: (_context: {
-        e: MouseEvent;
-    }) => true;
-    'palette-bar-change': (_context: {
+    }) => void;
+    "update:modelValue": (_value: string) => void;
+    "popup-visible-change": (_visible: boolean, _value: string) => void;
+    "palette-bar-change": (_context: {
         color: import("./interface").ColorObject;
-    }) => true;
-    'recent-colors-change': (_value: string[]) => true;
+    }) => void;
+    "recent-colors-change": (_value: string[]) => void;
 }, string, {
     size: "small" | "medium" | "large" | "mini";
     disabled: boolean;
@@ -308,7 +308,12 @@ declare const ColorPicker: {
     swatchColors: string[] | null;
     borderless: boolean;
     defaultRecentColors: import("./interface").RecentColorsValue;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default(): unknown;
+        trigger(props: import("./interface").ColorPickerTriggerSlotProps): unknown;
+    };
+}) & {
     install: (app: App, options?: SDOptions) => void;
 };
 export type { RGB, HSV, HSVA, Color, ColorMode, ColorModes, ColorFormat, ColorObject, ColorValueState, ColorPickerChangeTrigger, ColorPickerTriggerSlotProps, GradientColorPoint, RecentColorsValue, } from './interface';

package/es/color-picker/palette.js

@@ -1,45 +1,5 @@
-import { getPrefixCls } from "../_utils/global-config.js";
-import { hsvToRgb } from "../_utils/color.js";
-import { useControlBlock } from "./hooks/use-control-block.js";
-import { computed, createVNode, defineComponent } from "vue";
-//#region components/color-picker/palette.tsx
-var palette_default = /* @__PURE__ */ defineComponent({
-	name: "Palette",
-	props: {
-		color: {
-			type: Object,
-			required: true
-		},
-		onChange: Function
-	},
-	setup(props) {
-		const prefixCls = getPrefixCls("color-picker");
-		const hsv = computed(() => props.color.hsv);
-		const { blockRef, handlerRef, onMouseDown } = useControlBlock({
-			value: [hsv.value.s, 1 - hsv.value.v],
-			onChange: (value) => {
-				var _props$onChange;
-				return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value[0], 1 - value[1]);
-			}
-		});
-		const hueColor = computed(() => {
-			const rgb = hsvToRgb(hsv.value.h, 1, 1);
-			return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
-		});
-		return () => createVNode("div", {
-			"ref": blockRef,
-			"class": `${prefixCls}-palette`,
-			"style": { backgroundColor: hueColor.value },
-			"onMousedown": onMouseDown
-		}, [createVNode("div", {
-			"ref": handlerRef,
-			"class": `${prefixCls}-handler`,
-			"style": {
-				top: `${(1 - hsv.value.v) * 100}%`,
-				left: `${hsv.value.s * 100}%`
-			}
-		}, null)]);
-	}
-});
+import palette_vue_vue_type_script_setup_true_lang_default from "./palette.vue_vue_type_script_setup_true_lang.js";
+//#region components/color-picker/palette.vue
+var palette_default = palette_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { palette_default as default };

package/es/color-picker/palette.vue.d.ts

@@ -0,0 +1,17 @@
+import { type PropType } from 'vue';
+import type { Color } from './interface';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+    onChange: PropType<(s: number, v: number) => void>;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+    onChange: PropType<(s: number, v: number) => void>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/color-picker/palette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { hsvToRgb } from "../_utils/color.js";
+import { useControlBlock } from "./hooks/use-control-block.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+//#region components/color-picker/palette.vue?vue&type=script&setup=true&lang.ts
+var palette_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Palette" }), {}, {
+	__name: "palette",
+	props: {
+		color: {
+			type: Object,
+			required: true
+		},
+		onChange: Function
+	},
+	setup(__props) {
+		const props = __props;
+		const prefixCls = getPrefixCls("color-picker");
+		const hsv = computed(() => props.color.hsv);
+		const { blockRef, handlerRef, onMouseDown } = useControlBlock({
+			value: [hsv.value.s, 1 - hsv.value.v],
+			onChange: (value) => {
+				var _props$onChange;
+				return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value[0], 1 - value[1]);
+			}
+		});
+		const hueColor = computed(() => {
+			const rgb = hsvToRgb(hsv.value.h, 1, 1);
+			return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "blockRef",
+				ref: blockRef,
+				class: normalizeClass(`${unref(prefixCls)}-palette`),
+				style: normalizeStyle({ backgroundColor: hueColor.value }),
+				onMousedown: _cache[0] || (_cache[0] = (...args) => unref(onMouseDown) && unref(onMouseDown)(...args))
+			}, [createElementVNode("div", {
+				ref_key: "handlerRef",
+				ref: handlerRef,
+				class: normalizeClass(`${unref(prefixCls)}-handler`),
+				style: normalizeStyle({
+					top: `${(1 - hsv.value.v) * 100}%`,
+					left: `${hsv.value.s * 100}%`
+				})
+			}, null, 6)], 38);
+		};
+	}
+}));
+//#endregion
+export { palette_vue_vue_type_script_setup_true_lang_default as default };