@dreamlake/dockit 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Table.js +16 -19
- package/dist/styles.css +16 -15
- package/package.json +1 -1
package/dist/components/Table.js
CHANGED
|
@@ -11,7 +11,7 @@ function Table({
|
|
|
11
11
|
const generatedId = useId();
|
|
12
12
|
const tableId = id ?? generatedId;
|
|
13
13
|
return /* @__PURE__ */ jsxs("div", { className: "doc-table", "data-wrap": wrap ? "on" : "off", children: [
|
|
14
|
-
/* @__PURE__ */ jsx("div", { className: "doc-table-toolbar", children: /* @__PURE__ */
|
|
14
|
+
/* @__PURE__ */ jsx("div", { className: "doc-table-toolbar", children: /* @__PURE__ */ jsx(
|
|
15
15
|
"button",
|
|
16
16
|
{
|
|
17
17
|
type: "button",
|
|
@@ -21,24 +21,21 @@ function Table({
|
|
|
21
21
|
"aria-controls": tableId,
|
|
22
22
|
title: wrap ? "Turn off text wrapping" : "Wrap table text",
|
|
23
23
|
onClick: () => setWrap((value) => !value),
|
|
24
|
-
children:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
),
|
|
40
|
-
"Wrap"
|
|
41
|
-
]
|
|
24
|
+
children: /* @__PURE__ */ jsx(
|
|
25
|
+
"svg",
|
|
26
|
+
{
|
|
27
|
+
width: "12",
|
|
28
|
+
height: "12",
|
|
29
|
+
viewBox: "0 0 24 24",
|
|
30
|
+
fill: "none",
|
|
31
|
+
stroke: "currentColor",
|
|
32
|
+
strokeWidth: "1.5",
|
|
33
|
+
strokeLinecap: "round",
|
|
34
|
+
strokeLinejoin: "round",
|
|
35
|
+
"aria-hidden": "true",
|
|
36
|
+
children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h14a3 3 0 0 1 0 6h-4m3-3-3 3 3 3M3 18h4" })
|
|
37
|
+
}
|
|
38
|
+
)
|
|
42
39
|
}
|
|
43
40
|
) }),
|
|
44
41
|
/* @__PURE__ */ jsx(
|
package/dist/styles.css
CHANGED
|
@@ -109,41 +109,42 @@
|
|
|
109
109
|
overflow-x: auto;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.doc-table { min-width: 0; max-width: 100%; margin: 0 0 14px; }
|
|
113
|
-
.doc-table-toolbar {
|
|
112
|
+
.doc-table { position: relative; min-width: 0; max-width: 100%; margin: 0 0 14px; }
|
|
113
|
+
.doc-table-toolbar { position: absolute; top: 7px; right: 7px; z-index: 1; }
|
|
114
114
|
.doc-table-wrap {
|
|
115
115
|
display: inline-flex;
|
|
116
116
|
align-items: center;
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
justify-content: center;
|
|
118
|
+
width: 20px;
|
|
119
|
+
height: 20px;
|
|
120
|
+
padding: 4px;
|
|
121
|
+
border: 0;
|
|
121
122
|
border-radius: var(--radius-doc-template-sm);
|
|
122
123
|
background: transparent;
|
|
123
124
|
color: var(--color-doc-template-muted);
|
|
124
125
|
font-family: var(--font-doc-template-mono);
|
|
125
126
|
font-size: 10px;
|
|
127
|
+
opacity: 0.65;
|
|
126
128
|
cursor: pointer;
|
|
127
129
|
}
|
|
128
130
|
.doc-table-wrap[aria-pressed='true'] {
|
|
129
|
-
|
|
130
|
-
background: var(--color-doc-template-accent-soft);
|
|
131
|
+
opacity: 0.9;
|
|
131
132
|
}
|
|
132
|
-
.doc-table-wrap:hover {
|
|
133
|
+
.doc-table-wrap:hover { opacity: 1; }
|
|
133
134
|
.doc-table-wrap:focus-visible, .doc-table-scroll:focus-visible {
|
|
134
|
-
outline: 2px solid var(--color-doc-template-
|
|
135
|
+
outline: 2px solid var(--color-doc-template-muted);
|
|
135
136
|
outline-offset: 2px;
|
|
136
137
|
}
|
|
137
138
|
.doc-table-scroll { overflow-x: auto; border-radius: var(--radius-doc-template-sm); }
|
|
138
139
|
.doc-table-scroll > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
|
|
139
140
|
.doc-table-scroll > table > thead > tr > th {
|
|
140
|
-
border
|
|
141
|
+
border: 2px solid transparent;
|
|
142
|
+
border-radius: var(--radius-doc-template-sm);
|
|
141
143
|
background: var(--color-doc-template-chip);
|
|
144
|
+
background-clip: padding-box;
|
|
142
145
|
}
|
|
143
|
-
|
|
144
|
-
.doc-table-scroll > table > thead > tr
|
|
145
|
-
.doc-table-scroll > table > thead > tr:last-child > th:first-child { border-bottom-left-radius: var(--radius-doc-template-sm); }
|
|
146
|
-
.doc-table-scroll > table > thead > tr:last-child > th:last-child { border-bottom-right-radius: var(--radius-doc-template-sm); }
|
|
146
|
+
/* Reserve room under the overlay, including headers with inline cell padding. */
|
|
147
|
+
.doc-table-scroll > table > thead > tr > th:last-child { padding-right: 36px !important; }
|
|
147
148
|
.doc-table[data-wrap='on'] > .doc-table-scroll > table { white-space: normal; overflow-wrap: anywhere; }
|
|
148
149
|
.doc-table[data-wrap='off'] > .doc-table-scroll > table { white-space: nowrap; overflow-wrap: normal; }
|
|
149
150
|
|
package/package.json
CHANGED