@opentiny/vue-docs 1.0.3 → 1.0.4

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@opentiny/vue-docs",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "devDependencies": {
-    "@playwright/test": "^1.29.2"
-  },
   "files": [
     "resources"
   ]

package/resources/mobile-first/app/carousel/card-mode.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-carousel height="150px" type="card">
+    <tiny-carousel-item class="carousel-item-demo" v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </tiny-carousel-item>
+  </tiny-carousel>
+</template>
+
+<script lang="jsx">
+import { Carousel, CarouselItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCarousel: Carousel,
+    TinyCarouselItem: CarouselItem
+  }
+}
+</script>
+
+<style scoped>
+.carousel-item-demo:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.carousel-item-demo:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

package/resources/mobile-first/app/carousel/carousel-events.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <tiny-carousel height="150px" @change="handleChange">
+      <tiny-carousel-item :class="bgColor[item - 1]" v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </tiny-carousel-item>
+    </tiny-carousel>
+
+    <div class="carousel-tip">当前幻灯片索引：{{ curValue }}，上一张幻灯片索引：{{ preValue }}</div>
+  </div>
+</template>
+
+<script>
+import { Carousel, CarouselItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCarousel: Carousel,
+    TinyCarouselItem: CarouselItem
+  },
+  data() {
+    return {
+      curValue: 0,
+      preValue: 0,
+      bgColor: [
+        'bg-color-info-primary-subtle',
+        'bg-color-success-subtle',
+        'bg-color-icon-primary',
+        'bg-color-warning-subtle'
+      ]
+    }
+  },
+  methods: {
+    handleChange(value, oldValue) {
+      this.curValue = value
+      this.preValue = oldValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel-tip {
+  margin: 16px 0 0;
+  text-align: center;
+}
+</style>

package/resources/mobile-first/app/carousel/webdoc/carousel.js

@@ -10,7 +10,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p><p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -23,7 +23,7 @@ export default {
       desc: {
         'zh-CN':
           '<p>走马灯指示器默认显示在幻灯片内容上，配置 `indicator-position` 为 outside 后，将显示在外部。<br />配置 `trigger` 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['indicator-trigger.vue']
     },
@@ -36,7 +36,7 @@ export default {
       desc: {
         'zh-CN':
           '<p>调用 `setActiveItem()`、`next()`、`prev()` 方法可根据需要进行轮播。`initial-index` 属性可以指定初始激活的幻灯片索引。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['manual-play.vue']
     },
@@ -49,7 +49,7 @@ export default {
       desc: {
         'zh-CN':
           '<p>配置 `loop` 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['close-loop.vue']
     },
@@ -61,7 +61,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>配置 `autoplay` 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['autoplay.vue']
     },
@@ -73,7 +73,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 `interval` 属性可以自定义。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['play-interval.vue']
     },
@@ -85,7 +85,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>配置 `type` 属性为 vertical 即可实现纵向轮播。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['up-down-carousel.vue']
     },
@@ -97,7 +97,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>通过 `title` 配置显示标题，需要与 `show-title` 结合使用。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['show-title.vue']
     },
@@ -109,7 +109,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p><p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['carousel-arrow-always.vue']
     },
@@ -121,7 +121,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p><p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['carousel-arrow-hover.vue']
     },
@@ -133,7 +133,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p><p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['carousel-arrow-never.vue']
     },
@@ -146,7 +146,7 @@ export default {
       desc: {
         'zh-CN':
           '<p>`aspect-ratio` 属性可以设置轮播图的宽高比，如果设置了 height，会以 height 为主，默认值为 16:2，可以设置任意的整数宽高比例。 设置了`aspect-ratio`之后页面缩放时会按照设定的比例自动调整轮播器的高度。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['aspect-ratio.vue']
     },
@@ -158,9 +158,33 @@ export default {
       },
       desc: {
         'zh-CN': '<p>`indicator-style` 属性可以设置轮播图指示器样式，支持 light 与 dark 两种类型，默认为 light。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['indicator-style.vue']
+    },
+    {
+      demoId: 'card-mode',
+      name: {
+        'zh-CN': '卡片模式',
+        'en-US': 'card mode'
+      },
+      desc: {
+        'zh-CN': '<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>',
+        'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
+      },
+      codeFiles: ['card-mode.vue']
+    },
+    {
+      demoId: 'carousel-events',
+      name: {
+        'zh-CN': '走马灯事件',
+        'en-US': 'Carousel Events'
+      },
+      desc: {
+        'zh-CN': '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
+        'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card.</p>'
+      },
+      codeFiles: ['carousel-events.vue']
     }
   ],
   apis: []

