antdv-next 0.0.0 → 1.0.0-alpha.1

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

@@ -0,0 +1,49 @@
+import { SizeType } from "../config-provider/SizeContext.js";
+import { PopoverProps } from "../popover/index.js";
+import { AggregationColor } from "./color.js";
+import { ColorFormatType, ColorPickerClassNamesType, ColorPickerEmits, ColorPickerProps as ColorPickerProps$1, ColorPickerSlots, ColorPickerStylesType, ColorValueType, ModeType, PresetsItem, TriggerPlacement, TriggerType } from "./interface.js";
+import "../components.js";
+import * as vue388 from "vue";
+import { SlotsType } from "vue";
+import * as _v_c_color_picker0 from "@v-c/color-picker";
+
+//#region src/color-picker/ColorPicker.d.ts
+declare const ColorPicker: vue388.DefineSetupFnComponent<ColorPickerProps$1, ColorPickerEmits, SlotsType<ColorPickerSlots>, Omit<_v_c_color_picker0.ColorPickerProps, "value" | "onChange" | "defaultValue" | "components" | "panelRender" | "onChangeComplete" | "disabledAlpha"> & {
+  [key: `data-${string}`]: string;
+  mode?: ModeType | ModeType[];
+  value?: ColorValueType;
+  defaultValue?: ColorValueType;
+  open?: boolean;
+  disabled?: boolean;
+  placement?: TriggerPlacement;
+  trigger?: TriggerType;
+  format?: ColorFormatType;
+  defaultFormat?: ColorFormatType;
+  allowClear?: boolean;
+  presets?: PresetsItem[];
+  arrow?: boolean | {
+    pointAtCenter: boolean;
+  };
+  panelRender?: (params: {
+    panel: any;
+    extra: {
+      components: {
+        Picker: any;
+        Presets: any;
+      };
+    };
+  }) => any;
+  showText?: boolean | ((params: {
+    color: AggregationColor;
+  }) => any);
+  size?: SizeType;
+  classes?: ColorPickerClassNamesType;
+  styles?: ColorPickerStylesType;
+  rootClass?: string;
+  disabledAlpha?: boolean;
+  disabledFormat?: boolean;
+} & Pick<PopoverProps, "getPopupContainer" | "autoAdjustOverflow" | "destroyOnHidden"> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue388.PublicProps>;
+//#endregion
+export { ColorPicker };

package/dist/color-picker/ColorPicker.js

