docs: added skeleton document document

components/Skeleton/__test__/skeleton.spec.ts

@@ -138,19 +138,19 @@ describe('Test: KSkeleton', () => {
 			target: host
 		});
 		expect(instance).toBeTruthy();
-		expect(host!.innerHTML.includes('k-skeleton-avatar--sm')).toBeTruthy();
+		expect(host!.innerHTML.includes('k-skeleton-avatar-sk--sm')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-avatar-container--sm')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-title--sm')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-content--sm')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-paragraph--sm')).toBeTruthy();
 
-		expect(host!.innerHTML.includes('k-skeleton-avatar--md')).toBeTruthy();
+		expect(host!.innerHTML.includes('k-skeleton-avatar-sk--md')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-avatar-container--md')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-title--md')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-content--md')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-paragraph--md')).toBeTruthy();
 
-		expect(host!.innerHTML.includes('k-skeleton-avatar--lg')).toBeTruthy();
+		expect(host!.innerHTML.includes('k-skeleton-avatar-sk--lg')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-avatar-container--lg')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-title--lg')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-content--lg')).toBeTruthy();
@@ -173,7 +173,7 @@ describe('Test: KSkeleton', () => {
 			target: host
 		});
 		expect(instance).toBeTruthy();
-		expect(host!.innerHTML.includes('k-skeleton-avatar--lg')).toBeTruthy();
+		expect(host!.innerHTML.includes('k-skeleton-avatar-sk--lg')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-avatar-container--lg')).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton--active')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
@@ -441,7 +441,6 @@ describe('Test: KSkeletonAvatar', () => {
 		});
 		expect(instance).toBeTruthy();
 		expect(host!.innerHTML.includes('k-skeleton-avatar--lg')).toBeTruthy();
-		expect(host!.innerHTML.includes('k-skeleton-avatar-container--lg')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});
 

components/Skeleton/src/avatar.svelte

@@ -8,18 +8,27 @@
 	export let shape: KSkeletonAvatarProps['shape'] = 'circle';
 	export let cls: KSkeletonAvatarProps['cls'] = '';
 	export let attrs: KSkeletonAvatarProps['attrs'] = {};
+	/**
+	 * @internal
+	 */
+	export let isInSK: KSkeletonAvatarProps['isInSK'] = false;
 
 	const prefixCls = getPrefixCls('skeleton-avatar');
 	const prefixClsSke = getPrefixCls('skeleton');
 	const prefixClsContainer = getPrefixCls('skeleton-avatar-container');
-	$: containerCls = clsx(`${prefixClsContainer}--${size}`);
+	$: containerCls = clsx({
+		[`${prefixClsContainer}--${size}`]: isInSK
+	});
 	$: cnames = clsx(
 		prefixCls,
-		`${prefixCls}--${size}`,
 		`${prefixCls}--${shape}`,
 		{
+			[`${prefixCls}-sk`]: isInSK,
+			[`${prefixCls}-sk--${size}`]: isInSK,
+			[`${prefixCls}--${size}`]: !isInSK,
 			[`${prefixClsSke}--active`]: active
 		},
+		'k-skeleton-avatar__dark',
 		cls
 	);
 </script>

components/Skeleton/src/button.svelte

@@ -25,6 +25,7 @@
 			[`${prefixClsSke}--active`]: active,
 			[`${prefixCls}-un--active`]: !active
 		},
+		'k-skeleton-button-un--active__dark',
 		cls
 	);
 </script>

components/Skeleton/src/image.svelte

@@ -15,9 +15,10 @@
 			[`${prefixClsSke}--active`]: active,
 			[`${prefixCls}-un--active`]: !active
 		},
+		'k-skeleton-image-un--active__dark',
 		cls
 	);
-	const iconCls = clsx(`${prefixCls}--icon`);
+	const iconCls = clsx(`${prefixCls}--icon`, 'k-skeleton-image--icon__dark');
 </script>
 
 <div class={cnames} {...$$restProps} {...attrs}>

components/Skeleton/src/index.svelte

@@ -35,6 +35,7 @@
 	$: titleProps = isObject(title)
 		? {
 				...defaultSubProps,
+				// @ts-ignore
 				round,
 				...(title as KSkeletonTitleProps)
 			}
@@ -45,6 +46,7 @@
 	$: paragraphProps = isObject(paragraph)
 		? {
 				...defaultSubProps,
+				// @ts-ignore
 				round,
 				...(paragraph as KSkeletonParagraphProps)
 			}
