@opentinyvue/vue-docs 3.22.0 → 3.22.2

package/demos/mobile-first/app/skeleton/webdoc/skeleton.js

@@ -0,0 +1,135 @@
+export default {
+  column: '2',
+  owner: '',
+  show: true,
+  cloud: false,
+  demos: [
+    {
+      demoId: 'base',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '<p>基础的骨架效果。</p>\n',
+        'en-US': '<p>Basic skeleton effect.</p>\n'
+      },
+      codeFiles: ['base.vue']
+    },
+    {
+      demoId: 'size',
+      name: {
+        'zh-CN': '尺寸',
+        'en-US': 'size'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>size</code>  属性可以控制骨架屏的尺寸。</p>\n',
+        'en-US': '<p>The <code>size</code> property allows you to control the size of the skeleton screen.</p>\n'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'avatar',
+      name: {
+        'zh-CN': '头像模式',
+        'en-US': 'Portrait Mode'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>avatar</code> 属性控制骨架段落左侧出现头像占位。</p>\n',
+        'en-US':
+          '<p>Use the <code>avatar</code> attribute to control the display of the avatar on the left of the skeleton paragraph.</p>\n'
+      },
+      codeFiles: ['avatar.vue']
+    },
+    {
+      demoId: 'custom-rows',
+      name: {
+        'zh-CN': '段落行数',
+        'en-US': 'Custom rows'
+      },
+      desc: {
+        'zh-CN':
+          '<p>段落默认渲染 4 行，通过 <code>rows</code> 属性控制段落行数，显示的数量会比传入的数量多 1，首行会被渲染一个长度 40% 的段首，末行会被渲染一个长度 60% 的段尾。</p>\n',
+        'en-US':
+          '<p>By default, paragraphs are rendered in 4 lines. The number of paragraph lines is controlled through the <code>rows</code> attribute. The number displayed will be 1 more than the number passed in. The first line will render the paragraph header at 40% length, and the last line will render the paragraph trailer at 60% length.</p>\n'
+      },
+      codeFiles: ['custom-rows.vue']
+    },
+    {
+      demoId: 'rows-width',
+      name: {
+        'zh-CN': '段落宽度',
+        'en-US': 'Custom paragraph width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>rows-width</code> 属性可以段落宽度。</p>\n',
+        'en-US':
+          '<p>The <code>rows-width</code> attribute can customize the paragraph width. Each item in the array can be <code>number</code> or <code>string</code>. When it is <code>number< /code>, the component will automatically increase the <code>px</code> unit</p>\n'
+      },
+      codeFiles: ['rows-width.vue']
+    },
+    {
+      demoId: 'custom-layout',
+      name: {
+        'zh-CN': '样式',
+        'en-US': 'Custom layout'
+      },
+      desc: {
+        'zh-CN': '<p>通过<code>style</code> 可自定义样式结构。</p>\n',
+        'en-US': '<p>Customize style structure through<code>style</code>.</p>\n'
+      },
+      codeFiles: ['custom-layout.vue']
+    },
+    {
+      demoId: 'loaded',
+      name: {
+        'zh-CN': '加载完成',
+        'en-US': 'Loading completed'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>loading</code> 属性的值来表示是否加载完成。可以通过具名插槽 <code>default</code> 来构建 <code>loading</code> 结束之后需要展示的真实 DOM 元素结构。</p>\n',
+        'en-US':
+          '<p>Whether the loading is completed is indicated by the value of the <code>loading</code> attribute. You can use the named slot <code>default</code> to build the real DOM element structure that needs to be displayed after <code>loading</code> ends.</p>\n'
+      },
+      codeFiles: ['loaded.vue']
+    },
+    {
+      demoId: 'animation',
+      name: {
+        'zh-CN': '动画效果',
+        'en-US': 'Animation Effect'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>animated</code> 属性设置是否开启动画。</p>\n',
+        'en-US': '<p>Use the <code>animated</code> attribute to set whether to enable animation.</p>\n'
+      },
+      codeFiles: ['animation.vue']
+    },
+    {
+      demoId: 'shape',
+      name: {
+        'zh-CN': '形态',
+        'en-US': 'formative'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>variant</code> 属性可以控制 <code>skeleton-item</code> 的形态。</p>\n',
+        'en-US':
+          '<p>The <code>variant</code> attribute can be used to control the shape of the <code>skeleton-item</code>.</p>\n'
+      },
+      codeFiles: ['shape.vue']
+    },
+    {
+      demoId: 'image-item-slot',
+      name: {
+        'zh-CN': '自定义图像',
+        'en-US': 'Custom image'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>variant="image"</code> 的默认插槽自定义图像。</p>\n',
+        'en-US': '<p>Use the default slot of <code>variant="image"</code> to customize the image.</p>\n'
+      },
+      codeFiles: ['image-item-slot.vue']
+    }
+  ]
+}

