@valerius_petrini/corekit-ui 0.1.77 → 0.1.79
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.
|
@@ -29,72 +29,45 @@
|
|
|
29
29
|
...restProps
|
|
30
30
|
}: ButtonProps = $props();
|
|
31
31
|
|
|
32
|
-
const
|
|
33
|
-
"inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
|
|
34
|
-
const disabledClass = $derived(
|
|
35
|
-
disabled || loading
|
|
36
|
-
? "opacity-50 pointer-events-none"
|
|
37
|
-
: "cursor-pointer",
|
|
38
|
-
);
|
|
39
|
-
const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
|
|
40
|
-
const pillClass = $derived((pill || icon) && "rounded-full");
|
|
41
|
-
const squareClass = $derived(square && "aspect-square rounded-none");
|
|
32
|
+
const isDisabled = $derived(disabled || loading);
|
|
42
33
|
|
|
43
|
-
const mergedClass = $derived(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
pillClass,
|
|
55
|
-
squareClass,
|
|
56
|
-
className,
|
|
57
|
-
),
|
|
58
|
-
);
|
|
34
|
+
const mergedClass = $derived(twMerge(
|
|
35
|
+
"inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap",
|
|
36
|
+
generateColorStyle(color, variant),
|
|
37
|
+
isDisabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
|
|
38
|
+
getSizeStyleClassRecord(size, icon ? buttonIconSizeStyles : buttonSizeStyles),
|
|
39
|
+
getSizeStyleClass(radius, "radius"),
|
|
40
|
+
icon ? "p-0 flex-none" : "h-fit",
|
|
41
|
+
(pill || icon) && "rounded-full",
|
|
42
|
+
square && "aspect-square rounded-none",
|
|
43
|
+
className,
|
|
44
|
+
));
|
|
59
45
|
|
|
60
|
-
const mergedStyle = $derived(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
?
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
]
|
|
70
|
-
.filter(Boolean)
|
|
71
|
-
.join("; "),
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
const anchorProps = $derived(
|
|
75
|
-
getLinkProps(href, external, disabled || loading),
|
|
76
|
-
);
|
|
46
|
+
const mergedStyle = $derived([
|
|
47
|
+
typeof size === "number"
|
|
48
|
+
? icon
|
|
49
|
+
? `height: ${size}px; width: ${size}px; padding: ${size / 4}px`
|
|
50
|
+
: `height: ${size}px; padding: ${size / 4}px ${size / 8}px`
|
|
51
|
+
: "",
|
|
52
|
+
getSizeStyle(radius, "radius"),
|
|
53
|
+
restProps.style,
|
|
54
|
+
].filter(Boolean).join("; "));
|
|
77
55
|
</script>
|
|
78
56
|
|
|
79
57
|
<svelte:element
|
|
80
58
|
this={href ? "a" : "button"}
|
|
81
59
|
class={mergedClass}
|
|
82
|
-
disabled={
|
|
83
|
-
aria-disabled={
|
|
60
|
+
disabled={isDisabled}
|
|
61
|
+
aria-disabled={isDisabled}
|
|
62
|
+
aria-busy={loading}
|
|
84
63
|
type={href ? undefined : restProps.type || "button"}
|
|
85
64
|
style={mergedStyle}
|
|
86
|
-
{...
|
|
65
|
+
{...getLinkProps(href, external, isDisabled)}
|
|
87
66
|
{...restProps}
|
|
88
67
|
bind:this={element}
|
|
89
68
|
>
|
|
90
69
|
{#if loading}
|
|
91
|
-
<Loader
|
|
92
|
-
color="white"
|
|
93
|
-
class="border-2 border-loader-btn-color {getSizeStyleClass(
|
|
94
|
-
size,
|
|
95
|
-
'buttonLoader',
|
|
96
|
-
)}"
|
|
97
|
-
/>
|
|
70
|
+
<Loader color="white" class="border-2 border-loader-btn-color {getSizeStyleClass(size, 'buttonLoader')}" />
|
|
98
71
|
{/if}
|
|
99
72
|
{@render children?.()}
|
|
100
73
|
</svelte:element>
|
|
@@ -5,6 +5,7 @@ export { default as Select } from "./Select/index.svelte";
|
|
|
5
5
|
export { default as FileInput } from "./FileInput/index.svelte";
|
|
6
6
|
export { default as Combobox } from "./Combobox/index.svelte";
|
|
7
7
|
export { default as ColorInput } from "./ColorInput/index.svelte";
|
|
8
|
+
export { default as Textarea } from "./Textarea/index.svelte";
|
|
8
9
|
export type { ButtonProps } from "./Button/types.ts";
|
|
9
10
|
export type { CheckboxProps } from "./Checkbox/types.ts";
|
|
10
11
|
export type { InputProps } from "./Input/types.ts";
|
|
@@ -12,3 +13,4 @@ export type { SelectProps } from "./Select/types.ts";
|
|
|
12
13
|
export type { FileInputProps } from "./FileInput/types.ts";
|
|
13
14
|
export type { ComboboxProps } from "./Combobox/types.ts";
|
|
14
15
|
export type { ColorInputProps } from "./ColorInput/types.ts";
|
|
16
|
+
export type { TextareaProps } from "./Textarea/types.ts";
|
|
@@ -5,3 +5,4 @@ export { default as Select } from "./Select/index.svelte";
|
|
|
5
5
|
export { default as FileInput } from "./FileInput/index.svelte";
|
|
6
6
|
export { default as Combobox } from "./Combobox/index.svelte";
|
|
7
7
|
export { default as ColorInput } from "./ColorInput/index.svelte";
|
|
8
|
+
export { default as Textarea } from "./Textarea/index.svelte";
|
|
@@ -62,13 +62,8 @@
|
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
open = false;
|
|
68
|
-
} else {
|
|
69
|
-
ready = false;
|
|
70
|
-
open = true;
|
|
71
|
-
}
|
|
65
|
+
function toggle() {
|
|
66
|
+
open = !open;
|
|
72
67
|
}
|
|
73
68
|
|
|
74
69
|
function handleClickOutside(event: MouseEvent) {
|
|
@@ -98,15 +93,16 @@
|
|
|
98
93
|
{#if open}
|
|
99
94
|
<div
|
|
100
95
|
use:initDropdown
|
|
96
|
+
role="menu"
|
|
101
97
|
style="position: fixed; top: {y}px; left: {x}px;"
|
|
102
98
|
class="z-100 shadow-lg"
|
|
103
99
|
style:visibility={ready ? "visible" : "hidden"}
|
|
104
100
|
>
|
|
105
101
|
<div
|
|
106
102
|
transition:fly={flyParams}
|
|
107
|
-
class="bg-sub-background p-2 min-w-max flex flex-col
|
|
103
|
+
class="bg-sub-background p-2 min-w-max flex flex-col rounded border border-white/10 shadow-xl shadow-black/40"
|
|
108
104
|
>
|
|
109
|
-
<button onclick={() => (open = false)} class="contents">
|
|
105
|
+
<button onclick={() => (open = false)} class="contents *:w-full [&_a]:justify-start [&_a]:py-0.5 [&_a]:px-2.5 [&_a]:rounded">
|
|
110
106
|
{@render children?.()}
|
|
111
107
|
</button>
|
|
112
108
|
</div>
|