@zboson/ui 0.0.0-stage → 0.0.2

package/dist/tree-select/style/index.d.ts

@@ -0,0 +1,10 @@
+import { TreeSharedToken } from "../../tree/style/index.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/internal.js";
+import { Ref } from "vue";
+//#region src/tree-select/style/index.d.ts
+interface ComponentToken extends TreeSharedToken {}
+declare const prepareComponentToken: GetDefaultToken<'TreeSelect'>;
+declare function useTreeSelectStyle(prefixCls: Ref<string>, treePrefixCls: Ref<string>, rootCls: Ref<string>): readonly [Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, useTreeSelectStyle as default, prepareComponentToken };

package/dist/tree-select/style/index.js

@@ -0,0 +1,35 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { getStyle } from "../../checkbox/style/index.js";
+import { genTreeStyle, initComponentToken } from "../../tree/style/index.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/tree-select/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, treePrefixCls, colorBgElevated } = token;
+	const treeCls = `.${treePrefixCls}`;
+	return [{ [`${componentCls}-dropdown`]: [
+		{ padding: `${unit(token.paddingXS)} ${unit(token.calc(token.paddingXS).div(2).equal())}` },
+		genTreeStyle(treePrefixCls, mergeToken(token, { colorBgContainer: colorBgElevated }), false),
+		{ [treeCls]: {
+			borderRadius: 0,
+			[`${treeCls}-list-holder-inner`]: {
+				alignItems: "stretch",
+				[`${treeCls}-treenode`]: { [`${treeCls}-node-content-wrapper`]: { flex: "auto" } }
+			}
+		} },
+		getStyle(`${treePrefixCls}-checkbox`, token),
+		{ "&-rtl": {
+			direction: "rtl",
+			[`${treeCls}-switcher${treeCls}-switcher_close`]: { [`${treeCls}-switcher-icon svg`]: { transform: "rotate(90deg)" } }
+		} }
+	] }];
+};
+const prepareComponentToken = initComponentToken;
+function useTreeSelectStyle(prefixCls, treePrefixCls, rootCls) {
+	return genStyleHooks("TreeSelect", (token) => {
+		const treeSelectToken = mergeToken(token, { treePrefixCls: treePrefixCls.value });
+		return genBaseStyle(treeSelectToken);
+	}, initComponentToken, { resetFont: false })(prefixCls, rootCls);
+}
+//#endregion
+export { useTreeSelectStyle as default, prepareComponentToken };

package/dist/typography/Base/CopyBtn.d.ts

