@zboson/ui 0.0.0-stage → 0.0.2

package/dist/card/CardMeta.d.ts

@@ -0,0 +1,42 @@
+import { EmptyEmit, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { CSSProperties, SlotsType } from "vue";
+//#region src/card/CardMeta.d.ts
+type CardMetaSemanticName = keyof CardMetaSemanticClassNames & keyof CardMetaSemanticStyles;
+interface CardMetaSemanticClassNames {
+  root?: string;
+  section?: string;
+  avatar?: string;
+  title?: string;
+  description?: string;
+}
+interface CardMetaSemanticStyles {
+  root?: CSSProperties;
+  section?: CSSProperties;
+  avatar?: CSSProperties;
+  title?: CSSProperties;
+  description?: CSSProperties;
+}
+type CardMetaClassNamesType = SemanticClassNamesType<CardMetaProps, CardMetaSemanticClassNames>;
+type CardMetaStylesType = SemanticStylesType<CardMetaProps, CardMetaSemanticStyles>;
+interface CardMetaProps {
+  prefixCls?: string;
+  avatar?: VueNode;
+  title?: VueNode;
+  description?: VueNode;
+  classes?: CardMetaClassNamesType;
+  styles?: CardMetaStylesType;
+}
+interface CardMetaRef {
+  nativeElement: HTMLDivElement;
+}
+interface CardMetaSlots {
+  avatar?: () => any;
+  title?: () => any;
+  description?: () => any;
+  default?: () => any;
+}
+declare const CardMeta: import("vue").DefineSetupFnComponent<CardMetaProps, EmptyEmit, SlotsType<CardMetaSlots>, CardMetaProps, import("vue").PublicProps>;
+//#endregion
+export { CardMetaClassNamesType, CardMetaProps, CardMetaRef, CardMetaSemanticClassNames, CardMetaSemanticName, CardMetaSemanticStyles, CardMetaSlots, CardMetaStylesType, CardMeta as default };

package/dist/card/CardMeta.js

@@ -0,0 +1,107 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { isRenderable } from "../_util/is.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+//#region src/card/CardMeta.tsx
+const CardMeta = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const { prefixCls, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("cardMeta", props, [], "card");
+	const { classes: cardMetaClassNames, styles } = toPropsRefs(props, "classes", "styles");
+	const metaPrefixCls = computed(() => `${prefixCls.value}-meta`);
+	const mergedProps = computed(() => props);
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, cardMetaClassNames), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const rootClassNames = clsx(metaPrefixCls.value, className, contextClassName.value, mergedClassNames.value?.root);
+		const rootStyles = {
+			...mergedStyles.value?.root,
+			...style
+		};
+		const avatarClassNames = clsx(`${metaPrefixCls.value}-avatar`, mergedClassNames.value?.avatar);
+		const titleClassNames = clsx(`${metaPrefixCls.value}-title`, mergedClassNames.value?.title);
+		const descriptionClassNames = clsx(`${metaPrefixCls.value}-description`, mergedClassNames.value?.description);
+		const sectionClassNames = clsx(`${metaPrefixCls.value}-section`, mergedClassNames.value?.section);
+		const avatar = getSlotPropsFnRun(slots, props, "avatar");
+		const title = getSlotPropsFnRun(slots, props, "title");
+		const description = getSlotPropsFnRun(slots, props, "description");
+		const avatarDom = isRenderable(avatar) ? createVNode("div", {
+			"class": avatarClassNames,
+			"style": mergedStyles.value.avatar
+		}, [avatar]) : null;
+		const titleDom = isRenderable(title) ? createVNode("div", {
+			"class": titleClassNames,
+			"style": mergedStyles.value.title
+		}, [title]) : null;
+		const descriptionDom = isRenderable(description) ? createVNode("div", {
+			"class": descriptionClassNames,
+			"style": mergedStyles.value.description
+		}, [description]) : null;
+		const metaDetail = titleDom || descriptionDom ? createVNode("div", {
+			"class": sectionClassNames,
+			"style": mergedStyles.value.section
+		}, [titleDom, descriptionDom]) : null;
+		return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
+			"class": rootClassNames,
+			"style": rootStyles
+		}), [avatarDom, metaDetail]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		avatar: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		}
+	},
+	name: "ACardMeta",
+	inheritAttrs: false
+});
+//#endregion
+export { CardMeta as default };

