antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/tag/CheckableTag.js

@@ -0,0 +1,79 @@
+import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
+import { pureAttrs } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { clsx, getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+
+//#region src/tag/CheckableTag.tsx
+const CheckableTag = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const configCtx = useConfig();
+	const { prefixCls } = useComponentBaseConfig("tag", props);
+	const { disabled: customDisabled } = toPropsRefs(props, "disabled");
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => customDisabled.value ?? disabled.value);
+	const handleClick = (e) => {
+		if (mergedDisabled.value) return;
+		const checked = !props.checked;
+		emit("change", checked);
+		emit("update:checked", checked);
+		emit("click", e);
+	};
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	return () => {
+		const tag = configCtx.value.tag;
+		const { checked } = props;
+		const cls = clsx(prefixCls.value, `${prefixCls.value}-checkable`, {
+			[`${prefixCls.value}-checkable-checked`]: checked,
+			[`${prefixCls.value}-checkable-disabled`]: mergedDisabled.value
+		}, tag?.class, attrs.class, hashId.value, cssVarCls.value);
+		const icon = getSlotPropsFnRun(slots, props, "icon");
+		return createVNode("span", mergeProps(pureAttrs(attrs), {
+			"style": [tag?.style, attrs.style],
+			"class": cls,
+			"onClick": handleClick
+		}), [icon, createVNode("span", null, [slots?.default?.()])]);
+	};
+}, {
+	emits: [
+		"change",
+		"update:checked",
+		"click"
+	],
+	props: {
+		checked: {
+			type: Boolean,
+			required: true
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ACheckableTag",
+	inheritAttrs: false
+});
+var CheckableTag_default = CheckableTag;
+
+//#endregion
+export { CheckableTag_default as default };

package/dist/tag/CheckableTagGroup.d.ts

@@ -0,0 +1,43 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticStyles } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue319 from "vue";
+
+//#region src/tag/CheckableTagGroup.d.ts
+type CheckableTagDefaultValue = string | number;
+interface CheckableTagOption<CheckableTagValue = CheckableTagDefaultValue> {
+  value: CheckableTagValue;
+  label: VueNode;
+  disabled?: boolean;
+}
+interface CheckableTagGroupSingleProps<CheckableTagValue = CheckableTagDefaultValue> {
+  multiple?: false;
+  value?: CheckableTagValue | null;
+  defaultValue?: CheckableTagValue | null;
+  onChange?: (value: CheckableTagValue | null) => void;
+}
+interface CheckableTagGroupMultipleProps<CheckableTagValue = CheckableTagDefaultValue> {
+  multiple: true;
+  value?: CheckableTagValue[];
+  defaultValue?: CheckableTagValue[];
+}
+type SemanticName = 'root' | 'item';
+type CheckableTagGroupProps<CheckableTagValue = CheckableTagDefaultValue> = ComponentBaseProps & {
+  classes?: SemanticClassNames<SemanticName>;
+  styles?: SemanticStyles<SemanticName>;
+  options?: (CheckableTagOption<CheckableTagValue> | CheckableTagValue)[];
+  id?: string;
+  role?: string;
+  disabled?: boolean;
+} & (CheckableTagGroupSingleProps<CheckableTagValue> | CheckableTagGroupMultipleProps<CheckableTagValue>);
+interface CheckableTagGroupEmits<CheckableTagValue = CheckableTagDefaultValue> {
+  'change': (value: CheckableTagValue | CheckableTagValue[] | null) => void;
+  'update:value': (value: CheckableTagValue | CheckableTagValue[] | null) => void;
+  [key: string]: (...args: any[]) => any;
+}
+declare const CheckableTagGroup: vue319.DefineSetupFnComponent<CheckableTagGroupProps<CheckableTagDefaultValue>, CheckableTagGroupEmits<CheckableTagDefaultValue>, {}, CheckableTagGroupProps<CheckableTagDefaultValue> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue319.PublicProps>;
+//#endregion
+export { CheckableTagGroup };

package/dist/tag/CheckableTagGroup.js

