<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="xtf-demo-scroll xtf-page-scroll" direction="vertical"><view class="xtf-demo-page xtf-page-scroll-content"><view class="xtf-demo-hero"><text class="xtf-demo-kicker">XTF LINKUI / COMPONENTS</text><text class="xtf-demo-title">Form Item</text><text class="xtf-demo-intro">标签布局、帮助信息和手动错误。</text></view><view class="xtf-demo-section"><XtfForm :model="model"><XtfFormItem ref="fieldRef" label="昵称" prop="nickname" extra="公开展示" :error="manualError" :rules="[{ required: true, message: '请输入昵称' }]" feedback @validate-status-change="fieldStatus = $event.status"><template #default="field"><XtfInput v-model="model.nickname" placeholder="输入昵称" :disabled="field.disabled" :readonly="field.readonly" @blur="field.triggerValidate('blur')" /></template></XtfFormItem><XtfFormItem label="备注" help="最多填写 140 个字符"><XtfInput v-model="model.note" type="textarea" placeholder="补充说明" /></XtfFormItem><XtfFormItem label="横向布局" layout="horizontal"><XtfSwitch v-model="enabled" /></XtfFormItem></XtfForm><view class="field-demo-tools"><button id="field-validate" class="field-demo-tool" @click="fieldRef?.validate()">validate()</button><button id="field-clear" class="field-demo-tool" @click="manualError = ''; fieldRef?.clearValidate()">clearValidate()</button><button id="field-manual-error" class="field-demo-tool" @click="manualError = '此昵称已被使用（本地模拟）'">设置手动错误</button><button id="field-reset" class="field-demo-tool" @click="fieldRef?.resetField()">resetField()</button></view><text id="field-status">{{ fieldStatus }}</text></view></view></scroll-view></XtfConfigProvider></template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfForm from "@/uni_modules/xtf-linkuiunix/components/xtf-form/xtf-form.uvue"
import XtfFormItem from "@/uni_modules/xtf-linkuiunix/components/xtf-form-item/xtf-form-item.uvue"
import XtfInput from "@/uni_modules/xtf-linkuiunix/components/xtf-input/xtf-input.uvue"
import XtfSwitch from "@/uni_modules/xtf-linkuiunix/components/xtf-switch/xtf-switch.uvue"
const model = ref({ nickname: "", note: "" }); const enabled = ref(true)
const fieldRef = ref<any>(null)
const manualError = ref("")
const fieldStatus = ref("")
</script>
<style>.field-demo-tools{display:flex;flex-direction:row;flex-wrap:wrap;margin-top:16rpx}.field-demo-tool{margin:8rpx 8rpx 0 0;padding:0 16rpx;font-size:22rpx}</style>
<style>.xtf-demo-scroll{flex:1;width:100%;height:100%}.xtf-demo-page{display:flex;flex-direction:column;width:100%;padding:24rpx;background-color:var(--xtf-color-page, #f8fafc)}.xtf-demo-hero{display:flex;flex-direction:column;padding:32rpx;border-radius:16rpx;background-color:#0f766e}.xtf-demo-kicker,.xtf-demo-intro{color:#fff;font-size:22rpx}.xtf-demo-title{margin-top:8rpx;color:#fff;font-size:48rpx;font-weight:700}.xtf-demo-intro{margin-top:12rpx}.xtf-demo-section{display:flex;flex-direction:column;margin-top:24rpx;padding:24rpx;border-radius:16rpx;background-color:var(--xtf-color-surface, #fff)}</style>