package/resources/mobile-first/app/drawer/webdoc/drawer.js

@@ -95,7 +95,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
+          '<p>- header: 头部插槽，默认显示头部，设置 :show-header="true" 时有效；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 底部插槽，默认隐藏底部，设置 :show-footer="true" 时有效；<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['slot.vue']

package/resources/mobile-first/app/drawer/width.vue

@@ -3,7 +3,7 @@
     <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
     <tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
       <div style="height: 200px; text-align: center">
-        <tiny-button @click="width = '600px'"> 抽屉宽度改为 700px </tiny-button>
+        <tiny-button @click="width = '700px'"> 抽屉宽度改为 700px </tiny-button>
         <tiny-button @click="width = '80%'"> 抽屉宽度改为 80% </tiny-button>
       </div>
     </tiny-drawer>

package/resources/mobile-first/app/image/auto-fit-container-size.vue

@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-      url: 'webnova/static/images/1.jpg'
+      url: '/static/images/1.jpg'
     }
   }
 }

package/resources/mobile-first/app/image/basic-usage.vue

@@ -15,7 +15,7 @@ export default {
   },
   data() {
     return {
-      url: 'webnova/static/images/1.jpg'
+      url: '/static/images/1.jpg'
     }
   }
 }

package/resources/mobile-first/app/image/preview-src-list.vue

@@ -1,5 +1,12 @@
 <template>
-  <tiny-image :image-size="100" :src="url" :preview-src-list="srcList" show-index @delete="deleteHander" preview-visible></tiny-image>
+  <tiny-image
+    :image-size="100"
+    :src="url"
+    :preview-src-list="srcList"
+    show-index
+    @delete="deleteHander"
+    preview-visible
+  ></tiny-image>
 </template>
 
 <script>
@@ -11,8 +18,8 @@ export default {
   },
   data() {
     return {
-      url: 'webnova/static/images/1.jpg',
-      srcList: ['webnova/static/images/1.jpg', 'webnova/static/images/dog2.png', 'webnova/static/images/3.jpg']
+      url: '/static/images/1.jpg',
+      srcList: ['/static/images/1.jpg', '/static/images/2.jpg', '/static/images/3.jpg']
     }
   },
   methods: {

package/resources/mobile-first/app/image/show-hover.vue

@@ -15,7 +15,7 @@ export default {
   },
   data() {
     return {
-      url: 'webnova/static/images/1.jpg'
+      url: '/static/images/1.jpg'
     }
   }
 }

package/resources/mobile-first/app/progress/dynamic-control-changes.vue

@@ -11,7 +11,7 @@
 
 <script>
 import { Progress, Button } from '@opentiny/vue'
