antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/typography/hooks/useCopyClick.js

@@ -0,0 +1,60 @@
+import { getTextByNode } from "../../_util/vueNode.js";
+import toList_default from "../../_util/toList.js";
+import copy_default from "../../_util/copy.js";
+import { onBeforeUnmount, shallowRef, unref } from "vue";
+
+//#region src/typography/hooks/useCopyClick.ts
+function useCopyClick({ copyConfig, getText }) {
+	const copied = shallowRef(false);
+	const copyLoading = shallowRef(false);
+	const copyIdRef = shallowRef(null);
+	const cleanCopyId = () => {
+		if (copyIdRef.value) {
+			clearTimeout(copyIdRef.value);
+			copyIdRef.value = null;
+		}
+	};
+	const getClipboardText = async () => {
+		const config = unref(copyConfig);
+		if (typeof config?.text === "function") return config.text();
+		if (config?.text !== void 0) return config.text;
+		const origin = getText?.();
+		return toList_default(origin, true).map((item) => {
+			item = getTextByNode(item);
+			if (typeof item === "string" || typeof item === "number") return String(item);
+			return "";
+		}).join("");
+	};
+	onBeforeUnmount(cleanCopyId);
+	const onClick = async (e) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		copyLoading.value = true;
+		try {
+			const text = await getClipboardText();
+			const config = unref(copyConfig);
+			const copyOptions = {};
+			if (config?.format) copyOptions.format = config.format;
+			await copy_default(text == null ? "" : String(text), copyOptions);
+			copyLoading.value = false;
+			copied.value = true;
+			cleanCopyId();
+			copyIdRef.value = setTimeout(() => {
+				copied.value = false;
+			}, 3e3);
+			unref(copyConfig)?.onCopy?.(e);
+		} catch (error) {
+			copyLoading.value = false;
+			throw error;
+		}
+	};
+	return {
+		copied,
+		copyLoading,
+		onClick
+	};
+}
+var useCopyClick_default = useCopyClick;
+
+//#endregion
+export { useCopyClick_default as default };

package/dist/typography/hooks/useMergedConfig.js

@@ -0,0 +1,16 @@
+import { computed, unref } from "vue";
+
+//#region src/typography/hooks/useMergedConfig.ts
+function useMergedConfig(propConfig, templateConfig) {
+	const support = computed(() => !!unref(propConfig));
+	return [support, computed(() => {
+		const current = unref(propConfig);
+		return {
+			...templateConfig,
+			...support.value && typeof current === "object" ? current : null
+		};
+	})];
+}
+
+//#endregion
+export { useMergedConfig as default };

package/dist/typography/hooks/usePrevious.js

@@ -0,0 +1,17 @@
+import { onMounted, ref, watch } from "vue";
+
+//#region src/typography/hooks/usePrevious.ts
+function usePrevious(value) {
+	const previous = ref();
+	onMounted(() => {
+		previous.value = value();
+	});
+	watch(value, (val) => {
+		previous.value = val;
+	});
+	return previous;
+}
+var usePrevious_default = usePrevious;
+
+//#endregion
+export { usePrevious_default as default };

package/dist/typography/hooks/useTooltipProps.js

@@ -0,0 +1,22 @@
+import { computed, isVNode, unref } from "vue";
+
+//#region src/typography/hooks/useTooltipProps.ts
+function useTooltipProps(tooltip, editConfigText, children) {
+	return computed(() => {
+		const mergedTooltip = unref(tooltip);
+		const mergedEditText = unref(editConfigText);
+		const mergedChildren = unref(children);
+		if (mergedTooltip === true) return { title: mergedEditText ?? mergedChildren };
+		if (isVNode(mergedTooltip)) return { title: mergedTooltip };
+		if (typeof mergedTooltip === "object") return {
+			title: mergedEditText ?? mergedChildren,
+			...mergedTooltip
+		};
+		if (mergedTooltip === void 0 || mergedTooltip === null) return { title: mergedTooltip };
+		return { title: mergedTooltip };
+	});
+}
+var useTooltipProps_default = useTooltipProps;
+
+//#endregion
+export { useTooltipProps_default as default };

