@zboson/ui 0.0.0-stage → 0.0.2

package/dist/radio/interface.d.ts

@@ -0,0 +1,114 @@
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import { Orientation } from "../_util/hooks/useOrientation.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { AbstractCheckboxProps, CheckboxEmits } from "../checkbox/Checkbox.js";
+import { AbstractCheckboxGroupProps, CheckboxOptionType } from "../checkbox/Group.js";
+import { CSSProperties } from "vue";
+//#region src/radio/interface.d.ts
+type RadioGroupButtonStyle = 'outline' | 'solid';
+type RadioGroupOptionType = 'default' | 'button';
+interface RadioGroupSemanticClassNames {
+  root?: string;
+  item?: string;
+  itemIcon?: string;
+  itemLabel?: string;
+}
+interface RadioGroupSemanticStyles {
+  root?: CSSProperties;
+  item?: CSSProperties;
+  itemIcon?: CSSProperties;
+  itemLabel?: CSSProperties;
+}
+type RadioGroupClassNamesType = SemanticClassNamesType<RadioGroupProps, RadioGroupSemanticClassNames>;
+type RadioGroupStylesType = SemanticStylesType<RadioGroupProps, RadioGroupSemanticStyles>;
+interface RadioGroupProps extends AbstractCheckboxGroupProps {
+  defaultValue?: any;
+  value?: any;
+  size?: SizeType;
+  disabled?: boolean;
+  name?: string;
+  id?: string;
+  optionType?: RadioGroupOptionType;
+  orientation?: Orientation;
+  buttonStyle?: RadioGroupButtonStyle;
+  block?: boolean;
+  vertical?: boolean;
+  labelRender?: (params: {
+    item: CheckboxOptionType;
+    index: number;
+  }) => any;
+  classes?: RadioGroupClassNamesType;
+  styles?: RadioGroupStylesType;
+  'onUpdate:value'?: (value: any) => void;
+}
+interface RadioGroupEmits {
+  'change': (e: RadioChangeEvent) => void;
+  'mouseenter': (e: MouseEvent) => void;
+  'mouseleave': (e: MouseEvent) => void;
+  'focus': (e: FocusEvent) => void;
+  'blur': (e: FocusEvent) => void;
+}
+interface RadioGroupSlots {
+  default: () => any;
+  labelRender: (params: {
+    item: CheckboxOptionType;
+    index: number;
+  }) => any;
+}
+interface RadioGroupContextProps {
+  onChange: (e: RadioChangeEvent) => void;
+  value: any;
+  disabled?: boolean;
+  name?: string;
+  /**
+   * Control the appearance for Radio to display as button or not
+   *
+   * @default 'default'
+   * @internal
+   */
+  optionType?: RadioGroupOptionType;
+  block?: boolean;
+  classes?: RadioSemanticClassNames;
+  styles?: RadioSemanticStyles;
+}
+type RadioSemanticName = keyof RadioSemanticClassNames & keyof RadioSemanticStyles;
+interface RadioSemanticClassNames {
+  root?: string;
+  icon?: string;
+  label?: string;
+}
+interface RadioSemanticStyles {
+  root?: CSSProperties;
+  icon?: CSSProperties;
+  label?: CSSProperties;
+}
+type RadioClassNamesType = SemanticClassNamesType<RadioProps, RadioSemanticClassNames>;
+type RadioStylesType = SemanticStylesType<RadioProps, RadioSemanticStyles>;
+interface RadioProps extends AbstractCheckboxProps {
+  /**
+   * Control the appearance for Radio to display as button or not
+   *
+   * @default 'default'
+   * @internal
+   */
+  optionType?: RadioGroupOptionType;
+  classes?: RadioClassNamesType;
+  styles?: RadioStylesType;
+}
+interface RadioEmits extends CheckboxEmits {}
+interface RadioSlots {
+  default?: () => any;
+}
+interface RadioChangeEventTarget extends RadioProps {
+  checked: boolean;
+}
+interface RadioChangeEvent {
+  target: RadioChangeEventTarget;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: MouseEvent;
+}
+type RadioOptionTypeContextProps = RadioGroupOptionType;
+//#endregion
+export { RadioChangeEvent, RadioChangeEventTarget, RadioClassNamesType, RadioEmits, RadioGroupButtonStyle, RadioGroupClassNamesType, RadioGroupContextProps, RadioGroupEmits, RadioGroupOptionType, RadioGroupProps, RadioGroupSemanticClassNames, RadioGroupSemanticStyles, RadioGroupSlots, RadioGroupStylesType, RadioOptionTypeContextProps, RadioProps, RadioSemanticClassNames, RadioSemanticName, RadioSemanticStyles, RadioSlots, RadioStylesType };

