@opentiny/vue-docs 1.0.0 → 1.0.2

package/resources/pc/demo/tabs/custom-more-icon.vue

@@ -0,0 +1,69 @@
+<template>
+  <tiny-tabs style="width: 400px" show-more-tabs popper-class="custom-class">
+    <template #moreIcon>
+      <icon-popup />
+    </template>
+    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem,
+    IconPopup: iconPopup()
+  },
+  data() {
+    return {
+      Tabs: [
+        {
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab content '
+        },
+        {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        },
+        {
+          title: 'Tab 3',
+          name: '3',
+          content: 'Tab 3 content'
+        },
+        {
+          title: 'Tab 4',
+          name: '4',
+          content: 'Tab 4 content'
+        },
+        {
+          title: 'Tab 5',
+          name: '5',
+          content: 'Tab 5 content'
+        },
+        {
+          title: 'Tab 6',
+          name: '6',
+          content: 'Tab 6 content'
+        },
+        {
+          title: 'Tab 7',
+          name: '7',
+          content: 'Tab 7 content'
+        },
+        {
+          title: 'Tab 8',
+          name: '8',
+          content: 'Tab 8 content'
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/tabs/tabs-draggable.vue

@@ -0,0 +1,79 @@
+<template>
+  <tiny-tabs
+    v-model="tabName"
+    tab-style="card"
+    :drop-config="dropConfig"
+    :editable="false"
+    :with-add="true"
+    @add="handleAdd"
+    style="width: 500px"
+    :show-more-tabs="more"
+    @tab-drag-start="handleStart"
+    @tab-drag-over="handleOver"
+    @tab-drag-end="handleEnd"
+  >
+    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+      {{ item.content }}
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script>
+import { Tabs, TabItem } from '@opentiny/vue'
+import Sortable from 'sortablejs'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      more: false,
+      tabName: '2',
+      dropConfig: {
+        plugin: Sortable
+      },
+      Tabs: [
+        {
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab content '
+        },
+        {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        },
+        {
+          title: 'Tab 3',
+          name: '3',
+          content: 'Tab 3 content'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleStart(event) {
+      console.log(event)
+    },
+    handleOver(event) {
+      console.log(event)
+    },
+    handleEnd(event) {
+      const { oldDraggableIndex, newDraggableIndex } = event
+      const tab = this.Tabs.splice(oldDraggableIndex, 1)[0]
+      this.Tabs.splice(newDraggableIndex, 0, tab)
+
+      console.log(this.Tabs)
+    },
+    handleAdd() {
+      this.Tabs.push({
+        title: 'Tab ' + String(this.Tabs.length + 1),
+        name: String(this.Tabs.length + 1),
+        content: '动态增加tabitem'
+      })
+    }
+  }
+}
+</script>

package/resources/pc/demo/tabs/tabs-second-layer.vue

@@ -0,0 +1,107 @@
+<template>
+  <tiny-tabs v-model="activeName">
+    <tiny-tab-item v-for="items in tabs" :key="items.name" :title="items.title" :name="items.name">
+      <tiny-tabs tab-style="button-card">
+        <tiny-tab-item v-for="item in items.content" :key="item.name" :title="item.title" :name="item.name">
+          <template #title v-if="item.icon">
+            <span class="item"> {{ item.title }} </span>
+          </template>
+          {{ item.content }}
+        </tiny-tab-item>
+      </tiny-tabs>
+    </tiny-tab-item>
+  </tiny-tabs>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName: 'first',
+      tabs: [
+        {
+          name: 'first',
+          title: '选项一',
+          content: [
+            {
+              name: '系统镜像',
+              title: '系统镜像',
+              content: '系统镜像'
+            },
+            {
+              name: '应用镜像',
+              title: '应用镜像',
+              content: '应用镜像'
+            },
+            {
+              name: '私有镜像',
+              title: '私有镜像',
+              content: '私有镜像'
+            },
+            {
+              name: '共享镜像',
+              title: '共享镜像',
+              content: '共享镜像'
+            }
+          ]
+        },
+        {
+          name: 'second',
+          title: '选项二',
+          content: [
+            {
+              name: '￥',
+              icon: true,
+              title: '￥',
+              content: '￥'
+            },
+            {
+              name: '$',
+              icon: true,
+              title: '$',
+              content: '$'
+            }
+          ]
+        },
+        {
+          name: 'third',
+          title: '选项三',
+          content: [
+            {
+              name: '云镜像',
+              title: '云镜像',
+              content: '云镜像'
+            }
+          ]
+        },
+        {
+          name: 'fourth',
+          title: '选项四',
+          content: [
+            {
+              name: '云镜像',
+              title: '云镜像',
+              content: '云镜像'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.item {
+  width: 14px;
+  padding: 0 8px;
+  text-align: center;
+  font-weight: normal;
+}
+</style>

package/resources/pc/demo/tag/disabled.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <tiny-tag size="small" disabled closable> <icon-time class="tiny-svg-size" />标签 </tiny-tag>
+    <tiny-tag disabled closable> <icon-time class="tiny-svg-size" />标签 </tiny-tag>
+    <tiny-tag size="medium" disabled closable> <icon-time class="tiny-svg-size medium" />标签 </tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tag, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag {
+  margin-right: 10px;
+}
+.medium {
+  font-size: 20px;
+}
+</style>

package/resources/pc/demo/tag/slot-default.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tiny-tag size="small" :disabled="disabled" class="first">
+      <icon-fileupload class="tiny-svg-size left" />标签 <icon-chevron-right class="tiny-svg-size right" />
+    </tiny-tag>
+    <tiny-tag size="small" :disabled="disabled" closable> <icon-time class="tiny-svg-size" />标签 </tiny-tag>
+    <tiny-tag :disabled="disabled" closable> <icon-time class="tiny-svg-size" />标签 </tiny-tag>
+    <tiny-tag size="medium" :disabled="disabled" closable> <icon-time class="tiny-svg-size medium" />标签 </tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tag } from '@opentiny/vue'
+import { IconTime, IconFileupload, IconChevronRight } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTag: Tag,
+    IconTime: IconTime(),
+    IconFileupload: IconFileupload(),
+    IconChevronRight: IconChevronRight()
+  },
+  data() {
+    return {
+      disabled: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag {
+  margin-right: 10px;
+}
+.first {
+  color: #a25203;
+}
+.first svg {
+  fill: #a25203;
+}
+.first .right {
+  margin-right: -2px;
+}
+.tiny-svg-size {
+  fill: #595959;
+  margin-right: 4px;
+  font-size: 16px;
+}
+.medium {
+  font-size: 20px;
+}
+</style>

package/resources/pc/demo/tag/tag-size.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <tiny-tag>默认标签</tiny-tag>
-    <tiny-tag size="medium">中等标签</tiny-tag>
-    <tiny-tag size="small">小型标签</tiny-tag>
-    <tiny-tag size="mini">超小标签</tiny-tag>
+    <tiny-tag> 默认标签 </tiny-tag>
+    <tiny-tag size="medium"> 中等标签 </tiny-tag>
+    <tiny-tag size="small"> 小型标签 </tiny-tag>
+    <tiny-tag size="mini"> 超小标签 </tiny-tag>
   </div>
 </template>
 
@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag {
+  margin-right: 10px;
+}
+</style>

package/resources/pc/demo/toggle-menu/drag-events.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="jsx">
-import { ToggleMenu, Modal } from '@opentiny/vue'
+import { ToggleMenu, Notify } from '@opentiny/vue'
 
 export default {
   components: {
@@ -98,19 +98,34 @@ export default {
   },
   methods: {
     nodeDragStart() {
-      window.tinyLog('拖拽节点后的事件')
+      Notify({
+        message: '拖拽节点后的事件',
+        position: 'top-right'
+      })
     },
     nodeDragEnter() {
-      window.tinyLog('拖拽进入某个节点（包含自身节点）时触发的事件')
+      Notify({
+        message: '拖拽进入某个节点（包含自身节点）时触发的事件',
+        position: 'top-right'
+      })
     },
     nodeDragOver() {
-      window.tinyLog('拖拽经过某个节点（包含自身节点）时触发的事件')
+      Notify({
+        message: '拖拽经过某个节点（包含自身节点）时触发的事件',
+        position: 'top-right'
+      })
     },
     nodeDragLeave() {
-      window.tinyLog('拖拽离开某个节点（包含自身节点）时触发的事件')
+      Notify({
+        message: '拖拽离开某个节点（包含自身节点）时触发的事件',
+        position: 'top-right'
+      })
     },
     nodeDragEnd() {
-      window.tinyLog('拖拽结束时触发的事件')
+      Notify({
+        message: '拖拽结束时触发的事件',
+        position: 'top-right'
+      })
     }
   }
 }

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

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+// 测试组的写法
+test.describe('Tooltip 基本用法', () => {
+  test('测试Tooltip的是否能出现', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/tooltip/basic-usage')
+
+    await page.getByRole('button', { name: '上右' }).hover()
+    await expect(page.getByRole('tooltip', { name: 'Top Right 提示文字' })).toBeVisible() // 预期行为
+
+    await page.waitForTimeout(1000)
+  })
+
+  test('测试Tooltip的位置是否正确', async ({ page }) => {
+    await page.goto('http://localhost:7130/pc/tooltip/basic-usage')
+
+    let button = page.getByRole('button', { name: '上右' })
+    await page.getByRole('button', { name: '上右' }).hover()
+
+    let tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
+    let buttonPos = await button.boundingBox()
+    let tooltipPos = await tooltip.boundingBox()
+
+    // tooltip + 高度 要小于button的y
+    expect(tooltipPos.y + tooltipPos.height).toBeLessThan(buttonPos.y)
+
+    button = page.getByRole('button', { name: '下左' })
+    await button.hover()
+
+    tooltip = page.getByRole('tooltip', { name: 'Bottom Left 提示文字' })
+    buttonPos = await button.boundingBox()
+    tooltipPos = await tooltip.boundingBox()
+
+    // button + 高度 要小于 tooltip 的y
+    expect(buttonPos.y + buttonPos.height).toBeLessThan(tooltipPos.y)
+  })
+})

package/resources/pc/demo/tooltip/tooltip-content.vue

@@ -1,23 +1,47 @@
 <template>
   <div>
-    <tiny-tooltip placement="bottom">
+    <tiny-tooltip placement="top">
       <template #content>
-        <div style="height: 100px">通过 slot = "content" 自定义提示内容</div>
+        <div class="h50">通过 <span class="red">slot = "content" </span>自定义提示内容</div>
       </template>
       <button class="tiny-button tiny-button--primary">插槽的使用</button>
     </tiny-tooltip>
+
+    <tiny-tooltip placement="top" effect="light">
+      <template #content>
+        <div><Icon-operationfaild class="red" /> 该网段不可用！可用网段：163</div>
+      </template>
+      <button class="tiny-button tiny-button--primary">校验错误</button>
+    </tiny-tooltip>
   </div>
 </template>
 
 <script lang="jsx">
 import { Tooltip } from '@opentiny/vue'
+import { iconOperationfaild } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip: Tooltip,
+    IconOperationfaild: iconOperationfaild()
   },
   data() {
     return {}
   }
 }
 </script>
+
+<style scoped>
+.h50 {
+  height: 50px;
+}
+
+.mr9 {
+  margin-right: 9px;
+}
+
+.red {
+  color: #f23030;
+  fill: #f23030;
+}
+</style>

package/resources/pc/demo/tooltip/tooltip-theme.vue

@@ -3,9 +3,24 @@
     <tiny-tooltip content="Top Center 提示文字" placement="top">
       <button>Dark</button>
     </tiny-tooltip>
-    <tiny-tooltip effect="light" content="Bottom Center 提示文字" placement="bottom">
+    <tiny-tooltip effect="light" content="Top Center 提示文字" placement="top">
       <button>Light</button>
     </tiny-tooltip>
+    <tiny-tooltip type="normal" content="Top Center 提示文字" placement="top">
+      <button>normal</button>
+    </tiny-tooltip>
+    <tiny-tooltip type="warning" content="Top Center 提示文字" placement="top">
+      <button>warning</button>
+    </tiny-tooltip>
+    <tiny-tooltip type="error" content="Top Center 提示文字" placement="top">
+      <button>error</button>
+    </tiny-tooltip>
+    <tiny-tooltip type="info" content="Top Center 提示文字" placement="top">
+      <button>info</button>
+    </tiny-tooltip>
+    <tiny-tooltip type="success" content="Top Center 提示文字" placement="top">
+      <button>success</button>
+    </tiny-tooltip>
   </div>
 </template>
 
@@ -18,3 +33,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tooltip {
+  margin-right: 16px;
+}
+</style>

package/resources/pc/demo-config/en-US/button-group.json

@@ -78,5 +78,21 @@
     "component": "Buttongroup",
     "findIntroStr": "A button group is used for multiple similar operations.",
     "demoId": "slot-default"
+  },
+  {
+    "title": "Button Group Multiple",
+    "content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
+    "link": "button-group/button-group-multiple",
+    "component": "Buttongroup",
+    "findIntroStr": "Button group multiple",
+    "demoId": "button-group-multiple"
+  },
+  {
+    "title": "Border",
+    "content": "<p>Set with or without border, the default is true.</p>\n",
+    "link": "button-group/Border",
+    "component": "Buttongroup",
+    "findIntroStr": "Border",
+    "demoId": "border"
   }
 ]

package/resources/pc/demo-config/en-US/checkbox.json

@@ -8,7 +8,7 @@
     "demoId": "basic-usage"
   },
   {
-    "title": "Checkbox Group",
+    "title": "Checkbox Group and Vertical Checkbox Group",
     "content": "<p>Manages multiple <code>checkbox</code> elements into a group through the <code>checkbox-group</code> element. In <code>checkbox-group</code>, use <code>v-model</code> to bind variables of the Array type to implement bidirectional binding. The <code>label</code> attribute of the <code>checkbox</code> is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. <code>label</code> corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected. </p>\n",
     "link": "checkbox/checkbox-group",
     "component": "Checkbox check box",
@@ -113,10 +113,18 @@
   },
   {
     "title": "Slot",
-    "content": "<p>Content of Checkbox</p>\n",
+    "content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
     "link": "checkbox/checkbox-slot",
     "component": "Checkbox check box",
     "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
     "demoId": "checkbox-slot"
+  },
+  {
+    "title": "Checkbox Button Multiple",
+    "content": "<p>Checkbox button multiple</p>\n",
+    "link": "checkbox/checkbox-button-multiple",
+    "component": "Checkbox check box",
+    "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+    "demoId": "checkbox-button-multiple"
   }
-]
+]

package/resources/pc/demo-config/en-US/form.json

@@ -110,5 +110,13 @@
     "component": " Form",
     "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
     "demoId": "form-row-col"
+  },
+  {
+    "title": "Group Form",
+    "content": "<p>Grouping multiple forms together</p>\n",
+    "link": "form/group-form",
+    "component": " Form",
+    "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+    "demoId": "group-form"
   }
 ]

