antdv-next 0.0.111 → 1.0.0-alpha.2

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

@@ -0,0 +1,48 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/cascader/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 选择器宽度
+   * @descEN Width of Cascader
+   */
+  controlWidth: number | string;
+  /**
+   * @desc 选项宽度
+   * @descEN Width of item
+   */
+  controlItemWidth: number | string;
+  /**
+   * @desc 下拉菜单高度
+   * @descEN Height of dropdown
+   */
+  dropdownHeight: number | string;
+  /**
+   * @desc 选项选中时背景色
+   * @descEN Background color of selected item
+   */
+  optionSelectedBg: string;
+  /**
+   * @desc 选项选中时文本颜色
+   * @descEN Text color when option is selected
+   */
+  optionSelectedColor: string;
+  /**
+   * @desc 选项选中时字重
+   * @descEN Font weight of selected item
+   */
+  optionSelectedFontWeight: CSSProperties['fontWeight'];
+  /**
+   * @desc 选项内间距
+   * @descEN Padding of menu item
+   */
+  optionPadding: CSSProperties['padding'];
+  /**
+   * @desc 选项菜单（单列）内间距
+   * @descEN Padding of menu item (single column)
+   */
+  menuPadding: CSSProperties['padding'];
+}
+//#endregion
+export { ComponentToken };

package/dist/cascader/style/index.js

@@ -0,0 +1,35 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { genCompactItemStyle } from "../../style/compact-item.js";
+import columns_default from "./columns.js";
+
+//#region src/cascader/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return [
+		{ [componentCls]: { width: token.controlWidth } },
+		{ [`${componentCls}-dropdown`]: [{ [`&${antCls}-select-dropdown`]: { padding: 0 } }, columns_default(token)] },
+		{ [`${componentCls}-dropdown-rtl`]: { direction: "rtl" } },
+		genCompactItemStyle(token)
+	];
+};
+function prepareComponentToken(token) {
+	const itemPaddingVertical = Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2);
+	return {
+		controlWidth: 184,
+		controlItemWidth: 111,
+		dropdownHeight: 180,
+		optionSelectedBg: token.controlItemBgActive,
+		optionSelectedFontWeight: token.fontWeightStrong,
+		optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
+		menuPadding: token.paddingXXS,
+		optionSelectedColor: token.colorText
+	};
+}
+var style_default = genStyleHooks("Cascader", genBaseStyle, prepareComponentToken, {
+	resetFont: false,
+	unitless: { optionSelectedFontWeight: true }
+});
+
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/cascader/style/panel.js

@@ -0,0 +1,24 @@
+import { genComponentStyleHook } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import columns_default from "./columns.js";
+import { prepareComponentToken } from "./index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/cascader/style/panel.ts
+const genPanelStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}-panel`]: [columns_default(token), {
+		"display": "inline-flex",
+		"border": `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+		"borderRadius": token.borderRadiusLG,
+		"overflowX": "auto",
+		"maxWidth": "100%",
+		[`${componentCls}-menus`]: { alignItems: "stretch" },
+		[`${componentCls}-menu`]: { height: "auto" },
+		"&-empty": { padding: token.paddingXXS }
+	}] };
+};
+var panel_default = genComponentStyleHook(["Cascader", "Panel"], genPanelStyle, prepareComponentToken, { resetFont: false });
+
+//#endregion
+export { panel_default as default };

package/dist/checkbox/Checkbox.d.ts

@@ -0,0 +1,51 @@
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue249 from "vue";
+import { SlotsType } from "vue";
+import { CheckboxChangeEvent } from "@v-c/checkbox";
+
+//#region src/checkbox/Checkbox.d.ts
+interface AbstractCheckboxProps extends ComponentBaseProps {
+  defaultChecked?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  title?: string;
+  value?: any;
+  tabIndex?: number;
+  name?: string;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+}
+interface CheckboxEmits {
+  'change': (checked: CheckboxChangeEvent) => void;
+  'update:checked': (checked: any) => void;
+  'update:value': (value: any) => void;
+  'mouseenter': (event: MouseEvent) => void;
+  'mouseleave': (event: MouseEvent) => void;
+  'keypress': (event: KeyboardEvent) => void;
+  'keydown': (event: KeyboardEvent) => void;
+  'focus': (event: FocusEvent) => void;
+  'blur': (event: FocusEvent) => void;
+  'click': (event: MouseEvent) => void;
+  [key: string]: (...args: any[]) => void;
+}
+interface CheckboxSlots {
+  default?: () => any;
+}
+type SemanticName = 'root' | 'icon' | 'label';
+type CheckboxClassNamesType = SemanticClassNamesType<CheckboxProps, SemanticName>;
+type CheckboxStylesType = SemanticStylesType<CheckboxProps, SemanticName>;
+interface CheckboxProps extends AbstractCheckboxProps {
+  indeterminate?: boolean;
+  classes?: CheckboxClassNamesType;
+  styles?: CheckboxStylesType;
+}
+declare const InternalCheckbox: vue249.DefineSetupFnComponent<CheckboxProps, CheckboxEmits, SlotsType<CheckboxSlots>, CheckboxProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue249.PublicProps>;
+//#endregion
+export { AbstractCheckboxProps, CheckboxEmits, CheckboxProps, CheckboxSlots, InternalCheckbox };