@@ -0,0 +1,22 @@
+import { Locale } from "../../locale/index.js";
+import { CopyConfig } from "../interface.js";
+import { CSSProperties, SlotsType } from "vue";
+//#region src/typography/Base/CopyBtn.d.ts
+interface CopyBtnProps extends Omit<CopyConfig, 'onCopy'>, CopyBtnEmitsProps {
+  prefixCls: string;
+  copied: boolean;
+  locale: Locale['Text'];
+  iconOnly: boolean;
+  loading: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+interface CopyBtnEmits {
+  copy: (e: MouseEvent) => void;
+}
+interface CopyBtnEmitsProps {
+  onCopy?: CopyBtnEmits['copy'];
+}
+declare const CopyBtn: import("vue").DefineSetupFnComponent<CopyBtnProps, CopyBtnEmits, SlotsType<Record<string, never>>, CopyBtnProps, import("vue").PublicProps>;
+//#endregion
+export { CopyBtnEmits, CopyBtnEmitsProps, CopyBtnProps, CopyBtn as default };

package/dist/typography/Base/CopyBtn.js

@@ -0,0 +1,107 @@
+import InternalTooltip from "../../tooltip/index.js";
+import { getNode, toList } from "./util.js";
+import { createVNode, defineComponent } from "vue";
+import { classNames } from "@v-c/util";
+import { CheckOutlined, CopyOutlined, LoadingOutlined } from "@zboson/icons";
+//#region src/typography/Base/CopyBtn.tsx
+const CopyBtn = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const handleCopy = (e) => {
+		emit("copy", e);
+	};
+	return () => {
+		const tooltipNodes = toList(props.tooltips);
+		const iconNodes = toList(props.icon);
+		const { copied: copiedText, copy: copyText } = props.locale ?? {};
+		const systemStr = props.copied ? copiedText : copyText;
+		const copyTitle = getNode(tooltipNodes[props.copied ? 1 : 0], systemStr);
+		const ariaLabel = typeof copyTitle === "string" ? copyTitle : systemStr;
+		return createVNode(InternalTooltip, { "title": copyTitle }, { default: () => [createVNode("button", {
+			"type": "button",
+			"class": classNames(`${props.prefixCls}-copy`, {
+				[`${props.prefixCls}-copy-success`]: props.copied,
+				[`${props.prefixCls}-copy-icon-only`]: props.iconOnly
+			}, props.className),
+			"onClick": handleCopy,
+			"aria-label": ariaLabel,
+			"tabindex": props.tabIndex,
+			"style": props.style
+		}, [props.copied ? getNode(iconNodes[1], createVNode(CheckOutlined, null, null), true) : getNode(iconNodes[0], props.loading ? createVNode(LoadingOutlined, null, null) : createVNode(CopyOutlined, null, null), true)])] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		copied: {
+			type: Boolean,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		iconOnly: {
+			type: Boolean,
+			required: true
+		},
+		loading: {
+			type: Boolean,
+			required: true
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		text: {
+			type: [String, Function],
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tooltips: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		}
+	},
+	emits: ["copy"],
+	name: "TypographyCopyBtn",
+	inheritAttrs: false
+});
+CopyBtn.install = (app) => {
+	app.component(CopyBtn.name, CopyBtn);
+};
+//#endregion
+export { CopyBtn as default };

package/dist/typography/Base/Ellipsis.d.ts

@@ -0,0 +1,21 @@
+import { EmptyEmit, VueNode } from "../../_util/type.js";
+import { SlotsType } from "vue";
+//#region src/typography/Base/Ellipsis.d.ts
+interface EllipsisProps {
+  enableMeasure?: boolean;
+  text?: VueNode;
+  width: number;
+  rows: number;
+  onEllipsis: (isEllipsis: boolean) => void;
+  expanded: boolean;
+  /**
+   * Mark for misc update. Which will not affect ellipsis content length.
+   * e.g. tooltip content update.
+   */
+  miscDeps: any[];
+}
+declare const Ellipsis: import("vue").DefineSetupFnComponent<EllipsisProps, EmptyEmit, SlotsType<{
+  default?: (nodeList: any[], canEllipsis: boolean) => any;
+}>, EllipsisProps, import("vue").PublicProps>;
+//#endregion
+export { EllipsisProps, Ellipsis as default };

package/dist/typography/Base/Ellipsis.js

@@ -0,0 +1,243 @@
+import { normalizeStyle as normalizeStyle$1 } from "../../_util/styleUtils.js";
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { getTextNodeArr } from "../../_util/vueNode.js";
+import toList from "../../_util/toList.js";
+import { isValidText } from "./util.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, nextTick, shallowRef, watch, watchEffect } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/typography/Base/Ellipsis.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const MeasureText = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const spanRef = shallowRef();
+	expose({
+		isExceed: () => {
+			const span = spanRef.value;
+			return span.scrollHeight > span.clientHeight;
+		},
+		getHeight: () => spanRef.value?.clientHeight || 0
+	});
+	return () => {
+		return createVNode("span", {
+			"aria-hidden": true,
+			"ref": spanRef,
+			"style": {
+				position: "fixed",
+				display: "block",
+				left: 0,
+				top: 0,
+				pointerEvents: "none",
+				backgroundColor: "rgba(255, 0, 0, 0.65)",
+				...normalizeStyle$1(props.style) || {}
+			}
+		}, [slots.default?.()]);
+	};
+}, {
+	props: { style: {
+		type: Object,
+		required: false
+	} },
+	name: "TypographyMeasureText",
+	inheritAttrs: false
+});
+function getNodesLen(nodeList) {
+	return nodeList.reduce((totalLen, node) => totalLen + (isValidText(node) ? String(node).length : 1), 0);
+}
+function sliceNodes(nodeList, len) {
+	let currLen = 0;
+	const currentNodeList = [];
+	for (let i = 0; i < nodeList.length; i += 1) {
+		if (currLen === len) return currentNodeList;
+		const node = nodeList[i];
+		const nodeLen = isValidText(node) ? String(node).length : 1;
+		const nextLen = currLen + nodeLen;
+		if (nextLen > len) {
+			const restLen = len - currLen;
+			currentNodeList.push(String(node).slice(0, restLen));
+			return currentNodeList;
+		}
+		currentNodeList.push(node);
+		currLen = nextLen;
+	}
+	return nodeList;
+}
+const STATUS_MEASURE_NONE = 0;
+const STATUS_MEASURE_PREPARE = 1;
+const STATUS_MEASURE_START = 2;
+const STATUS_MEASURE_NEED_ELLIPSIS = 3;
+const STATUS_MEASURE_NO_NEED_ELLIPSIS = 4;
+const lineClipStyle = {
+	display: "-webkit-box",
+	overflow: "hidden",
+	WebkitBoxOrient: "vertical"
+};
+const Ellipsis = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const nodeList = computed(() => getTextNodeArr(filterEmpty(toList(getSlotPropsFnRun({}, props, "text"), true))));
+	const nodeLen = computed(() => getNodesLen(nodeList.value));
+	const ellipsisCutIndex = shallowRef(null);
+	const cutMidRef = shallowRef();
+	const measureWhiteSpaceRef = shallowRef();
+	const needEllipsisRef = shallowRef();
+	const descRowsEllipsisRef = shallowRef();
+	const symbolRowEllipsisRef = shallowRef();
+	const canEllipsis = shallowRef(false);
+	const needEllipsis = shallowRef(STATUS_MEASURE_NONE);
+	const ellipsisHeight = shallowRef(0);
+	const parentWhiteSpace = shallowRef(null);
+	watch([
+		() => props.enableMeasure,
+		() => props.width,
+		nodeLen,
+		() => props.rows
+	], ([enableMeasure, width, len, rows]) => {
+		if (enableMeasure && width && len && rows) needEllipsis.value = STATUS_MEASURE_PREPARE;
+		else needEllipsis.value = STATUS_MEASURE_NONE;
+	}, { immediate: true });
+	watch(needEllipsis, async (status) => {
+		await nextTick();
+		if (status === STATUS_MEASURE_PREPARE) {
+			needEllipsis.value = STATUS_MEASURE_START;
+			const nextWhiteSpace = measureWhiteSpaceRef.value ? getComputedStyle(measureWhiteSpaceRef.value).whiteSpace : null;
+			parentWhiteSpace.value = nextWhiteSpace;
+		} else if (status === STATUS_MEASURE_START) {
+			const isOverflow = !!needEllipsisRef.value?.isExceed();
+			needEllipsis.value = isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS;
+			ellipsisCutIndex.value = isOverflow ? [0, nodeLen.value] : null;
+			canEllipsis.value = isOverflow;
+			const baseRowsEllipsisHeight = needEllipsisRef.value?.getHeight?.() || 0;
+			const descRowsEllipsisHeight = props.rows === 1 ? 0 : descRowsEllipsisRef.value?.getHeight?.() || 0;
+			const symbolRowEllipsisHeight = symbolRowEllipsisRef.value?.getHeight?.() || 0;
+			const maxRowsHeight = Math.max(baseRowsEllipsisHeight, descRowsEllipsisHeight + symbolRowEllipsisHeight);
+			ellipsisHeight.value = maxRowsHeight + 1;
+			props.onEllipsis?.(isOverflow);
+		}
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	const cutMidIndex = shallowRef(0);
+	watchEffect(() => {
+		const range = ellipsisCutIndex.value;
+		if (range) cutMidIndex.value = Math.ceil((range[0] + range[1]) / 2);
+	});
+	watch(ellipsisCutIndex, async () => {
+		await nextTick();
+		const [minIndex, maxIndex] = ellipsisCutIndex.value || [0, 0];
+		if (minIndex !== maxIndex) {
+			const isOverflow = (cutMidRef.value?.getHeight() || 0) > ellipsisHeight.value;
+			let targetMidIndex = cutMidIndex.value;
+			if (maxIndex - minIndex === 1) targetMidIndex = isOverflow ? minIndex : maxIndex;
+			ellipsisCutIndex.value = isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex];
+		}
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return () => {
+		const fullContent = slots?.default?.(nodeList.value, false);
+		const finalContentFn = () => {
+			if (!props.enableMeasure) return slots?.default?.(nodeList.value, false);
+			if (needEllipsis.value !== STATUS_MEASURE_NEED_ELLIPSIS || !ellipsisCutIndex.value || ellipsisCutIndex.value[0] !== ellipsisCutIndex.value[1]) {
+				const content = slots?.default?.(nodeList.value, false);
+				if ([STATUS_MEASURE_NO_NEED_ELLIPSIS, STATUS_MEASURE_NONE].includes(needEllipsis.value)) return content;
+				return createVNode("span", { "style": {
+					...lineClipStyle,
+					WebkitLineClamp: props.rows
+				} }, [content]);
+			}
+			return slots?.default?.(props.expanded ? nodeList.value : sliceNodes(nodeList.value, ellipsisCutIndex.value[0]), canEllipsis.value);
+		};
+		const finalContent = finalContentFn();
+		const measureStyle = {
+			width: `${props.width}px`,
+			margin: 0,
+			padding: 0,
+			whiteSpace: parentWhiteSpace.value === "nowrap" ? "normal" : "inherit"
+		};
+		return createVNode(Fragment, null, [
+			finalContent,
+			needEllipsis.value === STATUS_MEASURE_START && createVNode(Fragment, null, [
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: props.rows
+					},
+					"ref": needEllipsisRef
+				}, _isSlot(fullContent) ? fullContent : { default: () => [fullContent] }),
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: props.rows - 1
+					},
+					"ref": descRowsEllipsisRef
+				}, _isSlot(fullContent) ? fullContent : { default: () => [fullContent] }),
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: 1
+					},
+					"ref": symbolRowEllipsisRef
+				}, { default: () => [slots?.default?.([], true)] })
+			]),
+			needEllipsis.value === STATUS_MEASURE_NEED_ELLIPSIS && ellipsisCutIndex.value && ellipsisCutIndex.value[0] !== ellipsisCutIndex.value[1] && createVNode(MeasureText, {
+				"style": {
+					...measureStyle,
+					top: `400px`
+				},
+				"ref": cutMidRef
+			}, { default: () => [slots?.default?.(sliceNodes(nodeList.value, cutMidIndex.value), true)] }),
+			needEllipsis.value === STATUS_MEASURE_PREPARE && createVNode("span", {
+				"style": { whiteSpace: "inherit" },
+				"ref": measureWhiteSpaceRef
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		enableMeasure: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		text: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: Number,
+			required: true
+		},
+		rows: {
+			type: Number,
+			required: true
+		},
+		onEllipsis: {
+			type: Function,
+			required: true
+		},
+		expanded: {
+			type: Boolean,
+			required: true
+		},
+		miscDeps: {
+			type: Array,
+			required: true
+		}
+	},
+	name: "TypographyEllipsis",
+	inheritAttrs: false
+});
+//#endregion
+export { Ellipsis as default };

