@opentiny/vue-docs 3.17.2 → 3.17.4

package/demos/pc/app/numeric/numeric-size.vue

@@ -5,6 +5,8 @@
     <tiny-numeric v-model="value" size="small"></tiny-numeric>
     <br /><br />
     <tiny-numeric v-model="value" size="mini"></tiny-numeric>
+    <br /><br />
+    <tiny-numeric v-model="value"></tiny-numeric>
   </div>
 </template>
 

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

@@ -101,9 +101,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。',
+          '可通过 <code>size</code> 属性设置计数器尺寸，可选值有 <code>medium</code><code>small</code><code>mini</code>。',
         'en-US':
-          'You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. '
+          'You can set the counter size through the<code>size</code>attribute,the value can be <code>medium</code><code>small</code><code>mini</code>. '
       },
       codeFiles: ['numeric-size.vue']
     },

package/demos/pc/app/rich-text-editor/basic-usage.vue

@@ -2,6 +2,8 @@
   <div>
     <tiny-rich-text-editor v-model="value"></tiny-rich-text-editor>
     <div class="result">
+      <hr />
+      <textarea v-model="value" style="width: 100%" rows="5" />
       <hr />
       <pre>{{ value }}</pre>
     </div>

package/demos/pc/app/search/slot-prefix-composition-api.vue

@@ -1,20 +1,28 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
         <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
+import { Search as TinySearch, Button as TinyButton } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 const value = ref('')
+const disabled = ref(false)
 
 const TinyIconSearch = iconSearch()
+const changeDisabled = () => {
+  disabled.value = !disabled.value
+}
 </script>

package/demos/pc/app/search/slot-prefix.spec.ts

@@ -4,7 +4,7 @@ test('左侧插槽是否正常显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix')
 
-  const search = page.locator('.tiny-search')
+  const search = page.locator('.tiny-search').first()
   const prefix = search.locator('.tiny-search__prefix > svg')
 
   await expect(prefix).toBeVisible()

package/demos/pc/app/search/slot-prefix.vue

@@ -1,26 +1,37 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键字搜索" clearable>
+    <tiny-button class="mb10" @click="changeDisabled"
+      >点击切换为“{{ disabled ? '非禁用状态' : '禁用状态' }}”</tiny-button
+    >
+    <tiny-search class="mb10" v-model="value" placeholder="请输入关键字搜索" :disabled="disabled" clearable>
       <template #prefix>
-        <icon-search />
+        <tiny-icon-search />
       </template>
     </tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :disabled="disabled"></tiny-search>
     <div class="mt10">{{ value }}</div>
   </div>
 </template>
 
 <script lang="jsx">
-import { Search } from '@opentiny/vue'
+import { Search, Button } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinySearch: Search,
-    IconSearch: iconSearch()
+    TinyButton: Button,
+    TinyIconSearch: iconSearch()
   },
   data() {
     return {
-      value: ''
+      value: '',
+      disabled: false
+    }
+  },
+  methods: {
+    changeDisabled() {
+      this.disabled = !this.disabled
     }
   }
 }

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

@@ -92,12 +92,13 @@ export default {
     {
       demoId: 'slot-prefix',
       name: {
-        'zh-CN': '左侧插槽',
-        'en-US': 'Left slot'
+        'zh-CN': '左侧插槽与禁用',
+        'en-US': 'Left slot and Disabled'
       },
       desc: {
-        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容。',
-        'en-US': 'Customize the left content through the <code>prefix</code> slot.'
+        'zh-CN': '通过 <code>prefix</code> 插槽自定义左侧内容, <code>disabled</code> 控制禁用状态。',
+        'en-US':
+          'Customize the left content through the <code>prefix</code> slot, <code>disabled</code>Control the disabled state.'
       },
       codeFiles: ['slot-prefix.vue']
     },

package/demos/pc/app/select/popup-style-position-composition-api.vue

@@ -12,8 +12,7 @@ const options = reactive([
   { value: '选项1', label: '北京' },
   { value: '选项2', label: '上海' },
   { value: '选项3', label: '天津' },
-  { value: '选项4', label: '重庆' },
-  { value: '选项5', label: '深圳' }
+  { value: '选项4', label: '重庆' }
 ])
 const value = ref('')
 </script>

package/demos/pc/app/select/popup-style-position.vue

@@ -18,8 +18,7 @@ export default {
         { value: '选项1', label: '北京' },
         { value: '选项2', label: '上海' },
         { value: '选项3', label: '天津' },
-        { value: '选项4', label: '重庆' },
-        { value: '选项5', label: '深圳' }
+        { value: '选项4', label: '重庆' }
       ],
       value: ''
     }

package/demos/pc/app/slider/about-step-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(20)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/about-step.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/basic-usage-composition-api.vue

@@ -15,3 +15,9 @@ function setValue() {
   value.value = 50
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 32px;
+}
+</style>

package/demos/pc/app/slider/basic-usage.vue

@@ -25,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 32px;
+}
+</style>

package/demos/pc/app/slider/dynamic-disable-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/dynamic-disable.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/format-tooltip-composition-api.vue

