feat: Auto Form (#497)

* chore: initial poc * chore: cleanup, log on the docs * feat: add file component * feat: typing for nested config * feat: more props for form field * feat: export field component, expose more slotprops * feat: array, config label * feat: improve array * feat: support custom form state * chore: prevent schema props showing on attribute * feat: dependencies rendering * refactor: change name to fieldName to allow easier slotProps binding * feat: improve file upload * feat: expose custom auto form slot * chore: bump * chore: replicate to default styling * chore: build registry * fix: export component before init * chore: add examples * chore: add form api example * fix: warning in console * chore: bump package version * chore: update example, complete md * feat: allow zod description as label, allow custom component * docs: fix link * feat: show required field for object * chore: replace enumProps
radix-vue · May 1, 2024 · 32d7b9c · 32d7b9c
1 parent 18e40cf
commit 32d7b9c
Show file tree

Hide file tree

Showing 60 changed files with 3,958 additions and 21 deletions.
diff --git a/apps/www/.vitepress/theme/components/Callout.vue b/apps/www/.vitepress/theme/components/Callout.vue
@@ -19,7 +19,7 @@ defineProps<CalloutProps>()
     <AlertTitle v-if="title">
       {{ title }}
     </AlertTitle>
-    <AlertDescription>
+    <AlertDescription class="[&_a]:underline">
       <slot />
     </AlertDescription>
   </Alert>

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
@@ -8,7 +8,7 @@ export interface NavItem {
 }
 
 export type SidebarNavItem = NavItem & {
-  items: SidebarNavItem[]
+  items?: SidebarNavItem[]
 }
 
 export type NavItemWithChildren = NavItem & {
@@ -134,6 +134,16 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: 'Extended',
+      items: [
+        {
+          title: 'Auto Form',
+          href: '/docs/components/auto-form',
+          items: [],
+        },
+      ],
+    },
     {
       title: 'Components',
       items: [

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
@@ -38,6 +38,62 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AspectRatioDemo.vue"],
     },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormApi.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormApi.vue"],
+    },
+    "AutoFormArray": {
+      name: "AutoFormArray",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormArray.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormArray.vue"],
+    },
+    "AutoFormBasic": {
+      name: "AutoFormBasic",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormBasic.vue"],
+    },
+    "AutoFormConfirmPassword": {
+      name: "AutoFormConfirmPassword",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormConfirmPassword.vue"],
+    },
+    "AutoFormControlled": {
+      name: "AutoFormControlled",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormControlled.vue"],
+    },
+    "AutoFormDependencies": {
+      name: "AutoFormDependencies",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormDependencies.vue"],
+    },
+    "AutoFormInputWithoutLabel": {
+      name: "AutoFormInputWithoutLabel",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue"],
+    },
+    "AutoFormSubObject": {
+      name: "AutoFormSubObject",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AutoFormSubObject.vue"],
+    },
     "AvatarDemo": {
       name: "AvatarDemo",
       type: "components:example",
@@ -1278,6 +1334,62 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AspectRatioDemo.vue"],
     },
+    "AutoFormApi": {
+      name: "AutoFormApi",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormApi.vue"],
+    },
+    "AutoFormArray": {
+      name: "AutoFormArray",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormArray.vue"],
+    },
+    "AutoFormBasic": {
+      name: "AutoFormBasic",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormBasic.vue"],
+    },
+    "AutoFormConfirmPassword": {
+      name: "AutoFormConfirmPassword",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue"],
+    },
+    "AutoFormControlled": {
+      name: "AutoFormControlled",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormControlled.vue"],
+    },
+    "AutoFormDependencies": {
+      name: "AutoFormDependencies",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormDependencies.vue"],
+    },
+    "AutoFormInputWithoutLabel": {
+      name: "AutoFormInputWithoutLabel",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue"],
+    },
+    "AutoFormSubObject": {
+      name: "AutoFormSubObject",
+      type: "components:example",
+      registryDependencies: ["button","toast","auto-form"],
+      component: () => import("../src/lib/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AutoFormSubObject.vue"],
+    },
     "AvatarDemo": {
       name: "AvatarDemo",
       type: "components:example",

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -37,7 +37,7 @@
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.1.0",
-    "vee-validate": "4.12.5",
+    "vee-validate": "4.12.6",
     "vue": "^3.4.24",
     "vue-sonner": "^1.1.2",
     "vue-wrap-balancer": "^1.1.3",