FormLayout 表单布局

<script setup lang="ts">
  import { ref } from 'vue'
  import { FormField, FormLayout, Input } from '@hina-ui/vue'

  const name = ref('')
  const email = ref('')
</script>

<template>
  <FormLayout legend="账号" description="登录时使用" class="w-80">
    <FormField label="用户名">
      <Input v-model="name" />
    </FormField>
    <FormField label="邮箱">
      <Input v-model="email" type="email" />
    </FormField>
  </FormLayout>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FormField, FormLayout, Input, Switch } from '@hina-ui/vue'
  const name = ref('Hina')
  const email = ref('hello@example.com')
  const sync = ref(true)
</script>
<template>
  <FormLayout
    legend="个人资料设置"
    orientation="responsive"
    label-width="9rem"
    description-placement="label"
    class="w-full"
  >
    <FormField label="显示名称" description="显示在你的公开个人资料中。">
      <Input v-model="name" />
    </FormField>
    <FormField
      label="邮箱地址"
      description="使用可以接收通知的邮箱地址。"
      description-placement="control"
    >
      <Input v-model="email" type="email" />
    </FormField>
    <FormField>
      <Switch
        v-model="sync"
        control-placement="end"
        block
        description="在其他设备上继续上次的阅读进度。"
      >
        同步阅读进度
      </Switch>
    </FormField>
  </FormLayout>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { FormField, FormLayout, Input } from '@hina-ui/vue'

  const values = reactive({ province: '', city: '', district: '', street: '' })
</script>

<template>
  <FormLayout legend="收货地址" :columns="3" class="w-full max-w-lg">
    <FormField label="省">
      <Input v-model="values.province" />
    </FormField>
    <FormField label="市">
      <Input v-model="values.city" />
    </FormField>
    <FormField label="区">
      <Input v-model="values.district" />
    </FormField>
    <FormField label="详细地址" class="sm:col-span-3">
      <Input v-model="values.street" />
    </FormField>
  </FormLayout>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, FormLayout, Input, Switch, Text, Textarea } from '@hina-ui/vue'

  const schema = v.object({
    name: v.pipe(v.string('请输入昵称'), v.nonEmpty('请输入昵称')),
    bio: v.pipe(v.string(), v.maxLength(80, '简介不超过 80 个字')),
    notifyEmail: v.boolean(),
    notifyPush: v.boolean(),
  })

  const values = reactive({ name: '', bio: '', notifyEmail: true, notifyPush: false })
  const saved = ref('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = JSON.stringify(data)
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormLayout legend="个人资料" description="公开显示在个人页">
      <FormField name="name" label="昵称" required>
        <Input v-model="values.name" />
      </FormField>
      <FormField name="bio" label="简介">
        <Textarea v-model="values.bio" />
      </FormField>
    </FormLayout>
    <FormLayout legend="通知" description="有新的回复或者关注时提醒你">
      <FormField name="notifyEmail">
        <Switch v-model="values.notifyEmail">邮件</Switch>
      </FormField>
      <FormField name="notifyPush">
        <Switch v-model="values.notifyPush">推送</Switch>
      </FormField>
    </FormLayout>
    <Button type="submit" :loading="submitting" class="self-start">保存</Button>
    <Text v-if="saved" tone="muted" size="sm">已保存：{{ saved }}</Text>
  </Form>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { FormField, FormLayout, Input, Stack, Switch } from '@hina-ui/vue'

  const values = reactive({ name: '星见书音', email: 'shion@example.com' })
  const locked = ref(true)
</script>

<template>
  <Stack gap="md" align="stretch" class="w-80">
    <Switch v-model="locked">锁定账号信息</Switch>
    <FormLayout legend="账号" :disabled="locked">
      <FormField label="用户名">
        <Input v-model="values.name" />
      </FormField>
      <FormField label="邮箱">
        <Input v-model="values.email" type="email" />
      </FormField>
    </FormLayout>
  </Stack>
</template>