pdyform 1.0.0

package/packages/vue/dist/index.mjs

@@ -0,0 +1,183 @@
+import { defineComponent as p, computed as F, openBlock as t, createElementBlock as a, normalizeClass as v, toDisplayString as o, createCommentVNode as b, createElementVNode as f, Fragment as y, renderList as g, ref as V, onMounted as $, withModifiers as S, createBlock as E } from "vue";
+import { getDefaultValues as N, validateField as C } from "pdyform/core";
+const A = ["for"], B = ["id", "placeholder", "disabled", "name", "value"], D = ["id", "disabled", "name", "value"], I = {
+  value: "",
+  disabled: ""
+}, U = ["value"], M = {
+  key: 3,
+  class: "flex flex-wrap gap-4"
+}, R = ["disabled", "checked", "onChange"], j = {
+  key: 4,
+  class: "flex flex-wrap gap-4"
+}, z = ["disabled", "name", "checked", "onChange"], L = ["id", "type", "placeholder", "disabled", "name", "value"], O = {
+  key: 6,
+  class: "text-sm text-muted-foreground"
+}, T = {
+  key: 7,
+  class: "text-sm font-medium text-destructive"
+}, w = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", q = /* @__PURE__ */ p({
+  __name: "FormFieldRenderer",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: x }) {
+    const c = e, k = x, n = F(() => `field-${c.field.name}`), r = (m) => {
+      k("update:modelValue", m);
+    }, h = (m, s) => {
+      const l = Array.isArray(c.modelValue) ? [...c.modelValue] : [];
+      if (s)
+        l.push(m);
+      else {
+        const d = l.indexOf(m);
+        d > -1 && l.splice(d, 1);
+      }
+      r(l);
+    };
+    return (m, s) => (t(), a("div", {
+      class: v(["space-y-2", e.field.className])
+    }, [
+      e.field.label ? (t(), a("label", {
+        key: 0,
+        for: n.value,
+        class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      }, o(e.field.label), 9, A)) : b("", !0),
+      e.field.type === "textarea" ? (t(), a("textarea", {
+        key: 1,
+        id: n.value,
+        class: v([w, "min-h-[80px]"]),
+        placeholder: e.field.placeholder,
+        disabled: e.field.disabled,
+        name: e.field.name,
+        value: e.modelValue,
+        onInput: s[0] || (s[0] = (l) => r(l.target.value))
+      }, null, 42, B)) : e.field.type === "select" ? (t(), a("select", {
+        key: 2,
+        id: n.value,
+        class: v(w),
+        disabled: e.field.disabled,
+        name: e.field.name,
+        value: e.modelValue,
+        onChange: s[1] || (s[1] = (l) => r(l.target.value))
+      }, [
+        f("option", I, o(e.field.placeholder || "Select an option"), 1),
+        (t(!0), a(y, null, g(e.field.options, (l) => (t(), a("option", {
+          key: l.value,
+          value: l.value
+        }, o(l.label), 9, U))), 128))
+      ], 40, D)) : e.field.type === "checkbox" ? (t(), a("div", M, [
+        (t(!0), a(y, null, g(e.field.options, (l) => (t(), a("label", {
+          key: l.value,
+          class: "flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        }, [
+          f("input", {
+            type: "checkbox",
+            class: "h-4 w-4 rounded border-primary text-primary focus:ring-primary",
+            disabled: e.field.disabled,
+            checked: Array.isArray(e.modelValue) && e.modelValue.includes(l.value),
+            onChange: (d) => h(l.value, d.target.checked)
+          }, null, 40, R),
+          f("span", null, o(l.label), 1)
+        ]))), 128))
+      ])) : e.field.type === "radio" ? (t(), a("div", j, [
+        (t(!0), a(y, null, g(e.field.options, (l) => (t(), a("label", {
+          key: l.value,
+          class: "flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        }, [
+          f("input", {
+            type: "radio",
+            class: "h-4 w-4 border-primary text-primary focus:ring-primary",
+            disabled: e.field.disabled,
+            name: e.field.name,
+            checked: e.modelValue === l.value,
+            onChange: (d) => r(l.value)
+          }, null, 40, z),
+          f("span", null, o(l.label), 1)
+        ]))), 128))
+      ])) : (t(), a("input", {
+        key: 5,
+        id: n.value,
+        type: e.field.type,
+        class: v(w),
+        placeholder: e.field.placeholder,
+        disabled: e.field.disabled,
+        name: e.field.name,
+        value: e.modelValue,
+        onInput: s[2] || (s[2] = (l) => r(l.target.value))
+      }, null, 40, L)),
+      e.field.description ? (t(), a("p", O, o(e.field.description), 1)) : b("", !0),
+      e.error ? (t(), a("p", T, o(e.error), 1)) : b("", !0)
+    ], 2));
+  }
+}), G = {
+  key: 0,
+  class: "space-y-1"
+}, H = {
+  key: 0,
+  class: "text-2xl font-bold tracking-tight"
+}, J = {
+  key: 1,
+  class: "text-muted-foreground"
+}, K = { class: "space-y-4" }, P = ["disabled"], X = /* @__PURE__ */ p({
+  __name: "DynamicForm",
+  props: {
+    schema: {},
+    className: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: x }) {
+    const c = e, k = x, n = V({}), r = V({}), h = V(!1);
+    $(() => {
+      n.value = N(c.schema.fields);
+    });
+    const m = (l, d) => {
+      n.value[l] = d;
+      const i = c.schema.fields.find((u) => u.name === l);
+      if (i) {
+        const u = C(d, i);
+        r.value[l] = u || "";
+      }
+    }, s = () => {
+      h.value = !0;
+      const l = {};
+      let d = !1;
+      c.schema.fields.forEach((i) => {
+        const u = C(n.value[i.name], i);
+        u && (l[i.name] = u, d = !0);
+      }), r.value = l, d || k("submit", { ...n.value }), h.value = !1;
+    };
+    return (l, d) => (t(), a("form", {
+      class: v(["space-y-6", e.className]),
+      onSubmit: S(s, ["prevent"])
+    }, [
+      e.schema.title || e.schema.description ? (t(), a("div", G, [
+        e.schema.title ? (t(), a("h2", H, o(e.schema.title), 1)) : b("", !0),
+        e.schema.description ? (t(), a("p", J, o(e.schema.description), 1)) : b("", !0)
+      ])) : b("", !0),
+      f("div", K, [
+        (t(!0), a(y, null, g(e.schema.fields, (i) => (t(), a(y, {
+          key: i.id
+        }, [
+          i.hidden ? b("", !0) : (t(), E(q, {
+            key: 0,
+            field: i,
+            "model-value": n.value[i.name],
+            error: r.value[i.name],
+            "onUpdate:modelValue": (u) => m(i.name, u)
+          }, null, 8, ["field", "model-value", "error", "onUpdate:modelValue"]))
+        ], 64))), 128))
+      ]),
+      f("button", {
+        type: "submit",
+        disabled: h.value,
+        class: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
+      }, o(h.value ? "Submitting..." : e.schema.submitButtonText || "Submit"), 9, P)
+    ], 34));
+  }
+});
+export {
+  X as DynamicForm,
+  q as FormFieldRenderer
+};