package/resources/pc/demo-config/en-US/pager.json

@@ -158,5 +158,21 @@
     "component": "Pager Pagination",
     "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
     "demoId": "pager-in-grid"
+  },
+  {
+    "title": "Pagination Size",
+    "content": "<p>The grid table uses the pagination component.\nThe <code>services/getGridMockData</code> service in this example needs to be implemented by yourself. The example simulates the data returned by the remote service.\n</p>\n",
+    "link": "pager/pager-size",
+    "component": "Pager Pagination",
+    "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+    "demoId": "pager-size"
+  },
+  {
+    "title": "Pagination Disabled",
+    "content": "<p>Disabled pagination all functions.</p>\n",
+    "link": "pager/pager-disabled",
+    "component": "Pager Pagination",
+    "findIntroStr": "Disabled pagination all functions.",
+    "demoId": "pager-disabled"
   }
 ]

package/resources/pc/demo-config/en-US/search.json

@@ -63,6 +63,14 @@
     "findIntroStr": "Specify a condition object to search for data.",
     "demoId": "show-selected-types"
   },
+  {
+    "title": "Left slot",
+    "content": "<p>can be inserted into the left slot through <code>prefix</code></p>\n",
+    "link": "search/slot-prefix",
+    "component": "Search",
+    "findIntroStr": "Specify a condition object to search for data.",
+    "demoId": "slot-prefix"
+  },
   {
     "title": "Customized search event",
     "content": "For details, see the following example.",
@@ -87,4 +95,4 @@
     "findIntroStr": "Specify a condition object to search for data.",
     "demoId": "select-events"
   }
-]
+]

package/resources/pc/demo-config/en-US/select.json

@@ -23,6 +23,14 @@
     "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
     "demoId": "collapse-tags"
   },
+  {
+    "title": "Set the text box type",
+    "content": "<p>You can set <code>input-box-type</code> to underline. </p>\n",
+    "link": "select/input-box-type",
+    "component": "Select Selector",
+    "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+    "demoId": "input-box-type"
+  },
   {
     "title": "Maximum number of options",
     "content": "The <p><code>multiple-limit</code> attribute specifies the maximum number of items that can be selected by the user during multiple selection. The default value is 0, which is not limited. </p>\n",
@@ -217,7 +225,7 @@
   },
   {
     "title": "Customized text for empty data display",
-    "content": "<p>You can use the <code>no-data-text</code> attribute to customize the text displayed when the option is empty. </p>\n",
+    "content": "<p>You can use the <code>no-data-text</code> attribute to customize the text displayed when the option is empty. </p>\n <p>You can set the <code>show-empty-image</code> attribute to display empty data images. By default, empty data images are not displayed. </p>\n",
     "link": "select/no-data-text",
     "component": "Select Selector",
     "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",