package/demos/mobile-first/menus.js

@@ -105,10 +105,10 @@ export const cmpMenus = [
       { name: 'Loading', nameCn: '加载', key: 'loading' },
       { name: 'Tooltip', nameCn: '文字提示', key: 'tooltip' },
       { name: 'Popover', nameCn: '气泡框', key: 'popover' },
-
       { name: 'Popconfirm', nameCn: '气泡确认框', key: 'popconfirm' },
       { name: 'Message', nameCn: '提示框', key: 'message' },
-      { name: 'Modal', nameCn: '模态框', key: 'modal' }
+      { name: 'Modal', nameCn: '模态框', key: 'modal' },
+      { name: 'Skeleton', nameCn: '骨架屏', key: 'skeleton' }
     ]
   },
   {

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

@@ -76,22 +76,22 @@ p {
   :deep(.tiny-action-menu__wrap) {
     .tiny-action-menu__item {
       .tiny-dropdown-item__wrap {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       &:hover {
         .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       .tiny-dropdown {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
     }

package/demos/pc/app/action-menu/icon.vue

@@ -81,22 +81,22 @@ p {
   :deep(.tiny-action-menu__wrap) {
     .tiny-action-menu__item {
       .tiny-dropdown-item__wrap {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       &:hover {
         .tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
 
       .tiny-dropdown {
-        color: #191919;
+        color: var(--tv-color-icon-control);
         .tiny-svg {
-          fill: #191919;
+          fill: var(--tv-color-icon-control);
         }
       }
     }

package/demos/pc/app/action-menu/popper-class-composition-api.vue

@@ -31,6 +31,6 @@ const options = ref([
 
 <style>
 .custom-action-menu {
-  background-color: antiquewhite;
+  background-color: var(--tv-color-bg-3);
 }
 </style>

package/demos/pc/app/action-menu/popper-class.spec.ts

@@ -13,5 +13,5 @@ test('弹框样式', async ({ page }) => {
   await visibleItem.last().hover()
   await page.waitForTimeout(200)
   await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
-  await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
+  await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(255, 255, 255)')
 })

package/demos/pc/app/action-menu/popper-class.vue

@@ -39,6 +39,6 @@ export default {
 
 <style>
 .custom-action-menu {
-  background-color: antiquewhite;
+  background-color: var(--tv-color-bg-3);
 }
 </style>

package/demos/pc/app/action-menu/slot-item-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <tiny-icon-smile></tiny-icon-smile>
-      <span style="vertical-align: middle"> {{ data.name }}</span>
+      <span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>

package/demos/pc/app/action-menu/slot-item.vue

@@ -2,7 +2,7 @@
   <tiny-action-menu :options="options">
     <template #item="{ data }">
       <icon-smile></icon-smile>
-      <span style="vertical-align: middle"> {{ data.name }}</span>
+      <span style="vertical-align: middle; margin-left: 4px"> {{ data.name }}</span>
     </template>
   </tiny-action-menu>
 </template>

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -146,5 +148,150 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'options',
+      name: '菜单配置',
+      support: {
+        value: true
+      },
+      description: '通过 options 属性配置菜单内容，label 定义节点的显示文本。',
+      cloud: {
+        value: true
+      },
+      apis: ['options', 'label'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 字段设置当前下拉选项是否为禁用状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'icon',
+      name: '图标配置',
+      support: {
+        value: true
+      },
+      description: '支持设置菜单项图标、下拉触发源图标，以及控制图标显示。',
+      cloud: {
+        value: true
+      },
+      apis: ['icon', 'suffix-icon', 'show-icon'],
+      demos: ['icon']
+    },
+    {
+      id: 'text-field',
+      name: '文本映射',
+      support: {
+        value: true
+      },
+      description: '通过 text-field 属性设置菜单项文本的键值，默认为 label。',
+      cloud: {
+        value: true
+      },
+      apis: ['text-field'],
+      demos: ['text-field']
+    },
+    {
+      id: 'more-text',
+      name: '下拉按钮文本',
+      support: {
+        value: true
+      },
+      description: '通过 more-text 属性设置下拉按钮文本，默认为"更多"。',
+      cloud: {
+        value: true
+      },
+      apis: ['more-text'],
+      demos: ['more-text']
+    },
+    {
+      id: 'spacing',
+      name: '间距设置',
+      support: {
+        value: true
+      },
+      description: '通过 spacing 属性设置菜单按钮之间的间距，默认为 5px。',
+      cloud: {
+        value: true
+      },
+      apis: ['spacing'],
+      demos: ['spacing']
+    },
+    {
+      id: 'mode',
+      name: '菜单模式',
+      support: {
+        value: true
+      },
+      description: '支持设置菜单模式以适配不同场景，如卡片模式等。',
+      cloud: {
+        value: true
+      },
+      apis: ['mode'],
+      demos: ['card-mode']
+    },
+    {
+      id: 'popper-class',
+      name: '弹框样式',
+      support: {
+        value: true
+      },
+      description: '通过 popper-class 属性设置下拉面板的类名，支持自定义样式。',
+      cloud: {
+        value: true
+      },
+      apis: ['popper-class'],
+      demos: ['popper-class']
+    },
+    {
+      id: 'max-show-num',
+      name: '显示个数限制',
+      support: {
+        value: true
+      },
+      description: '通过 max-show-num 属性设置最多显示菜单按钮的个数，默认为 2。',
+      cloud: {
+        value: true
+      },
+      apis: ['max-show-num'],
+      demos: ['max-show-num']
+    },
+    {
+      id: 'slot',
+      name: '插槽功能',
+      support: {
+        value: true
+      },
+      description: '支持通过 item 插槽自定义下拉选项的 HTML 模板。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-item'],
+      demos: ['slot-item']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '支持监听菜单项点击、下拉按钮点击、弹框显示状态变化等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['item-click', 'more-click', 'visible-change'],
+      demos: ['events']
+    }
   ]
 }

package/demos/pc/app/alert/custom-class-composition-api.vue

@@ -10,6 +10,6 @@ import { TinyAlert } from '@opentiny/vue'
 
 <style scoped>
 .customClass {
-  background-color: pink;
+  background-color: var(--tv-color-bg-disabled-control-active);
 }
 </style>

package/demos/pc/app/alert/custom-class.spec.ts

@@ -8,5 +8,5 @@ test('基本用法', async ({ page }) => {
   const alertBox = demo.locator('.customClass')
 
   // 颜色边框正确
-  await expect(alertBox).toHaveCSS('background-color', 'rgb(255, 192, 203)')
+  await expect(alertBox).toHaveCSS('background-color', 'rgb(179, 214, 255)')
 })

package/demos/pc/app/alert/custom-class.vue

@@ -16,6 +16,6 @@ export default {
 
 <style scoped>
 .customClass {
-  background-color: pink;
+  background-color: var(--tv-color-bg-disabled-control-active);
 }
 </style>

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

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -152,5 +154,138 @@ export default {
       },
       codeFiles: ['custom-class.vue']
     }
+  ],
+  features: [
+    {
+      id: 'type',
+      name: '类型',
+      support: {
+        value: true
+      },
+      description: '通过 type 属性设置不同的提示类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['type'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'size',
+      name: '尺寸模式',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置不同的尺寸模式，可选值：normal（简单模式）、large（完整模式）。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'title',
+      name: '标题设置',
+      support: {
+        value: true
+      },
+      description: '当 size 为 large 时，通过 title 属性或 title 插槽自定义组件标题，通过 show-title 控制标题显示。',
+      cloud: {
+        value: true
+      },
+      apis: ['title', 'show-title'],
+      demos: ['title']
+    },
+    {
+      id: 'description',
+      name: '内容设置',
+      support: {
+        value: true
+      },
+      description: '通过 description 属性或 description 插槽设置提示内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['description'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'center',
+      name: '内容居中',
+      support: {
+        value: true
+      },
+      description: '通过 center 属性设置内容显示居中。',
+      cloud: {
+        value: true
+      },
+      apis: ['center'],
+      demos: ['center']
+    },
+    {
+      id: 'icon',
+      name: '图标设置',
+      support: {
+        value: true
+      },
+      description: '通过 icon 属性设置自定义图标，未设置时根据 type 自动使用对应图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['icon'],
+      demos: ['icon']
+    },
+    {
+      id: 'show-icon',
+      name: '图标显示控制',
+      support: {
+        value: true
+      },
+      description: '通过 show-icon 属性控制左侧图标是否显示。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-icon'],
+      demos: ['show-icon']
+    },
+    {
+      id: 'closable',
+      name: '关闭功能',
+      support: {
+        value: true
+      },
+      description:
+        '通过 closable 属性启用内置关闭图标，通过 close-text 设置关闭按钮文本，支持通过 close 插槽自定义关闭按钮。',
+      cloud: {
+        value: true
+      },
+      apis: ['closable', 'close-text'],
+      demos: ['custom-close']
+    },
+    {
+      id: 'custom-class',
+      name: '自定义类名',
+      support: {
+        value: true
+      },
+      description: '通过 custom-class 设置自定义类名。',
+      cloud: {
+        value: true
+      },
+      apis: ['custom-class'],
+      demos: ['custom-class']
+    },
+    {
+      id: 'slot',
+      name: '插槽功能',
+      support: {
+        value: true
+      },
+      description: '支持通过默认插槽自定义交互操作区域，通过 title 插槽自定义标题，通过 close 插槽自定义关闭按钮。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default', 'slot-title', 'slot-close'],
+      demos: ['slot-default', 'custom-close']
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export default {
   column: '1',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -52,5 +54,85 @@ export default {
       },
       codeFiles: ['change.vue']
     }
+  ],
+  features: [
+    {
+      id: 'links',
+      name: '导航数据',
+      support: {
+        value: true
+      },
+      description: '通过 links 属性设置导航数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['links'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'type',
+      name: '类型设置',
+      support: {
+        value: true
+      },
+      description: '通过 type 属性设置导航类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['type'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'is-affix',
+      name: '固定模式',
+      support: {
+        value: true
+      },
+      description: '通过 is-affix 属性设置固定定位，使导航不随页面滚动。',
+      cloud: {
+        value: true
+      },
+      apis: ['is-affix'],
+      demos: ['is-affix']
+    },
+    {
+      id: 'container',
+      name: '滚动容器',
+      support: {
+        value: true
+      },
+      description: '通过 container-id 设置滚动容器，实现指定容器内的滚动效果。',
+      cloud: {
+        value: true
+      },
+      apis: ['container-id'],
+      demos: ['set-container']
+    },
+    {
+      id: 'mark-class',
+      name: '高亮样式',
+      support: {
+        value: true
+      },
+      description: '通过 mark-class 设置自定义类名，用于高亮显示导航的目标元素。',
+      cloud: {
+        value: true
+      },
+      apis: ['mark-class'],
+      demos: ['set-container']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '支持监听锚点点击事件（link-click）和锚点改变事件（change）。',
+      cloud: {
+        value: true
+      },
+      apis: ['link-click', 'change'],
+      demos: ['set-container', 'change']
+    }
   ]
 }