package/dist/checkbox/Checkbox.js

@@ -0,0 +1,230 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { devUseWarning, isDev } from "../_util/warning.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import { checkRenderNode } from "../_util/vueNode.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { TARGET_CLS } from "../_util/wave/interface.js";
+import wave_default from "../_util/wave/index.js";
+import isNonNullable_default from "../_util/isNonNullable.js";
+import { useFormItemContext, useFormItemInputContext } from "../form/context.js";
+import useBubbleLock from "./useBubbleLock.js";
+import style_default from "./style/index.js";
+import { useGroupContext } from "./GroupContext.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { omit } from "es-toolkit";
+import VcCheckbox from "@v-c/checkbox";
+
+//#region src/checkbox/Checkbox.tsx
+const InternalCheckbox = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs, expose }) => {
+	const { direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls } = useComponentBaseConfig("checkbox", props);
+	const { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const checkboxGroup = useGroupContext();
+	const formItemInputContext = useFormItemInputContext();
+	const formItemContext = useFormItemContext();
+	const contextDisabled = useDisabledContext();
+	const mergedDisabled = computed(() => (checkboxGroup?.value?.disabled || props?.disabled) ?? contextDisabled.value);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			disabled: mergedDisabled.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const prevValue = shallowRef(props.value);
+	const checkboxRef = shallowRef();
+	if (isDev) devUseWarning("Checkbox")("checked" in props || !!checkboxGroup?.value || !("value" in props), "usage", "`value` is not a valid prop, do you mean `checked`?");
+	checkboxGroup?.value?.registerValue?.(prevValue.value);
+	watch(() => props.value, (_n, _o, onCleanup) => {
+		if (props.skipGroup) return;
+		if (prevValue.value !== props.value) {
+			checkboxGroup?.value?.cancelValue?.(prevValue.value);
+			checkboxGroup?.value?.registerValue?.(props.value);
+			prevValue.value = props.value;
+		}
+		onCleanup(() => {
+			checkboxGroup?.value?.cancelValue?.(prevValue.value);
+		});
+	});
+	onBeforeUnmount(() => {
+		checkboxGroup?.value?.cancelValue?.(prevValue.value);
+	});
+	watch(() => props.indeterminate, async () => {
+		await nextTick();
+		if (checkboxRef.value) {
+			if (checkboxRef.value?.input) checkboxRef.value.input.indeterminate = props.indeterminate;
+		}
+	});
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [onLabelClick, onInputClick] = useBubbleLock((e) => {
+		emit("click", e);
+	});
+	const keys = [
+		"prefixCls",
+		"rootClass",
+		"indeterminate",
+		"skipGroup",
+		"disabled",
+		"classes",
+		"styles"
+	];
+	expose({
+		blur: () => checkboxRef.value?.blur?.(),
+		focus: () => checkboxRef.value?.focus?.(),
+		input: computed(() => checkboxRef.value?.input)
+	});
+	return () => {
+		const { skipGroup, rootClass, indeterminate } = props;
+		const children = checkRenderNode(filterEmpty(slots?.default?.() ?? []));
+		const { className, style, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const checkboxProps = { ...omit(props, keys) };
+		if (checkboxGroup?.value && !skipGroup) {
+			checkboxProps.onChange = (...args) => {
+				emit("change", ...args);
+				if (checkboxGroup.value.toggleOption) checkboxGroup.value.toggleOption({
+					label: children,
+					value: props.value
+				});
+			};
+			checkboxProps.name = checkboxGroup.value?.name;
+			checkboxProps.checked = checkboxGroup?.value?.value.includes?.(props.value);
+		}
+		const classString = clsx(`${prefixCls.value}-wrapper`, {
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
+			[`${prefixCls.value}-wrapper-disabled`]: mergedDisabled.value,
+			[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.value?.isFormItemInput
+		}, contextClassName.value, className, mergedClassNames.value.root, rootClass, cssVarCls.value, rootCls.value, hashId.value);
+		const checkboxClass = clsx(mergedClassNames.value.icon, { [`${prefixCls.value}-indeterminate`]: indeterminate }, TARGET_CLS, hashId.value);
+		return createVNode(wave_default, {
+			"component": "Checkbox",
+			"disabled": mergedDisabled.value
+		}, { default: () => [createVNode("label", mergeProps({
+			"class": classString,
+			"style": [
+				mergedStyles.value.root,
+				contextStyle.value,
+				style
+			],
+			"onMouseenter": (e) => emit("mouseenter", e),
+			"onMouseleave": (e) => emit("mouseleave", e),
+			"onClick": onLabelClick
+		}, restAttrs), [createVNode(VcCheckbox, mergeProps(omit(checkboxProps, ["onChange"]), {
+			"onChange": (e) => {
+				if (!checkboxProps.onChange) emit("change", e);
+				checkboxProps?.onChange?.(e);
+			},
+			"onUpdate:checked": (checked) => {
+				emit("update:checked", checked);
+			}
+		}, {
+			"onClick": onInputClick,
+			"prefixCls": prefixCls.value,
+			"class": checkboxClass,
+			"style": mergedStyles.value.icon,
+			"disabled": mergedDisabled.value,
+			"onBlur": (e) => {
+				formItemContext?.triggerBlur?.();
+				emit("blur", e);
+			},
+			"ref": checkboxRef
+		}), null), isNonNullable_default(children) && createVNode("span", {
+			"class": clsx(`${prefixCls.value}-label`, mergedClassNames.value?.label),
+			"style": mergedStyles.value?.label
+		}, [children])])] });
+	};
+}, {
+	emits: [
+		"change",
+		"update:checked",
+		"update:value",
+		"mouseenter",
+		"mouseleave",
+		"keypress",
+		"keydown",
+		"focus",
+		"blur",
+		"click"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		indeterminate: {
+			type: Boolean,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		defaultChecked: {
+			type: Boolean,
+			required: false
+		},
+		checked: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		value: { required: false },
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		skipGroup: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, {
+		indeterminate: false,
+		skipGroup: false
+	}),
+	name: "ACheckbox",
+	inheritAttrs: false
+});
+var Checkbox_default = InternalCheckbox;
+
+//#endregion
+export { Checkbox_default as default };

package/dist/checkbox/Group.d.ts

@@ -0,0 +1,48 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import * as vue247 from "vue";
+import { CSSProperties, SlotsType } from "vue";
+import { CheckboxChangeEvent } from "@v-c/checkbox";
+
+//#region src/checkbox/Group.d.ts
+interface CheckboxOptionType {
+  label: VueNode;
+  value: any;
+  style?: CSSProperties;
+  class?: string;
+  disabled?: boolean;
+  title?: string;
+  id?: string;
+  onChange?: (e: CheckboxChangeEvent) => void;
+  required?: boolean;
+}
+interface AbstractCheckboxGroupProps extends ComponentBaseProps {
+  options?: (CheckboxOptionType | string | number)[];
+  disabled?: boolean;
+}
+interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
+  name?: string;
+  defaultValue?: any[];
+  value?: any[];
+  labelRender?: (params: {
+    item: CheckboxOptionType;
+    index: number;
+  }) => any;
+}
+interface CheckboxGroupEmits {
+  'update:value': (value: any[]) => void;
+  'change': (checkedValue: any[]) => void;
+  [key: string]: (...args: any[]) => void;
+}
+interface CheckboxGroupSlots {
+  default: () => any;
+  labelRender: (params: {
+    item: CheckboxOptionType;
+    index: number;
+  }) => any;
+}
+declare const CheckboxGroup: vue247.DefineSetupFnComponent<CheckboxGroupProps, CheckboxGroupEmits, SlotsType<CheckboxGroupSlots>, CheckboxGroupProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue247.PublicProps>;
+//#endregion
+export { AbstractCheckboxGroupProps, CheckboxGroup, CheckboxGroupEmits, CheckboxGroupProps, CheckboxGroupSlots, CheckboxOptionType };

package/dist/checkbox/Group.js

@@ -0,0 +1,141 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import style_default from "./style/index.js";
+import { useGroupContextProvider } from "./GroupContext.js";
+import Checkbox_default from "./Checkbox.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { omit } from "es-toolkit";
+
+//#region src/checkbox/Group.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CheckboxGroup = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const { prefixCls, direction } = useBaseConfig("checkbox", props);
+	const value = shallowRef(props?.value ?? props?.defaultValue ?? []);
+	const registeredValues = shallowRef([]);
+	watch(() => props.value, () => {
+		value.value = props?.value ?? [];
+	});
+	const memoizedOptions = computed(() => {
+		return (props?.options ?? []).map((option) => {
+			if (typeof option === "string" || typeof option === "number") return {
+				label: option,
+				value: option
+			};
+			return option;
+		});
+	});
+	const cancelValue = (val) => {
+		registeredValues.value = registeredValues.value.filter((v) => v !== val);
+	};
+	const registerValue = (val) => {
+		registeredValues.value = [...registeredValues.value, val];
+	};
+	const toggleOption = (option) => {
+		const optionIndex = value.value.indexOf(option.value);
+		const newValue = [...value.value];
+		if (optionIndex === -1) newValue.push(option.value);
+		else newValue.splice(optionIndex, 1);
+		value.value = newValue;
+		const sortVals = newValue.filter((val) => registeredValues.value.includes(val)).sort((a, b) => {
+			return memoizedOptions.value.findIndex((opt) => opt.value === a) - memoizedOptions.value.findIndex((opt) => opt.value === b);
+		});
+		emit("change", sortVals);
+		emit("update:value", sortVals);
+	};
+	const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useGroupContextProvider(computed(() => {
+		return {
+			toggleOption,
+			value: value.value,
+			disabled: props.disabled,
+			name: props.name,
+			registerValue,
+			cancelValue
+		};
+	}));
+	return () => {
+		const { options = [], rootClass } = props;
+		const restProps = omit(props, [
+			"options",
+			"rootClass",
+			"defaultValue",
+			"prefixCls"
+		]);
+		const children = slots?.default?.();
+		const { restAttrs, className, style } = getAttrStyleAndClass(attrs);
+		const labelRender = slots?.labelRender ?? props?.labelRender;
+		const childrenNode = options.length ? memoizedOptions.value.map((option, index) => {
+			const _label = labelRender ? labelRender({
+				item: option,
+				index
+			}) : option.label;
+			return createVNode(Checkbox_default, mergeProps({
+				"prefixCls": prefixCls.value,
+				"key": option.value.toString(),
+				"disabled": "disabled" in option ? option.disabled : restProps.disabled,
+				"value": option.value,
+				"checked": value.value.includes(option.value)
+			}, { onChange: option.onChange }, {
+				"class": clsx(`${groupPrefixCls.value}-item`, option.class),
+				"style": option.style,
+				"title": option.title,
+				"id": option.id,
+				"required": option.required
+			}), _isSlot(_label) ? _label : { default: () => [_label] });
+		}) : children;
+		const classString = clsx(groupPrefixCls.value, { [`${groupPrefixCls.value}-rtl`]: direction.value === "rtl" }, className, rootClass, cssVarCls.value, rootCls.value, hashId.value);
+		return createVNode("div", mergeProps({
+			"class": classString,
+			"style": style
+		}, restAttrs), [childrenNode]);
+	};
+}, {
+	emits: ["update:value", "change"],
+	props: /* @__PURE__ */ mergeDefaults({
+		name: {
+			type: String,
+			required: false
+		},
+		defaultValue: {
+			type: Array,
+			required: false
+		},
+		value: {
+			type: Array,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, { options: [] }),
+	name: "ACheckboxGroup",
+	inheritAttrs: false
+});
+var Group_default = CheckboxGroup;
+
+//#endregion
+export { Group_default as default };

package/dist/checkbox/GroupContext.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+
+//#region src/checkbox/GroupContext.tsx
+const GroupContextKey = Symbol("GroupContext");
+function useGroupContextProvider(value) {
+	provide(GroupContextKey, value);
+}
+function useGroupContext() {
+	return inject(GroupContextKey, void 0);
+}
+
+//#endregion
+export { useGroupContext, useGroupContextProvider };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxEmits, CheckboxProps, CheckboxSlots, InternalCheckbox } from "./Checkbox.js";
+import { CheckboxGroup, CheckboxGroupEmits, CheckboxGroupProps, CheckboxGroupSlots, CheckboxOptionType } from "./Group.js";

package/dist/checkbox/index.js

@@ -0,0 +1,12 @@
+import Checkbox_default from "./Checkbox.js";
+import Group_default from "./Group.js";
+
+//#region src/checkbox/index.tsx
+Checkbox_default.install = (app) => {
+	app.component(Checkbox_default.name, Checkbox_default);
+	app.component(Group_default.name, Group_default);
+};
+var checkbox_default = Checkbox_default;
+
+//#endregion
+export { checkbox_default as default };

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

@@ -0,0 +1,8 @@
+import "../../theme/internal.js";
+import "vue";
+import "@antdv-next/cssinjs";
+
+//#region src/checkbox/style/index.d.ts
+interface ComponentToken {}
+//#endregion
+export { ComponentToken };