-import { IconMinus, IconPlus } from '@opentiny/vue-icon'
+import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -22,8 +22,8 @@ export default {
     return {
       testInside: true,
       percentage: 20,
-      IconMinus: IconMinus(),
-      IconPlus: IconPlus()
+      IconMinus: iconMinus(),
+      IconPlus: iconPlus()
     }
   },
   methods: {

package/resources/mobile-first/app/progress/format-text.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
     <div>
-      <tiny-button @click="testInside = !testInside">
-        {{ testInside ? '外置' : '内置' }}文字
-      </tiny-button>
+      <tiny-button @click="testInside = !testInside"> {{ testInside ? '外置' : '内置' }}文字 </tiny-button>
     </div>
     <br />
     <div>
-      <tiny-progress class="progress" :stroke-width="24" :format="formatText" :text-inside="testInside" :percentage="percentageText"></tiny-progress>
+      <tiny-progress
+        class="progress"
+        :stroke-width="24"
+        :format="formatText"
+        :text-inside="testInside"
+        :percentage="percentageText"
+      ></tiny-progress>
     </div>
   </div>
 </template>

package/resources/mobile-first/app/progress/webdoc/progress.js

@@ -22,7 +22,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`type="line"` 显示为 line 类型<p>',
+        'zh-CN': '<p><code>type="line"</code>显示为 line 类型<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-type.vue']
@@ -34,7 +34,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`type="circle"` 显示为 circle 类型。`width`可以调整环形进度条画布宽度，默认值为 96px。<p>',
+        'zh-CN': '<p><code>type="circle"</code>显示为 circle 类型。<code>width<code>可以调整环形进度条画布宽度，默认值为 96px。<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-type-circle.vue']
@@ -46,7 +46,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`size` 进度条的大小（small/medium/large）<p>',
+        'zh-CN': '<p><code>size</code>进度条的大小（small/medium/large）<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-size.vue']
@@ -58,7 +58,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`stroke-width`自定义进度条的宽度，单位 px<p>',
+        'zh-CN': '<p><code>stroke-width<code>自定义进度条的宽度，单位 px<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-width.vue']
@@ -70,7 +70,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`status` 进度条当前状态（success/exception/warning）<p>',
+        'zh-CN': '<p><code>status</code>进度条当前状态（success/exception/warning）<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-status.vue']
@@ -82,7 +82,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>`show-text` 是否显示进度条文字内容<p>',
+        'zh-CN': '<p><code>show-text</code>是否显示进度条文字内容<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['text-inside-or-no-text.vue']
@@ -94,7 +94,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>通过 `color` 设置进度条颜色。color 进度条背景色（会覆盖 status 状态颜色）<p>',
+        'zh-CN': '<p>通过 <code>color</code>设置进度条颜色。color 进度条背景色（会覆盖 status 状态颜色）<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['custom-color.vue']
@@ -107,7 +107,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>`text-inside` 进度条显示文字内置在进度条内（只在 type=line 时可用），`format`自定义进度条的文字<p>',
+          '<p><code>text-inside</code>进度条显示文字内置在进度条内（只在 type=line 时可用），<code>format<code>自定义进度条的文字<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['format-text.vue']
@@ -119,8 +119,8 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>通过设置 `percentage` 动态控制进度条变化<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过设置 <code>percentage</code>动态控制进度条变化<p>',
+        'en-US': '<p>button click</p>'
       },
       codeFiles: ['dynamic-control-changes.vue']
     }

package/resources/pc/api/en-US/alert.json

@@ -33,7 +33,7 @@
       "sample": "type",
       "type": "String",
       "desc": "Set the alarm type. The value of this attribute can be success / warning / info / error",