@@ -12,3 +12,9 @@ function format(value) {
   return '当前值为：' + value
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/format-tooltip.vue

@@ -21,3 +21,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/marks-composition-api.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <div>
-      <tiny-slider v-model="value" :marks="marks"></tiny-slider>
-    </div>
-  </div>
+  <tiny-slider v-model="value" :marks="marks"></tiny-slider>
 </template>
 
 <script setup>
@@ -18,3 +14,9 @@ const marks = ref({
 
 const value = ref(20)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/marks.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <div>
-      <tiny-slider v-model="value" :marks="marks"></tiny-slider>
-    </div>
-  </div>
+  <tiny-slider v-model="value" :marks="marks"></tiny-slider>
 </template>
 
 <script>
@@ -25,3 +21,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/max-min-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(30)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/max-min.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/range-select-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref([20, 40])
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/range-select.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/shortcut-operation-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/shortcut-operation.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/show-input-composition-api.vue

@@ -10,3 +10,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 const value = ref(40)
 const value2 = ref([40, 60])
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/show-input.vue

@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/show-tip-composition-api.vue

@@ -12,3 +12,9 @@ function format(value) {
   return '当前值为：' + value
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/show-tip.vue

@@ -21,3 +21,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/slider-event-composition-api.vue

@@ -32,3 +32,9 @@ function stop(val) {
   })
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/slider-event.vue

@@ -39,3 +39,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/slider-slot-composition-api.vue

@@ -12,3 +12,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(40)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/slider-slot.vue

@@ -20,3 +20,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/vertical-mode-composition-api.vue

@@ -8,3 +8,9 @@ import { Slider as TinySlider } from '@opentiny/vue'
 
 const value = ref(30)
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/slider/vertical-mode.vue

@@ -16,3 +16,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-slider-container {
+  margin-top: 50px;
+}
+</style>

package/demos/pc/app/switch/custom-open-close-icon-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <tiny-switch>
+    <template #active-icon>
+      <TinyIconArrowLeft />
+    </template>
+    <template #inactive-icon>
+      <TinyIconArrowRight />
+    </template>
+  </tiny-switch>
+</template>
+
+<script setup>
+import { Switch } from '@opentiny/vue'
+import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
+
+const TinyIconArrowLeft = IconArrowLeft()
+const TinyIconArrowRight = IconArrowRight()
+
+const TinySwitch = Switch
+</script>

package/demos/pc/app/switch/custom-open-close-icon.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义开关图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#custom-open-close-icon')
+
+  const demo = page.locator('#custom-open-close-icon')
+  const switchContainer = demo.locator('.tiny-switch')
+
+  const switchBtn = switchContainer.locator('.tiny-switch__button').first()
+
+  const switchIcon = switchBtn.locator('.tiny-svg').first()
+
+  await expect(switchIcon).not.toBeNull()
+})

package/demos/pc/app/switch/custom-open-close-icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-switch>
+    <template #active-icon>
+      <TinyIconArrowLeft />
+    </template>
+    <template #inactive-icon>
+      <TinyIconArrowRight />
+    </template>
+  </tiny-switch>
+</template>
+
+<script>
+import { Switch } from '@opentiny/vue'
+import { IconArrowLeft, IconArrowRight } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySwitch: Switch,
+    TinyIconArrowLeft: IconArrowLeft(),
+    TinyIconArrowRight: IconArrowRight()
+  }
+}
+</script>

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

@@ -79,6 +79,19 @@ export default {
       },
       codeFiles: ['dynamic-disable.vue']
     },
+    {
+      demoId: 'custom-open-close-icon',
+      name: {
+        'zh-CN': '自定义开关图标',
+        'en-US': 'Custom switch icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过具名插槽 <code>active-icon</code> 和 <code>inactive-icon</code> 自定义开关图标。</p>',
+        'en-US':
+          '<p>Customize switch icons through named slots<code>active icon</code>and<code>inactive icon</code> .</p>'
+      },
+      codeFiles: ['custom-open-close-icon.vue']
+    },
     {
       demoId: 'event-change',
       name: {

package/demos/pc/app/tabs/basic-usage-composition-api.vue

@@ -16,7 +16,7 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 const activeName = ref('second')
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
   line-height: 2;
 }

package/demos/pc/app/tabs/basic-usage.vue

@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .pc-demo .tiny-tabs__content {
   line-height: 2;
 }

package/demos/pc/app/tabs/size-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, reactive } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName = ref('1')
+const Tabs = reactive([])
+
+// 创建tabs
+for (let i = 1; i < 5; i++) {
+  const title = `Tab ${i}`
+  Tabs.push({
+    title,
+    name: i + '',
+    content: `${title} content `
+  })
+}
+</script>

package/demos/pc/app/tabs/size.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('小尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tabs#size')
+
+  const headerBox = page.locator('.tiny-tabs .tiny-tabs__nav-scroll')
+
+  await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
+  await expect(headerBox.nth(0)).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(1)).toHaveCSS('font-size', '14px')
+  await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
+  await expect(headerBox.nth(2)).toHaveCSS('font-size', '12px')
+})

package/demos/pc/app/tabs/size.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" separator size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+    <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName: '1',
+      Tabs: []
+    }
+  },
+  created() {
+    // 创建tabs
+    for (let i = 1; i < 5; i++) {
+      const title = `Tab ${i}`
+      this.Tabs.push({
+        title,
+        name: i + '',
+        content: `${title} content `
+      })
+    }
+  }
+}
+</script>