@antdv-vue/pro-utils 0.0.0-stage → 2.1.1

package/CHANGELOG.md

@@ -0,0 +1,123 @@
+# @antdv-vue/pro-utils
+
+## 2.1.1
+
+### Patch Changes
+
+- ef5cfb6: fix: preserve user-select protection when a new drag starts before deferred cleanup completes.
+
+## 2.1.0
+
+### Minor Changes
+
+- 244f208: feat: export Draggable utilities and add draggable and fullscreen ModalForm modes.
+
+### Patch Changes
+
+- fix: stop cancelled touch drags and retain user-select protection until every active drag ends.
+
+## 2.0.0
+
+### Major Changes
+
+- feat!: remove the UMD bundle target from package builds.
+- docs: sync structured changelog pages for every package.
+
+### Patch Changes
+
+- Updated dependencies
+  - @antdv-vue/pro-provider@2.0.0
+
+## 1.0.23
+
+### Patch Changes
+
+- fix card, form bugs
+
+## 1.0.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.14
+
+## 1.0.21
+
+### Patch Changes
+
+- fix layout filed form card bugs
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.13
+
+## 1.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.12
+
+## 1.0.19
+
+### Patch Changes
+
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.11
+
+## 1.0.18
+
+### Patch Changes
+
+- fix shared utility component styles
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.10
+
+## 1.0.16
+
+### Patch Changes
+
+- fix bugs
+
+## 1.0.16
+
+### Patch Changes
+
+- fix css-in-js style Transition bugs
+
+## 1.0.15
+
+### Patch Changes
+
+- fix bugs
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.9
+
+## 1.0.14
+
+### Patch Changes
+
+- create listy card mode
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.8
+
+## 1.0.13
+
+### Patch Changes
+
+- change version
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.7
+
+## 1.0.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.6
+
+## 1.0.11
+
+### Patch Changes
+
+- fix ProForm bugs
+- Updated dependencies
+  - @antdv-vue/pro-provider@1.0.5

package/README.md

@@ -1,3 +1,81 @@
-# Temporary Holding Version
+# @antdv-vue/pro-utils
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared utility functions, composables, and common components for the Pro Components ecosystem.
+
+## Installation
+
+```bash
+npm install @antdv-vue/pro-utils
+# or
+pnpm add @antdv-vue/pro-utils
+```
+
+## Peer Dependencies
+
+- `vue` >= 3.5.30
+- `antdv-next` >= 1.3.6
+
+## What's Included
+
+### Utility Functions
+
+| Function | Description |
+|----------|-------------|
+| `isBrowser` | Check if running in browser environment |
+| `isImg` | Check if a value is an image URL |
+| `isNil` | Check if value is `null` or `undefined` |
+| `isUrl` | Check if a value is a valid URL |
+| `isDropdownValueType` | Check if value type is dropdown |
+| `omitUndefined` | Remove `undefined` values from object |
+| `omitBoolean` | Remove boolean values from object |
+| `omitUndefinedAndEmptyArr` | Remove `undefined` and empty array values |
+| `deepMerge` | Deep merge objects |
+| `merge` | Merge objects |
+| `nanoid` | Generate unique ID |
+| `stringify` | Safe JSON stringify |
+| `transformKeySubmitValue` | Transform form key submit values |
+| `transformBooleanProps` | Transform boolean props |
+| `runFunction` | Safely run a function |
+| `normalizeProps` | Normalize component props |
+| `pickProProps` | Pick pro-specific props |
+| `pickProFormItemProps` | Pick pro form item props |
+| `getFieldPropsOrFormItemProps` | Get field or form item props |
+| `proFieldParsingText` | Parse pro field text values |
+
+### Composables (Hooks)
+
+| Hook | Description |
+|------|-------------|
+| `useMountMergeState` | State that merges on mount |
+| `useEditableArray` | Manage editable array data |
+| `usePrevious` | Track previous value |
+| `useRefFunction` | Ref-based callback function |
+| `useBreakpoint` | Responsive breakpoint detection (via `useMedia`) |
+| `useFormFieldContextInject` / `useFormFieldContextProvider` | Form field context utilities |
+| `useProFormContextInject` / `useProFormContextProvider` | Pro form context utilities |
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `ErrorBoundary` | Error boundary wrapper component |
+| `CopyToClipboard` | Copy content to clipboard |
+| `FieldLabel` | Field label component |
+| `LabelIconTip` | Label with icon tooltip |
+| `FormList` | Dynamic form list component |
+| `FormItem` | Enhanced form item component |
+| `FilterDropdown` | Filter dropdown component |
+| `DropdownFooter` | Dropdown footer component |
+| `InlineErrorFormItem` | Inline error form item |
+
+### Date Utilities
+
+| Function | Description |
+|----------|-------------|
+| `parseValueToDay` | Parse value to Day.js object |
+| `conversionMomentValue` | Convert moment-compatible values |
+| `dateArrayFormatter` | Format date arrays |
+
+## License
+
+[MIT](../../LICENSE)

