@zboson/ui 0.0.0-stage → 0.0.1

package/dist/color-picker/ColorPicker.js

@@ -0,0 +1,352 @@
+import { useFormItemInputContext } from "../form/context.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useCompactItemContext } from "../space/Compact.js";
+import { ContextIsolator } from "../_util/ContextIsolator.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import useMergedArrow from "../tooltip/hooks/useMergedArrow.js";
+import { AggregationColor } from "./color.js";
+import { formatColorValue, genAlphaColor, generateColor, getColorAlpha } from "./util.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import genPurePanel from "../_util/PurePanel.js";
+import { getStatusClassNames } from "../_util/statusUtils.js";
+import Popover from "../popover/index.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, arrow: contextArrow } = useComponentBaseConfig("colorPicker", props, ["arrow"], "color-picker");
+	const { size: customizeSize, classes, styles, value, mode, format, valueFormat, open, presets, disabledAlpha, disabledFormat, arrow } = toPropsRefs$1(props, "size", "classes", "styles", "value", "mode", "format", "valueFormat", "open", "presets", "disabledAlpha", "disabledFormat", "arrow");
+	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 mergedArrow = useMergedArrow(arrow, contextArrow);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			trigger: props.trigger ?? "click",
+			allowClear: props.allowClear ?? false,
+			autoAdjustOverflow: props.autoAdjustOverflow ?? true,
+			disabledAlpha: props.disabledAlpha ?? false,
+			arrow: mergedArrow.value,
+			placement: props.placement ?? "bottomLeft",
+			disabled: mergedDisabled.value,
+			size: mergedSize.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps), computed(() => ({ popup: { _default: "root" } })));
+	const internalPopupOpen = shallowRef(open.value ?? false);
+	watch(open, (val) => {
+		internalPopupOpen.value = val ?? false;
+	});
+	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 = (nextOpen) => {
+		if (open.value !== void 0) {
+			emit("openChange", nextOpen);
+			emit("update:open", nextOpen);
+			return;
+		}
+		if (!nextOpen || !mergedDisabled.value) {
+			internalPopupOpen.value = nextOpen;
+			emit("openChange", nextOpen);
+			emit("update:open", nextOpen);
+		}
+	};
+	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", formatColorValue(color, valueFormat.value));
+		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(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const handleClear = () => {
+		emit("clear");
+	};
+	expose({
+		focus: () => {},
+		blur: () => {}
+	});
+	return () => {
+		const { rootClass, trigger, placement, getPopupContainer, autoAdjustOverflow, destroyOnHidden } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs, void 0, props);
+		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(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: mergedArrow.value,
+			rootClass,
+			getPopupContainer,
+			autoAdjustOverflow,
+			destroyOnHidden
+		};
+		const panelNode = createVNode(ContextIsolator, { "form": true }, { default: () => [createVNode(ColorPickerPanel_default, mergeProps({
+			"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, mergeProps({
+			"activeIndex": popupOpen.value ? activeIndex.value : -1,
+			"open": popupOpen.value,
+			"className": mergedCls,
+			"style": style,
+			"prefixCls": prefixCls.value,
+			"disabled": mergedDisabled.value,
+			"showText": showText,
+			"format": formatValue.value
+		}, restAttrs, {
+			"color": mergedColor.value,
+			"classes": mergedClassNames.value,
+			"styles": mergedStyles.value
+		}), null);
+		return createVNode(Popover, mergeProps({
+			"classes": { root: mergedPopupCls },
+			"styles": {
+				root: mergedStyles.value?.popup?.root,
+				container: styles.value?.popupOverlayInner
+			},
+			"onOpenChange": triggerOpenChange,
+			"content": panelNode
+		}, popoverProps), _isSlot(triggerNode) ? triggerNode : { default: () => [triggerNode] });
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		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,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: String,
+			required: false
+		},
+		format: { required: false },
+		defaultFormat: { required: false },
+		valueFormat: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		allowClear: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		panelRender: {
+			type: Function,
+			required: false
+		},
+		showText: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		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,
+			default: void 0
+		},
+		disabledFormat: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, {
+		trigger: "click",
+		placement: "bottomLeft",
+		autoAdjustOverflow: true,
+		disabledAlpha: false,
+		allowClear: false,
+		destroyOnHidden: false
+	}),
+	emits: [
+		"change",
+		"clear",
+		"changeComplete",
+		"openChange",
+		"update:open",
+		"formatChange",
+		"update:value",
+		"update:format"
+	],
+	name: "AColorPicker",
+	inheritAttrs: false
+});
+ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = genPurePanel(ColorPicker, void 0, (props) => ({
+	...props,
+	placement: "bottom",
+	autoAdjustOverflow: false
+}), "color-picker", (prefixCls) => prefixCls);
+ColorPicker.install = (app) => {
+	app.component(ColorPicker.name, ColorPicker);
+};
+//#endregion
+export { ColorPicker as default };

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