package/packages/vue/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/packages/vue/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/packages/vue/node_modules/.bin/vite

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/packages/vue/node_modules/.bin/vitest

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules/vitest/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules/vitest/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"
+else
+  exec node  "$basedir/../vitest/vitest.mjs" "$@"
+fi

package/packages/vue/node_modules/.bin/vue-tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vue-tsc/bin/vue-tsc.js" "$@"
+else
+  exec node  "$basedir/../vue-tsc/bin/vue-tsc.js" "$@"
+fi

package/packages/vue/node_modules/.vite/vitest/results.json

@@ -0,0 +1 @@
+{"version":"1.6.1","results":[[":src/DynamicForm.test.ts",{"duration":17,"failed":false}]]}

package/packages/vue/node_modules/.vue-global-types/vue_3.5_0_0_0.d.ts

@@ -0,0 +1,118 @@
+// @ts-nocheck
+export {};
+
+; declare global {
+	const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
+	const __VLS_unref: typeof import('vue').unref;
+	const __VLS_placeholder: any;
+
+	type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
+	type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+	type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+	type __VLS_GlobalComponents = import('vue').GlobalComponents;
+	type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+	type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+	type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+	type __VLS_SpreadMerge<A, B> = Omit<A, keyof B> & B;
+	type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string, N3 extends string> =
+		N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N1] } :
+		N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N2] } :
+		N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N3] } :
+		Self extends object ? { [K in N0]: Self } :
+		N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N1] } :
+		N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } :
+		N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
+		{ [K in N0]: unknown };
+	type __VLS_FunctionalComponentProps<T, K> =
+		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
+		: T extends (props: infer P, ...args: any) => any ? P :
+		{};
+	type __VLS_IsFunction<T, K> = K extends keyof T
+		? __VLS_IsAny<T[K]> extends false
+		? unknown extends T[K]
+		? false
+		: true
+		: false
+		: false;
+	type __VLS_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (
+		__VLS_IsFunction<Props, onEvent> extends true
+			? Props
+			: __VLS_IsFunction<Events, Event> extends true
+				? { [K in onEvent]?: Events[Event] }
+				: __VLS_IsFunction<Events, CamelizedEvent> extends true
+					? { [K in onEvent]?: Events[CamelizedEvent] }
+					: Props
+	) & Record<string, unknown>;
+	// fix https://github.com/vuejs/language-tools/issues/926
+	type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+	type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R
+		? U extends T
+		? never
+		: __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R)
+		: never;
+	type __VLS_OverloadUnion<T> = Exclude<
+		__VLS_OverloadUnionInner<(() => never) & T>,
+		T extends () => never ? never : () => never
+	>;
+	type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F
+		? F extends (event: infer E, ...args: infer A) => any
+		? { [K in E & string]: (...args: A) => void; }
+		: never
+		: never;
+	type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
+		__VLS_UnionToIntersection<
+			__VLS_ConstructorOverloads<T> & {
+				[K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never
+			}
+		>
+	>;
+	type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
+	type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<
+		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
+		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
+	>>;
+	type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
+
+	function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
+		item: T extends number ? number
+			: T extends string ? string
+			: T extends any[] ? T[number]
+			: T extends Iterable<infer T1> ? T1
+			: any,
+		index: number,
+	][];
+	function __VLS_getVForSourceType<T>(source: T): [
+		item: T[keyof T],
+		key: keyof T,
+		index: number,
+	][];
+	// @ts-ignore
+	function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+	// @ts-ignore
+	function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+	function __VLS_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective
+		? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>
+		: T extends (...args: any) => any
+			? T
+			: (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+	function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
+	function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
+		T extends new (...args: any) => any
+		? (props: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+			__ctx?: {
+				attrs?: any;
+				slots?: K extends { $slots: infer Slots } ? Slots : any;
+				emit?: K extends { $emit: infer Emit } ? Emit : any;
+				expose?(exposed: K): void;
+				props?: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>;
+			}
+		}
+		: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
+		: T extends (...args: any) => any ? T
+		: (_: {} & Record<string, unknown>, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {} & Record<string, unknown> } };
+	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+	function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
+	function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
+	function __VLS_tryAsConstant<const T>(t: T): T;
+}

