@gx-design-vue/pro-table 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/utils/flipAnimate.js

@@ -0,0 +1,40 @@
+//#region src/utils/flipAnimate.ts
+/**
+* FLIP 动画 —— 精简复刻 `@dnd-kit/dom` 的 `sortable#animate`。
+*
+* 用 Web Animations API（`element.animate`）+ CSS `translate` 属性（非 transform）：
+* 1. 取消元素上 transform/translate/scale 的 CSS transition（避免 getBoundingClientRect 取到中间帧）
+* 2. 测新旧位置算 `delta = prev.top - next.top`（同时支持 X/Y）
+* 3. `el.animate({ translate: [delta, 0] }, { duration, easing })`
+*
+* 命中 `prefers-reduced-motion` 时 duration 置 0。
+*/
+function flipAnimate(entries, prevRects, options = {}) {
+	const { duration = 200, easing = "cubic-bezier(0.2,0,0,1)" } = options;
+	const finalDuration = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : duration;
+	for (const { key, el } of entries) {
+		const prev = prevRects.get(key);
+		if (!prev) continue;
+		for (const animation of el.getAnimations()) {
+			const transitionProperty = animation.transitionProperty;
+			if (transitionProperty === "transform" || transitionProperty === "translate" || transitionProperty === "scale") animation.cancel();
+		}
+		const next = el.getBoundingClientRect();
+		const deltaX = prev.left - next.left;
+		const deltaY = prev.top - next.top;
+		if (deltaX === 0 && deltaY === 0) continue;
+		const animation = el.animate({ translate: [`${deltaX}px ${deltaY}px`, "0px 0px"] }, {
+			duration: finalDuration,
+			easing
+		});
+		const clearTranslate = () => {
+			el.style.translate = "";
+		};
+		if ("addEventListener" in animation) {
+			animation.addEventListener("finish", clearTranslate, { once: true });
+			animation.addEventListener("cancel", clearTranslate, { once: true });
+		}
+	}
+}
+//#endregion
+export { flipAnimate };

package/dist/utils/formConstants.d.ts

@@ -0,0 +1,9 @@
+import { Breakpoint } from "@gx-design-vue/pro-utils";
+
+//#region src/utils/formConstants.d.ts
+declare const DEFAULT_BREAKPOINT_SPANS: {
+  breakpoint: Breakpoint;
+  span: number;
+}[];
+//#endregion
+export { DEFAULT_BREAKPOINT_SPANS };

package/dist/utils/formConstants.js

@@ -0,0 +1,29 @@
+//#region src/utils/formConstants.ts
+const DEFAULT_BREAKPOINT_SPANS = [
+	{
+		breakpoint: "xxl",
+		span: 5
+	},
+	{
+		breakpoint: "xl",
+		span: 4
+	},
+	{
+		breakpoint: "lg",
+		span: 3
+	},
+	{
+		breakpoint: "md",
+		span: 2
+	},
+	{
+		breakpoint: "sm",
+		span: 2
+	},
+	{
+		breakpoint: "xs",
+		span: 1
+	}
+];
+//#endregion
+export { DEFAULT_BREAKPOINT_SPANS };

package/dist/utils/valueFormat.d.ts

@@ -0,0 +1,9 @@
+import { ProColumnsValueType } from "../interface.js";
+
+//#region src/utils/valueFormat.d.ts
+interface ValueFormatOptions {
+  className?: string;
+}
+declare function valueFormat(value: any, valueType: ProColumnsValueType | undefined, options?: ValueFormatOptions): any;
+//#endregion
+export { ValueFormatOptions, valueFormat };

package/dist/utils/valueFormat.js