@@ -0,0 +1,122 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { clsx } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import style_default from "./style/index.js";
+import CheckableTag_default from "./CheckableTag.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+
+//#region src/tag/CheckableTagGroup.tsx
+const CheckableTagGroup = /* @__PURE__ */ defineComponent((props, { emit, attrs, expose }) => {
+	const { prefixCls, direction } = useComponentBaseConfig("tag", props);
+	const groupPrefixCls = computed(() => `${prefixCls.value}-checkable-group`);
+	const [hashId, cssVarCls] = style_default(prefixCls, useCSSVarCls_default(prefixCls));
+	const mergedClassNames = computed(() => props.classes || {});
+	const mergedStyles = computed(() => props.styles || {});
+	const parsedOptions = computed(() => {
+		return (props.options ?? []).map((option) => {
+			if (option && typeof option === "object") return option;
+			return {
+				value: option,
+				label: option
+			};
+		});
+	});
+	const _mergedValue = shallowRef(props.defaultValue ?? props.value ?? null);
+	const mergedValue = computed({
+		set(value) {
+			_mergedValue.value = value;
+			emit("update:value", value);
+		},
+		get() {
+			return props.value ?? _mergedValue.value;
+		}
+	});
+	const handleChange = (checked, option) => {
+		let newValue = null;
+		if (props.multiple) {
+			const valueList = mergedValue.value || [];
+			newValue = checked ? [...valueList, option.value] : valueList.filter((v) => v !== option.value);
+		} else newValue = checked ? option.value : null;
+		mergedValue.value = newValue;
+		emit("change", newValue);
+	};
+	const divRef = shallowRef();
+	expose({ nativeElement: divRef });
+	return () => {
+		const { rootClass, disabled, id, multiple } = props;
+		return createVNode("div", mergeProps(pickAttrs(attrs, {
+			aria: true,
+			data: true
+		}), {
+			"class": clsx(groupPrefixCls, rootClass, {
+				[`${groupPrefixCls}-disabled`]: disabled,
+				[`${groupPrefixCls}-rtl`]: direction.value === "rtl"
+			}, hashId.value, cssVarCls.value, attrs.class, mergedClassNames.value.root),
+			"style": [mergedStyles.value.root, attrs.style],
+			"id": id,
+			"ref": divRef
+		}), [parsedOptions.value.map((option) => {
+			return createVNode(CheckableTag_default, {
+				"key": option.value,
+				"class": clsx(`${groupPrefixCls.value}-item`, mergedClassNames.value.item),
+				"style": mergedStyles.value.item,
+				"checked": multiple ? (mergedValue.value || []).includes(option.value) : mergedValue.value === option.value,
+				"onChange": (checked) => handleChange(checked, option),
+				"disabled": option.disabled ?? disabled
+			}, { default: () => [option.label] });
+		})]);
+	};
+}, {
+	emits: ["change", "update:value"],
+	props: {
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: Object,
+			required: false
+		},
+		styles: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		role: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		onChange: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ACheckableTagGroup",
+	inheritAttrs: false
+});
+var CheckableTagGroup_default = CheckableTagGroup;
+
+//#endregion
+export { CheckableTagGroup_default as default };

package/dist/tag/hooks/useColor.js

@@ -0,0 +1,49 @@
+import { isPresetColor, isPresetStatusColor } from "../../_util/colors.js";
+import { computed } from "vue";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/tag/hooks/useColor.ts
+/**
+* Convert color related props to a unified object,
+* which is used to flatten the compatibility requirements.
+*/
+function useColor(props, contextVariant) {
+	const { color, variant, bordered } = props;
+	const convertColors = computed(() => {
+		const isInverseColor = color.value?.endsWith?.("-inverse");
+		let nextVariant;
+		if (variant.value) nextVariant = variant.value;
+		else if (isInverseColor) nextVariant = "solid";
+		else if (bordered.value === false) nextVariant = "filled";
+		else nextVariant = contextVariant?.value || "filled";
+		const nextColor = isInverseColor ? color?.value?.replace("-inverse", "") : color.value;
+		const nextIsPreset = isPresetColor(color.value);
+		const nextIsStatus = isPresetStatusColor(color.value);
+		const tagStyle = {};
+		if (!nextIsPreset && !nextIsStatus && nextColor) if (nextVariant === "solid") tagStyle.backgroundColor = color.value;
+		else {
+			const hsl = new FastColor(nextColor).toHsl();
+			hsl.l = .95;
+			tagStyle.backgroundColor = new FastColor(hsl).toHexString();
+			tagStyle.color = color.value;
+			if (nextVariant === "outlined") tagStyle.borderColor = color.value;
+		}
+		return [
+			nextVariant,
+			nextColor,
+			nextIsPreset,
+			nextIsStatus,
+			tagStyle
+		];
+	});
+	return [
+		computed(() => convertColors.value[0]),
+		computed(() => convertColors.value[1]),
+		computed(() => convertColors.value[2]),
+		computed(() => convertColors.value[3]),
+		computed(() => convertColors.value[4])
+	];
+}
+
+//#endregion
+export { useColor as default };