package/packages/vue/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "pdyform-vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/LaoChen1994/pdyform",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LaoChen1994/pdyform"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist",
+    "dev": "vite",
+    "test": "vitest run",
+    "lint": "eslint src/**/*.{ts,vue} --no-error-on-unmatched-pattern"
+  },
+  "dependencies": {
+    "clsx": "^2.0.0",
+    "lucide-vue-next": "^0.300.0",
+    "pdyform": "workspace:*",
+    "tailwind-merge": "^2.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.5.0",
+    "jsdom": "^22.1.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.0.0"
+  }
+}

package/packages/vue/src/DynamicForm.test.ts

@@ -0,0 +1,19 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DynamicForm from '../src/DynamicForm.vue';
+
+describe('Vue DynamicForm', () => {
+  const schema: any = {
+    fields: [
+      { name: 'username', label: 'Username', type: 'text' }
+    ]
+  };
+
+  it('renders correctly', () => {
+    const wrapper = mount(DynamicForm, {
+      props: { schema }
+    });
+    expect(wrapper.find('label').text()).toBe('Username');
+  });
+});

package/packages/vue/src/DynamicForm.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type { FormSchema } from 'pdyform/core';
+import { validateField, getDefaultValues } from 'pdyform/core';
+import FormFieldRenderer from './FormFieldRenderer.vue';
+
+const props = defineProps<{
+  schema: FormSchema;
+  className?: string;
+}>();
+
+const emit = defineEmits(['submit']);
+
+const values = ref<Record<string, any>>({});
+const errors = ref<Record<string, string>>({});
+const isSubmitting = ref(false);
+
+onMounted(() => {
+  values.value = getDefaultValues(props.schema.fields);
+});
+
+const handleFieldChange = (name: string, value: any) => {
+  values.value[name] = value;
+  
+  const field = props.schema.fields.find(f => f.name === name);
+  if (field) {
+    const error = validateField(value, field);
+    errors.value[name] = error || '';
+  }
+};
+
+const handleSubmit = () => {
+  isSubmitting.value = true;
+  const newErrors: Record<string, string> = {};
+  let hasError = false;
+
+  props.schema.fields.forEach((field) => {
+    const error = validateField(values.value[field.name], field);
+    if (error) {
+      newErrors[field.name] = error;
+      hasError = true;
+    }
+  });
+
+  errors.value = newErrors;
+
+  if (!hasError) {
+    emit('submit', { ...values.value });
+  }
+  isSubmitting.value = false;
+};
+</script>
+
+<template>
+  <form :class="['space-y-6', className]" @submit.prevent="handleSubmit">
+    <div v-if="schema.title || schema.description" class="space-y-1">
+      <h2 v-if="schema.title" class="text-2xl font-bold tracking-tight">{{ schema.title }}</h2>
+      <p v-if="schema.description" class="text-muted-foreground">{{ schema.description }}</p>
+    </div>
+
+    <div class="space-y-4">
+      <template v-for="field in schema.fields" :key="field.id">
+        <FormFieldRenderer
+          v-if="!field.hidden"
+          :field="field"
+          :model-value="values[field.name]"
+          :error="errors[field.name]"
+          @update:model-value="(val: any) => handleFieldChange(field.name, val)"
+        />
+      </template>
+    </div>
+
+    <button
+      type="submit"
+      :disabled="isSubmitting"
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
+    >
+      {{ isSubmitting ? 'Submitting...' : (schema.submitButtonText || 'Submit') }}
+    </button>
+  </form>
+</template>