@@ -66,7 +68,7 @@
 		<slot name="skeleton">
 			<div class={headerCls}>
 				{#if avatar}
-					<KSkeletonAvatar {...avatarProps}></KSkeletonAvatar>
+					<KSkeletonAvatar {...avatarProps} isInSK></KSkeletonAvatar>
 				{/if}
 				{#if title}
 					<KSkeletonTitle {...titleProps}></KSkeletonTitle>

components/Skeleton/src/index.ts

@@ -5,10 +5,12 @@ import SkeletonParagraph from './paragraph.svelte';
 import SkeletonButton from './button.svelte';
 import SkeletonInput from './input.svelte';
 import SkeletonImage from './image.svelte';
+import SkeletonAvatar from './avatar.svelte';
 export { Skeleton as KSkeleton };
 export { SkeletonTitle as KSkeletonTitle };
 export { SkeletonParagraph as KSkeletonParagraph };
 export { SkeletonButton as KSkeletonButton };
 export { SkeletonInput as KSkeletonInput };
 export { SkeletonImage as KSkeletonImage };
+export { SkeletonAvatar as KSkeletonAvatar };
 export default Skeleton;

components/Skeleton/src/input.svelte

@@ -19,6 +19,7 @@
 		{
 			[`${prefixClsSke}--active`]: active
 		},
+		'k-skeleton-input__dark',
 		cls
 	);
 </script>

components/Skeleton/src/paragraph.svelte

@@ -16,10 +16,15 @@
 	const prefixClsSke = getPrefixCls('skeleton');
 	$: cnames = clsx(prefixCls, cls);
 
-	$: itemCls = clsx(`${prefixCls}--item`, `${prefixCls}--${size}`, {
-		[`${prefixCls}--round`]: round,
-		[`${prefixClsSke}--active`]: active
-	});
+	$: itemCls = clsx(
+		`${prefixCls}--item`,
+		`${prefixCls}--${size}`,
+		{
+			[`${prefixCls}--round`]: round,
+			[`${prefixClsSke}--active`]: active
+		},
+		'k-skeleton-paragraph--item__dark'
+	);
 
 	let list: Array<{ width: string }> = [];
 	$: {

components/Skeleton/src/title.svelte

@@ -22,6 +22,7 @@
 			[`${prefixClsSke}--active`]: active,
 			[`${prefixCls}-un--active`]: !active
 		},
+		'k-skeleton-title-un--active__dark',
 		cls
 	);
 

components/Skeleton/src/types.d.ts