package/dist/tag/index.d.ts

@@ -0,0 +1,48 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { PresetColorType, PresetStatusColorType } from "../_util/colors.js";
+import { ClosableType } from "../_util/hooks/useClosable.js";
+import { CheckableTag, CheckableTagProps } from "./CheckableTag.js";
+import { CheckableTagGroup } from "./CheckableTagGroup.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue161 from "vue";
+import { SlotsType } from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
+
+//#region src/tag/index.d.ts
+type TagSemanticName = 'root' | 'icon' | 'content';
+type TagClassNamesType = SemanticClassNamesType<TagProps, TagSemanticName>;
+type TagStylesType = SemanticStylesType<TagProps, TagSemanticName>;
+interface TagProps extends ComponentBaseProps {
+  color?: LiteralUnion<PresetColorType | PresetStatusColorType>;
+  /** Advised to use closeIcon instead. */
+  closable?: ClosableType;
+  closeIcon?: VueNode;
+  icon?: VueNode;
+  onClick?: (e: MouseEvent) => void;
+  href?: string;
+  target?: string;
+  disabled?: boolean;
+  bordered?: boolean;
+  styles?: TagStylesType;
+  classes?: TagClassNamesType;
+  variant?: 'filled' | 'solid' | 'outlined';
+}
+interface TagSlots {
+  default?: () => any;
+  icon?: () => any;
+  closeIcon?: () => any;
+}
+interface TagEmits {
+  close: (ev: MouseEvent) => void;
+  [key: string]: (...args: any[]) => any;
+}
+declare const InternalTag: vue161.DefineSetupFnComponent<TagProps, TagEmits, SlotsType<TagSlots>, TagProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue161.PublicProps>;
+declare const Tag: typeof InternalTag & {
+  CheckableTag: typeof CheckableTag;
+};
+//#endregion
+export { Tag, TagProps, TagSlots };

package/dist/tag/index.js

