@opentiny/vue-docs 1.0.1 → 1.0.2

package/resources/pc/api/zh-CN/modal.json

@@ -160,6 +160,13 @@
       "type": "Boolean",
       "desc": "默认最大化显示",
       "defaultValue": "该属性的默认值为 false"
+    },
+    {
+      "name": "message-closable",
+      "sample": "status",
+      "type": "Boolean",
+      "desc": "message信息是否显示关闭按钮",
+      "defaultValue": "该属性的默认值为 false"
     }
   ],
   "slots": [
@@ -222,4 +229,4 @@
       "defaultValue": ""
     }
   ]
-}
+}

package/resources/pc/api/zh-CN/pager.json

@@ -97,6 +97,20 @@
       "type": "String",
       "desc": "设置分页显示模式,默认为number;设置分页显示模式;该属性的可选值为 number / simple / complete / fixed",
       "defaultValue": ""
+    },
+    {
+      "name": "size",
+      "sample": "pager-size",
+      "type": "String",
+      "desc": "定义分页尺寸;该属性的可选值为 mini",
+      "defaultValue": ""
+    },
+    {
+      "name": "disabled",
+      "sample": "pager-disabled",
+      "type": "Boolean",
+      "desc": "禁用分页",
+      "defaultValue": "该属性的默认值为false"
     }
   ],
   "slots": [

package/resources/pc/api/zh-CN/rate.json

@@ -37,10 +37,10 @@
     },
     {
       "name": "disabled-void-icon-class",
-      "sample": "disabled-not-selected-color",
+      "sample": "disabled-void-icon-class",
       "type": "String",
-      "desc": "只读状态下未选中的图标样式名",
-      "defaultValue": "该属性的默认值为 icon-stardisable"
+      "desc": "只读状态下未选中的图标样式名，可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
+      "defaultValue": "该属性的默认值为 icon-starActive"
     },
     {
       "name": "high-threshold",
@@ -109,8 +109,8 @@
       "name": "void-icon-class",
       "sample": "not-selected-class",
       "type": "String",
-      "desc": "未选中 icon 的类名",
-      "defaultValue": "该属性的默认值为 icon-stardisable"
+      "desc": "未选中 icon 的图标样式名,可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
+      "defaultValue": "该属性的默认值为 icon-starActive"
     },
     {
       "name": "radio",
@@ -157,4 +157,4 @@
       "defaultValue": ""
     }
   ]
-}
+}

package/resources/pc/api/zh-CN/search.json

@@ -71,6 +71,13 @@
       "type": "",
       "desc": "默认搜索类型插槽",
       "defaultValue": ""
+    },
+    {
+      "name": "prefix",
+      "sample": "slot-prefix",
+      "type": "",
+      "desc": "左侧插槽",
+      "defaultValue": ""
     }
   ],
   "events": [

package/resources/pc/api/zh-CN/select.json

@@ -175,6 +175,20 @@
       "desc": "选项为空时显示的文字，也可以使用slot=\"empty\"设置",
       "defaultValue": "该属性的默认值为 无数据"
     },
+    {
+      "name": "show-empty-image",
+      "sample": "no-data-text",
+      "type": "Boolean",
+      "desc": "默认不显示空数据图片，设置为 true 的时候显示",
+      "defaultValue": "false"
+    },
+    {
+      "name": "input-box-type",
+      "sample": "input-box-type",
+      "type": "String",
+      "desc": "设置输入框的显示类型，包含 input / underline 两种，默认为input",
+      "defaultValue": "input"
+    },
     {
       "name": "popper-class",
       "sample": "popup-style-position",

package/resources/pc/api/zh-CN/steps.json

@@ -5,20 +5,20 @@
       "sample": "advanced-steps",
       "type": "Number",
       "desc": "设置步骤条的选中步骤，默认为-1 。",
-      "defaultValue": "该属性的默认值为 -1"
+      "defaultValue": "-1"
     },
     {
       "name": "count-field",
       "sample": "custom-steps-item",
       "type": "String",
       "desc": "设置高级向导里徽标计数对应的字段名，默认为 'count'",
-      "defaultValue": "该属性的默认值为 count"
+      "defaultValue": "count"
     },
     {
       "name": "data",
       "sample": "data-resource",
       "type": "Object , Array",
-      "desc": "设置步骤条的数据 。",
+      "desc": "设置步骤条的数据。",
       "defaultValue": ""
     },
     {
@@ -26,7 +26,7 @@
       "sample": "custom-steps-item",
       "type": "String",
       "desc": "设置节点信息中名称对应的字段名，默认为 'name'",
-      "defaultValue": "该属性的默认值为 name"
+      "defaultValue": "name"
     },
     {
       "name": "space",
@@ -40,7 +40,21 @@
       "sample": "custom-steps-item",
       "type": "String",
       "desc": "设置数据状态对应的字段名，默认为 'status'",
-      "defaultValue": "该属性的默认值为 status"
+      "defaultValue": "status"
+    },
+    {
+      "name": "text-position",
+      "sample": "text-position",
+      "type": "String",
+      "desc": "设置节点文本内容的位置, 可选值有right, bottom",
+      "defaultValue": "bottom"
+    },
+    {
+      "name": "show-divider",
+      "sample": "show-divider",
+      "type": "Boolean",
+      "desc": "设置是否显示步骤条底部分割线",
+      "defaultValue": "false"
     }
   ],
   "slots": [
@@ -50,6 +64,13 @@
       "type": "",
       "desc": "步骤条数据项插槽",
       "defaultValue": ""
+    },
+    {
+      "name": "active-node-desc",
+      "sample": "slot",
+      "type": "",
+      "desc": "当前节点描述信息插槽",
+      "defaultValue": ""
     }
   ],
   "events": [
@@ -61,4 +82,4 @@
       "defaultValue": ""
     }
   ]