package/dist/typography/Base/EllipsisTooltip.d.ts

@@ -0,0 +1,20 @@
+import { TooltipProps } from "../../tooltip/index.js";
+//#region src/typography/Base/EllipsisTooltip.d.ts
+interface EmptyEmitsProps {}
+interface EllipsisTooltipProps extends EmptyEmitsProps {
+  tooltipProps?: TooltipProps;
+  enableEllipsis: boolean;
+  isEllipsis?: boolean;
+  /**
+   * Suppress the tooltip without taking control of its open state, so hover
+   * handling stays inside Tooltip and it re-opens when moving from the actions
+   * back to the text.
+   */
+  disabled: boolean;
+}
+interface EllipsisTooltipSlots {
+  default?: () => any;
+}
+declare const EllipsisTooltip: import("vue").DefineComponent<EllipsisTooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EllipsisTooltipProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { EllipsisTooltipProps, EllipsisTooltipSlots, EmptyEmitsProps, EllipsisTooltip as default };

package/dist/typography/Base/EllipsisTooltip.js

@@ -0,0 +1,34 @@
+import InternalTooltip from "../../tooltip/index.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/typography/Base/EllipsisTooltip.tsx
+const EllipsisTooltip = /* @__PURE__ */ defineComponent({
+	props: {
+		tooltipProps: {
+			type: Object,
+			required: false
+		},
+		enableEllipsis: {
+			type: Boolean,
+			required: true
+		},
+		isEllipsis: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: true
+		}
+	},
+	name: "TypographyEllipsisTooltip",
+	inheritAttrs: false,
+	setup(props, { slots }) {
+		return () => {
+			if (!props.tooltipProps?.title || !props.enableEllipsis) return slots.default?.();
+			return createVNode(InternalTooltip, mergeProps(props.tooltipProps, { "disabled": !props.isEllipsis || props.disabled }), { default: () => [slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { EllipsisTooltip as default };

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

@@ -0,0 +1,8 @@
+import { BlockProps, TypographyBaseEmits, TypographySlots } from "../interface.js";
+import { SlotsType } from "vue";
+//#region src/typography/Base/index.d.ts
+type TypographyBaseEmitsProps = { [K in keyof TypographyBaseEmits as `on${Capitalize<string & K>}`]?: TypographyBaseEmits[K]; };
+interface InternalBlockProps extends BlockProps, TypographyBaseEmitsProps {}
+declare const Base: import("vue").DefineSetupFnComponent<InternalBlockProps, TypographyBaseEmits, SlotsType<TypographySlots>, InternalBlockProps, import("vue").PublicProps>;
+//#endregion
+export { TypographyBaseEmitsProps, Base as default };