package/dist/typography/index.d.ts

@@ -0,0 +1,30 @@
+import { BlockProps, TypographyBaseEmits, TypographySlots } from "./interface.js";
+import { Text as Text$1, TextProps } from "./Text.js";
+import { Link, LinkProps } from "./Link.js";
+import { Title, TitleProps } from "./Title.js";
+import { Paragraph, ParagraphProps } from "./Paragraph.js";
+import { Typography } from "./Typography.js";
+import * as vue184 from "vue";
+
+//#region src/typography/index.d.ts
+
+declare const TypographyText: vue184.DefineSetupFnComponent<TextProps, TypographyBaseEmits, vue184.SlotsType<TypographySlots>, TextProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue184.PublicProps>;
+declare const TypographyLink: vue184.DefineSetupFnComponent<LinkProps, TypographyBaseEmits, vue184.SlotsType<TypographySlots>, LinkProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue184.PublicProps>;
+declare const TypographyTitle: vue184.DefineSetupFnComponent<TitleProps, TypographyBaseEmits, vue184.SlotsType<TypographySlots>, TitleProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue184.PublicProps>;
+declare const TypographyParagraph: vue184.DefineSetupFnComponent<ParagraphProps, TypographyBaseEmits, vue184.SlotsType<TypographySlots>, ParagraphProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue184.PublicProps>;
+declare const Typography$1: typeof Typography & {
+  Text: typeof Text$1;
+  Link: typeof Link;
+  Title: typeof Title;
+  Paragraph: typeof Paragraph;
+};
+//#endregion
+export { Typography$1 as Typography, TypographyLink, TypographyParagraph, TypographyText, TypographyTitle };

package/dist/typography/index.js

@@ -0,0 +1,27 @@
+import Typography_default from "./Typography.js";
+import Link_default from "./Link.js";
+import Paragraph_default from "./Paragraph.js";
+import Text_default from "./Text.js";
+import Title_default from "./Title.js";
+
+//#region src/typography/index.tsx
+const TypographyText = Text_default;
+const TypographyLink = Link_default;
+const TypographyTitle = Title_default;
+const TypographyParagraph = Paragraph_default;
+const Typography = Typography_default;
+Typography.Text = Text_default;
+Typography.Link = Link_default;
+Typography.Title = Title_default;
+Typography.Paragraph = Paragraph_default;
+Typography.install = (app) => {
+	app.component(Typography.name, Typography);
+	app.component(Text_default.name, Text_default);
+	app.component(Link_default.name, Link_default);
+	app.component(Title_default.name, Title_default);
+	app.component(Paragraph_default.name, Paragraph_default);
+};
+var typography_default = Typography;
+
+//#endregion
+export { TypographyLink, TypographyParagraph, TypographyText, TypographyTitle, typography_default as default };

package/dist/typography/interface.d.ts

