diff --git a/.prettierrc b/.prettierrc
index 95730232..3f7802c3 100644
--- a/.prettierrc
+++ b/.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"
+ }
+ }
+ ]
}
diff --git a/components/Button/__test__/__snapshots__/button.spec.ts.snap b/components/Button/__test__/__snapshots__/button.spec.ts.snap
index e67310ff..9632651b 100644
--- a/components/Button/__test__/__snapshots__/button.spec.ts.snap
+++ b/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`] = `""`;
+exports[`Test: KButton > props: circle 1`] = `""`;
-exports[`Test: KButton > props: disabled 1`] = `""`;
+exports[`Test: KButton > props: disabled 1`] = `""`;
-exports[`Test: KButton > props: icon 1`] = `""`;
+exports[`Test: KButton > props: icon 1`] = `""`;
-exports[`Test: KButton > props: round 1`] = `""`;
+exports[`Test: KButton > props: round 1`] = `""`;
-exports[`Test: KButton > props: to 1`] = `" "`;
+exports[`Test: KButton > props: to 1`] = `" "`;
-exports[`Test: KButton > props: type 1`] = `""`;
+exports[`Test: KButton > props: type 1`] = `""`;
diff --git a/components/Button/__test__/button.spec.ts b/components/Button/__test__/button.spec.ts
index d433e8a7..7927a71f 100644
--- a/components/Button/__test__/button.spec.ts
+++ b/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('')).toBeTruthy();
expect(host.innerHTML).matchSnapshot();
});
diff --git a/components/Button/src/index.svelte b/components/Button/src/index.svelte
index 69b9ea88..bffae4a0 100644
--- a/components/Button/src/index.svelte
+++ b/components/Button/src/index.svelte
@@ -1,53 +1,55 @@
+ {...attrsInner}
+ {...$$restProps}>
{#if icon}
-
+
{/if}
{#if $$slots.default && icon}
-
+
{/if}
-
-
+
diff --git a/components/Mask/__test__/__snapshots__/mask.spec.ts.snap b/components/Mask/__test__/__snapshots__/mask.spec.ts.snap
new file mode 100644
index 00000000..8c6c47d2
--- /dev/null
+++ b/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`] = `""`;
+
+exports[`Test: KMask > props: target > hidden 1`] = `"hidden"`;
+
+exports[`Test: KMask > props: target 1`] = `""`;
+
+exports[`Test: KMask > props: value 1`] = `""`;
diff --git a/docs/components/KButton.md b/docs/components/KButton.md
index 094f5d6b..75146fd6 100644
--- a/docs/components/KButton.md
+++ b/docs/components/KButton.md
@@ -44,17 +44,24 @@ Use the icon attribute to add icon.
+## Link Button
+
+Use the `to` attribute to set a specific url that you can click to jump to.
+
+
+
## 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
diff --git a/docs/example/button/link.svelte b/docs/example/button/link.svelte
new file mode 100644
index 00000000..1513bbf8
--- /dev/null
+++ b/docs/example/button/link.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Github
+
+
diff --git a/play/src/routes/+page.svelte b/play/src/routes/+page.svelte
index d8382307..6d312dd4 100644
--- a/play/src/routes/+page.svelte
+++ b/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 = ''
+
+ Normal Button
+ Disabled Button
+ Link
+
(openDrawer = true)}>
drawer
diff --git a/utils/src/class-names.ts b/utils/src/class-names.ts
new file mode 100644
index 00000000..c168d11e
--- /dev/null
+++ b/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[])[]
+): string | undefined {
+ const hasOwn = {}.hasOwnProperty;
+ const classnames: Array = [];
+ 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)) {
+ classnames.push(arg.toString());
+ continue;
+ }
+ for (const key in arg as Record) {
+ if (hasOwn.call(arg, key) && arg[key]) {
+ classnames.push(key);
+ }
+ }
+ }
+ }
+ return classnames.join(' ');
+}
diff --git a/utils/src/index.ts b/utils/src/index.ts
index fcb073fe..ece3670f 100644
--- a/utils/src/index.ts
+++ b/utils/src/index.ts
@@ -1 +1,3 @@
export * from './types';
+
+export { createCls } from './class-names';
diff --git a/utils/src/utils.ts b/utils/src/utils.ts
new file mode 100644
index 00000000..819fa9d7
--- /dev/null
+++ b/utils/src/utils.ts
@@ -0,0 +1,6 @@
+export const isRewritten = (target: Record): boolean => {
+ return (
+ target.toString !== Object.prototype.toString &&
+ !target.toString.toString().includes('[native code]')
+ );
+};