feat: add spin component (#118)

* feat: add loading component

* fix: loading logo show in wrong position

* docs: add loading document

* docs: add loading document

* docs: modified component's name

* docs: modified component's name

* docs: modified component's name of loading

* fix: modified component's name of loading

* chore: add dependence spin

* docs: added spin full screen and bg color demo

* feat: added attrs props with spin

* feat: added custom render with spin

* chore: format code

---------

Co-authored-by: 白雾三语 <[email protected]>

CONTRIBUTING.md

@@ -54,7 +54,7 @@ svelte-ui
 │  │  ├─ src
 │  │  │  ├─ index.svelte
 │  │  │  ├─ index.ts
-│  │  │  └─ types.d.ts
+│  │  │  └─ types.ts
 │  │  └─ tsconfig.json
 ```
 

CONTRIBUTING.zh-CN.md

@@ -52,7 +52,7 @@ svelte-ui
 │  │  ├─ src
 │  │  │  ├─ index.svelte
 │  │  │  ├─ index.ts
-│  │  │  └─ types.d.ts
+│  │  │  └─ types.ts
 │  │  └─ tsconfig.json
 ```
 

components/Spin/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "@ikun-ui/spin",
+	"version": "0.0.9-beta.1",
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"svelte": "dist/index.js",
+	"types": "src/index.ts",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"scripts": {
+		"build": "npm run build:js && npm run build:svelte",
+		"build:js": "tsc -p . --outDir dist/ --rootDir src/",
+		"build:svelte": "svelte-strip strip src/ dist",
+		"publish:npm": "pnpm publish --no-git-checks --access public"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"dependencies": {
+		"@ikun-ui/utils": "workspace:*",
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/mask": "workspace:*",
+		"baiwusanyu-utils": "^1.0.14"
+	},
+	"devDependencies": {
+		"@tsconfig/svelte": "^5.0.0",
+		"svelte-strip": "^2.0.0",
+		"tslib": "^2.6.1",
+		"typescript": "^5.1.6"
+	}
+}

components/Spin/src/index.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { KIcon } from '@ikun-ui/icon';
+	import { KMask } from '@ikun-ui/mask';
+	import { isFunction, isString } from 'baiwusanyu-utils';
+	export let show: boolean = false;
+	export let text = '';
+	export let spinner: any = 'i-carbon-circle-dash';
+	export let background = '';
+	export let cls = '';
+	// TODO: unit test
+	export let attrs = {};
+	export let target = document.body;
+	export let rotating: boolean = true;
+</script>
+
+<KMask value={show}
+	   color={background}
+	   {target} >
+	<div class="{cls}" {...attrs}>
+		<div class="k-spin--spinner">
+			<div class={rotating ? 'k-spin--spinner__rotating' : ''}>
+				{#if spinner && isString(spinner)}
+					<KIcon icon={spinner} color="text-ikun-main" />
+				{:else if spinner && isFunction(spinner)}
+					<svelte:component this={spinner} />
+				{/if}
+			</div>
+			{#if text}
+				<p class="k-spin--text">{text}</p>
+			{/if}
+		</div>
+	</div>
+</KMask>
+

components/Spin/src/index.ts

@@ -0,0 +1,34 @@
+import Spin from './index.svelte';
+import type { SpinOptions } from './types';
+
+const mountSpin = <T>(options: SpinOptions<T>, target: HTMLElement) => {
+	return new Spin({
+		target: target,
+		props: {
+			...options,
+			target
+		}
+	});
+};
+
+const SpinFn = <T>(node: HTMLElement, options: SpinOptions<T>) => {
+	const { show, fullScreen } = options;
+	let SpinInst: Spin;
+	const initSpin = () => {
+		SpinInst = mountSpin<T>(options, fullScreen ? document.body : node);
+	};
+	if (show) {
+		initSpin();
+	}
+	return {
+		update<T>(options: SpinOptions<T>) {
+			if (SpinInst) {
+				SpinInst.$set({ show: options.show });
+			} else {
+				initSpin();
+			}
+		}
+	};
+};
+
+export const KSpin = SpinFn;

components/Spin/src/types.ts

@@ -0,0 +1,36 @@
+/// <reference types="svelte" />
+
+export declare interface SpinOptions<T> {
+	/**
+	 * show spin
+	 */
+	show: boolean;
+	/**
+	 * spin text
+	 */
+	text?: string;
+	/**
+	 * spin for full screen
+	 */
+	fullScreen?: boolean;
+	/**
+	 * spin mask background color
+	 */
+	background?: string;
+	/**
+	 * spin spinner
+	 */
+	spinner?: string | T;
+	/**
+	 * spin spinner rotating
+	 */
+	rotating?: boolean;
+	/**
+	 * custom class
+	 */
+	cls?: string;
+	/**
+	 * Additional attributes
+	 */
+	attrs?: any;
+}

components/Spin/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+
+	"compilerOptions": {
+		"noImplicitAny": true,
+		"strict": true,
+		"declaration": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.svelte"],
+	"exclude": ["node_modules/*", "**/*.spec.ts"]
+}

components/index.ts

@@ -19,3 +19,4 @@ export * from '@ikun-ui/tag';
 export * from '@ikun-ui/tooltip';
 export * from '@ikun-ui/switch';
 export * from '@ikun-ui/message-box';
+export * from '@ikun-ui/spin';

docs/.vitepress/config.ts

@@ -111,6 +111,10 @@ const components = [
 			{
 				text: 'Modal',
 				link: '/components/KModal'
+			},
+			{
+				text: 'Spin',
+				link: '/components/KSpin'
 			}
 		]
 	},

docs/components/KSpin.md

@@ -0,0 +1,63 @@
+---
+title: KSpin
+lang: en-US
+---
+
+# KSpin
+
+Show animation while loading data.
+
+## Install
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @ikun-ui/spin
+```
+
+```bash [yarn]
+yarn add @ikun-ui/spin
+```
+
+```bash [npm]
+npm install @ikun-ui/spin
+```
+
+:::
+
+## Basic usage
+
+Use `show`, control loading show.
+
+<demo src="../../../../example/spin/basic.svelte"  github='Spin'></demo>
+
+## Full screen
+
+Use the `fullScreen` property to enable a full-screen spin.
+
+<demo src="../../../../example/spin/full.svelte"  github='Spin'></demo>
+
+## Custom background color
+
+Use the `background` property to set the background color.
+
+<demo src="../../../../example/spin/bg-color.svelte"  github='Spin'></demo>
+
+## Custom Spinner
+
+The `spinner` attribute can also be passed directly into a component to display content as a spin
+
+<demo src="../../../../example/spin/custom.svelte"  github='Spin'></demo>
+
+## Loading Options
+
+| Name       | Type      | Default | Description                                                  |
+| ---------- | --------- | ------- | ------------------------------------------------------------ |
+| show       | `boolean` | `false` | Whether to show spin                                         |
+| text       | `string`  | `-`     | loading text that displays under the spinner                 |
+| fullScreen | `boolean` | `false` | Show a full screen animation while loading data              |
+| background | `string`  | `-`     | background color of the mask                                 |
+| spinner    | `string`  | `-`     | The class name of the snipper, following the unocss standard |
+| rotating   | `boolean` | `true`  | Whether the snipper is rotated or not                        |
+| cls        | `string`  | `-`     | Additional class                                             |
+| attrs      | `any`     | `{}`    | Additional attributes                                        |

docs/example/spin/basic.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { KSpin } from '@ikun-ui/spin';
+	import { KButton } from '@ikun-ui/button';
+	const spinOptions = {
+		show: false,
+		text: 'loading...'
+	};
+
+	const handleSpin = () => {
+		spinOptions.show = true;
+		setTimeout(() => {
+			spinOptions.show = false;
+		}, 3000);
+	};
+</script>
+
+<div use:KSpin={spinOptions} class="w-full h-200px flex justify-center items-center">
+	<KButton on:click={handleSpin}>Spin</KButton>
+</div>

docs/example/spin/bg-color.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { KSpin } from '@ikun-ui/spin';
+	import { KButton } from '@ikun-ui/button';
+	const spinOptions = {
+		show: false,
+		background: 'rgba(255, 119, 7, 0.4)',
+		text: 'loading...'
+	};
+
+	const handleSpin = () => {
+		spinOptions.show = true;
+		setTimeout(() => {
+			spinOptions.show = false;
+		}, 3000);
+	};
+</script>
+
+<div use:KSpin={spinOptions} class="w-full h-200px flex justify-center items-center">
+	<KButton on:click={handleSpin}>Spin</KButton>
+</div>

docs/example/spin/custom.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { KSpin } from '@ikun-ui/spin';
+	import { KButton } from '@ikun-ui/button';
+	import IKun from './ikun.svelte';
+	const spinOptions = {
+		show: false,
+		spinner: IKun,
+		rotating: false,
+		text: '只因你太美'
+	};
+
+	const handleSpin = () => {
+		spinOptions.show = true;
+		setTimeout(() => {
+			spinOptions.show = false;
+		}, 3000);
+	};
+</script>
+
+<div use:KSpin={spinOptions} class="w-full h-200px flex justify-center items-center">
+	<KButton on:click={handleSpin}>Spin</KButton>
+</div>

docs/example/spin/full.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { KSpin } from '@ikun-ui/spin';
+	import { KButton } from '@ikun-ui/button';
+	const spinOptions = {
+		show: false,
+		fullScreen: true,
+		text: 'loading...'
+	};
+
+	const handleSpin = () => {
+		spinOptions.show = true;
+		setTimeout(() => {
+			spinOptions.show = false;
+		}, 3000);
+	};
+</script>
+
+<div use:KSpin={spinOptions} class="w-full h-200px flex justify-center items-center">
+	<KButton on:click={handleSpin}>Spin</KButton>
+</div>