From 47c6f176c278f2fcf68c26aa46faea3b261e72ca Mon Sep 17 00:00:00 2001 From: xiaoy <1003346758@qq.com> Date: Fri, 2 Feb 2024 15:27:14 +0800 Subject: [PATCH] feat(skeleton): skeleton component (#1345) * feat(skeleton): skeleton component * fix(skeleton): skeleton css style --- .../pc/app/skeleton/base-composition-api.vue | 9 + .../sites/demos/pc/app/skeleton/base.spec.ts | 14 + examples/sites/demos/pc/app/skeleton/base.vue | 15 + .../skeleton/complex-demo-composition-api.vue | 9 + .../pc/app/skeleton/complex-demo.spec.ts | 14 + .../demos/pc/app/skeleton/complex-demo.vue | 15 + .../custom-layout-composition-api.vue | 15 + .../pc/app/skeleton/custom-layout.spec.ts | 14 + .../demos/pc/app/skeleton/custom-layout.vue | 22 + ...custom-paragraph-width-composition-api.vue | 9 + .../skeleton/custom-paragraph-width.spec.ts | 16 + .../app/skeleton/custom-paragraph-width.vue | 15 + .../skeleton/custom-rows-composition-api.vue | 9 + .../demos/pc/app/skeleton/custom-rows.spec.ts | 12 + .../demos/pc/app/skeleton/custom-rows.vue | 15 + .../fine-grained-mode-composition-api.vue | 34 + .../pc/app/skeleton/fine-grained-mode.spec.ts | 50 + .../pc/app/skeleton/fine-grained-mode.vue | 41 + .../loading-completed-composition-api.vue | 35 + .../pc/app/skeleton/loading-completed.spec.ts | 26 + .../pc/app/skeleton/loading-completed.vue | 42 + .../pc/app/skeleton/webdoc/skeleton.cn.md | 7 + .../pc/app/skeleton/webdoc/skeleton.en.md | 7 + .../demos/pc/app/skeleton/webdoc/skeleton.js | 207 +++++ examples/sites/demos/pc/menus.js | 3 +- packages/modules.json | 865 +++++------------- packages/renderless/src/skeleton-item/vue.ts | 14 + packages/renderless/src/skeleton/index.ts | 13 + packages/renderless/src/skeleton/vue.ts | 14 + packages/renderless/types/index.ts | 2 + .../renderless/types/skeleton-item.type.ts | 14 + packages/renderless/types/skeleton.type.ts | 10 + packages/theme/src/skeleton-item/index.less | 80 ++ packages/theme/src/skeleton-item/vars.less | 16 + packages/theme/src/skeleton/index.less | 42 + packages/theme/src/skeleton/vars.less | 9 + packages/vue/package.json | 2 + .../__tests__/skeleton-item.test.tsx | 20 + packages/vue/src/skeleton-item/index.ts | 24 + packages/vue/src/skeleton-item/package.json | 19 + packages/vue/src/skeleton-item/src/index.ts | 34 + packages/vue/src/skeleton-item/src/pc.vue | 29 + .../src/skeleton/__tests__/skeleton.test.tsx | 65 ++ packages/vue/src/skeleton/index.ts | 24 + packages/vue/src/skeleton/package.json | 20 + packages/vue/src/skeleton/src/index.ts | 42 + packages/vue/src/skeleton/src/pc.vue | 39 + 47 files changed, 1398 insertions(+), 654 deletions(-) create mode 100644 examples/sites/demos/pc/app/skeleton/base-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/base.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/base.vue create mode 100644 examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/complex-demo.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/complex-demo.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/custom-layout.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/custom-rows.vue create mode 100644 examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue create mode 100644 examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue create mode 100644 examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts create mode 100644 examples/sites/demos/pc/app/skeleton/loading-completed.vue create mode 100644 examples/sites/demos/pc/app/skeleton/webdoc/skeleton.cn.md create mode 100644 examples/sites/demos/pc/app/skeleton/webdoc/skeleton.en.md create mode 100644 examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js create mode 100644 packages/renderless/src/skeleton-item/vue.ts create mode 100644 packages/renderless/src/skeleton/index.ts create mode 100644 packages/renderless/src/skeleton/vue.ts create mode 100644 packages/renderless/types/skeleton-item.type.ts create mode 100644 packages/renderless/types/skeleton.type.ts create mode 100644 packages/theme/src/skeleton-item/index.less create mode 100644 packages/theme/src/skeleton-item/vars.less create mode 100644 packages/theme/src/skeleton/index.less create mode 100644 packages/theme/src/skeleton/vars.less create mode 100644 packages/vue/src/skeleton-item/__tests__/skeleton-item.test.tsx create mode 100644 packages/vue/src/skeleton-item/index.ts create mode 100644 packages/vue/src/skeleton-item/package.json create mode 100644 packages/vue/src/skeleton-item/src/index.ts create mode 100644 packages/vue/src/skeleton-item/src/pc.vue create mode 100644 packages/vue/src/skeleton/__tests__/skeleton.test.tsx create mode 100644 packages/vue/src/skeleton/index.ts create mode 100644 packages/vue/src/skeleton/package.json create mode 100644 packages/vue/src/skeleton/src/index.ts create mode 100644 packages/vue/src/skeleton/src/pc.vue diff --git a/examples/sites/demos/pc/app/skeleton/base-composition-api.vue b/examples/sites/demos/pc/app/skeleton/base-composition-api.vue new file mode 100644 index 000000000..387bb8c06 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/base-composition-api.vue @@ -0,0 +1,9 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/base.spec.ts b/examples/sites/demos/pc/app/skeleton/base.spec.ts new file mode 100644 index 000000000..7d0757f6f --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/base.spec.ts @@ -0,0 +1,14 @@ +import { expect, test } from '@playwright/test' + +test('基本用法', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#basic') + + const first = page.locator('.tiny-skeleton') + const children = page.locator('.tiny-skeleton-item') + const active = page.locator('.tiny-skeleton-item--active') + + await expect(first).toHaveCount(1) + await expect(children).toHaveCount(4) + await expect(active).toHaveCount(4) +}) diff --git a/examples/sites/demos/pc/app/skeleton/base.vue b/examples/sites/demos/pc/app/skeleton/base.vue new file mode 100644 index 000000000..0347d8002 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/base.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue b/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue new file mode 100644 index 000000000..973148b79 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue @@ -0,0 +1,9 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/complex-demo.spec.ts b/examples/sites/demos/pc/app/skeleton/complex-demo.spec.ts new file mode 100644 index 000000000..fc4dd25b7 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/complex-demo.spec.ts @@ -0,0 +1,14 @@ +import { expect, test } from '@playwright/test' + +test('段落显示左侧头像', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#complex-demo') + + const first = page.locator('.tiny-skeleton') + const avatar = page.locator('.tiny-skeleton__avatar') + const medium = page.locator('.tiny-skeleton-item--medium') + + await expect(first).toHaveCount(1) + await expect(avatar).toHaveCount(1) + await expect(medium).toHaveCount(1) +}) diff --git a/examples/sites/demos/pc/app/skeleton/complex-demo.vue b/examples/sites/demos/pc/app/skeleton/complex-demo.vue new file mode 100644 index 000000000..dbde5b97f --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/complex-demo.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue new file mode 100644 index 000000000..141c01be8 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts new file mode 100644 index 000000000..54fa44a2a --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts @@ -0,0 +1,14 @@ +import { expect, test } from '@playwright/test' + +test('自定义排版', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#custom-layout') + + const image = page.locator('.tiny-skeleton-item--image') + const circle = page.locator('.tiny-skeleton-item--circle') + + await expect(image).toHaveCount(1) + await expect(circle).toHaveCount(1) + await expect(circle).toHaveClass(/tiny-skeleton-item--small/) + await expect(image).toHaveCSS('width', '200px') +}) diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout.vue b/examples/sites/demos/pc/app/skeleton/custom-layout.vue new file mode 100644 index 000000000..501d04925 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-layout.vue @@ -0,0 +1,22 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue new file mode 100644 index 000000000..c320afed0 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue @@ -0,0 +1,9 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts new file mode 100644 index 000000000..4521c942f --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts @@ -0,0 +1,16 @@ +import { expect, test } from '@playwright/test' + +test('自定义段落宽度', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#custom-paragraph-width') + + const first = page.locator('.tiny-skeleton') + const item1 = page.locator('.tiny-skeleton-item').nth(1) + const item2 = page.locator('.tiny-skeleton-item').nth(2) + const item3 = page.locator('.tiny-skeleton-item').nth(3) + + await expect(first).toHaveCount(1) + await expect(item1).toHaveCSS('width', '200px') + await expect(item2).toHaveCSS('width', '100px') + await expect(item3).toHaveCSS('width', '50px') +}) diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue new file mode 100644 index 000000000..9751c0095 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue new file mode 100644 index 000000000..86e1150e2 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-rows-composition-api.vue @@ -0,0 +1,9 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts new file mode 100644 index 000000000..233202ff8 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts @@ -0,0 +1,12 @@ +import { expect, test } from '@playwright/test' + +test('自定义段落行数', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#custom-rows') + + const first = page.locator('.tiny-skeleton') + const item = page.locator('.tiny-skeleton-item') + + await expect(first).toHaveCount(1) + await expect(item).toHaveCount(5) +}) diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows.vue b/examples/sites/demos/pc/app/skeleton/custom-rows.vue new file mode 100644 index 000000000..3e0a7657f --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/custom-rows.vue @@ -0,0 +1,15 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue new file mode 100644 index 000000000..b3714751b --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue @@ -0,0 +1,34 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts new file mode 100644 index 000000000..e9a9d5118 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts @@ -0,0 +1,50 @@ +import { expect, test } from '@playwright/test' + +test('细粒度模式', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#fine-grained-mode') + + const first = page.locator('.tiny-skeleton') + const radio1 = page.locator('.tiny-radio').nth(0) + const radio2 = page.locator('.tiny-radio').nth(1) + const radio3 = page.locator('.tiny-radio').nth(2) + const activeSwitch = page.locator('.pc-demo > div > .tiny-switch') + const image = page.locator('.tiny-skeleton-item--image') + const circle = page.locator('.tiny-skeleton-item--circle') + const square = page.locator('.tiny-skeleton-item--square') + + await expect(first).toHaveCount(1) + + // 测试动画效果 + await expect(circle).toHaveClass(/tiny-skeleton-item--active/) + await expect(square).toHaveClass(/tiny-skeleton-item--active/) + await expect(image).toHaveClass(/tiny-skeleton-item--active/) + + await activeSwitch.click() + await page.waitForTimeout(500) + await expect(image).not.toHaveClass(/tiny-skeleton-item--active/) + await expect(circle).not.toHaveClass(/tiny-skeleton-item--active/) + await expect(square).not.toHaveClass(/tiny-skeleton-item--active/) + + // 测试大小 + await radio2.click() + await page.waitForTimeout(500) + await expect(radio2).toHaveClass(/is-checked/) + await expect(circle).toHaveClass(/tiny-skeleton-item--medium/) + await expect(image).toHaveClass(/tiny-skeleton-item--medium/) + await expect(square).not.toHaveClass(/tiny-skeleton-item--medium/) + + await radio1.click() + await page.waitForTimeout(500) + await expect(radio1).toHaveClass(/is-checked/) + await expect(circle).toHaveClass(/tiny-skeleton-item--small/) + await expect(image).toHaveClass(/tiny-skeleton-item--small/) + await expect(square).not.toHaveClass(/tiny-skeleton-item--small/) + + await radio3.click() + await page.waitForTimeout(500) + await expect(radio3).toHaveClass(/is-checked/) + await expect(circle).toHaveClass(/tiny-skeleton-item--large/) + await expect(image).toHaveClass(/tiny-skeleton-item--large/) + await expect(square).not.toHaveClass(/tiny-skeleton-item--large/) +}) diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue new file mode 100644 index 000000000..a86f40469 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue new file mode 100644 index 000000000..8f1da7060 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue @@ -0,0 +1,35 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts b/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts new file mode 100644 index 000000000..d3a11f116 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts @@ -0,0 +1,26 @@ +import { expect, test } from '@playwright/test' + +test('加载完成', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('skeleton#loading-completed') + + const square = page.locator('.tiny-skeleton-item--square') + const circle = page.locator('.tiny-skeleton-item--circle') + const button = page.getByRole('button', { name: '显示/隐藏' }) + + await expect(circle).toHaveCount(1) + await expect(square).toHaveCount(2) + await expect(circle).toHaveCSS('width', '72px') + await expect(circle).toHaveCSS('height', '72px') + + await button.click() + await page.waitForTimeout(500) + await expect(square).toBeHidden() + await expect(circle).toBeHidden() + const p = page.locator('.paragraph') + await expect(p).toHaveText(/内容比较短的一段文字/) + const btn = page.getByRole('button', { name: '一个按钮' }) + await expect(btn).toBeVisible() + const head = page.locator('.tiny-user-head') + await expect(head).toBeVisible() +}) diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed.vue b/examples/sites/demos/pc/app/skeleton/loading-completed.vue new file mode 100644 index 000000000..8b299ce29 --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/loading-completed.vue @@ -0,0 +1,42 @@ + + + diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.cn.md b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.cn.md new file mode 100644 index 000000000..521767c4f --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.cn.md @@ -0,0 +1,7 @@ +--- +title: Skeleton 骨架屏 +--- + +# Skeleton 骨架屏 + +用于在内容加载过程中展示一组占位图形。 diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.en.md b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.en.md new file mode 100644 index 000000000..13d3ad19b --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.en.md @@ -0,0 +1,7 @@ +--- +title: Skeleton 骨架屏 +--- + +# Skeleton 骨架屏 + +Used to display a set of placeholder graphics while content is loading. diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js new file mode 100644 index 000000000..d856188fb --- /dev/null +++ b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js @@ -0,0 +1,207 @@ +export default { + column: '2', + owner: '', + demos: [ + { + 'demoId': 'base', + 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' }, + 'desc': { + 'zh-CN': '

基础的骨架效果。

\n', + 'en-US': '

Basic skeleton effect.

\n' + }, + 'codeFiles': ['base.vue'] + }, + { + 'demoId': 'complex-demo', + 'name': { 'zh-CN': '复杂的组合', 'en-US': 'Complex Demo' }, + 'desc': { + 'zh-CN': '

更复杂的组合，通过 avatar 属性控制骨架段落左侧出现头像占位。

\n', + 'en-US': + '

More complex combinations, use the avatar attribute to control the appearance of the avatar placeholder on the left side of the skeleton paragraph.

\n' + }, + 'codeFiles': ['complex-demo.vue'] + }, + { + 'demoId': 'custom-rows', + 'name': { 'zh-CN': '自定义段落行数', 'en-US': 'Custom rows' }, + 'desc': { + 'zh-CN': + '

段落默认渲染 4 行，通过 rows 属性控制段落行数，显示的数量会比传入的数量多 1，首行会被渲染一个长度 40% 的段首，末行会被渲染一个长度 60% 的段尾。

\n', + 'en-US': + '

By default, paragraphs are rendered in 4 lines. The number of paragraph lines is controlled through the rows attribute. The number displayed will be 1 more than the number passed in. The first line will render the paragraph header at 40% length, and the last line will render the paragraph trailer at 60% length.

\n' + }, + 'codeFiles': ['custom-rows.vue'] + }, + { + 'demoId': 'custom-layout', + 'name': { 'zh-CN': '自定义排版', 'en-US': 'Custom layout' }, + 'desc': { + 'zh-CN': + '

当默认排版不满足需求时，可自定义排版结构，通过 class 和 style 可自定义宽高等样式。

\n', + 'en-US': + '

When the default layout does not meet the needs, the layout structure can be customized, and styles such as width and height can be customized through class and style.

\n' + }, + 'codeFiles': ['custom-layout.vue'] + }, + { + 'demoId': 'loading-completed', + 'name': { 'zh-CN': '加载完成', 'en-US': 'Loading completed' }, + 'desc': { + 'zh-CN': + '

通过 loading 属性的值来表示是否加载完成。 可以通过具名插槽 default 来构建 loading 结束之后需要展示的真实 DOM 元素结构。

\n', + 'en-US': + '

Whether the loading is completed is indicated by the value of the loading attribute. You can use the named slot default to build the real DOM element structure that needs to be displayed after loading ends.

\n' + }, + 'codeFiles': ['loading-completed.vue'] + }, + { + 'demoId': 'custom-paragraph-width', + 'name': { 'zh-CN': '自定义段落宽度', 'en-US': 'Custom paragraph width' }, + 'desc': { + 'zh-CN': + '

rows-width 属性可以自定义段落宽度，数组中的每一项可以为 number 或 string，当为 number 时，组件会自动增加 px 单位。

\n', + 'en-US': + '

The rows-width attribute can customize the paragraph width. Each item in the array can be number or string. When it is number< /code>, the component will automatically increase the px unit

\n' + }, + 'codeFiles': ['custom-paragraph-width.vue'] + }, + { + 'demoId': 'fine-grained-mode', + 'name': { 'zh-CN': '细粒度模式', 'en-US': 'Fine-grained mode' }, + 'desc': { + 'zh-CN': + '

细粒度模式，variant 属性可以控制 skeleton-item 的形态，可选值：image / circle / square。size 属性可以控制 skeleton-item 的大小，可选值：medium / small / large。

\n', + 'en-US': + '

Fine-grained mode, the variant attribute can control the shape of skeleton-item, optional values: image / circle / square. The size attribute can control the size of skeleton-item. Optional values: medium / small / large.

\n' + }, + 'codeFiles': ['fine-grained-mode.vue'] + } + ], + apis: [ + { + 'name': 'skeleton', + 'type': 'component', + 'props': [ + { + 'name': 'loading', + 'type': 'boolean', + 'defaultValue': 'true', + 'desc': { + 'zh-CN': '是否显示骨架屏，传 false 时会展示加载完成后的内容', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'custom-layout' + }, + { + 'name': 'active', + 'type': 'boolean', + 'defaultValue': 'true', + 'desc': { + 'zh-CN': '是否开启动画', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'fine-grained-mode' + }, + { + 'name': 'avatar', + 'type': 'boolean', + 'defaultValue': 'false', + 'desc': { + 'zh-CN': '是否显示头像', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'complex-demo' + }, + { + 'name': 'rows', + 'type': 'number', + 'defaultValue': '3', + 'desc': { + 'zh-CN': '默认排版，可配置段落显示行数', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'custom-rows' + }, + { + 'name': 'rows-width', + 'type': 'number[] | string[]', + 'defaultValue': '[]', + 'desc': { + 'zh-CN': '自定义段落每一行的宽度', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'custom-paragraph-width' + } + ], + 'slots': [ + { + 'name': 'default', + 'type': '', + 'defaultValue': '', + 'desc': { + 'zh-CN': '加载完成后显示的内容', + 'en-US': 'Option default slot' + }, + 'demoId': 'custom-layout' + }, + { + 'name': 'placeholder', + 'type': '', + 'defaultValue': '', + 'desc': { + 'zh-CN': '自定义骨架屏结构', + 'en-US': 'Option default slot' + }, + 'demoId': 'custom-layout' + } + ] + }, + { + 'name': 'skeleton-item', + 'type': 'component', + 'props': [ + { + 'name': 'variant', + 'type': 'IVariant', + 'typeAnchorName': 'IVariant', + 'defaultValue': 'square', + 'desc': { + 'zh-CN': '骨架屏形态', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'fine-grained-mode' + }, + { + 'name': 'size', + 'type': 'ISize', + 'typeAnchorName': 'ISize', + 'defaultValue': 'medium', + 'desc': { + 'zh-CN': '针对 image 和 circle 形态，内置三种大小', + 'en-US': + 'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.' + }, + 'demoId': 'fine-grained-mode' + } + ] + } + ], + types: [ + { + name: 'IVariant', + type: 'type', + code: `type IVariant = 'image' | 'circle' | 'square'` + }, + { + name: 'ISize', + type: 'type', + code: `type ISize = 'large' | 'medium' | 'small'` + } + ] +} diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js index bd46c5982..f3ab8ae3b 100644 --- a/examples/sites/demos/pc/menus.js +++ b/examples/sites/demos/pc/menus.js @@ -208,7 +208,8 @@ export const cmpMenus = [ { 'nameCn': '进度条', 'name': 'Progress', 'key': 'progress' }, { 'nameCn': '树形控件', 'name': 'Tree', 'key': 'tree' }, { 'nameCn': '穿梭框', 'name': 'Transfer', 'key': 'transfer' }, - { 'nameCn': '无限滚动', 'name': 'InfiniteScroll', 'key': 'infinite-scroll' } + { 'nameCn': '无限滚动', 'name': 'InfiniteScroll', 'key': 'infinite-scroll' }, + { 'nameCn': '骨架屏', 'name': 'Skeleton', 'key': 'skeleton' } ] }, { diff --git a/packages/modules.json b/packages/modules.json index d1760dc4b..7bf118eff 100644 --- a/packages/modules.json +++ b/packages/modules.json @@ -3,9 +3,7 @@ "path": "vue/src/action-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ActionMenuPc": { "path": "vue/src/action-menu/src/pc.vue", @@ -16,10 +14,7 @@ "path": "vue/src/action-sheet/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "ActionSheetMobile": { "path": "vue/src/action-sheet/src/mobile.vue", @@ -35,11 +30,7 @@ "path": "vue/src/alert/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "AlertMobile": { "path": "vue/src/alert/src/mobile.vue", @@ -60,17 +51,13 @@ "path": "vue/src/amount/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Anchor": { "path": "vue/src/anchor/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "AnchorPc": { "path": "vue/src/anchor/src/pc.vue", @@ -81,17 +68,13 @@ "path": "vue/src/area/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "AsyncFlowchart": { "path": "vue/src/async-flowchart/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "AsyncFlowchartMobileFirst": { "path": "vue/src/async-flowchart/src/mobile-first.vue", @@ -102,9 +85,7 @@ "path": "vue/src/autocomplete/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "AutocompletePc": { "path": "vue/src/autocomplete/src/pc.vue", @@ -120,19 +101,13 @@ "path": "vue/src/avatar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "Badge": { "path": "vue/src/badge/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "BadgeMobile": { "path": "vue/src/badge/src/mobile.vue", @@ -158,17 +133,13 @@ "path": "vue/src/breadcrumb/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "BreadcrumbItem": { "path": "vue/src/breadcrumb-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "BreadcrumbItemPc": { "path": "vue/src/breadcrumb-item/src/pc.vue", @@ -184,9 +155,7 @@ "path": "vue/src/bulletin-board/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "BulletinBoardPc": { "path": "vue/src/bulletin-board/src/pc.vue", @@ -197,19 +166,13 @@ "path": "vue/src/button/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "ButtonGroup": { "path": "vue/src/button-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ButtonGroupPc": { "path": "vue/src/button-group/src/pc.vue", @@ -235,17 +198,13 @@ "path": "vue/src/calendar/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CalendarBar": { "path": "vue/src/calendar-bar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "CalendarBarMobileFirst": { "path": "vue/src/calendar-bar/src/mobile-first.vue", @@ -261,10 +220,7 @@ "path": "vue/src/calendar-view/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "CalendarViewMobileFirst": { "path": "vue/src/calendar-view/src/mobile-first.vue", @@ -280,25 +236,19 @@ "path": "vue/src/card/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "CardGroup": { "path": "vue/src/card-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "CardTemplate": { "path": "vue/src/card-template/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CardTemplatePc": { "path": "vue/src/card-template/src/pc.vue", @@ -309,19 +259,13 @@ "path": "vue/src/carousel/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "CarouselItem": { "path": "vue/src/carousel-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "CarouselItemMobileFirst": { "path": "vue/src/carousel-item/src/mobile-first.vue", @@ -347,9 +291,7 @@ "path": "vue/src/cascader/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CascaderMenu": { "path": "vue/src/cascader-menu/index.ts", @@ -360,25 +302,19 @@ "path": "vue/src/cascader-mobile/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "CascaderNode": { "path": "vue/src/cascader-node/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CascaderPanel": { "path": "vue/src/cascader-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CascaderPc": { "path": "vue/src/cascader/src/pc.vue", @@ -389,10 +325,7 @@ "path": "vue/src/cascader-select/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "CascaderSelectMobile": { "path": "vue/src/cascader-select/src/mobile.vue", @@ -408,17 +341,13 @@ "path": "vue/src/cascader-view/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "Cell": { "path": "vue/src/cell/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "Chart": { "path": "vue/src/chart/index.ts", @@ -539,19 +468,13 @@ "path": "vue/src/checkbox/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "CheckboxButton": { "path": "vue/src/checkbox-button/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CheckboxButtonPc": { "path": "vue/src/checkbox-button/src/pc.vue", @@ -562,11 +485,7 @@ "path": "vue/src/checkbox-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "CheckboxGroupMobile": { "path": "vue/src/checkbox-group/src/mobile.vue", @@ -602,9 +521,7 @@ "path": "vue/src/col/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ColPc": { "path": "vue/src/col/src/pc.vue", @@ -615,19 +532,13 @@ "path": "vue/src/collapse/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "CollapseItem": { "path": "vue/src/collapse-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "CollapseItemMobileFirst": { "path": "vue/src/collapse-item/src/mobile-first.vue", @@ -653,18 +564,13 @@ "path": "vue/src/collapse-transition/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ColorPicker": { "path": "vue/src/color-picker/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile", - "pc" - ] + "mode": ["mobile", "pc"] }, "ColorPickerMobile": { "path": "vue/src/color-picker/src/mobile.vue", @@ -680,9 +586,7 @@ "path": "vue/src/color-select-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ColorSelectPanelPc": { "path": "vue/src/color-select-panel/src/pc.vue", @@ -693,17 +597,13 @@ "path": "vue/src/column-list-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "ColumnListItem": { "path": "vue/src/column-list-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "Common": { "path": "vue-common/src/index.ts", @@ -714,9 +614,7 @@ "path": "vue/src/company/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CompanyPc": { "path": "vue/src/company/src/pc.vue", @@ -732,10 +630,7 @@ "path": "vue/src/container/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile", - "pc" - ] + "mode": ["mobile", "pc"] }, "ContainerMobile": { "path": "vue/src/container/src/mobile.vue", @@ -751,9 +646,7 @@ "path": "vue/src/country/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CountryPc": { "path": "vue/src/country/src/pc.vue", @@ -764,17 +657,13 @@ "path": "vue/src/credit-card/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CreditCardForm": { "path": "vue/src/credit-card-form/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CreditCardFormPc": { "path": "vue/src/credit-card-form/src/pc.vue", @@ -790,17 +679,13 @@ "path": "vue/src/crop/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Currency": { "path": "vue/src/currency/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "CurrencyPc": { "path": "vue/src/currency/src/pc.vue", @@ -811,18 +696,13 @@ "path": "vue/src/date-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DatePicker": { "path": "vue/src/date-picker/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile", - "pc" - ] + "mode": ["mobile", "pc"] }, "DatePickerMobile": { "path": "vue/src/date-picker/src/mobile.vue", @@ -843,25 +723,19 @@ "path": "vue/src/date-range/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DateTable": { "path": "vue/src/date-table/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Dept": { "path": "vue/src/dept/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DeptPc": { "path": "vue/src/dept/src/pc.vue", @@ -887,9 +761,7 @@ "path": "vue/src/detail-page/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DetailPagePc": { "path": "vue/src/detail-page/src/pc.vue", @@ -900,10 +772,7 @@ "path": "vue/src/dialog-box/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile", - "pc" - ] + "mode": ["mobile", "pc"] }, "DialogBoxMobile": { "path": "vue/src/dialog-box/src/mobile.vue", @@ -919,9 +788,7 @@ "path": "vue/src/dialog-select/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DialogSelectPc": { "path": "vue/src/dialog-select/src/pc.vue", @@ -932,9 +799,7 @@ "path": "vue/src/divider/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DividerPc": { "path": "vue/src/divider/src/pc.vue", @@ -945,10 +810,7 @@ "path": "vue/src/drawer/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "DrawerMobileFirst": { "path": "vue/src/drawer/src/mobile-first.vue", @@ -964,9 +826,7 @@ "path": "vue/src/drop-roles/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DropRolesPc": { "path": "vue/src/drop-roles/src/pc.vue", @@ -977,9 +837,7 @@ "path": "vue/src/drop-times/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DropTimesPc": { "path": "vue/src/drop-times/src/pc.vue", @@ -990,20 +848,13 @@ "path": "vue/src/dropdown/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "DropdownItem": { "path": "vue/src/dropdown-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "DropdownItemMobile": { "path": "vue/src/dropdown-item/src/mobile.vue", @@ -1024,11 +875,7 @@ "path": "vue/src/dropdown-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "DropdownMenuMobile": { "path": "vue/src/dropdown-menu/src/mobile.vue", @@ -1059,17 +906,13 @@ "path": "vue/src/dynamic-scroller/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DynamicScrollerItem": { "path": "vue/src/dynamic-scroller-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "DynamicScrollerItemPc": { "path": "vue/src/dynamic-scroller-item/src/pc.vue", @@ -1085,9 +928,7 @@ "path": "vue/src/espace/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "EspacePc": { "path": "vue/src/espace/src/pc.vue", @@ -1098,10 +939,7 @@ "path": "vue/src/exception/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "ExceptionMobile": { "path": "vue/src/exception/src/mobile.vue", @@ -1117,9 +955,7 @@ "path": "vue/src/fall-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "FallMenuPc": { "path": "vue/src/fall-menu/src/pc.vue", @@ -1130,11 +966,7 @@ "path": "vue/src/file-upload/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "FileUploadMobile": { "path": "vue/src/file-upload/src/mobile.vue", @@ -1155,17 +987,13 @@ "path": "vue/src/filter/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "FilterBar": { "path": "vue/src/filter-bar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "FilterBarMobileFirst": { "path": "vue/src/filter-bar/src/mobile-first.vue", @@ -1176,9 +1004,7 @@ "path": "vue/src/filter-box/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "FilterMobileFirst": { "path": "vue/src/filter/src/mobile-first.vue", @@ -1189,17 +1015,13 @@ "path": "vue/src/filter-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Floatbar": { "path": "vue/src/floatbar/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "FloatbarPc": { "path": "vue/src/floatbar/src/pc.vue", @@ -1210,9 +1032,7 @@ "path": "vue/src/floating-button/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "FloatingButtonMobileFirst": { "path": "vue/src/floating-button/src/mobile-first.vue", @@ -1223,10 +1043,7 @@ "path": "vue/src/flowchart/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "FlowchartMobileFirst": { "path": "vue/src/flowchart/src/mobile-first.vue", @@ -1242,20 +1059,13 @@ "path": "vue/src/form/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "FormItem": { "path": "vue/src/form-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "FormItemLabelWrap": { "path": "vue/src/form-item/src/label-wrap.ts", @@ -1291,9 +1101,7 @@ "path": "vue/src/fullscreen/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Grid": { "path": "vue/src/grid/index.ts", @@ -1319,9 +1127,7 @@ "path": "vue/src/guide/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "GuidePc": { "path": "vue/src/guide/src/pc.vue", @@ -1332,9 +1138,7 @@ "path": "vue/src/hrapprover/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "HrapproverPc": { "path": "vue/src/hrapprover/src/pc.vue", @@ -1355,10 +1159,7 @@ "path": "vue/src/image/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "ImageMobileFirst": { "path": "vue/src/image/src/mobile-first.vue", @@ -1374,11 +1175,7 @@ "path": "vue/src/image-viewer/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "ImageViewerMobile": { "path": "vue/src/image-viewer/src/mobile.vue", @@ -1399,9 +1196,7 @@ "path": "vue/src/index-bar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "IndexBarAnchor": { "path": "vue/src/index-bar-anchor/index.ts", @@ -1417,11 +1212,7 @@ "path": "vue/src/input/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "InputMobile": { "path": "vue/src/input/src/mobile.vue", @@ -1447,9 +1238,7 @@ "path": "vue/src/ip-address/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "IpAddressPc": { "path": "vue/src/ip-address/src/pc.vue", @@ -1460,9 +1249,7 @@ "path": "vue/src/label/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "LabelMobile": { "path": "vue/src/label/src/mobile.vue", @@ -1473,9 +1260,7 @@ "path": "vue/src/layout/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "LayoutPc": { "path": "vue/src/layout/src/pc.vue", @@ -1486,17 +1271,13 @@ "path": "vue/src/link/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "LinkMenu": { "path": "vue/src/link-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "LinkMenuPc": { "path": "vue/src/link-menu/src/pc.vue", @@ -1512,19 +1293,13 @@ "path": "vue/src/list/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "Loading": { "path": "vue/src/loading/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "LoadingMobile": { "path": "vue/src/loading/src/mobile.vue", @@ -1550,25 +1325,19 @@ "path": "vue/src/locales/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "LogonUser": { "path": "vue/src/logon-user/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Logout": { "path": "vue/src/logout/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "LogoutPc": { "path": "vue/src/logout/src/pc.vue", @@ -1579,17 +1348,13 @@ "path": "vue/src/mask/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "Menu": { "path": "vue/src/menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "Message": { "path": "vue/src/message/index.ts", @@ -1600,9 +1365,7 @@ "path": "vue/src/milestone/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "MilestonePc": { "path": "vue/src/milestone/src/pc.vue", @@ -1613,27 +1376,19 @@ "path": "vue/src/mind-map/src/pc.vue", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "MiniPicker": { "path": "vue/src/mini-picker/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "Modal": { "path": "vue/src/modal/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "ModalMobile": { "path": "vue/src/modal/src/mobile.vue", @@ -1654,25 +1409,19 @@ "path": "vue/src/month-range/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "MonthTable": { "path": "vue/src/month-table/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "MultiSelect": { "path": "vue/src/multi-select/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "MultiSelectMobile": { "path": "vue/src/multi-select/src/mobile.vue", @@ -1683,17 +1432,13 @@ "path": "vue/src/nav-bar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "NavMenu": { "path": "vue/src/nav-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "NavMenuPc": { "path": "vue/src/nav-menu/src/pc.vue", @@ -1704,19 +1449,13 @@ "path": "vue/src/notify/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Numeric": { "path": "vue/src/numeric/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "NumericMobile": { "path": "vue/src/numeric/src/mobile.vue", @@ -1737,35 +1476,25 @@ "path": "vue/src/option/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "OptionGroup": { "path": "vue/src/option-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Pager": { "path": "vue/src/pager/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "PagerItem": { "path": "vue/src/pager-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "PagerItemMobileFirst": { "path": "vue/src/pager-item/src/mobile-first.vue", @@ -1791,9 +1520,7 @@ "path": "vue/src/panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "PanelPc": { "path": "vue/src/panel/src/pc.vue", @@ -1804,25 +1531,19 @@ "path": "vue/src/picker/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "PickerColumn": { "path": "vue/src/picker-column/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "PopUpload": { "path": "vue/src/pop-upload/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "PopUploadPc": { "path": "vue/src/pop-upload/src/pc.vue", @@ -1833,10 +1554,7 @@ "path": "vue/src/popconfirm/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "PopconfirmMobileFirst": { "path": "vue/src/popconfirm/src/mobile-first.vue", @@ -1852,9 +1570,7 @@ "path": "vue/src/popeditor/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "PopeditorPc": { "path": "vue/src/popeditor/src/pc.vue", @@ -1865,11 +1581,7 @@ "path": "vue/src/popover/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "PopoverMobile": { "path": "vue/src/popover/src/mobile.vue", @@ -1890,19 +1602,13 @@ "path": "vue/src/popup/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Progress": { "path": "vue/src/progress/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "ProgressMobile": { "path": "vue/src/progress/src/mobile.vue", @@ -1923,10 +1629,7 @@ "path": "vue/src/pull-refresh/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "PullRefreshMobile": { "path": "vue/src/pull-refresh/src/mobile.vue", @@ -1942,36 +1645,25 @@ "path": "vue/src/qr-code/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "QueryBuilder": { "path": "vue/src/query-builder/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Radio": { "path": "vue/src/radio/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "RadioButton": { "path": "vue/src/radio-button/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "RadioButtonMobileFirst": { "path": "vue/src/radio-button/src/mobile-first.vue", @@ -1987,10 +1679,7 @@ "path": "vue/src/radio-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "RadioGroupMobileFirst": { "path": "vue/src/radio-group/src/mobile-first.vue", @@ -2021,10 +1710,7 @@ "path": "vue/src/rate/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "RateMobileFirst": { "path": "vue/src/rate/src/mobile-first.vue", @@ -2040,9 +1726,7 @@ "path": "vue/src/record/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "RecordMobileFirst": { "path": "vue/src/record/src/mobile-first.vue", @@ -2053,9 +1737,7 @@ "path": "vue/src/recycle-scroller/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "RecycleScrollerPc": { "path": "vue/src/recycle-scroller/src/pc.vue", @@ -2066,17 +1748,13 @@ "path": "vue/src/rich-text-editor/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "River": { "path": "vue/src/river/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "RiverPc": { "path": "vue/src/river/src/pc.vue", @@ -2087,9 +1765,7 @@ "path": "vue/src/roles/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "RolesPc": { "path": "vue/src/roles/src/pc.vue", @@ -2100,9 +1776,7 @@ "path": "vue/src/row/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "RowPc": { "path": "vue/src/row/src/pc.vue", @@ -2113,9 +1787,7 @@ "path": "vue/src/scroll-text/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ScrollTextPc": { "path": "vue/src/scroll-text/src/pc.vue", @@ -2126,19 +1798,13 @@ "path": "vue/src/scrollbar/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Search": { "path": "vue/src/search/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "SearchMobile": { "path": "vue/src/search/src/mobile.vue", @@ -2159,17 +1825,13 @@ "path": "vue/src/select/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "SelectDropdown": { "path": "vue/src/select-dropdown/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "SelectDropdownPc": { "path": "vue/src/select-dropdown/src/pc.vue", @@ -2180,9 +1842,7 @@ "path": "vue/src/select-mobile/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "SelectPc": { "path": "vue/src/select/src/pc.vue", @@ -2193,18 +1853,13 @@ "path": "vue/src/select-view/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "SelectedBox": { "path": "vue/src/selected-box/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "SelectedBoxMobileFirst": { "path": "vue/src/selected-box/src/mobile-first.vue", @@ -2216,13 +1871,33 @@ "type": "template", "exclude": false }, + "Skeleton": { + "path": "vue/src/skeleton/index.ts", + "type": "component", + "exclude": false, + "mode": ["pc"] + }, + "SkeletonPc": { + "path": "vue/src/skeleton/src/pc.vue", + "type": "template", + "exclude": false + }, + "SkeletonItem": { + "path": "vue/src/skeleton-item/index.ts", + "type": "component", + "exclude": false, + "mode": ["pc"] + }, + "SkeletonItemPc": { + "path": "vue/src/skeleton-item/src/pc.vue", + "type": "template", + "exclude": false + }, "SlideBar": { "path": "vue/src/slide-bar/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "SlideBarPc": { "path": "vue/src/slide-bar/src/pc.vue", @@ -2233,27 +1908,19 @@ "path": "vue/src/slider/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "SliderButton": { "path": "vue/src/slider-button/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "SliderButtonGroup": { "path": "vue/src/slider-button-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "SliderButtonGroupMobileFirst": { "path": "vue/src/slider-button-group/src/mobile-first.vue", @@ -2284,9 +1951,7 @@ "path": "vue/src/split/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "SplitPc": { "path": "vue/src/split/src/pc.vue", @@ -2297,18 +1962,13 @@ "path": "vue/src/standard-list-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "Steps": { "path": "vue/src/steps/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "StepsMobileFirst": { "path": "vue/src/steps/src/mobile-first.vue", @@ -2324,19 +1984,13 @@ "path": "vue/src/svg-icon/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Switch": { "path": "vue/src/switch/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "SwitchMobile": { "path": "vue/src/switch/src/mobile.vue", @@ -2357,10 +2011,7 @@ "path": "vue/src/tab-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "TabItemMobileFirst": { "path": "vue/src/tab-item/src/mobile-first.vue", @@ -2376,19 +2027,13 @@ "path": "vue/src/tabbar/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "TabbarItem": { "path": "vue/src/tabbar-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile" - ] + "mode": ["mobile-first", "mobile"] }, "TabbarItemMobile": { "path": "vue/src/tabbar-item/src/mobile.vue", @@ -2414,10 +2059,7 @@ "path": "vue/src/table/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile", - "pc" - ] + "mode": ["mobile", "pc"] }, "TableMobile": { "path": "vue/src/table/src/mobile.vue", @@ -2433,11 +2075,7 @@ "path": "vue/src/tabs/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "TabsMobile": { "path": "vue/src/tabs/src/mobile.vue", @@ -2458,20 +2096,13 @@ "path": "vue/src/tag/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "TagGroup": { "path": "vue/src/tag-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "TagGroupMobileFirst": { "path": "vue/src/tag-group/src/mobile-first.vue", @@ -2502,9 +2133,7 @@ "path": "vue/src/text-popup/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TextPopupPc": { "path": "vue/src/text-popup/src/pc.vue", @@ -2515,19 +2144,13 @@ "path": "vue/src/time/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimeLine": { "path": "vue/src/time-line/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "TimeLineMobile": { "path": "vue/src/time-line/src/mobile.vue", @@ -2548,57 +2171,43 @@ "path": "vue/src/time-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimePicker": { "path": "vue/src/time-picker/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimePickerMobile": { "path": "vue/src/time-picker-mobile/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "TimeRange": { "path": "vue/src/time-range/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimeSelect": { "path": "vue/src/time-select/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimeSpinner": { "path": "vue/src/time-spinner/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimelineItem": { "path": "vue/src/timeline-item/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TimelineItemPc": { "path": "vue/src/timeline-item/src/pc.vue", @@ -2609,9 +2218,7 @@ "path": "vue/src/toast/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "ToastMobile": { "path": "vue/src/toast/src/mobile.vue", @@ -2622,9 +2229,7 @@ "path": "vue/src/toggle-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "ToggleMenuPc": { "path": "vue/src/toggle-menu/src/pc.vue", @@ -2635,10 +2240,7 @@ "path": "vue/src/tooltip/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "TooltipMobileFirst": { "path": "vue/src/tooltip/src/mobile-first.vue", @@ -2654,9 +2256,7 @@ "path": "vue/src/top-box/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TopBoxPc": { "path": "vue/src/top-box/src/pc.vue", @@ -2667,17 +2267,13 @@ "path": "vue/src/transfer/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TransferPanel": { "path": "vue/src/transfer-panel/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TransferPc": { "path": "vue/src/transfer/src/pc.vue", @@ -2688,17 +2284,13 @@ "path": "vue/src/tree/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TreeMenu": { "path": "vue/src/tree-menu/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "TreePc": { "path": "vue/src/tree/src/pc.vue", @@ -2709,19 +2301,13 @@ "path": "vue/src/upload/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "UploadDragger": { "path": "vue/src/upload-dragger/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "UploadDraggerMobileFirst": { "path": "vue/src/upload-dragger/src/mobile-first.vue", @@ -2737,10 +2323,7 @@ "path": "vue/src/upload-list/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "pc" - ] + "mode": ["mobile-first", "pc"] }, "UploadListMobileFirst": { "path": "vue/src/upload-list/src/mobile-first.vue", @@ -2766,17 +2349,13 @@ "path": "vue/src/user/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "UserAccount": { "path": "vue/src/user-account/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "UserAccountPc": { "path": "vue/src/user-account/src/pc.vue", @@ -2787,9 +2366,7 @@ "path": "vue/src/user-contact/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "UserContactPc": { "path": "vue/src/user-contact/src/pc.vue", @@ -2800,19 +2377,13 @@ "path": "vue/src/user-head/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first", - "mobile", - "pc" - ] + "mode": ["mobile-first", "mobile", "pc"] }, "UserHeadGroup": { "path": "vue/src/user-head-group/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile-first" - ] + "mode": ["mobile-first"] }, "UserHeadGroupMobileFirst": { "path": "vue/src/user-head-group/src/mobile-first.vue", @@ -2838,9 +2409,7 @@ "path": "vue/src/user-link/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "UserLinkPc": { "path": "vue/src/user-link/src/pc.vue", @@ -2856,25 +2425,19 @@ "path": "vue/src/watermark/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "Wheel": { "path": "vue/src/wheel/index.ts", "type": "component", "exclude": false, - "mode": [ - "mobile" - ] + "mode": ["mobile"] }, "Wizard": { "path": "vue/src/wizard/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "WizardPc": { "path": "vue/src/wizard/src/pc.vue", @@ -2885,16 +2448,12 @@ "path": "vue/src/year-range/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] }, "YearTable": { "path": "vue/src/year-table/index.ts", "type": "component", "exclude": false, - "mode": [ - "pc" - ] + "mode": ["pc"] } } diff --git a/packages/renderless/src/skeleton-item/vue.ts b/packages/renderless/src/skeleton-item/vue.ts new file mode 100644 index 000000000..9c2bbe72d --- /dev/null +++ b/packages/renderless/src/skeleton-item/vue.ts @@ -0,0 +1,14 @@ +import type { ISkeletonItemProps, ISharedRenderlessParamHooks, ISkeletonItemState, ISkeletonItemApi } from '@/types' + +export const api = ['state'] + +export const renderless = (props: ISkeletonItemProps, { reactive, inject }: ISharedRenderlessParamHooks) => { + const state: ISkeletonItemState = reactive({ + isActive: inject('active', false) + }) + + const api: ISkeletonItemApi = { + state + } + return api +} diff --git a/packages/renderless/src/skeleton/index.ts b/packages/renderless/src/skeleton/index.ts new file mode 100644 index 000000000..89cad526e --- /dev/null +++ b/packages/renderless/src/skeleton/index.ts @@ -0,0 +1,13 @@ +import { isNumber, isNull } from '../common/type' + +export const toPxStyle = (value: string | number): undefined | string => { + if (isNull(value)) { + return undefined + } + + if (isNumber(value)) { + return `${value}px` + } + + return String(value) +} diff --git a/packages/renderless/src/skeleton/vue.ts b/packages/renderless/src/skeleton/vue.ts new file mode 100644 index 000000000..75c964f55 --- /dev/null +++ b/packages/renderless/src/skeleton/vue.ts @@ -0,0 +1,14 @@ +import type { ISkeletonProps, ISkeletonApi, ISharedRenderlessParamHooks } from '@/types' +import { toPxStyle } from './index' + +export const api = ['toPxStyle'] + +export const renderless = (props: ISkeletonProps, { toRefs, provide }: ISharedRenderlessParamHooks): ISkeletonApi => { + const { active } = toRefs(props) + provide('active', active) + + const api = { + toPxStyle + } + return api +} diff --git a/packages/renderless/types/index.ts b/packages/renderless/types/index.ts index 43bbf8e1f..3a7881726 100644 --- a/packages/renderless/types/index.ts +++ b/packages/renderless/types/index.ts @@ -154,6 +154,8 @@ export * from './select-mobile.type' export * from './select-view.type' export * from './selected-box.type' export * from './shared.type' +export * from './skeleton.type' +export * from './skeleton-item.type' export * from './slide-bar.type' export * from './slider.type' export * from './slider-button.type' diff --git a/packages/renderless/types/skeleton-item.type.ts b/packages/renderless/types/skeleton-item.type.ts new file mode 100644 index 000000000..b87c9366a --- /dev/null +++ b/packages/renderless/types/skeleton-item.type.ts @@ -0,0 +1,14 @@ +import type { ExtractPropTypes } from 'vue' +import type { skeletonItemProps, $constants } from '@/skeleton-item/src' + +export type ISkeletonItemProps = ExtractPropTypes + +export type ISkeletonItemConstants = typeof $constants + +export interface ISkeletonItemState { + isActive: boolean +} + +export interface ISkeletonItemApi { + state: ISkeletonItemState +} diff --git a/packages/renderless/types/skeleton.type.ts b/packages/renderless/types/skeleton.type.ts new file mode 100644 index 000000000..2f65a542b --- /dev/null +++ b/packages/renderless/types/skeleton.type.ts @@ -0,0 +1,10 @@ +import type { ExtractPropTypes } from 'vue' +import type { skeletonProps, $constants } from '@/skeleton/src' + +export type ISkeletonProps = ExtractPropTypes + +export type ISkeletonConstants = typeof $constants + +export interface ISkeletonApi { + toPxStyle: (value: string | number) => string | undefined +} diff --git a/packages/theme/src/skeleton-item/index.less b/packages/theme/src/skeleton-item/index.less new file mode 100644 index 000000000..4495bf2cd --- /dev/null +++ b/packages/theme/src/skeleton-item/index.less @@ -0,0 +1,80 @@ +@import '../custom.less'; +@import './vars.less'; + +@skeleton-item-prefix-cls: ~'@{css-prefix}skeleton-item'; + +.@{skeleton-item-prefix-cls} { + .component-css-vars-skeleton-item(); + + &--active { + &.@{skeleton-item-prefix-cls} { + background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #f2f2f3; + background-size: 200% 100%; + background-position-x: 180%; + animation: 2s skeleton-loading ease-in-out infinite; + } + } + + background-color: var(--ti-skeleton-item-bg-color); + border-radius: var(--ti-skeleton-item-border-radius); + + &--square { + width: 100%; + height: var(--ti-skeleton-item-square-height); + } + + &--circle { + border-radius: var(--ti-skeleton-item-circle-border-radius); + &.@{skeleton-item-prefix-cls} { + &--small { + width: var(--ti-skeleton-item-circle-small-size); + height: var(--ti-skeleton-item-circle-small-size); + } + + &--medium { + width: var(--ti-skeleton-item-circle-medium-size); + height: var(--ti-skeleton-item-circle-medium-size); + } + + &--large { + width: var(--ti-skeleton-item-circle-large-size); + height: var(--ti-skeleton-item-circle-large-size); + } + } + } + + &--image { + display: flex; + justify-content: center; + align-items: center; + + svg { + width: 40%; + height: 40%; + fill: var(--ti-skeleton-item-image-icon-color); + } + + &.@{skeleton-item-prefix-cls} { + &--small { + width: var(--ti-skeleton-item-image-small-size-width); + height: var(--ti-skeleton-item-image-small-size-height); + } + + &--medium { + width: var(--ti-skeleton-item-image-medium-size-width); + height: var(--ti-skeleton-item-image-medium-size-height); + } + + &--large { + width: var(--ti-skeleton-item-image-large-size-width); + height: var(--ti-skeleton-item-image-large-size-height); + } + } + } +} + +@keyframes skeleton-loading { + to { + background-position-x: -20%; + } +} diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less new file mode 100644 index 000000000..935e91b6b --- /dev/null +++ b/packages/theme/src/skeleton-item/vars.less @@ -0,0 +1,16 @@ +.component-css-vars-skeleton-item() { + --ti-skeleton-item-bg-color: var(--ti-base-color-bg-5, #f5f5f6); + --ti-skeleton-item-border-radius: var(--ti-common-border-radius-1, 4px); + --ti-skeleton-item-image-icon-color: var(--ti-base-color-common-2, #adb0b8); + --ti-skeleton-item-square-height: var(--ti-common-size-4x, 16px); + --ti-skeleton-item-circle-border-radius: var(--ti-common-border-radius-3, 50%); + --ti-skeleton-item-circle-large-size: var(--ti-common-size-15x, 60px); + --ti-skeleton-item-circle-medium-size: var(--ti-common-size-10x, 40px); + --ti-skeleton-item-circle-small-size: var(--ti-common-size-5x, 20px); + --ti-skeleton-item-image-small-size-height: var(--ti-common-size-15x, 60px); + --ti-skeleton-item-image-small-size-width: var(--ti-common-size-15x, 60px); + --ti-skeleton-item-image-medium-size-height: var(--ti-common-size-25x, 100px); + --ti-skeleton-item-image-medium-size-width: var(--ti-common-size-25x, 100px); + --ti-skeleton-item-image-large-size-height: var(--ti-common-size-50x, 200px); + --ti-skeleton-item-image-large-size-width: var(--ti-common-size-50x, 200px); +} diff --git a/packages/theme/src/skeleton/index.less b/packages/theme/src/skeleton/index.less new file mode 100644 index 000000000..139296ead --- /dev/null +++ b/packages/theme/src/skeleton/index.less @@ -0,0 +1,42 @@ +@import '../custom.less'; +@import './vars.less'; + +@skeleton-item-prefix-cls: ~'@{css-prefix}skeleton'; + +.@{skeleton-item-prefix-cls} { + .component-css-vars-skeleton(); + + width: 100%; + + &__article { + display: flex; + width: 100%; + } + + &__avatar { + position: relative; + overflow: hidden; + flex-shrink: 0; + width: var(--ti-skeleton-avatar-size); + height: var(--ti-skeleton-avatar-size); + margin-right: var(--ti-skeleton-avatar-margin-right); + } + + &__section { + width: 100%; + } + + &-item__title { + width: var(--ti-skeleton-title-width); + margin-bottom: var(--ti-skeleton-title-margin-bottom); + } + + &-item--square { + margin-bottom: var(--ti-skeleton-row-margin-bottom); + + &:last-child { + width: var(--ti-skeleton-last-row-width); + margin-bottom: 0; + } + } +} diff --git a/packages/theme/src/skeleton/vars.less b/packages/theme/src/skeleton/vars.less new file mode 100644 index 000000000..2a3e41136 --- /dev/null +++ b/packages/theme/src/skeleton/vars.less @@ -0,0 +1,9 @@ +.component-css-vars-skeleton() { + --ti-skeleton-avatar-size: var(--ti-common-size-10x, 40px); + --ti-skeleton-avatar-background-color: var(--ti-common-color-bg-disabled, #f5f5f6); + --ti-skeleton-avatar-margin-right: var(--ti-common-space-4x, 16px); + --ti-skeleton-title-margin-bottom: var(--ti-common-space-4x, 16px); + --ti-skeleton-title-width: 40%; + --ti-skeleton-row-margin-bottom: var(--ti-common-space-3x, 12px); + --ti-skeleton-last-row-width: 60%; +} diff --git a/packages/vue/package.json b/packages/vue/package.json index 305e30b4b..62b9500ca 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -204,6 +204,8 @@ "@opentiny/vue-select-mobile": "workspace:~", "@opentiny/vue-select-view": "workspace:~", "@opentiny/vue-selected-box": "workspace:~", + "@opentiny/vue-skeleton": "workspace:~", + "@opentiny/vue-skeleton-item": "workspace:~", "@opentiny/vue-slide-bar": "workspace:~", "@opentiny/vue-slider": "workspace:~", "@opentiny/vue-slider-button": "workspace:~", diff --git a/packages/vue/src/skeleton-item/__tests__/skeleton-item.test.tsx b/packages/vue/src/skeleton-item/__tests__/skeleton-item.test.tsx new file mode 100644 index 000000000..a2dece401 --- /dev/null +++ b/packages/vue/src/skeleton-item/__tests__/skeleton-item.test.tsx @@ -0,0 +1,20 @@ +import { mountPcMode } from '@opentiny-internal/vue-test-utils' +import { test, describe, expect } from 'vitest' +import SkeletonItem from '@opentiny/vue-skeleton-item' +import { nextTick } from 'vue' + +describe('PC Mode', () => { + const mount = mountPcMode + + test('variant', async () => { + const wrapper = mount(() => ) + await nextTick() + expect(wrapper.classes()).toContain('tiny-skeleton-item--circle') + }) + + test('size', async () => { + const wrapper = mount(() => ) + await nextTick() + expect(wrapper.classes()).toContain('tiny-skeleton-item--small') + }) +}) diff --git a/packages/vue/src/skeleton-item/index.ts b/packages/vue/src/skeleton-item/index.ts new file mode 100644 index 000000000..9c9cce6f1 --- /dev/null +++ b/packages/vue/src/skeleton-item/index.ts @@ -0,0 +1,24 @@ +import SkeletonItem from './src/index' +import '@opentiny/vue-theme/skeleton-item/index.less' +import { version } from './package.json' + +SkeletonItem.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +SkeletonItem.install = function (Vue) { + Vue.component(SkeletonItem.name, SkeletonItem) +} + +SkeletonItem.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + SkeletonItem.install(window.Vue) + } +} + +export default SkeletonItem diff --git a/packages/vue/src/skeleton-item/package.json b/packages/vue/src/skeleton-item/package.json new file mode 100644 index 000000000..11e384b78 --- /dev/null +++ b/packages/vue/src/skeleton-item/package.json @@ -0,0 +1,19 @@ +{ + "name": "@opentiny/vue-skeleton-item", + "version": "3.13.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "type": "module", + "dependencies": { + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-theme": "workspace:~", + "@opentiny/vue-common": "workspace:~" + }, + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "^0.31.0" + }, + "license": "MIT" +} diff --git a/packages/vue/src/skeleton-item/src/index.ts b/packages/vue/src/skeleton-item/src/index.ts new file mode 100644 index 000000000..4c61e424f --- /dev/null +++ b/packages/vue/src/skeleton-item/src/index.ts @@ -0,0 +1,34 @@ +import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common' +import type { PropType } from '@opentiny/vue-common' + +import template from 'virtual-template?pc' + +export type VariantType = 'image' | 'circle' | 'square' +export type SizeType = 'large' | 'medium' | 'small' + +const $constants = {} + +export const skeletonItemProps = { + ...$props, + _constants: { + type: Object, + default: () => $constants + }, + modelValue: String, + variant: { + type: String as PropType, + default: 'square' + }, + size: { + type: String as PropType, + default: 'medium' + } +} + +export default defineComponent({ + name: $prefix + 'SkeletonItem', + props: skeletonItemProps, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/skeleton-item/src/pc.vue b/packages/vue/src/skeleton-item/src/pc.vue new file mode 100644 index 000000000..ac7639674 --- /dev/null +++ b/packages/vue/src/skeleton-item/src/pc.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/vue/src/skeleton/__tests__/skeleton.test.tsx b/packages/vue/src/skeleton/__tests__/skeleton.test.tsx new file mode 100644 index 000000000..c99bc02ff --- /dev/null +++ b/packages/vue/src/skeleton/__tests__/skeleton.test.tsx @@ -0,0 +1,65 @@ +import { mountPcMode } from '@opentiny-internal/vue-test-utils' +import { test, describe, expect } from 'vitest' +import Skeleton from '@opentiny/vue-skeleton' +import { nextTick } from 'vue' + +describe('PC Mode', () => { + const mount = mountPcMode + + test('base usage', () => { + const wrapper = mount(() => ) + expect(wrapper.exists()).toBe(true) + }) + + test('active', async () => { + const wrapper = mount(() => ) + await nextTick() + expect(wrapper.find('.tiny-skeleton-item').classes()).toContain('tiny-skeleton-item--active') + }) + + test('loading & rows', async () => { + const wrapper = mount(() => ) + await nextTick() + expect(wrapper.find('.tiny-skeleton').exists()).toBe(true) + expect(wrapper.findAll('.tiny-skeleton-item').length).toBe(4) + }) + + test('slot', async () => { + const wrapper = mount(() => ( +
加载中
+ }}> + )) + await nextTick() + expect(wrapper.find('.tiny-placeholder').exists()).toBe(true) + }) + + test('avatar', async () => { + const wrapper = mount(() => ) + await nextTick() + expect(wrapper.find('.tiny-skeleton__avatar').exists()).toBe(true) + }) + + test('rows-width', async () => { + const widths = ['200px', '100px', '50px'] + const wrapper = mount(, { + props: { + 'rows-width': widths + } + }) + await nextTick() + const skeletonItems = wrapper.findAll('.tiny-skeleton-item') + + expect(skeletonItems).toHaveLength(4) + + skeletonItems.shift() + + skeletonItems.forEach((item, index) => { + const computedStyles = getComputedStyle(item.element) + const width = computedStyles.width + + expect(width).toBe(widths[index]) + }) + }) +}) diff --git a/packages/vue/src/skeleton/index.ts b/packages/vue/src/skeleton/index.ts new file mode 100644 index 000000000..e071e3213 --- /dev/null +++ b/packages/vue/src/skeleton/index.ts @@ -0,0 +1,24 @@ +import Skeleton from './src/index' +import '@opentiny/vue-theme/skeleton/index.less' +import { version } from './package.json' + +Skeleton.model = { + prop: 'modelValue', + event: 'update:modelValue' +} + +/* istanbul ignore next */ +Skeleton.install = function (Vue) { + Vue.component(Skeleton.name, Skeleton) +} + +Skeleton.version = version + +/* istanbul ignore next */ +if (process.env.BUILD_TARGET === 'runtime') { + if (typeof window !== 'undefined' && window.Vue) { + Skeleton.install(window.Vue) + } +} + +export default Skeleton diff --git a/packages/vue/src/skeleton/package.json b/packages/vue/src/skeleton/package.json new file mode 100644 index 000000000..621e72ea3 --- /dev/null +++ b/packages/vue/src/skeleton/package.json @@ -0,0 +1,20 @@ +{ + "name": "@opentiny/vue-skeleton", + "version": "3.13.0", + "description": "", + "main": "lib/index.js", + "module": "index.ts", + "sideEffects": false, + "type": "module", + "dependencies": { + "@opentiny/vue-common": "workspace:~", + "@opentiny/vue-renderless": "workspace:~", + "@opentiny/vue-theme": "workspace:~", + "@opentiny/vue-skeleton-item": "workspace:~" + }, + "license": "MIT", + "devDependencies": { + "@opentiny-internal/vue-test-utils": "workspace:*", + "vitest": "0.31.0" + } +} diff --git a/packages/vue/src/skeleton/src/index.ts b/packages/vue/src/skeleton/src/index.ts new file mode 100644 index 000000000..ed3205af4 --- /dev/null +++ b/packages/vue/src/skeleton/src/index.ts @@ -0,0 +1,42 @@ +import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common' +import type { PropType } from '@opentiny/vue-common' +import template from 'virtual-template?pc' + +const $constants = {} + +export const skeletonProps = { + ...$props, + _constants: { + type: Object, + default: () => $constants + }, + modelValue: String, + loading: { + type: Boolean, + default: true + }, + rows: { + type: Number, + default: 3 + }, + avatar: { + type: Boolean, + default: false + }, + rowsWidth: { + type: Array as PropType<(string | number)[]>, + default: () => [] + }, + active: { + type: Boolean, + default: true + } +} + +export default defineComponent({ + name: $prefix + 'Skeleton', + props: skeletonProps, + setup(props, context) { + return $setup({ props, context, template }) + } +}) diff --git a/packages/vue/src/skeleton/src/pc.vue b/packages/vue/src/skeleton/src/pc.vue new file mode 100644 index 000000000..75de9ff94 --- /dev/null +++ b/packages/vue/src/skeleton/src/pc.vue @@ -0,0 +1,39 @@ + + +