{
70 | runEvent(ev, ev.currentTarget);
71 | if (accordionRef()?.open && !options.allowToggle && (!options.allowMultiple || opened() === 1)) {
72 | ev.preventDefault();
73 | }
74 | } : props.onClick}
75 | onToggle={(ev) => {
76 | if (options && opened && setOpened) {
77 | if (options.allowMultiple === true) {
78 | setOpened(opened() + (ev.currentTarget.open ? 1 : -1));
79 | } else if (ev.currentTarget.open) {
80 | setOpened(index);
81 | }
82 | }
83 | runEvent(ev, ev.currentTarget);
84 | local.setOpen?.(ev.currentTarget.open);
85 | }}
86 | open={!!props.open}
87 | />
88 | );
89 | };
90 |
91 | export type AccordionHeaderProps = JSX.HTMLAttributes;
92 |
93 | export const AccordionHeader: Component = (props) => (
94 | & {
103 | /** opening another accordion does not close the last opened one */
104 | allowMultiple?: boolean;
105 | /** the last open accordion may be closed */
106 | allowToggle?: boolean;
107 | };
108 |
109 | export const AccordionGroup: Component = (props) => {
110 | const [local, divProps] = splitProps(props, ["allowMultiple", "allowToggle"]);
111 | let accordions = -1;
112 | const [opened, setOpened] = createSignal(0);
113 |
114 | return (
115 | ++accordions, opened, setOpened]}>
116 |
122 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/src/blocks/avatar.css:
--------------------------------------------------------------------------------
1 | .sb-avatar:not([role="group"]) {
2 | align-items: center;
3 | border: var(--hair-line) solid var(--border-color);
4 | border-radius: var(--round-border-radius);
5 | display: inline-flex;
6 | font-size: 0.875em;
7 | font-weight: 700;
8 | height: 2.25em;
9 | justify-content: center;
10 | line-height: 2.25em;
11 | position: relative;
12 | vertical-align: middle;
13 | width: 2.25em;
14 | }
15 | .sb-avatar > img:first-child {
16 | border-radius: var(--round-border-radius);
17 | min-height: 100%;
18 | min-width: 100%;
19 | max-height: 100%;
20 | max-width: 100%;
21 | object-fit: cover;
22 | overflow: hidden;
23 | position: absolute;
24 | }
25 | .sb-avatar[role="group"] {
26 | display: inline-block;
27 | perspective: 1000em;
28 | transform-style: preserve-3d;
29 | }
30 | .sb-avatar[role="group"][aria-expanded="true"] .sb-avatar + .sb-avatar {
31 | margin-left: 0.25em;
32 | }
33 | .sb-avatar[role="group"]:not([aria-expanded="true"]) .sb-avatar + .sb-avatar {
34 | margin-left: -0.5em;
35 | transform: translateZ(-0.1em);
36 | }
37 | .sb-avatar[role="group"]:not([aria-expanded="true"])
38 | .sb-avatar
39 | + .sb-avatar:nth-child(3) {
40 | transform: translateZ(-0.2em);
41 | }
42 | .sb-avatar[role="group"]:not([aria-expanded="true"]) {
43 | counter-reset: items;
44 | }
45 | .sb-avatar[role="group"]:not([aria-expanded="true"])
46 | .sb-avatar:nth-child(3):not(:last-child),
47 | .sb-avatar[role="group"]:not([aria-expanded="true"])
48 | .sb-avatar
49 | + .sb-avatar
50 | + .sb-avatar
51 | + .sb-avatar {
52 | counter-increment: items;
53 | }
54 | .sb-avatar[role="group"]:not([aria-expanded="true"])
55 | .sb-avatar
56 | + .sb-avatar
57 | + .sb-avatar:not(:last-child) {
58 | height: 0;
59 | opacity: 0;
60 | position: absolute;
61 | width: 0;
62 | }
63 | .sb-avatar[role="group"]:not([aria-expanded="true"])
64 | .sb-avatar
65 | + .sb-avatar
66 | + .sb-avatar
67 | + .sb-avatar:last-child {
68 | overflow: hidden;
69 | text-indent: -10em;
70 | transform: translateZ(-0.2em);
71 | }
72 | .sb-avatar[role="group"]:not([aria-expanded="true"])
73 | .sb-avatar
74 | + .sb-avatar
75 | + .sb-avatar
76 | + .sb-avatar:last-child:before {
77 | background: var(--border-color);
78 | border: inherit;
79 | border-radius: var(--round-border-radius);
80 | content: "+" counter(items);
81 | font-weight: 400;
82 | font-size: 0.85em;
83 | position: absolute;
84 | text-align: center;
85 | text-indent: 0;
86 | width: inherit;
87 | }
88 | .sb-avatar[role="group"]:not([aria-expanded="true"])
89 | .sb-avatar
90 | + .sb-avatar:nth-child(101)
91 | ~ .sb-avatar:last-child:before {
92 | font-size: 0.6em;
93 | text-indent: 0.2em;
94 | }
95 | .sb-avatar[role="group"]:not([aria-expanded="true"])[data-plus]
96 | .sb-avatar
97 | + .sb-avatar
98 | + .sb-avatar
99 | + .sb-avatar:last-child:before {
100 | content: "\80"
101 | }
102 | .sb-avatar[role="group"]:not([aria-expanded="true"])[data-plus]:after {
103 | content: attr(data-plus);
104 | font-weight: 400;
105 | font-size: 0.7em;
106 | margin-left: -2.5em;
107 | margin-top: 0.3em;
108 | overflow: hidden;
109 | position: absolute;
110 | text-align: center;
111 | text-indent: 0;
112 | width: 2.25em;
113 | }
114 | .sb-avatar[data-random="1"] {
115 | background: var(--random-color1);
116 | }
117 | .sb-avatar[data-random="2"] {
118 | background: var(--random-color2);
119 | }
120 | .sb-avatar[data-random="3"] {
121 | background: var(--random-color3);
122 | }
123 | .sb-avatar[data-random="4"] {
124 | background: var(--random-color4);
125 | }
126 | .sb-avatar[data-random="5"] {
127 | background: var(--random-color5);
128 | }
129 | .sb-avatar[data-random="6"] {
130 | background: var(--random-color6);
131 | }
132 | .sb-avatar[data-random="7"] {
133 | background: var(--random-color7);
134 | }
135 | .sb-avatar[data-random="8"] {
136 | background: var(--random-color8);
137 | }
138 | .sb-avatar > .sb-badge {
139 | background: #d00;
140 | border-radius: 50%;
141 | border-color: #fff;
142 | border: 0.075em solid;
143 | bottom: 0;
144 | height: 0.5em;
145 | right: 0;
146 | position: absolute;
147 | width: 0.5em;
148 | }
149 | .sb-avatar[role="group"] .sb-avatar:nth-child(3):not(:last-child) .sb-badge {
150 | display: none;
151 | }
152 |
--------------------------------------------------------------------------------
/src/blocks/avatar.docs.tsx:
--------------------------------------------------------------------------------
1 | ;import { Avatar, AvatarBadge, AvatarGroup } from "./avatar"
2 | import { Checkbox } from './checkbox';
3 | import { createSignal } from "solid-js";
4 |
5 | export const AvatarDocs = () => {
6 | const [expanded, setExpanded] = createSignal(false);
7 | return <>
8 |
24 |
30 | aria-expanded
42 |
58 | 59 | } -------------------------------------------------------------------------------- /src/blocks/avatar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, createMemo, splitProps, mergeProps } from "solid-js"; 2 | import { composeStyles, getRandom } from "./tools"; 3 | import "./base.css"; 4 | import "./avatar.css"; 5 | 6 | export type AvatarProps = { 7 | img?: string; 8 | name?: string; 9 | fallback?: JSX.Element; 10 | plus?: number; 11 | } & JSX.HTMLAttributes;
12 |
13 | const char =
14 | "[A-Za-z\xAA\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02B8\u02E0-\u02E4\u0370-\u0373\u0375-\u0377\u037A-\u037D\u037F\u0384\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03E1\u03F0-\u0484\u0487-\u052F\u1C80-\u1C88\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FC4\u1FC6-\u1FD3\u1FD6-\u1FDB\u1FDD-\u1FEF\u1FF2-\u1FF4\u1FF6-\u1FFE\u2071\u207F\u2090-\u209C\u2126\u212A\u212B\u2132\u214E\u2160-\u2188\u2C60-\u2C7F\u2DE0-\u2DFF\uA640-\uA69F\uA722-\uA787\uA78B-\uA7BF\uA7C2-\uA7C6\uA7F7-\uA7FF\uAB30-\uAB5A\uAB5C-\uAB67\uFB00-\uFB06\uFE2E\uFE2F\uFF21-\uFF3A\uFF41-\uFF5A]|\uD800[\uDD40-\uDD8E\uDDA0]|\uD834[\uDE00-\uDE45]";
15 | const initialsRegexp = new RegExp(`^.*?(${char})(?:.*\\s+\\S*?(${char}))?.*$`);
16 |
17 | export const getInitials = (name: string) =>
18 | name
19 | // remove superfluous spaces and stuff in brackets
20 | .replace(/^\s+|\(.*?\)|\{.*?\}|\[.*\]|<.*?>|\s+$/g, "")
21 | // find first char of the first name and the last name
22 | .replace(initialsRegexp, "$1$2")
23 | .toUpperCase();
24 |
25 | export const Avatar: Component = (props) => {
26 | const [local, divProps] = splitProps(props, [
27 | "classList",
28 | "children",
29 | "img",
30 | "name",
31 | "fallback",
32 | ]);
33 | const initials = createMemo(() =>
34 | local.name ? getInitials(local.name) : ""
35 | );
36 |
37 | if (local.img) {
38 | return (
39 | ;
83 |
84 | export const AvatarBadge: Component = (props) => {
85 | const [local, spanProps] = splitProps(props, [
86 | "classList",
87 | "borderColor",
88 | "background",
89 | "style",
90 | ]);
91 | const composedStyle = composeStyles(local.style ?? {}, {
92 | "border-color": local.borderColor,
93 | background: local.background,
94 | });
95 |
96 | return (
97 |
102 | );
103 | };
104 |
105 | export type AvatarGroupProps = JSX.HTMLAttributes & {
106 | "data-plus"?: string;
107 | };
108 |
109 | export const AvatarGroup: Component = (props) => (
110 |
100 | ); 101 | 102 | export type AccordionGroupProps = JSX.HTMLAttributes
Avatar
9 |The <Avatar> component is meant to represent individuals, either by image or their name's initials. By default, the background will be selected randomly out of 8 colors; direct repetitions are avoided.
10 |Properties
11 |
12 | {`
13 | AvatarProps {
14 | img?: string;
15 | name?: string;
16 | fallback?: JSX.Element;
17 | }
18 | `}
19 |
20 |
21 | without props:
23 | 24 |
AvatarBadge
25 |Will present a badge at the lower right corner of the avatar.
26 |
27 |
29 | 30 |
AvatarGroup
31 |Properties
32 |
33 | {`
34 | AvatarGroupProps {
35 | aria-expanded?: boolean;
36 | }
37 | `}
38 |
39 | Effect
40 |An avatargroup allows a condensed view of 2 or more avatars that can be extended with the aria-expanded-Attribute.
42 |
43 |
44 |
49 | {" or with a data-plus attribute to set the last item manually (which obviously does not work if expanded): "}
50 |
51 |
56 |
57 | 58 | 59 | } -------------------------------------------------------------------------------- /src/blocks/avatar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, createMemo, splitProps, mergeProps } from "solid-js"; 2 | import { composeStyles, getRandom } from "./tools"; 3 | import "./base.css"; 4 | import "./avatar.css"; 5 | 6 | export type AvatarProps = { 7 | img?: string; 8 | name?: string; 9 | fallback?: JSX.Element; 10 | plus?: number; 11 | } & JSX.HTMLAttributes
45 | 
46 |
47 | {local.children}
48 |
49 | );
50 | }
51 | if (local.name) {
52 | return (
53 |
60 | {initials}
61 | {local.children}
62 |
63 | );
64 | }
65 | return (
66 |
73 | {local.fallback ?? "?"}
74 | {local.children}
75 |
76 | );
77 | };
78 |
79 | export type AvatarBadgeProps = {
80 | borderColor?: string;
81 | background?: string;
82 | } & JSX.HTMLAttributes 3}
115 | />
116 | );
117 |
--------------------------------------------------------------------------------
/src/blocks/bar.css:
--------------------------------------------------------------------------------
1 | .sb-bar {
2 | display: flex;
3 | flex-direction: row;
4 | justify-content: space-between;
5 | position: absolute;
6 | background: var(--background);
7 | z-index: var(--stack-bar);
8 | }
9 | .sb-bar[hidden] {
10 | display: none;
11 | }
12 | .transparent.sb-bar {
13 | background: transparent;
14 | }
15 | .left.sb-bar,
16 | .right.sb-bar {
17 | flex-direction: column;
18 | }
19 | .top.sb-bar {
20 | inset: 0 0 auto 0;
21 | border-bottom: var(--hair-line) solid var(--border-color);
22 | }
23 | .right.sb-bar {
24 | inset: 0 0 0 auto;
25 | border-left: var(--hair-line) solid var(--border-color);
26 | }
27 | .bottom.sb-bar {
28 | inset: auto 0 0 0;
29 | border-top: var(--hair-line) solid var(--border-color);
30 | }
31 | .left.sb-bar {
32 | inset: 0 auto 0 0;
33 | border-right: var(--hair-line) solid var(--border-color);
34 | }
35 | .borderless.sb-bar {
36 | border-color: transparent;
37 | }
38 | .sticky.sb-bar {
39 | position: sticky;
40 | }
41 | .fixed.sb-bar {
42 | position: fixed;
43 | }
44 | .relative.sb-bar {
45 | position: relative;
46 | }
47 | .top.relative.sb-bar,
48 | .bottom.relative.sb-bar {
49 | width: 100%;
50 | }
51 | .left.relative.sb-bar,
52 | .right.relative.sb-bar {
53 | height: 100%;
54 | }
55 | .sb-bar > * {
56 | align-items: center;
57 | justify-content: center;
58 | display: flex;
59 | flex-direction: inherit;
60 | margin-right: 0.5em;
61 | margin-left: 0.5em;
62 | }
63 | .sb-bar > *:first-child:not(:only-child) {
64 | justify-content: flex-start;
65 | }
66 | .sb-bar > *:last-child:not(:only-child) {
67 | justify-content: flex-end;
68 | }
69 | .left.sb-bar > *,
70 | .right.sb-bar > * {
71 | align-items: flex-start;
72 | }
73 | .left.sb-bar > *:first-child,
74 | .right.sb-bar > *:first-child {
75 | margin-top: 0.5em;
76 | }
77 | .left.sb-bar > *:last-child,
78 | .right.sb-bar > *:last-child {
79 | margin-bottom: 0.5em;
80 | }
81 | .top.sb-bar > *:only-child,
82 | .bottom.sb-bar > *:only-child {
83 | width: 100%;
84 | }
85 | .top.sb-bar > *:first-child:nth-last-child(2),
86 | .top.sb-bar > *:first-child:nth-last-child(2) + *,
87 | .bottom.sb-bar > *:first-child:nth-last-child(2),
88 | .bottom.sb-bar > *:first-child:nth-last-child(2) + * {
89 | width: 50%;
90 | }
91 | .top.sb-bar > *:first-child:nth-last-child(3),
92 | .top.sb-bar > *:first-child:nth-last-child(3) ~ *,
93 | .bottom.sb-bar > *:first-child:nth-last-child(3),
94 | .bottom.sb-bar > *:first-child:nth-last-child(3) ~ * {
95 | width: 33.3%;
96 | }
97 | .left.sb-bar > *:only-child,
98 | .right.sb-bar > *:only-child {
99 | height: 100%;
100 | }
101 | .left.sb-bar > *:first-child:nth-last-child(2),
102 | .left.sb-bar > *:first-child:nth-last-child(2) + *,
103 | .right.sb-bar > *:first-child:nth-last-child(2),
104 | .right.sb-bar > *:first-child:nth-last-child(2) + * {
105 | height: 50%;
106 | }
107 | .left.sb-bar > *:first-child:nth-last-child(3),
108 | .left.sb-bar > *:first-child:nth-last-child(3) ~ *,
109 | .right.sb-bar > *:first-child:nth-last-child(3),
110 | .right.sb-bar > *:first-child:nth-last-child(3) ~ * {
111 | height: 33.3%;
112 | }
113 |
--------------------------------------------------------------------------------
/src/blocks/bar.docs.tsx:
--------------------------------------------------------------------------------
1 | export const BarDocs = () => {
2 | return (
3 | <>
4 |
50 | 51 | ); 52 | }; 53 | -------------------------------------------------------------------------------- /src/blocks/bar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, mergeProps, splitProps } from "solid-js"; 2 | import { Portal } from "solid-js/web"; 3 | 4 | import "./base.css"; 5 | import "./bar.css"; 6 | 7 | export type BarProps = JSX.HTMLAttributes & {
8 | mount?: HTMLElement;
9 | placement?: "top" | "right" | "bottom" | "left";
10 | position?: Omit;
11 | portal?: boolean;
12 | };
13 |
14 | export const Bar: Component = (props) => {
15 | const [local, rest] = splitProps(props, [
16 | "placement",
17 | "position",
18 | "mount",
19 | "portal",
20 | ]);
21 | const divProps = mergeProps(rest, {
22 | class: `${local.placement}${
23 | local.position ? " " + local.position : ""
24 | } sb-bar ${props.class ? " " + props.class : ""}`,
25 | });
26 | return local.portal === false ? (
27 |
28 | ) : (
29 |
30 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/blocks/base.css:
--------------------------------------------------------------------------------
1 | *,
2 | *:before,
3 | *:after {
4 | box-sizing: border-box;
5 | }
6 | input,
7 | textarea,
8 | select {
9 | font: inherit;
10 | }
11 | a {
12 | color: var(--text);
13 | }
14 | p, h1, h2, h3, h4, h5, h6 {
15 | margin: 0 0 1em;
16 | padding: 0;
17 | line-height: 150%;
18 | }
19 |
20 | body {
21 | --border-radius: 0.25em;
22 | --round-border-radius: 50%;
23 | --hair-line: 0.05em;
24 | --normal-line: 0.125em;
25 | --wide-line: 0.25em;
26 | --accordion-icon: "\2303";
27 | --breadcrumb-icon: " > ";
28 | --stack-hide: -1;
29 | --stack-base: 0;
30 | --stack-dropdown: 1000;
31 | --stack-sticky: 1100;
32 | --stack-banner: 1200;
33 | --stack-overlay: 1300;
34 | --stack-modal: 1400;
35 | --stack-bar: 1500;
36 | --stack-skip-link: 1600;
37 | --stack-toast: 1700;
38 | --stack-tooltip: 1800;
39 | }
40 |
41 | body,
42 | .light-mode {
43 | --text: #333;
44 | --negative-text: #eee;
45 | --background: #fff;
46 | --border-color: #ccc;
47 | --primary: #37c;
48 | --primary-text: #eee;
49 | --success: #dfd;
50 | --success-text: #060;
51 | --info: #ddf;
52 | --info-text: #00a;
53 | --warning: #ffd;
54 | --warning-text: #bb0;
55 | --error: #fdd;
56 | --error-text: #800;
57 | --random-color1: #89d;
58 | --random-color2: #9bd;
59 | --random-color3: #adb;
60 | --random-color4: #cc9;
61 | --random-color5: #db9;
62 | --random-color6: #d99;
63 | --random-color7: #c9a;
64 | --random-color8: #b9a;
65 | }
66 |
67 | .dark-mode {
68 | --text: #eee;
69 | --negative-text: #333;
70 | --background: #222;
71 | --border-color: #555;
72 | --success: #232;
73 | --success-text: #0c0;
74 | --info: #224;
75 | --info-text: #22f;
76 | --warning: #442;
77 | --warning-text: #ff0;
78 | --error: #422;
79 | --error-text: #b00;
80 | --random-color1: #238;
81 | --random-color2: #278;
82 | --random-color3: #487;
83 | --random-color4: #683;
84 | --random-color5: #862;
85 | --random-color6: #933;
86 | --random-color7: #827;
87 | --random-color8: #729;
88 | }
89 |
90 | body,
91 | .dark-mode,
92 | .light-mode {
93 | background: var(--background);
94 | color: var(--text);
95 | }
96 |
--------------------------------------------------------------------------------
/src/blocks/breadcrumbs.css:
--------------------------------------------------------------------------------
1 | nav.sb-breadcrumbs > ol {
2 | list-style: none;
3 | padding-left: 0;
4 | }
5 | nav.sb-breadcrumbs > ol > li {
6 | display: inline;
7 | }
8 | nav.sb-breadcrumbs > ol > li + li:before {
9 | content: var(--breadcrumb-icon);
10 | }
11 |
--------------------------------------------------------------------------------
/src/blocks/breadcrumbs.docs.tsx:
--------------------------------------------------------------------------------
1 | import { Breadcrumbs } from "./breadcrumbs";
2 |
3 | export const BreadcrumbsDocs = () => {
4 | return (
5 | <>
6 |
29 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /src/blocks/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, For } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./breadcrumbs.css"; 5 | 6 | export type BreadcrumbsProps = JSX.HTMLAttributes & {
7 | children: JSX.Element | JSX.Element[];
8 | };
9 |
10 | export const Breadcrumbs: Component = (props) => (
11 |
20 | );
21 |
--------------------------------------------------------------------------------
/src/blocks/button.css:
--------------------------------------------------------------------------------
1 | button.sb-button,
2 | [role="button"].sb-button {
3 | appearance: none;
4 | border: 0.125em solid;
5 | border-radius: var(--border-radius);
6 | cursor: pointer;
7 | font-size: inherit;
8 | padding: 0.25em 0.75em;
9 | margin: 0.05em 0;
10 | }
11 | button.primary.sb-button,
12 | [role="button"].primary.sb-button {
13 | border-color: var(--primary);
14 | background: var(--primary);
15 | color: var(--primary-text);
16 | }
17 | button.sb-button:hover:not(:active, [aria-disabled="true"]),
18 | button.sb-button:focus:not(:active, [aria-disabled="true"]),
19 | [role="button"].sb-button:hover:not(:active, [aria-disabled="true"]),
20 | [role="button"].sb-button:focus:not(:active, [aria-disabled="true"]) {
21 | box-shadow: 0 0 0 0.125em var(--background), 0 0 0 0.25em var(--primary);
22 | text-decoration: none;
23 | }
24 | button.sb-button[aria-disabled="true"],
25 | [role="button"].sb-button[aria-disabled="true"] {
26 | background: var(--border-color);
27 | border-color: var(--border-color);
28 | cursor: not-allowed;
29 | }
30 | button.secondary.sb-button,
31 | [role="button"].secondary.sb-button {
32 | background: transparent;
33 | border-color: var(--primary);
34 | color: var(--text);
35 | }
36 | button.link.sb-button,
37 | [role="button"].link.sb-button {
38 | background: transparent;
39 | border-color: transparent;
40 | color: var(--text);
41 | text-decoration: underline;
42 | }
43 | button.link.sb-button:hover:not(:active, [aria-disabled="true"]),
44 | button.link.sb-button:focus:not(:active, [aria-disabled="true"]),
45 | [role="button"].link.sb-button:hover:not(:active, [aria-disabled="true"]),
46 | [role="button"].link.sb-button:hover:not(:active, [aria-disabled="true"]) {
47 | border-color: var(--primary);
48 | }
49 | button.sb-button:not(:first-child),
50 | [role="button"].sb-button:not(:first-child) {
51 | margin-left: 0.25em;
52 | }
53 | button.sb-button:not(:last-child),
54 | [role="button"].sb-button:not(:last-child) {
55 | margin-right: 0.25em;
56 | }
57 | button.icon.sb-button,
58 | [role="button"].icon.sb-button {
59 | padding: 0.125em;
60 | border-color: transparent;
61 | min-width: 1.75em;
62 | background: transparent;
63 | color: var(--text);
64 | }
65 |
--------------------------------------------------------------------------------
/src/blocks/button.docs.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from './button'
2 |
3 | export const ButtonDocs = () => {
4 | return (
5 | <>
6 |
23 | 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /src/blocks/button.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, mergeProps, splitProps } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./button.css"; 5 | 6 | export type ButtonProps = JSX.HTMLAttributes & {
7 | variant?: "primary" | "secondary" | "link" | "icon";
8 | };
9 |
10 | export const Button: Component = (props) => {
11 | const [local, buttonProps] = splitProps(props, ["variant", "classList"]);
12 |
13 | return (
14 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/blocks/checkbox.css:
--------------------------------------------------------------------------------
1 | .sb-checkbox {
2 | cursor: pointer;
3 | }
4 | .sb-checkbox input[type="checkbox"] {
5 | display: inline-block;
6 | appearance: none;
7 | cursor: pointer;
8 | border: var(--normal-line) solid var(--border-color);
9 | border-radius: var(--border-radius);
10 | width: 1.125em;
11 | height: 1.125em;
12 | vertical-align: -0.25em;
13 | line-height: 1.125em;
14 | position: relative;
15 | }
16 | .sb-checkbox input[type="checkbox"]:before {
17 | content: ' ';
18 | position: absolute;
19 | line-height: 1.25em;
20 | left: 50%;
21 | height: 50%;
22 | transform: translate(-50%, -50%);
23 | color: var(--primary);
24 | }
25 | .sb-checkbox input[type="checkbox"]:checked:before {
26 | content: '\2714';
27 | }
28 | .sb-checkbox input[type="checkbox"]:disabled {
29 | cursor: not-allowed;
30 | }
31 | .sb-checkbox input[type="checkbox"]:disabled:not(:checked) {
32 | background: var(--border-color);
33 | }
34 | .sb-checkbox input[type="checkbox"]:disabled:before {
35 | color: var(--border-color);
36 | }
37 | .sb-checkbox input[type="checkbox"][aria-invalid] {
38 | border-color: var(--error-text);
39 | }
40 | .sb-checkbox input[type="checkbox"][aria-invalid]:before {
41 | color: var(--error-text);
42 | }
43 | .sb-checkbox:has(input[type="checkbox"][aria-invalid]) {
44 | color: var(--error-text);
45 | }
46 | .sb-checkbox input[type="checkbox"][role="switch"] {
47 | border-width: var(--hair-line);
48 | border-radius: 0.5125em;
49 | width: 2em;
50 | transition: background 0.1s linear;
51 | background: var(--border-color);
52 | }
53 | .sb-checkbox input[type="checkbox"][role="switch"]:checked {
54 | background: var(--primary);
55 | }
56 | .sb-checkbox input[type="checkbox"][role="switch"]:before {
57 | content: '';
58 | top: 0.1em;
59 | left: 0.1em;
60 | width: 0.85em;
61 | height: 0.85em;
62 | transform: translateX(0);
63 | transition: transform 0.1s linear;
64 | background: var(--background);
65 | border-radius: var(--round-border-radius);
66 | color: var(--primary-text);
67 | }
68 | .sb-checkbox input[type="checkbox"][role="switch"]:checked:before {
69 | transform: translateX(0.9em);
70 | }
71 | .sb-checkbox input[type="checkbox"][role="switch"]:disabled {
72 | background: var(--border-color);
73 | }
74 | .sb-checkbox input[type="checkbox"][role="switch"]:disabled:before {
75 | background: var(--border-color);
76 | }
77 | .sb-checkbox input[type="checkbox"][role="switch"][aria-invalid] {
78 | background: var(--error-text);
79 | }
--------------------------------------------------------------------------------
/src/blocks/checkbox.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js"
2 | import { Checkbox } from "./checkbox";
3 |
4 | export const CheckboxDocs = () => {
5 | const [alignRight, setAlignRight] = createSignal(false);
6 | const [asSwitch, setAsSwitch] = createSignal(false);
7 | const [checked, setChecked] = createSignal(false);
8 | const [disabled, setDisabled] = createSignal(false);
9 | const [invalid, setInvalid] = createSignal(false);
10 | const [events, setEvents] = createSignal('');
11 | return <>
12 | right {" "}
34 | switch {" "}
35 | checked {" "}
36 | disabled {" "}
37 | invalid
38 |
39 |
53 | 54 | } -------------------------------------------------------------------------------- /src/blocks/checkbox.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, splitProps, Show } from "solid-js"; 2 | 3 | import { runEvent } from "./tools"; 4 | 5 | import "./base.css"; 6 | import "./checkbox.css"; 7 | 8 | export type CheckboxProps = JSX.HTMLAttributes & {
9 | /**
10 | * align the checkbox inside its label
11 | * can be 'left' or 'right; default is 'left'
12 | */
13 | align?: "left" | "right";
14 | autofocus?: boolean;
15 | checked?: boolean;
16 | disabled?: boolean;
17 | name?: string;
18 | setChecked?: (checked: boolean) => void;
19 | oninvalid?: JSX.EventHandler;
20 | required?: boolean;
21 | switch?: boolean;
22 | value?: string;
23 | };
24 |
25 | export const Checkbox: Component = (props) => {
26 | const [inputProps, content, labelProps] = splitProps(
27 | props,
28 | [
29 | "accessKey",
30 | "aria-disabled",
31 | "aria-invalid",
32 | "autofocus",
33 | "checked",
34 | "class",
35 | "disabled",
36 | "id",
37 | "name",
38 | "onclick",
39 | "onkeydown",
40 | "onkeypress",
41 | "onkeyup",
42 | "oninvalid",
43 | "required",
44 | "value",
45 | ],
46 | ["align", "children", "onChange", "setChecked", "switch"]
47 | );
48 |
49 | return (
50 |
69 | );
70 | };
71 |
--------------------------------------------------------------------------------
/src/blocks/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./accordion";
2 | export * from "./avatar";
3 | export * from "./bar";
4 | export * from "./breadcrumbs";
5 | export * from "./button";
6 | export * from "./checkbox";
7 | export * from "./message";
8 | export * from "./meter";
9 | export * from "./menu";
10 | export * from "./modal";
11 | export * from "./progress";
12 | export * from "./radio";
13 | export * from "./select";
14 | export * from "./spinner";
15 | export * from "./tabs";
16 | export * from "./tag";
17 | export * from "./textfield";
18 | export * from "./toast";
19 | export * from "./tooltip";
20 | export * from "./tools";
21 |
--------------------------------------------------------------------------------
/src/blocks/menu.css:
--------------------------------------------------------------------------------
1 | .sb-menu {
2 | display: inline-block;
3 | position: relative;
4 | }
5 | .sb-menu [role="menu"] {
6 | border-radius: var(--border-radius);
7 | border: var(--hair-line) solid var(--border-color);
8 | background: var(--background);
9 | position: absolute;
10 | inset: inherit;
11 | top: inherit;
12 | left: inherit;
13 | right: inherit;
14 | bottom: inherit;
15 | overflow: hidden;
16 | z-index: var(--stack-dropdown);
17 | }
18 | .sb-menu.center [role="menu"] {
19 | left: 50%;
20 | transform: translateX(-50%);
21 | }
22 | .sb-menu.right [role="menu"] {
23 | right: 0;
24 | }
25 | .sb-menu [role="menuitem"] {
26 | cursor: pointer;
27 | padding: 0 0.25em;
28 | white-space: nowrap;
29 | min-width: 8em;
30 | }
31 | .sb-menu [role="menuitem"]:focus:not(:active, [aria-disabled]) {
32 | background: var(--border-color);
33 | }
34 | .sb-menu [role="menu"] > hr {
35 | border: none;
36 | height: var(--hair-line);
37 | width: 100%;
38 | background: var(--border-color);
39 | margin: 0;
40 | padding: 0em;
41 | }
42 | .sb-menu [role="group"]:not(:first-child) {
43 | border-top: var(--hair-line) solid var(--border-color);
44 | }
45 | .sb-menu [role="group"]:not(:last-child) {
46 | border-bottom: var(--hair-line) solid var(--border-color);
47 | }
48 | .sb-menu [role="group"] > *:first-child:not([role="menuitem"]) {
49 | padding: 0;
50 | margin: 0.375em 0.375em 0;
51 | font-size: 0.75em;
52 | line-height: 1.5em;
53 | font-weight: bold;
54 | }
55 | .sb-menu [role="menuitemradio"],
56 | .sb-menu [role="menuitemcheckbox"] {
57 | cursor: pointer;
58 | padding: 0 0.25em 0 1.5em;
59 | white-space: nowrap;
60 | min-width: 8em;
61 | }
62 | .sb-menu [role="menuitemradio"]:focus:not(:active, [aria-disabled], [tabIndex="-1"]),
63 | .sb-menu [role="menuitemcheckbox"]:focus:not(:active, [aria-disabled], [tabIndex="-1"]) {
64 | background: var(--border-color);
65 | }
66 | .sb-menu [role="menuitem"][aria-disabled],
67 | .sb-menu [role="menuitemradio"][aria-disabled],
68 | .sb-menu [role="menuitemcheckbox"][aria-disabled] {
69 | cursor: not-allowed;
70 | color: var(--border-color);
71 | }
72 | .sb-menu [role="menuitemradio"][tabIndex="-1"],
73 | .sb-menu [role="menuitemcheckbox"][tabIndex="-1"] {
74 | cursor: text;
75 | }
76 | .sb-menu [role="menuitemradio"][aria-selected="true"]:before,
77 | .sb-menu [role="menuitemcheckbox"][aria-selected="true"]:before {
78 | content: "\2714";
79 | position: absolute;
80 | left: 0.25em;
81 | color: var(--primary)
82 | }
83 | .sb-menu [role="menuitemradio"][aria-selected="true"][aria-disabled]:before,
84 | .sb-menu [role="menuitemcheckbox"][aria-selected="true"][aria-disabled]:before {
85 | content: "\2714";
86 | position: absolute;
87 | left: 0.25em;
88 | color: var(--border-color)
89 | }
--------------------------------------------------------------------------------
/src/blocks/menu.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js";
2 | import {
3 | Menu,
4 | MenuButton,
5 | MenuItem,
6 | MenuItemGroup,
7 | MenuOption,
8 | MenuOptionGroup,
9 | MenuProps,
10 | } from "./menu";
11 | import { Radio, RadioGroup } from "./radio";
12 |
13 | export const MenuDocs = () => {
14 | const [align, setAlign] = createSignal('center');
15 | const [events, setEvents] = createSignal("");
16 | return (
17 | <>
18 |
91 | left
92 | center
93 | right
94 |
95 |
169 | 170 | ); 171 | }; 172 | -------------------------------------------------------------------------------- /src/blocks/menu.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | JSX, 4 | Component, 5 | onMount, 6 | onCleanup, 7 | createSignal, 8 | createMemo, 9 | createContext, 10 | useContext, 11 | splitProps, 12 | createEffect, 13 | Show, 14 | } from "solid-js"; 15 | import { Button, ButtonProps } from "./button"; 16 | import { getElements } from "./tools"; 17 | 18 | import "./base.css"; 19 | import "./menu.css"; 20 | import { isServer } from "solid-js/web"; 21 | 22 | export type MenuProps = JSX.HTMLAttributes & {
23 | open?: boolean;
24 | ontoggle?: (open?: boolean) => void;
25 | align?: "left" | "center" | "right";
26 | };
27 |
28 | const getFirstMenuButton = (open: Accessor) => {
29 | let counter = 0;
30 | return (node: HTMLElement) => {
31 | const isButton =
32 | node.nodeName === "BUTTON" || node.getAttribute("role") === "button";
33 | const isMenuButton =
34 | isButton && node.getAttribute("aria-haspopup") === "menu";
35 | const isFirstMenuButton = isMenuButton && counter++ === 0;
36 | if (isFirstMenuButton) {
37 | if (open() && node.getAttribute("aria-expanded") !== "true") {
38 | node.setAttribute("aria-expanded", "true");
39 | } else if (!open() && node.getAttribute("aria-expanded") === "true") {
40 | node.setAttribute("aria-expanded", "false");
41 | }
42 | }
43 | return isFirstMenuButton;
44 | };
45 | };
46 |
47 | const getMenuItems = () => {
48 | let counter = 0;
49 | return (node: HTMLElement) => {
50 | const isButton =
51 | node.nodeName === "BUTTON" || node.getAttribute("role") === "button";
52 | const isMenuButton =
53 | isButton && node.getAttribute("aria-haspopup") === "menu";
54 | const isFirstMenuButton = isMenuButton && counter++ === 0;
55 | return !isFirstMenuButton;
56 | };
57 | };
58 |
59 | export const Menu: Component = (props) => {
60 | const [open, setOpen] = createSignal(!!props.open);
61 | const [local, divProps] = splitProps(props, [
62 | "open",
63 | "children",
64 | "ontoggle",
65 | "align",
66 | ]);
67 | const opener = createMemo(
68 | () => (getElements(props.children, getFirstMenuButton(open), [open()]) ?? [])[0]
69 | );
70 | const menuItems = createMemo(() =>
71 | getElements(props.children, getMenuItems(), [open()]) ?? []
72 | );
73 |
74 | let menuRef!: HTMLDivElement;
75 |
76 | createEffect(() => {
77 | const visible = open();
78 | local.ontoggle?.(visible);
79 | if (visible) {
80 | menuItems()[0].focus();
81 | }
82 | });
83 |
84 | const clickHandler = (ev: MouseEvent) => {
85 | const target = ev.target as HTMLElement;
86 | const role = target?.getAttribute("role");
87 | const button = opener();
88 | if (!ev.defaultPrevented && button) {
89 | if (ev.target === button) {
90 | setOpen(
91 | (open) => !open && button.getAttribute("aria-disabled") !== "true"
92 | );
93 | } else if (
94 | !button.contains(target) &&
95 | role !== "menuitemradio" &&
96 | role !== "menuitemcheckbox"
97 | ) {
98 | setOpen(false);
99 | }
100 | }
101 | };
102 |
103 | onMount(() => !isServer && document.addEventListener("click", clickHandler, { capture: false }));
104 | onCleanup(() => !isServer && document.removeEventListener("click", clickHandler));
105 |
106 | let focusItem: HTMLElement | undefined;
107 | const overHandler = (ev: MouseEvent) => {
108 | const target = ev.target as HTMLElement;
109 | if (
110 | ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(
111 | target?.getAttribute("role") ?? ''
112 | ) &&
113 | target?.tabIndex !== -1 &&
114 | target?.getAttribute("aria-disabled") !== "true"
115 | ) {
116 | focusItem = target;
117 | focusItem?.focus();
118 | }
119 | };
120 |
121 | const moveFocus = (step: 1 | -1) => {
122 | const menuItems = menuRef.querySelectorAll(
123 | '[role^=menuitem]:not([aria-disabled], [tabIndex="-1"])'
124 | );
125 | const currentPos = focusItem
126 | ? Array.prototype.findIndex.call(menuItems, (item) => item === focusItem)
127 | : -1;
128 | const newPos =
129 | currentPos === -1
130 | ? 1
131 | : (menuItems.length + step + currentPos) % menuItems.length;
132 | focusItem = menuItems[newPos];
133 | focusItem.focus();
134 | };
135 |
136 | const keyHandler = (ev: KeyboardEvent) => {
137 | const target = ev.target as HTMLElement;
138 | if (ev.key === "Escape" && open()) {
139 | setOpen(false);
140 | opener()?.focus();
141 | }
142 | const role = target?.getAttribute("role");
143 | if (
144 | ev.key === " " &&
145 | ["menuitem", "menuitemradio", "menuitemcheckbox"].includes(role ?? '')
146 | ) {
147 | target.click();
148 | if (role === "menuitemradio") {
149 | const radios = target.parentNode?.querySelectorAll(
150 | '[role="menuitemradio"]:not([aria-disabled], [tabIndex="-1"]'
151 | ) ?? [];
152 | const currentPos = Array.prototype.indexOf.call(radios, target);
153 | const newPos = (radios.length + 1 + currentPos) % radios.length;
154 | focusItem = radios[newPos];
155 | focusItem?.focus();
156 | }
157 | ev.preventDefault();
158 | }
159 | if (ev.key === "ArrowDown") {
160 | moveFocus(1);
161 | ev.preventDefault();
162 | } else if (ev.key === "ArrowUp") {
163 | moveFocus(-1);
164 | ev.preventDefault();
165 | }
166 | };
167 |
168 | return (
169 |
182 | );
183 | };
184 |
185 | export type MenuButtonProps = ButtonProps;
186 |
187 | export const MenuButton: Component = (props) => (
188 |
189 | );
190 |
191 | export type MenuItemProps = JSX.HTMLAttributes;
192 |
193 | export const MenuItem: Component = (props) => (
194 |
195 | );
196 |
197 | export type MenuItemGroupProps = JSX.HTMLAttributes & {
198 | title?: JSX.Element;
199 | };
200 |
201 | export const MenuItemGroup: Component = (props) => {
202 | const [local, divProps] = splitProps(props, ["title", "children"]);
203 | return (
204 | ,
215 | change: (value: string) => void,
216 | type?: "checkbox" | "radio"
217 | ];
218 |
219 | export const MenuOptionsContext = createContext([
220 | () => [],
221 | (value) => console.warn("context default!", value),
222 | ]);
223 |
224 | export type MenuOptionProps = Omit<
225 | JSX.HTMLAttributes,
226 | "onchange"
227 | > & {
228 | onchange?: (checked?: boolean) => void;
229 | value: string;
230 | };
231 |
232 | export const MenuOption: Component = (props) => {
233 | const [local, divProps] = splitProps(props, ["value", "onchange"]);
234 | const [value, change, type] = useContext(MenuOptionsContext);
235 | const selected = createMemo(() => value().includes(props.value));
236 | const clickHandler = createMemo(
237 | () => () => props["aria-disabled"] !== "true" && change(props.value)
238 | );
239 | const keyHandler = createMemo(() => (ev: KeyboardEvent) => {
240 | if (ev.key === " ") {
241 | ev.preventDefault();
242 | props["aria-disabled"] !== "true" && change(props.value);
243 | }
244 | });
245 |
246 | createEffect(() => {
247 | props.onchange?.(selected());
248 | });
249 |
250 | return (
251 |
264 | );
265 | };
266 |
267 | export type MenuOptionGroupProps = Omit<
268 | JSX.HTMLAttributes,
269 | "onchange"
270 | > &
271 | (
272 | | {
273 | type: "checkbox";
274 | onchange?: (value: string[]) => void;
275 | title?: JSX.Element;
276 | value?: string[];
277 | }
278 | | {
279 | type?: "radio" | undefined;
280 | onchange?: (value: string) => void;
281 | title?: JSX.Element;
282 | value?: [string] | string;
283 | }
284 | );
285 |
286 | export const MenuOptionGroup = (props: MenuOptionGroupProps): JSX.Element => {
287 | const [local, divProps] = splitProps(props, [
288 | "title",
289 | "value",
290 | "onchange",
291 | "children",
292 | "type",
293 | ]);
294 | const [value, setValue] = createSignal(
295 | Array.isArray(local.value) ? local.value : local.value ? [local.value] : [],
296 | {
297 | equals: (prev, next) =>
298 | prev.length === next.length && prev[0] === next[0],
299 | }
300 | );
301 | const change = createMemo<(value: string) => void>(() =>
302 | props.type === "checkbox"
303 | ? (value) =>
304 | setValue((prev) =>
305 | prev.includes(value)
306 | ? prev.filter((item) => item !== value)
307 | : [...prev, value]
308 | )
309 | : (value) => setValue((prev) => (prev[0] === value ? prev : [value]))
310 | );
311 |
312 | createEffect((lastVal?: string | string[] | [string]) => {
313 | if (lastVal !== local.value) {
314 | setValue(
315 | Array.isArray(local.value)
316 | ? local.value
317 | : local.value
318 | ? [local.value]
319 | : []
320 | );
321 | }
322 | return local.value;
323 | }, local.value);
324 |
325 | createEffect((lastVal?: string[]) => {
326 | const newVal = value();
327 | if (
328 | props.type === "checkbox"
329 | ? newVal.length === lastVal?.length
330 | : newVal[0] === lastVal?.[0]
331 | ) {
332 | return lastVal;
333 | }
334 | props.type === "checkbox"
335 | ? props.onchange?.(newVal)
336 | : props.onchange?.(newVal[0]);
337 | return newVal;
338 | }, value());
339 |
340 | return (
341 |
32 | 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /src/blocks/message.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, createMemo, splitProps } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./message.css"; 5 | 6 | export type MessageProps = { 7 | type: "success" | "info" | "warning" | "error"; 8 | inline?: boolean; 9 | } & JSX.HTMLAttributes;
10 |
11 | export const Message: Component = (props) => {
12 | const [messageProps, divProps] = splitProps(props, [
13 | "type",
14 | "class",
15 | "inline",
16 | ]);
17 | const className = createMemo(() =>
18 | [
19 | ...new Set(
20 | [
21 | "sb-message",
22 | messageProps.type,
23 | messageProps.class,
24 | messageProps.inline && "inline",
25 | ].filter(Boolean)
26 | ),
27 | ].join(" ")
28 | );
29 |
30 | return (
31 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/blocks/meter.css:
--------------------------------------------------------------------------------
1 | [role="meter"].sb-meter {
2 | display: inline-block;
3 | border-radius: var(--border-radius);
4 | background: var(--border-color);
5 | overflow: hidden;
6 | height: 0.85em;
7 | width: 8em;
8 | position: relative;
9 | vertical-align: -0.125em;
10 | }
11 | [role="meter"].sb-meter > svg {
12 | fill: var(--primary);
13 | height: 100%;
14 | width: 100%;
15 | position: absolute;
16 | }
17 |
--------------------------------------------------------------------------------
/src/blocks/meter.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onCleanup, onMount } from "solid-js";
2 | import { Meter } from "./meter";
3 |
4 | export const MeterDocs = () => {
5 | const [value, setValue] = createSignal(0);
6 | const state = {
7 | interval: 0,
8 | counter: 0,
9 | current: 0,
10 | next: 0,
11 | steps: 20,
12 | };
13 | onMount(() => {
14 | state.interval = setInterval(() => {
15 | if (state.counter++ % state.steps === 0) {
16 | state.counter = 0;
17 | state.current = state.next;
18 | state.next = Math.floor(Math.random() * 101);
19 | setValue(state.current);
20 | } else {
21 | setValue(
22 | state.current +
23 | Math.floor(
24 | ((state.next - state.current) / state.steps) * state.counter
25 | )
26 | );
27 | }
28 | }, 100);
29 | });
30 | onCleanup(() => clearInterval(state.interval));
31 |
32 | return (
33 | <>
34 |
54 | 55 | ); 56 | }; 57 | -------------------------------------------------------------------------------- /src/blocks/meter.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./meter.css"; 5 | 6 | export type MeterProps = JSX.HTMLAttributes & {
7 | min?: number | string;
8 | max?: number | string;
9 | value?: number | string;
10 | };
11 |
12 | export const Meter: Component = (props) => (
13 |
130 | 131 | ); 132 | }; 133 | -------------------------------------------------------------------------------- /src/blocks/modal.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | Component, 4 | JSX, 5 | splitProps, 6 | createEffect, 7 | createSignal, 8 | createMemo, 9 | mergeProps, 10 | Switch, 11 | Match, 12 | } from "solid-js"; 13 | import { Portal } from "solid-js/web"; 14 | 15 | import "./base.css"; 16 | import "./modal.css"; 17 | import { getElements, WrappedElement } from "./tools"; 18 | 19 | export type WrappedModalContentProps = { 20 | open: Accessor;
21 | /**
22 | * toggle
23 | *
24 | * if called with boolean argument, it will set the open state
25 | * according to the argument, otherwise toggle it
26 | */
27 | toggle: (open?: boolean | unknown) => void;
28 | };
29 |
30 | export type ModalProps = Omit<
31 | JSX.HTMLAttributes,
32 | "children"
33 | > & {
34 | closeOnClickOutside?: boolean;
35 | closeOnEsc?: boolean;
36 | open?: boolean;
37 | noPortal?: boolean;
38 | children: WrappedElement | JSX.Element;
39 | };
40 |
41 | let modalCount = 0;
42 |
43 | export const Modal = (props: ModalProps): JSX.Element => {
44 | const [local, containerProps] = splitProps(props, [
45 | "open",
46 | "noPortal",
47 | "children",
48 | ]);
49 | const [open, setOpen] = createSignal(local.open);
50 | const toggle = (open?: boolean) =>
51 | setOpen(typeof open === "boolean" ? open : (o) => !o);
52 | const modalContent = createMemo(() =>
53 | getElements(
54 | local.children,
55 | (node) => node.className.indexOf("sb-modal-content") !== -1,
56 | [{ open, toggle }]
57 | ) ?? []
58 | );
59 | const otherChildren = createMemo(() =>
60 | getElements(
61 | local.children,
62 | (node) => node.className.indexOf("sb-modal-content") === -1,
63 | [{ open, toggle }]
64 | )
65 | );
66 |
67 | let modalRef!: HTMLDivElement;
68 | createEffect(() => open() && (modalRef?.focus(), modalRef?.scrollIntoView()));
69 |
70 | modalCount++;
71 |
72 | createEffect(() => {
73 | if (!modalRef) {
74 | return;
75 | }
76 | const header = modalRef.querySelector(".sb-modal-header");
77 | if (header) {
78 | modalRef.setAttribute(
79 | "aria-labelledby",
80 | header.id || (() => (header.id = `sb-modal-header-${modalCount}`))()
81 | );
82 | }
83 | const body = modalRef.querySelector(".sb-modal-body");
84 | if (body) {
85 | modalRef.setAttribute(
86 | "aria-describedby",
87 | body.id || (() => (body.id = `sb-modal-body-${modalCount}`))()
88 | );
89 | }
90 | });
91 |
92 | const divProps = mergeProps(containerProps, {
93 | role: "dialog" as JSX.HTMLAttributes['role'],
94 | tabIndex: -1,
95 | class: props.class ? `sb-modal ${props.class}` : "sb-modal",
96 | children: modalContent(),
97 | onClick: createMemo(() =>
98 | props.closeOnClickOutside
99 | ? (ev: MouseEvent) => {
100 | const target = ev.target as HTMLElement;
101 | if (!modalContent().some((content) => content?.contains(target))) {
102 | toggle(false);
103 | }
104 | }
105 | : undefined
106 | )(),
107 | onkeyup: createMemo(() =>
108 | props.closeOnEsc !== false
109 | ? (ev: KeyboardEvent) => {
110 | console.log(ev);
111 | if (ev.key === "Escape" && !ev.defaultPrevented) {
112 | setOpen(false);
113 | }
114 | }
115 | : undefined
116 | )(),
117 | });
118 |
119 | return (
120 |
121 | {otherChildren()}
122 |
123 | <>
124 | {otherChildren()}
125 |
126 |
127 |
128 |
129 | <>
130 | {otherChildren()}
131 |
132 |
133 |
134 |
135 |
136 |
137 | );
138 | };
139 |
140 | export type ModalContentProps = JSX.HTMLAttributes;
141 |
142 | export const ModalContent: Component = (props) => (
143 |
147 | );
148 |
149 | export type ModalHeaderProps = JSX.HTMLAttributes;
150 |
151 | export const ModalHeader: Component = (props) => (
152 | ;
159 |
160 | export const ModalBody: Component = (props) => (
161 |
165 | );
166 |
167 | export type ModalFooterProps = JSX.HTMLAttributes;
168 |
169 | export const ModalFooter: Component = (props) => (
170 |
174 | );
175 |
--------------------------------------------------------------------------------
/src/blocks/progress.css:
--------------------------------------------------------------------------------
1 | progress.sb-progress,
2 | [role="progress"].sb-progress {
3 | border-radius: var(--border-radius);
4 | overflow: hidden;
5 | background: var(--border-color);
6 | color: var(--primary);
7 | height: 0.85em;
8 | width: 8em;
9 | vertical-align: -0.125em;
10 | }
11 | progress.sb-progress::-webkit-progress-bar {
12 | background: var(--border-color);
13 | }
14 | progress.sb-progress::-webkit-progress-value {
15 | background: var(--primary);
16 | }
17 | progress.sb-progress[aria-orientation="vertical"],
18 | [role="progress"].sb-progress[aria-orientation="vertical"] {
19 | transform: rotate(-90deg);
20 | transform-origin: 0 0;
21 | margin: 8.5em -7.15em -0.75em 0;
22 | }
--------------------------------------------------------------------------------
/src/blocks/progress.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onCleanup, onMount } from "solid-js";
2 | import { Progress } from "./progress";
3 |
4 | export const ProgressDocs = () => {
5 | const [value, setValue] = createSignal(0);
6 | let interval: number;
7 | onMount(() => {
8 | interval = window.setInterval(() => {
9 | setValue(v => (v + 1) % 101);
10 | }, 120);
11 | })
12 | onCleanup(() => window.clearInterval(interval));
13 | return <>
14 |
37 | 38 | } -------------------------------------------------------------------------------- /src/blocks/progress.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./progress.css"; 5 | 6 | export type ProgressProps = JSX.ProgressHTMLAttributes;
7 |
8 | export const Progress: Component = (props) => (
9 |
15 | );
16 |
--------------------------------------------------------------------------------
/src/blocks/radio.css:
--------------------------------------------------------------------------------
1 | .sb-radio {
2 | cursor: pointer;
3 | }
4 | .sb-radio.disabled {
5 | color: var(--border-color);
6 | }
7 | .sb-radio input[type="radio"] {
8 | appearance: none;
9 | cursor: pointer;
10 | border: var(--hair-line) solid var(--border-color);
11 | border-radius: var(--round-border-radius);
12 | width: 1.125em;
13 | height: 1.125em;
14 | vertical-align: -0.25em;
15 | line-height: 1.125em;
16 | position: relative;
17 | }
18 | .sb-radio input[type="radio"]:before {
19 | content: ' ';
20 | position: absolute;
21 | line-height: 1.5em;
22 | left: 50%;
23 | height: 50%;
24 | transform: translate(-50%, -50%);
25 | color: var(--primary);
26 | }
27 | .sb-radio input[type="radio"]:checked:before {
28 | content: '\25cf';
29 | }
30 | .sb-radio input[type="radio"]:disabled {
31 | background: var(--border-color);
32 | }
33 | .sb-radio input[type="radio"][aria-invalid] {
34 | border-color: var(--error-text);
35 | }
36 | .sb-radio input[type="radio"][aria-invalid]:before {
37 | color: var(--error-text);
38 | }
39 | .sb-radio:has(input[type="radio"][aria-invalid]) {
40 | color: var(--error-text);
41 | }
42 | .sb-radiogroup[role="radiogroup"] {
43 | display: inline-block;
44 | }
--------------------------------------------------------------------------------
/src/blocks/radio.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js"
2 | import { Button } from "./button";
3 | import { Radio, RadioGroup } from "./radio"
4 |
5 | export const RadioDocs = () => {
6 | const [value, setValue] = createSignal("2");
7 | const [events, setEvents] = createSignal("");
8 | return <>
9 |
48 | 49 | } 50 | -------------------------------------------------------------------------------- /src/blocks/radio.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | Component, 4 | createSelector, 5 | createSignal, 6 | JSX, 7 | on, 8 | Setter, 9 | splitProps, 10 | Show, 11 | createContext, 12 | createEffect, 13 | useContext 14 | } from "solid-js"; 15 | import { runEvent } from "./tools"; 16 | 17 | import "./base.css"; 18 | import "./radio.css"; 19 | 20 | export const radioContext = createContext<[Accessor, Setter, (value: string) => boolean] | []>([]);
21 |
22 | export type RadioProps = JSX.HTMLAttributes & {
23 | /**
24 | * align the checkbox inside its label
25 | * can be 'left' or 'right; default is 'left'
26 | */
27 | align?: "left" | "right";
28 | autofocus?: boolean;
29 | checked?: boolean;
30 | setChecked?: (checked?: boolean) => void;
31 | disabled?: boolean;
32 | name?: string;
33 | onInvalid?: JSX.EventHandler;
34 | required?: boolean;
35 | value?: string;
36 | };
37 |
38 | export const Radio: Component = (props) => {
39 | const [inputProps, content, labelProps] = splitProps(
40 | props,
41 | [
42 | "accessKey",
43 | "align",
44 | "aria-disabled",
45 | "aria-invalid",
46 | "autofocus",
47 | "checked",
48 | "class",
49 | "disabled",
50 | "id",
51 | "name",
52 | "onchange",
53 | "onclick",
54 | "onkeydown",
55 | "onkeypress",
56 | "onkeyup",
57 | "oninvalid",
58 | "required",
59 | "value",
60 | ],
61 | ["align", "checked", "onChange", "setChecked", "children"]
62 | );
63 |
64 | const [_value, setValue, isValueActive] = useContext(radioContext);
65 |
66 | return (
67 |
89 | );
90 | };
91 |
92 | export type RadioGroupProps = JSX.HTMLAttributes & {
93 | setValue?: (value: string) => void;
94 | value?: Accessor;
95 | };
96 |
97 | export const RadioGroup: Component = (props) => {
98 | const [local, divProps] = splitProps(props, [
99 | "setValue",
100 | "value",
101 | "children",
102 | ]);
103 | const [value, setValue] = createSignal(typeof props.value === 'function' ? props.value() : "");
104 |
105 | createEffect(() => setValue(typeof props.value === 'function' ? props.value() : ""));
106 | createEffect(on([value], ([value]) => local.setValue?.(value), { defer: true }));
107 |
108 | return (
109 |
110 |
120 | );
121 | };
122 |
--------------------------------------------------------------------------------
/src/blocks/select.css:
--------------------------------------------------------------------------------
1 | .sb-select > select {
2 | background: transparent;
3 | border: var(--hair-line) solid var(--border-color);
4 | border-radius: var(--border-radius);
5 | color: inherit;
6 | height: 1.9em;
7 | vertical-align: -0.05em;
8 | padding: 0.25em 0.5em;
9 | position: relative;
10 | }
11 | .sb-select > select:disabled {
12 | color: var(--border-color);
13 | }
14 | .sb-select > select > option {
15 | background: var(--background);
16 | color: var(--text);
17 | }
18 | .sb-select > select[aria-invalid] {
19 | border-color: var(--error-text);
20 | color: var(--error-text);
21 | }
22 | .sb-select:has(select[aria-invalid]) {
23 | color: var(--error-text);
24 | }
25 | .sb-select:not([aria-orientation="vertical"]) .sb-select-label {
26 | display: inline-block;
27 | margin-right: 0.5em;
28 | min-width: 4em;
29 | text-align: right;
30 | }
31 | .sb-select[aria-orientation="vertical"] .sb-select-label {
32 | font-size: 0.85em;
33 | }
34 | .sb-select[aria-orientation="vertical"] .sb-select-label:after {
35 | content: "";
36 | height: 0;
37 | display: block;
38 | }
--------------------------------------------------------------------------------
/src/blocks/select.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js"
2 | import { Checkbox } from "./checkbox";
3 | import { Select } from "./select";
4 |
5 | export const SelectDocs = () => {
6 | const [vertical, setVertical] = createSignal(false);
7 | const [invalid, setInvalid] = createSignal(false);
8 | const [events, setEvents] = createSignal('');
9 | return <>
10 | aria-orientation="vertical" {" "}
32 | aria-invalid="true"
33 |
49 | 50 | } -------------------------------------------------------------------------------- /src/blocks/select.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, splitProps, Accessor } from "solid-js"; 2 | 3 | import { runEvent } from "./tools"; 4 | 5 | import "./base.css"; 6 | import "./select.css"; 7 | 8 | export type SelectProps = JSX.SelectHTMLAttributes & {
9 | label: JSX.Element;
10 | setValue?: (value: string) => void;
11 | };
12 |
13 | export const Select: Component = (props) => {
14 | const [local, fieldProps] = splitProps(props, [
15 | "aria-orientation",
16 | "label",
17 | "onChange",
18 | "setValue",
19 | "value"
20 | ]);
21 | return (
22 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/src/blocks/spinner.css:
--------------------------------------------------------------------------------
1 | @keyframes spin {
2 | from {
3 | transform: rotate(-360deg);
4 | }
5 | to {
6 | transform: rotate(0deg);
7 | }
8 | }
9 |
10 | progress.sb-spinner:not([value]):not([aria-orientation]) {
11 | -webkit-appearance: none;
12 | appearance: none;
13 | width: 0.825em;
14 | height: 0.825em;
15 | background: none;
16 | border: var(--normal-line) solid;
17 | border-color: var(--primary) var(--border-color) var(--border-color)
18 | var(--border-color);
19 | border-radius: var(--round-border-radius);
20 | vertical-align: -0.05em;
21 | color: transparent;
22 | animation: spin 1s linear infinite;
23 | }
24 | progress.sb-spinner:not([value]):not([aria-orientation])::-webkit-progress-bar,
25 | progress.sb-spinner:not([value]):not([aria-orientation])::-webkit-progress-value {
26 | display: none;
27 | }
28 | progress.sb-spinner:not([value]):not([aria-orientation])::-moz-progress-bar {
29 | background: transparent;
30 | color: transparent;
31 | }
--------------------------------------------------------------------------------
/src/blocks/spinner.docs.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from "./spinner"
2 |
3 | export const SpinnerDocs = () => {
4 | return <>
5 |
12 | 13 | } -------------------------------------------------------------------------------- /src/blocks/spinner.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./spinner.css"; 5 | 6 | export type SpinnerProps = JSX.HTMLAttributes;
7 |
8 | export const Spinner: Component = (props) => (
9 |
15 | );
16 |
--------------------------------------------------------------------------------
/src/blocks/tabs.css:
--------------------------------------------------------------------------------
1 | .sb-tabs > [role="tablist"] {
2 | list-style: none;
3 | margin: 0;
4 | padding: 0;
5 | }
6 | .sb-tabs > [role="tablist"]:not([aria-orientation="vertical"]) {
7 | border-bottom: 0.025em solid var(--border-color);
8 | }
9 | .sb-tabs > [role="tablist"][aria-orientation="vertical"] {
10 | display: inline-flex;
11 | flex-direction: column;
12 | align-items: flex-end;
13 | border-right: 0.025em solid var(--border-color);
14 | }
15 | .sb-tabs > [role="tablist"][aria-orientation="vertical"] ~ [role="tabpanel"]:not([hidden]) {
16 | display: inline-block;
17 | vertical-align: top;
18 | margin-left: 0.5em;
19 | }
20 | .sb-tabs > [role="tablist"]:not([aria-orientation="vertical"]) > [role="tab"] {
21 | display: inline-block;
22 | }
23 | .sb-tabs > [role="tablist"] > [role="tab"] {
24 | cursor: pointer;
25 | padding: 0 0.5em;
26 | background: none;
27 | border: none;
28 | color: currentColor;
29 | font: inherit;
30 | }
31 | .sb-tabs
32 | > [role="tablist"]:not([aria-orientation="vertical"])
33 | > [role="tab"] {
34 | border-bottom: 0.125em solid transparent;
35 | }
36 | .sb-tabs
37 | > [role="tablist"][aria-orientation="vertical"]
38 | > [role="tab"] {
39 | border-right: 0.25em solid transparent;
40 | }
41 |
42 | .sb-tabs > [role="tablist"] > [role="tab"]:hover:not(:active, [aria-selected="true"]),
43 | .sb-tabs > [role="tablist"] > [role="tab"]:focus:not(:active, [aria-selected="true"]) {
44 | border-color: var(--border-color);
45 | }
46 | .sb-tabs > [role="tablist"] > [role="tab"][aria-selected="true"] {
47 | font-weight: 700;
48 | cursor: default;
49 | }
50 | .sb-tabs
51 | > [role="tablist"]
52 | > [role="tab"][aria-selected="true"] {
53 | border-color: var(--primary);
54 | }
55 | .sb-tabs [role="tabpanel"][hidden] {
56 | display: none;
57 | }
58 |
--------------------------------------------------------------------------------
/src/blocks/tabs.docs.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from "solid-js"
2 | import { Checkbox } from "./checkbox";
3 | import { Tab, TabList, TabContainer, Tabs } from "./tabs";
4 |
5 | export const TabsDocs = () => {
6 | const [events, setEvents] = createSignal('');
7 | const [vertical, setVertical] = createSignal(false);
8 | return <>
9 | vertical
41 |
55 | 56 | } 57 | -------------------------------------------------------------------------------- /src/blocks/tabs.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | JSX, 4 | createContext, 5 | createEffect, 6 | createSignal, 7 | createSelector, 8 | createUniqueId, 9 | mergeProps, 10 | on, 11 | useContext 12 | } from "solid-js"; 13 | 14 | import "./base.css"; 15 | import "./tabs.css"; 16 | 17 | export type TabsProps = Omit, 'onchange'> & {
18 | index?: number;
19 | setIndex?: (index?: number) => void;
20 | };
21 |
22 | export const tabsContext = createContext<[
23 | index: () => number,
24 | setIndex: (index: number) => void,
25 | isActive: (index: number) => boolean,
26 | getIndex: (isContainer: boolean) => number,
27 | id: string
28 | ] | []>([]);
29 |
30 | export const Tabs: Component = (props) => {
31 | const [index, setIndex] = createSignal(props.index || 0);
32 | const isActive = createSelector(index);
33 | const indices = { tabs: -1, container: -1 };
34 | const id = props.id || createUniqueId();
35 | createEffect(on(index, (index) => props.setIndex?.(index), { defer: true }));
36 | return (
37 | index > indices.tabs
40 | ? setIndex(indices.tabs)
41 | : index >= 0
42 | ? setIndex(index)
43 | : setIndex(0),
44 | isActive,
45 | (isContainer) => isContainer ? ++indices.container : ++indices.tabs,
46 | id
47 | ]}>
48 |
52 | );
53 | };
54 |
55 | export type TabListProps = JSX.HTMLAttributes;
56 |
57 | export const tabListContext = createContext('');
58 |
59 | export const TabList: Component = (props) => (
60 |
65 | );
66 |
67 | export type TabProps = JSX.HTMLAttributes;
68 |
69 | export const Tab: Component = (props) => {
70 | const [_index, setIndex, isActive, getIndex, id] = useContext(tabsContext);
71 | const [ref, setRef] = createSignal();
72 | const index = getIndex ? getIndex(false) : -1;
73 | const active = () => isActive && isActive(index);
74 | createEffect(on(
75 | () => isActive && isActive(index),
76 | (active) => active && ref()?.focus(),
77 | { defer: true }
78 | ));
79 | return
Bar
5 |6 | The bar component is meant either as a top/bottom bar or a hidden 7 | sidebar for a web application. Up to three containers inside it are 8 | equally spaced, which is especially useful for application layouts. 9 |
10 |Properties
11 |
12 | {`
13 | BarProps {
14 | hidden?: boolean | 'true' | 'false';
15 | mount?: HTMLElement;
16 | placement?: 'top' | 'right' | 'bottom' | 'left';
17 | position?: 'relative' | 'sticky' | 'fixed' | 'absolute';
18 | portal?: boolean;
19 | }
20 | `}
21 |
22 | -
23 |
- hidden 24 |
-
25 | Hides the bar if
trueor"true"; especially 26 | helpful for auto-hide scenarios or side bars that are toggled by a 27 | button 28 |
29 | - mount 30 |
-
31 | If portal is not
false, you can determine the mount point 32 | for the portal the bar is rendered into here 33 |
34 | - placement 35 |
- 36 | The place the bar should be visible in. If none is given, you need to 37 | format the bar yourself with CSS 38 | 39 |
- position 40 |
- 41 | Allows to adapt the CSS position attribute to different use cases 42 | 43 |
- portal 44 |
-
45 | If
false, the bar is rendered at the current position and 46 | not through a portal 47 |
48 |
50 | 51 | ); 52 | }; 53 | -------------------------------------------------------------------------------- /src/blocks/bar.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, mergeProps, splitProps } from "solid-js"; 2 | import { Portal } from "solid-js/web"; 3 | 4 | import "./base.css"; 5 | import "./bar.css"; 6 | 7 | export type BarProps = JSX.HTMLAttributes
Breadcrumbs
7 |8 | The breadcrumbs component is as a means of navigating through 9 | encapsulated routes of a multi-page application. It will wrap its 10 | children into an ordered list. 11 |
12 |
13 | {`
14 |
15 | Home
16 | Docs
17 | Breadcrumbs
18 |
19 | `}
20 |
21 |
28 | 29 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /src/blocks/breadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, For } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./breadcrumbs.css"; 5 | 6 | export type BreadcrumbsProps = JSX.HTMLAttributes
Button
7 |8 | The button component is meant as a versatile form or standalone button. 9 |
10 |
11 | It comes as , , and Icon button.
12 |
13 | Properties
14 |
15 | {`
16 | ButtonProps {
17 | variant?: 'primary' | 'secondary' | 'link' | 'icon';
18 | }
19 | `}
20 |
21 | The default variant is primary. Otherwise, all HTML attributes applying to the button element can be used here.
22 |23 | 24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /src/blocks/button.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, mergeProps, splitProps } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./button.css"; 5 | 6 | export type ButtonProps = JSX.HTMLAttributes
Checkbox
13 |The checkbox component can either be used as a normal checkbox or a switch.
14 |Properties
15 |It has all the properties of an input of type "checkbox", and additionally:
16 |
17 | {`
18 | CheckboxProps {
19 | align?: 'left' | 'right';
20 | switch?: boolean;
21 | setChecked?: (checked: boolean) => void;
22 | }`}
23 |
24 | -
25 |
- align 26 |
- Whether the checkbox should be left or right from the content; default is left 27 |
- switch 28 |
- If the checkbox should be displayed as a switch instead 29 |
- setChecked 30 |
- Fills a setter with a boolean checked state 31 |
Effect
33 |39 |
40 | {events()}
41 |
42 |
43 | setEvents((e) => `setChecked(${checked})\n${e}`)}
50 | > Example Checkbox
51 |
52 | 53 | 54 | } -------------------------------------------------------------------------------- /src/blocks/checkbox.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, splitProps, Show } from "solid-js"; 2 | 3 | import { runEvent } from "./tools"; 4 | 5 | import "./base.css"; 6 | import "./checkbox.css"; 7 | 8 | export type CheckboxProps = JSX.HTMLAttributes
19 | Menu / MenuButton / MenuItem / MenuItemGroup / MenuOption / MenuOptionGroup 20 |
21 |22 | The menu component is a versatile menu for pages and web applications. 23 | It features items, groups, options and option groups. It does not 24 | feature sub menus, because they are rather inaccessible. 25 |
26 |27 | MenuItems can be used directly in the menu or inside a MenuItemGroup; 28 | MenuOptions can only be used inside a MenuOptionGroup. 29 |
30 |Properties
31 |
32 | {`
33 | MenuProps {
34 | open?: boolean;
35 | ontoggle?: (open?: boolean) => void;
36 | align?: 'left' | 'center' | 'right';
37 | }
38 | MenuButtonProps extends ButtonProps;
39 | MenuItemProps extends JSX.Element;
40 | MenuItemGroupProps {
41 | title?: JSX.Element;
42 | }
43 | MenuOptionsProps {
44 | value?: string;
45 | onchange?: (checked?: boolean) => void;
46 | }
47 | MenuOptionsGroupProps {
48 | type?: 'radio' | 'checkbox';
49 | title?: JSX.Element;
50 | value?: string;
51 | onchange?: (value?: string | string[]) => void;
52 | }`}
53 |
54 | -
55 |
- MenuProps.open 56 |
- if the menu is open 57 |
- MenuProps.ontoggle 58 |
- 59 | an optional callback that will receive the open state as argument when 60 | it toggles 61 | 62 |
- MenuProps.align 63 |
- how the menu should be aligned to the button: 'left', 'center' or 'right'. Default is 'left'. 64 |
- MenuItemGroupProps.title 65 |
- 66 | An optional title of the menu item group; plain text will be wrapped 67 | 68 |
- MenuOptionProps.value 69 |
- 70 | The value that will be collected in the onchange handler of the 71 | MenuOptionGroup 72 | 73 |
- MenuOptionProps.onchange 74 |
- 75 | A change handler for an individual option that will receive the toggle 76 | state of the option as an argument; just there for convenience reasons 77 | - consider using the MenuOptionGroup's handler instead 78 | 79 |
- MenuOptionGroupProps.type 80 |
- either "radio" or "checkbox"; default is "radio" 81 |
- MenuOptionGroupProps.title 82 |
- Same as MenuItemGroupProps.title, just for the option group 83 |
- MenuOptionGroupProps.value 84 |
- 85 | the preset value of the option group, which can be a string for a 86 | single selected checkbox or radio button and an array of strings for 87 | multiple selected checkboxes 88 | 89 |
99 | {events()}
100 |
101 |
102 |
136 |
137 |
138 | {`
139 | `}
167 |
168 | 169 | 170 | ); 171 | }; 172 | -------------------------------------------------------------------------------- /src/blocks/menu.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | JSX, 4 | Component, 5 | onMount, 6 | onCleanup, 7 | createSignal, 8 | createMemo, 9 | createContext, 10 | useContext, 11 | splitProps, 12 | createEffect, 13 | Show, 14 | } from "solid-js"; 15 | import { Button, ButtonProps } from "./button"; 16 | import { getElements } from "./tools"; 17 | 18 | import "./base.css"; 19 | import "./menu.css"; 20 | import { isServer } from "solid-js/web"; 21 | 22 | export type MenuProps = JSX.HTMLAttributes
205 |
206 |
208 | {local.children}
209 |
210 | );
211 | };
212 |
213 | export type MenuOptionsContextValue = [
214 | value: Accessor{local.title}
207 |
342 |
343 |
345 |
346 | {local.children}
347 |
348 |
349 | );
350 | };
351 |
--------------------------------------------------------------------------------
/src/blocks/message.css:
--------------------------------------------------------------------------------
1 | .sb-message {
2 | padding: 0.5em 1em;
3 | border-radius: var(--border-radius);
4 | }
5 | .sb-message.success {
6 | background: var(--success);
7 | }
8 | .sb-message.info {
9 | background: var(--info);
10 | }
11 | .sb-message.warning {
12 | background: var(--warning);
13 | }
14 | .sb-message.error {
15 | background: var(--error);
16 | }
17 | .inline.sb-message {
18 | background: transparent;
19 | padding: 0;
20 | display: inline;
21 | }
22 | .inline.sb-message.success {
23 | color: var(--success-text);
24 | }
25 | .inline.sb-message.info {
26 | color: var(--info-text);
27 | }
28 | .inline.sb-message.warning {
29 | color: var(--warning-text);
30 | }
31 | .inline.sb-message.error {
32 | color: var(--error-text);
33 | }
34 |
--------------------------------------------------------------------------------
/src/blocks/message.docs.tsx:
--------------------------------------------------------------------------------
1 | import { Message } from "./message";
2 |
3 | export const MessageDocs = () => {
4 | return (
5 | <>
6 | {local.title}
344 |Message
7 |8 | The message component is meant as a simple messaging container, to be 9 | used either standalone, or in a toast. 10 |
11 |Properties
12 |
13 | {`
14 | MessageProps {
15 | type: 'success' | 'info' | 'warning' | 'error';
16 | }`}
17 |
18 |
19 | Success Message
20 | Info Message
21 | Warning Message
22 | Error Message
23 |
24 |
25 | {`
26 | Success Message
27 | Info Message
28 | Warning Message
29 | Error Message `}
30 |
31 | 32 | 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /src/blocks/message.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, createMemo, splitProps } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./message.css"; 5 | 6 | export type MessageProps = { 7 | type: "success" | "info" | "warning" | "error"; 8 | inline?: boolean; 9 | } & JSX.HTMLAttributes
Meter
35 |36 | The meter component is meant to present a numeric value that can change 37 | in either direction, unlike progress, which 38 | should only increase its value. 39 |
40 |Properties
41 |
42 | {`
43 | MeterProps {
44 | min?: number | string; // or aria-valuemin
45 | max?: number | string; // or aria-valuemax
46 | value?: number | string; // or aria-valuenow
47 | }`}
48 |
49 |
50 |
52 | {`
53 | 54 | 55 | ); 56 | }; 57 | -------------------------------------------------------------------------------- /src/blocks/meter.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./meter.css"; 5 | 6 | export type MeterProps = JSX.HTMLAttributes
23 |
34 | {props.children}
35 |
36 | );
37 |
--------------------------------------------------------------------------------
/src/blocks/modal.css:
--------------------------------------------------------------------------------
1 | .sb-modal[role="dialog"] {
2 | position: fixed;
3 | inset: 0 0 0 0;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | background: transparent;
8 | margin: 0;
9 | padding: 0;
10 | }
11 | .sb-modal[role="dialog"]:not(.without-overlay):before {
12 | content: "";
13 | position: absolute;
14 | inset: 0 0 0 0;
15 | background: var(--text);
16 | opacity: 0.25;
17 | z-index: var(--stack-overlay);
18 | }
19 | .sb-modal[role="dialog"] .sb-modal-content {
20 | background: var(--background);
21 | border-radius: var(--border-radius);
22 | color: var(--text);
23 | padding: 0.5em;
24 | z-index: var(--stack-modal);
25 | }
26 | .sb-modal[role="dialog"] .sb-modal-header {
27 | display: flex;
28 | justify-content: space-between;
29 | font-weight: 700;
30 | }
31 | .sb-modal[role="dialog"] .sb-modal-footer {
32 | display: flex;
33 | justify-content: flex-end;
34 | }
--------------------------------------------------------------------------------
/src/blocks/modal.docs.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "./button";
2 | import {
3 | Modal,
4 | ModalBody,
5 | ModalContent,
6 | ModalFooter,
7 | ModalHeader,
8 | } from "./modal";
9 |
10 | export const ModalDocs = () => {
11 | return (
12 | <>
13 | 14 | Modal / ModalContent / ModalHeader / ModalBody / ModalFooter 15 |
16 |17 | The modal component shows a dialog to the user that blocks all other 18 | interaction. Be sure to never use it if the interaction is not 19 | mandatory. It requires the use of the ModalContent component; 20 | ModalHeader, ModalBody and ModalFooter are there for convenience. 21 |
22 |Properties
23 |{`
24 | ModalProps {
25 | closeOnClickOutside?: boolean;
26 | closeOnEsc?: boolean;
27 | open?: boolean;
28 | noPortal?: boolean;
29 | children: (({ open: boolean, toggle: (open?: boolean) => void }) => JSX.Element) | JSX.Element;
30 | }`}
31 | -
32 |
- closeOnClickOutside 33 |
-
34 | if a click outside of the modal should close it, this optional
35 | property must be
true36 |
37 | - closeOnEsc 38 |
-
39 | if pressing the Escape button should close the modal, this optional
40 | property must be
true41 |
42 | - open 43 |
- 44 | to control the modal from outside, you can use this boolean property 45 | 46 |
- noPortal 47 |
-
48 | if you do not want to render the modal in a portal to keep it outside
49 | the element flow, set this optional boolean property to{" "}
50 |
true51 |
52 | - children 53 |
-
54 | the content of the modal; instead of normal JSX.Elements as children,
55 | you can also opt to use a function inside the Modal component that
56 | will receive an object as argument that contains the
open{" "} 57 | state of the modal as boolean accessor and atoggle{" "} 58 | method that will either set the open state from a boolean or if called 59 | without an argument, will toggle the open state 60 |
61 |
63 |
64 | {({ open, toggle }) => (
65 | <>
66 |
73 |
74 |
75 | Header
76 |
83 |
84 |
85 |
89 |
90 |
91 |
92 |
93 |
94 | )}
95 |
96 |
97 | 86 | Body of the Modal. You can fill it with whatever content. 87 |
88 |{`
98 |
99 | {({ open, toggle }) => (
100 | <>
101 |
106 |
107 |
108 | Header
109 |
116 |
117 |
118 |
119 | Body of the Modal. You can fill it with whatever content.
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 | )}
128 | `}
129 | 130 | 131 | ); 132 | }; 133 | -------------------------------------------------------------------------------- /src/blocks/modal.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | Component, 4 | JSX, 5 | splitProps, 6 | createEffect, 7 | createSignal, 8 | createMemo, 9 | mergeProps, 10 | Switch, 11 | Match, 12 | } from "solid-js"; 13 | import { Portal } from "solid-js/web"; 14 | 15 | import "./base.css"; 16 | import "./modal.css"; 17 | import { getElements, WrappedElement } from "./tools"; 18 | 19 | export type WrappedModalContentProps = { 20 | open: Accessor
Progress
15 |The progress component shows a quantitative progress that can should only increase, unlike meter, which can go both ways.
16 |Properties
17 |{`
18 | ProgressProps {
19 | max: string | number;
20 | value: string | number;
21 | }
22 | `}
23 | -
24 |
- max 25 |
- an optional maximum number of the value, default is
1.
26 | - value 27 |
- the progress value 28 |
30 |
31 |
32 |
33 | {`
34 | `}
35 |
36 | 37 | 38 | } -------------------------------------------------------------------------------- /src/blocks/progress.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./progress.css"; 5 | 6 | export type ProgressProps = JSX.ProgressHTMLAttributes
Radio / RadioGroup
10 |The radio component is a simple radio button. It has all the properties of a normal input with type="radio". However, wrapping it in a radio group allows an easy way to control it.
11 |Properties
12 |
13 | {`
14 | RadioProps {
15 | align?: 'left' | 'right';
16 | autofocus?: boolean;
17 | setChecked?: (checked: boolean) => void;
18 | checked?: boolean;
19 | disabled?: boolean;
20 | name?: string;
21 | required?: boolean;
22 | value?: string;
23 | }
24 | RadioGroupProps {
25 | setValue?: (value?: string) => void;
26 | value?: () => string;
27 | }`}
28 |
29 |
32 |
35 | {events()}
36 |
37 | {
38 | setEvents(e => `setValue("${value}")\n${e}`);
39 | setValue(value);
40 | }}>
41 | First
42 | Second
43 | Third
44 | Fourth
45 |
46 |
47 | 48 | 49 | } 50 | -------------------------------------------------------------------------------- /src/blocks/radio.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Accessor, 3 | Component, 4 | createSelector, 5 | createSignal, 6 | JSX, 7 | on, 8 | Setter, 9 | splitProps, 10 | Show, 11 | createContext, 12 | createEffect, 13 | useContext 14 | } from "solid-js"; 15 | import { runEvent } from "./tools"; 16 | 17 | import "./base.css"; 18 | import "./radio.css"; 19 | 20 | export const radioContext = createContext<[Accessor
117 | {local.children}
118 |
119 | Select
11 |The select component is a form select component. Since it hides its content most of the time, it should be used sparingly; consider using a radio group instead. It takes normal <option> tags as child elements.
12 |Properties
13 |
14 | {`
15 | SelectProps {
16 | aria-orientation?: 'horizontal' | 'vertical'
17 | aria-invalid?: 'true'
18 | label: JSX.Element
19 | onchange?: (value: string) => void
20 | value?: string
21 | }`}
22 |
23 | -
24 |
- aria-orientation 25 |
- if set to 'vertical', the label will be above the select field instead of to its left 26 |
- label 27 |
- the description of the select field 28 |
- setValue 29 |
- a convenience handler for changes that will receive the value of the selected option tag 30 |
{events()}
34 |
35 |
47 |
48 | 49 | 50 | } -------------------------------------------------------------------------------- /src/blocks/select.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX, splitProps, Accessor } from "solid-js"; 2 | 3 | import { runEvent } from "./tools"; 4 | 5 | import "./base.css"; 6 | import "./select.css"; 7 | 8 | export type SelectProps = JSX.SelectHTMLAttributes
Spinner
6 |The spinner component shows a simple loading spinner.
7 |
8 |
10 | {`
11 | 12 | 13 | } -------------------------------------------------------------------------------- /src/blocks/spinner.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | import "./base.css"; 4 | import "./spinner.css"; 5 | 6 | export type SpinnerProps = JSX.HTMLAttributes
Tabs / Tab / TabContainer
10 |The tabs component can hide content inside tab containers and make one at a time selectable via a tab. Inside the tabs component, tab and tab container elements can be mixed freely, so you can either group tab and container or have all the tabs first and then all the containers.
11 |If the number of tabs and tab containers will mismatched, a warning is emitted on the console.
12 |Structure and Properties
13 |
14 | {`
15 |
16 |
17 | …
18 | ⋮
19 |
20 | …
21 | ⋮
22 |
23 |
24 | TabsProps {
25 | index?: number
26 | setIndex?: (index: number) => void
27 | }
28 | TabsListProps {
29 | aria-orientation?: "horizontal" | "vertical"
30 | }`}
31 |
32 | -
33 |
- index 34 |
- the number of the tab that should be opened 35 |
- setIndex 36 |
- convenient handler that is called with the index of a selected tab 37 |
- aria-orientation 38 |
- if "vertical", show the tabs on the left instead of the top 39 |
{events()}
42 |
43 | setEvents(e => `setIndex(${i})\n${e}`)}>
44 |
45 | First tab
46 | Second tab
47 | Third tab
48 |
49 | First tab container
50 | Second tab container
51 | Third tab container
52 |
53 |
54 | 55 | 56 | } 57 | -------------------------------------------------------------------------------- /src/blocks/tabs.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | JSX, 4 | createContext, 5 | createEffect, 6 | createSignal, 7 | createSelector, 8 | createUniqueId, 9 | mergeProps, 10 | on, 11 | useContext 12 | } from "solid-js"; 13 | 14 | import "./base.css"; 15 | import "./tabs.css"; 16 | 17 | export type TabsProps = Omit
49 | {props.children}
50 |
51 |