@opentiny/vue-docs 3.26.7 → 3.27.0

package/demos/mobile-first/app/space/basic-usage-composition-api.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 给 space 容器加 id，方便 e2e 定位 -->
+  <div id="space-basic-usage">
+    <!-- 方向按钮 -->
+    <tiny-button type="primary" @click="setDirection('row')">行</tiny-button>
+    <tiny-button type="success" @click="setDirection('column')">列</tiny-button>
+
+    <!-- 间距按钮 -->
+    <div style="margin: 10px 0">
+      <tiny-button @click="value += 5">增加间距 +5</tiny-button>
+      <tiny-button @click="value -= 5">减少间距 -5</tiny-button>
+    </div>
+
+    <!-- 在 tiny-space 上加一个 class，保证 E2E 稳定 -->
+    <tiny-space class="tiny-space" :size="value" :direction="direction">
+      <tiny-button style="margin: 0" v-for="n in 3" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      value: 10, // 初始间距
+      direction: 'column' // 初始方向为 column
+    }
+  },
+  methods: {
+    setDirection(direction) {
+      this.direction = direction
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/basic-usage.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('Space Basic Demo - direction & size (按钮版)', async ({ page }) => {
+  await page.goto('space#space-basic-usage')
+
+  const space = page.locator('#space-basic-usage .tiny-space')
+  await space.waitFor({ state: 'visible', timeout: 5000 })
+
+  const getGap = async () =>
+    await space.evaluate((el) => {
+      const style = getComputedStyle(el)
+      return style.gap || '0px'
+    })
+
+  const getFlexDirection = async () => await space.evaluate((el) => getComputedStyle(el).flexDirection)
+
+  // 初始状态检查
+  expect(await getFlexDirection()).toBe('column')
+  expect(await getGap()).toBe('10px')
+
+  // 点击“行”按钮 -> flex-direction 应变成 row
+  const rowButton = page.locator('#space-basic-usage .tiny-button', { hasText: '行' })
+  await rowButton.click()
+  expect(await getFlexDirection()).toBe('row')
+
+  // 点击增加间距按钮 -> gap 应变成 15px
+  const increaseGap = page.locator('#space-basic-usage .tiny-button', { hasText: '增加间距 +5' })
+  await increaseGap.click()
+  await page.waitForTimeout(50) // 等待 DOM 更新
+  expect(await getGap()).toBe('15px')
+
+  // 点击减少间距按钮 -> gap 应变回 10px
+  const decreaseGap = page.locator('#space-basic-usage .tiny-button', { hasText: '减少间距 -5' })
+  await decreaseGap.click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('10px')
+})

package/demos/mobile-first/app/space/basic-usage.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- 给 space 容器加 id，方便 e2e 定位 -->
+  <div>
+    <tiny-button type="primary" @click="setDirection('row')">行</tiny-button>
+    <tiny-button type="success" @click="setDirection('column')">列</tiny-button>
+
+    <tiny-slider v-model="value" :min="0" :max="50" :step="2" style="width: 300px; margin-bottom: 20px" />
+
+    <!-- 在 tiny-space 上加一个 class，保证 E2E 稳定 -->
+    <tiny-space class="tiny-space" :size="value" :direction="direction">
+      <tiny-button style="margin: 0" v-for="n in 3" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace, TinySlider } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton,
+    TinySlider
+  },
+  data() {
+    return {
+      value: 10, // slider 的值
+      direction: 'column' // 初始方向为 column
+    }
+  },
+  methods: {
+    setDirection(direction) {
+      this.direction = direction
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-align-composition-api.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="space-align" style="display: flex; flex-direction: column; justify-content: space-around">
+    <strong>当前 align: {{ alignValue }}</strong>
+    <tiny-space direction="row" size="4" style="margin-bottom: 10px">
+      <tiny-button style="margin: 0" v-for="val in alignOptions" :key="val" @click="setAlign(val)">
+        {{ val }}
+      </tiny-button>
+    </tiny-space>
+    <tiny-space class="tiny-space" :align="alignValue" style="border: 1px dashed #ccc">
+      <tiny-button style="margin: 0">button</tiny-button>
+      <tiny-button style="height: 60px; margin: 0">高按钮</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinySpace
+  },
+  data() {
+    const alignOptions = ['start', 'center', 'end', 'baseline', 'stretch']
+    return {
+      alignValue: 'start',
+      alignOptions
+    }
+  },
+  methods: {
+    setAlign(val: string) {
+      this.alignValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-align.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('Space align 属性', async ({ page }) => {
+  // 跳转到 align 示例
+  await page.goto('space#space-align')
+
+  // 定位 tiny-space 容器
+  const wrap = page.locator('#space-align .tiny-space')
+
+  // 初始 align 为 start
+  let alignItems = await wrap.evaluate((el) => getComputedStyle(el).alignItems)
+  expect(alignItems).toBe('start') // 注意这里用 start 而不是 flex-start
+
+  // 点击按钮修改 align 为 center
+  await page.getByRole('button', { name: 'center', exact: true }).click()
+
+  // 检查 align 是否更新
+  alignItems = await wrap.evaluate((el) => getComputedStyle(el).alignItems)
+  expect(alignItems).toBe('center')
+
+  // 检查子元素数量
+  const items = wrap.locator('.tiny-button')
+  await expect(items).toHaveCount(2)
+})

package/demos/mobile-first/app/space/space-align.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="display: flex; flex-direction: column; justify-content: space-around">
+    <strong>当前 align: {{ alignValue }}</strong>
+    <tiny-space direction="row" size="4" style="margin-bottom: 10px">
+      <tiny-button style="margin: 0" v-for="val in alignOptions" :key="val" @click="setAlign(val)">
+        {{ val }}
+      </tiny-button>
+    </tiny-space>
+    <tiny-space class="tiny-space" :align="alignValue" style="border: 1px dashed #ccc">
+      <tiny-button style="margin: 0">button</tiny-button>
+      <tiny-button style="height: 60px; margin: 0">高按钮</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinySpace
+  },
+  data() {
+    const alignOptions = ['start', 'center', 'end', 'baseline', 'stretch']
+    return {
+      alignValue: 'start',
+      alignOptions
+    }
+  },
+  methods: {
+    setAlign(val: string) {
+      this.alignValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-direction-composition-api.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="space-direction">
+    <!-- 选择行或列的按钮 -->
+    <tiny-button type="primary" @click="setDirection('row')">行</tiny-button>
+    <tiny-button style="margin: 10px" type="success" @click="setDirection('column')">列</tiny-button>
+
+    <tiny-space class="tiny-space" :direction="direction">
+      <tiny-button style="margin: 0" v-for="n in 3" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      direction: 'column' // 初始方向为 column
+    }
+  },
+  methods: {
+    setDirection(direction) {
+      this.direction = direction
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-direction.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('Space direction 属性', async ({ page }) => {
+  await page.goto('space#space-direction')
+
+  const wrap = page.locator('#space-direction .tiny-space')
+
+  // 获取实际渲染的 flex-direction
+  const getFlexDirection = async () => wrap.evaluate((el) => getComputedStyle(el).flexDirection)
+
+  // 验证 flex-direction 是否为 column
+  expect(await getFlexDirection()).toBe('column')
+
+  // 检查子元素数量
+  const items = wrap.locator('.tiny-button')
+  await expect(items).toHaveCount(3)
+})

package/demos/mobile-first/app/space/space-direction.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <!-- 选择行或列的按钮 -->
+    <tiny-button type="primary" @click="setDirection('row')">行</tiny-button>
+    <tiny-button style="margin: 10px" type="success" @click="setDirection('column')">列</tiny-button>
+
+    <tiny-space class="tiny-space" :direction="direction">
+      <tiny-button style="margin: 0" v-for="n in 3" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      direction: 'column' // 初始方向为 column
+    }
+  },
+  methods: {
+    setDirection(direction) {
+      this.direction = direction
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-justify-composition-api.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="space-justify" style="margin-bottom: 16px">
+    <strong>当前 justify: {{ justifyValue }}</strong>
+    <tiny-space direction="row" size="4" style="margin-bottom: 10px">
+      <tiny-button v-for="val in justifyOptions" :key="val" @click="setJustify(val)">
+        {{ val }}
+      </tiny-button>
+    </tiny-space>
+
+    <tiny-space
+      class="tiny-space"
+      direction="row"
+      :justify="justifyValue"
+      style="border: 1px dashed #ccc; padding: 8px"
+    >
+      <tiny-button>按钮 1</tiny-button>
+      <tiny-button>按钮 2</tiny-button>
+      <tiny-button>按钮 3</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinySpace
+  },
+  data() {
+    const justifyOptions = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly']
+    return {
+      justifyValue: 'start',
+      justifyOptions
+    }
+  },
+  methods: {
+    setJustify(val: string) {
+      this.justifyValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-justify.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('Space justify 属性', async ({ page }) => {
+  await page.goto('space#space-justify')
+
+  const space = page.locator('#space-justify .tiny-space')
+
+  // 初始值为 start
+  await expect(space).toHaveAttribute('style', /justify-content:\s*(flex-start|start)/)
+
+  // 切换到 space-between
+  await page.getByRole('button', { name: 'space-between' }).click()
+  await expect(space).toHaveAttribute('style', /justify-content:\s*space-between/)
+
+  // 再切换到 center
+  await page.getByRole('button', { name: 'center' }).click()
+  await expect(space).toHaveAttribute('style', /justify-content:\s*center/)
+})

package/demos/mobile-first/app/space/space-justify.vue

@@ -0,0 +1,39 @@
+<template>
+  <div style="margin-bottom: 16px">
+    <strong>当前 justify: {{ justifyValue }}</strong>
+    <tiny-space direction="row" size="4" style="margin-bottom: 10px">
+      <tiny-button v-for="val in justifyOptions" :key="val" @click="setJustify(val)">
+        {{ val }}
+      </tiny-button>
+    </tiny-space>
+
+    <tiny-space direction="row" :justify="justifyValue" style="border: 1px dashed #ccc; padding: 8px">
+      <tiny-button>按钮 1</tiny-button>
+      <tiny-button>按钮 2</tiny-button>
+      <tiny-button>按钮 3</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinySpace
+  },
+  data() {
+    const justifyOptions = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly']
+    return {
+      justifyValue: 'start',
+      justifyOptions
+    }
+  },
+  methods: {
+    setJustify(val: string) {
+      this.justifyValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-order-composition-api.vue

@@ -0,0 +1,14 @@
+<template>
+  <tiny-space id="space-order" :order="order" style="border: 1px dashed #ccc">
+    <tiny-button key="1">First Button</tiny-button>
+    <tiny-button key="2">Second Button</tiny-button>
+    <tiny-button key="3">Third Button</tiny-button>
+    <tiny-button>Fourth Button</tiny-button>
+  </tiny-space>
+</template>
+
+<script setup>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+const order = ['2', '3', '1'] // 自定义顺序：第二个、第三个、然后第一个
+</script>

package/demos/mobile-first/app/space/space-order.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Space order 属性', async ({ page }) => {
+  await page.goto('space#space-order')
+
+  const buttons = page.locator('#space-order .tiny-button')
+
+  // 检查顺序是否符合 order=['2','3','1']
+  await expect(buttons.nth(0)).toHaveText('Second Button')
+  await expect(buttons.nth(1)).toHaveText('Third Button')
+  await expect(buttons.nth(2)).toHaveText('First Button')
+  await expect(buttons.nth(3)).toHaveText('Fourth Button')
+})

package/demos/mobile-first/app/space/space-order.vue

@@ -0,0 +1,14 @@
+<template>
+  <tiny-space :order="order" style="border: 1px dashed #ccc">
+    <tiny-button key="1">First Button</tiny-button>
+    <tiny-button key="2">Second Button</tiny-button>
+    <tiny-button key="3">Third Button</tiny-button>
+    <tiny-button>Fourth Button</tiny-button>
+  </tiny-space>
+</template>
+
+<script setup>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+const order = ['2', '3', '1'] // 自定义顺序：第二个、第三个、然后第一个
+</script>

package/demos/mobile-first/app/space/space-size-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="space-size">
+    <!-- 显示当前间距 -->
+    <div>
+      <strong>当前间距: [{{ rowValue }}, {{ columnValue }}]</strong>
+    </div>
+
+    <!-- 行间距操作按钮 -->
+    <div>
+      <tiny-button id="increase-row" @click="rowValue += 5">增加行间距 +5</tiny-button>
+      <tiny-button id="decrease-row" @click="rowValue -= 5">减少行间距 -5</tiny-button>
+    </div>
+
+    <!-- 列间距操作按钮 -->
+    <div>
+      <tiny-button id="increase-column" @click="columnValue += 5">增加列间距 +5</tiny-button>
+      <tiny-button id="decrease-column" @click="columnValue -= 5">减少列间距 -5</tiny-button>
+    </div>
+
+    <!-- tiny-space 容器 -->
+    <tiny-space class="tiny-space" :size="[rowValue, columnValue]" :wrap="true">
+      <tiny-button v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: { TinyButton, TinySpace },
+  data() {
+    return {
+      rowValue: 10,
+      columnValue: 10
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-size.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('Space size 动态调整（按钮版）', async ({ page }) => {
+  await page.goto('space#space-size')
+
+  const space = page.locator('#space-size .tiny-space')
+  await space.waitFor({ state: 'visible', timeout: 5000 })
+
+  const getGap = async () =>
+    await space.evaluate((el) => {
+      const style = getComputedStyle(el)
+      return `${style.rowGap || style.gap} ${style.columnGap || style.gap}`
+    })
+
+  // 初始值检查
+  expect(await getGap()).toBe('10px 10px')
+
+  // 点击增加行间距按钮
+  await page.locator('#increase-row').click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('10px 15px') // 行间距对应 rowGap，列间距对应 columnGap
+
+  // 点击增加列间距按钮
+  await page.locator('#increase-column').click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('15px 15px')
+
+  // 点击减少行间距按钮
+  await page.locator('#decrease-row').click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('15px 10px')
+
+  // 点击减少列间距按钮
+  await page.locator('#decrease-column').click()
+  await page.waitForTimeout(50)
+  expect(await getGap()).toBe('10px 10px')
+})

package/demos/mobile-first/app/space/space-size.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <!-- 选择行或列的按钮 -->
+    <div>
+      <strong>当前 间距: [{{ rowValue }}, {{ columnValue }}]</strong>
+    </div>
+    <div>
+      <tiny-button type="primary">行</tiny-button>
+      <tiny-slider v-model="rowValue" :min="0" :max="50" :step="2" style="width: 300px; margin-bottom: 20px" />
+    </div>
+    <div>
+      <tiny-button type="success">列</tiny-button>
+      <tiny-slider v-model="columnValue" :min="0" :max="50" :step="2" style="width: 300px; margin-bottom: 20px" />
+    </div>
+
+    <!-- 使用 dynamic direction 值 -->
+    <tiny-space class="tiny-space" :size="[rowValue, columnValue]" :wrap="true">
+      <tiny-button style="margin: 0" v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script>
+import { TinyButton, TinySpace, TinySlider } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton,
+    TinySlider
+  },
+  data() {
+    return {
+      rowValue: 10,
+      columnValue: 10
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-wrap-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="space-wrap">
+    <!-- 选择行或列的按钮 -->
+    <tiny-button type="primary" @click="setWrap(true)">换行</tiny-button>
+    <tiny-button type="success" style="margin: 10px" @click="setWrap(false)">不换行</tiny-button>
+    <tiny-space class="tiny-space" :size="12" :wrap="wrapValue">
+      <tiny-button style="margin: 0" v-for="n in 10" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      wrapValue: false
+    }
+  },
+  methods: {
+    setWrap(val: boolean) {
+      this.wrapValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/space-wrap.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('Space wrap 切换', async ({ page }) => {
+  await page.goto('space#space-wrap')
+
+  const space = page.locator('#space-wrap .tiny-space')
+
+  // 工具函数：获取当前 flex-wrap
+  const getFlexWrap = async () => {
+    return await space.evaluate((el) => getComputedStyle(el).flexWrap)
+  }
+
+  // 默认不换行
+  expect(await getFlexWrap()).toBe('nowrap')
+
+  // 点击“换行”按钮，使用 exact:true 避免严格模式报错
+  const wrapButton = page.getByRole('button', { name: '换行', exact: true })
+  await wrapButton.click()
+  expect(await getFlexWrap()).toBe('wrap')
+
+  // 点击“不换行”按钮
+  const nowrapButton = page.getByRole('button', { name: '不换行', exact: true })
+  await nowrapButton.click()
+  expect(await getFlexWrap()).toBe('nowrap')
+})

package/demos/mobile-first/app/space/space-wrap.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <!-- 选择行或列的按钮 -->
+    <tiny-button type="primary" @click="setWrap(true)">换行</tiny-button>
+    <tiny-button type="success" style="margin: 10px" @click="setWrap(false)">不换行</tiny-button>
+    <tiny-space :size="12" :wrap="wrapValue">
+      <tiny-button style="margin: 0" v-for="n in 10" :key="n">按钮 {{ n }}</tiny-button>
+    </tiny-space>
+  </div>
+</template>
+
+<script lang="ts">
+import { TinyButton, TinySpace } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySpace,
+    TinyButton
+  },
+  data() {
+    return {
+      wrapValue: false
+    }
+  },
+  methods: {
+    setWrap(val: boolean) {
+      this.wrapValue = val
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/space/webdoc/space.cn.md

@@ -0,0 +1,9 @@
+---
+title: Space 间距
+---
+
+# Space 间距
+
+<div>
+主要用于控制界面元素之间的空白区域，帮助提升整体布局的清晰度和美观性。
+</div>