@opentiny/vue-docs 2.2.3 → 2.2.4

package/demos/pc/app/icon/iconGroups.js

@@ -1,4 +1,199 @@
 export const iconGroups = {
+  Arrow: [
+    'IconArrowDown',
+    'IconArrowLeft',
+    'IconArrowRight',
+    'IconArrowUp',
+    'IconAscending',
+    'IconChevronDown',
+    'IconChevronLeft',
+    'IconChevronRight',
+    'IconChevronUp',
+    'IconDefault',
+    'IconDeltaDownO',
+    'IconDeltaDown',
+    'IconDeltaLeftO',
+    'IconDeltaLeft',
+    'IconDeltaRightO',
+    'IconDeltaRight',
+    'IconDeltaUpO',
+    'IconDeltaUp',
+    'IconDoubleLeft',
+    'IconDoubleRight',
+    'IconDownO',
+    'IconDown',
+    'IconDownWard',
+    'IconEnd',
+    'IconLeftO',
+    'IconLeftWard',
+    'IconLeftWardArrow',
+    'IconLeft',
+    'IconPopup',
+    'IconRightO',
+    'IconRight',
+    'IconRightward',
+    'IconTriangleDown',
+    'IconUpO',
+    'IconUp',
+    'IconUpWard'
+  ],
+  Brands: ['IconAngularjs', 'IconEspaceAuto', 'IconEspace', 'IconNodejs', 'IconReactjs', 'IconVuejs'],
+  Charts: ['IconAreaChart', 'IconDotChart', 'IconLineChart', 'IconPieChart', 'IconStatistics'],
+  Editor: [
+    'IconEditorAlignCenter',
+    'IconEditorAlignLeft',
+    'IconEditorAlignRight',
+    'IconEditorBackground',
+    'IconEditorBold',
+    'IconEditorCode',
+    'IconEditorDeleteline',
+    'IconEditorEraser',
+    'IconEditorItalic',
+    'IconEditorLeftBorder',
+    'IconEditorList',
+    'IconEditorListDot',
+    'IconEditorListNum',
+    'IconEditorMenuLeft',
+    'IconEditorMenuRight',
+    'IconEditorQuote',
+    'IconEditorRedo',
+    'IconEditorRightBorder',
+    'IconEditorSub',
+    'IconEditorSubtitle',
+    'IconEditorSuper',
+    'IconEditorTable',
+    'IconEditorTextcolor',
+    'IconEditorTitle',
+    'IconEditorUnderline',
+    'IconEditorUndo',
+    'IconEditorVideo',
+    'IconOperationfaildL',
+    'IconOuterLink',
+    'IconTextDecoration',
+    'IconUnderline',
+    'IconWriting'
+  ],
+  IT: [
+    'IconAdministrator',
+    'IconDataSource',
+    'IconDesktopView',
+    'IconEmailAdd',
+    'IconEmailCircle',
+    'IconExcel',
+    'IconException',
+    'IconExclamation',
+    'IconLanguage',
+    'IconMailContent',
+    'IconMail',
+    'IconMarkOn',
+    'IconMobileView',
+    'IconMobile',
+    'IconPrintPreview',
+    'IconReplies',
+    'IconSent',
+    'IconShare',
+    'IconShareArrow',
+    'IconShoppingCard',
+    'IconTabletView',
+    'IconUnlock',
+    'IconUnsent',
+    'IconUser',
+    'IconVersiontree',
+    'IconWebPlus',
+    'IconJs'
+  ],
+  Media: [
+    'IconCourse',
+    'IconCustom',
+    'IconCustomerService',
+    'IconDialog',
+    'IconDialog2',
+    'IconInformation',
+    'IconMessageCircle',
+    'IconPagerFirst',
+    'IconPagerLast',
+    'IconPagerNext',
+    'IconPagerPrev',
+    'IconPauseCircle',
+    'IconPause',
+    'IconPicture',
+    'IconStartCircle',
+    'IconStart',
+    'IconTime'
+  ],
+  Objects: [
+    'IconBoat',
+    'IconCalculator',
+    'IconCalendar',
+    'IconClockWork',
+    'IconCloudDownload',
+    'IconCloudUpload',
+    'IconCoin',
+    'IconTaskCooperation',
+    'IconTelephoneCircle',
+    'IconTelephone'
+  ],
+  Symbols: [
+    'IconBusy',
+    'IconCheck',
+    'IconCheckedLinear',
+    'IconCheckedSur',
+    'IconCloseCircle',
+    'IconCloseSquare',
+    'IconCode',
+    'IconCommission',
+    'IconCueL',
+    'IconCrop',
+    'IconDotIpv4',
+    'IconEllipsis',
+    'IconError',
+    'IconEyeclose',
+    'IconEyeopen',
+    'IconFrownO',
+    'IconFrown',
+    'IconGroup',
+    'IconHeartempty',
+    'IconHelpCircle',
+    'IconHelpQuery',
+    'IconHelpSolid',
+    'IconHelp',
+    'IconHelpful',
+    'IconLeave',
+    'IconLoading',
+    'IconLock',
+    'IconMale',
+    'IconMeh',
+    'IconMore',
+    'IconPlus',
+    'IconNodeOpen',
+    'IconNode',
+    'IconNone',
+    'IconOffLine',
+    'IconOnLine',
+    'IconPanelMax',
+    'IconPanelMini',
+    'IconPanelNormal',
+    'IconRadio',
+    'IconRadioselected',
+    'IconSmileO',
+    'IconSmile',
+    'IconStarActive',
+    'IconStarDisable',
+    'IconStarO',
+    'IconStop',
+    'IconSuccess',
+    'IconSuccessful',
+    'IconInfoSolid',
+    'IconInfoCircle',
+    'IconInfo',
+    'IconOperationfaild',
+    'IconUnknow',
+    'IconUnknown',
+    'IconWarning',
+    'IconWarningTriangle',
+    'IconClose',
+    'IconYes'
+  ],
   Tools: [
     'IconAdd',
     'IconAlignBaseline',
@@ -119,200 +314,5 @@ export const iconGroups = {
     'IconView',
     'IconZoomIn',
     'IconZoomOut'
-  ],
-  Editor: [
-    'IconEditorAlignCenter',
-    'IconEditorAlignLeft',
-    'IconEditorAlignRight',
-    'IconEditorBackground',
-    'IconEditorBold',
-    'IconEditorCode',
-    'IconEditorDeleteline',
-    'IconEditorEraser',
-    'IconEditorItalic',
-    'IconEditorLeftBorder',
-    'IconEditorList',
-    'IconEditorListDot',
-    'IconEditorListNum',
-    'IconEditorMenuLeft',
-    'IconEditorMenuRight',
-    'IconEditorQuote',
-    'IconEditorRedo',
-    'IconEditorRightBorder',
-    'IconEditorSub',
-    'IconEditorSubtitle',
-    'IconEditorSuper',
-    'IconEditorTable',
-    'IconEditorTextcolor',
-    'IconEditorTitle',
-    'IconEditorUnderline',
-    'IconEditorUndo',
-    'IconEditorVideo',
-    'IconOperationfaildL',
-    'IconOuterLink',
-    'IconTextDecoration',
-    'IconUnderline',
-    'IconWriting'
-  ],
-  Arrow: [
-    'IconArrowDown',
-    'IconArrowLeft',
-    'IconArrowRight',
-    'IconArrowUp',
-    'IconAscending',
-    'IconChevronDown',
-    'IconChevronLeft',
-    'IconChevronRight',
-    'IconChevronUp',
-    'IconDefault',
-    'IconDeltaDownO',
-    'IconDeltaDown',
-    'IconDeltaLeftO',
-    'IconDeltaLeft',
-    'IconDeltaRightO',
-    'IconDeltaRight',
-    'IconDeltaUpO',
-    'IconDeltaUp',
-    'IconDoubleLeft',
-    'IconDoubleRight',
-    'IconDownO',
-    'IconDown',
-    'IconDownWard',
-    'IconEnd',
-    'IconLeftO',
-    'IconLeftWard',
-    'IconLeftWardArrow',
-    'IconLeft',
-    'IconPopup',
-    'IconRightO',
-    'IconRight',
-    'IconRightward',
-    'IconTriangleDown',
-    'IconUpO',
-    'IconUp',
-    'IconUpWard'
-  ],
-  Symbols: [
-    'IconBusy',
-    'IconCheck',
-    'IconCheckedLinear',
-    'IconCheckedSur',
-    'IconCloseCircle',
-    'IconCloseSquare',
-    'IconCode',
-    'IconCommission',
-    'IconCueL',
-    'IconCrop',
-    'IconDotIpv4',
-    'IconEllipsis',
-    'IconError',
-    'IconEyeclose',
-    'IconEyeopen',
-    'IconFrownO',
-    'IconFrown',
-    'IconGroup',
-    'IconHeartempty',
-    'IconHelpCircle',
-    'IconHelpQuery',
-    'IconHelpSolid',
-    'IconHelp',
-    'IconHelpful',
-    'IconLeave',
-    'IconLoading',
-    'IconLock',
-    'IconMale',
-    'IconMeh',
-    'IconMore',
-    'IconPlus',
-    'IconNodeOpen',
-    'IconNode',
-    'IconNone',
-    'IconOffLine',
-    'IconOnLine',
-    'IconPanelMax',
-    'IconPanelMini',
-    'IconPanelNormal',
-    'IconRadio',
-    'IconRadioselected',
-    'IconSmileO',
-    'IconSmile',
-    'IconStarActive',
-    'IconStarDisable',
-    'IconStarO',
-    'IconStop',
-    'IconSuccess',
-    'IconSuccessful',
-    'IconInfoSolid',
-    'IconInfoCircle',
-    'IconInfo',
-    'IconOperationfaild',
-    'IconUnknow',
-    'IconUnknown',
-    'IconWarning',
-    'IconWarningTriangle',
-    'IconClose',
-    'IconYes'
-  ],
-  Media: [
-    'IconCourse',
-    'IconCustom',
-    'IconCustomerService',
-    'IconDialog',
-    'IconDialog2',
-    'IconInformation',
-    'IconMessageCircle',
-    'IconPagerFirst',
-    'IconPagerLast',
-    'IconPagerNext',
-    'IconPagerPrev',
-    'IconPauseCircle',
-    'IconPause',
-    'IconPicture',
-    'IconStartCircle',
-    'IconStart',
-    'IconTime'
-  ],
-  Brands: ['IconAngularjs', 'IconEspaceAuto', 'IconEspace', 'IconNodejs', 'IconReactjs', 'IconVuejs'],
-  Objects: [
-    'IconBoat',
-    'IconCalculator',
-    'IconCalendar',
-    'IconClockWork',
-    'IconCloudDownload',
-    'IconCloudUpload',
-    'IconCoin',
-    'IconTaskCooperation',
-    'IconTelephoneCircle',
-    'IconTelephone'
-  ],
-  Charts: ['IconAreaChart', 'IconDotChart', 'IconLineChart', 'IconPieChart', 'IconStatistics'],
-  IT: [
-    'IconAdministrator',
-    'IconDataSource',
-    'IconDesktopView',
-    'IconEmailAdd',
-    'IconEmailCircle',
-    'IconExcel',
-    'IconException',
-    'IconExclamation',
-    'IconLanguage',
-    'IconMailContent',
-    'IconMail',
-    'IconMarkOn',
-    'IconMobileView',
-    'IconMobile',
-    'IconPrintPreview',
-    'IconReplies',
-    'IconSent',
-    'IconShare',
-    'IconShareArrow',
-    'IconShoppingCard',
-    'IconTabletView',
-    'IconUnlock',
-    'IconUnsent',
-    'IconUser',
-    'IconVersiontree',
-    'IconWebPlus',
-    'IconJs'
   ]
 }

package/demos/pc/app/icon/list.spec.js

@@ -1,8 +1,13 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
-  await page.goto('icon#show-title')
-  await page.getByText('显示 Title').nth(1).click()
-  await page.getByTitle('复制').locator('svg').click()
-  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]')).toHaveAttribute('title', '复制')
+test('图标集', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('icon#list')
+
+  const icons = page.locator('.svgs-item > .tiny-svg')
+
+  for (let i = 0; i < 10; i++) {
+    await expect(icons.nth(i)).toHaveCSS('width', '24px')
+    await expect(icons.nth(i)).toHaveCSS('height', '24px')
+  }
 })

