组件(骨架屏): 支持尺寸

docs/.vitepress/config.js

@@ -155,7 +155,7 @@ export default {
                         {text: 'Ellipsis', link: 'layout/ellipsis', icon: '/components/layout/ellipsis.svg', version: '2024.1.2'},
                         {text: 'Avatar', link: 'layout/avatar', icon: '/components/layout/avatar.svg', version: '2024.1.2'},
                         {text: 'Space', link: 'layout/space', icon: '/components/layout/space.svg', version: '2024.1.2'},
-                        {text: 'Skeleton', link: 'layout/skeleton', icon: '/components/layout/skeleton.svg', version: '2024.1.2'},
+                        {text: '骨架屏 (Skeleton)', link: 'layout/skeleton', icon: '/components/layout/skeleton.svg', version: '2024.1.2'},
                         {text: 'Layout', link: 'layout/layout', icon: '/components/layout/layout.svg', version: '2024.1.2'},
                         {text: 'Collapse', link: 'layout/collapse', icon: '/components/layout/collapse.svg', version: '2024.2.0'},
                         {text: 'Global Footer', link: 'layout/global-footer', icon: '/components/layout/global-footer.svg', version: '2024.2.0'},

docs/components/layout/skeleton.md

@@ -1,10 +1,12 @@
 ---
-title: Shadcn Skeleton
+title: 骨架屏 (Skeleton)
 ---
 
 # 介绍
 
-This document is mainly used to describe some features and usage of the ShadcnSkeleton component.
+<br />
+
+本文档主要用于描述 `ShadcnSkeleton` 组件的一些特性和用法。
 
 ## 用法
 
@@ -25,9 +27,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Animation
+## 动画 (animation)
 
-<CodeRunner title="Animation">
+<CodeRunner title="动画 (animation)">
     <ShadcnSkeleton animation />
 </CodeRunner>
 
@@ -44,9 +46,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Paragraph
+## 排版 (paragraph)
 
-<CodeRunner title="Title">
+<CodeRunner title="排版 (paragraph)">
     <ShadcnSkeleton :paragraph=" { rows: 5, width: [100, 200, '300px', '50%', '62%'] }"/>
 </CodeRunner>
 
@@ -63,9 +65,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Item Type
+## 类型 (type)
 
-<CodeRunner title="Item Type">
+<CodeRunner title="类型 (type)">
     <ShadcnSpace>
         <ShadcnSkeletonItem animation type="circle"/>
         <ShadcnSkeletonItem animation type="square"/>
@@ -91,9 +93,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Item Size
+## 尺寸 (size)
 
-<CodeRunner title="Item Size">
+<CodeRunner title="尺寸 (size)">
     <ShadcnSpace>
         <ShadcnSkeletonItem animation type="image" size="small"/>
         <ShadcnSkeletonItem animation type="image" size="default"/>
@@ -116,35 +118,35 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## API Attributes
+## 骨架屏 (Skeleton) 属性
 
-<ApiTable title="Skeleton Props"
-    :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
+<ApiTable title="骨架屏 (Skeleton) 属性"
+    :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['rows', 'The rows of the skeleton', 'Number | String', '4', '-', '-'],
-        ['cols', 'The columns of the skeleton', 'Number | String', '1', '-', '-'],
-        ['animation', 'Whether to use animation', 'Boolean', 'false', '-', '-'],
-        ['paragraph', 'The paragraph of the skeleton', '{ rows: 5, width: \[100, 200, 300px, 50%, 62%\] }', '-', '-', '-'],
+        ['rows', '骨架的行数', 'number | string', '4'],
+        ['cols', '骨架的列数', 'number | string', '1'],
+        ['animation', '是否显示动画', 'boolean', 'false'],
+        ['paragraph', '骨架的排版', '{ rows: 5, width: \[100, 200, 300px, 50%, 62%\] }', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 骨架屏节点 (Skeleton Item) 属性
 
-<ApiTable title="Skeleton Item Props"
-    :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
+<ApiTable title="骨架屏节点 (Skeleton Item) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
     :columns="[
-        ['animation', 'Whether to use animation', 'Boolean', 'false', '-', '-'],
-        ['width', 'The width of the skeleton item', 'Number | String', '-', '-', '-'],
-        ['type', 'The type of the skeleton item', 'Enum', 'rect', '-', 'circle | square | rect | image'],
-        ['size', 'The size of the skeleton item', 'Enum', 'default', '-', 'small | default | large'],
+        ['animation', '是否显示动画', 'Boolean', 'false', '-'],
+        ['width', '节点的宽度', 'Number | String', '-', '-'],
+        ['type', '节点的类型', 'Enum', 'rect', 'circle | square | rect | image'],
+        ['size', '节点的尺寸', 'Enum', 'default', 'small | default | large'],
     ]">
 </ApiTable>
 
-<br />
+## 骨架屏 (Skeleton) 插槽
 
-<ApiTable title="Skeleton Slots"
+<ApiTable title="骨架屏 (Skeleton) 插槽"
     :headers="['插槽', '描述']" 
     :columns="[
-        ['template', 'Skeleton template slot'],
+        ['template', '骨架的模板'],
     ]">