-}
+}

package/resources/pc/api/zh-CN/tabs.json

@@ -4,7 +4,7 @@
       "name": "tab-style",
       "sample": "tab-style-card",
       "type": "String",
-      "desc": "标签页样式;该属性的可选值为 card / border-card",
+      "desc": "标签页样式;该属性的可选值为 card / border-card / button-card",
       "defaultValue": ""
     },
     {
@@ -84,6 +84,13 @@
       "desc": "设置 tabs 标签页尺寸,当与 tabStyle 为 card 或者 border-card 时生效, 该属性可选值为 small",
       "defaultValue": ""
     },
+    {
+      "name": "drop-config",
+      "sample": "tabs-draggable",
+      "type": "String",
+      "desc": "启用标签页拖拽功能，对标签页进行重新排序，注意：不是通过 v-for 渲染的 tab-item，在拖拽排序后，无法在 tab-drag-end 事件中对其顺序进行保存",
+      "defaultValue": ""
+    },
     {
       "name": "tooltip-config",
       "sample": "position-left",
@@ -99,9 +106,37 @@
       "type": "",
       "desc": "自定义titl内容",
       "defaultValue": ""
+    },
+    {
+      "name": "moreIcon",
+      "sample": "custom-more-icon",
+      "type": "",
+      "desc": "自定义更多图标",
+      "defaultValue": ""
     }
   ],
   "events": [
+    {
+      "name": "tab-drag-start",
+      "sample": "tabs-events-add",
+      "type": "Function(arg1)",
+      "desc": "拖动开始时的事件, arguments: arg1:event",
+      "defaultValue": ""
+    },
+    {
+      "name": "tab-drag-over",
+      "sample": "tabs-events-add",
+      "type": "Function(arg1)",
+      "desc": "拖动中的事件, arguments: arg1:event",
+      "defaultValue": ""
+    },
+    {
+      "name": "tab-drag-end",
+      "sample": "tabs-events-add",
+      "type": "Function(arg1)",
+      "desc": "拖动结束后的事件, arguments: arg1:event",
+      "defaultValue": ""
+    },
     {
       "name": "add",
       "sample": "tabs-events-add",

package/resources/pc/api/zh-CN/tag.json

@@ -11,7 +11,7 @@
       "name": "closeable",
       "sample": "create",
       "type": "Boolean",
-      "desc": "是否可关闭", 
+      "desc": "是否可关闭",
       "defaultValue": ""
     },
     {
@@ -41,12 +41,19 @@
       "type": "String",
       "desc": "主题;该属性的可选值为 dark / light / plain",
       "defaultValue": "该属性的默认值为 light"
+    },
+    {
+      "name": "disabled",
+      "sample": "disabled",
+      "type": "Boolean",
+      "desc": "是否禁用",
+      "defaultValue": "该属性的默认值为 false"
     }
   ],
   "slots": [
     {
       "name": "default",
-      "sample": "effect",
+      "sample": "slot-default",
       "type": "",
       "desc": "标签内容",
       "defaultValue": ""
@@ -68,4 +75,4 @@
       "defaultValue": ""
     }
   ]
-}
+}

package/resources/pc/api/zh-CN/tooltip.json

@@ -7,6 +7,13 @@
       "desc": "默认提供的主题;该属性的可选值为 dark/light",
       "defaultValue": "该属性的默认值为 dark"
     },
