@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/color-picker/ColorPalette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { generateColor } from "./color.js";
+import { useColorPickerPanelContext } from "./context.js";
+import { useColorDrag } from "./useColorDrag.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, toHandlers, unref } from "vue";
+// src/color-picker/ColorPalette.vue?vue&type=script&setup=true&lang.ts
+/** Internal: saturation (x) / brightness (y) square. */
+var ColorPalette_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPalette",
+	__name: "ColorPalette",
+	setup(__props) {
+		const ctx = useColorPickerPanelContext();
+		const rootRef = ref();
+		const hsb = computed(() => ctx.color.value.toHsb());
+		const { dragging, handlers } = useColorDrag(rootRef, {
+			disabled: () => ctx.disabled.value,
+			onChange: (x, y) => ctx.change(generateColor({
+				h: hsb.value.h,
+				s: x,
+				b: 1 - y,
+				a: hsb.value.a
+			}), true),
+			onEnd: () => ctx.changeComplete()
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: ["am-color-picker-palette", [{ "am-color-picker-palette-dragging": unref(dragging) }, unref(ctx).classes.value?.palette]],
+				style: [{ backgroundColor: `hsl(${hsb.value.h}, 100%, 50%)` }, unref(ctx).styles.value?.palette]
+			}, toHandlers(unref(handlers), true)), [createElementVNode("span", {
+				class: "am-color-picker-handle am-color-picker-palette-handle",
+				style: normalizeStyle({
+					left: `${hsb.value.s * 100}%`,
+					top: `${(1 - hsb.value.b) * 100}%`,
+					backgroundColor: unref(generateColor)({
+						...hsb.value,
+						a: 1
+					}).toRgbString()
+				})
+			}, null, 4)], 16);
+		};
+	}
+});
+export { ColorPalette_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/ColorPicker.js

@@ -0,0 +1,4 @@
+import ColorPicker_vue_vue_type_script_setup_true_lang_default from "./ColorPicker.vue_vue_type_script_setup_true_lang.js";
+// src/color-picker/ColorPicker.vue
+var ColorPicker_default = ColorPicker_vue_vue_type_script_setup_true_lang_default;
+export { ColorPicker_default as default };

package/dist/color-picker/ColorPicker.vue.d.ts

@@ -0,0 +1,50 @@
+import type { AggregationColor } from './color';
+import type { ColorPickerExpose, ColorPickerFormat, ColorPickerProps, ColorPickerSlots, ColorPickerValueType } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Slots = ColorPickerSlots;
+declare const __VLS_base: import("vue").DefineComponent<ColorPickerProps, ColorPickerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (color: AggregationColor, css: string) => any;
+    cancel: () => any;
+    change: (color: AggregationColor, css: string) => any;
+    clear: () => any;
+    confirm: (color: AggregationColor) => any;
+    "update:open": (open: boolean) => any;
+    "update:value": (value: ColorPickerValueType) => any;
+    openChange: (open: boolean) => any;
+    changeComplete: (color: AggregationColor) => any;
+    formatChange: (format: ColorPickerFormat) => any;
+    "update:format": (format: ColorPickerFormat) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerProps> & Readonly<{
+    onSelect?: ((color: AggregationColor, css: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((color: AggregationColor, css: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onConfirm?: ((color: AggregationColor) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: ColorPickerValueType) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+    onChangeComplete?: ((color: AggregationColor) => any) | undefined;
+    onFormatChange?: ((format: ColorPickerFormat) => any) | undefined;
+    "onUpdate:format"?: ((format: ColorPickerFormat) => any) | undefined;
+}>, {
+    open: boolean;
+    disabled: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    value: ColorPickerValueType;
+    destroyOnHidden: boolean;
+    maskClosable: boolean;
+    defaultOpen: boolean;
+    allowClear: boolean;
+    disabledAlpha: boolean;
+    disabledFormat: boolean;
+    showText: boolean | ((info: import("./interface").ColorPickerShowTextInfo) => import("vue").VNodeChild);
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/color-picker/ColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,291 @@
+import { useControlled } from "../_util/hooks/useControlled.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useLocale } from "../locale/index.js";
+import PickerPopup_default from "../picker/PickerPopup.js";
+import PickerTrigger_default from "../picker/PickerTrigger.js";
+import { usePickerField } from "../picker/usePickerField.js";
+import { formatColor, generateColor, getColorAlpha } from "./color.js";
+import ColorBlock_default from "./ColorBlock.js";
+import PanelBody_default from "./PanelBody.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderSlot, shallowRef, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+// src/color-picker/ColorPicker.vue?vue&type=script&setup=true&lang.ts
+var ColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPicker",
+	inheritAttrs: false,
+	__name: "ColorPicker",
+	props: {
+		value: { default: void 0 },
+		defaultValue: {},
+		valueFormat: {},
+		format: {},
+		defaultFormat: {},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		disabledAlpha: {
+			type: Boolean,
+			default: false
+		},
+		disabledFormat: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: false
+		},
+		presets: {},
+		showText: {
+			type: [Boolean, Function],
+			default: false
+		},
+		size: {},
+		panelRender: {},
+		destroyOnHidden: {
+			type: Boolean,
+			default: false
+		},
+		id: {},
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array,
+			Function
+		] },
+		okText: {},
+		cancelText: {},
+		getContainer: {
+			type: [
+				String,
+				Function,
+				Boolean
+			],
+			default: void 0
+		},
+		zIndex: {},
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:value",
+		"update:open",
+		"update:format",
+		"change",
+		"changeComplete",
+		"formatChange",
+		"openChange",
+		"clear",
+		"select",
+		"confirm",
+		"cancel"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const locale = useLocale("ColorPicker");
+		const { open, setOpen, toggle, disabled, commit } = usePickerField(props, (value) => {
+			emit("update:open", value);
+			emit("openChange", value);
+		});
+		const [value, setValue] = useControlled(props, "value", { defaultValue: () => props.defaultValue ?? null });
+		const [format, setFormat] = useControlled(props, "format", {
+			defaultValue: () => props.defaultFormat ?? "hex",
+			onChange: (next) => {
+				emit("update:format", next);
+				emit("formatChange", next);
+			}
+		});
+		/** keeps the `cleared` flag / hue of the color committed last when it comes back as a string */
+		const cache = shallowRef();
+		const color = computed(() => {
+			const next = generateColor(value.value ?? "");
+			return cache.value && next.equals(cache.value) ? cache.value : next;
+		});
+		/** text of the trigger */
+		const label = computed(() => {
+			const current = color.value;
+			if (current.cleared) return locale.value.transparent;
+			if (format.value === "rgb") return current.toRgbString();
+			if (format.value === "hsb") return current.toHsbString();
+			const hex = current.toHexString().toUpperCase();
+			const alpha = getColorAlpha(current);
+			return alpha < 100 ? `${hex.slice(0, 7)},${alpha}%` : hex;
+		});
+		const hasText = computed(() => !!slots.showText || !!props.showText);
+		/** color of the panel while the popup is open, committed on confirm */
+		const pending = shallowRef(color.value);
+		watch(open, (val) => {
+			if (val) pending.value = color.value;
+		});
+		watch(color, (val) => {
+			pending.value = val;
+		});
+		const isSame = (a, b) => a.equals(b) && a.cleared === b.cleared;
+		function update(next) {
+			cache.value = next;
+			let output = next;
+			if (props.valueFormat) output = typeof props.valueFormat === "function" ? props.valueFormat(next) : formatColor(next, props.valueFormat);
+			setValue(output);
+			emit("update:value", output);
+			emit("change", next, next.toCssString());
+			if (next.cleared) emit("clear");
+			commit();
+		}
+		function onSelect(next) {
+			pending.value = next;
+			emit("select", next, next.toCssString());
+		}
+		function onPanelClear(next) {
+			onSelect(next);
+			emit("changeComplete", next);
+		}
+		function onConfirm() {
+			const next = pending.value;
+			if (!isSame(next, color.value)) update(next);
+			emit("confirm", next);
+			setOpen(false);
+		}
+		function onCancel() {
+			emit("cancel");
+			setOpen(false);
+		}
+		__expose({ toggle });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {
+				open: unref(open),
+				value: color.value,
+				label: label.value,
+				disabled: unref(disabled),
+				toggle: unref(toggle)
+			}, void 0, void 0, 0) : (openBlock(), createBlock(PickerTrigger_default, mergeProps({ key: 1 }, _ctx.$attrs, {
+				id: __props.id,
+				class: "am-color-picker",
+				label: label.value,
+				open: unref(open),
+				disabled: unref(disabled),
+				size: __props.size,
+				"suffix-icon": null,
+				"root-class": __props.rootClass,
+				classes: { root: __props.classes?.root },
+				styles: { root: __props.styles?.root },
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(toggle)())
+			}), {
+				default: withCtx(() => [createVNode(ColorBlock_default, {
+					class: normalizeClass(["am-color-picker-trigger-block", __props.classes?.body]),
+					style: normalizeStyle(__props.styles?.body),
+					color: color.value.toCssString(),
+					cleared: color.value.cleared,
+					"inner-class": __props.classes?.content,
+					"inner-style": __props.styles?.content
+				}, null, 8, [
+					"class",
+					"style",
+					"color",
+					"cleared",
+					"inner-class",
+					"inner-style"
+				]), hasText.value ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["am-color-picker-trigger-text", __props.classes?.description]),
+					style: normalizeStyle(__props.styles?.description)
+				}, [renderSlot(_ctx.$slots, "showText", { color: color.value }, () => [typeof __props.showText === "function" ? (openBlock(), createBlock(unref(RenderNode_default), {
+					key: 0,
+					node: __props.showText,
+					params: { color: color.value }
+				}, null, 8, ["node", "params"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(label.value), 1)], 64))])], 6)) : createCommentVNode("", true)]),
+				_: 3
+			}, 16, [
+				"id",
+				"label",
+				"open",
+				"disabled",
+				"size",
+				"root-class",
+				"classes",
+				"styles"
+			])), createVNode(PickerPopup_default, {
+				open: unref(open),
+				title: __props.title,
+				"ok-text": __props.okText,
+				"cancel-text": __props.cancelText,
+				"get-container": __props.getContainer,
+				"z-index": __props.zIndex,
+				"mask-closable": __props.maskClosable,
+				"destroy-on-hidden": __props.destroyOnHidden,
+				"root-class": __props.rootClass,
+				"popup-class": __props.classes?.popup,
+				"popup-style": __props.styles?.popup,
+				onConfirm,
+				onCancel
+			}, createSlots({
+				default: withCtx(() => [createVNode(PanelBody_default, {
+					class: "am-color-picker-popup-panel",
+					color: pending.value,
+					format: unref(format),
+					"allow-clear": __props.allowClear,
+					disabled: unref(disabled),
+					"disabled-alpha": __props.disabledAlpha,
+					"disabled-format": __props.disabledFormat,
+					presets: __props.presets,
+					"panel-render": __props.panelRender,
+					onChange: onSelect,
+					onChangeComplete: _cache[1] || (_cache[1] = ($event) => emit("changeComplete", $event)),
+					onClear: onPanelClear,
+					onFormatChange: unref(setFormat)
+				}, createSlots({ _: 2 }, [_ctx.$slots.panelRender ? {
+					name: "panelRender",
+					fn: withCtx((info) => [renderSlot(_ctx.$slots, "panelRender", normalizeProps(guardReactiveProps(info)))]),
+					key: "0"
+				} : void 0]), 1032, [
+					"color",
+					"format",
+					"allow-clear",
+					"disabled",
+					"disabled-alpha",
+					"disabled-format",
+					"presets",
+					"panel-render",
+					"onFormatChange"
+				])]),
+				_: 2
+			}, [_ctx.$slots.title ? {
+				name: "title",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
+				key: "0"
+			} : void 0]), 1032, [
+				"open",
+				"title",
+				"ok-text",
+				"cancel-text",
+				"get-container",
+				"z-index",
+				"mask-closable",
+				"destroy-on-hidden",
+				"root-class",
+				"popup-class",
+				"popup-style"
+			])], 64);
+		};
+	}
+});
+export { ColorPicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/ColorPickerPanel.js

@@ -0,0 +1,4 @@
+import ColorPickerPanel_vue_vue_type_script_setup_true_lang_default from "./ColorPickerPanel.vue_vue_type_script_setup_true_lang.js";
+// src/color-picker/ColorPickerPanel.vue
+var ColorPickerPanel_default = ColorPickerPanel_vue_vue_type_script_setup_true_lang_default;
+export { ColorPickerPanel_default as default };

package/dist/color-picker/ColorPickerPanel.vue.d.ts

@@ -0,0 +1,32 @@
+import type { AggregationColor } from './color';
+import type { ColorPickerFormat, ColorPickerPanelProps, ColorPickerPanelSlots, ColorPickerValueType } from './interface';
+type __VLS_Slots = ColorPickerPanelSlots;
+declare const __VLS_base: import("vue").DefineComponent<ColorPickerPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (color: AggregationColor, css: string) => any;
+    clear: () => any;
+    "update:value": (value: ColorPickerValueType) => any;
+    changeComplete: (color: AggregationColor) => any;
+    formatChange: (format: ColorPickerFormat) => any;
+    "update:format": (format: ColorPickerFormat) => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerPanelProps> & Readonly<{
+    onChange?: ((color: AggregationColor, css: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:value"?: ((value: ColorPickerValueType) => any) | undefined;
+    onChangeComplete?: ((color: AggregationColor) => any) | undefined;
+    onFormatChange?: ((format: ColorPickerFormat) => any) | undefined;
+    "onUpdate:format"?: ((format: ColorPickerFormat) => any) | undefined;
+}>, {
+    disabled: boolean;
+    value: ColorPickerValueType;
+    allowClear: boolean;
+    disabledAlpha: boolean;
+    disabledFormat: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/color-picker/ColorPickerPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,120 @@
+import { useControlled } from "../_util/hooks/useControlled.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { formatColor, generateColor } from "./color.js";
+import PanelBody_default from "./PanelBody.js";
+import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, shallowRef, unref, withCtx } from "vue";
+// src/color-picker/ColorPickerPanel.vue?vue&type=script&setup=true&lang.ts
+var ColorPickerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPanel",
+	inheritAttrs: false,
+	__name: "ColorPickerPanel",
+	props: {
+		value: { default: void 0 },
+		defaultValue: {},
+		valueFormat: {},
+		format: {},
+		defaultFormat: {},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		disabledAlpha: {
+			type: Boolean,
+			default: false
+		},
+		disabledFormat: {
+			type: Boolean,
+			default: false
+		},
+		presets: {},
+		panelRender: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"update:value",
+		"update:format",
+		"change",
+		"changeComplete",
+		"formatChange",
+		"clear"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const formItem = useFormItemInputContext();
+		const [value, setValue] = useControlled(props, "value", { defaultValue: () => props.defaultValue ?? null });
+		const [format, setFormat] = useControlled(props, "format", {
+			defaultValue: () => props.defaultFormat ?? "hex",
+			onChange: (next) => {
+				emit("update:format", next);
+				emit("formatChange", next);
+			}
+		});
+		/** keeps the `cleared` flag / hue of the color emitted last when it comes back as a string */
+		const cache = shallowRef();
+		const color = computed(() => {
+			const next = generateColor(value.value ?? "");
+			return cache.value && next.equals(cache.value) ? cache.value : next;
+		});
+		function toValue(next) {
+			if (!props.valueFormat) return next;
+			return typeof props.valueFormat === "function" ? props.valueFormat(next) : formatColor(next, props.valueFormat);
+		}
+		function onChange(next) {
+			cache.value = next;
+			const output = toValue(next);
+			setValue(output);
+			emit("update:value", output);
+			emit("change", next, next.toCssString());
+			formItem.onFieldChange();
+		}
+		function onClear(next) {
+			onChange(next);
+			emit("changeComplete", next);
+			emit("clear");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(PanelBody_default, mergeProps(_ctx.$attrs, {
+				color: color.value,
+				format: unref(format),
+				"allow-clear": __props.allowClear,
+				disabled: __props.disabled,
+				"disabled-alpha": __props.disabledAlpha,
+				"disabled-format": __props.disabledFormat,
+				presets: __props.presets,
+				"panel-render": __props.panelRender,
+				"root-class": __props.rootClass,
+				classes: __props.classes,
+				styles: __props.styles,
+				onChange,
+				onChangeComplete: _cache[0] || (_cache[0] = ($event) => emit("changeComplete", $event)),
+				onClear,
+				onFormatChange: unref(setFormat)
+			}), createSlots({ _: 2 }, [_ctx.$slots.panelRender ? {
+				name: "panelRender",
+				fn: withCtx((info) => [renderSlot(_ctx.$slots, "panelRender", normalizeProps(guardReactiveProps(info)))]),
+				key: "0"
+			} : void 0]), 1040, [
+				"color",
+				"format",
+				"allow-clear",
+				"disabled",
+				"disabled-alpha",
+				"disabled-format",
+				"presets",
+				"panel-render",
+				"root-class",
+				"classes",
+				"styles",
+				"onFormatChange"
+			]);
+		};
+	}
+});
+export { ColorPickerPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/ColorSlider.js

@@ -0,0 +1,4 @@
+import ColorSlider_vue_vue_type_script_setup_true_lang_default from "./ColorSlider.vue_vue_type_script_setup_true_lang.js";
+// src/color-picker/ColorSlider.vue
+var ColorSlider_default = ColorSlider_vue_vue_type_script_setup_true_lang_default;
+export { ColorSlider_default as default };

package/dist/color-picker/ColorSlider.vue.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'vue';
+type __VLS_Props = {
+    type: 'hue' | 'alpha';
+    value: number;
+    max: number;
+    disabled?: boolean;
+    /** css color of the handle */
+    handleColor?: string;
+    railStyle?: CSSProperties;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: number) => any;
+    complete: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    onComplete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/color-picker/ColorSlider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,76 @@
+import { clamp } from "../_util/index.js";
+import { useColorDrag } from "./useColorDrag.js";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, toHandlers, unref } from "vue";
+// src/color-picker/ColorSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"tabindex",
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled"
+];
+/** Internal: hue / alpha slider. */
+var ColorSlider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerSlider",
+	__name: "ColorSlider",
+	props: {
+		type: {},
+		value: {},
+		max: {},
+		disabled: { type: Boolean },
+		handleColor: {},
+		railStyle: {}
+	},
+	emits: ["change", "complete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const railRef = ref();
+		const { dragging, handlers } = useColorDrag(railRef, {
+			disabled: () => !!props.disabled,
+			onChange: (x) => emit("change", Math.round(x * props.max)),
+			onEnd: () => emit("complete")
+		});
+		function onKeydown(event) {
+			if (props.disabled) return;
+			const offset = {
+				ArrowRight: 1,
+				ArrowUp: 1,
+				ArrowLeft: -1,
+				ArrowDown: -1
+			}[event.key];
+			if (!offset) return;
+			event.preventDefault();
+			const next = clamp(props.value + offset, 0, props.max);
+			if (next !== props.value) {
+				emit("change", next);
+				emit("complete");
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ["am-color-picker-slider", [`am-color-picker-slider-${__props.type}`, { "am-color-picker-slider-dragging": unref(dragging) }]] }, toHandlers(unref(handlers), true)), [createElementVNode("div", {
+				ref_key: "railRef",
+				ref: railRef,
+				class: "am-color-picker-slider-rail"
+			}, [createElementVNode("span", {
+				class: "am-color-picker-slider-rail-inner",
+				style: normalizeStyle(__props.railStyle)
+			}, null, 4), createElementVNode("span", {
+				class: "am-color-picker-handle am-color-picker-slider-handle",
+				style: normalizeStyle({
+					left: `${__props.value / __props.max * 100}%`,
+					backgroundColor: __props.handleColor
+				}),
+				role: "slider",
+				tabindex: __props.disabled ? -1 : 0,
+				"aria-label": __props.type,
+				"aria-valuemin": "0",
+				"aria-valuemax": __props.max,
+				"aria-valuenow": __props.value,
+				"aria-disabled": __props.disabled || void 0,
+				onKeydown
+			}, null, 44, _hoisted_1)], 512)], 16);
+		};
+	}
+});
+export { ColorSlider_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/PanelBody.js

@@ -0,0 +1,4 @@
+import PanelBody_vue_vue_type_script_setup_true_lang_default from "./PanelBody.vue_vue_type_script_setup_true_lang.js";
+// src/color-picker/PanelBody.vue
+var PanelBody_default = PanelBody_vue_vue_type_script_setup_true_lang_default;
+export { PanelBody_default as default };