tiddy 2.6.3 → 2.7.0

package/dist/index.d.ts

@@ -163,21 +163,37 @@ declare const arrayFieldPropsDef: {
     type: PropType<AnyFunction>;
   };
   outerEmptyAction: {
-    type: StringConstructor;
+    type: PropType<OrArray<SlotDef>>;
     default: null;
   };
   emptyAction: {
-    type: StringConstructor;
+    type: PropType<OrArray<SlotDef>>;
     default: null;
   };
   rowAction: {
-    type: StringConstructor;
+    type: PropType<OrArray<SlotDef>>;
     default: null;
   };
   lineStyle: {
     type: PropType<CSSProperties>;
     default: () => {};
   };
+  item: {
+    type: PropType<OrRef<TdFormItemProps>>;
+    default: () => {};
+  };
+  lineClass: {
+    type: StringConstructor;
+    default: string;
+  };
+  rowFieldClass: {
+    type: StringConstructor;
+    default: string;
+  };
+  rowActionClass: {
+    type: StringConstructor;
+    default: string;
+  };
   mandatory: {
     type: BooleanConstructor;
     default: boolean;
@@ -211,6 +227,17 @@ declare const layoutFieldPropsDef: {
     default: string;
     required: true;
   };
+  component: {
+    type: PropType<string | Component | Raw<Component>>;
+  };
+  widget: {
+    type: PropType<Record<string, any>>;
+    default: () => {};
+  };
+  on: {
+    type: PropType<Record<string, AnyFunction>>;
+    default: () => {};
+  };
   slots: {
     type: PropType<OrArray<SlotDef>>;
     default: () => never[];

package/dist/index.js

@@ -173,21 +173,49 @@ const arrayFieldPropsDef = {
 	},
 	rawValue: { type: Function },
 	outerEmptyAction: {
-		type: String,
+		type: [
+			Array,
+			Object,
+			String
+		],
 		default: null
 	},
 	emptyAction: {
-		type: String,
+		type: [
+			Array,
+			Object,
+			String
+		],
 		default: null
 	},
 	rowAction: {
-		type: String,
+		type: [
+			Array,
+			Object,
+			String
+		],
 		default: null
 	},
 	lineStyle: {
 		type: Object,
 		default: () => ({})
 	},
+	item: {
+		type: Object,
+		default: () => ({})
+	},
+	lineClass: {
+		type: String,
+		default: ""
+	},
+	rowFieldClass: {
+		type: String,
+		default: ""
+	},
+	rowActionClass: {
+		type: String,
+		default: ""
+	},
 	mandatory: {
 		type: Boolean,
 		default: false
@@ -201,6 +229,19 @@ const layoutFieldPropsDef = {
 		default: "layout",
 		required: true
 	},
+	component: { type: [
+		String,
+		Object,
+		Function
+	] },
+	widget: {
+		type: Object,
+		default: () => ({})
+	},
+	on: {
+		type: Object,
+		default: () => ({})
+	},
 	slots: {
 		type: [
 			Array,
@@ -580,8 +621,6 @@ var widget_field_default = widget_field_vue_vue_type_script_setup_true_lang_defa
 
 //#endregion
 //#region src/form/array-field.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "row-item" };
-const _hoisted_2 = { class: "row-action" };
 var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "array-field",
@@ -591,14 +630,14 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const attrs = useAttrs();
 		const fieldProps = computed(() => {
 			return {
-				...cut(props, [(k) => k.endsWith("Action") || ["lineStyle"].includes(k)]),
+				...cut(props, [(k) => k.endsWith("Action") || k.endsWith("Class") || ["lineStyle", "item"].includes(k)]),
 				...attrs
 			};
 		});
 		const formCtx = inject(formCtxKey);
-		const OuterEmptySlot = formCtx.getParentSlots(resolveSlotNames(props.outerEmptyAction ?? `${props.prop}-action_outer`))[0];
-		const EmptySlot = formCtx.getParentSlots(resolveSlotNames(props.emptyAction ?? `${props.prop}-action_empty`))[0];
-		const RowSlot = formCtx.getParentSlots(resolveSlotNames(props.rowAction ?? `${props.prop}-action_row`))[0];
+		const OuterEmptySlot = formCtx.getParentSlots(resolveSlotNames(props.outerEmptyAction, `${props.prop}-action_outer`))[0];
+		const EmptySlot = formCtx.getParentSlots(resolveSlotNames(props.emptyAction, `${props.prop}-action_empty`))[0];
+		const RowSlot = formCtx.getParentSlots(resolveSlotNames(props.rowAction, `${props.prop}-action_row`))[0];
 		const parentFullProp = computed(() => attrs["full-prop"] || "");
 		const values = computed(() => {
 			return getDeepValue(formCtx.model, parentFullProp.value, { fallback: [] });
@@ -610,6 +649,10 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			p.labelPosition = indexProp(p.labelPosition, -1);
 			return p;
 		});
+		const itemAttrs = computed(() => {
+			const entries = Object.entries(unref(props.item)).map(([k, v]) => [k, unref(v)]);
+			return Object.assign({}, Object.fromEntries(entries), labelProps.value);
+		});
 		function indexProp(v, index, value) {
 			if (isFunction(v)) return v(index);
 			if (isNullOrUndef(value)) return v;
@@ -653,7 +696,7 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				key: 0,
 				add: lineAction.add.bind(null, -1),
 				empty: true
-			}, null, 8, ["add"])) : (openBlock(), createBlock(form_item_default, mergeProps({ key: 1 }, labelProps.value, { class: "layout-form-item" }), {
+			}, null, 8, ["add"])) : (openBlock(), createBlock(form_item_default, mergeProps({ key: 1 }, itemAttrs.value, { class: "layout-form-item" }), {
 				default: withCtx(() => [unref(EmptySlot) && !values.value.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(EmptySlot).component), {
 					key: 0,
 					add: lineAction.add.bind(null, -1),
@@ -661,9 +704,9 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				}, null, 8, ["add"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (v, vi) => {
 					return openBlock(), createElementBlock("div", {
 						key: unref(getKey)(v),
-						class: "list-row",
+						class: normalizeClass(["list-row", _ctx.lineClass]),
 						style: normalizeStyle(_ctx.lineStyle)
-					}, [createElementVNode("div", _hoisted_1, [createVNode(form_field_default, mergeProps({ "name-space": "layout-form-item" }, { ref_for: true }, fieldProps.value, {
+					}, [createElementVNode("div", { class: normalizeClass(["row-item", _ctx.rowFieldClass]) }, [createVNode(form_field_default, mergeProps({ "name-space": "layout-form-item" }, { ref_for: true }, fieldProps.value, {
 						label: indexProp(_ctx.label, vi),
 						"label-width": indexProp(_ctx.labelWidth, vi),
 						"label-position": indexProp(_ctx.labelPosition, vi),
@@ -676,7 +719,7 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 						"label-position",
 						"full-prop",
 						"prop"
-					])]), createElementVNode("div", _hoisted_2, [unref(RowSlot) ? (openBlock(), createBlock(resolveDynamicComponent(unref(RowSlot).component), {
+					])], 2), createElementVNode("div", { class: normalizeClass(["row-action", _ctx.rowActionClass]) }, [unref(RowSlot) ? (openBlock(), createBlock(resolveDynamicComponent(unref(RowSlot).component), {
 						key: 0,
 						up: lineAction.up.bind(null, vi),
 						down: lineAction.down.bind(null, vi),
@@ -700,7 +743,7 @@ var array_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 						"single",
 						"row",
 						"full-prop"
-					])) : createCommentVNode("v-if", true)])], 4);
+					])) : createCommentVNode("v-if", true)], 2)], 6);
 				}), 128))]),
 				_: 1
 			}, 16));