@@ -0,0 +1,336 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useCompactItemContext } from "../space/Compact.js";
+import { ContextIsolator } from "../_util/ContextIsolator.js";
+import { AggregationColor } from "./color.js";
+import { genAlphaColor, generateColor, getColorAlpha } from "./util.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import popover_default from "../popover/index.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { getStatusClassNames } from "../_util/statusUtils.js";
+import ColorPickerPanel_default from "./ColorPickerPanel.js";
+import ColorTrigger_default from "./components/ColorTrigger.js";
+import useModeColor from "./hooks/useModeColor.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/color-picker/ColorPicker.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ColorPicker = /* @__PURE__ */ defineComponent((props, { slots, expose, emit, attrs }) => {
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("colorPicker", props, [], "color-picker");
+	const { size: customizeSize, classes, styles, value, mode, format, open, presets, disabledAlpha, disabledFormat } = toPropsRefs(props, "size", "classes", "styles", "value", "mode", "format", "open", "presets", "disabledAlpha", "disabledFormat");
+	const contextDisabled = useDisabledContext();
+	const mergedDisabled = computed(() => props.disabled ?? contextDisabled.value);
+	const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+	const mergedSize = useSize((ctx) => customizeSize.value ?? compactSize.value ?? ctx);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			trigger: props.trigger ?? "click",
+			allowClear: props.allowClear ?? false,
+			autoAdjustOverflow: props.autoAdjustOverflow ?? true,
+			disabledAlpha: props.disabledAlpha ?? false,
+			arrow: props.arrow ?? true,
+			placement: props.placement ?? "bottomLeft",
+			disabled: mergedDisabled.value,
+			size: mergedSize.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps), computed(() => ({ popup: { _default: "root" } })));
+	const internalPopupOpen = shallowRef(open.value ?? false);
+	watch(open, (val) => {
+		if (val !== void 0) internalPopupOpen.value = val;
+	});
+	const popupOpen = computed(() => !mergedDisabled.value && internalPopupOpen.value);
+	const formatValue = shallowRef(format.value ?? props.defaultFormat);
+	watch(format, (val) => {
+		if (val !== void 0) formatValue.value = val;
+	});
+	const triggerFormatChange = (newFormat) => {
+		const prev = formatValue.value;
+		formatValue.value = newFormat;
+		if (prev !== newFormat) {
+			emit("formatChange", newFormat);
+			emit("update:format", newFormat);
+		}
+	};
+	const triggerOpenChange = (visible) => {
+		if (!visible || !mergedDisabled.value) {
+			internalPopupOpen.value = visible;
+			emit("openChange", visible);
+			emit("update:open", visible);
+		}
+	};
+	const [mergedColor, setColor, modeState, setModeState, modeOptions] = useModeColor(value, mode, props?.defaultValue);
+	const isAlphaColor = computed(() => getColorAlpha(mergedColor.value) < 100);
+	const cachedGradientColor = shallowRef();
+	const onInternalChangeComplete = (color) => {
+		let changeColor = generateColor(color);
+		if (props?.disabledAlpha && isAlphaColor.value) changeColor = genAlphaColor(color);
+		emit("changeComplete", changeColor);
+	};
+	const onInternalChange = (data, changeFromPickerDrag) => {
+		let color = generateColor(data);
+		if (props?.disabledAlpha && isAlphaColor.value) color = genAlphaColor(color);
+		setColor(color);
+		cachedGradientColor.value = void 0;
+		emit("change", color, color.toCssString());
+		emit("update:value", color);
+		if (!changeFromPickerDrag) onInternalChangeComplete(color);
+	};
+	const activeIndex = shallowRef(0);
+	const gradientDragging = shallowRef(false);
+	const onInternalModeChange = (newMode) => {
+		const _mergedColor = mergedColor.value;
+		setModeState(newMode);
+		if (newMode === "single" && mergedColor.value?.isGradient()) {
+			activeIndex.value = 0;
+			onInternalChange(new AggregationColor(mergedColor.value.getColors()[0].color));
+			cachedGradientColor.value = _mergedColor;
+		} else if (newMode === "gradient" && !mergedColor.value?.isGradient()) {
+			const baseColor = isAlphaColor.value ? genAlphaColor(mergedColor.value) : mergedColor.value;
+			onInternalChange(new AggregationColor(cachedGradientColor.value || [{
+				percent: 0,
+				color: baseColor
+			}, {
+				percent: 100,
+				color: baseColor
+			}]));
+		}
+	};
+	const formItemInputContext = useFormItemInputContext();
+	const contextStatus = computed(() => formItemInputContext.value?.status);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const handleClear = () => {
+		const cleared = new AggregationColor("");
+		setColor(cleared);
+		emit("clear");
+		emit("change", cleared, cleared.toCssString());
+		emit("update:value", cleared.toCssString());
+	};
+	expose({
+		focus: () => {},
+		blur: () => {}
+	});
+	return () => {
+		const { rootClass, trigger, placement, arrow, getPopupContainer, autoAdjustOverflow, destroyOnHidden } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const showText = slots?.showText ?? props?.showText;
+		const panelRender = slots?.panelRender ?? props?.panelRender;
+		const rtlCls = { [`${prefixCls.value}-rtl`]: direction.value === "rtl" };
+		const mergedRootCls = clsx(mergedClassNames.value.root, rootClass, cssVarCls.value, rootCls.value, rtlCls);
+		const mergedCls = clsx(getStatusClassNames(prefixCls.value, contextStatus.value), {
+			[`${prefixCls.value}-sm`]: mergedSize.value === "small",
+			[`${prefixCls.value}-lg`]: mergedSize.value === "large"
+		}, compactItemClassnames.value, contextClassName.value, mergedRootCls, className, hashId.value);
+		const mergedPopupCls = clsx(prefixCls.value, mergedRootCls, mergedClassNames.value?.popup?.root);
+		const popoverProps = {
+			open: popupOpen.value,
+			trigger,
+			placement,
+			arrow,
+			rootClass,
+			getPopupContainer,
+			autoAdjustOverflow,
+			destroyOnHidden
+		};
+		const mergedStyle = {
+			...mergedStyles.value.root,
+			...contextStyle.value,
+			...style
+		};
+		const mergedShowText = showText ? typeof showText === "function" ? (color) => showText({ color }) : showText : void 0;
+		const panelNode = createVNode(ContextIsolator, { "form": true }, { default: () => [createVNode(ColorPickerPanel_default, mergeProps(restAttrs, {
+			"prefixCls": prefixCls.value,
+			"presets": presets.value,
+			"panelRender": panelRender,
+			"value": mergedColor.value,
+			"allowClear": props.allowClear,
+			"disabled": mergedDisabled.value,
+			"disabledAlpha": disabledAlpha.value,
+			"disabledFormat": disabledFormat.value,
+			"mode": modeState.value,
+			"onModeChange": onInternalModeChange,
+			"modeOptions": modeOptions.value,
+			"onChange": onInternalChange,
+			"onChangeComplete": onInternalChangeComplete,
+			"onClear": handleClear,
+			"activeIndex": activeIndex.value,
+			"onActive": (val) => activeIndex.value = val,
+			"gradientDragging": gradientDragging.value,
+			"onGradientDragging": (val) => gradientDragging.value = val,
+			"format": formatValue.value
+		}, { onFormatChange: triggerFormatChange }, {
+			"classes": mergedClassNames.value,
+			"styles": mergedStyles.value
+		}), null)] });
+		const triggerNode = children.length ? children : createVNode(ColorTrigger_default, {
+			"activeIndex": popupOpen.value ? activeIndex.value : -1,
+			"open": popupOpen.value,
+			"className": mergedCls,
+			"style": mergedStyle,
+			"prefixCls": prefixCls.value,
+			"disabled": mergedDisabled.value,
+			"showText": mergedShowText,
+			"format": formatValue.value,
+			"color": mergedColor.value
+		}, null);
+		return createVNode(popover_default, mergeProps({
+			"classes": { root: mergedPopupCls },
+			"styles": {
+				root: mergedStyles.value?.popup?.root,
+				container: styles.value?.popupOverlayInner
+			},
+			"onOpenChange": triggerOpenChange,
+			"content": panelNode
+		}, popoverProps), _isSlot(triggerNode) ? triggerNode : { default: () => [triggerNode] });
+	};
+}, {
+	emits: [
+		"change",
+		"clear",
+		"changeComplete",
+		"openChange",
+		"update:open",
+		"formatChange",
+		"update:value",
+		"update:format"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		mode: {
+			type: [String, Array],
+			required: false
+		},
+		value: {
+			type: [
+				Object,
+				String,
+				null,
+				Array
+			],
+			required: false
+		},
+		defaultValue: {
+			type: [
+				Object,
+				String,
+				null,
+				Array
+			],
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: String,
+			required: false
+		},
+		format: { required: false },
+		defaultFormat: { required: false },
+		allowClear: {
+			type: Boolean,
+			required: false
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		panelRender: {
+			type: Function,
+			required: false
+		},
+		showText: {
+			type: [Boolean, Function],
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		disabledAlpha: {
+			type: Boolean,
+			required: false
+		},
+		disabledFormat: {
+			type: Boolean,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		trigger: "click",
+		arrow: true,
+		placement: "bottomLeft",
+		autoAdjustOverflow: true,
+		disabledAlpha: false,
+		allowClear: false,
+		destroyOnHidden: false
+	}),
+	name: "AColorPicker",
+	inheritAttrs: false
+});
+ColorPicker.install = (app) => {
+	app.component(ColorPicker.name, ColorPicker);
+};
+var ColorPicker_default = ColorPicker;
+
+//#endregion
+export { ColorPicker_default as default };

package/dist/color-picker/ColorPickerPanel.js

@@ -0,0 +1,173 @@
+import divider_default from "../divider/index.js";
+import { usePanelPickerProvider, usePanelPresetsProvider } from "./context.js";
+import PanelPicker_default from "./components/PanelPicker/index.js";
+import PanelPresets_default from "./components/PanelPresets.js";
+import { computed, createVNode, defineComponent } from "vue";
+
+//#region src/color-picker/ColorPickerPanel.tsx
+var ColorPickerPanel_default = /* @__PURE__ */ defineComponent((props) => {
+	const colorPickerPanelPrefix = `${props.prefixCls}-inner`;
+	const innerPanel = () => createVNode("div", { "class": `${colorPickerPanelPrefix}-content` }, [
+		createVNode(PanelPicker_default, null, null),
+		Array.isArray(props.presets) ? createVNode(divider_default, null, null) : null,
+		createVNode(PanelPresets_default, null, null)
+	]);
+	usePanelPresetsProvider(computed(() => props));
+	usePanelPickerProvider(computed(() => props));
+	return () => {
+		return createVNode("div", { "class": colorPickerPanelPrefix }, [typeof props.panelRender === "function" ? props.panelRender({
+			panel: innerPanel(),
+			extra: { components: {
+				Picker: PanelPicker_default,
+				Presets: PanelPresets_default
+			} }
+		}) : innerPanel()]);
+	};
+}, {
+	props: {
+		mode: {
+			type: String,
+			required: true
+		},
+		onModeChange: {
+			type: Function,
+			required: true
+		},
+		modeOptions: {
+			type: Array,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: true
+		},
+		onChange: {
+			type: Function,
+			required: true
+		},
+		onChangeComplete: {
+			type: Function,
+			required: false
+		},
+		activeIndex: {
+			type: Number,
+			required: true
+		},
+		onActive: {
+			type: Function,
+			required: true
+		},
+		gradientDragging: {
+			type: Boolean,
+			required: true
+		},
+		onGradientDragging: {
+			type: Function,
+			required: true
+		},
+		onClear: {
+			type: Function,
+			required: false
+		},
+		panelRender: {
+			type: Function,
+			required: false
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		defaultValue: {
+			type: [
+				Object,
+				String,
+				null,
+				Array
+			],
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: String,
+			required: false
+		},
+		format: { required: false },
+		defaultFormat: { required: false },
+		allowClear: {
+			type: Boolean,
+			required: false
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		showText: {
+			type: [Boolean, Function],
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		disabledAlpha: {
+			type: Boolean,
+			required: false
+		},
+		disabledFormat: {
+			type: Boolean,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "AColorPickerPanel",
+	inheritAttrs: false
+});
+
+//#endregion
+export { ColorPickerPanel_default as default };

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

@@ -0,0 +1,32 @@
+import { ColorGenInput, Colors } from "./interface.js";
+import * as _ant_design_fast_color0 from "@ant-design/fast-color";
+
+//#region src/color-picker/color.d.ts
+type GradientColor = {
+  color: AggregationColor;
+  percent: number;
+}[];
+declare class AggregationColor {
+  /** Original Color object */
+  private metaColor;
+  private colors;
+  cleared: boolean;
+  constructor(color: ColorGenInput<AggregationColor> | Colors<AggregationColor>);
+  toHsb(): {
+    b: number;
+    a: number;
+    h: number;
+    s: number;
+  };
+  toHsbString(): string;
+  toHex(): string;
+  toHexString(): string;
+  toRgb(): _ant_design_fast_color0.RGB;
+  toRgbString(): string;
+  isGradient(): boolean;
+  getColors(): GradientColor;
+  toCssString(): string;
+  equals(color: AggregationColor | null): boolean;
+}
+//#endregion
+export { AggregationColor };

package/dist/color-picker/color.js

@@ -0,0 +1,79 @@
+import { Color } from "@v-c/color-picker";
+
+//#region src/color-picker/color.ts
+function toHexFormat(value, alpha) {
+	return value?.replace(/[^\w/]/g, "").slice(0, alpha ? 8 : 6) || "";
+}
+const getHex = (value, alpha) => value ? toHexFormat(value, alpha) : "";
+var AggregationColor = class AggregationColor {
+	/** Original Color object */
+	metaColor;
+	colors;
+	cleared = false;
+	constructor(color) {
+		if (color instanceof AggregationColor) {
+			this.metaColor = color.metaColor.clone();
+			this.colors = color.colors?.map((info) => ({
+				color: new AggregationColor(info.color),
+				percent: info.percent
+			}));
+			this.cleared = color.cleared;
+			return;
+		}
+		const isArray = Array.isArray(color);
+		if (isArray && color.length) {
+			this.colors = color.map(({ color: c, percent }) => ({
+				color: new AggregationColor(c),
+				percent
+			}));
+			this.metaColor = new Color(this?.colors[0].color.metaColor);
+		} else this.metaColor = new Color(isArray ? "" : color);
+		if (!color || isArray && !this.colors) {
+			this.metaColor = this.metaColor.setA(0);
+			this.cleared = true;
+		}
+	}
+	toHsb() {
+		return this.metaColor.toHsb();
+	}
+	toHsbString() {
+		return this.metaColor.toHsbString();
+	}
+	toHex() {
+		return getHex(this.toHexString(), this.metaColor.a < 1);
+	}
+	toHexString() {
+		return this.metaColor.toHexString();
+	}
+	toRgb() {
+		return this.metaColor.toRgb();
+	}
+	toRgbString() {
+		return this.metaColor.toRgbString();
+	}
+	isGradient() {
+		return !!this.colors && !this.cleared;
+	}
+	getColors() {
+		return this.colors || [{
+			color: this,
+			percent: 0
+		}];
+	}
+	toCssString() {
+		const { colors } = this;
+		if (colors) return `linear-gradient(90deg, ${colors.map((c) => `${c.color.toRgbString()} ${c.percent}%`).join(", ")})`;
+		return this.metaColor.toRgbString();
+	}
+	equals(color) {
+		if (!color || this.isGradient() !== color.isGradient()) return false;
+		if (!this.isGradient()) return this.toHexString() === color.toHexString();
+		return this.colors.length === color.colors.length && this.colors.every((c, i) => {
+			const target = color.colors[i];
+			return c.percent === target?.percent && c.color.equals(target.color);
+		});
+	}
+};
+
+//#endregion
+export { AggregationColor, toHexFormat };