@opentiny/vue-docs 3.26.7 → 3.27.0

package/demos/pc/app/space/webdoc/space.js

@@ -0,0 +1,98 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-space',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>默认采用横向布局（row），自动为插槽内容添加间距。</p>',
+        'en-US': '<p>Uses horizontal layout (row) by default, automatically adding spacing between slot content.</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'space-size',
+      name: {
+        'zh-CN': '间距尺寸',
+        'en-US': 'Spacing Size'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>size</code> 属性设置间距大小，支持 small、medium、large 预定义值或自定义数值/数组。</p>',
+        'en-US':
+          '<p>Use the <code>size</code> prop to set spacing size. Supports predefined values (small, medium, large) or custom values/arrays.</p>'
+      },
+      codeFiles: ['space-size.vue']
+    },
+    {
+      demoId: 'space-direction',
+      name: {
+        'zh-CN': '排列方向',
+        'en-US': 'Layout Direction'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>direction</code> 属性设置布局方向，支持 row（横向）或 column（纵向）。</p>',
+        'en-US':
+          '<p>Use the <code>direction</code> prop to set layout direction: row (horizontal) or column (vertical).</p>'
+      },
+      codeFiles: ['space-direction.vue']
+    },
+    {
+      demoId: 'space-wrap',
+      name: {
+        'zh-CN': '换行显示',
+        'en-US': 'Content Wrapping'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>wrap</code> 属性控制子项内容是否换行显示。</p>',
+        'en-US': '<p>Use the <code>wrap</code> prop to control whether child items wrap to multiple lines.</p>'
+      },
+      codeFiles: ['space-wrap.vue']
+    },
+    {
+      demoId: 'space-align',
+      name: {
+        'zh-CN': '交叉轴对齐',
+        'en-US': 'Cross Axis Alignment'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>align</code> 属性设置交叉轴对齐方式，支持 start、center、end、baseline 等值。</p>',
+        'en-US':
+          '<p>Use the <code>align</code> prop to define alignment on the cross axis, supporting values like start, center, end, and baseline.</p>'
+      },
+      codeFiles: ['space-align.vue']
+    },
+    {
+      demoId: 'space-justify',
+      name: {
+        'zh-CN': '主轴对齐',
+        'en-US': 'Main Axis Justification'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>justify</code> 属性设置主轴对齐方式，支持 start、center、end、space-between、space-around、space-evenly。</p>',
+        'en-US':
+          '<p>Use the <code>justify</code> prop to set main axis alignment, supporting start, center, end, space-between, space-around, and space-evenly.</p>'
+      },
+      codeFiles: ['space-justify.vue']
+    },
+    {
+      demoId: 'space-order',
+      name: {
+        'zh-CN': '自定义排序',
+        'en-US': 'Custom Ordering'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>order</code> 属性传入 key 数组来自定义子元素的渲染顺序，未设置 key 的子元素将自动排列在最后。</p>',
+        'en-US':
+          '<p>Use the <code>order</code> prop with an array of keys to customize the rendering order of child elements. Children without defined keys are automatically arranged at the end.</p>'
+      },
+      codeFiles: ['space-order.vue']
+    }
+  ]
+}

package/demos/pc/app/steps/slot-icon-composition-api.vue

@@ -0,0 +1,46 @@
+<template>
+  <tiny-steps line :data="data" :active="active">
+    <template #icon="{ node, index }">
+      <div v-if="index === 1" class="tiny-steps-icon active">
+        <TinyIconPagelink class="link-svg"></TinyIconPagelink>
+      </div>
+      <div v-else-if="index === 3" class="tiny-steps-icon">
+        <TinyIconVersiontree></TinyIconVersiontree>
+      </div>
+      <div v-else-if="index === 4" class="tiny-steps-icon">
+        <TinyIconCheckedTrue></TinyIconCheckedTrue>
+      </div>
+      <div v-else-if="node.name === '网站备案'" class="tiny-steps-icon">
+        <TinyIconFileupload></TinyIconFileupload>
+      </div>
+    </template>
+  </tiny-steps>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { TinySteps } from '@opentiny/vue'
+import { iconPagelink, iconFileupload, iconVersiontree, iconCheckedTrue } from '@opentiny/vue-icon'
+
+const TinyIconPagelink = iconPagelink()
+const TinyIconFileupload = iconFileupload()
+const TinyIconVersiontree = iconVersiontree()
+const TinyIconCheckedTrue = iconCheckedTrue()
+const active = ref(1)
+const data = reactive([
+  {
+    name: '网站搭建',
+    status: 'done'
+  },
+  { name: '域名注册', status: 'doing' },
+  { name: '网站备案', status: 'doing' },
+  { name: '域名解析（可选填）', status: 'doing' },
+  { name: 'SSL证书', status: 'disabled' }
+])
+</script>
+
+<style scoped>
+.link-svg {
+  fill: #fff;
+}
+</style>

