Merge branch 'main' into feat/support-validate-field

docs/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,19 @@
+{
+  "hash": "b98aed0b",
+  "browserHash": "3662c0c2",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "566a3dd0",
+      "needsInterop": false
+    },
+    "@stackblitz/sdk": {
+      "src": "../../../../node_modules/.pnpm/@stackblitz+sdk@1.9.0/node_modules/@stackblitz/sdk/bundles/sdk.m.js",
+      "file": "@stackblitz_sdk.js",
+      "fileHash": "55c10195",
+      "needsInterop": false
+    }
+  },
+  "chunks": {}
+}

docs/.vitepress/cache/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

docs/.vitepress/config.ts

@@ -1,37 +1,6 @@
 import { defineConfig } from 'vitepress'
-
-const guide = [
-  {
-    text: 'Get Started',
-    link: '/guide/',
-  },
-]
-
-const api = [
-  {
-    text: 'useForm',
-    link: '/api/use-form',
-  },
-  {
-    text: 'useField',
-    link: '/api/use-field',
-  },
-  {
-    text: 'useFieldArray',
-    link: '/api/use-field-array',
-  },
-  {
-    text: 'useFormContext',
-    link: '/api/use-form-context',
-  },
-]
-
-const advanced = [
-  {
-    text: 'Smart Form Component',
-    link: '/advanced/smart-form-component',
-  },
-]
+import enConfig from './theme/config/en'
+import zhTWConfig from './theme/config/zh-tw'
 
 export default defineConfig({
   title: 'Vorms',
@@ -64,38 +33,32 @@ export default defineConfig({
     }
   },
 
+  locales: {
+    root: {
+      label: 'English',
+      lang: 'en',
+      themeConfig: enConfig
+    },
+    'zh-tw': {
+      label: '繁體中文',
+      lang: 'zh-tw',
+      link: '/zh-tw/',
+      themeConfig: zhTWConfig
+    }
+  },
+
   themeConfig: {
     logo: '/favicon.svg',
 
     editLink: {
       pattern: 'https://github.com/Mini-ghost/vorms/tree/docs/docs/:path'
     },
 
-    nav: [
-      { text: 'Get Started', link: '/guide/', activeMatch: '/guide/' },
-      { text: 'API', link: '/api/use-form', activeMatch: '/api/' },
-      { text: 'Examples', link: '/examples/', activeMatch: '/examples/' }
-    ],
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/Mini-ghost/vorms' },
     ],
 
-    sidebar: [
-      {
-        text: 'Guide',
-        items: guide
-      },
-      {
-        text: 'API Reference',
-        items: api
-      },
-      {
-        text: 'Advanced',
-        items: advanced
-      }
-    ],
-
     footer: {
       message: 'Released under the MIT License.',
       copyright: 'Copyright © 2022-present Alex Liu'

docs/.vitepress/theme/config/en.ts

@@ -0,0 +1,55 @@
+const guide = [
+  {
+    text: 'Get Started',
+    link: '/guide/',
+  },
+]
+
+const api = [
+  {
+    text: 'useForm',
+    link: '/api/use-form',
+  },
+  {
+    text: 'useField',
+    link: '/api/use-field',
+  },
+  {
+    text: 'useFieldArray',
+    link: '/api/use-field-array',
+  },
+  {
+    text: 'useFormContext',
+    link: '/api/use-form-context',
+  },
+]
+
+const advanced = [
+  {
+    text: 'Smart Form Component',
+    link: '/advanced/smart-form-component',
+  },
+]
+
+export default {
+  nav: [
+    { text: 'Get Started', link: '/guide/', activeMatch: '/guide/' },
+    { text: 'API', link: '/api/use-form', activeMatch: '/api/' },
+    { text: 'Examples', link: '/examples/', activeMatch: '/examples/' }
+  ],
+
+  sidebar: [
+    {
+      text: 'Guide',
+      items: guide
+    },
+    {
+      text: 'API Reference',
+      items: api
+    },
+    {
+      text: 'Advanced',
+      items: advanced
+    }
+  ],
+}

docs/.vitepress/theme/config/zh-tw.ts

@@ -0,0 +1,55 @@
+const guide = [
+  {
+    text: 'Get Started',
+    link: '/zh-tw/guide/',
+  },
+]
+
+const api = [
+  {
+    text: 'useForm',
+    link: '/zh-tw/api/use-form',
+  },
+  {
+    text: 'useField',
+    link: '/zh-tw/api/use-field',
+  },
+  {
+    text: 'useFieldArray',
+    link: '/zh-tw/api/use-field-array',
+  },
+  {
+    text: 'useFormContext',
+    link: '/zh-tw/api/use-form-context',
+  },
+]
+
+const advanced = [
+  {
+    text: 'Smart Form Component',
+    link: '/zh-tw/advanced/smart-form-component',
+  },
+]
+
+export default {
+  nav: [
+    { text: 'Get Started', link: '/zh-tw/guide/', activeMatch: '/guide/' },
+    { text: 'API', link: '/zh-tw/api/use-form', activeMatch: '/api/' },
+    { text: 'Examples', link: '/zh-tw/examples/', activeMatch: '/examples/' }
+  ],
+
+  sidebar: [
+    {
+      text: 'Guide',
+      items: guide
+    },
+    {
+      text: 'API Reference',
+      items: api
+    },
+    {
+      text: 'Advanced',
+      items: advanced
+    }
+  ],
+}

docs/zh-tw/advanced/smart-form-component.md

@@ -0,0 +1,134 @@
+# Smart Form Component
+
+雖然 Vue 的 `v-model` 指令幫助我們簡化了表單輸入綁定，但處理大型且複雜的表單仍然有點痛苦。
+
+智慧表單元件（Smart Form Components）可以幫助我們進一步簡化表單建置。 我們只需要組合那些表單元件，它就會自動匹配對應的表單資料並完成輸入綁定。
+
+```vue
+<script setup lang="ts">
+import SmartForm from './components/SmartForm.vue'
+import SmartTextField from './components/SmartTextField.vue'
+import SmartSelect from './components/SmartSelect.vue'
+
+interface Values {
+  drink: string,
+  sugar: 'no' | 'light' | 'half' | 'half' | 'standard'
+}
+
+const initialValues = {
+  drink: '',
+  sugar: 'light',
+}
+
+const onSubmit = (values: Values) => {
+  console.log(values);
+  
+}
+
+</script>
+
+<template>
+  <div>
+    <SmartForm :initial-values="initialValues" @submit="onSubmit">
+      <SmartTextField name="name" />
+      <SmartSelect name="sugar" :options="['no', 'light', 'half', 'half', 'standard']" />
+
+      <button type="submit">Submit</button>
+    </SmartForm>
+  </div>
+</template>
+```
+
+讓我們看看如何編寫這些元件。
+
+## SmartForm
+
+SmartForm 元件將為元件的後代提供 vorms 的狀態和方法。
+
+```vue
+<script setup lang="ts">
+import { useForm } from '@vorms/core';
+
+type Values = Record<string, any>;
+
+interface SmartFormProps {
+  initialValues: Values;
+}
+
+interface SmartFormEvent {
+  (event: 'submit', values: Values): void;
+}
+
+const props = defineProps<SmartFormProps>();
+const emit = defineEmits<SmartFormEvent>();
+
+const { handleSubmit, handleReset } = useForm({
+  initialValues: props.initialValues,
+  onSubmit(values) {
+    emit('submit', values);
+  },
+});
+</script>
+
+<template>
+  <form @submit="handleSubmit" @reset="handleReset">
+    <slot name="default" />
+  </form>
+</template>
+```
+
+## SmartTextField 和 SmartSelect
+
+這些輸入元件將注入 SmartForm 元件提供的狀態和方法，並在背景處理表單輸入綁定。
+
+**SmartTextField**
+
+```vue
+<script setup lang="ts">
+import { toRef } from 'vue'
+import { useField } from '@vorms/core'
+
+interface SmartTextFieldProps {
+  name: string;
+}
+
+const props = defineProps<SmartTextFieldProps>()
+
+const nameRef = toRef(props, 'name')
+const { value, attrs } = useField(nameRef)
+</script>
+
+<template>
+  <input v-model="value" type="text" v-bind="attrs">
+</template>
+```
+
+**SmartSelect**
+
+```vue
+<script setup lang="ts">
+import { toRef } from 'vue'
+import { useField } from '@vorms/core'
+
+interface SmartSelectProps {
+  name: string;
+  options: string[]
+}
+
+const props = defineProps<SmartSelectProps>()
+
+const nameRef = toRef(props, 'name')
+const { value, attrs } = useField(nameRef)
+</script>
+
+<template>
+  <select v-model="value" v-bind="attrs">
+    <option v-for="item in options" :key="item" :value="item">
+      {{ item }}
+    </option>
+  </select>
+</template>
+```
+
+現在，您可以在專案中創建和組合複雜的內容，而無縫接軌。  
+這個理想的靈感來自 [React Hook Form](https://react-hook-form.com/advanced-usage#SmartFormComponent)