@zboson/ui 0.0.0-stage → 0.0.2

package/dist/collapse/Collapse.js

@@ -0,0 +1,199 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs } from "../_util/tools.js";
+import initCollapseMotion from "../_util/motion.js";
+import { resolveSlotsNode } from "../_util/vnode/index.js";
+import { checkRenderNode, cloneElement } from "../_util/vueNode.js";
+import CollapsePanel, { COLLAPSE_PANEL_MARK } from "./CollapsePanel.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+import { RightOutlined } from "@zboson/icons";
+import { omit } from "es-toolkit";
+import VcCollapse from "@v-c/collapse";
+//#region src/collapse/Collapse.tsx
+const Collapse = /* @__PURE__ */ defineComponent((props, { attrs, emit, slots }) => {
+	const { class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, direction, prefixCls, getPrefixCls, expandIcon } = useComponentBaseConfig("collapse", props, ["expandIcon"]);
+	const { styles, classes } = toPropsRefs(props, "styles", "classes");
+	const mergedSize = useSize((ctxSize) => props?.size ?? ctxSize ?? "middle");
+	const rootPrefixCls = getPrefixCls();
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const mergedPlacement = computed(() => props.expandIconPlacement ?? "start");
+	const mergedProps = computed(() => ({
+		...props,
+		size: mergedSize.value,
+		bordered: props.bordered ?? true,
+		expandIconPlacement: mergedPlacement.value
+	}));
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const renderExpandIcon = (panelProps = {}) => {
+		const mergedExpandIcon = slots?.expandIcon ?? props?.expandIcon ?? expandIcon.value;
+		const iconIsInteractive = panelProps.collapsible === "header" || panelProps.collapsible === "icon";
+		const icon = typeof mergedExpandIcon === "function" ? mergedExpandIcon?.(panelProps) : createVNode(RightOutlined, mergeProps({ "rotate": panelProps.isActive ? direction.value === "rtl" ? -90 : 90 : void 0 }, iconIsInteractive ? { "aria-label": panelProps.isActive ? "expanded" : "collapsed" } : { "aria-hidden": "true" }), null);
+		return cloneElement(icon, () => {
+			return { class: classNames(icon.props?.class, `${prefixCls.value}-arrow`) };
+		});
+	};
+	const openMotion = computed(() => {
+		return {
+			...initCollapseMotion(rootPrefixCls),
+			appear: false
+		};
+	});
+	const sourceItems = computed(() => {
+		if (props.items) return props.items;
+		return resolveSlotsNode(slots, "default", void 0, COLLAPSE_PANEL_MARK).map((item) => {
+			return {
+				...item,
+				label: item.header ?? item.label,
+				content: item.content ?? item.children
+			};
+		});
+	});
+	return () => {
+		const { bordered, ghost, rootClass, destroyOnHidden } = props;
+		const collapseClassName = classNames(`${prefixCls.value}-icon-placement-${mergedPlacement.value}`, {
+			[`${prefixCls.value}-borderless`]: !bordered,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-ghost`]: !!ghost,
+			[`${prefixCls.value}-${mergedSize.value}`]: mergedSize.value !== "middle"
+		}, contextClassName.value, attrs.class, rootClass, hashId.value, cssVarCls.value, mergedClassNames.value.root);
+		const labelRender = slots?.labelRender ?? props?.labelRender;
+		const contentRender = slots?.contentRender ?? props?.contentRender;
+		const items = sourceItems.value.map((item, index) => {
+			const { classes: itemClasses, content: itemContent, ...restItem } = item;
+			const label = checkRenderNode(labelRender ? labelRender?.({
+				item,
+				index
+			}) : item.label);
+			const children = checkRenderNode(contentRender ? contentRender?.({
+				item,
+				index
+			}) : itemContent);
+			const _item = {
+				...restItem,
+				classNames: itemClasses
+			};
+			if (label) _item.label = label;
+			if (children) _item.children = children;
+			return _item;
+		});
+		return createVNode(VcCollapse, mergeProps({ "openMotion": openMotion.value }, omit(attrs, ["class", "style"]), omit(props, [
+			"rootClass",
+			"items",
+			"expandIconPlacement",
+			"classes",
+			"styles"
+		]), {
+			"class": collapseClassName,
+			"prefixCls": prefixCls.value,
+			"style": [mergedStyles.value.root, attrs.style],
+			"expandIcon": renderExpandIcon,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"onChange": (key) => {
+				emit("update:activeKey", key);
+				emit("change", key);
+			},
+			"destroyOnHidden": destroyOnHidden,
+			"items": items
+		}), null);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		activeKey: {
+			type: [
+				Array,
+				String,
+				Number
+			],
+			required: false
+		},
+		defaultActiveKey: {
+			type: [
+				Array,
+				String,
+				Number
+			],
+			required: false
+		},
+		accordion: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		expandIcon: {
+			type: Function,
+			required: false
+		},
+		expandIconPlacement: {
+			type: String,
+			required: false
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		collapsible: {
+			type: String,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		contentRender: {
+			type: Function,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		}
+	}, {
+		expandIconPlacement: "start",
+		bordered: true
+	}),
+	emits: ["update:activeKey", "change"],
+	name: "ACollapse",
+	inheritAttrs: false
+});
+Collapse.install = (app) => {
+	app.component(Collapse.name, Collapse);
+	app.component(CollapsePanel.name, CollapsePanel);
+};
+//#endregion
+export { Collapse as default };

package/dist/collapse/CollapsePanel.d.ts

@@ -0,0 +1,28 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { CollapseSemanticClassNames, CollapseSemanticStyles } from "./Collapse.js";
+import { CSSProperties, SlotsType } from "vue";
+//#region src/collapse/CollapsePanel.d.ts
+type CollapsibleType = 'header' | 'icon' | 'disabled';
+declare const COLLAPSE_PANEL_MARK = "_ANTDV_NEXT_COLLAPSE_PANEL";
+interface CollapsePanelProps {
+  key: string | number;
+  class?: string;
+  style?: CSSProperties;
+  header?: VueNode;
+  showArrow?: boolean;
+  prefixCls?: string;
+  forceRender?: boolean;
+  id?: string;
+  extra?: VueNode;
+  collapsible?: CollapsibleType;
+  classes?: Partial<CollapseSemanticClassNames>;
+  styles?: Partial<CollapseSemanticStyles>;
+}
+interface CollapsePanelSlots {
+  default?: () => any;
+  header?: () => any;
+  extra?: () => any;
+}
+declare const CollapsePanel: import("vue").DefineSetupFnComponent<CollapsePanelProps, EmptyEmit, SlotsType<CollapsePanelSlots>, CollapsePanelProps, import("vue").PublicProps>;
+//#endregion
+export { COLLAPSE_PANEL_MARK, CollapsePanelProps, CollapsePanelSlots, CollapsibleType, CollapsePanel as default };

package/dist/collapse/CollapsePanel.js

@@ -0,0 +1,80 @@
+import { defineComponent } from "vue";
+//#region src/collapse/CollapsePanel.tsx
+const COLLAPSE_PANEL_MARK = "_ANTDV_NEXT_COLLAPSE_PANEL";
+const CollapsePanel = /* @__PURE__ */ defineComponent(() => {
+	return () => null;
+}, {
+	props: {
+		key: {
+			type: [String, Number],
+			required: true
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		header: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		forceRender: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		collapsible: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: Object,
+			required: false
+		},
+		styles: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ACollapsePanel",
+	inheritAttrs: false
+});
+CollapsePanel[COLLAPSE_PANEL_MARK] = true;
+//#endregion
+export { COLLAPSE_PANEL_MARK, CollapsePanel as default };

package/dist/collapse/index.d.ts

@@ -0,0 +1,3 @@
+import Collapse, { CollapseProps } from "./Collapse.js";
+import CollapsePanel, { CollapsePanelProps, CollapsePanelSlots } from "./CollapsePanel.js";
+export { CollapsePanel, type CollapsePanelProps, type CollapsePanelSlots, type CollapseProps, Collapse as default };

package/dist/collapse/index.js

@@ -0,0 +1,7 @@
+import CollapsePanel from "./CollapsePanel.js";
+import Collapse from "./Collapse.js";
+//#region src/collapse/index.tsx
+Collapse.Panel = CollapsePanel;
+var collapse_default = Collapse;
+//#endregion
+export { CollapsePanel, collapse_default as default };

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

@@ -0,0 +1,74 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+import { CSSObject } from "@zboson/cssinjs";
+//#region src/collapse/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 折叠面板头部内边距
+   * @descEN Padding of header
+   */
+  headerPadding: CSSProperties['padding'];
+  /**
+   * @desc 小号折叠面板头部内边距
+   * @descEN Padding of small header
+   */
+  headerPaddingSM: CSSProperties['padding'];
+  /**
+   * @desc 大号折叠面板头部内边距
+   * @descEN Padding of large header
+   */
+  headerPaddingLG: CSSProperties['padding'];
+  /**
+   * @desc 折叠面板头部背景
+   * @descEN Background of header
+   */
+  headerBg: string;
+  /**
+   * @desc 折叠面板内容内边距
+   * @descEN Padding of content
+   */
+  contentPadding: CSSProperties['padding'];
+  /**
+   * @desc 小号折叠面板内容内边距
+   * @descEN Padding of small content
+   */
+  contentPaddingSM: CSSProperties['padding'];
+  /**
+   * @desc 大号折叠面板内容内边距
+   * @descEN Padding of large content
+   */
+  contentPaddingLG: CSSProperties['padding'];
+  /**
+   * @desc 折叠面板内容背景
+   * @descEN Background of content
+   */
+  contentBg: string;
+  /**
+   * @desc 简约风格折叠面板的内容内边距
+   * @descEN Padding of content in borderless style
+   */
+  borderlessContentPadding: CSSProperties['padding'];
+  /**
+   * @desc 简约风格折叠面板的内容背景
+   * @descEN Background of content in borderless style
+   */
+  borderlessContentBg: string;
+}
+type CollapseToken = FullToken<'Collapse'> & {
+  /**
+   * @desc 折叠面板边框圆角
+   * @descEN Border radius of collapse panel
+   */
+  collapsePanelBorderRadius: number;
+};
+declare const genBaseStyle: GenerateStyle<CollapseToken, CSSObject>;
+declare const prepareComponentToken: GetDefaultToken<'Collapse'>;
+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, genBaseStyle, prepareComponentToken };

package/dist/collapse/style/index.js

@@ -0,0 +1,175 @@
+import { genFocusStyle, resetComponent, resetIcon } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import genCollapseMotion from "../../style/motion/collapse.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/collapse/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, contentBg, padding, headerBg, headerPadding, headerPaddingSM, headerPaddingLG, collapsePanelBorderRadius, lineWidth, lineType, colorBorder, colorText, colorTextHeading, colorTextDisabled, fontSizeLG, lineHeight, lineHeightLG, marginSM, paddingSM, paddingLG, paddingXS, motionDurationSlow, fontSizeIcon, contentPadding, contentPaddingSM, contentPaddingLG, fontHeight, fontHeightLG } = token;
+	const borderBase = `${unit(lineWidth)} ${lineType} ${colorBorder}`;
+	return { [componentCls]: {
+		...resetComponent(token),
+		backgroundColor: headerBg,
+		border: borderBase,
+		borderRadius: collapsePanelBorderRadius,
+		"&-rtl": { direction: "rtl" },
+		[`& > ${componentCls}-item`]: {
+			borderBottom: borderBase,
+			"&:first-child": { [`
+            &,
+            & > ${componentCls}-header`]: { borderRadius: `${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)} 0 0` } },
+			"&:last-child": { [`
+            &,
+            & > ${componentCls}-header`]: { borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}` } },
+			[`> ${componentCls}-header`]: {
+				position: "relative",
+				display: "flex",
+				flexWrap: "nowrap",
+				alignItems: "flex-start",
+				padding: headerPadding,
+				color: colorTextHeading,
+				lineHeight,
+				cursor: "pointer",
+				transition: `all ${motionDurationSlow}, visibility 0s`,
+				...genFocusStyle(token),
+				[`> ${componentCls}-title`]: { flex: "auto" },
+				[`${componentCls}-expand-icon`]: {
+					height: fontHeight,
+					display: "flex",
+					alignItems: "center",
+					marginInlineEnd: marginSM
+				},
+				[`${componentCls}-arrow`]: {
+					...resetIcon(),
+					fontSize: fontSizeIcon,
+					transition: `transform ${motionDurationSlow}`,
+					svg: { transition: `transform ${motionDurationSlow}` }
+				},
+				[`${componentCls}-title`]: {
+					marginInlineEnd: "auto",
+					"> svg": {
+						display: "inline-block",
+						verticalAlign: "middle",
+						marginBlockEnd: "0.2em"
+					}
+				}
+			},
+			[`${componentCls}-collapsible-header`]: {
+				cursor: "default",
+				[`${componentCls}-title`]: {
+					flex: "none",
+					cursor: "pointer"
+				},
+				[`${componentCls}-expand-icon`]: { cursor: "pointer" }
+			},
+			[`${componentCls}-collapsible-icon`]: {
+				cursor: "unset",
+				[`${componentCls}-expand-icon`]: { cursor: "pointer" }
+			}
+		},
+		[`${componentCls}-panel`]: {
+			color: colorText,
+			backgroundColor: contentBg,
+			borderTop: borderBase,
+			[`& > ${componentCls}-body`]: { padding: contentPadding },
+			"&-hidden": { display: "none" }
+		},
+		"&-small": { [`> ${componentCls}-item`]: {
+			[`> ${componentCls}-header`]: {
+				padding: headerPaddingSM,
+				[`> ${componentCls}-expand-icon`]: { marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal() }
+			},
+			[`> ${componentCls}-panel > ${componentCls}-body`]: { padding: contentPaddingSM }
+		} },
+		"&-large": { [`> ${componentCls}-item`]: {
+			fontSize: fontSizeLG,
+			lineHeight: lineHeightLG,
+			[`> ${componentCls}-header`]: {
+				padding: headerPaddingLG,
+				[`> ${componentCls}-expand-icon`]: {
+					height: fontHeightLG,
+					marginInlineStart: token.calc(paddingLG).sub(padding).equal()
+				}
+			},
+			[`> ${componentCls}-panel > ${componentCls}-body`]: { padding: contentPaddingLG }
+		} },
+		[`${componentCls}-item:last-child`]: {
+			borderBottom: 0,
+			[`> ${componentCls}-panel`]: { borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}` }
+		},
+		[`& ${componentCls}-item-disabled > ${componentCls}-header`]: { [`
+          &,
+          & > .arrow
+        `]: {
+			color: colorTextDisabled,
+			cursor: "not-allowed"
+		} },
+		[`&${componentCls}-icon-placement-end`]: { [`& > ${componentCls}-item`]: { [`> ${componentCls}-header`]: { [`${componentCls}-expand-icon`]: {
+			order: 1,
+			marginInlineEnd: 0,
+			marginInlineStart: marginSM
+		} } } }
+	} };
+};
+const genArrowStyle = (token) => {
+	const { componentCls } = token;
+	const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow`;
+	return { [`${componentCls}-rtl`]: { [fixedSelector]: { transform: `rotate(180deg)` } } };
+};
+const genBorderlessStyle = (token) => {
+	const { componentCls, headerBg, borderlessContentPadding, borderlessContentBg, colorBorder } = token;
+	return { [`${componentCls}-borderless`]: {
+		backgroundColor: headerBg,
+		border: 0,
+		[`> ${componentCls}-item`]: { borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${colorBorder}` },
+		[`
+        > ${componentCls}-item:last-child,
+        > ${componentCls}-item:last-child ${componentCls}-header
+      `]: { borderRadius: 0 },
+		[`> ${componentCls}-item:last-child`]: { borderBottom: 0 },
+		[`> ${componentCls}-item > ${componentCls}-panel`]: {
+			backgroundColor: borderlessContentBg,
+			borderTop: 0
+		},
+		[`> ${componentCls}-item > ${componentCls}-panel > ${componentCls}-body`]: { padding: borderlessContentPadding }
+	} };
+};
+const genGhostStyle = (token) => {
+	const { componentCls, paddingSM } = token;
+	return { [`${componentCls}-ghost`]: {
+		backgroundColor: "transparent",
+		border: 0,
+		[`> ${componentCls}-item`]: {
+			borderBottom: 0,
+			[`> ${componentCls}-panel`]: {
+				backgroundColor: "transparent",
+				border: 0,
+				[`> ${componentCls}-body`]: { paddingBlock: paddingSM }
+			}
+		}
+	} };
+};
+const prepareComponentToken = (token) => ({
+	headerPadding: `${unit(token.paddingSM)} ${unit(token.padding)}`,
+	headerPaddingSM: `${unit(token.paddingXS)} ${unit(token.paddingSM)} ${unit(token.paddingXS)} ${unit(token.paddingXS)}`,
+	headerPaddingLG: `${unit(token.padding)} ${unit(token.paddingLG)} ${unit(token.padding)} ${unit(token.padding)}`,
+	headerBg: token.colorFillAlter,
+	contentPadding: `${unit(token.padding)} ${unit(16)}`,
+	contentPaddingSM: token.paddingSM,
+	contentPaddingLG: token.paddingLG,
+	contentBg: token.colorBgContainer,
+	borderlessContentPadding: `${unit(token.paddingXXS)} ${unit(16)} ${unit(token.padding)}`,
+	borderlessContentBg: "transparent"
+});
+var style_default = genStyleHooks("Collapse", (token) => {
+	const collapseToken = mergeToken(token, { collapsePanelBorderRadius: token.borderRadiusLG });
+	return [
+		genBaseStyle(collapseToken),
+		genBorderlessStyle(collapseToken),
+		genGhostStyle(collapseToken),
+		genArrowStyle(collapseToken),
+		genCollapseMotion(collapseToken)
+	];
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, genBaseStyle, prepareComponentToken };

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

@@ -0,0 +1,17 @@
+import { ColorPickerEmits, ColorPickerProps, ColorPickerSlots } from "./interface.js";
+import { SlotsType } from "vue";
+//#region src/color-picker/ColorPicker.d.ts
+interface InternalColorPickerProps extends ColorPickerProps, ColorPickerEmitsProps {}
+interface ColorPickerEmitsProps {
+  onChange?: ColorPickerEmits['change'];
+  onClear?: ColorPickerEmits['clear'];
+  onChangeComplete?: ColorPickerEmits['changeComplete'];
+  onOpenChange?: ColorPickerEmits['openChange'];
+  'onUpdate:open'?: ColorPickerEmits['update:open'];
+  onFormatChange?: ColorPickerEmits['formatChange'];
+  'onUpdate:value'?: ColorPickerEmits['update:value'];
+  'onUpdate:format'?: ColorPickerEmits['update:format'];
+}
+declare const ColorPicker: import("vue").DefineSetupFnComponent<InternalColorPickerProps, ColorPickerEmits, SlotsType<ColorPickerSlots>, InternalColorPickerProps, import("vue").PublicProps>;
+//#endregion
+export { ColorPickerEmitsProps, InternalColorPickerProps, ColorPicker as default };