feat: new docs

docs/.vitepress/config.js

@@ -0,0 +1,94 @@
+/* import { UserConfig } from 'vitepress'
+ */
+const { description } = require('../../package')
+
+const config = {
+  title: 'Vue Dynamic Forms',
+  description,
+  lang: 'en-US',
+  themeConfig: {
+    repo: 'asigloo/vue-dynamic-forms',
+    logo: '/logo.svg',
+    editLinks: true,
+    editLinkText: 'Edit this page',
+    lastUpdated: 'Last Updated',
+    nav: [
+      {
+        text: 'Migration Guide',
+        link: '/v3/guide/migration-guide',
+      },
+    ],
+    sidebar: {
+      '/': [
+        {
+          text: 'Guide',
+          children: [
+            {
+              text: 'Introduction',
+              link: '/guide/',
+            },
+            {
+              text: 'Getting Started',
+              link: '/guide/getting-started',
+            },
+            {
+              text: 'Usage',
+              link: '/guide/usage',
+            },
+            {
+              text: 'Validation',
+              link: '/guide/validation',
+            },
+          ],
+        },
+        {
+          text: 'API',
+          children: [
+            {
+              text: 'Fields',
+              link: '/guide/api/fields',
+            },
+            {
+              text: 'Props',
+              link: '/guide/api/props',
+              children: [
+                {
+                  text: 'Dynamic Form',
+                  link: '/guide/api/props/dynamic-form-props',
+                },
+                {
+                  text: 'Dynamic Input',
+                  link: '/guide/api/props/dynamic-input-props',
+                },
+              ],
+            },
+            {
+              text: 'Events',
+              link: '/guide/api/events',
+            },
+          ],
+        },
+        {
+          text: 'Theming',
+          children: [
+            {
+              text: 'Basic theming',
+              link: '/guide/theming/basic',
+            },
+          ],
+        },
+        {
+          text: 'Advanced',
+          children: [
+            {
+              text: 'Slots',
+              link: '/guide/advanced/slots',
+            },
+          ],
+        },
+      ],
+    },
+  },
+}
+
+module.exports = config

docs/.vitepress/theme/components/CheckboxInput.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="
+      w-full
+      flex
+      justify-between
+      container
+      bg-white
+      shadow-lg
+      p-4
+      rounded-lg
+      my-8
+    "
+  >
+    <div class="w-1/2">
+      <dynamic-form :form="form" @change="updateValues" />
+    </div>
+    <div class="w-2/5 p-4">
+      <Console :content="formValues" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue'
+import { CheckboxField, Validator, required, DynamicForm } from '/@'
+
+export default {
+  name: 'CheckboxField',
+  setup() {
+    const formValues = reactive({})
+
+    const form = reactive<DynamicForm>({
+      id: 'my-awesome-form',
+      fields: {
+        awesomeness: CheckboxField({
+          label: "Check  if you're awesome",
+        }),
+        required: CheckboxField({
+          label: 'Required',
+          customClass: 'w-1/2',
+          validations: [
+            Validator({
+              validator: required,
+              text: 'This field is required',
+            }),
+          ],
+        }),
+        disabled: CheckboxField({
+          label: 'Disabled',
+          customClass: 'w-1/2',
+          disabled: true,
+        }),
+      },
+    })
+
+    function updateValues(values) {
+      Object.assign(formValues, values)
+    }
+
+    return {
+      form,
+      updateValues,
+      formValues,
+    }
+  },
+}
+</script>

docs/.vitepress/theme/components/Console.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="console bg-marine text-white text-xs p-2 rounded-md relative">
+    <ul class="absolute top-0 pl-2 mt-0 left-0">
+      <li class="rounded w-2 h-2 bg-salmon inline-block mr-1"></li>
+      <li class="rounded w-2 h-2 bg-yellow-300 inline-block mr-1"></li>
+      <li class="rounded w-2 h-2 bg-green-500 inline-block"></li>
+    </ul>
+    <pre data-cy="form-values" class="pt-4" :data-formValues="jsonValues">{{
+      content
+    }}</pre>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+
+const props = {
+  content: String,
+}
+
+export default defineComponent({
+  name: 'console',
+  props,
+  setup(props) {
+    const jsonValues = computed(() => JSON.stringify(props.content))
+    return {
+      jsonValues,
+    }
+  },
+})
+</script>

docs/.vitepress/theme/components/CustomField.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="
+      w-full
+      flex
+      justify-between
+      container
+      bg-white
+      shadow-lg
+      p-4
+      rounded-lg
+      my-8
+    "
+  >
+    <div class="w-1/2">
+      <dynamic-form :form="form" @change="updateValues">
+        <template v-slot:avocado="{ control, onChange, onFocus, onBlur }">
+          <div class="avocado-field">
+            <input
+              :id="control.name"
+              v-if="control"
+              class="form-control"
+              v-model="control.value"
+              :type="control.type"
+              :name="control.name"
+              @change="onChange"
+              @focus="onFocus"
+              @blur="onBlur"
+            />
+            <i>🥑</i>
+          </div>
+        </template>
+      </dynamic-form>
+    </div>
+    <div class="w-2/5 p-4">
+      <Console :content="formValues" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue'
+import { CustomField, DynamicForm } from '/@'
+
+export default {
+  name: 'CustomField',
+  setup() {
+    const formValues = reactive({})
+
+    const form = reactive<DynamicForm>({
+      id: 'my-awesome-form',
+      fields: {
+        avocado: CustomField({
+          label: 'My Avocado field',
+        }),
+      },
+    })
+
+    function updateValues(values) {
+      Object.assign(formValues, values)
+    }
+
+    return {
+      form,
+      updateValues,
+      formValues,
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.avocado-field {
+  position: relative;
+
+  .form-control {
+    border-color: #aec64c;
+    background-color: #e2eb5d52;
+    border-radius: 16px;
+    width: 100%;
+  }
+  i {
+    position: absolute;
+    top: 7px;
+    right: 20px;
+  }
+}
+</style>