<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="col-demo-scroll xtf-page-scroll" direction="vertical"><view class="col-demo-page xtf-safe-bottom xtf-page-scroll-content"><view class="col-demo-hero"><XtfText level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="col-demo-title" level="display" color="inverse" text="Col" /><XtfText class="col-demo-intro" level="caption" color="inverse" text="24 栅格列与 Row 组合，支持偏移、推拉和断点属性。" /></view>
    <view class="col-demo-section"><XtfText class="col-demo-heading" level="h3" text="24 栅格" /><XtfRow :gutter="16"><XtfCol :span="8"><view class="col-demo-box col-demo-blue"><text>span 8</text></view></XtfCol><XtfCol :span="8"><view class="col-demo-box col-demo-green"><text>span 8</text></view></XtfCol><XtfCol :span="8"><view class="col-demo-box col-demo-orange"><text>span 8</text></view></XtfCol></XtfRow></view>
    <view class="col-demo-section"><XtfText class="col-demo-heading" level="h3" text="offset、push 与 pull" /><XtfRow gutter="16rpx" justify="center"><XtfCol :span="8" :offset="2"><view class="col-demo-box col-demo-blue"><text>offset 2</text></view></XtfCol><XtfCol :span="8" :push="2"><view class="col-demo-box col-demo-purple"><text>push 2</text></view></XtfCol><XtfCol :span="6" :pull="2"><view class="col-demo-box col-demo-orange"><text>pull 2</text></view></XtfCol></XtfRow></view>
    <view class="col-demo-section"><XtfText class="col-demo-heading" level="h3" text="响应式属性" /><XtfRow :gutter="16"><XtfCol :xs="24" :sm="12" :md="8" :lg="6"><view class="col-demo-box col-demo-blue"><text>xs 24 / sm 12 / md 8</text></view></XtfCol><XtfCol :xs="responsivePoint" :sm="12" :md="8" :lg="6"><view class="col-demo-box col-demo-green"><text>对象断点 + offset</text></view></XtfCol><XtfCol :xs="24" :sm="12" :md="8" :lg="6"><view class="col-demo-box col-demo-orange"><text>响应式列</text></view></XtfCol><XtfCol :span="0"><view class="col-demo-box col-demo-purple"><text>span 0</text></view></XtfCol></XtfRow></view>
    <view class="col-demo-section"><XtfText class="col-demo-heading" level="h3" text="对齐与换行" /><XtfRow :gutter="16" justify="space-between" align="middle" :wrap="false"><XtfCol :span="7"><view class="col-demo-box col-demo-blue"><text>start</text></view></XtfCol><XtfCol :span="7"><view class="col-demo-box col-demo-green col-demo-box-tall"><text>middle</text></view></XtfCol><XtfCol :span="7"><view class="col-demo-box col-demo-orange"><text>nowrap</text></view></XtfCol></XtfRow></view>
    <view class="col-demo-section"><button class="demo-col-span" size="mini" @click="dynamicSpan = dynamicSpan == 0 ? 12 : 0">显示 / 隐藏第一列</button><button class="demo-col-offset" size="mini" @click="dynamicOffset = dynamicOffset == 0 ? 6 : 0">偏移 {{ dynamicOffset }}</button><XtfRow gutter="24px"><XtfCol :span="dynamicSpan" :offset="dynamicOffset"><view class="col-demo-box col-demo-purple"><text>动态 span {{ dynamicSpan }} / offset {{ dynamicOffset }}</text></view></XtfCol></XtfRow></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 XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfRow from "@/uni_modules/xtf-linkuiunix/components/xtf-row/xtf-row.uvue"
import XtfCol from "@/uni_modules/xtf-linkuiunix/components/xtf-col/xtf-col.uvue"
const responsivePoint = { span: 24, offset: 0 }
const dynamicSpan = ref(12)
const dynamicOffset = ref(0)
</script>
<style>
@import "../../../uni_modules/xtf-linkuiunix/theme/index.css";
.col-demo-scroll { flex: 1; width: 100%; height: 100%; }.col-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.col-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #2563eb; }.col-demo-title { margin-top: 8rpx; font-size: 52rpx; font-weight: 700; }.col-demo-intro { margin-top: 14rpx; }.col-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.col-demo-heading { margin-bottom: 18rpx; font-size: 30rpx; font-weight: 700; }.col-demo-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 84rpx; margin-bottom: 16rpx; border-radius: 10rpx; }.col-demo-box-tall { min-height: 120rpx; }.col-demo-box-label { color: #0f172a; font-size: 20rpx; text-align: center; }.col-demo-blue { background-color: #dbeafe; }.col-demo-green { background-color: #d1fae5; }.col-demo-orange { background-color: #ffedd5; }.col-demo-purple { background-color: #ede9fe; }
</style>