+    {
+      "name": "type",
+      "sample": "tooltip-theme",
+      "type": "String",
+      "desc": "默认提供的类型;该属性的可选值为 normal/warning/error/info/success 。type的优先级大于effect",
+      "defaultValue": ""
+    },
     {
       "name": "content",
       "sample": "basic-usage",

package/resources/pc/demo/anchor/is-affix.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="wrap">
-    <tiny-anchor :links="links" is-affix></tiny-anchor>
+    <tiny-switch v-model="isAffix"></tiny-switch>
+    <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+    <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>
 </template>
 
 <script>
-import { Anchor } from '@opentiny/vue'
+import { Anchor, Switch } from '@opentiny/vue'
 export default {
   components: {
-    TinyAnchor: Anchor
+    TinyAnchor: Anchor,
+    TinySwitch: Switch
   },
   data() {
     return {
+      isAffix: false,
       links: [
         {
           key: 'demonstrate',
@@ -53,6 +57,6 @@ export default {
 
 <style scoped>
 .wrap {
-  height: 150px;
+  min-height: 180px;
 }
 </style>

package/resources/pc/demo/area/area-events.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="jsx">
-import { Area } from '@opentiny/vue'
+import { Area, Notify } from '@opentiny/vue'
 
 export default {
   components: {
@@ -22,13 +22,22 @@ export default {
   },
   methods: {
     changeRegion(value) {
-      window.tinyLog('当前选择的 Region 为:', value)
+      Notify({
+        message: '当前选择的 Region 为:' + value,
+        position: 'top-right'
+      })
     },
     changeRep(value) {
-      window.tinyLog('当前选择的 Rep 为:', value)
+      Notify({
+        message: '当前选择的 Rep 为:' + value,
+        position: 'top-right'
+      })
     },
     changeOffice(value) {
-      window.tinyLog('当前选择的 Office 为:', value)
+      Notify({
+        message: '当前选择的 Office 为:' + value,
+        position: 'top-right'
+      })
     }
   }
 }

package/resources/pc/demo/autocomplete/append-prepend.spec.js

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete');
+    await page.getByText('输入框前置内容').nth(1).click();
+    //判断是否获取到前置内容
+    const prependText = await page.textContent('div.tiny-input-group__prepend');
+    await expect(prependText).toBe('前置内容');
+    //判断是否获取到后置内容
+    const appendText = await page.textContent('div.tiny-input-group__append');
+    await expect(appendText).toBe('后置内容');
+});

package/resources/pc/demo/autocomplete/basic-usage.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/autocomplete');
+  await page.getByTitle('表单组件').click();
+  await page.getByTitle('输入框 Input').click();
+  await page.locator('#preview').getByPlaceholder('请输入内容').click();
+  await page.locator('#preview').getByPlaceholder('请输入内容').fill('1111');
+});

package/resources/pc/demo/autocomplete/clearable.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/select-event');
+    await page.getByText('可清除').click();
+    await page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/input').click();
+    await page.getByRole('option', { name: 'WWWW科技YX公司' }).click();
+});

package/resources/pc/demo/autocomplete/cust-template.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete');
+    await page.getByText('自定义模板').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByText('WWWW科技YX公司').click();
+});

package/resources/pc/demo/autocomplete/custom-icon.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete');
+    await page.getByText('自定义图标').first().click();
+    //测试输入框架的前置图标
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/span[1]')).toHaveClass(/tiny-input__prefix/)
+    //测试输入框架的后置图标
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/span[2]')).toHaveClass(/tiny-input__suffix/)
+});

package/resources/pc/demo/autocomplete/debounce.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/debounce');
+    await page.getByText('去抖延时').nth(3).click();
+    await page.locator('.rel').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'WWWW科技YX公司' }).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/input')).toHaveAttribute('debounce', '1000');
+});

package/resources/pc/demo/autocomplete/disabled.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/autocomplete/disabled1');
+  await page.getByTitle('表单组件').click();
+  await page.locator('.rel').click();
+  await expect(page.locator('//div[@class="tiny-input is-disabled"]')).toHaveClass(/disabled/);
+});

package/resources/pc/demo/autocomplete/hide-loading.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/custom-icon');
+    await page.getByText('隐藏加载图标').click();
+    await page.getByPlaceholder('请输入内容').nth(1).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[1]/div/div/input')).toHaveAttribute('hideloading', 'false')
+    await page.getByPlaceholder('请输入内容').nth(2).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[2]/div/div[1]/input')).toHaveAttribute('hideloading', 'true')
+});

package/resources/pc/demo/autocomplete/highlight-first-item.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/placement');
+    await page.getByText('高亮显示第一项').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'TGBYX公司' }).click();
+    await expect(page.locator('#preview').getByPlaceholder('请输入内容')).toHaveAttribute('highlightfirstitem', 'true')
+});

package/resources/pc/demo/autocomplete/no-trigger-on-focus.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/highlight-first-item');
+    await page.getByText('聚焦不显示建议列表').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').fill('宣传单');
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/input')).toHaveAttribute('highlightfirstitem', 'false')
+});