@@ -0,0 +1,95 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { TooltipProps } from "../tooltip/index.js";
+import { ComponentBaseProps, DirectionType } from "../config-provider/context.js";
+import { TextAreaProps } from "@v-c/textarea";
+
+//#region src/typography/interface.d.ts
+type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
+interface CopyConfig {
+  text?: string | (() => string | Promise<string>);
+  onCopy?: (event?: MouseEvent) => void;
+  icon?: VueNode | VueNode[];
+  tooltips?: VueNode | VueNode[] | false;
+  format?: 'text/plain' | 'text/html';
+  tabIndex?: number;
+}
+interface EditConfig {
+  text?: string;
+  editing?: boolean;
+  icon?: VueNode;
+  tooltip?: VueNode;
+  onStart?: () => void;
+  onChange?: (value: string) => void;
+  onCancel?: () => void;
+  onEnd?: () => void;
+  maxLength?: number;
+  autoSize?: boolean | TextAreaProps['autoSize'];
+  triggerType?: ('icon' | 'text')[];
+  enterIcon?: VueNode;
+  tabIndex?: number;
+}
+interface EllipsisConfig {
+  rows?: number;
+  expandable?: boolean | 'collapsible';
+  suffix?: string;
+  symbol?: VueNode | ((expanded: boolean) => VueNode);
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onExpand?: (e: MouseEvent, info: {
+    expanded: boolean;
+  }) => void;
+  onEllipsis?: (ellipsis: boolean) => void;
+  tooltip?: VueNode | TooltipProps;
+}
+type TypographySemantic = 'root' | 'copy' | 'edit' | 'expand' | 'content';
+type TypographyClassNamesType = SemanticClassNamesType<BlockProps, TypographySemantic>;
+type TypographyStylesType = SemanticStylesType<BlockProps, TypographySemantic>;
+interface BlockProps extends ComponentBaseProps {
+  title?: string;
+  editable?: boolean | EditConfig;
+  copyable?: boolean | CopyConfig;
+  type?: BaseType;
+  disabled?: boolean;
+  ellipsis?: boolean | EllipsisConfig;
+  code?: boolean;
+  mark?: boolean;
+  underline?: boolean;
+  delete?: boolean;
+  strong?: boolean;
+  keyboard?: boolean;
+  italic?: boolean;
+  component?: keyof HTMLElementTagNameMap | string;
+  direction?: DirectionType;
+  classes?: TypographyClassNamesType;
+  styles?: TypographyStylesType;
+  id?: string;
+  [key: `data-${string}`]: string | number | undefined;
+}
+interface TypographySlots {
+  default?: () => any;
+}
+interface TypographyBaseEmits {
+  'click': (e: MouseEvent) => void;
+  'expand': (expanded: boolean, e: MouseEvent) => void;
+  'copy': (e?: MouseEvent) => void;
+  'edit:start': () => void;
+  'edit:change': (value: string) => void;
+  'edit:cancel': () => void;
+  'edit:end': () => void;
+  'update:expanded': (expanded: boolean) => void;
+  'update:editing': (editing: boolean) => void;
+  [key: string]: (...args: any[]) => any;
+}
+interface TypographyBaseProps extends ComponentBaseProps {
+  prefixCls?: string;
+  rootClass?: string;
+  component?: keyof HTMLElementTagNameMap | string;
+  direction?: DirectionType;
+  classes?: TypographyClassNamesType;
+  styles?: TypographyStylesType;
+  title?: string;
+}
+//#endregion
+export { BlockProps, EllipsisConfig, TypographyBaseEmits, TypographyBaseProps, TypographySlots };

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

@@ -0,0 +1,19 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/typography/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 标题上间距
+   * @descEN Margin top of title
+   */
+  titleMarginTop: number | string;
+  /**
+   * @desc 标题下间距
+   * @descEN Margin bottom of title
+   */
+  titleMarginBottom: number | string;
+}
+//#endregion
+export { ComponentToken };

package/dist/typography/style/index.js