-</ApiTable>
+</ApiTable>

packages/index.ts

@@ -35,8 +35,7 @@ import ShadcnSelectGroup from '@/ui/select/group'
 import ShadcnRate from '@/ui/rate'
 import ShadcnTab from '@/ui/tab'
 import ShadcnTabItem from '@/ui/tab/item'
-import ShadcnSkeleton from '@/ui/skeleton'
-import ShadcnSkeletonItem from '@/ui/skeleton/item'
+import { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
 import ShadcnLayout from '@/ui/layout'
 import ShadcnLayoutHeader from '@/ui/layout/header'
 import ShadcnLayoutContent from '@/ui/layout/content'
@@ -133,8 +132,7 @@ let components = [
     ShadcnRate,
     ShadcnTab,
     ShadcnTabItem,
-    ShadcnSkeleton,
-    ShadcnSkeletonItem,
+    ShadcnSkeleton, ShadcnSkeletonItem,
     ShadcnLayout,
     ShadcnLayoutHeader,
     ShadcnLayoutContent,
@@ -266,8 +264,7 @@ export { default as ShadcnSelectGroup } from '@/ui/select/group'
 export { default as ShadcnRate } from '@/ui/rate'
 export { default as ShadcnTab } from '@/ui/tab'
 export { default as ShadcnTabItem } from '@/ui/tab/item'
-export { default as ShadcnSkeleton } from '@/ui/skeleton'
-export { default as ShadcnSkeletonItem } from '@/ui/skeleton/item'
+export { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
 export { default as ShadcnLayout } from '@/ui/layout'
 export { default as ShadcnLayoutHeader } from '@/ui/layout/header'
 export { default as ShadcnLayoutContent } from '@/ui/layout/content'

src/App.vue

@@ -1,18 +1,13 @@
 <template>
   <div class="p-32 space-y-7 space-x-4">
     <div class="p-2 flex flex-col space-y-4 min-h-60 space-x-6 overflow-x-auto">
-      <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" loading />
+      <ShadcnSkeletonItem animation type="circle"/>
+      <ShadcnSkeletonItem animation type="square"/>
+      <ShadcnSkeletonItem animation type="rect"/>
+      <ShadcnSkeletonItem animation type="image"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-const defaultSelect = ref(null)
-const defaultSelectOptions = [
-  { label: 'Vue', value: 'Vue' },
-  { label: 'Nuxt', value: 'Nuxt', disabled: true },
-  { label: 'Svelte', value: 'Svelte' }
-]
 </script>

src/ui/common/size.ts

@@ -1,3 +1,10 @@
+export enum BaseSize
+{
+    default = 'h-8',
+    small = 'h-6',
+    large = 'h-10'
+}
+
 export enum Size
 {
     default = 'h-8',
@@ -34,9 +41,10 @@ export enum TabSize
 
 export enum SkeletonSize
 {
-    default = 'h-10 w-10',
-    small = 'h-8 w-8',
-    large = 'h-16 w-16'
+    mini = 'h-4',
+    default = BaseSize.default,
+    small = BaseSize.small,
+    large = BaseSize.large
 }
 
 export enum ButtonSize

src/ui/select/ShadcnSelect.vue

@@ -4,7 +4,7 @@
                   border && 'border border-gray-200',
                   MinSize[size]
          ]">
-      <ShadcnSkeleton animation :rows="1" class="w-full"/>
+      <ShadcnSkeleton animation :rows="1" :size="size" class="w-full"/>
     </div>
     <div v-else :class="['flex rounded-md px-2 relative',
                   border && 'border border-gray-200 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
@@ -89,7 +89,7 @@ import { MinSize, PtPbSize } from '@/ui/common/size.ts'
 import { HoverType } from '@/ui/common/type.ts'
 import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
 import { generateRandomId } from '@/utils/common.ts'
-import ShadcnSkeleton from '@/ui/skeleton'
+import { ShadcnSkeleton } from '@/ui/skeleton'
 
 const emit = defineEmits<SelectEmits>()
 

src/ui/skeleton/ShadcnSkeleton.vue

@@ -4,24 +4,22 @@
       <ShadcnSkeletonItem v-for="(width, index) in itemWidths"
                           :key="index"
                           :width="width"
+                          :size="size"
                           :animation="animation"/>
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import ShadcnSkeletonItem from '@/ui/skeleton/item'
+import ShadcnSkeletonItem from './ShadcnSkeletonItem.vue'
+import { SkeletonProps } from './types'
 
-const props = withDefaults(defineProps<{
-  cols?: number | string
-  rows?: number | string
-  animation?: boolean
-  paragraph?: { rows: number, width: (number | string)[] }
-}>(), {
+const props = withDefaults(defineProps<SkeletonProps>(), {
   cols: 1,
   rows: 4,
-  animation: false
+  animation: false,
+  size: 'mini'
 })
 
 const addPxIfNumber = (value: number | string): string => {
@@ -39,4 +37,4 @@ const itemWidths = computed(() => {
                 .map(() => (props.cols === 1 ? '100%' : `${ 100 / Number(props.cols) }%`))
   }
 })
-</script>
+</script>

src/ui/skeleton/item/ShadcnSkeletonItem.vue → src/ui/skeleton/ShadcnSkeletonItem.vue

@@ -19,15 +19,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SkeletonType } from '@/ui/common/type.ts'
 import { SkeletonSize } from '@/ui/common/size.ts'
+import { SkeletonItemProps } from '@/ui/skeleton/types.ts'
 
-const props = withDefaults(defineProps<{
-  animation?: boolean
-  width?: string
-  type?: keyof typeof SkeletonType
-  size?: keyof typeof SkeletonSize
-}>(), {
+const props = withDefaults(defineProps<SkeletonItemProps>(), {
   animation: false,
   type: 'rect',
   size: 'default'
@@ -36,21 +31,17 @@ const props = withDefaults(defineProps<{
 const skeletonShapeClass = computed(() => {
   switch (props.type) {
     case 'circle':
-      return 'rounded-full aspect-square'
+      return `rounded-full aspect-square ${ SkeletonSize[props.size] }`
     case 'square':
-      return 'rounded aspect-square'
+      return `rounded aspect-square ${ SkeletonSize[props.size] }`
     case 'rect':
-      return `rounded w-full h-8`
+      return `rounded w-full ${ SkeletonSize[props.size] }`
     case 'image':
       return `rounded-md ${ SkeletonSize[props.size] }`
   }
 })
 
 const skeletonClass = computed(() => {
-  // type 为 rect 时强制设置宽度为 w-full
-  if (props.type === 'rect') {
-    return 'w-full'
-  }
   return SkeletonSize[props.size] || SkeletonSize.default
 })
-</script>
+</script>

src/ui/skeleton/index.ts

@@ -1,3 +1,2 @@
-import ShadcnSkeleton from './ShadcnSkeleton.vue'
-
-export default ShadcnSkeleton
+export { default as ShadcnSkeleton } from './ShadcnSkeleton.vue'
+export { default as ShadcnSkeletonItem } from './ShadcnSkeletonItem.vue'

src/ui/skeleton/types.ts

@@ -0,0 +1,19 @@
+import { SkeletonType } from '@/ui/common/type.ts'
+import { SkeletonSize } from '@/ui/common/size.ts'
+
+export interface SkeletonProps
+{
+    cols?: number | string
+    rows?: number | string
+    animation?: boolean
+    size?: keyof typeof SkeletonSize
+    paragraph?: { rows: number, width: (number | string)[] }
+}
+
+export interface SkeletonItemProps
+{
+    animation?: boolean
+    width?: string
+    type?: keyof typeof SkeletonType
+    size?: keyof typeof SkeletonSize
+}