sard 1.0.0 → 1.0.2

package/components/color-picker/color-picker.js

@@ -0,0 +1,366 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp } from "../../utils/number.js";
+import { getTouchPoint } from "../../utils/geometry.js";
+import { formatColor, getPreviewColor, hslToHsv, hslToRgb, hsvToHsl, normalizeHsva, parseColor } from "../../utils/color.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { defaultColorPickerProps } from "./common.js";
+import popover_default from "../popover/popover.js";
+import menu_default from "../menu/menu.js";
+import menu_item_default from "../menu/menu-item.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { Down, Up } from "@sard/icons";
+//#region packages/sard/components/color-picker/color-picker.vue
+const _hoisted_1 = ["onClick"];
+var color_picker_default = /*@__PURE__*/ defineComponent({
+	__name: "color-picker",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: String,
+			required: false
+		},
+		showAlpha: {
+			type: Boolean,
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		showFormat: {
+			type: Boolean,
+			required: false
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		showPresets: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultColorPickerProps),
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:format",
+		"format-change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("color-picker");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const getInitialHsvaColor = () => {
+			const parsed = parseColor(props.modelValue || "#1989FA");
+			return parsed ? normalizeHsva(hslToHsv(parsed.color)) : normalizeHsva(void 0);
+		};
+		const innerColor = ref(getInitialHsvaColor());
+		const lastEmittedValue = ref();
+		watch(() => props.modelValue, (value) => {
+			if (value === lastEmittedValue.value) {
+				lastEmittedValue.value = void 0;
+				return;
+			}
+			const parsed = parseColor(props.modelValue || "#1989FA");
+			if (parsed) innerColor.value = normalizeHsva(hslToHsv(parsed.color));
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const currentColor = computed(() => {
+			return hsvToHsl(innerColor.value);
+		});
+		const displayColor = computed(() => {
+			return props.showAlpha ? currentColor.value : {
+				...currentColor.value,
+				a: 1
+			};
+		});
+		const emitColor = () => {
+			const value = formatColor(displayColor.value, currentFormat.value, props.showAlpha);
+			lastEmittedValue.value = value;
+			emit("update:modelValue", value);
+			emit("change", value);
+		};
+		const applyColor = (nextColor) => {
+			innerColor.value = normalizeHsva({
+				...innerColor.value,
+				...nextColor
+			});
+			emitColor();
+		};
+		const getTrackRect = (el, rectRef) => {
+			if (rectRef.value) return rectRef.value;
+			return rectRef.value = el.getBoundingClientRect();
+		};
+		const clearTrackRect = (rectRef) => {
+			rectRef.value = void 0;
+		};
+		const updateByHorizontalTrack = (event, rectRef, el, callback) => {
+			const rect = getTrackRect(el, rectRef);
+			const { x } = getTouchPoint(event);
+			callback(clamp((x - rect.left) / rect.width, 0, 1));
+		};
+		const panelRef = useTemplateRef("panel");
+		const panelRect = ref();
+		const hueColor = computed(() => {
+			return getPreviewColor(hsvToHsl({
+				h: innerColor.value.h,
+				s: 100,
+				v: 100,
+				a: 1
+			}), false);
+		});
+		const panelStyle = computed(() => {
+			return { background: `linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%), ${hueColor.value}` };
+		});
+		const panelThumbStyle = computed(() => {
+			return {
+				left: `${innerColor.value.s}%`,
+				top: `${100 - innerColor.value.v}%`
+			};
+		});
+		const updatePanelByEvent = (event) => {
+			if (isDisabled.value || isReadonly.value) return;
+			const rect = getTrackRect(panelRef.value, panelRect);
+			const point = getTouchPoint(event);
+			applyColor({
+				s: clamp((point.x - rect.left) / rect.width * 100, 0, 100),
+				v: clamp((1 - (point.y - rect.top) / rect.height) * 100, 0, 100)
+			});
+		};
+		const onPanelTouchStart = (event) => {
+			updatePanelByEvent(event);
+		};
+		const onPanelTouchMove = (event) => {
+			updatePanelByEvent(event);
+		};
+		const onPanelTouchEnd = () => {
+			clearTrackRect(panelRect);
+		};
+		const onPanelPointerDown = usePointerDown(onPanelTouchStart, onPanelTouchMove, onPanelTouchEnd);
+		const hueBar = useTemplateRef("hueBar");
+		const hueRect = ref();
+		const hueThumbStyle = computed(() => {
+			return { left: `${innerColor.value.h / 360 * 100}%` };
+		});
+		const updateHueByEvent = (event) => {
+			if (isDisabled.value || isReadonly.value) return;
+			updateByHorizontalTrack(event, hueRect, hueBar.value, (ratio) => {
+				applyColor({ h: ratio * 360 });
+			});
+		};
+		const onHueTouchStart = (event) => {
+			updateHueByEvent(event);
+		};
+		const onHueTouchMove = (event) => {
+			updateHueByEvent(event);
+		};
+		const onHueTouchEnd = () => {
+			clearTrackRect(hueRect);
+		};
+		const onHuePointerDown = usePointerDown(onHueTouchStart, onHueTouchMove, onHueTouchEnd);
+		const alphaBarRef = useTemplateRef("alphaBar");
+		const alphaRect = ref();
+		const opaquePreviewRgb = computed(() => {
+			return hslToRgb(hsvToHsl({
+				...innerColor.value,
+				a: 1
+			}));
+		});
+		const alphaBarStyle = computed(() => {
+			const { r, g, b } = opaquePreviewRgb.value;
+			return { background: `linear-gradient(90deg, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)` };
+		});
+		const alphaThumbStyle = computed(() => {
+			return { left: `${innerColor.value.a * 100}%` };
+		});
+		const updateAlphaByEvent = (event) => {
+			if (isDisabled.value || isReadonly.value) return;
+			updateByHorizontalTrack(event, alphaRect, alphaBarRef.value, (ratio) => {
+				applyColor({ a: ratio });
+			});
+		};
+		const onAlphaTouchStart = (event) => {
+			updateAlphaByEvent(event);
+		};
+		const onAlphaTouchMove = (event) => {
+			updateAlphaByEvent(event);
+		};
+		const onAlphaTouchEnd = () => {
+			clearTrackRect(alphaRect);
+		};
+		const onAlphaPointerDown = usePointerDown(onAlphaTouchStart, onAlphaTouchMove, onAlphaTouchEnd);
+		const colorFormats = [
+			"hex",
+			"rgb",
+			"hsl"
+		];
+		const formatOptions = colorFormats.map((format) => {
+			return {
+				label: format.toUpperCase(),
+				value: format
+			};
+		});
+		const normalizeSelectableFormat = (format) => {
+			return format && colorFormats.includes(format) ? format : "hex";
+		};
+		const currentFormat = ref(normalizeSelectableFormat(props.format));
+		const displayFormat = computed(() => {
+			return formatOptions.find((option) => option.value === currentFormat.value)?.label || "";
+		});
+		watch(() => props.format, () => {
+			currentFormat.value = normalizeSelectableFormat(props.format);
+		});
+		const onFormatSelect = ({ value }) => {
+			if (isDisabled.value || isReadonly.value) return;
+			formatPopoverVisible.value = false;
+			if (currentFormat.value === value) return;
+			currentFormat.value = value;
+			emit("update:format", value);
+			emit("format-change", value);
+			emitColor();
+		};
+		const formatPopoverVisible = ref(false);
+		const outputValue = computed(() => {
+			return formatColor(displayColor.value, currentFormat.value, props.showAlpha);
+		});
+		const previewColor = computed(() => {
+			return getPreviewColor(displayColor.value, props.showAlpha);
+		});
+		const previewStyle = computed(() => {
+			return { background: previewColor.value };
+		});
+		const normalizedPresets = computed(() => {
+			return (props.presets || []).map((value) => {
+				const parsed = parseColor(value);
+				if (!parsed) return null;
+				return {
+					value,
+					preview: getPreviewColor(parsed.color, props.showAlpha),
+					active: formatColor(parsed.color, "hex", props.showAlpha) === formatColor(displayColor.value, "hex", props.showAlpha)
+				};
+			}).filter(Boolean);
+		});
+		const onPresetSelect = (value) => {
+			if (isDisabled.value || isReadonly.value) return;
+			const parsed = parseColor(value);
+			if (!parsed) return;
+			innerColor.value = normalizeHsva(hslToHsv(parsed.color));
+			emitColor();
+		};
+		const colorPickerClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("disabled", isDisabled.value),
+				bem.m("readonly", isReadonly.value)
+			];
+		});
+		__expose({});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(colorPickerClass.value) }, [
+				createElementVNode("div", {
+					ref: "panel",
+					class: normalizeClass(unref(bem).e("panel")),
+					style: normalizeStyle(panelStyle.value),
+					onTouchstart: withModifiers(onPanelTouchStart, ["stop", "prevent"]),
+					onTouchmove: withModifiers(onPanelTouchMove, ["stop", "prevent"]),
+					onTouchend: onPanelTouchEnd,
+					onTouchcancel: onPanelTouchEnd,
+					onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPanelPointerDown) && unref(onPanelPointerDown)(...args))
+				}, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("thumb")),
+					style: normalizeStyle(panelThumbStyle.value)
+				}, null, 6)], 38),
+				createElementVNode("div", {
+					ref_key: "hueBar",
+					ref: hueBar,
+					class: normalizeClass([unref(bem).e("slider-bar"), unref(bem).em("slider-bar", "hue")]),
+					onTouchstart: withModifiers(onHueTouchStart, ["stop", "prevent"]),
+					onTouchmove: withModifiers(onHueTouchMove, ["stop", "prevent"]),
+					onTouchend: onHueTouchEnd,
+					onTouchcancel: onHueTouchEnd,
+					onPointerdown: _cache[1] || (_cache[1] = (...args) => unref(onHuePointerDown) && unref(onHuePointerDown)(...args))
+				}, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("thumb")),
+					style: normalizeStyle(hueThumbStyle.value)
+				}, null, 6)], 34),
+				props.showAlpha ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref: "alphaBar",
+					class: normalizeClass([unref(bem).e("slider-bar"), unref(bem).em("slider-bar", "alpha")]),
+					onTouchstart: withModifiers(onAlphaTouchStart, ["stop", "prevent"]),
+					onTouchmove: withModifiers(onAlphaTouchMove, ["stop", "prevent"]),
+					onTouchend: onAlphaTouchEnd,
+					onTouchcancel: onAlphaTouchEnd,
+					onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(onAlphaPointerDown) && unref(onAlphaPointerDown)(...args))
+				}, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("alpha-fill")),
+					style: normalizeStyle(alphaBarStyle.value)
+				}, null, 6), createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("thumb")),
+					style: normalizeStyle(alphaThumbStyle.value)
+				}, null, 6)], 34)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("info")) }, [
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("preview")) }, [createElementVNode("div", {
+						class: normalizeClass(unref(bem).e("preview-fill")),
+						style: normalizeStyle(previewStyle.value)
+					}, null, 6)], 2),
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("value")) }, toDisplayString(outputValue.value), 3),
+					__props.showFormat ? (openBlock(), createBlock(popover_default, {
+						key: 0,
+						visible: formatPopoverVisible.value,
+						"onUpdate:visible": _cache[3] || (_cache[3] = ($event) => formatPopoverVisible.value = $event),
+						position: "top"
+					}, {
+						reference: withCtx(() => [createElementVNode("div", { class: normalizeClass([unref(bem).e("format"), unref(bem).em("format", "active", formatPopoverVisible.value)]) }, [createTextVNode(toDisplayString(displayFormat.value) + " ", 1), formatPopoverVisible.value ? (openBlock(), createBlock(unref(Up), { key: 0 })) : (openBlock(), createBlock(unref(Down), { key: 1 }))], 2)]),
+						default: withCtx(() => [createVNode(menu_default, { onSelect: onFormatSelect }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(formatOptions), (option) => {
+								return openBlock(), createBlock(menu_item_default, {
+									key: option.value,
+									value: option.value,
+									label: option.value
+								}, null, 8, ["value", "label"]);
+							}), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["visible"])) : createCommentVNode("v-if", true)
+				], 2),
+				__props.showPresets && normalizedPresets.value.length ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("presets"))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedPresets.value, (preset) => {
+					return openBlock(), createElementBlock("div", {
+						key: preset.value,
+						class: normalizeClass([unref(bem).e("preset"), unref(bem).em("preset", "active", preset.active)]),
+						onClick: ($event) => onPresetSelect(preset.value)
+					}, [createElementVNode("div", {
+						class: normalizeClass(unref(bem).e("preset-fill")),
+						style: normalizeStyle({ background: preset.preview })
+					}, null, 6)], 10, _hoisted_1);
+				}), 128))], 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { color_picker_default as default };

