vft 0.0.524 → 0.0.525

package/es/components/table/use/use-pagination.js

@@ -1,56 +1,53 @@
-import { isBoolean as p } from "@vft/utils";
-import { ref as P, watch as m, unref as e, computed as l } from "vue";
-import { PageSize as s } from "../constants.js";
-function v(i) {
-  const a = P({});
-  m(() => e(i).pagination, (t) => {
-    t && (a.value = {
-      ...e(a),
-      ...t ?? {}
-    });
-  });
-  const n = l(() => {
-    const {
-      pagination: t,
-      total: o,
-      pageSize: c
-    } = e(i);
-    return i.value.showPager ? {
-      currentPage: 1,
-      pageSize: c,
-      total: o,
-      defaultPageSize: s,
-      layout: "total, prev, pager, next, jumper",
-      pagePlacement: "bottom-right",
-      hideOnSinglePage: !0,
-      ...p(t) ? {} : t,
-      ...e(a)
-    } : {};
-  });
-  function r(t) {
-    const o = e(n);
-    a.value = {
-      ...o,
-      ...t
-    };
-  }
-  function g() {
-    return e(n);
-  }
-  function u() {
-    return e(n).currentPage;
-  }
-  function f() {
-    return e(n).pageSize;
-  }
-  return {
-    getPagination: g,
-    getCurrentPage: u,
-    getPageSize: f,
-    getPaginationInfo: n,
-    setPagination: r
-  };
+import "../constants.js";
+import { isBoolean } from "@vft/utils";
+import { computed, ref, unref, watch } from "vue";
+//#region ../../packages/components/table/use/use-pagination.tsx
+function usePagination(tableRefProps) {
+	const pagiCfgRef = ref({});
+	watch(() => unref(tableRefProps).pagination, (pagination) => {
+		if (pagination) pagiCfgRef.value = {
+			...unref(pagiCfgRef),
+			...pagination ?? {}
+		};
+	});
+	const getPaginationInfo = computed(() => {
+		const { pagination, total, pageSize } = unref(tableRefProps);
+		if (!tableRefProps.value.showPager) return {};
+		return {
+			currentPage: 1,
+			pageSize,
+			total,
+			defaultPageSize: 15,
+			layout: "total, prev, pager, next, jumper",
+			pagePlacement: "bottom-right",
+			hideOnSinglePage: true,
+			...isBoolean(pagination) ? {} : pagination,
+			...unref(pagiCfgRef)
+		};
+	});
+	function setPagination(info) {
+		const paginationInfo = unref(getPaginationInfo);
+		pagiCfgRef.value = {
+			...paginationInfo,
+			...info
+		};
+	}
+	function getPagination() {
+		return unref(getPaginationInfo);
+	}
+	function getCurrentPage() {
+		return unref(getPaginationInfo).currentPage;
+	}
+	function getPageSize() {
+		return unref(getPaginationInfo).pageSize;
+	}
+	return {
+		getPagination,
+		getCurrentPage,
+		getPageSize,
+		getPaginationInfo,
+		setPagination
+	};
 }
-export {
-  v as usePagination
-};
+//#endregion
+export { usePagination };

package/es/components/table/use/use-table.js

@@ -1,55 +1,79 @@
-import { getDynamicProps as c } from "@vft/utils";
-import { tryOnBeforeUnmount as f } from "@vueuse/core";
-import { ref as l, unref as u, watch as b, toRaw as p } from "vue";
-function h(r) {
-  const n = l(null), o = l(!1), d = l(null);
-  let s;
-  function i(e, a) {
-    f(() => {
-      n.value = null, o.value = null;
-    }), !(u(o) && e === u(n)) && (n.value = e, d.value = a, r && e.setProps(c(r)), o.value = !0, s?.(), s = b(
-      () => r,
-      () => {
-        r && e.setProps(c(r));
-      },
-      {
-        immediate: !0,
-        deep: !0
-      }
-    ));
-  }
-  function t() {
-    const e = u(n);
-    return e || console.error(
-      "The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!"
-    ), e;
-  }
-  return [i, {
-    reload: async (e) => await t().reload(e),
-    setProps: (e) => {
-      t().setProps(e);
-    },
-    getDataSource: () => t().getDataSource(),
-    getRawDataSource: () => t().getRawDataSource(),
-    tableSearch: (e) => {
-      t().tableSearch(e);
-    },
-    getColumns: () => {
-      const e = t().getColumns() || [];
-      return p(e);
-    },
-    setColumns: (e) => {
-      t().setColumns(e);
-    },
-    setTableData: (e) => t()?.setTableData(e),
-    setPagination: (e) => t().setPagination(e),
-    deleteTableDataRecord: (e, a) => t().deleteTableDataRecord(e, a),
-    insertTableDataRecord: (e, a, m) => t().insertTableDataRecord(e, a, m),
-    updateTableDataRecord: (e, a) => t().updateTableDataRecord(e, a),
-    findTableDataRecord: (e) => t().findTableDataRecord(e),
-    expandTreeLevel: (e) => t().expandTreeLevel(e)
-  }];
+import { getDynamicProps } from "@vft/utils";
+import { tryOnBeforeUnmount } from "@vueuse/core";
+import { ref, toRaw, unref, watch } from "vue";
+//#region ../../packages/components/table/use/use-table.ts
+function useTable(tableProps) {
+	const tableRef = ref(null);
+	const loadedRef = ref(false);
+	const formRef = ref(null);
+	let stopWatch;
+	function register(instance, formInstance) {
+		tryOnBeforeUnmount(() => {
+			tableRef.value = null;
+			loadedRef.value = null;
+		});
+		if (unref(loadedRef) && instance === unref(tableRef)) return;
+		tableRef.value = instance;
+		formRef.value = formInstance;
+		tableProps && instance.setProps(getDynamicProps(tableProps));
+		loadedRef.value = true;
+		stopWatch?.();
+		stopWatch = watch(() => tableProps, () => {
+			tableProps && instance.setProps(getDynamicProps(tableProps));
+		}, {
+			immediate: true,
+			deep: true
+		});
+	}
+	function getTableInstance() {
+		const table = unref(tableRef);
+		if (!table) console.error("The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!");
+		return table;
+	}
+	return [register, {
+		reload: async (opt) => {
+			return await getTableInstance().reload(opt);
+		},
+		setProps: (props) => {
+			getTableInstance().setProps(props);
+		},
+		getDataSource: () => {
+			return getTableInstance().getDataSource();
+		},
+		getRawDataSource: () => {
+			return getTableInstance().getRawDataSource();
+		},
+		tableSearch: (value) => {
+			getTableInstance().tableSearch(value);
+		},
+		getColumns: () => {
+			return toRaw(getTableInstance().getColumns() || []);
+		},
+		setColumns: (columns) => {
+			getTableInstance().setColumns(columns);
+		},
+		setTableData: (values) => {
+			return getTableInstance()?.setTableData(values);
+		},
+		setPagination: (info) => {
+			return getTableInstance().setPagination(info);
+		},
+		deleteTableDataRecord: (row, rowKey) => {
+			return getTableInstance().deleteTableDataRecord(row, rowKey);
+		},
+		insertTableDataRecord: (record, index, parentRowId) => {
+			return getTableInstance().insertTableDataRecord(record, index, parentRowId);
+		},
+		updateTableDataRecord: (rowKey, record) => {
+			return getTableInstance().updateTableDataRecord(rowKey, record);
+		},
+		findTableDataRecord: (rowKey) => {
+			return getTableInstance().findTableDataRecord(rowKey);
+		},
+		expandTreeLevel: (level) => {
+			return getTableInstance().expandTreeLevel(level);
+		}
+	}];
 }
-export {
-  h as useTable
-};
+//#endregion
+export { useTable };

package/es/components/table/utils.js

@@ -1,15 +1,32 @@
-import { cloneDeep as t } from "@vft/utils";
-const u = (r) => {
-  const e = t(r);
-  return e.required = !0, e;
-}, c = (r) => {
-  const e = t(r);
-  return delete e.required, e;
-}, l = (r) => r?.length ? {
-  formatter: ({ cellValue: e }) => r.filter((o) => o.value === e)[0]?.label
-} : {};
-export {
-  u as addRequire,
-  c as removeRequire,
-  l as selectMapping
+import { cloneDeep } from "@vft/utils";
+//#region ../../packages/components/table/utils.ts
+/**
+* 添加必填标记
+* @param obj - 需要添加必填标记的对象
+* @returns 添加了 required 属性的新对象
+*/
+const addRequire = (obj) => {
+	const _obj = cloneDeep(obj);
+	_obj.required = true;
+	return _obj;
 };
+/**
+* 移除必填标记
+* @param obj - 需要移除必填标记的对象
+* @returns 移除了 required 属性的新对象
+*/
+const removeRequire = (obj) => {
+	const _obj = cloneDeep(obj);
+	delete _obj.required;
+	return _obj;
+};
+/**
+* 选择器映射函数，用于将值映射为标签显示
+* @param list - 选项列表，包含 value 和 label 属性
+* @returns 格式化配置对象
+*/
+const selectMapping = (list) => {
+	return list?.length ? { formatter: ({ cellValue }) => list.filter((item) => item.value === cellValue)[0]?.label } : {};
+};
+//#endregion
+export { addRequire, removeRequire, selectMapping };

package/es/components/table/vxe-runtime.js

@@ -1,16 +1,22 @@
-import { VxeUI as e, VxeIcon as r, VxeButton as u, VxeTooltip as i } from "vxe-pc-ui";
-import { VxeToolbar as p, VxeGrid as m, VxeTable as s } from "vxe-table";
-import { VxeGrid as T } from "vxe-table";
-import x from "vxe-pc-ui/lib/language/zh-CN";
-import "vxe-table/es/table/style.min.css";
-import "vxe-table/es/toolbar/style.min.css";
-import "vxe-table/styles/cssvar.scss";
-import "vxe-pc-ui/styles/cssvar.scss";
-let o = !1;
-function C(t) {
-  o || (o = !0, e.setI18n("zh-CN", x), e.setLanguage("zh-CN"), t?.use(p).use(r).use(u).use(i).use(m).use(s));
+import { VxeButton, VxeIcon, VxeTooltip, VxeUI } from "vxe-pc-ui";
+import { VxeGrid, VxeTable, VxeToolbar } from "vxe-table";
+import zhCN from "vxe-pc-ui/lib/language/zh-CN";
+//#region ../../packages/components/table/vxe-runtime.ts
+let setup = false;
+/**
+* vxe 运行时初始化（i18n + 全局注册）。
+*
+* 本模块通过 table.vue 的 defineAsyncComponent **动态 import**，使 vxe（js ~568K +
+* css ~249K）整体成为按需 chunk，不再被 vft 静态依赖拖进首屏；首页/无表格页零下载。
+* 这里用「静态 import 组件 + css」而非组件内动态 import css，保证样式注入方式与原
+* 全局 initTable 完全一致（动态 import css 在组件里不可靠，会丢样式）。
+*/
+function setupVxe(app) {
+	if (setup) return;
+	setup = true;
+	VxeUI.setI18n("zh-CN", zhCN);
+	VxeUI.setLanguage("zh-CN");
+	app?.use(VxeToolbar).use(VxeIcon).use(VxeButton).use(VxeTooltip).use(VxeGrid).use(VxeTable);
 }
-export {
-  T as VxeGrid,
-  C as setupVxe
-};
+//#endregion
+export { VxeGrid, setupVxe };

package/es/components/tabs/index.js

@@ -1,17 +1,9 @@
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "vue";
-import { withInstall as o, withNoopInstall as m } from "../../utils/vue/install.js";
-import "lodash-es";
-import "../form/index.js";
-import t from "./tab-pane.vue2.js";
-import r from "./tabs.vue2.js";
-import { TabsRootContextKey as h } from "./types.js";
-const c = o(r, { TabPane: t }), T = m(t);
-export {
-  h as TabsRootContextKey,
-  T as VftTabPane,
-  c as VftTabs,
-  c as default
-};
+import { withInstall, withNoopInstall } from "../../utils/vue/install.js";
+import tabs_default from "./tabs.js";
+import { TabsRootContextKey } from "./types.js";
+import tab_pane_default from "./tab-pane.js";
+//#region ../../packages/components/tabs/index.ts
+const VftTabs = withInstall(tabs_default, { TabPane: tab_pane_default });
+const VftTabPane = withNoopInstall(tab_pane_default);
+//#endregion
+export { TabsRootContextKey, VftTabPane, VftTabs, VftTabs as default };

package/es/components/tabs/style/css.js

@@ -1,2 +1,2 @@
-import "vft/theme-style/base.css";
+import "../../base/style/css.js";
 import "vft/theme-style/vft-tabs.css";

package/es/components/tabs/style/index.js

@@ -1,2 +1,2 @@
-import "vft/theme-style/src/base.scss";
+import "../../base/style/index.js";
 import "vft/theme-style/src/tabs.scss";

package/es/components/tabs/tab-bar.js

@@ -0,0 +1,5 @@
+import tab_bar_vue_vue_type_script_setup_true_lang_default from "./tab-bar.vue_vue_type_script_setup_true_lang.js";
+//#region ../../packages/components/tabs/tab-bar.vue
+var tab_bar_default = tab_bar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { tab_bar_default as default };

package/es/components/tabs/tab-bar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { TabsRootContextKey } from "./types.js";
+import { capitalize } from "@vft/utils";
+import { useResizeObserver } from "@vueuse/core";
+import { isUndefined as isUndefined$1 } from "lodash-es";
+import { computed, createElementBlock, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, unref, watch } from "vue";
+//#region ../../packages/components/tabs/tab-bar.vue?vue&type=script&setup=true&lang.ts
+var tab_bar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "tab-bar",
+	props: {
+		tabs: {
+			type: Array,
+			required: true
+		},
+		tabRefs: {
+			type: Object,
+			required: false
+		},
+		tabBarReduceDistance: {
+			type: Number,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const rootTabs = inject(TabsRootContextKey);
+		const ns = useNamespace("tabs");
+		const barRef = ref();
+		const barStyle = ref();
+		const isLoad = ref(false);
+		const getBarStyle = () => {
+			let offset = 0;
+			let tabSize = 0;
+			const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+			const sizeDir = sizeName === "width" ? "x" : "y";
+			const position = sizeDir === "x" ? "left" : "top";
+			props.tabs.every((tab) => {
+				if (isUndefined$1(tab.paneName)) return false;
+				const $el = props.tabRefs?.[tab.paneName];
+				if (!$el) return false;
+				if (!tab.active) return true;
+				offset = $el[`offset${capitalize(position)}`];
+				tabSize = $el[`client${capitalize(sizeName)}`];
+				const tabStyles = window.getComputedStyle($el);
+				if (sizeName === "width") {
+					tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
+					offset += Number.parseFloat(tabStyles.paddingLeft);
+				}
+				return false;
+			});
+			const _tabBarReduceDistance = props.tabBarReduceDistance || 0;
+			return {
+				[sizeName]: `${tabSize - _tabBarReduceDistance}px`,
+				transform: `translate${capitalize(sizeDir)}(${offset + _tabBarReduceDistance / 2}px)`
+			};
+		};
+		const update = () => barStyle.value = getBarStyle();
+		const tabObservers = [];
+		const observerTabs = () => {
+			tabObservers.forEach((observer) => observer.stop());
+			tabObservers.length = 0;
+			Object.values(props.tabRefs || {}).forEach((tab) => {
+				tabObservers.push(useResizeObserver(tab, update));
+			});
+		};
+		watch(() => props.tabs, async () => {
+			await nextTick();
+			update();
+			observerTabs();
+		}, { immediate: true });
+		const barObserver = useResizeObserver(barRef, () => update());
+		onBeforeUnmount(() => {
+			tabObservers.forEach((observer) => observer.stop());
+			tabObservers.length = 0;
+			barObserver.stop();
+		});
+		const _tabPosition = computed(() => {
+			return rootTabs.props.tabPosition;
+		});
+		onMounted(() => {
+			setTimeout(() => {
+				isLoad.value = true;
+			}, 100);
+		});
+		__expose({
+			ref: barRef,
+			update
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "barRef",
+				ref: barRef,
+				class: normalizeClass([
+					unref(ns).e("active-bar"),
+					unref(ns).is(_tabPosition.value),
+					{ "is-load": isLoad.value }
+				]),
+				style: normalizeStyle(barStyle.value)
+			}, null, 6);
+		};
+	}
+});
+//#endregion
+export { tab_bar_vue_vue_type_script_setup_true_lang_default as default };

package/es/components/tabs/tab-nav.js

@@ -0,0 +1,5 @@
+import tab_nav_vue_vue_type_script_setup_true_lang_default from "./tab-nav.vue_vue_type_script_setup_true_lang.js";
+//#region ../../packages/components/tabs/tab-nav.vue
+var tab_nav_default = tab_nav_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { tab_nav_default as default };