package/demos/pc/app/steps/slot-icon.vue

@@ -0,0 +1,54 @@
+<template>
+  <tiny-steps line :data="data" :active="active">
+    <template #icon="{ node, index }">
+      <div v-if="index === 1" class="tiny-steps-icon active">
+        <TinyIconPagelink class="link-svg"></TinyIconPagelink>
+      </div>
+      <div v-else-if="index === 3" class="tiny-steps-icon">
+        <TinyIconVersiontree></TinyIconVersiontree>
+      </div>
+      <div v-else-if="index === 4" class="tiny-steps-icon">
+        <TinyIconCheckedTrue></TinyIconCheckedTrue>
+      </div>
+      <div v-else-if="node.name === '网站备案'" class="tiny-steps-icon">
+        <TinyIconFileupload></TinyIconFileupload>
+      </div>
+    </template>
+  </tiny-steps>
+</template>
+
+<script>
+import { TinySteps } from '@opentiny/vue'
+import { iconPagelink, iconFileupload, iconVersiontree, iconCheckedTrue } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySteps,
+    TinyIconPagelink: iconPagelink(),
+    TinyIconFileupload: iconFileupload(),
+    TinyIconVersiontree: iconVersiontree(),
+    TinyIconCheckedTrue: iconCheckedTrue()
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        {
+          name: '网站搭建',
+          status: 'done'
+        },
+        { name: '域名注册', status: 'doing' },
+        { name: '网站备案', status: 'doing' },
+        { name: '域名解析（可选填）', status: 'doing' },
+        { name: 'SSL证书', status: 'disabled' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link-svg {
+  fill: #fff;
+}
+</style>

package/demos/pc/app/steps/webdoc/steps.js

@@ -123,6 +123,18 @@ export default {
       },
       codeFiles: ['custom-steps-item.vue']
     },
