@opentiny/vue-docs 2.2.19 → 2.2.20

package/demos/apis/numeric.js

@@ -393,6 +393,18 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'string-mode',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '使用字符串模式，精度超过JS限制时使用',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: 'string-mode',
+          mfDemo: ''
+        },
         {
           name: 'value',
           type: 'Number',

package/demos/pc/app/button/ghost-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost>幽灵按钮</tiny-button>
-    <tiny-button ghost type="primary">主要按钮</tiny-button>
-    <tiny-button ghost type="success">成功按钮</tiny-button>
-    <tiny-button ghost type="info">信息按钮</tiny-button>
-    <tiny-button ghost type="warning">告警按钮</tiny-button>
-    <tiny-button ghost type="danger">危险按钮</tiny-button>
+    <tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
+    <tiny-button ghost type="primary" reset-time="0">主要按钮</tiny-button>
+    <tiny-button ghost type="success" reset-time="0">成功按钮</tiny-button>
+    <tiny-button ghost type="info" reset-time="0">信息按钮</tiny-button>
+    <tiny-button ghost type="warning" reset-time="0">告警按钮</tiny-button>
+    <tiny-button ghost type="danger" reset-time="0">危险按钮</tiny-button>
   </div>
 </template>
 

package/demos/pc/app/button/ghost.spec.ts

@@ -8,10 +8,12 @@ test('幽灵按钮', async ({ page }) => {
   const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
 
   // 默认幽灵按钮
+  await page.waitForTimeout(1000)
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(37, 43, 58)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
-  await getGhostBtn(0).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(0).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
@@ -21,7 +23,8 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
-  await getGhostBtn(1).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(1).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
@@ -31,7 +34,8 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
-  await getGhostBtn(2).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(2).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
@@ -41,7 +45,8 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(37, 43, 58)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
-  await getGhostBtn(3).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(3).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
@@ -51,7 +56,8 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 152, 65)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
-  await getGhostBtn(4).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(4).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
@@ -61,7 +67,8 @@ test('幽灵按钮', async ({ page }) => {
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(199, 0, 11)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
   await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
-  await getGhostBtn(5).hover()
+  await page.waitForTimeout(100)
+  await getGhostBtn(5).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')

package/demos/pc/app/button/ghost.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="gray-bg">
-    <tiny-button ghost>幽灵按钮</tiny-button>
-    <tiny-button ghost type="primary">主要按钮</tiny-button>
-    <tiny-button ghost type="success">成功按钮</tiny-button>
-    <tiny-button ghost type="info">信息按钮</tiny-button>
-    <tiny-button ghost type="warning">告警按钮</tiny-button>
-    <tiny-button ghost type="danger">危险按钮</tiny-button>
+    <tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
+    <tiny-button ghost reset-time="0" type="primary">主要按钮</tiny-button>
+    <tiny-button ghost reset-time="0" type="success">成功按钮</tiny-button>
+    <tiny-button ghost reset-time="0" type="info">信息按钮</tiny-button>
+    <tiny-button ghost reset-time="0" type="warning">告警按钮</tiny-button>
+    <tiny-button ghost reset-time="0" type="danger">危险按钮</tiny-button>
   </div>
 </template>
 

package/demos/pc/app/grid/webdoc/grid-custom-style.js

@@ -28,7 +28,7 @@ export default {
       'name': { 'zh-CN': '自定义表尾样式', 'en-US': 'Table tail style (customized table tail row style)' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式</p>\n',
+          '<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式。</p>\n',
         'en-US':
           '<p>Use <code>footer-cell-class-name</code> and <code>footer-row-class-name</code> to set the cell and row styles at the end of the table</p>\n'
       },

package/demos/pc/app/grid/webdoc/grid-editor.js

@@ -9,7 +9,7 @@ export default {
         'zh-CN': `
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
-          <p class="custom-block-title">说明</p>
+          <p class="custom-block-title">特别说明：</p>
           <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,

package/demos/pc/app/grid/webdoc/grid-toolbar.js

@@ -88,7 +88,7 @@ export default {
         'zh-CN': `
         <p>设置工具栏组件属性 <code>refresh</code> 开启表格刷新功能。</p>
         <ul>
-          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。\n自定义实现刷新时直接调用<code>handleFetch('reload')</code></li>
+          <li>设置表格属性 <code>loading</code> 开启/关闭加载中。自定义实现刷新时直接调用<code>handleFetch('reload')</code>。</li>
         </ul>`,
         'en-US':
           "<p>Toolbar configuration procedure:\n1. Import the table toolbar component <code>GridToolbar</code> in slot mode and set the toolbar component attribute <code>slot=&quot;toolbar&quot;</code> . \n2. Set the toolbar component attribute <code>refresh</code> to enable the table refresh function. </p>\n<ul>\n<li> Setting Toolbar Properties <code>loading</code>Enable/Disable Loading. \n <code>handleFetch('reload') </code></li>\n</ul>\n is invoked when the customized implementation is refreshed"

package/demos/pc/app/numeric/mouse-wheel.spec.ts

@@ -7,7 +7,7 @@ test('鼠标滚轮事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   const initVal = Number(await numeric.inputValue())
   await numeric.click()
-  await page.mouse.wheel(0, -100)
+  await page.mouse.wheel(0, -500)
   const currentVal = Number(await numeric.inputValue())
-  expect(currentVal).toBeGreaterThanOrEqual(initVal)
+  expect(currentVal).toBeLessThan(initVal)
 })

package/demos/pc/app/numeric/string-mode-composition-api.vue

@@ -0,0 +1,10 @@
+<template>
+  <tiny-numeric style="width: 500px" v-model="stepNum" :step="step" string-mode :precision="20"></tiny-numeric>
+</template>
+
+<script setup>
+import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { ref } from 'vue'
+const step = ref('0.00000000000000000002')
+const stepNum = ref('0.00000000000000000002')
+</script>

package/demos/pc/app/numeric/string-mode.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('高精度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('numeric#string-mode')
+
+  const input = page.getByRole('spinbutton')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
+  await increaseBtn.click()
+  const increasedVal = await input.inputValue()
+  expect(increasedVal).toContain('0.00000000000000000004')
+
+  await decreaseBtn.click()
+  const decreasedVal = await input.inputValue()
+  expect(decreasedVal).toContain('0.00000000000000000002')
+})

package/demos/pc/app/numeric/string-mode.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-numeric style="width: 500px" v-model="stepNum" :step="step" string-mode :precision="20"></tiny-numeric>
+</template>
+
+<script>
+import { Numeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: '0.00000000000000000002',
+      stepNum: '0.00000000000000000002'
+    }
+  }
+}
+</script>

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

@@ -171,6 +171,19 @@ export default {
       },
       codeFiles: ['blur-event.vue']
     },
+    {
+      demoId: 'string-mode',
+      name: {
+        'zh-CN': '高精度',
+        'en-US': 'Out of Focus Event'
+      },
+      desc: {
+        'zh-CN':
+          '<p>可通过 <code>string-mode</code> 设置高精度模式，当 JS 默认的 Number 不满足数字的长度与精度需求时。</p>\n',
+        'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
+      },
+      codeFiles: ['string-mode.vue']
+    },
     {
       demoId: 'filter-mode',
       name: {

package/demos/pc/app/select/disabled-composition-api.vue

@@ -82,12 +82,12 @@ const options2 = ref([
   { value: '选项1', label: '黄金糕' },
   { value: '选项2', label: '双皮奶', disabled: true },
   { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
+  { value: '选项4', label: '龙须面', disabled: true },
   { value: '选项5', label: '北京烤鸭' }
 ])
 
 const value1 = ref('')
-const value2 = ref([])
+const value2 = ref(['选项2'])
 const value3 = ref('')
 const value4 = ref(['选项2', '选项3'])
 const value5 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])

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

@@ -19,15 +19,15 @@ test('多选某项禁用', async ({ page }) => {
   const tag = select.locator('.tiny-tag')
   const option = dropdown.locator('.tiny-option')
 
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
   await select.click()
   await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
 
   await option.filter({ hasText: '双皮奶' }).click()
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
 
   await option.filter({ hasText: '黄金糕' }).click()
-  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveCount(2)
   await expect(tag.filter({ hasText: '黄金糕' })).toHaveCount(1)
 })
 

package/demos/pc/app/select/disabled.vue

@@ -87,11 +87,11 @@ export default {
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶', disabled: true },
         { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
+        { value: '选项4', label: '龙须面', disabled: true },
         { value: '选项5', label: '北京烤鸭' }
       ],
       value1: '',
-      value2: [],
+      value2: ['选项2'],
       value3: '',
       value4: ['选项2', '选项3'],
       value5: ['选项1', '选项2', '选项3', '选项4', '选项5']

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

@@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await input.hover()
-  await select.locator('.tiny-select__caret').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
   await page.waitForTimeout(500)
   await expect(input).toHaveValue('')
   await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
@@ -42,6 +42,7 @@ test('多选事件', async ({ page }) => {
   const option = dropdown.locator('.tiny-option')
   const model = page.locator('.tiny-modal')
 
+  await page.waitForTimeout(500)
   await select.click()
   await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
@@ -56,7 +57,6 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(500)
   await tag.first().locator('.tiny-tag__close').click()
-  await expect(model.filter({ hasText: '触发 blur 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 remove-tag 事件' })).toHaveCount(1)
   await expect(tag).toHaveCount(4)
@@ -66,7 +66,7 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__caret').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
 
   await expect(tag).toHaveCount(0)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)

package/demos/pc/app/select/multiple.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1：多选</div>
     <br />
-    <tiny-select v-model="value1" multiple>
+    <tiny-select v-model="value1" multiple searchable>
       <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />

package/demos/pc/app/tabs/tabs-events-close.spec.ts

@@ -5,7 +5,7 @@ test('删除事件', async ({ page }) => {
   await page.goto('tabs#tabs-events-close')
 
   const tabs = page.locator('.tiny-tabs')
-  const tabItem = tabs.getByRole('tab', { name: '表单组件' })
+  const tabItem = tabs.getByRole('tab', { name: '其他组件' })
   const close = tabItem.locator('.tiny-tabs__icon-close')
   const modal = page.locator('.tiny-modal').first()
 

package/demos/pc/webdoc/changelog.md

@@ -9,6 +9,10 @@
 ### Exciting New Features 🎉
 
 - feat(vue): [mind-map] mindmap by @GaoNeng-wWw in https://github.com/opentiny/tiny-vue/pull/1207
+- feat(skeleton): skeleton component by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1345
+- feat(float-button): [float-button] add float-button by @fanbingbing16 in https://github.com/opentiny/tiny-vue/pull/1394
+- feat(card): add card component by @shenjunjian
+- feat auto import plugin by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1397
 - feat(time-line): refresh ui by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1281
 - feat(numeric): refresh ui by @MNZhu in https://github.com/opentiny/tiny-vue/pull/1258
 - styles(action-sheet): [action-sheet] add action-sheet type by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1307
@@ -26,18 +30,15 @@
 - styles(async-flowchart): [async-flowchart] add async-flowchart types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1312
 - styles(area): [area] add area types by @jxhhdx in https://github.com/opentiny/tiny-vue/pull/1311
 - feat(dialog-box): [dialog-box] make the dialogBox drag outside the window by @wNing50 in https://github.com/opentiny/tiny-vue/pull/1268
-- feat(skeleton): skeleton component by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1345
 - style(user-head): [user-head] improve typescript declaration of compo… by @Floyd-bit in https://github.com/opentiny/tiny-vue/pull/1380
 - fix(carousel ): [carousel] update carousel xdesign by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1422
 - fix(badge): [badge] update badge xdesign by @You-Hw-Y in https://github.com/opentiny/tiny-vue/pull/1420
 - feat(date-picker): [date-picker] support xdesign by @kagol in https://github.com/opentiny/tiny-vue/pull/1417
 - feat(slider): [slider] marks supported, input range supported by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1429
-- feat auto import plugin by @mengqiuleo in https://github.com/opentiny/tiny-vue/pull/1397
 - [drawer] fix smb theme by @Huangyilin19 in https://github.com/opentiny/tiny-vue/pull/1411
 - feat(vue): add vue sub packages dependencies by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1424
 - fix(transfer ): [transfer] update transfer xdesign by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1419
 - fix(skeleton): [skeleton]add skeleton of smb theme by @James-9696 in https://github.com/opentiny/tiny-vue/pull/1410
-- feat(float-button): [float-button] add float-button by @fanbingbing16 in https://github.com/opentiny/tiny-vue/pull/1394
 - feat(loading): [loading] smb theme by @yoyo201626 in https://github.com/opentiny/tiny-vue/pull/1431
 - fix(Switch): [Switch] add keydown support and improth the accessibility by @AcWrong02 in https://github.com/opentiny/tiny-vue/pull/1428
 - feat(vue): [popconfirm] add popper-options props by @gimmyhehe in https://github.com/opentiny/tiny-vue/pull/1439

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "license": "MIT",
   "dependencies": {
     "@unocss/reset": "0.38.2",
@@ -17,15 +17,15 @@
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.14.0",
-    "@opentiny/vue-common": "~3.14.0",
     "@opentiny/vue-icon": "~3.14.0",
-    "@opentiny/vue-design-smb": "~3.14.0",
+    "@opentiny/vue-common": "~3.14.0",
     "@opentiny/vue-icon-saas": "~3.14.0",
+    "@opentiny/vue-design-aurora": "~3.14.0",
     "@opentiny/vue-design-saas": "~3.14.0",
-    "@opentiny/vue-theme": "~3.14.0",
     "@opentiny/vue-theme-mobile": "~3.14.0",
-    "@opentiny/vue-design-aurora": "~3.14.0",
+    "@opentiny/vue-design-smb": "~3.14.0",
     "@opentiny/vue-vite-import": "~1.1.5",
+    "@opentiny/vue-theme": "~3.14.0",
     "@opentiny/vue-theme-saas": "~3.14.0"
   },
   "devDependencies": {