@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/color-picker/color.js

@@ -0,0 +1,337 @@
+import _defineProperty from "../_virtual/_@oxc-project_runtime@0.156.0/helpers/esm/defineProperty.js";
+// src/color-picker/color.ts
+var round = Math.round;
+function limitRange(value, max = 255) {
+	if (value > max) return max;
+	if (value < 0) return 0;
+	return value;
+}
+/**
+* - `rgba(102, 204, 255, .5)` / `rgb(102 204 255 / 50%)` / `rgb(100%, 50%, 0%)`
+* - `hsb(215, 91%, 100%)` / `hsba(215, 91%, 100%, 0.5)` / `hsl(270deg 60% 40% / 50%)`
+*/
+function splitColorStr(str, parseNum) {
+	const match = str.replace(/^[^(]*\((.*)/, "$1").replace(/\).*/, "").match(/\d*\.?\d+%?/g) || [];
+	const numList = match.map((item) => Number.parseFloat(item));
+	for (let i = 0; i < 3; i += 1) numList[i] = parseNum(numList[i] || 0, match[i] || "", i);
+	numList[3] = match[3] ? match[3].includes("%") ? numList[3] / 100 : numList[3] : 1;
+	return numList;
+}
+var parseHsvOrHsl = (num, _, index) => index === 0 ? num : num / 100;
+var isObj = (val) => typeof val === "object" && val !== null;
+var has = (val, keys) => keys.split("").every((key) => key in val);
+function toHexFormat(value, alpha) {
+	return value?.replace(/[^0-9a-f]/gi, "").slice(0, alpha ? 8 : 6) || "";
+}
+var getRoundNumber = (value) => Math.round(Number(value || 0));
+/**
+* The color object handed to `change` / `showText` / `v-model:value` (antdv-next: `Color`).
+* Immutable from the outside: build a new one with `generateColor()`.
+*/
+var AggregationColor = class AggregationColor {
+	constructor(input) {
+		_defineProperty(
+			this,
+			/** `true` when the color was cleared (`allowClear`) or built from an empty value */
+			"cleared",
+			false
+		);
+		_defineProperty(this, "r", 0);
+		_defineProperty(this, "g", 0);
+		_defineProperty(this, "b", 0);
+		_defineProperty(this, "a", 1);
+		_defineProperty(
+			this,
+			/** hue / saturation / brightness as entered, so they survive `s = 0` or `b = 0` */
+			"_h",
+			void 0
+		);
+		_defineProperty(this, "_s", void 0);
+		_defineProperty(this, "_v", void 0);
+		if (input instanceof AggregationColor) {
+			this.r = input.r;
+			this.g = input.g;
+			this.b = input.b;
+			this.a = input.a;
+			this._h = input._h;
+			this._s = input._s;
+			this._v = input._v;
+			this.cleared = input.cleared;
+			return;
+		}
+		if (typeof input === "string") {
+			const str = input.trim();
+			if (/^#?[A-F\d]{3,8}$/i.test(str)) this.fromHexString(str);
+			else if (str.startsWith("rgb")) this.fromRgbString(str);
+			else if (str.startsWith("hsl")) this.fromHslString(str);
+			else if (str.startsWith("hsv") || str.startsWith("hsb")) this.fromHsvString(str);
+		} else if (isObj(input)) {
+			const obj = input;
+			if (has(obj, "rgb")) {
+				this.r = limitRange(obj.r);
+				this.g = limitRange(obj.g);
+				this.b = limitRange(obj.b);
+				this.a = typeof obj.a === "number" ? limitRange(obj.a, 1) : 1;
+			} else if (has(obj, "hsb")) this.fromHsv({
+				h: obj.h,
+				s: obj.s,
+				v: obj.b,
+				a: obj.a
+			});
+			else if (has(obj, "hsv")) this.fromHsv(obj);
+			else if (has(obj, "hsl")) this.fromHsl(obj);
+		}
+		if (!input) {
+			this.a = 0;
+			this.cleared = true;
+		}
+	}
+	toRgb() {
+		return {
+			r: this.r,
+			g: this.g,
+			b: this.b,
+			a: this.a
+		};
+	}
+	toHsb() {
+		return {
+			h: this.getHue(),
+			s: this.getSaturation(),
+			b: this.getValue(),
+			a: this.a
+		};
+	}
+	/** `#rrggbb`, or `#rrggbbaa` when the color is translucent */
+	toHexString() {
+		const part = (num) => {
+			const hex = (num || 0).toString(16);
+			return hex.length === 2 ? hex : `0${hex}`;
+		};
+		let hex = `#${part(this.r)}${part(this.g)}${part(this.b)}`;
+		if (this.a >= 0 && this.a < 1) hex += part(round(this.a * 255));
+		return hex;
+	}
+	/** `toHexString()` without the `#` */
+	toHex() {
+		return toHexFormat(this.toHexString(), this.a < 1);
+	}
+	/** `rgb(r,g,b)` or `rgba(r,g,b,a)` */
+	toRgbString() {
+		return this.a !== 1 ? `rgba(${this.r},${this.g},${this.b},${this.a})` : `rgb(${this.r},${this.g},${this.b})`;
+	}
+	/** `hsb(h, s%, b%)` or `hsba(h, s%, b%, a)` */
+	toHsbString() {
+		const hsb = this.toHsb();
+		const base = `${getRoundNumber(hsb.h)}, ${getRoundNumber(hsb.s * 100)}%, ${getRoundNumber(hsb.b * 100)}%`;
+		return hsb.a === 1 ? `hsb(${base})` : `hsba(${base}, ${hsb.a.toFixed(hsb.a === 0 ? 0 : 2)})`;
+	}
+	/** What CSS understands (`toRgbString()`) */
+	toCssString() {
+		return this.toRgbString();
+	}
+	toString() {
+		return this.toRgbString();
+	}
+	equals(color) {
+		return !!color && this.toHexString() === color.toHexString();
+	}
+	getHue() {
+		if (this._h === void 0) {
+			const { r, g, b } = this;
+			const max = Math.max(r, g, b);
+			const delta = max - Math.min(r, g, b);
+			if (delta === 0) this._h = 0;
+			else this._h = round(60 * (r === max ? (g - b) / delta + (g < b ? 6 : 0) : g === max ? (b - r) / delta + 2 : (r - g) / delta + 4));
+		}
+		return this._h;
+	}
+	getSaturation() {
+		if (this._s === void 0) {
+			const max = Math.max(this.r, this.g, this.b);
+			const delta = max - Math.min(this.r, this.g, this.b);
+			this._s = delta === 0 ? 0 : delta / max;
+		}
+		return this._s;
+	}
+	getValue() {
+		if (this._v === void 0) this._v = Math.max(this.r, this.g, this.b) / 255;
+		return this._v;
+	}
+	fromHexString(str) {
+		const hex = str.replace("#", "");
+		const num = (a, b = a) => Number.parseInt(hex[a] + (hex[b] ?? ""), 16);
+		if (hex.length < 6) {
+			this.r = num(0);
+			this.g = num(1);
+			this.b = num(2);
+			this.a = hex[3] ? num(3) / 255 : 1;
+		} else {
+			this.r = num(0, 1);
+			this.g = num(2, 3);
+			this.b = num(4, 5);
+			this.a = hex[6] ? num(6, 7) / 255 : 1;
+		}
+	}
+	fromRgbString(str) {
+		const cells = splitColorStr(str, (num, txt) => txt.includes("%") ? round(num / 100 * 255) : num);
+		this.r = limitRange(cells[0]);
+		this.g = limitRange(cells[1]);
+		this.b = limitRange(cells[2]);
+		this.a = limitRange(cells[3], 1);
+	}
+	fromHsvString(str) {
+		const cells = splitColorStr(str, parseHsvOrHsl);
+		this.fromHsv({
+			h: cells[0],
+			s: cells[1],
+			v: cells[2],
+			a: cells[3]
+		});
+	}
+	fromHslString(str) {
+		const cells = splitColorStr(str, parseHsvOrHsl);
+		this.fromHsl({
+			h: cells[0],
+			s: cells[1],
+			l: cells[2],
+			a: cells[3]
+		});
+	}
+	fromHsv({ h: rawH, s, v, a }) {
+		const h = (rawH % 360 + 360) % 360;
+		this._h = h;
+		this._s = s;
+		this._v = v;
+		this.a = typeof a === "number" ? a : 1;
+		const vv = round(v * 255);
+		this.r = vv;
+		this.g = vv;
+		this.b = vv;
+		if (s <= 0) return;
+		const hh = h / 60;
+		const i = Math.floor(hh);
+		const ff = hh - i;
+		const p = round(v * (1 - s) * 255);
+		const q = round(v * (1 - s * ff) * 255);
+		const t = round(v * (1 - s * (1 - ff)) * 255);
+		switch (i) {
+			case 0:
+				this.g = t;
+				this.b = p;
+				break;
+			case 1:
+				this.r = q;
+				this.b = p;
+				break;
+			case 2:
+				this.r = p;
+				this.b = t;
+				break;
+			case 3:
+				this.r = p;
+				this.g = q;
+				break;
+			case 4:
+				this.r = t;
+				this.g = p;
+				break;
+			default:
+				this.g = p;
+				this.b = q;
+		}
+	}
+	fromHsl({ h: rawH, s, l, a }) {
+		const h = (rawH % 360 + 360) % 360;
+		this._h = h;
+		this.a = typeof a === "number" ? a : 1;
+		if (s <= 0) {
+			const rgb = round(l * 255);
+			this.r = rgb;
+			this.g = rgb;
+			this.b = rgb;
+			return;
+		}
+		const huePrime = h / 60;
+		const chroma = (1 - Math.abs(2 * l - 1)) * s;
+		const second = chroma * (1 - Math.abs(huePrime % 2 - 1));
+		const list = [
+			[
+				chroma,
+				second,
+				0
+			],
+			[
+				second,
+				chroma,
+				0
+			],
+			[
+				0,
+				chroma,
+				second
+			],
+			[
+				0,
+				second,
+				chroma
+			],
+			[
+				second,
+				0,
+				chroma
+			],
+			[
+				chroma,
+				0,
+				second
+			]
+		][Math.floor(huePrime)] ?? [
+			0,
+			0,
+			0
+		];
+		const m = l - chroma / 2;
+		this.r = round((list[0] + m) * 255);
+		this.g = round((list[1] + m) * 255);
+		this.b = round((list[2] + m) * 255);
+	}
+};
+function generateColor(color) {
+	return color instanceof AggregationColor ? color : new AggregationColor(color);
+}
+/** Alpha in percent, 0 - 100 */
+var getColorAlpha = (color) => getRoundNumber(color.toHsb().a * 100);
+/** The same color with another alpha (default: opaque) */
+function genAlphaColor(color, alpha) {
+	const rgba = color.toRgb();
+	if (!rgba.r && !rgba.g && !rgba.b) {
+		const hsba = color.toHsb();
+		hsba.a = alpha || 1;
+		return generateColor(hsba);
+	}
+	rgba.a = alpha || 1;
+	return generateColor(rgba);
+}
+/** The cleared version of a color (alpha 0, `cleared: true`) */
+function genClearColor(color) {
+	const hsba = color.toHsb();
+	hsba.a = 0;
+	const next = generateColor(hsba);
+	next.cleared = true;
+	return next;
+}
+/** Whether a dark check mark / border is needed on top of the color */
+function isBright(color) {
+	const { r, g, b, a } = color.toRgb();
+	if (a <= .5) return false;
+	return r * .299 + g * .587 + b * .114 > 192;
+}
+function formatColor(color, format) {
+	switch (format) {
+		case "hex": return color.toHexString();
+		case "hsb": return color.toHsbString();
+		default: return color.toRgbString();
+	}
+}
+export { AggregationColor, formatColor, genAlphaColor, genClearColor, generateColor, getColorAlpha, getRoundNumber, isBright, toHexFormat };

package/dist/color-picker/context.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef } from 'vue';
+import type { AggregationColor } from './color';
+import type { ColorPickerFormat, ColorPickerPanelSemanticClassNames, ColorPickerPanelSemanticStyles, ColorPickerPresetsItem } from './interface';
+export interface ColorDragInfo {
+    type: 'hue' | 'alpha';
+    value: number;
+}
+/** State shared by the parts of one panel (`Picker` / `Presets` of `panelRender` read it too). */
+export interface ColorPickerPanelContext {
+    color: ComputedRef<AggregationColor>;
+    format: ComputedRef<ColorPickerFormat>;
+    disabled: ComputedRef<boolean>;
+    allowClear: ComputedRef<boolean>;
+    disabledAlpha: ComputedRef<boolean>;
+    disabledFormat: ComputedRef<boolean>;
+    presets: ComputedRef<ColorPickerPresetsItem[] | undefined>;
+    classes: ComputedRef<ColorPickerPanelSemanticClassNames | undefined>;
+    styles: ComputedRef<ColorPickerPanelSemanticStyles | undefined>;
+    /** `dragging`: more changes follow, `changeComplete` is reported when the drag ends */
+    change: (color: AggregationColor, dragging?: boolean, info?: ColorDragInfo) => void;
+    /** a drag ended: reports the color picked last */
+    changeComplete: () => void;
+    clear: () => void;
+    setFormat: (format: ColorPickerFormat) => void;
+}
+export declare function provideColorPickerPanelContext(context: ColorPickerPanelContext): void;
+export declare function useColorPickerPanelContext(): ColorPickerPanelContext;

package/dist/color-picker/context.js

@@ -0,0 +1,12 @@
+import { inject, provide } from "vue";
+// src/color-picker/context.ts
+var panelContextKey = Symbol("AmColorPickerPanelContext");
+function provideColorPickerPanelContext(context) {
+	provide(panelContextKey, context);
+}
+function useColorPickerPanelContext() {
+	const context = inject(panelContextKey, null);
+	if (!context) throw new Error("[@antdv-next/mobile] ColorPicker panel parts must be rendered inside a ColorPicker panel.");
+	return context;
+}
+export { provideColorPickerPanelContext, useColorPickerPanelContext };

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

@@ -0,0 +1,251 @@
+export type * from './interface';
+/** Inline panel, embeddable in a page: `ColorPicker.Panel`, `<am-color-picker-panel>`. */
+export declare const ColorPickerPanel: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+        onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+        onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (color: import("./color.ts").AggregationColor, css: string) => any;
+        clear: () => any;
+        "update:value": (value: import("./interface").ColorPickerValueType) => any;
+        changeComplete: (color: import("./color.ts").AggregationColor) => any;
+        formatChange: (format: import("./interface").ColorPickerFormat) => any;
+        "update:format": (format: import("./interface").ColorPickerFormat) => any;
+    }, import("vue").PublicProps, {
+        disabled: boolean;
+        value: import("./interface").ColorPickerValueType;
+        allowClear: boolean;
+        disabledAlpha: boolean;
+        disabledFormat: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+        onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+        onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        disabled: boolean;
+        value: import("./interface").ColorPickerValueType;
+        allowClear: boolean;
+        disabledAlpha: boolean;
+        disabledFormat: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+    onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+    onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+    onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (color: import("./color.ts").AggregationColor, css: string) => any;
+    clear: () => any;
+    "update:value": (value: import("./interface").ColorPickerValueType) => any;
+    changeComplete: (color: import("./color.ts").AggregationColor) => any;
+    formatChange: (format: import("./interface").ColorPickerFormat) => any;
+    "update:format": (format: import("./interface").ColorPickerFormat) => any;
+}, string, {
+    disabled: boolean;
+    value: import("./interface").ColorPickerValueType;
+    allowClear: boolean;
+    disabledAlpha: boolean;
+    disabledFormat: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").ColorPickerPanelSlots;
+}), object>;
+declare const ColorPicker: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").ColorPickerProps> & Readonly<{
+        onSelect?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onCancel?: (() => any) | undefined;
+        onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onConfirm?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+        onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    }>, import("./interface").ColorPickerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        select: (color: import("./color.ts").AggregationColor, css: string) => any;
+        cancel: () => any;
+        change: (color: import("./color.ts").AggregationColor, css: string) => any;
+        clear: () => any;
+        confirm: (color: import("./color.ts").AggregationColor) => any;
+        "update:open": (open: boolean) => any;
+        "update:value": (value: import("./interface").ColorPickerValueType) => any;
+        openChange: (open: boolean) => any;
+        changeComplete: (color: import("./color.ts").AggregationColor) => any;
+        formatChange: (format: import("./interface").ColorPickerFormat) => any;
+        "update:format": (format: import("./interface").ColorPickerFormat) => any;
+    }, import("vue").PublicProps, {
+        open: boolean;
+        disabled: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        value: import("./interface").ColorPickerValueType;
+        destroyOnHidden: boolean;
+        maskClosable: boolean;
+        defaultOpen: boolean;
+        allowClear: boolean;
+        disabledAlpha: boolean;
+        disabledFormat: boolean;
+        showText: boolean | ((info: import("./interface").ColorPickerShowTextInfo) => import("vue").VNodeChild);
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").ColorPickerProps> & Readonly<{
+        onSelect?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onCancel?: (() => any) | undefined;
+        onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onConfirm?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+        onOpenChange?: ((open: boolean) => any) | undefined;
+        onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    }>, import("./interface").ColorPickerExpose, {}, {}, {}, {
+        open: boolean;
+        disabled: boolean;
+        getContainer: import("../index.ts").GetContainer;
+        value: import("./interface").ColorPickerValueType;
+        destroyOnHidden: boolean;
+        maskClosable: boolean;
+        defaultOpen: boolean;
+        allowClear: boolean;
+        disabledAlpha: boolean;
+        disabledFormat: boolean;
+        showText: boolean | ((info: import("./interface").ColorPickerShowTextInfo) => import("vue").VNodeChild);
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").ColorPickerProps> & Readonly<{
+    onSelect?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onConfirm?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+    onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+    onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+}>, import("./interface").ColorPickerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (color: import("./color.ts").AggregationColor, css: string) => any;
+    cancel: () => any;
+    change: (color: import("./color.ts").AggregationColor, css: string) => any;
+    clear: () => any;
+    confirm: (color: import("./color.ts").AggregationColor) => any;
+    "update:open": (open: boolean) => any;
+    "update:value": (value: import("./interface").ColorPickerValueType) => any;
+    openChange: (open: boolean) => any;
+    changeComplete: (color: import("./color.ts").AggregationColor) => any;
+    formatChange: (format: import("./interface").ColorPickerFormat) => any;
+    "update:format": (format: import("./interface").ColorPickerFormat) => any;
+}, string, {
+    open: boolean;
+    disabled: boolean;
+    getContainer: import("../index.ts").GetContainer;
+    value: import("./interface").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").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").ColorPickerSlots;
+}), {
+    Panel: import("../_util/withInstall").WithInstall<{
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+            onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+            onClear?: (() => any) | undefined;
+            "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+            onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+            onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+            "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            change: (color: import("./color.ts").AggregationColor, css: string) => any;
+            clear: () => any;
+            "update:value": (value: import("./interface").ColorPickerValueType) => any;
+            changeComplete: (color: import("./color.ts").AggregationColor) => any;
+            formatChange: (format: import("./interface").ColorPickerFormat) => any;
+            "update:format": (format: import("./interface").ColorPickerFormat) => any;
+        }, import("vue").PublicProps, {
+            disabled: boolean;
+            value: import("./interface").ColorPickerValueType;
+            allowClear: boolean;
+            disabledAlpha: boolean;
+            disabledFormat: boolean;
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+            onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+            onClear?: (() => any) | undefined;
+            "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+            onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+            onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+            "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            disabled: boolean;
+            value: import("./interface").ColorPickerValueType;
+            allowClear: boolean;
+            disabledAlpha: boolean;
+            disabledFormat: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./interface").ColorPickerPanelProps> & Readonly<{
+        onChange?: ((color: import("./color.ts").AggregationColor, css: string) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        "onUpdate:value"?: ((value: import("./interface").ColorPickerValueType) => any) | undefined;
+        onChangeComplete?: ((color: import("./color.ts").AggregationColor) => any) | undefined;
+        onFormatChange?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+        "onUpdate:format"?: ((format: import("./interface").ColorPickerFormat) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (color: import("./color.ts").AggregationColor, css: string) => any;
+        clear: () => any;
+        "update:value": (value: import("./interface").ColorPickerValueType) => any;
+        changeComplete: (color: import("./color.ts").AggregationColor) => any;
+        formatChange: (format: import("./interface").ColorPickerFormat) => any;
+        "update:format": (format: import("./interface").ColorPickerFormat) => any;
+    }, string, {
+        disabled: boolean;
+        value: import("./interface").ColorPickerValueType;
+        allowClear: boolean;
+        disabledAlpha: boolean;
+        disabledFormat: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: import("./interface").ColorPickerPanelSlots;
+    }), object>;
+}>;
+export default ColorPicker;

package/dist/color-picker/index.js

@@ -0,0 +1,8 @@
+import { withInstall } from "../_util/withInstall.js";
+import ColorPicker_default from "./ColorPicker.js";
+import ColorPickerPanel_default from "./ColorPickerPanel.js";
+// src/color-picker/index.ts
+/** Inline panel, embeddable in a page: `ColorPicker.Panel`, `<am-color-picker-panel>`. */
+var ColorPickerPanel = withInstall(ColorPickerPanel_default, "AmColorPickerPanel");
+var ColorPicker = withInstall(ColorPicker_default, "AmColorPicker", { Panel: ColorPickerPanel });
+export { ColorPickerPanel, ColorPicker as default };