+    {
+      demoId: 'slot-icon',
+      name: {
+        'zh-CN': '图标插槽',
+        'en-US': 'Icon slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过插槽 <code>icon</code> 自定义单链型节点图标。</p>\n',
+        'en-US': 'Customize a single chain node icon through the slot<code>icon</code>.'
+      },
+      codeFiles: ['slot-icon.vue']
+    },
     {
       demoId: 'slot-item',
       name: {

package/demos/pc/app/tree-menu/events-composition-api.vue

@@ -7,6 +7,7 @@
     @current-change="currentChange"
     @node-expand="nodeExpand"
     @node-collapse="nodeCollapse"
+    @input-change="inputChange"
   ></tiny-tree-menu>
 </template>
 
@@ -184,6 +185,9 @@ const nodeExpand = (data) => {
 const nodeCollapse = (data) => {
   TinyModal.message({ message: `节点 - ${data.label}被关闭了`, status: 'info' })
 }
+const inputChange = (data) => {
+  TinyModal.message({ message: `输入框的内容是 ${data}`, status: 'info' })
+}
 
 const checkChange = (node, newVal) => {
   let state = newVal ? '选中' : '取消'

package/demos/pc/app/tree-menu/events.vue

@@ -7,6 +7,7 @@
     @current-change="currentChange"
     @node-expand="nodeExpand"
     @node-collapse="nodeCollapse"
+    @input-change="inputChange"
   ></tiny-tree-menu>
 </template>
 
@@ -192,6 +193,9 @@ export default {
     nodeCollapse(data) {
       TinyModal.message({ message: `节点 - ${data.label}被关闭了`, status: 'info' })
     },
+    inputChange(data) {
+      TinyModal.message({ message: `输入框的内容是 ${data}`, status: 'info' })
+    },
     checkChange(node, newVal) {
       let state = newVal ? '选中' : '取消'
       TinyModal.message({

package/demos/pc/app/tree-menu/webdoc/tree-menu.js

@@ -343,9 +343,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">事件说明</p>\n<p>node-click：监听节点被点击时的事件。</p>\n<p>current-change：监听当前选中节点发生变化的事件。</p>\n<p>node-expand：监听节点展开的事件。</p>\n<p>node-collapse：监听节点收起的事件。</p>\n<p>check-change：可勾选时，监听勾选节点变化的事件。</p>\n</div>\n',
+          '<div class="tip custom-block"><p class="custom-block-title">事件说明</p>\n<p>node-click：监听节点被点击时的事件。</p>\n<p>current-change：监听当前选中节点发生变化的事件。</p>\n<p>node-expand：监听节点展开的事件。</p>\n<p>node-collapse：监听节点收起的事件。</p>\n<p>check-change：可勾选时，监听勾选节点变化的事件。</p>\n<p>input-change：输入框输入值时触发的事件。</p></div>\n',
         'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">Event description</p>\n<p>node-click: Listen for events when a node is clicked.</p>\n<p>current-change: Listen for events where the currently selected node changes.</p>\n<p>node-expand: Listen for events that node expands.</p>\n<p>node-collapse: Listen for events when a node is folded up.</p>\n<p>check-change: When checked, listen for events related to changes in checked nodes.</p>\n</div>\n'
+          '<div class="tip custom-block"><p class="custom-block-title">Event description</p>\n<p>node-click: Listen for events when a node is clicked.</p>\n<p>current-change: Listen for events where the currently selected node changes.</p>\n<p>node-expand: Listen for events that node expands.</p>\n<p>node-collapse: Listen for events when a node is folded up.</p>\n<p>check-change: When checked, listen for events related to changes in checked nodes.</p>\n<p>input-change：Event triggered when a value is entered into the input box.</p></div>\n'
       },
       codeFiles: ['events.vue']
     },

package/demos/pc/app/tree-menu/with-icon-composition-api.vue

@@ -9,47 +9,172 @@ import { IconPlusCircle, IconPlusSquare, IconPreChecked, IconNode, IconNew } fro
 
 const treeData = reactive([
   {
-    id: 1,
-    label: '首页',
+    id: 100,
+    label: '组件总览',
     customIcon: IconPlusCircle()
   },
   {
-    id: 2,
-    label: '指南',
-    customIcon: IconPlusSquare()
+    id: 200,
+    label: '使用指南',
+    customIcon: IconPlusSquare(),
+    children: [
+      {
+        id: 201,
+        label: '更新日志'
+      },
+      { id: 202, label: '环境准备' },
+      { id: 203, label: '安装' },
+      {
+        id: 204,
+        label: '引入组件',
+        children: [
+          { id: 20401, label: '按需引入' },
+          { id: 20402, label: '完整引入' }
+        ]
+      },
+      { id: 205, label: '开发示例' },
+      { id: 206, label: '国际化' },
+      { id: 207, label: '主题配置' },
+      { id: 208, label: '表单校验配置' },
+      { id: 209, label: '常见问题' }
+    ]
   },
   {
-    id: 3,
-    label: '规范',
-    customIcon: IconPreChecked()
+    id: 300,
+    label: '框架风格',
+    customIcon: IconPreChecked(),
+    children: [
+      {
+        id: 301,
+        label: 'Color 色彩'
+      },
+      { id: 302, label: 'Container 版型' },
+      { id: 303, label: 'Font 字体' },
+      { id: 304, label: 'Icon 图标' },
+      { id: 305, label: 'Layout 布局' }
+    ]
   },
   {
-    id: 4,
-    label: '教程',
-    customIcon: IconNode()
+    id: 400,
+    label: '导航组件',
+    customIcon: IconNode(),
+    children: [
+      {
+        id: 401,
+        label: 'Anchor 锚点'
+      },
+      { id: 402, label: 'Guide 引导' },
+      { id: 403, label: 'Breadcrumb 面包屑' }
+    ]
   },
   {
-    id: 5,
-    label: '性能',
-    customIcon: IconNew()
+    id: 500,
+    label: '容器组件',
+    customIcon: IconNew(),
+    children: [
+      {
+        id: 501,
+        label: 'Carousel 走马灯'
+      },
+      { id: 502, label: 'Collapse 折叠面板' },
+      { id: 503, label: 'DialogBox 对话框' }
+    ]
   },
   {
-    id: 6,
-    label: '组件',
+    id: 600,
+    label: '表单组件',
     customIcon: IconNew(),
     children: [
       {
-        id: 201,
-        label: '引入组件',
-        customIcon: IconNew(),
+        id: 60101,
+        label: 'Button 按钮',
+        url: 'button'
+      },
+      {
+        id: 60102,
+        label: 'DatePicker 日期选择器',
+        url: 'date-picker'
+      },
+      {
+        id: 60103,
+        label: 'Select 选择器',
+        url: 'select'
+      },
+      {
+        id: 60104,
+        label: 'DropTimes 下拉时间',
+        url: 'drop-times'
+      },
+      {
+        id: 60105,
+        label: 'Input 输入框',
+        url: 'input'
+      }
+    ]
+  },
+  {
+    id: 700,
+    label: '业务组件',
+    children: [
+      {
+        id: 701,
+        label: 'Amount 金额'
+      },
+      { id: 702, label: 'Area 片区' },
+      { id: 703, label: 'Company 公司' }
+    ]
+  },
+  {
+    id: 800,
+    label: '其他组件',
+    children: [
+      {
+        id: 801,
+        label: '废弃组件',
         children: [
-          { id: 20101, label: '按需引入' },
-          { id: 20102, label: '完整引入' }
+          {
+            id: 80101,
+            label: 'CreditCardForm 信用卡表单',
+            url: 'credit-card-form'
+          },
+          {
+            id: 80102,
+            label: 'DetailPage 表头详情栏',
+            url: 'detail-page'
+          }
         ]
       },
-      { id: 202, label: '后端适配器' },
-      { id: 203, label: '服务代理' },
-      { id: 204, label: '构建部署' }
+      {
+        id: 802,
+        label: '新增组件',
+        children: [
+          {
+            id: 80201,
+            label: 'QrCode 二维码',
+            url: 'qr-code'
+          },
+          {
+            id: 80202,
+            label: 'Watermark 水印',
+            url: 'watermark'
+          },
+          {
+            id: 80203,
+            label: 'MindMap 脑图',
+            url: 'mind-map'
+          },
+          {
+            id: 80204,
+            label: 'Skeleton 骨架屏',
+            url: 'skeleton'
+          }
+        ]
+      },
+      {
+        id: 803,
+        label: 'BulletinBoard 公告牌'
+      },
+      { id: 804, label: 'Calendar 日历' }
     ]
   }
 ])

package/demos/pc/app/tree-menu/with-icon.spec.ts

@@ -7,6 +7,6 @@ test('节点配置带图标', async ({ page }) => {
   const treeMenu = page.locator('#with-icon .tiny-tree-menu')
   const treeMenuSvg = page.locator('.tree-node-name svg')
 
-  await expect(treeMenu.getByText('首页')).toBeVisible()
+  await expect(treeMenu.getByText('组件总览')).toBeVisible()
   await expect(treeMenuSvg.nth(0)).toBeVisible()
 })

package/demos/pc/app/tree-menu/with-icon.vue

@@ -27,47 +27,172 @@ export default {
       return new Promise((resolve) => {
         resolve([
           {
-            id: 1,
-            label: '首页',
+            id: 100,
+            label: '组件总览',
             customIcon: IconPlusCircle()
           },
           {
-            id: 2,
-            label: '指南',
-            customIcon: IconPlusSquare()
+            id: 200,
+            label: '使用指南',
+            customIcon: IconPlusSquare(),
+            children: [
+              {
+                id: 201,
+                label: '更新日志'
+              },
+              { id: 202, label: '环境准备' },
+              { id: 203, label: '安装' },
+              {
+                id: 204,
+                label: '引入组件',
+                children: [
+                  { id: 20401, label: '按需引入' },
+                  { id: 20402, label: '完整引入' }
+                ]
+              },
+              { id: 205, label: '开发示例' },
+              { id: 206, label: '国际化' },
+              { id: 207, label: '主题配置' },
+              { id: 208, label: '表单校验配置' },
+              { id: 209, label: '常见问题' }
+            ]
           },
           {
-            id: 3,
-            label: '规范',
-            customIcon: IconPreChecked()
+            id: 300,
+            label: '框架风格',
+            customIcon: IconPreChecked(),
+            children: [
+              {
+                id: 301,
+                label: 'Color 色彩'
+              },
+              { id: 302, label: 'Container 版型' },
+              { id: 303, label: 'Font 字体' },
+              { id: 304, label: 'Icon 图标' },
+              { id: 305, label: 'Layout 布局' }
+            ]
           },
           {
-            id: 4,
-            label: '教程',
-            customIcon: IconNode()
+            id: 400,
+            label: '导航组件',
+            customIcon: IconNode(),
+            children: [
+              {
+                id: 401,
+                label: 'Anchor 锚点'
+              },
+              { id: 402, label: 'Guide 引导' },
+              { id: 403, label: 'Breadcrumb 面包屑' }
+            ]
           },
           {
-            id: 5,
-            label: '性能',
-            customIcon: IconNew()
+            id: 500,
+            label: '容器组件',
+            customIcon: IconNew(),
+            children: [
+              {
+                id: 501,
+                label: 'Carousel 走马灯'
+              },
+              { id: 502, label: 'Collapse 折叠面板' },
+              { id: 503, label: 'DialogBox 对话框' }
+            ]
           },
           {
-            id: 6,
-            label: '组件',
+            id: 600,
+            label: '表单组件',
             customIcon: IconNew(),
             children: [
               {
-                id: 201,
-                label: '引入组件',
-                customIcon: IconNew(),
+                id: 60101,
+                label: 'Button 按钮',
+                url: 'button'
+              },
+              {
+                id: 60102,
+                label: 'DatePicker 日期选择器',
+                url: 'date-picker'
+              },
+              {
+                id: 60103,
+                label: 'Select 选择器',
+                url: 'select'
+              },
+              {
+                id: 60104,
+                label: 'DropTimes 下拉时间',
+                url: 'drop-times'
+              },
+              {
+                id: 60105,
+                label: 'Input 输入框',
+                url: 'input'
+              }
+            ]
+          },
+          {
+            id: 700,
+            label: '业务组件',
+            children: [
+              {
+                id: 701,
+                label: 'Amount 金额'
+              },
+              { id: 702, label: 'Area 片区' },
+              { id: 703, label: 'Company 公司' }
+            ]
+          },
+          {
+            id: 800,
+            label: '其他组件',
+            children: [
+              {
+                id: 801,
+                label: '废弃组件',
                 children: [
-                  { id: 20101, label: '按需引入' },
-                  { id: 20102, label: '完整引入' }
+                  {
+                    id: 80101,
+                    label: 'CreditCardForm 信用卡表单',
+                    url: 'credit-card-form'
+                  },
+                  {
+                    id: 80102,
+                    label: 'DetailPage 表头详情栏',
+                    url: 'detail-page'
+                  }
                 ]
               },
-              { id: 202, label: '后端适配器' },
-              { id: 203, label: '服务代理' },
-              { id: 204, label: '构建部署' }
+              {
+                id: 802,
+                label: '新增组件',
+                children: [
+                  {
+                    id: 80201,
+                    label: 'QrCode 二维码',
+                    url: 'qr-code'
+                  },
+                  {
+                    id: 80202,
+                    label: 'Watermark 水印',
+                    url: 'watermark'
+                  },
+                  {
+                    id: 80203,
+                    label: 'MindMap 脑图',
+                    url: 'mind-map'
+                  },
+                  {
+                    id: 80204,
+                    label: 'Skeleton 骨架屏',
+                    url: 'skeleton'
+                  }
+                ]
+              },
+              {
+                id: 803,
+                label: 'BulletinBoard 公告牌'
+              },
+              { id: 804, label: 'Calendar 日历' }
             ]
           }
         ])