do-ui-design-system 1.0.16 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/molecules/IconButton/IconButton.svelte +51 -19
- package/dist/molecules/IconButton/IconButton.svelte.d.ts +28 -38
- package/dist/molecules/IconButton/IconButton.svelte.d.ts.map +1 -1
- package/dist/molecules/IconButton/iProps.d.ts +6 -0
- package/dist/molecules/IconButton/iProps.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -2,27 +2,54 @@
|
|
|
2
2
|
import { Button, Icon } from '../../atoms/index.js';
|
|
3
3
|
import type { iProps } from './iProps.ts';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
let {
|
|
6
|
+
variant = 'do-btn-primary',
|
|
7
|
+
size = 'do-btn-md',
|
|
8
|
+
label,
|
|
9
|
+
disabled,
|
|
10
|
+
loading,
|
|
11
|
+
onClick,
|
|
12
|
+
ariaLabel,
|
|
13
|
+
ariaDisabled,
|
|
14
|
+
iconName = 'icon-arrow',
|
|
15
|
+
iconSize,
|
|
16
|
+
iconColor,
|
|
17
|
+
iconPosition,
|
|
18
|
+
rounded,
|
|
19
|
+
circle,
|
|
20
|
+
square,
|
|
21
|
+
btnCustomClass,
|
|
22
|
+
iCustomClass,
|
|
23
|
+
btnCustomStyles,
|
|
24
|
+
iCustomStyles,
|
|
25
|
+
data
|
|
26
|
+
}: {
|
|
27
|
+
variant?: iProps['variant'];
|
|
28
|
+
size?: iProps['size'];
|
|
29
|
+
label?: iProps['label'];
|
|
30
|
+
disabled?: iProps['disabled'];
|
|
31
|
+
loading?: iProps['loading'];
|
|
32
|
+
onClick: iProps['onClick'];
|
|
33
|
+
ariaLabel: iProps['ariaLabel'];
|
|
34
|
+
ariaDisabled?: iProps['ariaDisabled'];
|
|
35
|
+
iconName: iProps['iconName'];
|
|
36
|
+
iconSize?: iProps['iconSize'];
|
|
37
|
+
iconColor?: iProps['iconColor'];
|
|
38
|
+
iconPosition?: iProps['iconPosition'];
|
|
39
|
+
rounded?: iProps['rounded'];
|
|
40
|
+
circle?: iProps['circle'];
|
|
41
|
+
square?: iProps['square'];
|
|
42
|
+
btnCustomClass?: iProps['btnCustomClass'];
|
|
43
|
+
iCustomClass?: iProps['iCustomClass'];
|
|
44
|
+
btnCustomStyles?: iProps['btnCustomStyles'];
|
|
45
|
+
iCustomStyles?: iProps['iCustomStyles'];
|
|
46
|
+
data?: iProps['data'];
|
|
47
|
+
} = $props();
|
|
21
48
|
</script>
|
|
22
49
|
|
|
23
50
|
<!-- @component
|
|
24
51
|
```Svelte
|
|
25
|
-
<IconButton label?={'text'} variant?={'variant'} size?={'size'}
|
|
52
|
+
<IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
|
|
26
53
|
```
|
|
27
54
|
- `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
|
|
28
55
|
- `size?`: rem units
|
|
@@ -30,6 +57,9 @@
|
|
|
30
57
|
- `disabled?`: boolean
|
|
31
58
|
- `rounded?`: boolean
|
|
32
59
|
- `loading?`: boolean
|
|
60
|
+
- `onClick`: () => void
|
|
61
|
+
- `ariaLabel`: string
|
|
62
|
+
- `ariaDisabled`?: boolean
|
|
33
63
|
- `iconName?`: any icon name from the Icon component
|
|
34
64
|
- `iconSize?`: rem units
|
|
35
65
|
- `iconColor?`: hex units #000
|
|
@@ -44,16 +74,18 @@
|
|
|
44
74
|
-->
|
|
45
75
|
|
|
46
76
|
<Button
|
|
47
|
-
{...$$restProps}
|
|
48
77
|
{variant}
|
|
49
78
|
{size}
|
|
50
79
|
{disabled}
|
|
51
80
|
{rounded}
|
|
52
81
|
{circle}
|
|
53
82
|
{square}
|
|
83
|
+
{ariaLabel}
|
|
84
|
+
{ariaDisabled}
|
|
54
85
|
customClass={btnCustomClass}
|
|
55
86
|
customStyles={btnCustomStyles}
|
|
56
|
-
|
|
87
|
+
onClick={onClick}
|
|
88
|
+
{...data}
|
|
57
89
|
>
|
|
58
90
|
{#if loading}
|
|
59
91
|
<i class="icon-loading do-loader" style={iconPosition === 'start' ? 'order:1;' : 'order:2;'}
|
|
@@ -1,20 +1,29 @@
|
|
|
1
1
|
import type { iProps } from './iProps.ts';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
variant?: iProps['variant'];
|
|
4
|
+
size?: iProps['size'];
|
|
5
|
+
label?: iProps['label'];
|
|
6
|
+
disabled?: iProps['disabled'];
|
|
7
|
+
loading?: iProps['loading'];
|
|
8
|
+
onClick: iProps['onClick'];
|
|
9
|
+
ariaLabel: iProps['ariaLabel'];
|
|
10
|
+
ariaDisabled?: iProps['ariaDisabled'];
|
|
11
|
+
iconName: iProps['iconName'];
|
|
12
|
+
iconSize?: iProps['iconSize'];
|
|
13
|
+
iconColor?: iProps['iconColor'];
|
|
14
|
+
iconPosition?: iProps['iconPosition'];
|
|
15
|
+
rounded?: iProps['rounded'];
|
|
16
|
+
circle?: iProps['circle'];
|
|
17
|
+
square?: iProps['square'];
|
|
18
|
+
btnCustomClass?: iProps['btnCustomClass'];
|
|
19
|
+
iCustomClass?: iProps['iCustomClass'];
|
|
20
|
+
btnCustomStyles?: iProps['btnCustomStyles'];
|
|
21
|
+
iCustomStyles?: iProps['iCustomStyles'];
|
|
22
|
+
data?: iProps['data'];
|
|
23
|
+
};
|
|
15
24
|
/**
|
|
16
25
|
* ```Svelte
|
|
17
|
-
* <IconButton label?={'text'} variant?={'variant'} size?={'size'}
|
|
26
|
+
* <IconButton label?={'text'} variant?={'variant'} size?={'size'} onClick={()=>{}} disabled?={disabled} loading?={loading} iconName?={'iconName'} iconSize?={'iconSize'} ariaLabel={ariaLabel} ariaDisabled={ariaDisabled}/>
|
|
18
27
|
* ```
|
|
19
28
|
* - `variant?`: 'do-btn-primary' | 'do-btn-secondary' | 'do-btn-tertiary' | 'do-btn-accent' | 'do-btn-neutral'
|
|
20
29
|
* - `size?`: rem units
|
|
@@ -22,6 +31,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
22
31
|
* - `disabled?`: boolean
|
|
23
32
|
* - `rounded?`: boolean
|
|
24
33
|
* - `loading?`: boolean
|
|
34
|
+
* - `onClick`: () => void
|
|
35
|
+
* - `ariaLabel`: string
|
|
36
|
+
* - `ariaDisabled`?: boolean
|
|
25
37
|
* - `iconName?`: any icon name from the Icon component
|
|
26
38
|
* - `iconSize?`: rem units
|
|
27
39
|
* - `iconColor?`: hex units #000
|
|
@@ -34,29 +46,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
34
46
|
* - `iCustomStyles?`: any CSS style
|
|
35
47
|
* ```
|
|
36
48
|
*/
|
|
37
|
-
declare const IconButton:
|
|
38
|
-
|
|
39
|
-
variant?: "do-btn-primary" | "do-btn-secondary" | "do-btn-tertiary" | "do-btn-link" | "do-btn-accent" | undefined;
|
|
40
|
-
size?: "do-btn-sm" | "do-btn-md" | "do-btn-lg" | undefined;
|
|
41
|
-
label?: string | undefined;
|
|
42
|
-
disabled?: boolean | undefined;
|
|
43
|
-
loading?: boolean | undefined;
|
|
44
|
-
iconName?: iProps["iconName"] | undefined;
|
|
45
|
-
iconSize?: string | undefined;
|
|
46
|
-
iconColor?: string | undefined;
|
|
47
|
-
iconPosition?: "start" | "end" | undefined;
|
|
48
|
-
rounded?: boolean | undefined;
|
|
49
|
-
circle?: boolean | undefined;
|
|
50
|
-
square?: boolean | undefined;
|
|
51
|
-
btnCustomClass?: string | undefined;
|
|
52
|
-
iCustomClass?: string | undefined;
|
|
53
|
-
btnCustomStyles?: string | undefined;
|
|
54
|
-
iCustomStyles?: string | undefined;
|
|
55
|
-
}, {
|
|
56
|
-
click: any;
|
|
57
|
-
} & {
|
|
58
|
-
[evt: string]: CustomEvent<any>;
|
|
59
|
-
}, {}, {}, string>;
|
|
60
|
-
type IconButton = InstanceType<typeof IconButton>;
|
|
49
|
+
declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
50
|
+
type IconButton = ReturnType<typeof IconButton>;
|
|
61
51
|
export default IconButton;
|
|
62
52
|
//# sourceMappingURL=IconButton.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/IconButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEzC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;CACtB,CAAC;AA8CH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -6,6 +6,9 @@ export interface iProps extends HTMLButtonAttributes {
|
|
|
6
6
|
label?: string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
loading?: boolean;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
ariaLabel: string;
|
|
11
|
+
ariaDisabled?: boolean | undefined;
|
|
9
12
|
iconName: IconNames;
|
|
10
13
|
iconSize?: string;
|
|
11
14
|
iconColor?: string;
|
|
@@ -18,5 +21,8 @@ export interface iProps extends HTMLButtonAttributes {
|
|
|
18
21
|
iCustomClass?: string;
|
|
19
22
|
btnCustomStyles?: string;
|
|
20
23
|
iCustomStyles?: string;
|
|
24
|
+
data?: {
|
|
25
|
+
[key: string]: string;
|
|
26
|
+
};
|
|
21
27
|
}
|
|
22
28
|
//# sourceMappingURL=iProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/IconButton/iProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,WAAW,MAAO,SAAQ,oBAAoB;IACnD,OAAO,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,aAAa,GAAG,eAAe,CAAC;IACtG,IAAI,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAC;CAC/B"}
|