FormItem ​

<script setup lang="ts">
import { createForm } from '@formily/core'
import { FormItem, Input } from '@silver-formily/vant'
import { Field, FormProvider } from '@silver-formily/vue'

const form = createForm({
  values: {
    phone: '13800138000',
    remark: '',
  },
})
</script>

<template>
  <FormProvider :form="form">
    <div class="demo-panel">
      <Field
        name="phone"
        title="手机号"
        required
        :decorator="[
          FormItem,
          {
            labelWidth: '5em',
            extra: 'labelWidth、required 仍走表单项壳层，extra 属性会显示在下方说明区',
          },
        ]"
        :component="[
          Input,
          {
            placeholder: '请输入手机号',
          },
        ]"
      />
      <Field
        name="remark"
        title="备注"
        :decorator="[
          FormItem,
          {
            labelAlign: 'top',
          },
        ]"
        :component="[
          Input.TextArea,
          {
            rows: 2,
            placeholder: '这里可以写一些补充信息',
          },
        ]"
      />
    </div>
  </FormProvider>
</template>

<script setup lang="ts">
import { FormItem, Input } from '@silver-formily/vant'
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="demo-panel">
    <FormItem
      label="用户名"
      asterisk
      feedback-status="error"
      feedback-text="这里只是静态示例，用来观察反馈区和输入区的位置"
    >
      <Input
        v-model="value"
        placeholder="直接插进 FormItem 默认槽"
      />
    </FormItem>

    <FormItem
      label="说明"
      extra="extra 属性现在会单独显示在 FormItem 下方"
    >
      <Input
        v-model="value"
        placeholder="继续输入，观察壳层结构"
      />
    </FormItem>

    <FormItem label="原生 extra 插槽">
      <template #extra>
        <span class="slot-extra">这段内容仍然走 Vant 原生 extra 布局</span>
      </template>
      <Input
        v-model="value"
        placeholder="观察右侧 extra 插槽位置"
      />
    </FormItem>
  </div>
</template>

<script setup lang="ts">
import { FormItem, Input } from '@silver-formily/vant'
import { reactive } from 'vue'

const values = reactive({
  name: 'silver-formily',
  phone: '13800138000',
  city: 'Hangzhou',
  remark: '说明区会跟着边框一起形成完整的一项',
})
</script>

<template>
  <div class="demo-panel">
    <FormItem
      label="名称"
      border
      extra="这是第一条，观察说明区和下一项之间的边框关系"
    >
      <Input
        v-model="values.name"
        placeholder="请输入名称"
      />
    </FormItem>

    <FormItem
      label="手机"
      border
    >
      <Input
        v-model="values.phone"
        placeholder="请输入手机号"
      />
    </FormItem>

    <FormItem
      label="城市"
      border
    >
      <Input
        v-model="values.city"
        placeholder="请输入城市"
      />
    </FormItem>

    <FormItem
      label="备注"
      extra="这是最后一条，观察底部说明区本身的边框收尾效果"
      border
    >
      <Input
        v-model="values.remark"
        placeholder="请输入备注"
      />
    </FormItem>
  </div>
</template>