@@ -0,0 +1,217 @@
+import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
+import { pureAttrs, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { replaceElement } from "../_util/vueNode.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import wave_default from "../_util/wave/index.js";
+import useClosable, { pickClosable } from "../_util/hooks/useClosable.js";
+import style_default from "./style/index.js";
+import CheckableTag_default from "./CheckableTag.js";
+import CheckableTagGroup_default from "./CheckableTagGroup.js";
+import useColor from "./hooks/useColor.js";
+import presetCmp_default from "./style/presetCmp.js";
+import statusCmp_default from "./style/statusCmp.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/tag/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalTag = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
+	const configContext = useConfig();
+	const { prefixCls, direction, class: contextClassName, variant: contextVariant, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("tag", props, ["variant"]);
+	const { variant, href, target, disabled: customDisabled, color, bordered, classes, styles } = toPropsRefs(props, "classes", "styles", "variant", "href", "target", "disabled", "color", "bordered");
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const [mergedVariant, mergedColor, isPreset, isStatus, customTagStyle] = useColor({
+		bordered,
+		variant,
+		color
+	}, contextVariant);
+	const isInternalColor = computed(() => isPreset.value || isStatus.value);
+	const disabled = useDisabledContext();
+	const mergedDisabled = computed(() => customDisabled?.value ?? disabled.value);
+	const visible = shallowRef(true);
+	const tagRef = shallowRef();
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			color: mergedColor?.value,
+			variant: mergedVariant?.value,
+			disabled: mergedDisabled?.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	expose({ tagRef });
+	const handleCloseClick = (e) => {
+		if (mergedDisabled.value) return;
+		e.stopPropagation();
+		emit("close", e);
+		if (e.defaultPrevented) return;
+		visible.value = false;
+	};
+	const closableInfo = useClosable(pickClosable(computed(() => ({
+		...props,
+		closeIcon: getSlotPropsFnRun(slots, props, "closeIcon")
+	}))), pickClosable(computed(() => configContext.value.tag)), computed(() => {
+		return {
+			closable: false,
+			closeIconRender(iconNode) {
+				return replaceElement(iconNode, createVNode("span", {
+					"class": `${prefixCls.value}-close-icon`,
+					"onClick": handleCloseClick
+				}, [iconNode]), (originProps) => {
+					return {
+						onClick(e) {
+							originProps?.onClick?.(e);
+							handleCloseClick(e);
+						},
+						class: classNames(originProps?.class, `${prefixCls.value}-close-icon`)
+					};
+				});
+			}
+		};
+	}));
+	const tagStyle = computed(() => {
+		let nextTagStyle = {
+			...mergedStyles.value?.root,
+			...contextStyle.value,
+			...attrs.style
+		};
+		if (!mergedDisabled.value) nextTagStyle = {
+			...customTagStyle.value,
+			...nextTagStyle
+		};
+		return nextTagStyle;
+	});
+	return () => {
+		const tagClassName = classNames(prefixCls.value, contextClassName.value, mergedClassNames.value.root, `${prefixCls.value}-${mergedVariant.value}`, {
+			[`${prefixCls.value}-${mergedColor.value}`]: isInternalColor.value,
+			[`${prefixCls.value}-hidden`]: !visible.value,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-disabled`]: mergedDisabled.value
+		}, attrs.class, props.rootClass, hashId.value, cssVarCls.value);
+		const children = filterEmpty(slots?.default?.())[0];
+		const isNeedWave = children && children.type === "a" || typeof props.onClick === "function";
+		const iconNode = getSlotPropsFnRun(slots, props, "icon");
+		let iconNodes = iconNode;
+		if (iconNode) iconNodes = createVNode(iconNode, {
+			class: mergedClassNames.value?.icon,
+			style: mergedStyles.value?.icon
+		});
+		const kids = iconNodes ? createVNode(Fragment, null, [iconNodes, children && createVNode("span", {
+			"class": mergedClassNames.value.content,
+			"style": mergedStyles.value.content
+		}, [children])]) : children;
+		const TagWrapper = href.value ? "a" : "span";
+		const mergedCloseIcon = closableInfo.value?.[1];
+		const tagNode = createVNode(TagWrapper, mergeProps(pureAttrs(attrs), {
+			"class": tagClassName,
+			"style": tagStyle.value,
+			"href": mergedDisabled.value ? void 0 : href.value,
+			"target": target.value,
+			"onClick": mergedDisabled.value ? void 0 : props.onClick
+		}, href.value && mergedDisabled.value ? { "aria-disabled": true } : {}), { default: () => [
+			kids,
+			mergedCloseIcon,
+			isPreset.value && createVNode(presetCmp_default, {
+				"key": "preset",
+				"prefixCls": prefixCls.value
+			}, null),
+			isStatus.value && createVNode(statusCmp_default, {
+				"key": "status",
+				"prefixCls": prefixCls.value
+			}, null)
+		] });
+		return isNeedWave ? createVNode(wave_default, { "component": "Tag" }, _isSlot(tagNode) ? tagNode : { default: () => [tagNode] }) : tagNode;
+	};
+}, {
+	emits: ["close"],
+	props: /* @__PURE__ */ mergeDefaults({
+		color: { required: false },
+		closable: {
+			type: [Boolean, Object],
+			required: false
+		},
+		closeIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		href: {
+			type: String,
+			required: false
+		},
+		target: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		bordered: true,
+		closable: void 0
+	}),
+	name: "ATag",
+	inheritAttrs: false
+});
+const Tag = InternalTag;
+Tag.CheckableTag = CheckableTag_default;
+Tag.install = (app) => {
+	app.component(InternalTag.name, Tag);
+	app.component(CheckableTag_default.name, CheckableTag_default);
+	app.component(CheckableTagGroup_default.name, CheckableTagGroup_default);
+};
+var tag_default = Tag;
+
+//#endregion
+export { tag_default as default };

package/dist/tag/style/index.d.ts

@@ -0,0 +1,23 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/tag/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 默认背景色
+   * @descEN Default background color
+   */
+  defaultBg: string;
+  /**
+   * @desc 默认文字颜色
+   * @descEN Default text color
+   */
+  defaultColor: string;
+  /**
+   * @desc 默认实心标签的文本色
+   * @descEN Default text color for solid tag.
+   */
+  solidTextColor: string;
+}
+//#endregion
+export { ComponentToken };