@antdv-next/mobile 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,42 @@
+import type { VNodeChild } from 'vue';
+import type { AggregationColor } from './color';
+import type { ColorPickerFormat, ColorPickerPanelRenderInfo, ColorPickerPanelSemanticClassNames, ColorPickerPanelSemanticStyles, ColorPickerPresetsItem } from './interface';
+import '../style';
+import './style/index.css';
+type __VLS_Props = {
+    color: AggregationColor;
+    format: ColorPickerFormat;
+    allowClear?: boolean;
+    disabled?: boolean;
+    disabledAlpha?: boolean;
+    disabledFormat?: boolean;
+    presets?: ColorPickerPresetsItem[];
+    panelRender?: (info: ColorPickerPanelRenderInfo) => VNodeChild;
+    rootClass?: string;
+    classes?: ColorPickerPanelSemanticClassNames;
+    styles?: ColorPickerPanelSemanticStyles;
+};
+type __VLS_Slots = {
+    panelRender?: (info: ColorPickerPanelRenderInfo) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (color: AggregationColor, dragging: boolean) => any;
+    clear: (color: AggregationColor) => any;
+    changeComplete: (color: AggregationColor) => any;
+    formatChange: (format: ColorPickerFormat) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((color: AggregationColor, dragging: boolean) => any) | undefined;
+    onClear?: ((color: AggregationColor) => any) | undefined;
+    onChangeComplete?: ((color: AggregationColor) => any) | undefined;
+    onFormatChange?: ((format: ColorPickerFormat) => any) | undefined;
+}>, {
+    disabled: 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/PanelBody.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,138 @@
+import { provideNoCompact } from "../_base/compact.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useDisabled } from "../config-provider/context.js";
+import { formItemInputContextKey } from "../form/context.js";
+import { genAlphaColor, genClearColor, generateColor, getColorAlpha } from "./color.js";
+import { provideColorPickerPanelContext } from "./context.js";
+import PanelContent_default from "./PanelContent.js";
+import PanelPicker_default from "./PanelPicker.js";
+import PanelPresets_default from "./PanelPresets.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, h, mergeProps, normalizeProps, openBlock, provide, renderSlot, shallowRef, unref } from "vue";
+// src/color-picker/PanelBody.vue?vue&type=script&setup=true&lang.ts
+/**
+* Internal: the stateless panel shared by `ColorPickerPanel` (inline) and `ColorPicker` (bottom sheet).
+* It shows `color` and reports what the user picked; the owner decides when that is committed.
+*/
+var PanelBody_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPanelBody",
+	inheritAttrs: false,
+	__name: "PanelBody",
+	props: {
+		color: {},
+		format: {},
+		allowClear: { type: Boolean },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		disabledAlpha: { type: Boolean },
+		disabledFormat: { type: Boolean },
+		presets: {},
+		panelRender: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: [
+		"change",
+		"changeComplete",
+		"clear",
+		"formatChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const disabled = useDisabled(() => props.disabled);
+		provide(formItemInputContextKey, {
+			status: computed(() => ""),
+			id: computed(() => void 0),
+			onFieldChange: () => {},
+			onFieldBlur: () => {},
+			isFormItemInput: false
+		});
+		provideNoCompact();
+		/**
+		* The last color picked here. It carries what a string round trip through the owner loses
+		* (the hue of a grey / black color, the `cleared` flag), so it wins while it is still the same color.
+		*/
+		const local = shallowRef();
+		const color = computed(() => {
+			const cached = local.value;
+			return cached && cached.equals(props.color) && cached.cleared === props.color.cleared ? cached : props.color;
+		});
+		function fill(next, info) {
+			let result = next;
+			if (color.value.cleared) {
+				const rgb = result.toRgb();
+				if (!rgb.r && !rgb.g && !rgb.b && info) result = generateColor({
+					h: info.type === "hue" ? info.value : 0,
+					s: 1,
+					b: 1,
+					a: info.type === "alpha" ? info.value / 100 : 1
+				});
+				else result = genAlphaColor(result);
+			}
+			if (props.disabledAlpha && getColorAlpha(result) < 100) result = genAlphaColor(result);
+			return result;
+		}
+		function change(next, dragging = false, info) {
+			if (disabled.value) return;
+			const result = fill(next, info);
+			local.value = result;
+			emit("change", result, dragging);
+			if (!dragging) emit("changeComplete", result);
+		}
+		function changeComplete() {
+			if (!disabled.value) emit("changeComplete", local.value ?? color.value);
+		}
+		function clear() {
+			if (disabled.value || color.value.cleared) return;
+			const result = genClearColor(color.value);
+			local.value = result;
+			emit("clear", result);
+		}
+		provideColorPickerPanelContext({
+			color,
+			format: computed(() => props.format),
+			disabled,
+			allowClear: computed(() => !!props.allowClear),
+			disabledAlpha: computed(() => !!props.disabledAlpha),
+			disabledFormat: computed(() => !!props.disabledFormat),
+			presets: computed(() => props.presets),
+			classes: computed(() => props.classes),
+			styles: computed(() => props.styles),
+			change,
+			changeComplete,
+			clear,
+			setFormat: (format) => {
+				if (format !== props.format) emit("formatChange", format);
+			}
+		});
+		const extra = { components: {
+			Picker: PanelPicker_default,
+			Presets: PanelPresets_default
+		} };
+		/** a fresh vnode per render, like the `panel` of antdv-next */
+		const renderInfo = () => ({
+			panel: h(PanelContent_default),
+			extra
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+				class: ["am-color-picker-panel", [
+					{ "am-color-picker-panel-disabled": unref(disabled) },
+					__props.rootClass,
+					__props.classes?.root
+				]],
+				style: __props.styles?.root
+			}), [renderSlot(_ctx.$slots, "panelRender", normalizeProps(guardReactiveProps(renderInfo())), () => [__props.panelRender ? (openBlock(), createBlock(unref(RenderNode_default), {
+				key: 0,
+				node: __props.panelRender,
+				params: renderInfo()
+			}, null, 8, ["node", "params"])) : (openBlock(), createBlock(PanelContent_default, { key: 1 }))])], 16);
+		};
+	}
+});
+export { PanelBody_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/PanelContent.js

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,26 @@
+import Divider_default from "../divider/Divider.js";
+import { useColorPickerPanelContext } from "./context.js";
+import PanelPicker_default from "./PanelPicker.js";
+import PanelPresets_default from "./PanelPresets.js";
+import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, unref } from "vue";
+// src/color-picker/PanelContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "am-color-picker-panel-content" };
+/** Internal: the default panel content (`panel` of `panelRender`). */
+var PanelContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPanelContent",
+	__name: "PanelContent",
+	setup(__props) {
+		const ctx = useColorPickerPanelContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(PanelPicker_default),
+				Array.isArray(unref(ctx).presets.value) ? (openBlock(), createBlock(Divider_default, {
+					key: 0,
+					class: "am-color-picker-divider"
+				})) : createCommentVNode("", true),
+				createVNode(PanelPresets_default)
+			]);
+		};
+	}
+});
+export { PanelContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/PanelPicker.js

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,102 @@
+import Button_default from "../button/Button.js";
+import { useLocale } from "../locale/index.js";
+import { generateColor, getColorAlpha } from "./color.js";
+import ColorBlock_default from "./ColorBlock.js";
+import ColorInput_default from "./ColorInput.js";
+import ColorPalette_default from "./ColorPalette.js";
+import ColorSlider_default from "./ColorSlider.js";
+import { useColorPickerPanelContext } from "./context.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withCtx } from "vue";
+// src/color-picker/PanelPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "am-color-picker-panel-picker" };
+var _hoisted_2 = {
+	key: 0,
+	class: "am-color-picker-operation"
+};
+var _hoisted_3 = { class: "am-color-picker-slider-group" };
+/** The picking part of the panel (`extra.components.Picker` of `panelRender`). */
+var PanelPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPanelPicker",
+	__name: "PanelPicker",
+	setup(__props) {
+		const ctx = useColorPickerPanelContext();
+		const inputLocale = useLocale("Input");
+		const hsb = computed(() => ctx.color.value.toHsb());
+		const hue = computed(() => Math.min(359, Math.round(hsb.value.h)));
+		const alpha = computed(() => getColorAlpha(ctx.color.value));
+		const opaque = computed(() => generateColor({
+			...hsb.value,
+			a: 1
+		}).toRgbString());
+		function onHueChange(value) {
+			ctx.change(generateColor({
+				...hsb.value,
+				h: value
+			}), true, {
+				type: "hue",
+				value
+			});
+		}
+		function onAlphaChange(value) {
+			ctx.change(generateColor({
+				...hsb.value,
+				a: value / 100
+			}), true, {
+				type: "alpha",
+				value
+			});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				unref(ctx).allowClear.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(Button_default, {
+					class: "am-color-picker-clear",
+					size: "small",
+					disabled: unref(ctx).disabled.value || unref(ctx).color.value.cleared,
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(ctx).clear())
+				}, {
+					icon: withCtx(() => [createVNode(ColorBlock_default, { cleared: "" })]),
+					default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(inputLocale).clear), 1)]),
+					_: 1
+				}, 8, ["disabled"])])) : createCommentVNode("", true),
+				createVNode(ColorPalette_default),
+				createElementVNode("div", {
+					class: normalizeClass(["am-color-picker-slider-container", unref(ctx).classes.value?.slider]),
+					style: normalizeStyle(unref(ctx).styles.value?.slider)
+				}, [createElementVNode("div", _hoisted_3, [createVNode(ColorSlider_default, {
+					type: "hue",
+					value: hue.value,
+					max: 359,
+					disabled: unref(ctx).disabled.value,
+					"handle-color": `hsl(${hue.value}, 100%, 50%)`,
+					onChange: onHueChange,
+					onComplete: _cache[1] || (_cache[1] = ($event) => unref(ctx).changeComplete())
+				}, null, 8, [
+					"value",
+					"disabled",
+					"handle-color"
+				]), !unref(ctx).disabledAlpha.value ? (openBlock(), createBlock(ColorSlider_default, {
+					key: 0,
+					type: "alpha",
+					value: alpha.value,
+					max: 100,
+					disabled: unref(ctx).disabled.value,
+					"handle-color": unref(ctx).color.value.toRgbString(),
+					"rail-style": { background: `linear-gradient(to right, transparent, ${opaque.value})` },
+					onChange: onAlphaChange,
+					onComplete: _cache[2] || (_cache[2] = ($event) => unref(ctx).changeComplete())
+				}, null, 8, [
+					"value",
+					"disabled",
+					"handle-color",
+					"rail-style"
+				])) : createCommentVNode("", true)]), createVNode(ColorBlock_default, {
+					class: "am-color-picker-swatch",
+					color: unref(ctx).color.value.toCssString(),
+					cleared: unref(ctx).color.value.cleared
+				}, null, 8, ["color", "cleared"])], 6),
+				createVNode(ColorInput_default)
+			]);
+		};
+	}
+});
+export { PanelPicker_vue_vue_type_script_setup_true_lang_default as default };