package/components/color-picker/common.d.ts

@@ -0,0 +1,24 @@
+import { type DefaultProps } from '../config';
+import { type ColorFormat } from '../../utils/color';
+export interface ColorPickerProps {
+    modelValue?: string;
+    showAlpha?: boolean;
+    format?: ColorFormat;
+    showFormat?: boolean;
+    presets?: string[];
+    showPresets?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    validateEvent?: boolean;
+}
+export declare const defaultColorPickerProps: DefaultProps<ColorPickerProps>;
+export interface ColorPickerSlots {
+}
+export interface ColorPickerEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'update:format', format: ColorFormat): void;
+    (e: 'format-change', format: ColorFormat): void;
+}
+export interface ColorPickerExpose {
+}

package/components/color-picker/common.js

@@ -0,0 +1,12 @@
+import { defaultColorPickerPresets } from "../../utils/color.js";
+//#region packages/sard/components/color-picker/common.ts
+const defaultColorPickerProps = {
+	showAlpha: false,
+	format: "rgb",
+	showFormat: false,
+	presets: () => defaultColorPickerPresets.slice(),
+	showPresets: false,
+	validateEvent: true
+};
+//#endregion
+export { defaultColorPickerProps };

package/components/color-picker/index.css

@@ -0,0 +1 @@
+:root{--s-color-picker-checker-bg:repeating-conic-gradient(from 0deg, #ccc 0deg 90deg, transparent 90deg 180deg) center/12px 12px;--s-color-picker-panel-height:160px;--s-color-picker-preview-size:40px;--s-color-picker-value-size:24px;--s-color-picker-slider-bar-height:16px;--s-color-picker-thumb-size:18px;--s-color-picker-preset-size:24px}.s-color-picker{display:flex;flex-direction:column;gap:12px}.s-color-picker__panel{position:relative;height:var(--s-color-picker-panel-height);border-radius:var(--s-border-radius-lg);overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.s-color-picker__thumb{position:absolute;top:50%;width:var(--s-color-picker-thumb-size);height:var(--s-color-picker-thumb-size);border:2px solid var(--s-white);border-radius:var(--s-border-radius-full);box-shadow:0 0 0 1px rgba(0,0,0,.12);background:rgba(0,0,0,0);transform:translate(-50%, -50%);z-index:1;cursor:pointer}.s-color-picker__slider-bar{position:relative;height:var(--s-color-picker-slider-bar-height);border-radius:var(--s-border-radius-full);cursor:pointer;-webkit-user-select:none;user-select:none}.s-color-picker__slider-bar--alpha{background:var(--s-color-picker-checker-bg)}.s-color-picker__slider-bar--hue{background:linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)}.s-color-picker__alpha-fill{width:100%;height:100%;border-radius:inherit}.s-color-picker__info{display:flex;align-items:center;gap:8px}.s-color-picker__preview{flex:none;width:var(--s-color-picker-preview-size);height:var(--s-color-picker-preview-size);border-radius:var(--s-border-radius-full);border:1px solid var(--s-border-color);background:var(--s-color-picker-checker-bg);overflow:hidden}.s-color-picker__preview-fill{width:100%;height:100%}.s-color-picker__value{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;height:var(--s-color-picker-value-size);padding:0 10px;font-size:var(--s-font-size-sm);white-space:nowrap;border:1px solid var(--s-border-color);border-radius:var(--s-border-radius)}.s-color-picker__format{display:flex;align-items:center;justify-content:center;flex:none;height:var(--s-color-picker-value-size);padding:0 10px;gap:4px;border-radius:var(--s-border-radius-sm);font-size:var(--s-font-size-sm);cursor:pointer}.s-color-picker__format:active{background:var(--s-bg-color-active)}.s-color-picker__format--active{background:var(--s-bg-color-active)}.s-color-picker__presets{display:flex;flex-wrap:wrap;gap:8px}.s-color-picker__preset{width:var(--s-color-picker-preset-size);height:var(--s-color-picker-preset-size);border-radius:var(--s-border-radius);border:1px solid var(--s-border-color);background:var(--s-color-picker-checker-bg);overflow:hidden;cursor:pointer}.s-color-picker__preset--active{box-shadow:0 0 0 2px rgba(var(--s-color-primary-rgb), 0.25)}.s-color-picker__preset-fill{width:100%;height:100%}.s-color-picker--disabled .s-color-picker__panel,.s-color-picker--disabled .s-color-picker__slider-bar,.s-color-picker--disabled .s-color-picker__thumb,.s-color-picker--disabled .s-color-picker__format,.s-color-picker--disabled .s-color-picker__preset,.s-color-picker--readonly .s-color-picker__panel,.s-color-picker--readonly .s-color-picker__slider-bar,.s-color-picker--readonly .s-color-picker__thumb,.s-color-picker--readonly .s-color-picker__format,.s-color-picker--readonly .s-color-picker__preset{pointer-events:none}.s-color-picker--disabled{opacity:var(--s-opacity-disabled)}

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

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _ColorPicker from './color-picker.vue';
+export declare const ColorPicker: EnhancedComponent<typeof _ColorPicker>;
+export default ColorPicker;
+export type { ColorPickerProps, ColorPickerSlots, ColorPickerEmits, ColorPickerExpose, } from './common';
+export type { ColorFormat } from '../../utils/color';

package/components/color-picker/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import color_picker_default from "./color-picker.js";
+//#region packages/sard/components/color-picker/index.ts
+const ColorPicker = enhanceComponent(color_picker_default);
+//#endregion
+export { ColorPicker, ColorPicker as default };

package/components/color-picker-input/color-picker-input.d.ts

@@ -0,0 +1,59 @@
+import { type ColorPickerInputProps, type ColorPickerInputSlots, type ColorPickerInputExpose } from './common';
+type __VLS_Slots = ColorPickerInputSlots;
+declare const __VLS_base: import("vue").DefineComponent<ColorPickerInputProps, ColorPickerInputExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: string) => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: import("../index.ts").MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:modelValue": (value: string) => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ColorPickerInputProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: import("../index.ts").MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    format: import("../index.ts").ColorFormat;
+    readonly: boolean;
+    visible: boolean;
+    loading: boolean;
+    disabled: boolean;
+    modelValue: string;
+    showConfirm: boolean;
+    placeholder: string;
+    clearable: boolean;
+    validateEvent: boolean;
+    multiline: boolean;
+    inputProps: import("../index.ts").InputProps;
+    valueOnClear: () => any;
+    resettable: boolean;
+    showAlpha: boolean;
+    showFormat: boolean;
+    presets: string[];
+    showPresets: 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/components/color-picker-input/color-picker-input.js

@@ -0,0 +1,170 @@
+import { createBem } from "../../utils/bem.js";
+import { isEmptyBinding } from "../../utils/utils.js";
+import popout_input_default from "../popout-input/popout-input.js";
+import { partitionPopoutInputProps, usePopoutInput } from "../popout-input/usePopoutInput.js";
+import color_picker_popout_default from "../color-picker-popout/color-picker-popout.js";
+import { defaultColorPickerInputProps } from "./common.js";
+import { computed, createBlock, createElementVNode, createSlots, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/color-picker-input/color-picker-input.vue
+var color_picker_input_default = /*@__PURE__*/ defineComponent({
+	__name: "color-picker-input",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: String,
+			required: false
+		},
+		showAlpha: {
+			type: Boolean,
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		showFormat: {
+			type: Boolean,
+			required: false
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		showPresets: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		multiline: {
+			type: Boolean,
+			required: false
+		},
+		inputProps: {
+			type: Object,
+			required: false
+		},
+		valueOnClear: {
+			type: Function,
+			required: false
+		}
+	}, defaultColorPickerInputProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("color-picker-input");
+		const partitionedProps = partitionPopoutInputProps(props);
+		const { innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook } = usePopoutInput(props, emit);
+		const getInputValue = () => {
+			if (isEmptyBinding(innerValue.value)) return "";
+			return String(innerValue.value);
+		};
+		watch(innerValue, () => {
+			inputValue.value = getInputValue();
+		}, { immediate: true });
+		const previewStyle = computed(() => {
+			return { background: innerValue.value };
+		});
+		const onConfirm = () => {
+			emit("confirm");
+		};
+		__expose({});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_input_default, mergeProps(unref(partitionedProps)[0], {
+				modelValue: unref(inputValue),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(inputValue) ? inputValue.value = $event : null),
+				class: unref(bem).b(),
+				onClear: unref(onClear),
+				onClick: unref(show)
+			}), createSlots({
+				prepend: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(bem).e("preview")) }, [createElementVNode("div", {
+					class: normalizeClass(unref(bem).e("preview-fill")),
+					style: normalizeStyle(previewStyle.value)
+				}, null, 6)], 2), renderSlot(_ctx.$slots, "prepend")]),
+				default: withCtx(() => [createVNode(color_picker_popout_default, mergeProps(unref(partitionedProps)[1], {
+					visible: unref(innerVisible),
+					"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+					modelValue: unref(innerValue),
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(innerValue) ? innerValue.value = $event : null),
+					onChange: unref(onChange),
+					onVisibleHook: unref(onVisibleHook),
+					onConfirm
+				}), null, 16, [
+					"visible",
+					"modelValue",
+					"onChange",
+					"onVisibleHook"
+				])]),
+				_: 2
+			}, [slots.append ? {
+				name: "append",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+				key: "0"
+			} : void 0, slots.arrow ? {
+				name: "arrow",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "arrow")]),
+				key: "1"
+			} : void 0]), 1040, [
+				"modelValue",
+				"class",
+				"onClear",
+				"onClick"
+			]);
+		};
+	}
+});
+//#endregion
+export { color_picker_input_default as default };

