<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 Array</text><text class="xtf-demo-intro">动态增删、复制和最小数量限制。</text></view><view class="xtf-demo-section"><XtfFormArray ref="arrayRef" v-model="contacts" title="联系人" :template="template" :min-items="1" :max-items="3" :disabled="disabled" copyable show-indexes @add="status = '已添加或复制'" @remove="status = '已删除'"><template #default="scope"><view class="array-item"><text class="array-label">联系人 {{ scope.index + 1 }}</text><XtfInput custom-class="array-field" v-model="scope.item.name" :disabled="scope.disabled" :readonly="scope.readonly" placeholder="姓名" /><XtfInput custom-class="array-field" v-model="scope.item.phone" :disabled="scope.disabled" :readonly="scope.readonly" placeholder="电话" /><view class="array-demo-tools"><button class="array-demo-tool" :disabled="scope.disabled || scope.index == 0" @click="scope.moveUp()">上移</button><button class="array-demo-tool" :disabled="scope.disabled || scope.index == scope.total - 1" @click="scope.moveDown()">下移</button></view></view></template></XtfFormArray><view class="array-demo-tools"><button id="array-disabled" class="array-demo-tool" @click="disabled = !disabled">切换禁用</button><button id="array-clear" class="array-demo-tool" @click="contacts = []; status = '已外部清空'">外部清空</button><button id="array-add" class="array-demo-tool" @click="arrayRef?.handleAdd()">handleAdd()</button></view><text id="array-result">{{ status }} / {{ contacts.length }} 项，上限 3</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 XtfFormArray from "@/uni_modules/xtf-linkuiunix/components/xtf-form-array/xtf-form-array.uvue"
import XtfInput from "@/uni_modules/xtf-linkuiunix/components/xtf-input/xtf-input.uvue"
const contacts = ref([{ name: "张三", phone: "13800000000" }] as Array<any>); const template = { name: "", phone: "" }
const arrayRef = ref<any>(null)
const disabled = ref(false)
const status = ref("最少保留一项；外部清空不自动填充")
</script>
<style>.array-demo-tools{display:flex;flex-direction:row;flex-wrap:wrap;margin-top:12rpx}.array-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:#a16207}.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)}.array-item{display:flex;flex-direction:column}.array-label{margin-bottom:12rpx;color:var(--xtf-color-text, #172033);font-size:24rpx;font-weight:700}.array-field{margin-top:12rpx}</style>
