@zboson/ui 0.0.0-stage → 0.0.2

package/dist/auto-complete/index.js

@@ -0,0 +1,598 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import genPurePanel from "../_util/PurePanel.js";
+import Select from "../select/index.js";
+import { Text, computed, createVNode, defineComponent, getCurrentInstance, isVNode, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { omit } from "es-toolkit";
+import { toArray } from "es-toolkit/compat";
+import { Option } from "@v-c/select";
+//#region src/auto-complete/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function isSelectOptionOrSelectOptGroup(child) {
+	return child?.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
+}
+const omitKeys = [
+	"dataSource",
+	"dropdownClassName",
+	"popupClassName",
+	"dropdownMatchSelectWidth",
+	"dropdownRender",
+	"dropdownStyle",
+	"classes",
+	"styles",
+	"popupRender",
+	"onOpenChange",
+	"onDropdownVisibleChange"
+];
+const InternalAutoComplete = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs, expose }) => {
+	const { prefixCls } = useComponentBaseConfig("select", props);
+	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
+	const instance = getCurrentInstance();
+	const selectRef = shallowRef();
+	expose({
+		focus: () => selectRef.value?.focus(),
+		blur: () => selectRef.value?.blur(),
+		scrollTo: (arg) => selectRef.value?.scrollTo(arg)
+	});
+	const mergedOnOpenChange = (open) => {
+		if (instance?.vnode.props?.onOpenChange) emit("openChange", open);
+		else emit("dropdownVisibleChange", open);
+	};
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			popupMatchSelectWidth: props.popupMatchSelectWidth ?? props.dropdownMatchSelectWidth,
+			popupRender: props.popupRender ?? props.dropdownRender
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(classes), useToArr(styles), useToProps(mergedProps), computed(() => ({ popup: { _default: "root" } })));
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const forwardedAttrs = omit(restAttrs, ["onOpenChange", "onDropdownVisibleChange"]);
+		const childNodes = toArray(filterEmpty(slots.default?.() ?? []));
+		const hasSelectOptions = !!childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0]);
+		let customizeInput;
+		if (childNodes.length === 1 && isVNode(childNodes[0]) && childNodes[0].type !== Text && !isSelectOptionOrSelectOptGroup(childNodes[0])) [customizeInput] = childNodes;
+		const getInputElement = customizeInput ? () => customizeInput : void 0;
+		const customizeInputPlaceholder = customizeInput?.props?.placeholder;
+		const forwardedSlots = Object.fromEntries(Object.entries(slots).filter(([key]) => key !== "default"));
+		let optionChildren = [];
+		if (hasSelectOptions) optionChildren = childNodes;
+		else if (props.dataSource) optionChildren = props.dataSource.map((item) => {
+			if (isVNode(item)) return item;
+			switch (typeof item) {
+				case "string": return createVNode(Option, {
+					"key": item,
+					"value": item
+				}, _isSlot(item) ? item : { default: () => [item] });
+				case "object": {
+					const { value: optionValue, text } = item;
+					return createVNode(Option, {
+						"key": optionValue,
+						"value": optionValue
+					}, _isSlot(text) ? text : { default: () => [text] });
+				}
+				default: return null;
+			}
+		});
+		optionChildren = filterEmpty(optionChildren);
+		if (isDev) {
+			const warning = devUseWarning("AutoComplete");
+			warning(!(customizeInput && props.size !== void 0), "usage", "You need to control style self instead of setting `size` when using customize input.");
+			Object.entries({
+				dropdownMatchSelectWidth: "popupMatchSelectWidth",
+				dropdownStyle: "styles.popup.root",
+				dropdownClassName: "classes.popup.root",
+				popupClassName: "classes.popup.root",
+				dropdownRender: "popupRender",
+				dataSource: "options"
+			}).forEach(([oldProp, newProp]) => {
+				warning.deprecated(!props[oldProp], oldProp, newProp);
+			});
+		}
+		const mergedPopupRender = props.popupRender ?? props.dropdownRender;
+		const mergedPopupMatchSelectWidth = props.popupMatchSelectWidth ?? props.dropdownMatchSelectWidth;
+		const finalClassNames = {
+			root: clsx(`${prefixCls.value}-auto-complete`, mergedClassNames.value.root, { [`${prefixCls.value}-customize`]: customizeInput }, className),
+			prefix: mergedClassNames.value.prefix,
+			input: mergedClassNames.value.input,
+			placeholder: mergedClassNames.value.placeholder,
+			content: mergedClassNames.value.content,
+			clear: mergedClassNames.value.clear,
+			popup: {
+				root: clsx(props.popupClassName, props.dropdownClassName, mergedClassNames.value.popup?.root),
+				list: mergedClassNames.value.popup?.list,
+				listItem: mergedClassNames.value.popup?.listItem
+			}
+		};
+		const finalStyles = {
+			root: mergedStyles.value.root,
+			prefix: mergedStyles.value.prefix,
+			input: mergedStyles.value.input,
+			placeholder: mergedStyles.value.placeholder,
+			content: mergedStyles.value.content,
+			clear: mergedStyles.value.clear,
+			popup: {
+				root: {
+					...props.dropdownStyle,
+					...mergedStyles?.value?.popup?.root
+				},
+				list: mergedStyles.value.popup?.list,
+				listItem: mergedStyles.value.popup?.listItem
+			}
+		};
+		const selectProps = omit(props, omitKeys);
+		selectProps.allowClear = props.allowClear ?? false;
+		if (selectProps.placeholder === void 0 && customizeInputPlaceholder !== void 0) selectProps.placeholder = customizeInputPlaceholder;
+		return createVNode(Select, mergeProps(forwardedAttrs, selectProps, {
+			onSelect: (value, option) => {
+				emit("select", value, option);
+			},
+			onClear: () => {
+				emit("clear");
+			},
+			onKeydown: (e) => {
+				emit("keydown", e);
+			},
+			onKeyup: (e) => {
+				emit("keyup", e);
+			},
+			onBlur: (e) => {
+				emit("blur", e);
+			},
+			onFocus: (e) => {
+				emit("focus", e);
+			},
+			onClick: (e) => {
+				emit("click", e);
+			},
+			onActive: (value) => {
+				emit("active", value);
+			},
+			onChange: (value, option) => {
+				emit("change", value, option);
+			},
+			onDeselect: (value, option) => {
+				emit("deselect", value, option);
+			},
+			onInputKeydown: (e) => {
+				emit("inputKeydown", e);
+			},
+			onMousedown: (e) => {
+				emit("mousedown", e);
+			},
+			onMouseleave: (e) => {
+				emit("mouseleave", e);
+			},
+			onMouseenter: (e) => {
+				emit("mouseenter", e);
+			},
+			onPopupScroll: (e) => {
+				emit("popupScroll", e);
+			},
+			onSearch: (value) => {
+				emit("search", value);
+			}
+		}, getInputElement ? { getInputElement } : {}, {
+			"ref": selectRef,
+			"prefixCls": prefixCls.value,
+			"classes": finalClassNames,
+			"styles": finalStyles,
+			"style": style,
+			"popupRender": mergedPopupRender,
+			"popupMatchSelectWidth": mergedPopupMatchSelectWidth,
+			"mode": Select.SECRET_COMBOBOX_MODE_DO_NOT_USE,
+			"suffixIcon": null,
+			"onOpenChange": mergedOnOpenChange
+		}, { "onUpdate:value": (value) => emit("update:value", value) }), {
+			default: () => [optionChildren],
+			...forwardedSlots
+		});
+	};
+}, {
+	props: {
+		dataSource: {
+			type: Array,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		popupClassName: {
+			type: String,
+			required: false
+		},
+		dropdownClassName: {
+			type: String,
+			required: false
+		},
+		dropdownMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		dropdownRender: {
+			type: Function,
+			required: false
+		},
+		popupRender: {
+			type: Function,
+			required: false
+		},
+		dropdownStyle: {
+			type: Object,
+			required: false
+		},
+		showSearch: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffixIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		backfill: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		searchValue: {
+			type: String,
+			required: false
+		},
+		autoClearSearchValue: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			required: false,
+			default: void 0
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		optionRender: {
+			type: Function,
+			required: false
+		},
+		defaultActiveFirstOption: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		virtual: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		listHeight: {
+			type: Number,
+			required: false
+		},
+		listItemHeight: {
+			type: Number,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		menuItemSelectedIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		value: { required: false },
+		defaultValue: { required: false },
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		tagRender: {
+			type: Function,
+			required: false
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		notFoundContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
+		choiceTransitionName: {
+			type: String,
+			required: false
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		maxTagTextLength: {
+			type: Number,
+			required: false
+		},
+		maxTagCount: {
+			type: [Number, String],
+			required: false
+		},
+		maxTagPlaceholder: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tokenSeparators: {
+			type: [Array, Function],
+			required: false
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		removeIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		animation: {
+			type: String,
+			required: false
+		},
+		transitionName: {
+			type: String,
+			required: false
+		},
+		popupStyle: {
+			type: Object,
+			required: false
+		},
+		popupAlign: {
+			type: Object,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		builtinPlacements: {
+			type: Object,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		showAction: {
+			type: Array,
+			required: false
+		},
+		components: {
+			type: Object,
+			required: false
+		}
+	},
+	emits: [
+		"openChange",
+		"dropdownVisibleChange",
+		"clear",
+		"keydown",
+		"keyup",
+		"blur",
+		"update:value",
+		"click",
+		"active",
+		"change",
+		"deselect",
+		"inputKeydown",
+		"mousedown",
+		"mouseleave",
+		"mouseenter",
+		"focus",
+		"popupScroll",
+		"select",
+		"search"
+	],
+	name: "AAutoComplete",
+	inheritAttrs: false
+});
+const AutoComplete = InternalAutoComplete;
+/* istanbul ignore next */
+const PurePanel = genPurePanel(InternalAutoComplete, "popupAlign", (props) => {
+	return omit(props, ["visible"]);
+});
+AutoComplete.Option = Option;
+AutoComplete._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+AutoComplete.install = (app) => {
+	app.component(AutoComplete.name, AutoComplete);
+	app.component("AAutoCompleteOption", Option);
+};
+//#endregion
+export { Option, AutoComplete as default };

package/dist/avatar/Avatar.d.ts

@@ -0,0 +1,42 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { AvatarSize } from "./AvatarContext.js";
+import { SlotsType } from "vue";
+//#region src/avatar/Avatar.d.ts
+interface AvatarProps extends ComponentBaseProps, AvatarEmitsProps {
+  /** Shape of avatar, options: `circle`, `square` */
+  shape?: 'circle' | 'square';
+  /**
+   * Size of avatar, options: `large`, `medium`, `small`
+   * or a custom number size
+   */
+  size?: AvatarSize;
+  gap?: number;
+  /** Src of image avatar */
+  src?: VueNode;
+  /** Srcset of image avatar */
+  srcSet?: string;
+  draggable?: boolean | 'true' | 'false';
+  /** Icon to be used in avatar */
+  icon?: VueNode;
+  alt?: string;
+  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+  onError?: () => boolean;
+}
+interface AvatarEmits {
+  click: (e: MouseEvent) => void;
+}
+interface AvatarEmitsProps {
+  onClick?: AvatarEmits['click'];
+}
+interface AvatarSlots {
+  icon: () => any;
+  src: () => any;
+  default: () => any;
+}
+interface AvatarRef {
+  nativeElement: HTMLSpanElement;
+}
+declare const Avatar: import("vue").DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps, import("vue").PublicProps>;
+//#endregion
+export { AvatarEmits, AvatarEmitsProps, AvatarProps, AvatarRef, AvatarSlots, Avatar as default };