refactor(skeleton): move to script setup (#3007)

src/config.json

@@ -729,6 +729,7 @@
           "name": "Skeleton",
           "cName": "骨架屏",
           "desc": "骨架屏",
+          "setup": true,
           "author": "liqiong"
         },
         {

src/packages/__VUE/backtop/doc.en-US.md

@@ -56,8 +56,11 @@ app.use(Backtop)
 
 The component exports the following type definitions:
 
-```ts
-import type { BacktopProps, BacktopInstance } from '@nutui/nutui'
+```js
+import type {
+  BacktopProps,
+  BacktopInstance
+} from '@nutui/nutui'
 ```
 
 ## Theming

src/packages/__VUE/backtop/doc.md

@@ -56,8 +56,11 @@ app.use(Backtop)
 
 组件导出以下类型定义：
 
-```ts
-import type { BacktopProps, BacktopInstance } from '@nutui/nutui'
+```js
+import type {
+  BacktopProps,
+  BacktopInstance
+} from '@nutui/nutui'
 ```
 
 ## 主题定制

src/packages/__VUE/backtop/doc.taro.md

@@ -47,8 +47,11 @@ app.use(Backtop)
 
 组件导出以下类型定义：
 
-```ts
-import type { BacktopProps, BacktopInstance } from '@nutui/nutui-taro'
+```js
+import type {
+  BacktopProps,
+  BacktopInstance
+} from '@nutui/nutui-taro'
 ```
 
 ## 主题定制

src/packages/__VUE/empty/doc.en-US.md

@@ -52,8 +52,12 @@ app.use(Empty)
 
 The component exports the following type definitions:
 
-```ts
-import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui'
+```js
+import type {
+  EmptyImage,
+  EmptyProps,
+  EmptyInstance
+} from '@nutui/nutui'
 ```
 
 ## Theming

src/packages/__VUE/empty/doc.md

@@ -52,8 +52,12 @@ app.use(Empty)
 
 组件导出以下类型定义：
 
-```ts
-import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui'
+```js
+import type {
+  EmptyImage,
+  EmptyProps,
+  EmptyInstance
+} from '@nutui/nutui'
 ```
 
 ## 主题定制

src/packages/__VUE/empty/doc.taro.md

@@ -52,8 +52,12 @@ app.use(Empty)
 
 组件导出以下类型定义：
 
-```ts
-import type { EmptyImage, EmptyProps, EmptyInstance } from '@nutui/nutui-taro'
+```js
+import type {
+  EmptyImage,
+  EmptyProps,
+  EmptyInstance
+} from '@nutui/nutui-taro'
 ```
 
 ## 主题定制

src/packages/__VUE/indicator/doc.en-US.md

@@ -42,8 +42,12 @@ app.use(Indicator)
 
 The component exports the following type definitions:
 
-```ts
-import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui'
+```js
+import type {
+  IndicatorAlign,
+  IndicatorProps,
+  IndicatorInstance
+} from '@nutui/nutui'
 ```
 
 ## Theming

src/packages/__VUE/indicator/doc.md

@@ -42,8 +42,12 @@ app.use(Indicator)
 
 组件导出以下类型定义：
 
-```ts
-import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui'
+```js
+import type {
+  IndicatorAlign,
+  IndicatorProps,
+  IndicatorInstance
+} from '@nutui/nutui'
 ```
 
 ## 主题定制

src/packages/__VUE/indicator/doc.taro.md

@@ -42,8 +42,12 @@ app.use(Indicator)
 
 组件导出以下类型定义：
 
-```ts
-import type { IndicatorAlign, IndicatorProps, IndicatorInstance } from '@nutui/nutui-taro'
+```js
+import type {
+  IndicatorAlign,
+  IndicatorProps,
+  IndicatorInstance
+} from '@nutui/nutui-taro'
 ```
 
 ## 主题定制

src/packages/__VUE/skeleton/__tests__/__snapshots__/skeleton.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton: should change avatar shape when using avatarShape prop 1`] = `"<view style="width: 50px; height: 50px; background-color: #eee; color: #666;" class="nut-avatar nut-avatar-normal nut-avatar-square avatarClass avatarClass--square"></view>"`;

src/packages/__VUE/skeleton/__tests__/skeleton.spec.tsx

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { Skeleton } from '@nutui/nutui'
+
+test('Skeleton: should render with row‘s father content width correctly', () => {
+  const wrapper = mount(() => {
+    return <Skeleton width="100px" />
+  })
+  const skeleton = wrapper.find('.nut-skeleton-content__line')
+  expect(skeleton.attributes('style')).includes('width: 100px')
+})
+
+test('Skeleton: should allow to disable animation', async () => {
+  const wrapper = mount(() => {
+    return <Skeleton row={1} />
+  })
+
+  expect(wrapper.find('.nut-skeleton').exists()).toBeTruthy()
+
+  await wrapper.setProps({ animated: false })
+  expect(wrapper.find('.skeleton-animation').exists()).toBeFalsy()
+})
+
+test('Skeleton: should change avatar size when using avatarSize prop', () => {
+  const wrapper = mount(() => {
+    return <Skeleton avatar avatarSize="20px" />
+  })
+
+  const avatar = wrapper.find('.avatarClass')
+  expect(avatar.attributes('style')).includes('width: 20px')
+  expect(avatar.attributes('style')).includes('height: 20px')
+})
+
+test('Skeleton: should change avatar shape when using avatarShape prop', () => {
+  const wrapper = mount(() => {
+    return <Skeleton avatar avatarShape="square" />
+  })
+  expect(wrapper.find('.avatarClass').html()).toMatchSnapshot()
+})
+
+test('Skeleton: should be round when using round prop', () => {
+  const wrapper = mount(() => {
+    return <Skeleton title round avatar />
+  })
+  expect(wrapper.find('.avatarClass').exists()).toBeTruthy()
+})
+
+test('Skeleton: should render default slot', () => {
+  const wrapper = mount(() => {
+    return (
+      <Skeleton loading={false}>
+        content
+      </Skeleton>
+    )
+  })
+  expect(wrapper.html()).includes('content')
+})
+
+test('Skeleton: should render correctly when title uses false', () => {
+  const wrapper = mount(() => {
+    return <Skeleton title={false} row={1} />
+  })
+  const content = wrapper.find('.nut-skeleton-content__line')
+
+  expect(content.find('.nut-skeleton-blockTitle').exists()).toBeFalsy()
+  expect(content.findAll('.nut-skeleton-blockLine').length).toBe(1)
+})

src/packages/__VUE/skeleton/doc.en-US.md

@@ -61,6 +61,17 @@ app.use(Skeleton)
 | --- | --- |
 | default | Skeleton screen display content |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  SkeletonProps,
+  SkeletonInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/skeleton/doc.md

@@ -61,6 +61,17 @@ app.use(Skeleton)
 | --- | --- |
 | default | 骨架屏显示内容 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  SkeletonProps,
+  SkeletonInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/skeleton/doc.taro.md

@@ -61,6 +61,17 @@ app.use(Skeleton)
 | --- | --- |
 | default | 骨架屏显示内容 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  SkeletonProps,
+  SkeletonInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/skeleton/index.taro.ts

@@ -0,0 +1,11 @@
+import Skeleton from './skeleton.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Skeleton)
+
+export type { SkeletonProps } from './skeleton.taro.vue'
+
+export type SkeletonInstance = ComponentPublicInstance & InstanceType<typeof Skeleton>
+
+export { Skeleton, Skeleton as default }