-      "defaultValue": "The default value of this attribute is info."
+      "defaultValue": "The default value of this attribute is success."
     },
     {
       "name": "description",
@@ -47,7 +47,7 @@
       "sample": "center",
       "type": "Boolean",
       "desc": "Whether the text is centered",
-      "defaultValue": "The default value of this attribute is true."
+      "defaultValue": "The default value of this attribute is false."
     },
     {
       "name": "close-text",
@@ -90,7 +90,7 @@
   "events": [
     {
       "name": "close",
-      "sample": "close",
+      "sample": "close-events",
       "type": "",
       "desc": "Event triggered when the alert function is disabled",
       "defaultValue": ""

package/resources/pc/api/en-US/breadcrumb.json

@@ -1,5 +1,5 @@
 {
-  "attrs": [
+  "breadcrumbAttrs": [
     {
       "name": "separator",
       "sample": "separator",
@@ -29,24 +29,15 @@
       "defaultValue": "label"
     }
   ],
-  "events": [
+  "breadcrumbEvents": [
     {
       "name": "select",
-      "sample": "base",
+      "sample": "options",
       "type": "Function",
       "desc": "This event is triggered when breadcrumb-item is clicked.",
       "defaultValue": ""
     }
   ],
-  "slots": [
-    {
-      "name": "default",
-      "sample": "slot-default",
-      "type": "",
-      "desc": "Default slot",
-      "defaultValue": ""
-    }
-  ],
   "breadcrumbItemAttrs": [
     {
       "name": "to",

package/resources/pc/api/en-US/button-group.json

@@ -83,10 +83,17 @@
   "events": [
     {
       "name": "edit",
-      "sample": "edit",
+      "sample": "event-edit",
       "type": "",
       "desc": "Set the callback function triggered when the edit button is clicked.",
       "defaultValue": ""
+    },
+    {
+      "name": "change",
+      "sample": "change-event",
+      "type": "",
+      "desc": "Set the callback function triggered when the selected button is changed.",
+      "defaultValue": ""
     }
   ]
 }

package/resources/pc/api/en-US/collapse.json

@@ -1,8 +1,8 @@
 {
-  "attrs": [
+  "collapseAttrs": [
     {
       "name": "modelValue / v-model",
-      "sample": "accordion",
+      "sample": "basic-usage",
       "type": "String , Array , Number",
       "desc": "Currently activated panel (In accordion mode, the binding value type must be String. Otherwise, the binding value type is array.)",
       "defaultValue": ""
@@ -22,7 +22,7 @@
       "defaultValue": ""
     }
   ],
-  "slots": [
+  "collapseSlots": [
     {
       "name": "default",
       "sample": "dynamic-disable",
@@ -31,7 +31,7 @@
       "defaultValue": ""
     }
   ],
-  "events": [
+  "collapseEvents": [
     {
       "name": "change",
       "sample": "collapse-events",
@@ -39,5 +39,51 @@
       "desc": "Triggered when the current active panel changes. (In accordion mode, the type of activeNames is String. Otherwise, the type of activeNames is array.)",
       "defaultValue": ""
     }
+  ],
+  "collapseItemAttrs": [
+    {
+      "name": "name",
+      "sample": "accordion",
+      "type": "String | Number",
+      "desc": "Unique identifier",
+      "defaultValue": ""
+    },
+    {
+      "name": "title",
+      "sample": "custom-collapse-title",
+      "type": "String",
+      "desc": "Panel Title",
+      "defaultValue": ""
+    },
+    {
+      "name": "disabled",
+      "sample": "dynamic-disable",
+      "type": "Boolean",
+      "desc": "Disable",
+      "defaultValue": "The default value of this attribute is false."
+    }
+  ],
+  "collapseItemSlots": [
+    {
+      "name": "default",
+      "sample": "dynamic-disable",
+      "type": "",
+      "desc": "Default slot",
+      "defaultValue": ""
+    },
+    {
+      "name": "title",
+      "sample": "custom-collapse-title",
+      "type": "",
+      "desc": "Title",
+      "defaultValue": ""
+    },
+    {
+      "name": "icon",
+      "sample": "custom-collapse-icon",
+      "type": "",
+      "desc": "Expand and collapse the icon.",
+      "defaultValue": ""
+    }
   ]
 }

package/resources/pc/api/en-US/dropdown.json

@@ -70,12 +70,26 @@
       "desc": "Configuring DropdownMenu in Profiles",
       "defaultValue": "{\"options\":[],\"textField\":\"label\",\"popper-class\":\"\",\"placement\":\"bottom-end\"}"
     },
+    {
+      "name": "visible-arrow",
+      "sample": "visible-arrow",
+      "type": "Boolean",
+      "desc": "Indicates whether to display arrows. The default value is not displayed",
+      "defaultValue": "false"
+    },
     {
       "name": "title",
       "sample": "options",
       "type": "String",
       "desc": "When the default slot is not used, the menu title can be configured in the title attribute.",
       "defaultValue": "drop-down menu"
+    },
+    {
+      "name": "inherit-width",
+      "sample": "inherit-width",
+      "type": "Boolean",
+      "desc": "The default value is false. When this parameter is set to true, the minimum width of the dialog box inherits the width of the trigger source.",
+      "defaultValue": "false"
     }
   ],
   "slots": [
@@ -195,4 +209,4 @@
       "defaultValue": ""
     }
   ]
-}
+}

package/resources/pc/api/en-US/link-menu.json

@@ -22,7 +22,7 @@
       "defaultValue": ""
     },
     {
-      "name": "titile",
+      "name": "title",
       "sample": "data-resource",
       "type": "String",
       "desc": "Set the title of the favorites menu. The default value is null.",

package/resources/pc/api/en-US/pop-upload.json

@@ -128,7 +128,7 @@
     },
     {
       "name": "data",
-      "sample": "",
+      "sample": "data",
       "type": "Object",
       "desc": "Extra parameters attached during upload",
       "defaultValue": ""