@dreamlake/dockit 0.2.17 → 0.2.18
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/components/Table.js +31 -27
- package/dist/styles.css +29 -2
- package/package.json +1 -1
package/dist/components/Table.js
CHANGED
|
@@ -10,34 +10,38 @@ function Table({
|
|
|
10
10
|
const [wrap, setWrap] = useState(true);
|
|
11
11
|
const generatedId = useId();
|
|
12
12
|
const tableId = id ?? generatedId;
|
|
13
|
+
const actionLabel = wrap ? "Unwrap" : "Wrap";
|
|
13
14
|
return /* @__PURE__ */ jsxs("div", { className: "doc-table", "data-wrap": wrap ? "on" : "off", children: [
|
|
14
|
-
/* @__PURE__ */
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
15
|
+
/* @__PURE__ */ jsxs("div", { className: "doc-table-toolbar", children: [
|
|
16
|
+
/* @__PURE__ */ jsx(
|
|
17
|
+
"button",
|
|
18
|
+
{
|
|
19
|
+
type: "button",
|
|
20
|
+
className: "doc-table-wrap",
|
|
21
|
+
"aria-label": "Wrap table text",
|
|
22
|
+
"aria-pressed": wrap,
|
|
23
|
+
"aria-controls": tableId,
|
|
24
|
+
"aria-describedby": `${generatedId}-wrap-hint`,
|
|
25
|
+
onClick: () => setWrap((value) => !value),
|
|
26
|
+
children: /* @__PURE__ */ jsx(
|
|
27
|
+
"svg",
|
|
28
|
+
{
|
|
29
|
+
width: "12",
|
|
30
|
+
height: "12",
|
|
31
|
+
viewBox: "0 0 24 24",
|
|
32
|
+
fill: "none",
|
|
33
|
+
stroke: "currentColor",
|
|
34
|
+
strokeWidth: "1.5",
|
|
35
|
+
strokeLinecap: "round",
|
|
36
|
+
strokeLinejoin: "round",
|
|
37
|
+
"aria-hidden": "true",
|
|
38
|
+
children: /* @__PURE__ */ jsx("path", { d: wrap ? "M3 6h18M3 12h14a3 3 0 0 1 0 6h-4m3-3-3 3 3 3M3 18h4" : "M3 6h18M3 12h18M3 18h18" })
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
/* @__PURE__ */ jsx("span", { className: "doc-table-wrap-hint", id: `${generatedId}-wrap-hint`, role: "tooltip", children: actionLabel })
|
|
44
|
+
] }),
|
|
41
45
|
/* @__PURE__ */ jsx(
|
|
42
46
|
"div",
|
|
43
47
|
{
|
package/dist/styles.css
CHANGED
|
@@ -125,13 +125,40 @@
|
|
|
125
125
|
font-family: var(--font-doc-template-mono);
|
|
126
126
|
font-size: 10px;
|
|
127
127
|
opacity: 0.65;
|
|
128
|
+
transition: color 120ms ease, opacity 120ms ease;
|
|
128
129
|
cursor: pointer;
|
|
129
130
|
}
|
|
130
131
|
.doc-table-wrap[aria-pressed='true'] {
|
|
131
132
|
opacity: 0.9;
|
|
132
133
|
}
|
|
133
|
-
.doc-table-wrap:hover
|
|
134
|
-
|
|
134
|
+
.doc-table-wrap:hover, .doc-table-wrap:focus-visible {
|
|
135
|
+
color: var(--color-doc-template-ink);
|
|
136
|
+
opacity: 1;
|
|
137
|
+
outline: none;
|
|
138
|
+
}
|
|
139
|
+
.doc-table-wrap-hint {
|
|
140
|
+
position: absolute;
|
|
141
|
+
right: 26px;
|
|
142
|
+
top: 0;
|
|
143
|
+
padding: 3px 6px;
|
|
144
|
+
border-radius: var(--radius-doc-template-sm);
|
|
145
|
+
background: var(--color-doc-template-code);
|
|
146
|
+
color: var(--color-doc-template-ink);
|
|
147
|
+
font-family: var(--font-doc-template-mono);
|
|
148
|
+
font-size: 10px;
|
|
149
|
+
line-height: 14px;
|
|
150
|
+
white-space: nowrap;
|
|
151
|
+
opacity: 0;
|
|
152
|
+
visibility: hidden;
|
|
153
|
+
pointer-events: none;
|
|
154
|
+
transition: opacity 120ms ease, visibility 120ms ease;
|
|
155
|
+
}
|
|
156
|
+
.doc-table-wrap:hover + .doc-table-wrap-hint,
|
|
157
|
+
.doc-table-wrap:focus-visible + .doc-table-wrap-hint {
|
|
158
|
+
opacity: 1;
|
|
159
|
+
visibility: visible;
|
|
160
|
+
}
|
|
161
|
+
.doc-table-scroll:focus-visible {
|
|
135
162
|
outline: 2px solid var(--color-doc-template-muted);
|
|
136
163
|
outline-offset: 2px;
|
|
137
164
|
}
|
package/package.json
CHANGED