@@ -0,0 +1,21 @@
+import { EmptyEmit } from "../_util/type.js";
+import { AggregationColor } from "./color.js";
+import { ColorPickerProps, ModeType } from "./interface.js";
+//#region src/color-picker/ColorPickerPanel.d.ts
+interface ColorPickerPanelProps extends ColorPickerProps {
+  mode: ModeType;
+  onModeChange: (mode: ModeType) => void;
+  modeOptions: any[];
+  value: AggregationColor;
+  onChange: (value?: AggregationColor, fromPicker?: boolean) => void;
+  onChangeComplete?: (value: AggregationColor) => void;
+  activeIndex: number;
+  onActive: (index: number) => void;
+  gradientDragging: boolean;
+  onGradientDragging: (dragging: boolean) => void;
+  onClear?: () => void;
+  panelRender?: ColorPickerProps['panelRender'];
+}
+declare const _default: import("vue").DefineSetupFnComponent<ColorPickerPanelProps, EmptyEmit, {}, ColorPickerPanelProps, import("vue").PublicProps>;
+//#endregion
+export { ColorPickerPanelProps, _default as default };

package/dist/color-picker/ColorPickerPanel.js

@@ -0,0 +1,185 @@
+import Divider 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, 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,
+			default: void 0
+		},
+		defaultValue: {
+			type: [
+				Object,
+				String,
+				null,
+				Array
+			],
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		trigger: {
+			type: String,
+			required: false
+		},
+		format: { required: false },
+		defaultFormat: { required: false },
+		valueFormat: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		allowClear: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		presets: {
+			type: Array,
+			required: false
+		},
+		arrow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		showText: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		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,
+			default: void 0
+		},
+		disabledFormat: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		autoAdjustOverflow: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	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";
+//#region src/color-picker/color.d.ts
+declare function toHexFormat(value?: string, alpha?: boolean): string;
+declare const getHex: (value?: string, alpha?: boolean) => string;
+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(): import("@ant-design/fast-color").RGB;
+  toRgbString(): string;
+  isGradient(): boolean;
+  getColors(): GradientColor;
+  toCssString(): string;
+  equals(color: AggregationColor | null): boolean;
+}
+//#endregion
+export { AggregationColor, GradientColor, getHex, toHexFormat };

package/dist/color-picker/color.js

@@ -0,0 +1,77 @@
+import { Color } from "@v-c/color-picker";
+//#region src/color-picker/color.ts
+function toHexFormat(value, alpha) {
+	return value?.replace(/[^0-9a-f]/gi, "").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, getHex, toHexFormat };

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

@@ -0,0 +1,10 @@
+import { AggregationColor } from "../color.js";
+//#region src/color-picker/components/ColorAlphaInput.d.ts
+interface ColorAlphaInputProps {
+  prefixCls: string;
+  value?: AggregationColor;
+  onChange?: (value: AggregationColor) => void;
+}
+declare const _default: import("vue").DefineSetupFnComponent<ColorAlphaInputProps, {}, {}, ColorAlphaInputProps & {}, import("vue").PublicProps>;
+//#endregion
+export { ColorAlphaInputProps, _default as default };