feat(button): add link button

.prettierrc

@@ -4,5 +4,12 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

components/Button/__test__/__snapshots__/button.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KButton > props: circle 1`] = `"<button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--circle \\">  </button>"`;
+exports[`Test: KButton > props: circle 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover k-button--circle\\" aria-hidden=\\"true\\">  </button>"`;
 
-exports[`Test: KButton > props: disabled 1`] = `"<button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-cur-disabled k-button--disabled  \\">  </button>"`;
+exports[`Test: KButton > props: disabled 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-cur-disabled k-button--disabled\\" aria-hidden=\\"true\\">  </button>"`;
 
-exports[`Test: KButton > props: icon 1`] = `"<button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover  \\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"icon-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 24px; height: 24px;\\"></div></div>  </button>"`;
+exports[`Test: KButton > props: icon 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\"><div role=\\"\\" aria-hidden=\\"true\\" class=\\"k-icon--base k-icon--base__dark  \\"><div class=\\"icon-carbon-settings k-icon-transition k-button--primary__icon\\" style=\\"width: 24px; height: 24px;\\"></div></div>  </button>"`;
 
-exports[`Test: KButton > props: round 1`] = `"<button aria-hidden=\\"true\\" style=\\"border-radius: 30px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover  \\">  </button>"`;
+exports[`Test: KButton > props: round 1`] = `"<button style=\\"border-radius: 30px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\">  </button>"`;
 
-exports[`Test: KButton > props: to 1`] = `"<a aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover  \\">  </a>"`;
+exports[`Test: KButton > props: to 1`] = `"<a style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\" href=\\"https://github.com/ikun-svelte/ikun-ui\\">  </a>"`;
 
-exports[`Test: KButton > props: type 1`] = `"<button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--success k-button--success__active k-button--success__focus k-button--success__hover  \\">  </button><button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--error k-button--error__active k-button--error__focus k-button--error__hover  \\">  </button><button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--warning k-button--warning__active k-button--warning__focus k-button--warning__hover  \\">  </button><button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--info k-button--info__active k-button--info__focus k-button--info__hover  \\">  </button><button aria-hidden=\\"true\\" style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover  \\">  </button>"`;
+exports[`Test: KButton > props: type 1`] = `"<button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--success k-button--success__active k-button--success__focus k-button--success__hover\\" aria-hidden=\\"true\\">  </button><button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--error k-button--error__active k-button--error__focus k-button--error__hover\\" aria-hidden=\\"true\\">  </button><button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--warning k-button--warning__active k-button--warning__focus k-button--warning__hover\\" aria-hidden=\\"true\\">  </button><button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--info k-button--info__active k-button--info__focus k-button--info__hover\\" aria-hidden=\\"true\\">  </button><button style=\\"border-radius: 4px;\\" class=\\"k-button--base k-button--primary k-button--primary__active k-button--primary__focus k-button--primary__hover\\" aria-hidden=\\"true\\">  </button>"`;

components/Button/__test__/button.spec.ts

@@ -1,6 +1,6 @@
 import { tick } from 'svelte';
 import { afterEach, expect, test, vi, describe, beforeEach } from 'vitest';
-import KButton from '../src/index.svelte';
+import KButton from '../src';
 
 let host: HTMLElement;
 
@@ -21,10 +21,13 @@ describe('Test: KButton', () => {
 		const instance = new KButton({
 			target: host,
 			props: {
-				to: true
+				to: 'https://github.com/ikun-svelte/ikun-ui'
 			}
 		});
 		expect(instance).toBeTruthy();
+		expect(host.querySelector('a')?.getAttribute('href')).toBe(
+			'https://github.com/ikun-svelte/ikun-ui'
+		);
 		expect(host.innerHTML.endsWith('</a>')).toBeTruthy();
 		expect(host.innerHTML).matchSnapshot();
 	});

components/Button/src/index.svelte

@@ -1,53 +1,55 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { KIcon } from '@ikun-ui/icon';
-	import type { IKunTypePro } from '@ikun-ui/utils';
-	export let to = false;
-	export let icon = '';
-	export let round:string | number = '';
-	export let circle = false;
-	export let cls = '';
-	export let attrs = {};
-	export let type:IKunTypePro = 'primary';
-	export let disabled = false;
-	// small medium large
-	// export let size = 'medium'
+	import { createEventDispatcher } from 'svelte'
+	import { KIcon } from '@ikun-ui/icon'
+	import { extend } from 'baiwusanyu-utils'
+	import { createCls, type IKunTypePro } from '@ikun-ui/utils'
+	export let to: HTMLAnchorElement['href'] = ''
+	export let icon = ''
+	export let round: string | number = ''
+	export let circle = false
+	export let cls = ''
+	export let attrs = {}
+	export let type: IKunTypePro = 'primary'
+	export let disabled = false
+	// todo: button size
 
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher()
 	const handleClick = (e: Event) => {
-		if(disabled){
+		if (disabled) {
 			e.preventDefault()
 		}
-		if (!to && !disabled) dispatch('click', e);
-	};
-
-	// TODO a tag document and impl
-	$: tag = to ? 'a' : 'button';
+		if (!to && !disabled) dispatch('click', e)
+	}
 
+	$: prefixCls = `k-button--${type}`
+	$: cnames = createCls(
+		'k-button--base',
+		prefixCls,
+		{
+			[`${prefixCls}__active ${prefixCls}__focus ${prefixCls}__hover`]: !disabled,
+			'k-cur-disabled k-button--disabled': disabled,
+			'k-button--circle': circle
+		},
+		cls
+	)
+	$: attrsInner = extend(attrs, to ? { href: to } : {})
 </script>
 
 <svelte:element
-	this={tag}
+	this={to ? 'a' : 'button'}
+	style="border-radius: {round ? `${round}` : '4'}px"
+	class={cnames}
 	aria-hidden="true"
 	on:click={handleClick}
-	style = "border-radius: { round ? `${round}` : '4'}px"
-	{...attrs}
-	class="
-        k-button--base
-        k-button--{type}
-        {disabled 
-					? 'k-cur-disabled k-button--disabled' 
-					: `k-button--${type}__active k-button--${type}__focus k-button--${type}__hover`}
-        {circle ? 'k-button--circle' : ''}
-        {cls}">
+	{...attrsInner}
+	{...$$restProps}>
 	{#if icon}
-		<KIcon {icon} color={`k-button--${type}__icon`}/>
+		<KIcon {icon} color={`k-button--${type}__icon`} />
 	{/if}
 
 	{#if $$slots.default && icon}
-		<div class="ml-2"/>
+		<div class="ml-2" />
 	{/if}
 
-	<slot/>
-
+	<slot />
 </svelte:element>

components/Mask/__test__/__snapshots__/mask.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test: KMask > props: color 1`] = `"<div style=\\"background-color: red; top: 0px; left: 0px; width: 100%; height: 100%;\\" class=\\"k-mask--base \\"></div>"`;
+
+exports[`Test: KMask > props: target > hidden 1`] = `"hidden"`;
+
+exports[`Test: KMask > props: target 1`] = `"<div style=\\"top: 0px; left: 0px; width: 100%; height: 100%;\\" class=\\"k-mask--base \\"></div>"`;
+
+exports[`Test: KMask > props: value 1`] = `"<div style=\\"top: 0px; left: 0px; width: 100%; height: 100%;\\" class=\\"k-mask--base \\"></div>"`;

docs/components/KButton.md

@@ -44,17 +44,24 @@ Use the icon attribute to add icon.
 
 <demo src="../../../../example/button/icon.svelte" github='https://github.com/ikun-svelte/ikun-ui/tree/main/components/Button'></demo>
 
+## Link Button
+
+Use the `to` attribute to set a specific url that you can click to jump to.
+
+<demo src="../../../../example/button/link.svelte" github='https://github.com/ikun-svelte/ikun-ui/tree/main/components/Button'></demo>
+
 ## Button Props
 
-| Name     | Type      | Default                                               | Description                                               |
-| -------- | --------- | ----------------------------------------------------- | --------------------------------------------------------- |
-| icon     | `string`  | `-`                                                   | The class name of the icon, following the unocss standard |
-| circle   | `boolean` | `false`                                               | Determine whether it's a circle button                    |
-| round    | `string`  | `-`                                                   | Button's border radius                                    |
-| disabled | `boolean` | `false`                                               | Disable the button                                        |
-| type     | `enum`    | `'success' / 'error' / 'warning' / 'info'/ 'primary'` | Button type                                               |
-| cls      | `string`  | `-`                                                   | Additional class for                                      |
-| attrs    | `any`     | `{}`                                                  | Additional attributes                                     |
+| Name     | Type               | Default                                               | Description                                               |
+| -------- | ------------------ | ----------------------------------------------------- | --------------------------------------------------------- |
+| icon     | `string`           | `-`                                                   | The class name of the icon, following the unocss standard |
+| circle   | `boolean`          | `false`                                               | Determine whether it's a circle button                    |
+| to       | `string`           | `-`                                                   | Determine whether it's a link button                      |
+| round    | `string \| number` | `-`                                                   | Button's border radius                                    |
+| disabled | `boolean`          | `false`                                               | Disable the button                                        |
+| type     | `enum`             | `'success' / 'error' / 'warning' / 'info'/ 'primary'` | Button type                                               |
+| cls      | `string`           | `-`                                                   | Additional class for                                      |
+| attrs    | `any`              | `{}`                                                  | Additional attributes                                     |
 
 ## Button Events
 

docs/example/button/link.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { KButton } from '@ikun-ui/button'
+</script>
+
+<div class="flex items-center flex-wrap">
+	<KButton
+		icon="i-carbon-logo-github"
+		type="primary"
+		cls="mx-2"
+		to="https://github.com/ikun-svelte/ikun-ui"
+		target="_blank"
+	></KButton>
+
+	<KButton type="primary" cls="mx-2" to="https://github.com/ikun-svelte/ikun-ui" target="_blank"
+		>Github</KButton
+	>
+</div>
+<style>
+	:global(.k-button--primary) {
+		color: #2dd4bf !important;
+	}
+</style>

play/src/routes/+page.svelte

@@ -29,8 +29,8 @@
 			duration: 99999,
 			autoClose: true,
 			content: 'Notify Success'
-		});
-	};
+		})
+	}
 
 	const handleMsgBox = () => {
 		KMsgBox.prompt({
@@ -48,10 +48,15 @@
 		});
 	};
 
-	let switchVal = false;
-	let selectVal = '';
+	let switchVal = false
+	let selectVal = ''
 </script>
 
+<div class="flex fle-gap-2 p-2">
+	<KButton>Normal Button</KButton>
+	<KButton disabled>Disabled Button</KButton>
+	<KButton to="https://github.com/ikun-svelte/ikun-ui">Link</KButton>
+</div>
 <KButton icon="i-carbon-settings" type="primary" on:click={() => (openDrawer = true)}>
 	drawer
 </KButton>

utils/src/class-names.ts

@@ -0,0 +1,33 @@
+import { isString, isNumber, isArray, isObject } from 'baiwusanyu-utils';
+import { isRewritten } from './utils';
+
+export function createCls(
+	...args: (string | number | Record<string, any> | string[])[]
+): string | undefined {
+	const hasOwn = {}.hasOwnProperty;
+	const classnames: Array<string | number> = [];
+	for (let i = 0; i < arguments.length; i++) {
+		const arg = args[i];
+		if (!arg) continue;
+		if (isString(arg) || isNumber(arg)) {
+			classnames.push(arg as string | number);
+		} else if (isArray(arg)) {
+			if (!(arg as string[]).length) return;
+			const inner = createCls(arg);
+			if (inner) {
+				classnames.push(inner);
+			}
+		} else if (isObject(arg)) {
+			if (isRewritten(arg as Record<string, any>)) {
+				classnames.push(arg.toString());
+				continue;
+			}
+			for (const key in arg as Record<string, any>) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classnames.push(key);
+				}
+			}
+		}
+	}
+	return classnames.join(' ');
+}

utils/src/index.ts

@@ -1 +1,3 @@
 export * from './types';
+
+export { createCls } from './class-names';

utils/src/utils.ts

@@ -0,0 +1,6 @@
+export const isRewritten = (target: Record<string, any>): boolean => {
+	return (
+		target.toString !== Object.prototype.toString &&
+		!target.toString.toString().includes('[native code]')
+	);
+};