package/components/color-picker-input/common.d.ts

@@ -0,0 +1,12 @@
+import { type PopoutInputSlots, type PopoutInputProps } from '../popout-input/common';
+import { type ColorPickerPopoutProps, type ColorPickerPopoutEmits } from '../color-picker-popout/common';
+import { type DefaultProps } from '../config';
+export interface ColorPickerInputProps extends ColorPickerPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
+}
+export declare const defaultColorPickerInputProps: DefaultProps<ColorPickerInputProps>;
+export interface ColorPickerInputSlots extends PopoutInputSlots {
+}
+export interface ColorPickerInputEmits extends ColorPickerPopoutEmits {
+}
+export interface ColorPickerInputExpose {
+}

package/components/color-picker-input/common.js

@@ -0,0 +1,5 @@
+import { defaultColorPickerPopoutProps } from "../color-picker-popout/common.js";
+//#region packages/sard/components/color-picker-input/common.ts
+const defaultColorPickerInputProps = { ...defaultColorPickerPopoutProps };
+//#endregion
+export { defaultColorPickerInputProps };

package/components/color-picker-input/index.css

@@ -0,0 +1 @@
+.s-color-picker-input{text-align:left}.s-color-picker-input__preview{flex:none;width:var(--s-size-xl);height:var(--s-size-xl);border-radius:var(--s-border-radius-sm);background:var(--s-color-picker-checker-bg);overflow:hidden}.s-color-picker-input__preview-fill{width:100%;height:100%}