@@ -0,0 +1,78 @@
+import { operationUnit } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles } from "./mixins.js";
+
+//#region src/typography/style/index.ts
+const genTypographyStyle = (token) => {
+	const { componentCls, titleMarginTop } = token;
+	return { [componentCls]: {
+		"color": token.colorText,
+		"wordBreak": "break-word",
+		"lineHeight": token.lineHeight,
+		[`&${componentCls}-secondary`]: { color: token.colorTextDescription },
+		[`&${componentCls}-success`]: { color: token.colorSuccessText },
+		[`&${componentCls}-warning`]: { color: token.colorWarningText },
+		[`&${componentCls}-danger`]: {
+			"color": token.colorErrorText,
+			"a&:active, a&:focus": { color: token.colorErrorTextActive },
+			"a&:hover": { color: token.colorErrorTextHover }
+		},
+		[`&${componentCls}-disabled`]: {
+			color: token.colorTextDisabled,
+			cursor: "not-allowed",
+			userSelect: "none"
+		},
+		[`
+        div&,
+        p
+      `]: { marginBottom: "1em" },
+		...getTitleStyles(token),
+		[`
+      & + h1${componentCls},
+      & + h2${componentCls},
+      & + h3${componentCls},
+      & + h4${componentCls},
+      & + h5${componentCls}
+      `]: { marginTop: titleMarginTop },
+		[`
+      div,
+      ul,
+      li,
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5`]: { [`
+        + h1,
+        + h2,
+        + h3,
+        + h4,
+        + h5
+        `]: { marginTop: titleMarginTop } },
+		...getResetStyles(token),
+		...getLinkStyles(token),
+		[`
+        ${componentCls}-expand,
+        ${componentCls}-collapse,
+        ${componentCls}-edit,
+        ${componentCls}-copy
+      `]: {
+			...operationUnit(token),
+			marginInlineStart: token.marginXXS
+		},
+		...getEditableStyles(token),
+		...getCopyableStyles(token),
+		...getEllipsisStyles(),
+		"&-rtl": { direction: "rtl" }
+	} };
+};
+const prepareComponentToken = () => ({
+	titleMarginTop: "1.2em",
+	titleMarginBottom: "0.5em"
+});
+var style_default = genStyleHooks("Typography", genTypographyStyle, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/typography/style/mixins.js

@@ -0,0 +1,189 @@
+import { operationUnit } from "../../style/index.js";
+import { gold } from "@ant-design/colors";
+
+//#region src/typography/style/mixins.ts
+function getTitleStyle(fontSize, lineHeight, color, token) {
+	const { titleMarginBottom, fontWeightStrong } = token;
+	return {
+		marginBottom: titleMarginBottom,
+		color,
+		fontWeight: fontWeightStrong,
+		fontSize,
+		lineHeight
+	};
+}
+const getTitleStyles = (token) => {
+	const headings = [
+		1,
+		2,
+		3,
+		4,
+		5
+	];
+	const styles = {};
+	headings.forEach((headingLevel) => {
+		styles[`
+      h${headingLevel}&,
+      div&-h${headingLevel},
+      div&-h${headingLevel} > textarea,
+      h${headingLevel}
+    `] = getTitleStyle(token[`fontSizeHeading${headingLevel}`], token[`lineHeightHeading${headingLevel}`], token.colorTextHeading, token);
+	});
+	return styles;
+};
+const getLinkStyles = (token) => {
+	const { componentCls } = token;
+	return { "a&, a": {
+		...operationUnit(token),
+		userSelect: "text",
+		[`&[disabled], &${componentCls}-disabled`]: {
+			"color": token.colorTextDisabled,
+			"cursor": "not-allowed",
+			"&:active, &:hover": { color: token.colorTextDisabled },
+			"&:active": { pointerEvents: "none" }
+		}
+	} };
+};
+const getResetStyles = (token) => ({
+	"code": {
+		margin: "0 0.2em",
+		paddingInline: "0.4em",
+		paddingBlock: "0.2em 0.1em",
+		fontSize: "85%",
+		fontFamily: token.fontFamilyCode,
+		background: "rgba(150, 150, 150, 0.1)",
+		border: "1px solid rgba(100, 100, 100, 0.2)",
+		borderRadius: 3
+	},
+	"kbd": {
+		margin: "0 0.2em",
+		paddingInline: "0.4em",
+		paddingBlock: "0.15em 0.1em",
+		fontSize: "90%",
+		fontFamily: token.fontFamilyCode,
+		background: "rgba(150, 150, 150, 0.06)",
+		border: "1px solid rgba(100, 100, 100, 0.2)",
+		borderBottomWidth: 2,
+		borderRadius: 3
+	},
+	"mark": {
+		padding: 0,
+		backgroundColor: gold[2]
+	},
+	"u, ins": {
+		textDecoration: "underline",
+		textDecorationSkipInk: "auto"
+	},
+	"s, del": { textDecoration: "line-through" },
+	"strong": { fontWeight: token.fontWeightStrong },
+	"ul, ol": {
+		marginInline: 0,
+		marginBlock: "0 1em",
+		padding: 0,
+		li: {
+			marginInline: "20px 0",
+			marginBlock: 0,
+			paddingInline: "4px 0",
+			paddingBlock: 0
+		}
+	},
+	"ul": {
+		listStyleType: "circle",
+		ul: { listStyleType: "disc" }
+	},
+	"ol": { listStyleType: "decimal" },
+	"pre, blockquote": { margin: "1em 0" },
+	"pre": {
+		padding: "0.4em 0.6em",
+		whiteSpace: "pre-wrap",
+		wordWrap: "break-word",
+		background: "rgba(150, 150, 150, 0.1)",
+		border: "1px solid rgba(100, 100, 100, 0.2)",
+		borderRadius: 3,
+		fontFamily: token.fontFamilyCode,
+		code: {
+			display: "inline",
+			margin: 0,
+			padding: 0,
+			fontSize: "inherit",
+			fontFamily: "inherit",
+			background: "transparent",
+			border: 0
+		}
+	},
+	"blockquote": {
+		paddingInline: "0.6em 0",
+		paddingBlock: 0,
+		borderInlineStart: "4px solid rgba(100, 100, 100, 0.2)",
+		opacity: .85
+	}
+});
+const getEditableStyles = (token) => {
+	const { componentCls, paddingSM } = token;
+	const inputShift = paddingSM;
+	return { "&-edit-content": {
+		"position": "relative",
+		"div&": {
+			insetInlineStart: token.calc(token.paddingSM).mul(-1).equal(),
+			insetBlockStart: token.calc(inputShift).div(-2).add(1).equal(),
+			marginBottom: token.calc(inputShift).div(2).sub(2).equal()
+		},
+		[`${componentCls}-edit-content-confirm`]: {
+			position: "absolute",
+			insetInlineEnd: token.calc(token.marginXS).add(2).equal(),
+			insetBlockEnd: token.marginXS,
+			color: token.colorIcon,
+			fontWeight: "normal",
+			fontSize: token.fontSize,
+			fontStyle: "normal",
+			pointerEvents: "none"
+		},
+		"textarea": {
+			margin: "0!important",
+			MozTransition: "none",
+			height: "1em"
+		}
+	} };
+};
+const getCopyableStyles = (token) => ({
+	[`${token.componentCls}-copy-success`]: { [`
+    &,
+    &:hover,
+    &:focus`]: { color: token.colorSuccess } },
+	[`${token.componentCls}-copy-icon-only`]: { marginInlineStart: 0 }
+});
+function getEllipsisStyles() {
+	return {
+		[`
+  a&-ellipsis,
+  span&-ellipsis
+  `]: {
+			display: "inline-block",
+			maxWidth: "100%"
+		},
+		"&-ellipsis-single-line": {
+			"whiteSpace": "nowrap",
+			"overflow": "hidden",
+			"textOverflow": "ellipsis",
+			"a&, span&": { verticalAlign: "bottom" },
+			"> code": {
+				paddingBlock: 0,
+				maxWidth: "calc(100% - 1.2em)",
+				display: "inline-block",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				verticalAlign: "bottom",
+				boxSizing: "content-box"
+			}
+		},
+		"&-ellipsis-multiple-line": {
+			display: "-webkit-box",
+			overflow: "hidden",
+			WebkitLineClamp: 3,
+			WebkitBoxOrient: "vertical"
+		}
+	};
+}
+
+//#endregion
+export { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles };

package/dist/upload/Dragger.d.ts

@@ -0,0 +1,13 @@
+import { UploadProps, UploadSlots } from "./interface.js";
+import * as vue291 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/upload/Dragger.d.ts
+type DraggerProps<T = any> = UploadProps<T> & {
+  height?: number;
+};
+declare const Dragger: vue291.DefineSetupFnComponent<DraggerProps<any>, {}, SlotsType<UploadSlots<any>>, UploadProps<any> & {
+  height?: number;
+} & {}, vue291.PublicProps>;
+//#endregion
+export { Dragger, DraggerProps };