package/dist/color-picker/PanelPresets.js

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

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,80 @@
+import RenderNode_default from "../_util/RenderNode.js";
+import Collapse_default from "../collapse/Collapse.js";
+import { useLocale } from "../locale/index.js";
+import { generateColor, isBright } from "./color.js";
+import ColorBlock_default from "./ColorBlock.js";
+import { useColorPickerPanelContext } from "./context.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+// src/color-picker/PanelPresets.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "am-color-picker-presets-label" };
+var _hoisted_2 = { class: "am-color-picker-presets-items" };
+var _hoisted_3 = [
+	"disabled",
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+];
+var _hoisted_4 = {
+	key: 1,
+	class: "am-color-picker-presets-empty"
+};
+/** The preset groups of the panel (`extra.components.Presets` of `panelRender`). */
+var PanelPresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmColorPickerPanelPresets",
+	__name: "PanelPresets",
+	setup(__props) {
+		const ctx = useColorPickerPanelContext();
+		const locale = useLocale("ColorPicker");
+		const groups = computed(() => (ctx.presets.value ?? []).map((preset, index) => ({
+			key: `panel-${preset.key ?? index}`,
+			label: preset.label,
+			defaultOpen: preset.defaultOpen ?? true,
+			colors: Array.isArray(preset.colors) ? preset.colors.map((color) => generateColor(color)) : []
+		})));
+		const items = computed(() => groups.value.map((group) => ({
+			key: group.key,
+			label: group.label
+		})));
+		const defaultActiveKey = groups.value.filter((group) => group.defaultOpen).map((group) => group.key);
+		function isChecked(color) {
+			return !ctx.color.value.cleared && color.toCssString() === ctx.color.value.toCssString();
+		}
+		function colorClass(color) {
+			return {
+				"am-color-picker-presets-color-checked": isChecked(color),
+				"am-color-picker-presets-color-bright": isBright(color),
+				"am-color-picker-presets-color-translucent": color.toRgb().a <= .5
+			};
+		}
+		function onSelect(color) {
+			if (!ctx.disabled.value) ctx.change(color);
+		}
+		return (_ctx, _cache) => {
+			return Array.isArray(unref(ctx).presets.value) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["am-color-picker-presets", unref(ctx).classes.value?.presets]),
+				style: normalizeStyle(unref(ctx).styles.value?.presets)
+			}, [createVNode(Collapse_default, {
+				ghost: "",
+				size: "small",
+				items: items.value,
+				"default-active-key": unref(defaultActiveKey)
+			}, {
+				labelRender: withCtx(({ index }) => [createElementVNode("div", _hoisted_1, [createVNode(unref(RenderNode_default), { node: groups.value[index].label }, null, 8, ["node"])])]),
+				contentRender: withCtx(({ index }) => [createElementVNode("div", _hoisted_2, [groups.value[index].colors.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(groups.value[index].colors, (color, colorIndex) => {
+					return openBlock(), createElementBlock("button", {
+						key: `preset-${colorIndex}-${color.toHexString()}`,
+						type: "button",
+						class: normalizeClass(["am-color-picker-presets-color", colorClass(color)]),
+						disabled: unref(ctx).disabled.value,
+						"aria-label": color.toHexString(),
+						"aria-pressed": isChecked(color),
+						onClick: ($event) => onSelect(color)
+					}, [createVNode(ColorBlock_default, { color: color.toCssString() }, null, 8, ["color"])], 10, _hoisted_3);
+				}), 128)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(locale).presetEmpty), 1))])]),
+				_: 1
+			}, 8, ["items", "default-active-key"])], 6)) : createCommentVNode("", true);
+		};
+	}
+});
+export { PanelPresets_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,71 @@
+/**
+ * Local color model of the ColorPicker. It mirrors what antdv-next gets from
+ * `@v-c/color-picker` + `@ant-design/fast-color` (same parsing rules, rounding and
+ * output strings) without adding a dependency.
+ */
+export interface ColorPickerRGB {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+export interface ColorPickerHSB {
+    h: number;
+    s: number;
+    b: number;
+    a?: number;
+}
+export declare function toHexFormat(value?: string, alpha?: boolean): string;
+export declare const getRoundNumber: (value: number) => number;
+/**
+ * The color object handed to `change` / `showText` / `v-model:value` (antdv-next: `Color`).
+ * Immutable from the outside: build a new one with `generateColor()`.
+ */
+export declare class AggregationColor {
+    /** `true` when the color was cleared (`allowClear`) or built from an empty value */
+    cleared: boolean;
+    private r;
+    private g;
+    private b;
+    private a;
+    /** hue / saturation / brightness as entered, so they survive `s = 0` or `b = 0` */
+    private _h?;
+    private _s?;
+    private _v?;
+    constructor(input?: ColorPickerColorInput);
+    toRgb(): Required<ColorPickerRGB>;
+    toHsb(): Required<ColorPickerHSB>;
+    /** `#rrggbb`, or `#rrggbbaa` when the color is translucent */
+    toHexString(): string;
+    /** `toHexString()` without the `#` */
+    toHex(): string;
+    /** `rgb(r,g,b)` or `rgba(r,g,b,a)` */
+    toRgbString(): string;
+    /** `hsb(h, s%, b%)` or `hsba(h, s%, b%, a)` */
+    toHsbString(): string;
+    /** What CSS understands (`toRgbString()`) */
+    toCssString(): string;
+    toString(): string;
+    equals(color?: AggregationColor | null): boolean;
+    private getHue;
+    private getSaturation;
+    private getValue;
+    private fromHexString;
+    private fromRgbString;
+    private fromHsvString;
+    private fromHslString;
+    private fromHsv;
+    private fromHsl;
+}
+/** Everything a color can be created from */
+export type ColorPickerColorInput = string | AggregationColor | ColorPickerRGB | ColorPickerHSB | null;
+export declare function generateColor(color?: ColorPickerColorInput): AggregationColor;
+/** Alpha in percent, 0 - 100 */
+export declare const getColorAlpha: (color: AggregationColor) => number;
+/** The same color with another alpha (default: opaque) */
+export declare function genAlphaColor(color: AggregationColor, alpha?: number): AggregationColor;
+/** The cleared version of a color (alpha 0, `cleared: true`) */
+export declare function genClearColor(color: AggregationColor): AggregationColor;
+/** Whether a dark check mark / border is needed on top of the color */
+export declare function isBright(color: AggregationColor): boolean;
+export declare function formatColor(color: AggregationColor, format?: 'hex' | 'rgb' | 'hsb'): string;