package/dist/radio/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/radio/radio.d.ts

@@ -0,0 +1,19 @@
+import { RadioEmits, RadioProps, RadioSlots } from "./interface.js";
+import { SlotsType } from "vue";
+//#region src/radio/radio.d.ts
+interface InternalRadioProps extends RadioProps, RadioEmitsProps {}
+interface RadioEmitsProps {
+  onChange?: RadioEmits['change'];
+  'onUpdate:checked'?: RadioEmits['update:checked'];
+  'onUpdate:value'?: RadioEmits['update:value'];
+  onMouseenter?: RadioEmits['mouseenter'];
+  onMouseleave?: RadioEmits['mouseleave'];
+  onKeypress?: RadioEmits['keypress'];
+  onKeydown?: RadioEmits['keydown'];
+  onFocus?: RadioEmits['focus'];
+  onBlur?: RadioEmits['blur'];
+  onClick?: RadioEmits['click'];
+}
+declare const InternalRadio: import("vue").DefineSetupFnComponent<InternalRadioProps, RadioEmits, SlotsType<RadioSlots>, InternalRadioProps, import("vue").PublicProps>;
+//#endregion
+export { InternalRadioProps, RadioEmitsProps, InternalRadio as default };

package/dist/radio/radio.js

@@ -0,0 +1,241 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { useComponentBaseConfig } from "../config-provider/context.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 { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { TARGET_CLS } from "../_util/wave/interface.js";
+import wave_default from "../_util/wave/index.js";
+import { checkRenderNode } from "../_util/vueNode.js";
+import { useRadioGroupContext, useRadioOptionTypeContext } from "./context.js";
+import useBubbleLock from "../checkbox/useBubbleLock.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, toRef } 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/radio/radio.tsx
+const InternalRadio = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs, emit }) => {
+	const groupContext = useRadioGroupContext();
+	const radioOptionTypeContext = useRadioOptionTypeContext();
+	const { prefixCls: radioPrefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("radio", props);
+	const innerRef = shallowRef();
+	const formItemInputContext = useFormItemInputContext();
+	if (isDev) devUseWarning("Radio")(!props.optionType, "usage", "`optionType` is only support in RadioGroup.");
+	const onChange = (e) => {
+		emit("change", e);
+		groupContext?.value?.onChange?.(e);
+	};
+	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
+	const isButtonType = computed(() => (groupContext?.value?.optionType || radioOptionTypeContext?.value) === "button");
+	const prefixCls = computed(() => isButtonType.value ? `${radioPrefixCls.value}-button` : radioPrefixCls.value);
+	const rootCls = useCSSVarCls(radioPrefixCls);
+	const [hashId, cssVarCls] = style_default(radioPrefixCls, rootCls);
+	const disabled = useDisabledContext();
+	const radioProps = computed(() => {
+		const _radioProps = { ...omit(props, [
+			"prefixCls",
+			"classes",
+			"styles",
+			"title",
+			"rootClass"
+		]) };
+		_radioProps.onChange = onChange;
+		if (groupContext?.value) {
+			_radioProps.name = groupContext.value.name;
+			_radioProps.checked = props.value === groupContext.value.value;
+			_radioProps.disabled = _radioProps.disabled ?? groupContext.value.disabled;
+		}
+		_radioProps.disabled = _radioProps.disabled ?? disabled.value;
+		return _radioProps;
+	});
+	const mergedChecked = computed(() => {
+		if (groupContext?.value) return props.value === groupContext.value?.value;
+		return radioProps.value.checked;
+	});
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			...radioProps.value,
+			disabled: radioProps.value.disabled,
+			checked: mergedChecked.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const groupClassNames = toRef(() => groupContext?.value?.classes);
+	const groupStyles = toRef(() => groupContext?.value?.styles);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, groupClassNames, classes), useToArr(contextStyles, contextStyleRoot, groupStyles, styles), useToProps(mergedProps));
+	const [onLabelClick, onInputClick] = useBubbleLock((e) => {
+		emit("click", e);
+	});
+	expose({
+		blur: () => innerRef.value?.blur?.(),
+		focus: () => innerRef.value?.focus?.(),
+		input: computed(() => innerRef.value?.input)
+	});
+	return () => {
+		const { rootClass, title } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const wrapperClassString = clsx(`${prefixCls.value}-wrapper`, {
+			[`${prefixCls.value}-wrapper-checked`]: mergedChecked.value,
+			[`${prefixCls.value}-wrapper-disabled`]: radioProps.value.disabled,
+			[`${prefixCls.value}-wrapper-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext?.value?.isFormItemInput,
+			[`${prefixCls.value}-wrapper-block`]: !!groupContext?.value?.block
+		}, contextClassName.value, className, rootClass, mergedClassNames.value.root, hashId.value, cssVarCls.value, rootCls.value);
+		const children = checkRenderNode(filterEmpty(slots?.default?.() ?? []));
+		return createVNode(wave_default, {
+			"component": "Radio",
+			"disabled": radioProps.value.disabled
+		}, { default: () => [createVNode("label", mergeProps(restAttrs, {
+			"class": wrapperClassString,
+			"style": {
+				...mergedStyles.value.root,
+				...style
+			},
+			"onMouseenter": (e) => {
+				emit("mouseenter", e);
+			},
+			"onMouseleave": (e) => {
+				emit("mouseleave", e);
+			},
+			"title": title,
+			"onClick": onLabelClick
+		}), [createVNode(VcCheckbox, mergeProps(radioProps.value, {
+			"class": clsx(mergedClassNames.value.icon, { [TARGET_CLS]: !isButtonType.value }),
+			"checked": mergedChecked.value,
+			"style": mergedStyles.value.icon,
+			"type": "radio",
+			"prefixCls": prefixCls.value,
+			"ref": innerRef,
+			"onClick": onInputClick
+		}, { "onUpdate:checked": (checked) => {
+			emit("update:checked", checked);
+		} }), null), children ? createVNode("span", {
+			"class": clsx(`${prefixCls.value}-label`, mergedClassNames.value.label),
+			"style": mergedStyles.value.label
+		}, [children]) : null])] });
+	};
+}, {
+	props: {
+		optionType: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		defaultChecked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		checked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		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,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		skipGroup: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		checkedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		unCheckedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"change",
+		"update:checked",
+		"update:value",
+		"mouseenter",
+		"mouseleave",
+		"keypress",
+		"keydown",
+		"focus",
+		"blur",
+		"click"
+	],
+	name: "ARadio",
+	inheritAttrs: false
+});
+//#endregion
+export { InternalRadio as default };

package/dist/radio/radioButton.d.ts

@@ -0,0 +1,20 @@
+import { AbstractCheckboxProps, CheckboxEmits, CheckboxSlots } from "../checkbox/Checkbox.js";
+import { SlotsType } from "vue";
+//#region src/radio/radioButton.d.ts
+type RadioButtonProps = AbstractCheckboxProps;
+interface RadioButtonEmitsProps {
+  onChange?: CheckboxEmits['change'];
+  'onUpdate:checked'?: CheckboxEmits['update:checked'];
+  'onUpdate:value'?: CheckboxEmits['update:value'];
+  onMouseenter?: CheckboxEmits['mouseenter'];
+  onMouseleave?: CheckboxEmits['mouseleave'];
+  onKeypress?: CheckboxEmits['keypress'];
+  onKeydown?: CheckboxEmits['keydown'];
+  onFocus?: CheckboxEmits['focus'];
+  onBlur?: CheckboxEmits['blur'];
+  onClick?: CheckboxEmits['click'];
+}
+interface InternalRadioButtonProps extends RadioButtonProps, RadioButtonEmitsProps {}
+declare const RadioButton: import("vue").DefineSetupFnComponent<InternalRadioButtonProps, CheckboxEmits, SlotsType<CheckboxSlots>, InternalRadioButtonProps, import("vue").PublicProps>;
+//#endregion
+export { InternalRadioButtonProps, RadioButtonEmitsProps, RadioButtonProps, RadioButton as default };

package/dist/radio/radioButton.js

@@ -0,0 +1,120 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useRadioOptionTypeContextProvider } from "./context.js";
+import InternalRadio from "./radio.js";
+import { createVNode, defineComponent, mergeProps, ref } from "vue";
+//#region src/radio/radioButton.tsx
+const RadioButton = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const { prefixCls } = useComponentBaseConfig("radio", props);
+	useRadioOptionTypeContextProvider(ref("button"));
+	return () => {
+		return createVNode(InternalRadio, mergeProps({ "prefixCls": prefixCls.value }, attrs, props), slots);
+	};
+}, {
+	props: {
+		defaultChecked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		checked: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		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,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		skipGroup: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		checkedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		unCheckedValue: {
+			type: [
+				Boolean,
+				String,
+				Number,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"change",
+		"update:checked",
+		"update:value",
+		"mouseenter",
+		"mouseleave",
+		"keypress",
+		"keydown",
+		"focus",
+		"blur",
+		"click"
+	],
+	name: "ARadioButton",
+	inheritAttrs: false
+});
+//#endregion
+export { RadioButton as default };

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

@@ -0,0 +1,87 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/radio/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 单选框大小
+   * @descEN Radio size
+   */
+  radioSize: number;
+  /**
+   * @desc 单选框圆点大小
+   * @descEN Size of Radio dot
+   */
+  dotSize: number;
+  /**
+   * @desc 单选框圆点禁用颜色
+   * @descEN Color of disabled Radio dot
+   */
+  dotColorDisabled: string;
+  /**
+   * @desc 单选框按钮背景色
+   * @descEN Background color of Radio button
+   */
+  buttonBg: string;
+  /**
+   * @desc 单选框按钮选中背景色
+   * @descEN Background color of checked Radio button
+   */
+  buttonCheckedBg: string;
+  /**
+   * @desc 单选框按钮文本颜色
+   * @descEN Color of Radio button text
+   */
+  buttonColor: string;
+  /**
+   * @desc 单选框按钮横向内间距
+   * @descEN Horizontal padding of Radio button
+   */
+  buttonPaddingInline: number;
+  /**
+   * @desc 单选框按钮选中并禁用时的背景色
+   * @descEN Background color of checked and disabled Radio button
+   */
+  buttonCheckedBgDisabled: string;
+  /**
+   * @desc 单选框按钮选中并禁用时的文本颜色
+   * @descEN Color of checked and disabled Radio button text
+   */
+  buttonCheckedColorDisabled: string;
+  /**
+   * @desc 单选框实色按钮选中时的文本颜色
+   * @descEN Color of checked solid Radio button text
+   */
+  buttonSolidCheckedColor: string;
+  /**
+   * @desc 单选框实色按钮选中时的背景色
+   * @descEN Background color of checked solid Radio button text
+   */
+  buttonSolidCheckedBg: string;
+  /**
+   * @desc 单选框实色按钮选中时的悬浮态背景色
+   * @descEN Background color of checked solid Radio button text when hover
+   */
+  buttonSolidCheckedHoverBg: string;
+  /**
+   * @desc 单选框实色按钮选中时的激活态背景色
+   * @descEN Background color of checked solid Radio button text when active
+   */
+  buttonSolidCheckedActiveBg: string;
+  /**
+   * @desc 单选框右间距
+   * @descEN Margin right of Radio button
+   */
+  wrapperMarginInlineEnd: number;
+  /** @internal */
+  radioColor: string;
+  /** @internal */
+  radioBgColor: string;
+}
+declare const prepareComponentToken: GetDefaultToken<'Radio'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };