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 @@ + + +