@pathscale/ui 0.0.8 → 0.0.10
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/chunk/3FBDYV4P.js +143 -0
- package/dist/chunk/55B7Q4NT.jsx +258 -0
- package/dist/chunk/{6B7HOWQD.js → EE4HXMKA.js} +5 -5
- package/dist/chunk/{YAQK2KFY.jsx → GA2HCFRS.jsx} +35 -1
- package/dist/chunk/{5R7S7TXL.jsx → GWFGP2JQ.jsx} +5 -5
- package/dist/chunk/{TFLJI242.js → NZZRKP74.js} +25 -1
- package/dist/chunk/OJRG4ZAB.jsx +143 -0
- package/dist/chunk/{5KABSQPM.js → OYAKKETQ.js} +1 -1
- package/dist/chunk/P653OZ5D.js +224 -0
- package/dist/chunk/{YM2NLFQE.jsx → R6COBCN7.jsx} +1 -1
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/index.jsx +1 -2
- package/dist/components/dropdown/index.d.ts +17 -33
- package/dist/components/dropdown/index.js +1 -1
- package/dist/components/dropdown/index.jsx +4 -3
- package/dist/components/navbar/index.d.ts +18 -56
- package/dist/components/navbar/index.js +1 -1
- package/dist/components/navbar/index.jsx +1 -1
- package/dist/components/switch/index.js +1 -1
- package/dist/components/switch/index.jsx +1 -1
- package/dist/components/tooltip/index.js +1 -1
- package/dist/components/tooltip/index.jsx +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -5
- package/dist/index.jsx +16 -15
- package/package.json +1 -1
- package/dist/chunk/7ROVLN3J.js +0 -175
- package/dist/chunk/BBDVIXAH.jsx +0 -194
- package/dist/chunk/D2BEL4SM.jsx +0 -169
- package/dist/chunk/OSJ3P7PI.js +0 -189
- package/dist/chunk/SCJSBRV2.jsx +0 -39
- package/dist/chunk/YMO6RPS6.js +0 -26
package/dist/chunk/7ROVLN3J.js
DELETED
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
import { buttonVariants } from './TFLJI242.js';
|
|
2
|
-
import { cva, classes } from './HKS7ET6T.js';
|
|
3
|
-
import { delegateEvents, template, spread, mergeProps, insert, addEventListener, use, createComponent, effect, className, setAttribute } from 'solid-js/web';
|
|
4
|
-
import { splitProps, createMemo, Show, createSignal, onMount, onCleanup } from 'solid-js';
|
|
5
|
-
|
|
6
|
-
function useDropdown(trigger, disabled = false) {
|
|
7
|
-
const [open, setOpen] = createSignal(false);
|
|
8
|
-
let ref;
|
|
9
|
-
const toggle = () => {
|
|
10
|
-
if (!disabled && trigger === "click") {
|
|
11
|
-
setOpen((v) => !v);
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const onEnter = () => {
|
|
15
|
-
if (!disabled && trigger === "hover") setOpen(true);
|
|
16
|
-
};
|
|
17
|
-
const onLeave = () => {
|
|
18
|
-
if (!disabled && trigger === "hover") setOpen(false);
|
|
19
|
-
};
|
|
20
|
-
const onClickOutside = (e) => {
|
|
21
|
-
if (trigger === "click" && ref && !ref.contains(e.target)) {
|
|
22
|
-
setOpen(false);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
onMount(() => {
|
|
26
|
-
document.addEventListener("click", onClickOutside);
|
|
27
|
-
onCleanup(() => document.removeEventListener("click", onClickOutside));
|
|
28
|
-
});
|
|
29
|
-
return {
|
|
30
|
-
open,
|
|
31
|
-
ref: (el) => ref = el,
|
|
32
|
-
toggle,
|
|
33
|
-
onEnter,
|
|
34
|
-
onLeave
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// src/components/dropdown/Dropdown.styles.ts
|
|
39
|
-
var dropdownVariants = cva(
|
|
40
|
-
[
|
|
41
|
-
"absolute mt-2 shadow-lg z-10",
|
|
42
|
-
"w-max rounded-md bg-white border border-gray-300",
|
|
43
|
-
"transition-all duration-150 ease-in-out",
|
|
44
|
-
"flex flex-col"
|
|
45
|
-
],
|
|
46
|
-
{
|
|
47
|
-
variants: {
|
|
48
|
-
position: {
|
|
49
|
-
"bottom-left": "left-0 top-full text-black",
|
|
50
|
-
"bottom-right": "right-0 top-full text-black",
|
|
51
|
-
"top-left": "left-0 bottom-full text-black",
|
|
52
|
-
"top-right": "right-0 bottom-full text-black"
|
|
53
|
-
},
|
|
54
|
-
open: {
|
|
55
|
-
true: "block",
|
|
56
|
-
false: "hidden"
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
defaultVariants: {
|
|
60
|
-
position: "bottom-left",
|
|
61
|
-
open: false
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
var dropdownItemVariants = cva(
|
|
66
|
-
"px-4 py-2 cursor-pointer transition-colors duration-150 ease-in-out hover:bg-gray-100",
|
|
67
|
-
{
|
|
68
|
-
variants: {
|
|
69
|
-
hasLink: { true: "p-0 text-blue-600 hover:underline", false: "" }
|
|
70
|
-
},
|
|
71
|
-
defaultVariants: { hasLink: false }
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
// src/components/dropdown/DropdownMenu.tsx
|
|
76
|
-
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
77
|
-
var DropdownMenu = (props) => {
|
|
78
|
-
const [local, other] = splitProps(props, ["open", "position", "children"]);
|
|
79
|
-
return (() => {
|
|
80
|
-
var _el$ = _tmpl$();
|
|
81
|
-
spread(_el$, mergeProps({
|
|
82
|
-
get ["class"]() {
|
|
83
|
-
return dropdownVariants({
|
|
84
|
-
open: local.open,
|
|
85
|
-
position: local.position
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
}, other, {
|
|
89
|
-
"id": "dropdown-menu",
|
|
90
|
-
"role": "menu"
|
|
91
|
-
}), false, true);
|
|
92
|
-
insert(_el$, () => local.children);
|
|
93
|
-
return _el$;
|
|
94
|
-
})();
|
|
95
|
-
};
|
|
96
|
-
var DropdownMenu_default = DropdownMenu;
|
|
97
|
-
|
|
98
|
-
// src/components/dropdown/Dropdown.tsx
|
|
99
|
-
var _tmpl$2 = /* @__PURE__ */ template(`<div><button type=button aria-controls=dropdown-menu>`);
|
|
100
|
-
var Dropdown = (props) => {
|
|
101
|
-
const [localProps, variantProps, restProps] = splitProps(props, ["label", "disabledLabel", "trigger", "children", "disabled", "color", "class", "className"], Object.keys(dropdownVariants.variantKeys ?? {}));
|
|
102
|
-
const {
|
|
103
|
-
open,
|
|
104
|
-
ref,
|
|
105
|
-
toggle,
|
|
106
|
-
onEnter,
|
|
107
|
-
onLeave
|
|
108
|
-
} = useDropdown(localProps.trigger ?? "click", !!localProps.disabled);
|
|
109
|
-
const labelContent = createMemo(() => localProps.disabled ? localProps.disabledLabel ?? localProps.label : localProps.label ?? "Toggle");
|
|
110
|
-
const containerClass = createMemo(() => classes("relative inline-block", localProps.class, localProps.className));
|
|
111
|
-
const buttonClass = createMemo(() => buttonVariants({
|
|
112
|
-
color: "primary"
|
|
113
|
-
}));
|
|
114
|
-
return (() => {
|
|
115
|
-
var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
|
|
116
|
-
addEventListener(_el$, "mouseleave", onLeave);
|
|
117
|
-
addEventListener(_el$, "mouseenter", onEnter);
|
|
118
|
-
use(ref, _el$);
|
|
119
|
-
spread(_el$, mergeProps({
|
|
120
|
-
get ["class"]() {
|
|
121
|
-
return containerClass();
|
|
122
|
-
}
|
|
123
|
-
}, restProps), false, true);
|
|
124
|
-
_el$2.$$click = (e) => {
|
|
125
|
-
e.preventDefault();
|
|
126
|
-
if (localProps.trigger === "click") toggle();
|
|
127
|
-
};
|
|
128
|
-
insert(_el$2, labelContent);
|
|
129
|
-
insert(_el$, createComponent(Show, {
|
|
130
|
-
get when() {
|
|
131
|
-
return open();
|
|
132
|
-
},
|
|
133
|
-
get children() {
|
|
134
|
-
return createComponent(DropdownMenu_default, mergeProps({
|
|
135
|
-
open: true
|
|
136
|
-
}, variantProps, {
|
|
137
|
-
get children() {
|
|
138
|
-
return localProps.children;
|
|
139
|
-
}
|
|
140
|
-
}));
|
|
141
|
-
}
|
|
142
|
-
}), null);
|
|
143
|
-
effect((_p$) => {
|
|
144
|
-
var _v$ = buttonClass(), _v$2 = localProps.disabled, _v$3 = localProps.disabled;
|
|
145
|
-
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
146
|
-
_v$2 !== _p$.t && setAttribute(_el$2, "aria-disabled", _p$.t = _v$2);
|
|
147
|
-
_v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
|
|
148
|
-
return _p$;
|
|
149
|
-
}, {
|
|
150
|
-
e: void 0,
|
|
151
|
-
t: void 0,
|
|
152
|
-
a: void 0
|
|
153
|
-
});
|
|
154
|
-
return _el$;
|
|
155
|
-
})();
|
|
156
|
-
};
|
|
157
|
-
var Dropdown_default = Dropdown;
|
|
158
|
-
delegateEvents(["click"]);
|
|
159
|
-
var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
|
|
160
|
-
var DropdownItem = ({
|
|
161
|
-
hasLink = false,
|
|
162
|
-
children
|
|
163
|
-
}) => {
|
|
164
|
-
return (() => {
|
|
165
|
-
var _el$ = _tmpl$3();
|
|
166
|
-
insert(_el$, children);
|
|
167
|
-
effect(() => className(_el$, dropdownItemVariants({
|
|
168
|
-
hasLink
|
|
169
|
-
})));
|
|
170
|
-
return _el$;
|
|
171
|
-
})();
|
|
172
|
-
};
|
|
173
|
-
var DropdownItem_default = DropdownItem;
|
|
174
|
-
|
|
175
|
-
export { DropdownItem_default, DropdownMenu_default, Dropdown_default };
|
package/dist/chunk/BBDVIXAH.jsx
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
classes,
|
|
3
|
-
cva
|
|
4
|
-
} from "./P7WPLZNA.jsx";
|
|
5
|
-
|
|
6
|
-
// src/components/navbar/Navbar.tsx
|
|
7
|
-
import {
|
|
8
|
-
splitProps,
|
|
9
|
-
Show
|
|
10
|
-
} from "solid-js";
|
|
11
|
-
|
|
12
|
-
// src/components/navbar/Navbar.styles.ts
|
|
13
|
-
var navbarStyles = cva("flex items-center px-4", {
|
|
14
|
-
variants: {
|
|
15
|
-
color: {
|
|
16
|
-
info: "bg-blue-500 text-white",
|
|
17
|
-
primary: "bg-indigo-600 text-white",
|
|
18
|
-
success: "bg-green-500 text-white",
|
|
19
|
-
light: "bg-white text-gray-800"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
color: "info"
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
var navbarItemStyles = cva(
|
|
27
|
-
"px-3 py-2 rounded transition-colors",
|
|
28
|
-
{
|
|
29
|
-
variants: {
|
|
30
|
-
active: {
|
|
31
|
-
true: "font-semibold border-b-2 border-current",
|
|
32
|
-
false: "hover:bg-gray-200"
|
|
33
|
-
},
|
|
34
|
-
tag: {
|
|
35
|
-
div: "",
|
|
36
|
-
a: ""
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
defaultVariants: {
|
|
40
|
-
active: false,
|
|
41
|
-
tag: "div"
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
);
|
|
45
|
-
var navbarDropdownStyles = cva("relative", {
|
|
46
|
-
variants: {
|
|
47
|
-
hoverable: {
|
|
48
|
-
true: "group",
|
|
49
|
-
false: ""
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
defaultVariants: {
|
|
53
|
-
hoverable: false
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
var dropdownMenuStyles = cva(
|
|
57
|
-
"absolute mt-2 bg-white text-gray-800 rounded shadow-lg hidden group-hover:block",
|
|
58
|
-
{
|
|
59
|
-
variants: {
|
|
60
|
-
align: {
|
|
61
|
-
left: "left-0",
|
|
62
|
-
right: "right-0"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: {
|
|
66
|
-
align: "left"
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
);
|
|
70
|
-
var imageStyles = cva("", {
|
|
71
|
-
variants: {
|
|
72
|
-
rounded: {
|
|
73
|
-
true: "rounded-full",
|
|
74
|
-
false: ""
|
|
75
|
-
},
|
|
76
|
-
size: {
|
|
77
|
-
sm: "w-6 h-6",
|
|
78
|
-
md: "w-8 h-8",
|
|
79
|
-
lg: "w-12 h-12"
|
|
80
|
-
},
|
|
81
|
-
bordered: {
|
|
82
|
-
true: "border border-gray-200",
|
|
83
|
-
false: ""
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
defaultVariants: {
|
|
87
|
-
rounded: false,
|
|
88
|
-
size: "md",
|
|
89
|
-
bordered: false
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
// src/components/navbar/Navbar.tsx
|
|
94
|
-
var Navbar = (props) => {
|
|
95
|
-
const [local, variantProps, other] = splitProps(
|
|
96
|
-
props,
|
|
97
|
-
["class", "className", "brand", "start", "end"],
|
|
98
|
-
Object.keys(navbarStyles.variantKeys ?? {})
|
|
99
|
-
);
|
|
100
|
-
return <nav
|
|
101
|
-
class={classes(
|
|
102
|
-
navbarStyles({ color: variantProps.color }),
|
|
103
|
-
local.class,
|
|
104
|
-
local.className
|
|
105
|
-
)}
|
|
106
|
-
{...other}
|
|
107
|
-
>
|
|
108
|
-
<Show when={local.brand}>
|
|
109
|
-
<div class="flex-shrink-0 mr-4">{local.brand}</div>
|
|
110
|
-
</Show>
|
|
111
|
-
|
|
112
|
-
<Show when={local.start}>
|
|
113
|
-
<div class="flex-1 flex items-center space-x-2">{local.start}</div>
|
|
114
|
-
</Show>
|
|
115
|
-
|
|
116
|
-
<Show when={local.end}>
|
|
117
|
-
<div class="flex-1 flex justify-end space-x-2">{local.end}</div>
|
|
118
|
-
</Show>
|
|
119
|
-
</nav>;
|
|
120
|
-
};
|
|
121
|
-
var Navbar_default = Navbar;
|
|
122
|
-
|
|
123
|
-
// src/components/navbar/NavbarItem.tsx
|
|
124
|
-
import {
|
|
125
|
-
splitProps as splitProps2
|
|
126
|
-
} from "solid-js";
|
|
127
|
-
import { Dynamic } from "solid-js/web";
|
|
128
|
-
var NavbarItem = (props) => {
|
|
129
|
-
const [local, variantProps, other] = splitProps2(
|
|
130
|
-
props,
|
|
131
|
-
[
|
|
132
|
-
"class",
|
|
133
|
-
"className",
|
|
134
|
-
"active",
|
|
135
|
-
"href",
|
|
136
|
-
"tag",
|
|
137
|
-
"to",
|
|
138
|
-
"children"
|
|
139
|
-
],
|
|
140
|
-
Object.keys(navbarItemStyles.variantKeys ?? {})
|
|
141
|
-
);
|
|
142
|
-
const Tag = local.tag === "a" || local.href || local.to ? "a" : "div";
|
|
143
|
-
return <Dynamic
|
|
144
|
-
component={Tag}
|
|
145
|
-
class={classes(
|
|
146
|
-
navbarItemStyles({
|
|
147
|
-
active: !!local.active,
|
|
148
|
-
tag: local.tag ?? (Tag === "a" ? "a" : "div")
|
|
149
|
-
}),
|
|
150
|
-
local.class,
|
|
151
|
-
local.className
|
|
152
|
-
)}
|
|
153
|
-
href={local.href ?? local.to}
|
|
154
|
-
{...other}
|
|
155
|
-
>
|
|
156
|
-
{local.children}
|
|
157
|
-
</Dynamic>;
|
|
158
|
-
};
|
|
159
|
-
var NavbarItem_default = NavbarItem;
|
|
160
|
-
|
|
161
|
-
// src/components/navbar/NavbarDropdown.tsx
|
|
162
|
-
import { splitProps as splitProps3, Show as Show2 } from "solid-js";
|
|
163
|
-
var NavbarDropdown = (props) => {
|
|
164
|
-
const [local, variantProps, other] = splitProps3(
|
|
165
|
-
props,
|
|
166
|
-
["class", "className", "label", "hoverable", "children"],
|
|
167
|
-
[
|
|
168
|
-
...Object.keys(navbarDropdownStyles.variantKeys ?? {}),
|
|
169
|
-
...Object.keys(dropdownMenuStyles.variantKeys ?? {})
|
|
170
|
-
]
|
|
171
|
-
);
|
|
172
|
-
return <div
|
|
173
|
-
class={classes(
|
|
174
|
-
navbarDropdownStyles({ hoverable: !!local.hoverable }),
|
|
175
|
-
local.class,
|
|
176
|
-
local.className
|
|
177
|
-
)}
|
|
178
|
-
{...other}
|
|
179
|
-
>
|
|
180
|
-
<div class="cursor-pointer">{local.label}</div>
|
|
181
|
-
<Show2 when={local.hoverable}>
|
|
182
|
-
<div class={dropdownMenuStyles({ align: variantProps.align })}>
|
|
183
|
-
{local.children}
|
|
184
|
-
</div>
|
|
185
|
-
</Show2>
|
|
186
|
-
</div>;
|
|
187
|
-
};
|
|
188
|
-
var NavbarDropdown_default = NavbarDropdown;
|
|
189
|
-
|
|
190
|
-
export {
|
|
191
|
-
Navbar_default,
|
|
192
|
-
NavbarItem_default,
|
|
193
|
-
NavbarDropdown_default
|
|
194
|
-
};
|
package/dist/chunk/D2BEL4SM.jsx
DELETED
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
buttonVariants
|
|
3
|
-
} from "./YAQK2KFY.jsx";
|
|
4
|
-
import {
|
|
5
|
-
classes,
|
|
6
|
-
cva
|
|
7
|
-
} from "./P7WPLZNA.jsx";
|
|
8
|
-
|
|
9
|
-
// src/components/dropdown/Dropdown.tsx
|
|
10
|
-
import {
|
|
11
|
-
splitProps as splitProps2,
|
|
12
|
-
createMemo,
|
|
13
|
-
Show
|
|
14
|
-
} from "solid-js";
|
|
15
|
-
|
|
16
|
-
// src/components/dropdown/useDropdown.ts
|
|
17
|
-
import { createSignal, onMount, onCleanup } from "solid-js";
|
|
18
|
-
function useDropdown(trigger, disabled = false) {
|
|
19
|
-
const [open, setOpen] = createSignal(false);
|
|
20
|
-
let ref;
|
|
21
|
-
const toggle = () => {
|
|
22
|
-
if (!disabled && trigger === "click") {
|
|
23
|
-
setOpen((v) => !v);
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
const onEnter = () => {
|
|
27
|
-
if (!disabled && trigger === "hover") setOpen(true);
|
|
28
|
-
};
|
|
29
|
-
const onLeave = () => {
|
|
30
|
-
if (!disabled && trigger === "hover") setOpen(false);
|
|
31
|
-
};
|
|
32
|
-
const onClickOutside = (e) => {
|
|
33
|
-
if (trigger === "click" && ref && !ref.contains(e.target)) {
|
|
34
|
-
setOpen(false);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
onMount(() => {
|
|
38
|
-
document.addEventListener("click", onClickOutside);
|
|
39
|
-
onCleanup(() => document.removeEventListener("click", onClickOutside));
|
|
40
|
-
});
|
|
41
|
-
return {
|
|
42
|
-
open,
|
|
43
|
-
ref: (el) => ref = el,
|
|
44
|
-
toggle,
|
|
45
|
-
onEnter,
|
|
46
|
-
onLeave
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// src/components/dropdown/DropdownMenu.tsx
|
|
51
|
-
import { splitProps } from "solid-js";
|
|
52
|
-
|
|
53
|
-
// src/components/dropdown/Dropdown.styles.ts
|
|
54
|
-
var dropdownVariants = cva(
|
|
55
|
-
[
|
|
56
|
-
"absolute mt-2 shadow-lg z-10",
|
|
57
|
-
"w-max rounded-md bg-white border border-gray-300",
|
|
58
|
-
"transition-all duration-150 ease-in-out",
|
|
59
|
-
"flex flex-col"
|
|
60
|
-
],
|
|
61
|
-
{
|
|
62
|
-
variants: {
|
|
63
|
-
position: {
|
|
64
|
-
"bottom-left": "left-0 top-full text-black",
|
|
65
|
-
"bottom-right": "right-0 top-full text-black",
|
|
66
|
-
"top-left": "left-0 bottom-full text-black",
|
|
67
|
-
"top-right": "right-0 bottom-full text-black"
|
|
68
|
-
},
|
|
69
|
-
open: {
|
|
70
|
-
true: "block",
|
|
71
|
-
false: "hidden"
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
defaultVariants: {
|
|
75
|
-
position: "bottom-left",
|
|
76
|
-
open: false
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
);
|
|
80
|
-
var dropdownItemVariants = cva(
|
|
81
|
-
"px-4 py-2 cursor-pointer transition-colors duration-150 ease-in-out hover:bg-gray-100",
|
|
82
|
-
{
|
|
83
|
-
variants: {
|
|
84
|
-
hasLink: { true: "p-0 text-blue-600 hover:underline", false: "" }
|
|
85
|
-
},
|
|
86
|
-
defaultVariants: { hasLink: false }
|
|
87
|
-
}
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
// src/components/dropdown/DropdownMenu.tsx
|
|
91
|
-
var DropdownMenu = (props) => {
|
|
92
|
-
const [local, other] = splitProps(props, ["open", "position", "children"]);
|
|
93
|
-
return <div
|
|
94
|
-
class={dropdownVariants({ open: local.open, position: local.position })}
|
|
95
|
-
{...other}
|
|
96
|
-
id="dropdown-menu"
|
|
97
|
-
role="menu"
|
|
98
|
-
>
|
|
99
|
-
{local.children}
|
|
100
|
-
</div>;
|
|
101
|
-
};
|
|
102
|
-
var DropdownMenu_default = DropdownMenu;
|
|
103
|
-
|
|
104
|
-
// src/components/dropdown/Dropdown.tsx
|
|
105
|
-
var Dropdown = (props) => {
|
|
106
|
-
const [localProps, variantProps, restProps] = splitProps2(
|
|
107
|
-
props,
|
|
108
|
-
["label", "disabledLabel", "trigger", "children", "disabled", "color", "class", "className"],
|
|
109
|
-
Object.keys(dropdownVariants.variantKeys ?? {})
|
|
110
|
-
);
|
|
111
|
-
const { open, ref, toggle, onEnter, onLeave } = useDropdown(
|
|
112
|
-
localProps.trigger ?? "click",
|
|
113
|
-
!!localProps.disabled
|
|
114
|
-
);
|
|
115
|
-
const labelContent = createMemo(
|
|
116
|
-
() => localProps.disabled ? localProps.disabledLabel ?? localProps.label : localProps.label ?? "Toggle"
|
|
117
|
-
);
|
|
118
|
-
const containerClass = createMemo(
|
|
119
|
-
() => classes("relative inline-block", localProps.class, localProps.className)
|
|
120
|
-
);
|
|
121
|
-
const buttonClass = createMemo(
|
|
122
|
-
() => buttonVariants({
|
|
123
|
-
color: "primary"
|
|
124
|
-
})
|
|
125
|
-
);
|
|
126
|
-
return <div
|
|
127
|
-
ref={ref}
|
|
128
|
-
onMouseEnter={onEnter}
|
|
129
|
-
onMouseLeave={onLeave}
|
|
130
|
-
class={containerClass()}
|
|
131
|
-
{...restProps}
|
|
132
|
-
>
|
|
133
|
-
<button
|
|
134
|
-
type="button"
|
|
135
|
-
onClick={(e) => {
|
|
136
|
-
e.preventDefault();
|
|
137
|
-
if (localProps.trigger === "click") toggle();
|
|
138
|
-
}}
|
|
139
|
-
class={buttonClass()}
|
|
140
|
-
aria-disabled={localProps.disabled}
|
|
141
|
-
disabled={localProps.disabled}
|
|
142
|
-
aria-controls="dropdown-menu"
|
|
143
|
-
>
|
|
144
|
-
{labelContent()}
|
|
145
|
-
</button>
|
|
146
|
-
|
|
147
|
-
<Show when={open()}>
|
|
148
|
-
<DropdownMenu_default open {...variantProps}>
|
|
149
|
-
{localProps.children}
|
|
150
|
-
</DropdownMenu_default>
|
|
151
|
-
</Show>
|
|
152
|
-
</div>;
|
|
153
|
-
};
|
|
154
|
-
var Dropdown_default = Dropdown;
|
|
155
|
-
|
|
156
|
-
// src/components/dropdown/DropdownItem.tsx
|
|
157
|
-
import "solid-js";
|
|
158
|
-
var DropdownItem = ({ hasLink = false, children }) => {
|
|
159
|
-
return <div class={dropdownItemVariants({ hasLink })}>
|
|
160
|
-
{children}
|
|
161
|
-
</div>;
|
|
162
|
-
};
|
|
163
|
-
var DropdownItem_default = DropdownItem;
|
|
164
|
-
|
|
165
|
-
export {
|
|
166
|
-
DropdownMenu_default,
|
|
167
|
-
Dropdown_default,
|
|
168
|
-
DropdownItem_default
|
|
169
|
-
};
|