@@ -40,6 +40,10 @@ export type KSkeletonParagraphProps = {
 
 export type KSkeletonAvatarProps = {
 	active?: boolean;
+	/**
+	 * @internal
+	 */
+	isInSK?: boolean;
 	size?: IKunSize;
 	shape?: 'circle' | 'round' | 'square';
 	cls?: ClassValue;

docs/.vitepress/components/demo-block/src/index.vue

@@ -118,4 +118,8 @@ const handleCopy = () => {
 .vp-doc .demon-dropdown .k-link--primary {
   color: var(--ikun-teal-400);
 }
+
+.vp-doc ul.k-skeleton-paragraph{
+ padding: 0;
+}
 </style>

docs/.vitepress/config.ts

@@ -250,6 +250,10 @@ const components = [
 				text: 'Popconfirm',
 				link: '/components/KPopconfirm'
 			},
+			{
+				text: 'Skeleton',
+				link: '/components/KSkeleton'
+			},
 			{
 				text: 'Spin',
 				link: '/components/KSpin'

docs/components/KSkeleton.md

@@ -0,0 +1,145 @@
+---
+title: KSkeleton
+lang: en-US
+---
+
+# KSkeleton
+
+Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
+
+## Install
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @ikun-ui/skeleton
+```
+
+```bash [yarn]
+yarn add @ikun-ui/skeleton
+```
+
+```bash [npm]
+npm install @ikun-ui/skeleton
+```
+
+:::
+
+## Basic usage
+
+Simplest Skeleton usage.
+
+<demo src="skeleton/basic.svelte"  github='Skeleton'></demo>
+
+## Complex Combination
+
+Complex combination with avatar and multiple paragraphs.
+
+<demo src="skeleton/complex.svelte"  github='Skeleton'></demo>
+
+## Active
+
+Display active animation.
+
+<demo src="skeleton/active.svelte"  github='Skeleton'></demo>
+
+## Skeleton Button, Avatar, Input, Image
+
+Support some subcomponent skeletons
+
+<demo src="skeleton/option.svelte"  github='Skeleton'></demo>
+
+## Custom Skeleton
+
+You can customize the skeleton content through slots
+
+<demo src="skeleton/custom.svelte"  github='Skeleton'></demo>
+
+## Skeleton Props
+
+| Name      | Type                             | Default | Description                                |
+| --------- | -------------------------------- | ------- | ------------------------------------------ |
+| loading   | `boolean`                        | `false` | Display the skeleton when true.            |
+| size      | `sm \| md \| lg`                 | `'md'`  | Set the size of skeleton.                  |
+| active    | `boolean`                        | `false` | Show animation effect.                     |
+| round     | `boolean`                        | `false` | Show paragraph and title radius when true. |
+| title     | `boolean \| KSkeletonTitleProps` | `true`  | Show title placeholder.                    |
+| paragraph | `boolean \| KSkeletonTitleProps` | `true`  | Show paragraph placeholder.                |
+| avatar    | `boolean \| KSkeletonTitleProps` | `false` | Show avatar placeholder.                   |
+| cls       | `string`                         | `''`    | Additional class for component             |
+| attrs     | `any`                            | `{}`    | Additional attributes                      |
+
+## Skeleton Slots
+
+| Name     | Description                           |
+| -------- | ------------------------------------- |
+| default  | Content of the skeleton.              |
+| skeleton | Custom rendering of skeleton content. |
+
+## Skeleton Title Props
+
+| Name   | Type               | Default | Description                      |
+| ------ | ------------------ | ------- | -------------------------------- |
+| width  | `number \| string` | `50%`   | Set the width of skeleton title. |
+| size   | `sm \| md \| lg`   | `'md'`  | Set the size of skeleton title.  |
+| active | `boolean`          | `false` | Show animation effect.           |
+| round  | `boolean`          | `false` | Show title radius when true.     |
+| cls    | `string`           | `''`    | Additional class for component   |
+| attrs  | `any`              | `{}`    | Additional attributes            |
+
+## Skeleton Paragraph Props
+
+| Name   | Type                                          | Default | Description                                                                                                                  |
+| ------ | --------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| width  | `number \| string \| Array<number \| string>` | `-`     | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width. |
+| rows   | `number`                                      | `3`     | Set the row count of paragraph.                                                                                              |
+| size   | `sm \| md \| lg`                              | `'md'`  | Set the size of paragraph title.                                                                                             |
+| active | `boolean`                                     | `false` | Show animation effect.                                                                                                       |
+| round  | `boolean`                                     | `false` | Show paragraph radius when true.                                                                                             |
+| cls    | `string`                                      | `''`    | Additional class for component                                                                                               |
+| attrs  | `any`                                         | `{}`    | Additional attributes                                                                                                        |
+
+## Skeleton Avatar Props
+
+| Name   | Type                        | Default  | Description                       |
+| ------ | --------------------------- | -------- | --------------------------------- |
+| shape  | `circle \| round \| square` | `circle` | Set the shape of skeleton avatar. |
+| size   | `sm \| md \| lg`            | `'md'`   | Set the size of skeleton avatar.  |
+| active | `boolean`                   | `false`  | Show animation effect.            |
+| cls    | `string`                    | `''`     | Additional class for component    |
+| attrs  | `any`                       | `{}`     | Additional attributes             |
+
+## Skeleton Button Props
+
+| Name   | Type                        | Default | Description                                     |
+| ------ | --------------------------- | ------- | ----------------------------------------------- |
+| shape  | `circle \| round \| square` | `round` | Set the shape of skeleton button.               |
+| size   | `sm \| md \| lg`            | `'md'`  | Set the size of skeleton button.                |
+| active | `boolean`                   | `false` | Show animation effect.                          |
+| block  | `boolean`                   | `false` | Option to fit button width to its parent width. |
+| cls    | `string`                    | `''`    | Additional class for component                  |
+| attrs  | `any`                       | `{}`    | Additional attributes                           |
+
+## Skeleton Input Props
+
+| Name   | Type             | Default | Description                                    |
+| ------ | ---------------- | ------- | ---------------------------------------------- |
+| size   | `sm \| md \| lg` | `'md'`  | Set the size of skeleton input.                |
+| active | `boolean`        | `false` | Show animation effect.                         |
+| block  | `boolean`        | `false` | Option to fit input width to its parent width. |
+| cls    | `string`         | `''`    | Additional class for component                 |
+| attrs  | `any`            | `{}`    | Additional attributes                          |
+
+## Skeleton Image Props
+
+| Name   | Type             | Default | Description                                    |
+| ------ | ---------------- | ------- | ---------------------------------------------- |
+| active | `boolean`        | `false` | Show animation effect.                         |
+| cls    | `string`         | `''`    | Additional class for component                 |
+| attrs  | `any`            | `{}`    | Additional attributes                          |
+
+## Skeleton Image Slots
+
+| Name     | Description                           |
+| -------- |---------------------------------------|
+| default  | Content of the skeleton image.        |

docs/example/skeleton/active.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { KSkeleton } from '@ikun-ui/skeleton';
+</script>
+
+<KSkeleton loading avatar active></KSkeleton>

docs/example/skeleton/basic.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { KSkeleton } from '@ikun-ui/skeleton';
+</script>
+
+<KSkeleton loading></KSkeleton>

docs/example/skeleton/complex.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { KSkeleton } from '@ikun-ui/skeleton';
+</script>
+
+<KSkeleton loading avatar></KSkeleton>

docs/example/skeleton/custom.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { KSkeleton } from '@ikun-ui/skeleton';
+	import { KFlex } from '@ikun-ui/flex';
+	import { KSwitch } from '@ikun-ui/switch';
+	let loading = true;
+	function changeLoading(e) {
+		loading = e.detail;
+	}
+</script>
+
+<KFlex align="center">
+	Active:
+	<KSwitch value={loading} on:updateValue={changeLoading} cls="ml-2" />
+</KFlex>
+
+<KSkeleton {loading}>
+	<div slot="skeleton">ikun-ui</div>
+	<div>content</div>
+</KSkeleton>