@kine-design/crud 0.0.1-beta.21 → 0.0.1-beta.23

package/dist/crud.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Teleport, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, resolveComponent, shallowRef, toRef, triggerRef, watch } from "vue";
+import { Comment, Fragment, Teleport, cloneVNode, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, resolveComponent, shallowRef, toRef, triggerRef, watch } from "vue";
 import { QueryClient, VueQueryPlugin, useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { createPinia, defineStore } from "pinia";
 import { useRoute, useRouter } from "vue-router";
@@ -283,22 +283,127 @@ function useTable() {
 	};
 }
 //#endregion
-//#region ../ui/components/table/KTable.tsx
+//#region ../core/components/template/table/index.ts
 /**
-* @description kine-ui table 组件
+* @description table core 导出
 * @author 阿怪
-* @date 2026/2/26
+* @date 2026/2/25
 * @version v1.0.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
-var { props: props$9 } = {
+var TableCore = {
 	props: props$10,
 	useTable
 };
-var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
+//#endregion
+//#region ../core/compositions/common/testAnchor.ts
+/**
+* @description Test anchor system: provide/inject keys, types, and kDefineComponent wrapper
+* @author kine-design
+* @date 2026/4/28
+* @version v1.0.0
+*
+* Renders business-semantic `data-k` attributes on DOM elements when testAnchor is enabled,
+* allowing E2E tests to target components by stable identifiers.
+*/
+/** Global switch provided by KConfigProvider to enable data-k rendering */
+var K_TEST_ANCHOR_KEY = Symbol("k-test-anchor");
+/** Field identity provided by KFormItem so child inputs inherit field name */
+var K_FIELD_KEY = Symbol("k-field");
+/**
+* Extract text content from a VNode tree (for slotText mode).
+* Walks children recursively, concatenating string segments.
+*/
+function extractSlotText(nodes) {
+	if (!nodes) return "";
+	let text = "";
+	for (const node of nodes) if (typeof node.children === "string") text += node.children;
+	else if (Array.isArray(node.children)) text += extractSlotText(node.children);
+	return text.trim();
+}
+/**
+* Resolve the data-k value for a component instance.
+* Returns undefined when testAnchor is off or no identity can be derived.
+*/
+function resolveDataK(config, props, attrs, fieldFromParent, slotNodes) {
+	const override = attrs[`k-${config.type}`];
+	if (typeof override === "string" && override) return `${config.type}:${override}`;
+	if (config.prop) {
+		const val = props[config.prop];
+		if (typeof val === "string" && val) return `${config.type}:${val}`;
+	}
+	if (config.slotText && slotNodes) {
+		const text = extractSlotText(slotNodes);
+		if (text) return `${config.type}:${text}`;
+	}
+	if (config.slotText && typeof props.text === "string" && props.text) return `${config.type}:${props.text}`;
+	if (config.type === "field" && !config.prop && fieldFromParent) return `${config.type}:${fieldFromParent}`;
+}
+/**
+* Inject data-k attribute into a VNode.
+* Uses cloneVNode to avoid mutating the original.
+*/
+function injectDataK(vnode, dataK) {
+	return cloneVNode(vnode, { "data-k": dataK });
+}
+/**
+* Wrapper around Vue's defineComponent that automatically injects `data-k`
+* test anchor attributes when testAnchor is enabled via KConfigProvider.
+*
+* Usage:
+* ```tsx
+* export default kDefineComponent((_props, ctx) => {
+*   return () => <div class="k-form-item">...</div>;
+* }, {
+*   name: 'KFormItem',
+*   props: FormCore.formItemProps,
+*   kAnchor: { type: 'field', prop: 'prop' },
+* });
+* ```
+*/
+function kDefineComponent(setup, options) {
+	const { kAnchor, ...defineOptions } = options;
+	return defineComponent((rawProps, ctx) => {
+		const render = setup(rawProps, ctx);
+		if (!kAnchor) return render;
+		const testAnchor = inject(K_TEST_ANCHOR_KEY, void 0);
+		const parentField = kAnchor.type === "field" && !kAnchor.prop ? inject(K_FIELD_KEY, void 0) : void 0;
+		return () => {
+			const vnode = render();
+			if (!testAnchor?.value) return vnode;
+			const props = rawProps;
+			const slotNodes = kAnchor.slotText ? ctx.slots.default?.() ?? void 0 : void 0;
+			const dataK = resolveDataK(kAnchor, props, ctx.attrs, parentField?.value, slotNodes);
+			if (!dataK) return vnode;
+			if (vnode === null || vnode === void 0) return vnode;
+			if (Array.isArray(vnode)) {
+				if (vnode.length === 0) return vnode;
+				const first = vnode[0];
+				if (first && typeof first === "object") return [injectDataK(first, dataK), ...vnode.slice(1)];
+				return vnode;
+			}
+			return injectDataK(vnode, dataK);
+		};
+	}, defineOptions);
+}
+//#endregion
+//#region ../ui/components/table/KTable.tsx
+/**
+* @description kine-ui table 组件
+* @author 阿怪
+* @date 2026/2/26
+* @version v1.1.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
+*/
+var { props: props$9 } = TableCore;
+var KTable_default = kDefineComponent((_props, { slots }) => {
 	const p = _props;
 	const { initTable } = useTable();
+	const testAnchor = inject(K_TEST_ANCHOR_KEY, void 0);
 	return () => {
 		const columns = [];
 		(slots.default?.() ?? []).forEach((s) => {
@@ -314,6 +419,7 @@ var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
 			empty: createVNode("tbody", { "class": "m-table-empty k-table-empty" }, [createVNode("tr", null, [createVNode("th", { "colspan": columns.length }, [slots.empty?.() ?? "暂无数据"])])]),
 			tbodyTr: ({ data, param, slot, style: cellStyle, slotInfo }) => createVNode("td", {
 				"style": cellStyle,
+				"data-k": testAnchor?.value && param ? `col:${param}` : void 0,
 				"class": [
 					"m-td",
 					"k-td",
@@ -360,7 +466,11 @@ var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
 	};
 }, {
 	name: "KTable",
-	props: props$9
+	props: props$9,
+	kAnchor: {
+		type: "table",
+		prop: "name"
+	}
 });
 //#endregion
 //#region ../core/components/base/input/api.ts
@@ -7068,11 +7178,13 @@ function useComponentSize(props) {
 * @description kine-ui button 组件
 * @author 阿怪
 * @date 2026/2/27
-* @version v1.1.0
+* @version v1.2.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.2.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
-var KButton_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
+var KButton_default = kDefineComponent((_props, ctx) => {
 	const props = _props;
 	const componentSize = useComponentSize(props);
 	return () => {
@@ -7095,7 +7207,11 @@ var KButton_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
 	};
 }, {
 	name: "KButton",
-	props: ButtonCore.props
+	props: ButtonCore.props,
+	kAnchor: {
+		type: "action",
+		slotText: true
+	}
 });
 //#endregion
 //#region components/searchTable/KSearchTable.tsx
@@ -7396,11 +7512,13 @@ var KImage_default = /* @__PURE__ */ defineComponent((_props, { slots, emit }) =
 * @description kine-ui input 组件
 * @author 阿怪
 * @date 2026/2/26
-* @version v1.0.0
+* @version v1.1.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
-var KInput_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
+var KInput_default = kDefineComponent((_props, ctx) => {
 	const props = _props;
 	const size = useComponentSize(props);
 	return () => {
@@ -7447,7 +7565,8 @@ var KInput_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
 		"focus",
 		"blur",
 		"clear"
-	]
+	],
+	kAnchor: { type: "field" }
 });
 //#endregion
 //#region ../ui/constants.ts
@@ -7465,14 +7584,15 @@ var DROPDOWN_HIDDEN_STYLE = {
 * @description kine-ui select 组件
 * @author 阿怪
 * @date 2026/2/26
-* @version v1.0.1
+* @version v1.1.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 *
 * v1.0.1 消费 inputReadonly，支持 filterable 可搜索模式 阿怪 2026/2/27
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
 var { props: selectProps, useSelect } = SelectCore;
-var KSelect_default = /* @__PURE__ */ defineComponent((_props, _ctx) => {
+var KSelect_default = kDefineComponent((_props, _ctx) => {
 	const props = _props;
 	const { slots, expose } = _ctx;
 	const componentSize = useComponentSize(props);
@@ -7657,7 +7777,8 @@ var KSelect_default = /* @__PURE__ */ defineComponent((_props, _ctx) => {
 		"select",
 		"focus",
 		"blur"
-	]
+	],
+	kAnchor: { type: "field" }
 });
 //#endregion
 //#region components/pageHeader/KPageHeader.tsx
@@ -8751,7 +8872,6 @@ function createCrudAppWithOptions(rootComponent, options) {
 			options.router.beforeEach(guard);
 		}
 	}
-	if (options.router) app.use(options.router);
 	setupCrud(app, options.query);
 	if (options.request) {
 		const requestOptions = { ...options.request };
@@ -8763,7 +8883,10 @@ function createCrudAppWithOptions(rootComponent, options) {
 	if (options.error) createErrorHandler(app, options.error);
 	const enhancedApp = Object.create(app);
 	enhancedApp.mount = (rootContainer) => {
-		const doMount = () => app.mount(rootContainer);
+		const doMount = () => {
+			if (options.router) app.use(options.router);
+			app.mount(rootContainer);
+		};
 		if (auth) auth.restore().finally(doMount);
 		else doMount();
 		return app;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kine-design/crud",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.23",
   "type": "module",
   "main": "./dist/crud.js",
   "types": "./dist/index.d.ts",
@@ -9,8 +9,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3",
-    "@kine-design/core": "0.0.1-beta.6",
-    "kine-ui": "0.0.1-beta.12"
+    "@kine-design/core": "0.0.1-beta.7",
+    "kine-ui": "0.0.1-beta.15"
   },
   "publishConfig": {
     "access": "public",

package/setup.ts

@@ -244,22 +244,15 @@ function createCrudAppWithOptions(
     }
   }
 
-  // 2. Router（install 时触发初始导航，此时守卫已注册）
-  if (options.router) {
-    app.use(options.router as { install: (app: App) => void });
-  }
-
-  // 3. TanStack Query
+  // 2. TanStack Query
   setupCrud(app, options.query);
 
-  // 4. Request
+  // 3. Request
   if (options.request) {
     const requestOptions: RequestOptions = { ...options.request };
-    // 如果有 auth，自动注入 getToken
     if (auth && !requestOptions.getToken) {
       requestOptions.getToken = () => auth!.token.value;
     }
-    // 如果有 auth，自动注入 onUnauthorized
     if (auth && !requestOptions.onUnauthorized) {
       requestOptions.onUnauthorized = options.auth?.onUnauthorized;
     }
@@ -267,15 +260,23 @@ function createCrudAppWithOptions(
     app.provide(REQUEST_CLIENT_KEY, client);
   }
 
-  // 5. Error Handler
+  // 4. Error Handler
   if (options.error) {
     createErrorHandler(app, options.error);
   }
 
   // 返回增强的 app，mount 前先恢复 auth
+  // Router 安装延迟到 doMount：app.use(router) 会触发初始导航，
+  // 必须在 auth.restore() 完成（permissions 已加载）之后执行，否则
+  // authGuard 会在 permissions 为空时将受保护路由重定向到 /403。
   const enhancedApp: EnhancedApp = Object.create(app);
   enhancedApp.mount = (rootContainer: string | Element): App => {
-    const doMount = () => app.mount(rootContainer);
+    const doMount = () => {
+      if (options.router) {
+        app.use(options.router as { install: (app: App) => void });
+      }
+      app.mount(rootContainer);
+    };
     if (auth) {
       auth.restore().finally(doMount);
     } else {