@opentiny/vue-docs 3.24.6 → 3.26.0

package/demos/pc/app/search/events.spec.ts

@@ -9,7 +9,7 @@ test('事件是否正常触发', async ({ page }) => {
   const button = page.locator('.tiny-search__input-btn > a').first()
 
   await button.click()
-  await expect(modal).toHaveCount(1)
+  await expect(modal).toHaveCount(2)
   await input.first().fill('111')
   await button.click()
   await modal.getByText('111').isVisible()

package/demos/pc/app/search/events.vue

@@ -15,6 +15,9 @@
     <p>类型选中事件</p>
     <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+    <p>mini模式展开和收起事件</p>
+    <br />
+    <tiny-search mini @collapse="handleCollapse" @expand="handleExpand"></tiny-search>
   </div>
 </template>
 
@@ -58,6 +61,12 @@ export default {
     },
     select(value) {
       TinyModal.message({ message: `${value.text}`, status: 'info' })
+    },
+    handleCollapse() {
+      TinyModal.message({ message: '收回', status: 'info' })
+    },
+    handleExpand() {
+      TinyModal.message({ message: '展开', status: 'info' })
     }
   }
 }

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

@@ -21,7 +21,7 @@ test('disabled', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix-suffix')
 
-  await page.locator('.tiny-button').last().click()
+  await page.getByRole('button', { name: '点击切换为“禁用状态”' }).click()
 
   const searchLocators = await page.locator('.tiny-search').all()
   for (const search of searchLocators) {

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

@@ -112,10 +112,18 @@ export default {
         'en-US': 'Search event'
       },
       desc: {
-        'zh-CN':
-          '<div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              通过 <code>select</code> 监听搜索类型选中事件。</div>',
-        'en-US':
-          '<div class="tip custom-block">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />\n              By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />\n              Listen for search type selection events through <code>select</code> .</div>'
+        'zh-CN': `
+        <div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              
+        通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              
+        通过 <code>select</code> 监听搜索类型选中事件；<br />\n                
+        通过 <code>expand</code> 监听 mini 搜索框展开事件；<br />\n                
+        通过 <code>collapse</code> 监听 mini 搜索框收起事件。</div>`,
+        'en-US': `<div class="tip custom-block">
+        Set carriage return to trigger search event through<code>is-enter-search</code>, and<code>search</code>to listen for search events; <br />\n              
+        Monitor the search value change event when the input box loses focus through<code>change</code>, and monitor the real-time search value change event through<code>input</code>; <br />\n              
+        Monitor the search type selection event through<code>select</code>; <br />\n                
+        Monitor mini search box expansion events through<code>expand</code>; <br />\n                
+        Monitor the mini search box collapse event through<code>collapse</code>.</div>`
       },
       codeFiles: ['events.vue']
     }

package/demos/pc/app/select/nest-grid-remote.spec.ts

@@ -28,7 +28,7 @@ test.describe('下拉表格远程搜索', () => {
     const row2 = page.getByRole('row', { name: '省份 2 城市 2 区域 2' })
     await expect(row2).not.toBeVisible()
     await row1.getByRole('cell').first().click()
-    await expect(row1).toHaveClass(/tiny-grid-body__row row__radio/)
+    await expect(row1).toHaveClass(/row__current/)
     await expect(input).toHaveValue('省 1-市 1')
 
     const row3 = page.getByRole('row', { name: '省份 10 城市 10 区域 10' })
@@ -64,7 +64,7 @@ test.describe('下拉表格远程搜索', () => {
     await input.fill(' ' + ' ')
     await input.press('Enter')
     await expect(dropdown).toBeVisible()
-    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
   })
 
   test('多选,下拉表格远程搜索基础用法', async ({ page }) => {
@@ -131,6 +131,6 @@ test.describe('下拉表格远程搜索', () => {
     await input.fill(' ' + ' ')
     await input.press('Enter')
     await expect(dropdown).toBeVisible()
-    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
   })
 })

package/demos/pc/app/select/nest-grid.spec.ts

@@ -21,7 +21,7 @@ test('嵌套表格（单选）', async ({ page }) => {
   await row.nth(1).getByRole('cell').first().click()
   await expect(input).toHaveValue('深圳 1')
   await input.click()
-  await expect(row.filter({ hasText: '深圳 1' })).toHaveClass(/tiny-grid-body__row row__radio/)
+  await expect(row.filter({ hasText: '深圳 1' })).toHaveClass(/row__current/)
 })
 
 test('嵌套表格（多选）', async ({ page }) => {

package/demos/pc/app/select/nest-radio-grid-much-data.spec.ts

@@ -23,15 +23,13 @@ test('下拉表格大数据', async ({ page }) => {
 
   await input.click()
   await page.waitForTimeout(200)
-  await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__radio/)
-  await expect(row).toHaveCount(6)
+  await expect(row.nth(1)).toHaveClass(/row__current/)
+  await expect(row).toHaveCount(8)
   await expect(page.getByRole('row', { name: '华南区 12 广东省 广州市' })).toBeHidden()
   await row.nth(5).scrollIntoViewIfNeeded()
-  await expect(row).toHaveCount(6)
+  await expect(row).toHaveCount(8)
   await row.nth(5).scrollIntoViewIfNeeded()
-  await expect(row).toHaveCount(6)
+  await expect(row).toHaveCount(8)
   await row.nth(5).scrollIntoViewIfNeeded()
-  await expect(row).toHaveCount(6)
-  await page.waitForTimeout(500)
-  await page.getByRole('row', { name: '华南区 12 广东省 广州市' }).getByRole('cell').first().click()
+  await expect(row).toHaveCount(8)
 })

package/demos/pc/app/tabs/basic-usage.spec.ts

@@ -20,11 +20,11 @@ test('基本用法', async ({ page }) => {
     /tiny-tabs__item is-top/
   ])
   await expect(content).toHaveText(/表单组件/)
-  await expect(activeBar).toHaveCSS('width', '64px')
+  await expect(activeBar).toHaveCSS('width', '56px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await item1.click()
   await expect(item1).toHaveClass(/is-active/)
-  await expect(activeBar).toHaveCSS('width', '64px')
+  await expect(activeBar).toHaveCSS('width', '56px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await expect(item1).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(content).toHaveText(/表单组件/)

package/demos/pc/app/tabs/header-only.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tab-demo-position">
+    <tiny-radio-group v-model="position" class="mb10">
+      <tiny-radio-button label="top">top 显示</tiny-radio-button>
+      <tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
+      <tiny-radio-button label="left">left 显示</tiny-radio-button>
+      <tiny-radio-button label="right">right 显示</tiny-radio-button>
+    </tiny-radio-group>
+    <tiny-tabs v-model="activeName4" tab-style="card" :position="position" header-only>
+      <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
+
+const activeName4 = ref('navigation1')
+const position = ref('left')
+const tabs3 = ref([
+  {
+    name: 'navigation1',
+    title: 'Navigation 1',
+    content: 'Navigation 1'
+  },
+  {
+    name: 'navigation2',
+    title: 'Navigation 2',
+    content: 'Navigation 2'
+  },
+  {
+    name: 'navigation3',
+    title: 'Navigation 3',
+    content: 'Navigation 3'
+  },
+  {
+    name: 'navigation4',
+    title: 'Navigation 4',
+    content: 'Navigation 4'
+  },
+  {
+    name: 'navigation5',
+    title: 'Navigation 5',
+    content: 'Navigation 5'
+  }
+])
+</script>
+
+<style scoped>
+.tab-demo-position {
+  min-height: 250px;
+}
+</style>

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

@@ -8,9 +8,9 @@ test('小尺寸', async ({ page }) => {
   const headerBox = container.locator('.tiny-tabs .tiny-tabs__nav-scroll')
 
   await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
-  await expect(headerBox.nth(0)).toHaveCSS('font-size', '12px')
+  await expect(headerBox.nth(0).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
   await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
-  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
   await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
   await expect(headerBox.nth(2).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
 })

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

@@ -282,6 +282,18 @@ export default {
           'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
       },
       codeFiles: ['overflow-title.vue']
+    },
+    {
+      demoId: 'header-only',
+      name: {
+        'zh-CN': '仅展示头部',
+        'en-US': 'Header only'
+      },
+      desc: {
+        'zh-CN': '通过 <code>header-only</code> 仅展示头部。',
+        'en-US': 'Use <code>>header-only</code> header only.'
+      },
+      codeFiles: ['header-only.vue']
     }
   ],
   features: [

package/demos/pc/app/time-line/slot-default-composition-api.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="demo-timeline-default-slot">
+    <tiny-time-line>
+      <template #default>
+        <ol>
+          <li v-for="(item, index) in items" :key="index" :class="item.status">
+            <div>
+              <div class="index-icon">{{ index + 1 }}</div>
+              <hr />
+            </div>
+            <div>{{ item.desc }}</div>
+            <div v-if="item.user">{{ item.user }}</div>
+            <div v-if="item.datetime">{{ item.datetime }}</div>
+          </li>
+        </ol>
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script setup>
+import { TinyTimeLine } from '@opentiny/vue'
+
+const items = [
+  { desc: '提交申请', user: '张三', datetime: new Date(Date.now() - 60 * 60 * 1e3).toLocaleString(), status: 'done' },
+  { desc: '直接主管', user: '李四', datetime: new Date().toLocaleString(), status: 'done' },
+  { desc: '部门主管', user: '王五' },
+  { desc: '完成' }
+]
+</script>
+
+<style scoped lang="less">
+.demo-timeline-default-slot {
+  --color: #d3d5d6;
+  .done {
+    --color: #5073e5;
+  }
+  --size: 20px;
+}
+
+ol {
+  display: flex;
+}
+
+li {
+  margin: 10px 0;
+  color: var(--color);
+  min-width: 200px;
+}
+
+div {
+  position: relative;
+  color: var(--active-color);
+  &:not(:first-of-type) {
+    margin: 5px 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+hr {
+  position: absolute;
+  top: 15%;
+  width: 100%;
+  height: 5px;
+  background-color: var(--color);
+}
+
+.index-icon {
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--size);
+  background-color: var(--color);
+  color: #fff;
+  padding: 1px;
+  font-size: calc(var(--size) - 2px);
+  text-align: center;
+  z-index: 1;
+  margin: auto;
+}
+</style>

package/demos/pc/app/time-line/slot-default.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('默认插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('time-line#slot-default')
+
+  const timeline = await page.locator('.tiny-timeline')
+  await page.waitForSelector('.tiny-timeline')
+
+  expect(await timeline.locator('.tiny-timeline-item').count()).toBe(0)
+  expect(await timeline.locator('ol').count()).toBeGreaterThan(0)
+})

package/demos/pc/app/time-line/slot-default.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="demo-timeline">
+    <tiny-time-line vertical shape="dot">
+      <template #default>
+        <ol>
+          <li v-for="(item, index) in items" :key="index" :class="item.status">
+            <div>
+              <div class="index-icon">{{ index + 1 }}</div>
+              <hr />
+            </div>
+            <div>{{ item.desc }}</div>
+            <div v-if="item.user">{{ item.user }}</div>
+            <div v-if="item.datetime">{{ item.datetime }}</div>
+          </li>
+        </ol>
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TinyTimeLine } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine
+  },
+  data() {
+    return {
+      items: [
+        {
+          desc: '提交申请',
+          user: '张三',
+          datetime: new Date(Date.now() - 60 * 60 * 1e3).toLocaleString(),
+          status: 'done'
+        },
+        { desc: '直接主管', user: '李四', datetime: new Date().toLocaleString(), status: 'done' },
+        { desc: '部门主管', user: '王五' },
+        { desc: '完成' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.demo-timeline {
+  --color: #d3d5d6;
+  .done {
+    --color: #5073e5;
+  }
+  --size: 20px;
+}
+
+ol {
+  display: flex;
+}
+
+li {
+  margin: 10px 0;
+  color: var(--color);
+  min-width: 200px;
+}
+
+div {
+  position: relative;
+  color: var(--active-color);
+  &:not(:first-of-type) {
+    margin: 5px 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+hr {
+  position: absolute;
+  top: 15%;
+  width: 100%;
+  height: 5px;
+  background-color: var(--color);
+}
+
+.index-icon {
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--size);
+  background-color: var(--color);
+  color: #fff;
+  padding: 1px;
+  font-size: calc(var(--size) - 2px);
+  text-align: center;
+  z-index: 1;
+  margin: auto;
+}
+</style>

package/demos/pc/app/time-line/webdoc/time-line.js

@@ -186,6 +186,18 @@ export default {
         'en-US': '<p>Add description information for a single node through the <code>description</code> slot.</p>'
       },
       codeFiles: ['slot-description.vue']
+    },
+    {
+      demoId: 'slot-default',
+      name: {
+        'zh-CN': '默认插槽',
+        'en-US': 'Default Slot'
+      },
+      desc: {
+        'zh-CN': '组件默认插槽',
+        'en-US': 'Component Default Slot'
+      },
+      codeFiles: ['slot-default.vue']
     }
   ],
   features: [

package/demos/pc/menus.js

@@ -10,6 +10,14 @@ export const standaloneMenus = [
 const docMenusChildren = [
   { 'title': '更新日志', 'titleEn': 'Changelog', 'key': 'changelog' },
   { 'title': '环境准备', 'titleEn': 'envpreparation', 'key': 'envpreparation' },
+  {
+    'title': '适配AUI',
+    'titleEn': 'Adapter AUI',
+    'key': 'aui-adapter',
+    showScene: {
+      theme: ['saas']
+    }
+  },
   { 'title': '安装', 'titleEn': 'installation', 'key': 'installation' },
   { 'title': '引入组件', 'titleEn': 'importComponents', 'key': 'import-components' },
   {
@@ -40,7 +48,10 @@ const docMenusChildren = [
   {
     'title': '暗黑模式',
     'titleEn': 'theme-dark',
-    'key': 'theme-dark'
+    'key': 'theme-dark',
+    showScene: {
+      theme: ['default']
+    }
   },
   {
     'title': '智能化',
@@ -56,14 +67,6 @@ const docMenusChildren = [
     showScene: {
       target: ['inner']
     }
-  },
-  {
-    'title': '适配AUI',
-    'titleEn': 'Adapter AUI',
-    'key': 'aui-adapter',
-    showScene: {
-      theme: ['saas']
-    }
   }
 ]
 export const docMenus = [
@@ -91,7 +94,14 @@ export const cmpMenus = [
       { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
       { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
       { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
-      { 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
+      {
+        'nameCn': '容器布局',
+        'name': 'Container',
+        'key': 'container',
+        showScene: {
+          theme: ['default']
+        }
+      },
       { 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
       // { 'nameCn': '多色图标', 'name': 'IconMulticolor', 'key': 'icon-multicolor' }, // 隐藏路由，目前只有saas使用
       { 'nameCn': '栅格布局', 'name': 'Layout', 'key': 'layout' },