@@ -0,0 +1,27 @@
+import { h } from "vue";
+import { isNil, isObject } from "@gx-design-vue/pro-utils";
+import dayjs from "dayjs";
+//#region src/utils/valueFormat.ts
+function valueFormat(value, valueType, options = {}) {
+	if (isNil(value) || value === "") return value;
+	if (!valueType || valueType === "text") return value;
+	if (isObject(valueType) && !Array.isArray(valueType)) {
+		const config = valueType;
+		const tagName = config.node ?? "span";
+		return h(tagName === "a" ? "span" : tagName, {
+			class: config.class,
+			...config.attr ?? {},
+			...config.click ? { onClick: config.click } : {}
+		}, value);
+	}
+	switch (valueType) {
+		case "link": return h("span", { class: [`${options.className}-a`] }, value);
+		case "time": return dayjs(value).format("HH:mm:ss");
+		case "dateMonth": return `${dayjs(value).month() + 1}月`;
+		case "date": return dayjs(value).format("YYYY-MM-DD");
+		case "dateTime": return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
+		default: return value;
+	}
+}
+//#endregion
+export { valueFormat };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gx-design-vue/pro-table",
   "type": "module",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.21",
   "description": "Gx Design Pro Table",
   "author": {
     "name": "gx12358",
@@ -37,20 +37,32 @@
     "package.json"
   ],
   "peerDependencies": {
+    "@antdv-next/cssinjs": "^1.0.6",
+    "@chenglou/pretext": "^0.0.8",
+    "@gx-design-vue/context": "^0.0.5-alpha.8",
+    "@gx-design-vue/icon": "^0.0.1-alpha.13",
+    "@gx-design-vue/pro-hooks": "^0.2.0-alpha.8",
+    "@gx-design-vue/pro-provider": "^0.1.0-alpha.17",
+    "@gx-design-vue/pro-utils": "^0.2.0-alpha.10",
+    "antdv-next": "^1.4.1",
     "vue": ">=3.2.0"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^7.0.1",
     "@ctrl/tinycolor": "^3.5.0",
-    "@vueuse/core": "^14.2.0",
-    "ant-design-vue": "^4.2.6",
-    "dayjs": "^1.11.19",
-    "es-toolkit": "^1.43.0",
-    "@gx-design-vue/context": "^0.0.5-alpha.2",
-    "@gx-design-vue/pro-app": "^0.1.0-alpha.1",
-    "@gx-design-vue/pro-hooks": "^0.2.0-alpha.2",
-    "@gx-design-vue/pro-provider": "^0.1.0-alpha.1",
-    "@gx-design-vue/pro-utils": "^0.2.0-alpha.2"
+    "@vueuse/core": "^14.3.0",
+    "dayjs": "^1.11.21",
+    "es-toolkit": "1.48.1"
+  },
+  "devDependencies": {
+    "@antdv-next/cssinjs": "^1.0.6",
+    "@chenglou/pretext": "^0.0.8",
+    "antdv-next": "^1.4.1",
+    "vue": "^3.5.38",
+    "@gx-design-vue/icon": "^0.0.1-alpha.13",
+    "@gx-design-vue/pro-hooks": "^0.2.0-alpha.8",
+    "@gx-design-vue/pro-provider": "^0.1.0-alpha.17",
+    "@gx-design-vue/pro-utils": "^0.2.0-alpha.10",
+    "@gx-design-vue/context": "^0.0.5-alpha.8"
   },
   "browserslist": [
     "> 1%",

package/dist/components/Form/components/RequestSelect.d.ts

@@ -1,50 +0,0 @@
-import { ProSchemaValueEnumType } from "../../../types/ColumnTypings.js";
-import * as vue199 from "vue";
-import { PropType } from "vue";
-
-//#region src/components/Form/components/RequestSelect.d.ts
-declare const _default: vue199.DefineComponent<vue199.ExtractPropTypes<{
-  fetch: PropType<() => Promise<ProSchemaValueEnumType[]>>;
-  loading: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  debounceTime: PropType<number>;
-  manual: {
-    type: PropType<boolean>;
-    default: any;
-  };
-  fieldName: {
-    type: PropType<string>;
-    default: string;
-  };
-  notFoundContent: {
-    type: PropType<(loading: boolean) => any>;
-  };
-}>, () => vue199.VNode<vue199.RendererNode, vue199.RendererElement, {
-  [key: string]: any;
-}>, {}, {}, {}, vue199.ComponentOptionsMixin, vue199.ComponentOptionsMixin, {}, string, vue199.PublicProps, Readonly<vue199.ExtractPropTypes<{
-  fetch: PropType<() => Promise<ProSchemaValueEnumType[]>>;
-  loading: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  debounceTime: PropType<number>;
-  manual: {
-    type: PropType<boolean>;
-    default: any;
-  };
-  fieldName: {
-    type: PropType<string>;
-    default: string;
-  };
-  notFoundContent: {
-    type: PropType<(loading: boolean) => any>;
-  };
-}>> & Readonly<{}>, {
-  loading: boolean;
-  manual: boolean;
-  fieldName: string;
-}, {}, {}, {}, string, vue199.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { _default as default };

package/dist/components/Form/components/RequestSelect.js

@@ -1,58 +0,0 @@
-import { cloneVNode, defineComponent, ref, watch } from "vue";
-import { isArray } from "@gx-design-vue/pro-utils";
-import { useDebounceFn } from "@vueuse/core";
-import { cloneDeep as cloneDeep$1 } from "es-toolkit";
-
-//#region src/components/Form/components/RequestSelect.tsx
-var RequestSelect_default = /* @__PURE__ */ defineComponent({
-	name: "RequestSelect",
-	props: {
-		fetch: Function,
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		debounceTime: Number,
-		manual: {
-			type: Boolean,
-			default: void 0
-		},
-		fieldName: {
-			type: String,
-			default: "options"
-		},
-		notFoundContent: { type: Function }
-	},
-	setup(props, { slots }) {
-		const options = ref([]);
-		const loading = ref(props.loading);
-		const status = ref("init");
-		const debouncedFn = useDebounceFn(props.fetch, props.debounceTime || 10);
-		watch([() => props.fetch, () => props.manual], () => {
-			if (status.value !== "init" && loading.value) return;
-			const manual = props.manual ?? false;
-			if (props.fetch && !manual) {
-				loading.value = true;
-				debouncedFn().then((result) => {
-					options.value = cloneDeep$1(result);
-					status.value = "success";
-				}).catch((e) => {
-					console.error(e);
-					status.value = "error";
-				}).finally(() => {
-					loading.value = false;
-				});
-			}
-		}, { immediate: true });
-		return () => {
-			const children = slots.default?.();
-			return cloneVNode(isArray(children) ? children[0] : children, {
-				options: options.value,
-				notFoundContent: props.notFoundContent?.(loading.value)
-			});
-		};
-	}
-});
-
-//#endregion
-export { RequestSelect_default as default };

package/dist/components/Form/hooks/useForm.d.ts

@@ -1,11 +0,0 @@
-import { ProSearchMap } from "../../../types/ColumnTypings.js";
-import { Ref } from "vue";
-
-//#region src/components/Form/hooks/useForm.d.ts
-declare function useForm(defaultState: Ref<any>, searchMap: Ref<ProSearchMap[]>): {
-  formState: any;
-  resetFormState: () => void;
-  changeFormState: (key: string, value: any) => void;
-};
-//#endregion
-export { useForm };

package/dist/components/Form/hooks/useForm.js

@@ -1,32 +0,0 @@
-import { reactive, toRaw, watch } from "vue";
-import { cloneDeep } from "@gx-design-vue/pro-utils";
-
-//#region src/components/Form/hooks/useForm.ts
-function useForm(defaultState, searchMap) {
-	const formState = reactive({});
-	function resetFormState() {
-		Object.assign(formState, cloneDeep(toRaw(defaultState.value)));
-		const dateRangeRecord = searchMap.value.find((item) => item.valueType === "dateRange");
-		if (dateRangeRecord && dateRangeRecord.name) {
-			const value = dateRangeRecord.rangeStartName || dateRangeRecord.rangeEndName ? defaultState.value[dateRangeRecord.rangeStartName || "start"] ? [defaultState.value[dateRangeRecord.rangeStartName || "start"], defaultState.value[dateRangeRecord.rangeEndName || "end"]] : void 0 : defaultState.value[dateRangeRecord.name];
-			changeFormState(dateRangeRecord.name, value);
-		}
-	}
-	watch(() => defaultState.value, () => {
-		resetFormState();
-	}, {
-		deep: true,
-		immediate: true
-	});
-	function changeFormState(key, value) {
-		if (key) formState[key] = value;
-	}
-	return {
-		formState,
-		resetFormState,
-		changeFormState
-	};
-}
-
-//#endregion
-export { useForm };

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

@@ -1,33 +0,0 @@
-import { ProSearchMap } from "../../types/ColumnTypings.js";
-import { ProTableProps } from "../../types/TableTypings.js";
-import "../../index.js";
-import { DefineComponent, ExtractPropTypes, PropType } from "vue";
-import { RecordType } from "@gx-design-vue/pro-utils";
-import * as ant_design_vue1 from "ant-design-vue";
-
-//#region src/components/Form/index.d.ts
-declare const tableForm: {
-  modalScroll: PropType<boolean>;
-  formCols: {
-    type: PropType<ProSearchMap[]>;
-    default: () => any[];
-  };
-  loading: {
-    type: PropType<boolean | ant_design_vue1.SpinProps>;
-    default: any;
-  };
-  cardBordered: {
-    type: PropType<ProTableProps["showIndex"]>;
-    default: boolean;
-  };
-  prefixCls: PropType<string>;
-  defaultFormSearch: {
-    type: PropType<RecordType>;
-    default: () => {};
-  };
-  onSearch: PropType<(formState: any, buttonActions?: "reset" | "submit") => any>;
-};
-type ProTableFormProps = ExtractPropTypes<typeof tableForm>;
-declare const ProTableForm: DefineComponent<ProTableFormProps>;
-//#endregion
-export { ProTableFormProps, ProTableForm as default };