feat(skeleton): skeleton component

Author: mengqiuleo

examples/sites/demos/pc/app/skeleton/base-composition-api.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <tiny-skeleton></tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton } from '@opentiny/vue'
+</script>

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)
+})

examples/sites/demos/pc/app/skeleton/base.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <tiny-skeleton></tiny-skeleton>
+  </div>
+</template>
+
+<script>
+import { Skeleton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton
+  }
+}
+</script>

examples/sites/demos/pc/app/skeleton/complex-demo-composition-api.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <tiny-skeleton avatar></tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton } from '@opentiny/vue'
+</script>

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)
+})

examples/sites/demos/pc/app/skeleton/complex-demo.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <tiny-skeleton avatar></tiny-skeleton>
+  </div>
+</template>
+
+<script>
+import { Skeleton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton
+  }
+}
+</script>

examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
+        <br /><br />
+        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+</script>

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')
+})

examples/sites/demos/pc/app/skeleton/custom-layout.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
+        <br /><br />
+        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script>
+import { Skeleton, SkeletonItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton,
+    TinySkeletonItem: SkeletonItem
+  }
+}
+</script>

examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <tiny-skeleton :rows="5" :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton } from '@opentiny/vue'
+</script>