package/dist/autoFocusToFirstChild/index.d.ts

@@ -0,0 +1,9 @@
+import { VNode } from "vue";
+
+//#region src/autoFocusToFirstChild/index.d.ts
+/**
+ * 将 autoFocus 应用到第一个子节点
+ */
+declare function autoFocusToFirstChild(nodes?: VNode[], autoFocus?: boolean): VNode[];
+//#endregion
+export { autoFocusToFirstChild };

package/dist/autoFocusToFirstChild/index.js

@@ -0,0 +1,36 @@
+import { Fragment, Text, cloneVNode, isVNode } from "vue";
+//#region src/autoFocusToFirstChild/index.ts
+function supportsAutoFocus(node) {
+	if (typeof node.type !== "object" || node.type === null) return false;
+	const props = "props" in node.type ? node.type.props : void 0;
+	if (!props) return false;
+	if (Array.isArray(props)) return props.includes("autoFocus");
+	return "autoFocus" in props;
+}
+function walk(nodes, autoFocus, found) {
+	return nodes.map((node) => {
+		if (!isVNode(node)) return node;
+		if (node.type === Fragment || node.type === Comment || node.type === Text) {
+			if (Array.isArray(node.children)) return cloneVNode(node, { children: walk(node.children, autoFocus, found) });
+			return node;
+		}
+		if (found.value) return node;
+		if (supportsAutoFocus(node)) {
+			found.value = true;
+			return cloneVNode(node, {
+				...node.props,
+				autoFocus
+			});
+		}
+		return node;
+	});
+}
+/**
+* 将 autoFocus 应用到第一个子节点
+*/
+function autoFocusToFirstChild(nodes, autoFocus) {
+	if (!autoFocus || !nodes?.length) return nodes ?? [];
+	return walk(nodes, autoFocus, { value: false });
+}
+//#endregion
+export { autoFocusToFirstChild };

package/dist/childrenToArray/index.d.ts

@@ -0,0 +1,7 @@
+import { VNode } from "vue";
+import { flattenChildren as childrenToArray } from "@v-c/util/dist/props-util";
+
+//#region src/childrenToArray/index.d.ts
+declare function isSpecialNode(node: VNode): boolean;
+//#endregion
+export { childrenToArray, isSpecialNode };

package/dist/childrenToArray/index.js

@@ -0,0 +1,8 @@
+import { Comment, Fragment, Text } from "vue";
+import { flattenChildren as childrenToArray } from "@v-c/util/dist/props-util";
+//#region src/childrenToArray/index.ts
+function isSpecialNode(node) {
+	return node.type === Fragment || node.type === Comment || node.type === Text;
+}
+//#endregion
+export { childrenToArray, isSpecialNode };

package/dist/components/CopyToClipboard/copy/index.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/CopyToClipboard/copy/index.d.ts
+interface Options {
+  debug?: boolean;
+  message?: string;
+  format?: string;
+  onCopy?: (clipboardData: object) => void;
+}
+declare function copy(text: string, options?: Options): boolean;
+//#endregion
+export { copy as default };

package/dist/components/CopyToClipboard/copy/index.js