package/dist/card/index.d.ts

@@ -0,0 +1,4 @@
+import Card, { CardEmits, CardProps, CardSize, CardSlots, CardTabListType } from "./Card.js";
+import CardMeta, { CardMetaProps, CardMetaRef } from "./CardMeta.js";
+import CardGrid, { CardGridProps, CardGridRef } from "./CardGrid.js";
+export { type CardEmits, CardGrid, type CardGridProps, type CardGridRef, CardMeta, type CardMetaProps, type CardMetaRef, type CardProps, type CardSize, type CardSlots, type CardTabListType, Card as default };

package/dist/card/index.js

@@ -0,0 +1,14 @@
+import Card from "./Card.js";
+import CardGrid from "./CardGrid.js";
+import CardMeta from "./CardMeta.js";
+//#region src/card/index.tsx
+Card.Grid = CardGrid;
+Card.Meta = CardMeta;
+Card.install = (app) => {
+	app.component(Card.name, Card);
+	app.component(CardGrid.name, CardGrid);
+	app.component(CardMeta.name, CardMeta);
+};
+var card_default = Card;
+//#endregion
+export { CardGrid, CardMeta, card_default as default };

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

@@ -0,0 +1,78 @@
+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/card/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 卡片头部背景色
+   * @descEN Background color of card header
+   */
+  headerBg: string;
+  /**
+   * @desc 卡片头部文字大小
+   * @descEN Font size of card header
+   */
+  headerFontSize: number | string;
+  /**
+   * @desc 小号卡片头部文字大小
+   * @descEN Font size of small card header
+   */
+  headerFontSizeSM: number | string;
+  /**
+   * @desc 卡片头部高度
+   * @descEN Height of card header
+   */
+  headerHeight: number | string;
+  /**
+   * @desc 小号卡片头部高度
+   * @descEN Height of small card header
+   */
+  headerHeightSM: number | string;
+  /**
+   * @desc 小号卡片内边距
+   * @descEN Padding of small card body
+   */
+  bodyPaddingSM: number;
+  /**
+   * @desc 小号卡片头部内边距
+   * @descEN Padding of small card head
+   */
+  headerPaddingSM: number;
+  /**
+   * @desc 卡片内边距
+   * @descEN Padding of card body
+   */
+  bodyPadding: number;
+  /**
+   * @desc 卡片头部内边距
+   * @descEN Padding of card head
+   */
+  headerPadding: number;
+  /**
+   * @desc 操作区背景色
+   * @descEN Background color of card actions
+   */
+  actionsBg: string;
+  /**
+   * @desc 操作区每一项的外间距
+   * @descEN Margin of each item in card actions
+   */
+  actionsLiMargin: string;
+  /**
+   * @desc 内置标签页组件下间距
+   * @descEN Margin bottom of tabs component
+   */
+  tabsMarginBottom: number;
+  /**
+   * @desc 额外区文字颜色
+   * @descEN Text color of extra area
+   */
+  extraColor: string;
+}
+declare const prepareComponentToken: GetDefaultToken<'Card'>;
+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 };

package/dist/card/style/index.js