package/resources/pc/demo/autocomplete/placement.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/placement');
+    await page.getByText('设置菜单弹出位置').nth(2).click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'YHN科技YX公司' }).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/input')).toHaveAttribute('placement', 'top-end')
+});

package/resources/pc/demo/autocomplete/popper-class.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/value-key');
+    await page.getByText('自定义列表样式').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByText('康康物业YX公司').click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/input')).toHaveAttribute('popperappendtobody', 'false')
+});

package/resources/pc/demo/autocomplete/prefix-suffix-slot.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/prefix-suffix-slot');
+    await page.getByText('通过插槽自定义图标').nth(1).click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'WWWW科技YX公司' }).click();
+    await page.locator('#preview svg').nth(1).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/span[1]')).toHaveAttribute('class', 'tiny-input__prefix')
+    await page.locator('#preview svg').nth(2).click();
+    await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[1]/span[2]')).toHaveAttribute('class', 'tiny-input__suffix')
+});

package/resources/pc/demo/autocomplete/remote-search.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/size');
+    await page.getByText('远程搜索').nth(1).click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByText('TGBYX公司').click();
+});

package/resources/pc/demo/autocomplete/select-event.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/select-event');
+    await page.getByText('事件').nth(3).click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'RFV有限责任公司' }).click();
+    await page.getByText('当前选择：{"value":"RFV有限责任公司","address":"中山市"}').click();
+});

package/resources/pc/demo/autocomplete/size.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/size');
+    await page.getByText('输入框大小').nth(1).click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'WWWW科技YX公司' }).click();
+    await expect(page.locator('//div[@class="tiny-input tiny-input-medium"]')).toHaveClass(/tiny-input-medium/)
+});

package/resources/pc/demo/autocomplete/value-key.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/autocomplete/remote-search');
+    await page.getByText('指定显示的键名').click();
+    await page.locator('#preview').getByPlaceholder('请输入内容').click();
+    await page.getByRole('option', { name: 'RFV有限责任公司' }).click();
+});

package/resources/pc/demo/autocomplete/value-key.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="demo-autocomplete">
-    <tiny-autocomplete v-model="value" value-key="name" :fetch-suggestions="querySearch" placeholder="请输入内容"></tiny-autocomplete>
+    <tiny-autocomplete
+      v-model="value"
+      value-key="name"
+      :fetch-suggestions="querySearch"
+      placeholder="请输入内容"
+    ></tiny-autocomplete>
   </div>
 </template>
 
@@ -20,13 +25,18 @@ export default {
   methods: {
     querySearch(queryString, cb) {
       let restaurants = this.restaurants
-      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      restaurants = queryString
+        ? restaurants.filter(this.createFilter(queryString))
+        : restaurants
 
       // 调用 callback 返回建议列表的数据
-      cb(results)
+      cb(restaurants)
     },
     createFilter(queryString) {
-      return (restaurant) => restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      return (restaurant) =>
+        restaurant.name
+          .toLowerCase()
+          .indexOf(queryString.toLowerCase()) === 0
     },
     loadAll() {
       return [

package/resources/pc/demo/breadcrumb/options.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-breadcrumb :options="options" @select="itemClick"></tiny-breadcrumb>
-    <tiny-breadcrumb :options="options1" textField="name" @select="itemClick"></tiny-breadcrumb>
+    <tiny-breadcrumb :options="options1" text-field="name" @select="itemClick"></tiny-breadcrumb>
   </div>
 </template>
 

package/resources/pc/demo/breadcrumb/separator.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-breadcrumb separator=">">
+    <tiny-breadcrumb separator="/">
       <tiny-breadcrumb-item><a href="/">首页</a></tiny-breadcrumb-item>
       <tiny-breadcrumb-item>
         <a href="localhost:3000/webcore/v3/zh-CN/component/breadcrumb"> 产品 </a>

package/resources/pc/demo/button/autofocus.spec.js

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/button/reset-time');
+    await page.getByText('默认聚焦').nth(1).click();
+    await page.getByRole('button', { name: '默认按钮' }).click();
+    await page.getByRole('button', { name: '默认聚焦' }).click();
+    const button = await page.getByRole('button', { name: '默认聚焦' });
+    const hasAutofocus = await button.evaluate(button => button.hasAttribute('autofocus'));
+    await expect(hasAutofocus).toBe(true);
+});

package/resources/pc/demo/button/base.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/button/base');
+  await page.getByText('基本用法').nth(1).click();
+  await page.getByRole('button', { name: '默认按钮' }).click();
+  await page.getByRole('button', { name: '朴素按钮' }).click();
+  await page.getByRole('button', { name: '圆角按钮' }).click();
+});