package/packages/vue/src/FormFieldRenderer.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { FormField } from 'pdyform/core';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  field: FormField;
+  modelValue: any;
+  error?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const fieldId = computed(() => `field-${props.field.name}`);
+
+const baseInputClasses = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+
+const handleUpdate = (val: any) => {
+  emit('update:modelValue', val);
+};
+
+const handleCheckboxChange = (val: any, checked: boolean) => {
+  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+  if (checked) {
+    current.push(val);
+  } else {
+    const idx = current.indexOf(val);
+    if (idx > -1) current.splice(idx, 1);
+  }
+  handleUpdate(current);
+};
+</script>
+
+<template>
+  <div :class="['space-y-2', field.className]">
+    <label v-if="field.label" :for="fieldId" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      {{ field.label }}
+    </label>
+
+    <template v-if="field.type === 'textarea'">
+      <textarea
+        :id="fieldId"
+        :class="[baseInputClasses, 'min-h-[80px]']"
+        :placeholder="field.placeholder"
+        :disabled="field.disabled"
+        :name="field.name"
+        :value="modelValue"
+        @input="(e: any) => handleUpdate(e.target.value)"
+      />
+    </template>
+
+    <template v-else-if="field.type === 'select'">
+      <select
+        :id="fieldId"
+        :class="baseInputClasses"
+        :disabled="field.disabled"
+        :name="field.name"
+        :value="modelValue"
+        @change="(e: any) => handleUpdate(e.target.value)"
+      >
+        <option value="" disabled>{{ field.placeholder || 'Select an option' }}</option>
+        <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+    </template>
+
+    <template v-else-if="field.type === 'checkbox'">
+      <div class="flex flex-wrap gap-4">
+        <label v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          <input
+            type="checkbox"
+            class="h-4 w-4 rounded border-primary text-primary focus:ring-primary"
+            :disabled="field.disabled"
+            :checked="Array.isArray(modelValue) && modelValue.includes(opt.value)"
+            @change="(e: any) => handleCheckboxChange(opt.value, e.target.checked)"
+          />
+          <span>{{ opt.label }}</span>
+        </label>
+      </div>
+    </template>
+
+    <template v-else-if="field.type === 'radio'">
+      <div class="flex flex-wrap gap-4">
+        <label v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          <input
+            type="radio"
+            class="h-4 w-4 border-primary text-primary focus:ring-primary"
+            :disabled="field.disabled"
+            :name="field.name"
+            :checked="modelValue === opt.value"
+            @change="handleUpdate(opt.value)"
+          />
+          <span>{{ opt.label }}</span>
+        </label>
+      </div>
+    </template>
+
+    <template v-else>
+      <input
+        :id="fieldId"
+        :type="field.type"
+        :class="baseInputClasses"
+        :placeholder="field.placeholder"
+        :disabled="field.disabled"
+        :name="field.name"
+        :value="modelValue"
+        @input="(e: any) => handleUpdate(e.target.value)"
+      />
+    </template>
+
+    <p v-if="field.description" class="text-sm text-muted-foreground">{{ field.description }}</p>
+    <p v-if="error" class="text-sm font-medium text-destructive">{{ error }}</p>
+  </div>
+</template>