@@ -0,0 +1,266 @@
+import { clearFix, resetComponent, textEllipsis } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/card/style/index.ts
+const genCardHeadStyle = (token) => {
+	const { antCls, headerHeight, headerPadding, tabsMarginBottom } = token;
+	return {
+		display: "flex",
+		justifyContent: "center",
+		flexDirection: "column",
+		minHeight: headerHeight,
+		marginBottom: -1,
+		padding: `0 ${unit(headerPadding)}`,
+		color: token.colorTextHeading,
+		fontWeight: token.fontWeightStrong,
+		fontSize: token.headerFontSize,
+		background: token.headerBg,
+		borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorderSecondary}`,
+		borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
+		...clearFix(),
+		"&-wrapper": {
+			width: "100%",
+			display: "flex",
+			alignItems: "center"
+		},
+		"&-title": {
+			display: "inline-block",
+			flex: 1,
+			...textEllipsis,
+			[`> ${antCls}-typography`]: {
+				insetInlineStart: 0,
+				marginTop: 0,
+				marginBottom: 0
+			}
+		},
+		[`${antCls}-tabs-top`]: {
+			clear: "both",
+			marginBottom: tabsMarginBottom,
+			color: token.colorText,
+			fontWeight: 400,
+			fontSize: token.fontSize
+		}
+	};
+};
+const genCardGridStyle = (token) => {
+	const { cardPaddingBase, colorBorderSecondary, cardShadow, lineWidth } = token;
+	return {
+		width: "33.33%",
+		padding: cardPaddingBase,
+		border: 0,
+		borderRadius: 0,
+		boxShadow: `
+      ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary},
+      0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary},
+      ${unit(lineWidth)} ${unit(lineWidth)} 0 0 ${colorBorderSecondary},
+      ${unit(lineWidth)} 0 0 0 ${colorBorderSecondary} inset,
+      0 ${unit(lineWidth)} 0 0 ${colorBorderSecondary} inset;
+    `,
+		transition: `all ${token.motionDurationMid}`,
+		"&-hoverable:hover": {
+			position: "relative",
+			zIndex: 1,
+			boxShadow: cardShadow
+		}
+	};
+};
+const genCardActionsStyle = (token) => {
+	const { componentCls, iconCls, actionsLiMargin, cardActionsIconSize, colorBorderSecondary, actionsBg } = token;
+	return {
+		margin: 0,
+		padding: 0,
+		listStyle: "none",
+		background: actionsBg,
+		borderTop: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+		display: "flex",
+		borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
+		...clearFix(),
+		"& > li": {
+			margin: actionsLiMargin,
+			color: token.colorTextDescription,
+			textAlign: "center",
+			"> span": {
+				position: "relative",
+				display: "block",
+				minWidth: token.calc(token.cardActionsIconSize).mul(2).equal(),
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				cursor: "pointer",
+				"&:hover": {
+					color: token.colorPrimary,
+					transition: `color ${token.motionDurationMid}`
+				},
+				[`a:not(${componentCls}-btn), > ${iconCls}`]: {
+					display: "inline-block",
+					width: "100%",
+					color: token.colorIcon,
+					lineHeight: unit(token.fontHeight),
+					transition: `color ${token.motionDurationMid}`,
+					"&:hover": { color: token.colorPrimary }
+				},
+				[`> ${iconCls}`]: {
+					fontSize: cardActionsIconSize,
+					lineHeight: unit(token.calc(cardActionsIconSize).mul(token.lineHeight).equal())
+				}
+			},
+			"&:not(:last-child)": { borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}` }
+		}
+	};
+};
+const genCardMetaStyle = (token) => ({
+	margin: `${unit(token.calc(token.marginXXS).mul(-1).equal())} 0`,
+	display: "flex",
+	...clearFix(),
+	"&-avatar": { paddingInlineEnd: token.padding },
+	"&-section": {
+		overflow: "hidden",
+		flex: 1,
+		"> div:not(:last-child)": { marginBottom: token.marginXS }
+	},
+	"&-title": {
+		color: token.colorTextHeading,
+		fontWeight: token.fontWeightStrong,
+		fontSize: token.fontSizeLG,
+		...textEllipsis
+	},
+	"&-description": { color: token.colorTextDescription }
+});
+const genCardTypeInnerStyle = (token) => {
+	const { componentCls, colorFillAlter, headerPadding, bodyPadding } = token;
+	return {
+		[`${componentCls}-head`]: {
+			padding: `0 ${unit(headerPadding)}`,
+			background: colorFillAlter,
+			"&-title": { fontSize: token.fontSize }
+		},
+		[`${componentCls}-body`]: { padding: `${unit(token.padding)} ${unit(bodyPadding)}` }
+	};
+};
+const genCardLoadingStyle = (token) => {
+	const { componentCls } = token;
+	return {
+		overflow: "hidden",
+		[`${componentCls}-body`]: { userSelect: "none" }
+	};
+};
+const genCardStyle = (token) => {
+	const { componentCls, cardShadow, cardHeadPadding, colorBorderSecondary, boxShadowTertiary, bodyPadding, extraColor, motionDurationMid } = token;
+	return {
+		[componentCls]: {
+			...resetComponent(token),
+			position: "relative",
+			background: token.colorBgContainer,
+			borderRadius: token.borderRadiusLG,
+			[`&:not(${componentCls}-bordered)`]: { boxShadow: boxShadowTertiary },
+			[`${componentCls}-head`]: genCardHeadStyle(token),
+			[`${componentCls}-extra`]: {
+				marginInlineStart: "auto",
+				color: extraColor,
+				fontWeight: 400,
+				fontSize: token.fontSize
+			},
+			[`${componentCls}-body`]: {
+				padding: bodyPadding,
+				borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
+				"&:first-child": {
+					borderStartStartRadius: token.borderRadiusLG,
+					borderStartEndRadius: token.borderRadiusLG
+				},
+				"&:not(:last-child)": {
+					borderEndStartRadius: 0,
+					borderEndEndRadius: 0
+				}
+			},
+			[`${componentCls}-grid`]: genCardGridStyle(token),
+			[`${componentCls}-cover`]: { "> *": {
+				display: "block",
+				width: "100%",
+				borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`
+			} },
+			[`${componentCls}-actions`]: genCardActionsStyle(token),
+			[`${componentCls}-meta`]: genCardMetaStyle(token)
+		},
+		[`${componentCls}-bordered`]: {
+			border: `${unit(token.lineWidth)} ${token.lineType} ${colorBorderSecondary}`,
+			[`${componentCls}-cover`]: {
+				marginTop: -1,
+				marginInlineStart: -1,
+				marginInlineEnd: -1
+			}
+		},
+		[`${componentCls}-hoverable`]: {
+			cursor: "pointer",
+			transition: [`box-shadow`, `border-color`].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
+			"&:hover": {
+				borderColor: "transparent",
+				boxShadow: cardShadow
+			}
+		},
+		[`${componentCls}-contain-grid`]: {
+			borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0 `,
+			[`&:not(:has(> ${componentCls}-head))`]: { borderRadius: 0 },
+			[`${componentCls}-body`]: {
+				display: "flex",
+				flexWrap: "wrap"
+			},
+			[`&:not(${componentCls}-loading) ${componentCls}-body`]: {
+				marginBlockStart: token.calc(token.lineWidth).mul(-1).equal(),
+				marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
+				padding: 0
+			}
+		},
+		[`${componentCls}-contain-tabs`]: { [`> div${componentCls}-head`]: {
+			minHeight: 0,
+			[`${componentCls}-head-title, ${componentCls}-extra`]: { paddingTop: cardHeadPadding }
+		} },
+		[`${componentCls}-type-inner`]: genCardTypeInnerStyle(token),
+		[`${componentCls}-loading`]: genCardLoadingStyle(token),
+		[`${componentCls}-rtl`]: { direction: "rtl" }
+	};
+};
+const genCardSizeStyle = (token) => {
+	const { componentCls, bodyPaddingSM, headerPaddingSM, headerHeightSM, headerFontSizeSM } = token;
+	return {
+		[`${componentCls}-small`]: {
+			[`> ${componentCls}-head`]: {
+				minHeight: headerHeightSM,
+				padding: `0 ${unit(headerPaddingSM)}`,
+				fontSize: headerFontSizeSM,
+				[`> ${componentCls}-head-wrapper`]: { [`> ${componentCls}-extra`]: { fontSize: token.fontSize } }
+			},
+			[`> ${componentCls}-body`]: { padding: bodyPaddingSM }
+		},
+		[`${componentCls}-small${componentCls}-contain-tabs`]: { [`> ${componentCls}-head`]: { [`${componentCls}-head-title, ${componentCls}-extra`]: {
+			paddingTop: 0,
+			display: "flex",
+			alignItems: "center"
+		} } }
+	};
+};
+const prepareComponentToken = (token) => ({
+	headerBg: "transparent",
+	headerFontSize: token.fontSizeLG,
+	headerFontSizeSM: token.fontSize,
+	headerHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
+	headerHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
+	actionsBg: token.colorBgContainer,
+	actionsLiMargin: `${token.paddingSM}px 0`,
+	tabsMarginBottom: -token.padding - token.lineWidth,
+	extraColor: token.colorText,
+	bodyPaddingSM: 12,
+	headerPaddingSM: 12,
+	bodyPadding: token.bodyPadding ?? token.paddingLG,
+	headerPadding: token.headerPadding ?? token.paddingLG
+});
+var style_default = genStyleHooks("Card", (token) => {
+	const cardToken = mergeToken(token, {
+		cardShadow: token.boxShadowCard,
+		cardHeadPadding: token.padding,
+		cardPaddingBase: token.paddingLG,
+		cardActionsIconSize: token.fontSize
+	});
+	return [genCardStyle(cardToken), genCardSizeStyle(cardToken)];
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/carousel/index.d.ts

@@ -0,0 +1,56 @@
+import { VueNode } from "../_util/type.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { SlotsType } from "vue";
+import { SlickProps } from "@v-c/slick";
+//#region src/carousel/index.d.ts
+type CarouselEffect = 'scrollx' | 'fade';
+type DotPlacement = 'top' | 'bottom' | 'start' | 'end';
+interface CarouselProps extends Omit<SlickProps, 'prevArrow' | 'nextArrow' | 'dots' | 'className' | 'style' | 'dotsClass' | 'autoplay' | 'verticalSwiping' | 'onInit' | 'onReInit' | 'onEdge' | 'onSwipe' | 'onLazyLoad' | 'onLazyLoadError'>, ComponentBaseProps, CarouselEmitsProps {
+  effect?: CarouselEffect;
+  id?: string;
+  slickGoTo?: number;
+  /** @deprecated Please use `dotPlacement` instead  */
+  dotPosition?: DotPlacement | 'left' | 'right';
+  dotPlacement?: DotPlacement;
+  dots?: boolean | {
+    class?: string;
+  };
+  waitForAnimate?: boolean;
+  autoplay?: boolean | {
+    dotDuration?: boolean;
+  };
+  prevArrow?: VueNode;
+  nextArrow?: VueNode;
+}
+interface CarouselSlots {
+  default: () => any;
+  prevArrow: () => any;
+  nextArrow: () => any;
+}
+interface CarouselEmits {
+  init: NonNullable<SlickProps['onInit']>;
+  reInit: NonNullable<SlickProps['onReInit']>;
+  edge: NonNullable<SlickProps['onEdge']>;
+  swipe: NonNullable<SlickProps['onSwipe']>;
+  lazyLoad: NonNullable<SlickProps['onLazyLoad']>;
+  lazyLoadError: NonNullable<SlickProps['onLazyLoadError']>;
+}
+interface CarouselEmitsProps {
+  onInit?: CarouselEmits['init'];
+  onReInit?: CarouselEmits['reInit'];
+  onEdge?: CarouselEmits['edge'];
+  onSwipe?: CarouselEmits['swipe'];
+  onLazyLoad?: CarouselEmits['lazyLoad'];
+  onLazyLoadError?: CarouselEmits['lazyLoadError'];
+}
+interface CarouselRef {
+  nativeElement: HTMLDivElement;
+  goTo: (slide: number, dontAnimate?: boolean) => void;
+  next: () => void;
+  prev: () => void;
+  autoPlay: (playType?: 'update' | 'leave' | 'blur') => void;
+  innerSlider: any;
+}
+declare const Carousel: import("vue").DefineSetupFnComponent<CarouselProps, CarouselEmits, SlotsType<CarouselSlots>, CarouselProps, import("vue").PublicProps>;
+//#endregion
+export { CarouselEffect, CarouselEmits, CarouselEmitsProps, CarouselProps, CarouselRef, CarouselSlots, DotPlacement, Carousel as default };