package/demos/pc/app/icon/show-title.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('显示title', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('icon#show-title')
+
+  await expect(page.getByTitle('复制')).toHaveCount(1)
+})

package/demos/pc/app/layout/gutter-composition-api.vue

@@ -12,6 +12,17 @@
           <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
+      <tiny-row :gutter="0" noSpace>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+      </tiny-row>
     </tiny-layout>
   </div>
 </template>

package/demos/pc/app/layout/gutter.spec.ts

@@ -13,4 +13,7 @@ test('gutter栅格间隔', async ({ page }) => {
 
   const row3 = layout.nth(2)
   await expect(row3.locator('div').first()).toHaveCSS('padding-left', '10px')
+
+  const row4 = layout.first()
+  await expect(row4).toHaveCSS('margin-left', '0px')
 })

package/demos/pc/app/layout/gutter.vue

@@ -12,6 +12,17 @@
           <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
+      <tiny-row :gutter="0" noSpace>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+      </tiny-row>
     </tiny-layout>
   </div>
 </template>

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

@@ -81,8 +81,9 @@ export default {
       'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
       'desc': {
         'zh-CN': `
-            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
-            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
+            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>
+            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值<br>
+            通过 <code>noSpace</code> 属性，让子项间没有间距。
           `,
         'en-US': `
             This is done by using the <code>gutter</code> property of the <code>Row</code> component.
@@ -156,10 +157,20 @@ export default {
         {
           'name': 'gutter',
           'type': 'number',
-          'defaultValue': '20',
+          'defaultValue': '0',
           'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
           'demoId': 'gutter'
         },
+        {
+          'name': 'noSpace',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '子项没有间隔，相当于强制gutter=0的情况',
+            'en-US': 'Child entries have no spacing, equivalent to forcing gutter=0'
+          },
+          'demoId': 'gutter'
+        },
         {
           'name': 'justify',
           'type': 'string',

package/demos/pc/app/select/copy-multi.spec.ts

@@ -3,15 +3,24 @@ import { test, expect } from '@playwright/test'
 test('多选复制单个标签', async ({ page }) => {
   await page.goto('select#copy-multi')
 
-  await page.waitForTimeout(1000)
-  await page.mouse.move(392, 316)
-  await page.waitForTimeout(1000)
+  const wrap = page.locator('#copy-multi')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const tag = select.locator('.tiny-tag').nth(0)
+  const tagBox = await tag.locator('span').boundingBox()
+  const x = tagBox.x + tagBox.width
+  const y = tagBox.y + tagBox.height - 5
+
+  await page.waitForTimeout(200)
+  await page.mouse.move(tagBox.x, tagBox.y)
+  await page.waitForTimeout(200)
   await page.mouse.down()
-  await page.waitForTimeout(1000)
-  await page.mouse.move(346, 316)
-  await page.waitForTimeout(1000)
+  await page.waitForTimeout(200)
+  await page.mouse.move(x, y)
+  await page.waitForTimeout(200)
   await page.mouse.up()
+
   await page.keyboard.press('Control+C')
+  await page.waitForTimeout(200)
   const valueInput = page.locator('.copy-value .tiny-input__inner')
   await expect(valueInput).toHaveValue('')
   await valueInput.focus()

package/demos/pc/app/select/is-drop-inherit-width.spec.ts

@@ -28,7 +28,6 @@ test('下拉弹框宽度与输入框一致', async ({ page }) => {
   await select.click()
   const inputBox = await input.boundingBox()
   const listitemBox = await option.first().boundingBox()
-
-  const result = listitemBox.width === inputBox.width
-  await expect(result).toBe(true)
+  const result = listitemBox.width - inputBox.width
+  await expect(result).toBeCloseTo(0, 0)
 })

package/demos/pc/app/select/nest-grid-composition-api.vue

@@ -36,7 +36,9 @@
 import { ref, reactive } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
-const radioValue = ref('')
+const value1 = ref('')
+const value2 = reactive([])
+const value3 = ref('')
 
 const gridOpSingle = reactive({
   data: [

package/demos/pc/app/select/optimization.spec.ts

@@ -16,6 +16,7 @@ test('单选虚拟滚动', async ({ page }) => {
   await page.waitForTimeout(1000)
   await expect(option.filter({ hasText: '黄金糕17' })).toBeHidden()
   await option.nth(9).scrollIntoViewIfNeeded()
+  await page.waitForTimeout(1000)
   await option.filter({ hasText: '黄金糕17' }).click()
   await expect(input).toHaveValue('黄金糕17')
 })

package/demos/pc/app/tag/closable.spec.ts

@@ -6,7 +6,7 @@ test('是否正常移除标签', async ({ page }) => {
 
   const first = page.locator('.tiny-tag').filter({ hasText: '标签一' })
   const close = first.locator('.tiny-tag__close')
-  const modal = page.locator('.tiny-modal__box')
+  const modal = page.locator('.tiny-modal__box').nth(0)
 
   await close.click()
   await modal.waitFor({ state: 'attached', timeout: 100 })

package/demos/pc/app/tag/color3.spec.ts

@@ -4,7 +4,7 @@ test('边框和自定义背景色', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#color3')
 
-  const tags = page.locator('.tiny-tag')
+  const tags = page.locator('.all-demos-container').locator('.tiny-tag')
   const first = tags.nth(0)
 
   await expect(tags).toHaveClass([

package/demos/pc/app/tag/content.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('progress 正常显示', async ({ page }) => {
+test('配置式标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#content')
 
-  const tag = page.locator('#preview').getByText('配置式标签')
+  const tag = page.locator('.all-demos-container').getByText('配置式标签')
 
   await expect(tag).toHaveCount(1)
 })

package/demos/pc/app/tag/create.spec.ts

@@ -4,16 +4,16 @@ test('动态编辑标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#create')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('.all-demos-container')
   const add = page.getByRole('button', { name: '+ New Tag' })
   const input = preview.getByRole('textbox')
-  const newTag = preview.getByText('新标签')
+  const newTag = preview.locator('.tiny-tag').filter({ hasText: '新标签' })
   const close = page.locator('span').filter({ hasText: '新标签' }).locator('svg')
 
   await add.click()
   await input.fill('新标签')
   await input.press('Enter')
-  await expect(newTag, 'Creation failed').toBeVisible()
+  await expect(newTag).toHaveCount(1)
   await close.click()
   await expect(newTag, 'Deletion failed').not.toBeVisible()
 })

package/demos/pc/app/tag/disabled.spec.ts

@@ -4,7 +4,7 @@ test('是否正常禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#disabled')
 
-  const tags = page.locator('.tiny-tag')
+  const tags = page.locator('.all-demos-container').locator('.tiny-tag')
   const close = tags.last().locator('.tiny-tag__close')
 
   await expect(tags).toHaveClass([/is-disabled/, /is-disabled/, /is-disabled/])

package/demos/pc/app/tag/effect.spec.ts

@@ -4,9 +4,10 @@ test('三大主题分别对应的五种类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#effect')
 
-  const light = page.locator('.tiny-tag--light')
-  const dark = page.locator('.tiny-tag--dark')
-  const plain = page.locator('.tiny-tag--plain')
+  const scoped = page.locator('.all-demos-container')
+  const light = scoped.locator('.tiny-tag--light')
+  const dark = scoped.locator('.tiny-tag--dark')
+  const plain = scoped.locator('.tiny-tag--plain')
 
   await expect(light).toHaveCount(5)
   await expect(dark).toHaveCount(5)