@@ -721,7 +764,17 @@ var layout_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const props = __props;
 		const attrs = useAttrs();
 		const layoutProps = computed(() => {
-			return Object.assign({}, cut(attrs, ["full-prop"]), cut(props, ["fields"]));
+			const p = Object.assign({}, cut(attrs, [
+				"full-prop",
+				"widget",
+				"on"
+			]), cut(props, ["fields"]));
+			const w = Object.fromEntries(Object.entries(unref(props.widget)).map(([k, v]) => [k, unref(v)]));
+			return Object.assign(p, w);
+		});
+		const LayoutComponent = computed(() => {
+			if (props.component) return props.component;
+			return "div";
 		});
 		const formCtx = inject(formCtxKey);
 		const subFields = computed(() => {
@@ -729,22 +782,32 @@ var layout_field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				return [field, { "full-prop": [attrs["full-prop"], field.prop].filter(Boolean).join(".") }];
 			});
 		});
-		const { prefix: prefixSlots, suffix: suffixSlots } = groupBy(formCtx.getParentSlots(ensureArray(props.slots)), (slot) => slot.name.match(/^[a-z]+/i)?.[0] ?? "");
+		const layoutSlots = formCtx.getParentSlots(ensureArray(props.slots));
+		const subSlots = props.component ? layoutSlots : [];
+		const { prefix: prefixSlots, suffix: suffixSlots } = groupBy(layoutSlots, (slot) => slot.name.match(/^[a-z]+/i)?.[0] ?? "");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ class: "layout-item" }, layoutProps.value), [
-				(openBlock(true), createElementBlock(Fragment, null, renderList(unref(prefixSlots), (psc) => {
-					return openBlock(), createBlock(deep_slot_default, mergeProps({ key: psc.name }, { ref_for: true }, psc, { "ctx-key": unref(formCtxKey) }), null, 16, ["ctx-key"]);
-				}), 128)),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(subFields.value, (field) => {
-					return openBlock(), createBlock(form_field_default, mergeProps({ key: unref(getKey)(field[0]) }, { ref_for: true }, {
-						...field[0],
-						...field[1]
-					}), null, 16);
-				}), 128)),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(unref(suffixSlots), (psc) => {
-					return openBlock(), createBlock(deep_slot_default, mergeProps({ key: psc.name }, { ref_for: true }, psc, { "ctx-key": unref(formCtxKey) }), null, 16, ["ctx-key"]);
-				}), 128))
-			], 16);
+			return openBlock(), createBlock(resolveDynamicComponent(LayoutComponent.value), mergeProps({ class: "layout-item" }, layoutProps.value, toHandlers(_ctx.on)), createSlots({
+				default: withCtx(() => [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(prefixSlots), (psc) => {
+						return openBlock(), createBlock(deep_slot_default, mergeProps({ key: psc.name }, { ref_for: true }, psc, { "ctx-key": unref(formCtxKey) }), null, 16, ["ctx-key"]);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(subFields.value, (field) => {
+						return openBlock(), createBlock(form_field_default, mergeProps({ key: unref(getKey)(field[0]) }, { ref_for: true }, {
+							...field[0],
+							...field[1]
+						}), null, 16);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(suffixSlots), (psc) => {
+						return openBlock(), createBlock(deep_slot_default, mergeProps({ key: psc.name }, { ref_for: true }, psc, { "ctx-key": unref(formCtxKey) }), null, 16, ["ctx-key"]);
+					}), 128))
+				]),
+				_: 2
+			}, [renderList(unref(subSlots), (sl) => {
+				return {
+					name: sl.name,
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, sl.name, normalizeProps(guardReactiveProps(scope)))])
+				};
+			})]), 1040);
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiddy",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "packageManager": "pnpm@10.11.0",
   "description": "A set of Vue 3 components based on element-plus",
   "type": "module",