@@ -0,0 +1,84 @@
+import deselectCurrent from "./toggle-selection.js";
+//#region src/components/CopyToClipboard/copy/index.ts
+const clipboardToIE11Formatting = {
+	"text/plain": "Text",
+	"text/html": "Url",
+	default: "Text"
+};
+const defaultMessage = "Copy to clipboard: #{key}, Enter";
+function format(message) {
+	const copyKey = `${/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl"}+C`;
+	return message.replace(/#\{\s*key\s*\}/g, copyKey);
+}
+function copy(text, options) {
+	let message;
+	let reselectPrevious;
+	let range;
+	let selection;
+	let mark;
+	let success = false;
+	if (!options) options = {};
+	const debug = options.debug || false;
+	try {
+		reselectPrevious = deselectCurrent();
+		range = document.createRange();
+		selection = document.getSelection();
+		mark = document.createElement("span");
+		mark.textContent = text;
+		mark.style.all = "unset";
+		mark.style.position = "fixed";
+		mark.style.top = "0";
+		mark.style.clip = "rect(0, 0, 0, 0)";
+		mark.style.whiteSpace = "pre";
+		mark.style.webkitUserSelect = "text";
+		mark.style.setProperty("MozUserSelect", "text");
+		mark.style.setProperty("msUserSelect", "text");
+		mark.style.userSelect = "text";
+		mark.addEventListener("copy", (e) => {
+			e.stopPropagation();
+			if (options.format) {
+				e.preventDefault();
+				if (typeof e.clipboardData === "undefined") {
+					debug && console.warn("unable to use e.clipboardData");
+					debug && console.warn("trying IE specific stuff");
+					window.clipboardData.clearData();
+					const format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting.default;
+					window.clipboardData.setData(format, text);
+				} else {
+					e.clipboardData?.clearData();
+					e.clipboardData?.setData(options.format, text);
+				}
+			}
+			if (options.onCopy) {
+				e.preventDefault();
+				options.onCopy(e.clipboardData);
+			}
+		});
+		document.body.appendChild(mark);
+		range.selectNodeContents(mark);
+		selection?.addRange(range);
+		if (!document.execCommand("copy")) throw new Error("copy command was unsuccessful");
+		success = true;
+	} catch (err) {
+		debug && console.error("unable to copy using execCommand: ", err);
+		debug && console.warn("trying IE specific stuff");
+		try {
+			window.clipboardData.setData(options.format || "text", text);
+			options.onCopy && options.onCopy(window.clipboardData);
+			success = true;
+		} catch (err) {
+			debug && console.error("unable to copy using clipboardData: ", err);
+			debug && console.error("falling back to prompt");
+			message = format("message" in options ? options.message : defaultMessage);
+			window.prompt(message, text);
+		}
+	} finally {
+		if (selection) if (typeof selection.removeRange == "function") selection.removeRange(range);
+		else selection.removeAllRanges();
+		if (mark) document.body.removeChild(mark);
+		reselectPrevious?.();
+	}
+	return success;
+}
+//#endregion
+export { copy as default };

package/dist/components/CopyToClipboard/copy/toggle-selection.d.ts

@@ -0,0 +1,4 @@
+//#region src/components/CopyToClipboard/copy/toggle-selection.d.ts
+declare function deselectCurrent(): (() => void);
+//#endregion
+export { deselectCurrent as default };

package/dist/components/CopyToClipboard/copy/toggle-selection.js

@@ -0,0 +1,27 @@
+//#region src/components/CopyToClipboard/copy/toggle-selection.ts
+function deselectCurrent() {
+	const selection = document.getSelection();
+	if (!selection?.rangeCount) return function() {};
+	let active = document.activeElement;
+	const ranges = [];
+	for (let i = 0; i < selection.rangeCount; i++) ranges.push(selection.getRangeAt(i));
+	switch (active.tagName.toUpperCase()) {
+		case "INPUT":
+		case "TEXTAREA":
+			active.blur();
+			break;
+		default:
+			active = null;
+			break;
+	}
+	selection.removeAllRanges();
+	return function() {
+		selection.type === "Caret" && selection.removeAllRanges();
+		if (!selection.rangeCount) ranges.forEach((range) => {
+			selection.addRange(range);
+		});
+		active && active.focus();
+	};
+}
+//#endregion
+export { deselectCurrent as default };

package/dist/components/CopyToClipboard/index.d.ts

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "vue";
+
+//#region src/components/CopyToClipboard/index.d.ts
+declare const CopyToClipboard: FunctionalComponent<{
+  text?: string;
+  onCopy?: (text?: string, copied?: boolean) => void;
+  options?: {
+    debug?: boolean;
+    format?: 'text/plain' | 'text/html' | 'default';
+    message?: string;
+  };
+}>;
+//#endregion
+export { CopyToClipboard as default };

package/dist/components/CopyToClipboard/index.js

@@ -0,0 +1,13 @@
+import copy from "./copy/index.js";
+import { createVNode } from "vue";
+//#region src/components/CopyToClipboard/index.tsx
+const CopyToClipboard = ({ text, onCopy, options }, { slots }) => createVNode("span", { "onClick": (e) => {
+	e.preventDefault();
+	e.stopPropagation();
+	const copied = copy(text, options);
+	if (onCopy) onCopy(text, copied);
+} }, [slots.default?.()]);
+CopyToClipboard.inheritAttrs = false;
+CopyToClipboard.displayName = "CopyToClipboard";
+//#endregion
+export { CopyToClipboard as default };

package/dist/components/Draggable/Draggable.d.ts

@@ -0,0 +1,62 @@
+import { Bounds, ControlPosition, DraggableEventHandler, PositionOffsetControlPosition } from "./types.js";
+import { DraggableCoreDefaultProps, DraggableCoreProps } from "./DraggableCore.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Draggable/Draggable.d.ts
+interface DraggableState {
+  dragging: boolean;
+  dragged: boolean;
+  x: number;
+  y: number;
+  slackX: number;
+  slackY: number;
+  isElementSVG: boolean;
+  prevPropsPosition: ControlPosition | null;
+}
+type DraggableDefaultProps = DraggableCoreDefaultProps & {
+  axis?: 'both' | 'x' | 'y' | 'none';
+  bounds?: Bounds | string | false;
+  defaultClass?: string;
+  defaultClassDragging?: string;
+  defaultClassDragged?: string;
+  defaultPosition?: ControlPosition;
+  scale?: number;
+};
+type DraggableProps = DraggableCoreProps & DraggableDefaultProps & {
+  positionOffset?: PositionOffsetControlPosition;
+  position?: ControlPosition;
+};
+interface DraggableEmits {
+  drag: DraggableEventHandler;
+  mousedown: (e: MouseEvent) => void;
+  start: DraggableEventHandler;
+  stop: DraggableEventHandler;
+  [key: string]: (...args: any[]) => void;
+}
+declare const _Draggable: _$vue.DefineSetupFnComponent<DraggableProps, DraggableEmits, CustomSlotsType<{
+  default?: () => VueNode[];
+}>, DraggableCoreDefaultProps & {
+  cancel?: string;
+  offsetParent?: HTMLElement;
+  grid?: [number, number];
+  nodeRef?: _$vue.ShallowRef<HTMLElement | null> | null;
+  handle?: string;
+} & {
+  axis?: "both" | "x" | "y" | "none";
+  bounds?: Bounds | string | false;
+  defaultClass?: string;
+  defaultClassDragging?: string;
+  defaultClassDragged?: string;
+  defaultPosition?: ControlPosition;
+  scale?: number;
+} & {
+  positionOffset?: PositionOffsetControlPosition;
+  position?: ControlPosition;
+} & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, _$vue.PublicProps>;
+declare const Draggable: typeof _Draggable & Plugin;
+//#endregion
+export { DraggableDefaultProps, DraggableEmits, DraggableProps, DraggableState, Draggable as default };

package/dist/components/Draggable/Draggable.js

@@ -0,0 +1,162 @@
+import { useState } from "../../hooks/useState/index.js";
+import { createCSSTransform, createSVGTransform } from "./utils/domFns.js";
+import { canDragX, canDragY, createDraggableData, getBoundPosition } from "./utils/positionFns.js";
+import DraggableCore from "./DraggableCore.js";
+import { cloneVNode, createVNode, defineComponent, getCurrentInstance, isVNode, mergeProps, onMounted, onUnmounted, watch } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/components/Draggable/Draggable.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const Draggable = /* @__PURE__ */ defineComponent((props, { slots, expose, emit }) => {
+	const [dragging, setDragging] = useState(false);
+	const [dragged, setDragged] = useState(false);
+	const [isElementSVG, setIsElementSVG] = useState(false);
+	const ctx = getCurrentInstance();
+	const [slackX, setSlackX] = useState(0);
+	const [slackY, setSlackY] = useState(0);
+	const [x, setX] = useState(() => {
+		return props.position?.x ?? props.defaultPosition?.x ?? 0;
+	});
+	const [y, setY] = useState(() => {
+		return props.position?.y ?? props.defaultPosition?.y ?? 0;
+	});
+	watch(() => props.position, (position) => {
+		if (position) {
+			setX(position.x);
+			setY(position.y);
+		}
+	}, { deep: true });
+	onMounted(() => {
+		if (typeof window.SVGElement !== "undefined" && props.nodeRef?.value instanceof window.SVGElement) setIsElementSVG(true);
+	});
+	onUnmounted(() => {
+		if (dragging.value) setDragging(false);
+	});
+	expose({
+		x,
+		y
+	});
+	return () => {
+		let _slot;
+		const [children] = slots.default?.();
+		const { axis = "both", bounds = false, defaultClass = "vue-draggable", defaultClassDragging = "vue-draggable-dragging", defaultClassDragged = "vue-draggable-dragged", defaultPosition = {
+			x: 0,
+			y: 0
+		}, scale = 1, position, positionOffset, ...draggableCoreProps } = props;
+		let style = {};
+		let svgTransform = null;
+		const draggable = !Boolean(position) || dragging.value;
+		const validPosition = position || defaultPosition;
+		const transformOpts = {
+			x: canDragX(axis) && draggable ? x.value : validPosition.x,
+			y: canDragY(axis) && draggable ? y.value : validPosition.y
+		};
+		if (isElementSVG.value) svgTransform = createSVGTransform(transformOpts, positionOffset);
+		else style = createCSSTransform(transformOpts, positionOffset);
+		return createVNode(DraggableCore, mergeProps(draggableCoreProps, {
+			"scale": scale,
+			"onStart": (e, coreData) => {
+				emit("start", e, createDraggableData(ctx, coreData));
+				setDragging(true);
+				setDragged(true);
+			},
+			"onDrag": (e, coreData) => {
+				if (!dragging.value) return false;
+				const uiData = createDraggableData(ctx, coreData);
+				const newState = {
+					x: uiData.x,
+					y: uiData.y,
+					slackX: 0,
+					slackY: 0
+				};
+				if (props.bounds) {
+					const { x: prevX, y: prevY } = newState;
+					newState.x += slackX.value;
+					newState.y += slackY.value;
+					const [newStateX, newStateY] = getBoundPosition(ctx, newState.x, newState.y);
+					newState.x = newStateX;
+					newState.y = newStateY;
+					newState.slackX = slackX.value + (prevX - newState.x);
+					newState.slackY = slackY.value + (prevY - newState.y);
+					uiData.x = newState.x;
+					uiData.y = newState.y;
+					uiData.deltaX = newState.x - x.value;
+					uiData.deltaY = newState.y - y.value;
+				}
+				emit("drag", e, uiData);
+				setX(newState.x);
+				setY(newState.y);
+				setSlackX(newState.slackX);
+				setSlackY(newState.slackY);
+			},
+			"onStop": (e, coreData) => {
+				if (!dragging.value) return false;
+				emit("stop", e, createDraggableData(ctx, coreData));
+				const newState = {
+					dragging: false,
+					slackX: 0,
+					slackY: 0
+				};
+				const controlled = Boolean(props.position);
+				if (controlled) {
+					const { x, y } = props.position;
+					newState.x = x;
+					newState.y = y;
+				}
+				setDragging(newState.dragging);
+				setSlackX(newState.slackX);
+				setSlackY(newState.slackY);
+				if (controlled) {
+					setX(newState.x);
+					setY(newState.y);
+				}
+			},
+			"onMousedown": (e) => emit("mousedown", e)
+		}), _isSlot(_slot = cloneVNode(children, {
+			class: classNames(children.props?.class, defaultClass, {
+				[defaultClassDragging]: dragging.value,
+				[defaultClassDragged]: dragged.value
+			}),
+			style: {
+				...children.props?.style,
+				...style
+			},
+			transform: svgTransform
+		})) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	name: "Draggable",
+	inheritAttrs: false,
+	props: [
+		"allowAnyClick",
+		"allowMobileScroll",
+		"axis",
+		"bounds",
+		"cancel",
+		"defaultClass",
+		"defaultClassDragged",
+		"defaultClassDragging",
+		"defaultPosition",
+		"disabled",
+		"enableUserSelectHack",
+		"grid",
+		"handle",
+		"nodeRef",
+		"offsetParent",
+		"position",
+		"positionOffset",
+		"scale"
+	],
+	emits: [
+		"drag",
+		"mousedown",
+		"start",
+		"stop"
+	]
+});
+Draggable.install = (app) => {
+	app.component(Draggable.name, Draggable);
+};
+//#endregion
+export { Draggable as default };