@leaflink/stash 53.4.4 → 53.4.5
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/Copy.js +1 -1
- package/dist/MoreActions.js +1 -1
- package/dist/Table.js +180 -100
- package/dist/Table.js.map +1 -1
- package/dist/TableCell.js +1 -1
- package/dist/TableHeaderRow.js +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js → Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js} +2 -2
- package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js.map → Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js.map} +1 -1
- package/dist/components.css +1 -1
- package/dist/index-DA70nQCT.js +424 -0
- package/dist/{index-B1Gkwuxd.js.map → index-DA70nQCT.js.map} +1 -1
- package/dist/useSortable.js +1 -1
- package/package.json +1 -1
- package/dist/index-B1Gkwuxd.js +0 -277
package/dist/Copy.js
CHANGED
|
@@ -5,7 +5,7 @@ import { t as f } from "./locale.js";
|
|
|
5
5
|
import _ from "./Button.js";
|
|
6
6
|
import x from "./Icon.js";
|
|
7
7
|
import $ from "./IconLabel.js";
|
|
8
|
-
import { _ as N } from "./Tooltip.vue_vue_type_script_setup_true_lang-
|
|
8
|
+
import { _ as N } from "./Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js";
|
|
9
9
|
import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
10
10
|
const U = /* @__PURE__ */ w({
|
|
11
11
|
__name: "Copy",
|
package/dist/MoreActions.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ref as T, onUnmounted as se, nextTick as V, onMounted as ue, onUpdated as re, onDeactivated as ce, onBeforeUnmount as oe, watch as X, defineComponent as de, useSlots as fe, computed as W, useTemplateRef as U, createElementBlock as ve, openBlock as H, normalizeStyle as z, createBlock as Y, createElementVNode as ee, createCommentVNode as me, resolveDynamicComponent as he, normalizeClass as te, unref as C, withCtx as P, renderSlot as G, createVNode as le, createTextVNode as pe, toDisplayString as ge } from "vue";
|
|
2
2
|
import Ae from "lodash-es/uniqueId";
|
|
3
|
-
import {
|
|
3
|
+
import { e as K, f as Ie, c as Te, d as be } from "./index-DA70nQCT.js";
|
|
4
4
|
import { DEBOUNCE as k } from "./constants.js";
|
|
5
5
|
import { t as Oe } from "./locale.js";
|
|
6
6
|
import ye from "./Button.js";
|
package/dist/Table.js
CHANGED
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as K, useCssModule as Q, inject as R, computed as l, useTemplateRef as O, ref as Y, provide as Z, watchEffect as ee, createElementBlock as v, openBlock as d, createElementVNode as u, createCommentVNode as _, normalizeStyle as k, normalizeClass as n, unref as b, renderSlot as S, createBlock as H, withCtx as f, createVNode as r, Fragment as I } from "vue";
|
|
2
|
+
import { b as te, c as N, d as le } from "./index-DA70nQCT.js";
|
|
3
|
+
import A from "./Button.js";
|
|
2
4
|
import "lodash-es/cloneDeep";
|
|
3
|
-
import { M as
|
|
5
|
+
import { M as z } from "./Module.keys-DcqBbvvT.js";
|
|
4
6
|
import "lodash-es/get";
|
|
5
|
-
import "
|
|
6
|
-
import { D
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { T as
|
|
12
|
-
import { S as
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
import $ from "./Icon.js";
|
|
8
|
+
import { D } from "./DataView.keys-aSOnA4AD.js";
|
|
9
|
+
import ae from "./EmptyState.js";
|
|
10
|
+
import oe from "./Loading.js";
|
|
11
|
+
import M from "./TableCell.js";
|
|
12
|
+
import J from "./TableRow.js";
|
|
13
|
+
import { T as se } from "./Table.keys-LHQf6FEH.js";
|
|
14
|
+
import { S as re } from "./misc-CHQs-G03.js";
|
|
15
|
+
import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
16
|
+
var ie = /* @__PURE__ */ ((s) => (s.Scroll = "scroll", s.Stack = "stack", s))(ie || {}), ce = /* @__PURE__ */ ((s) => (s.None = "none", s.Rounded = "rounded", s.RoundedBottom = "rounded-bottom", s))(ce || {});
|
|
17
|
+
const de = { class: "stash-table-wrapper relative" }, ue = ["aria-busy"], fe = /* @__PURE__ */ K({
|
|
15
18
|
__name: "Table",
|
|
16
19
|
props: {
|
|
17
20
|
density: { default: void 0 },
|
|
@@ -26,102 +29,179 @@ const V = ["aria-busy"], j = { class: "relative w-full border-separate" }, te =
|
|
|
26
29
|
radius: { default: "rounded" },
|
|
27
30
|
stickyHeader: { default: void 0 }
|
|
28
31
|
},
|
|
29
|
-
setup(
|
|
30
|
-
const e =
|
|
31
|
-
density:
|
|
32
|
-
variant:
|
|
33
|
-
isEmpty:
|
|
34
|
-
isLoading:
|
|
35
|
-
isSelectable:
|
|
36
|
-
} =
|
|
37
|
-
var
|
|
38
|
-
return !!((
|
|
39
|
-
}),
|
|
40
|
-
var
|
|
32
|
+
setup(s) {
|
|
33
|
+
const e = s, m = Q(), {
|
|
34
|
+
density: P,
|
|
35
|
+
variant: p,
|
|
36
|
+
isEmpty: h,
|
|
37
|
+
isLoading: i,
|
|
38
|
+
isSelectable: E
|
|
39
|
+
} = R(D.key, D.defaults), { variant: y } = R(z.key, z.defaults), C = l(() => (y == null ? void 0 : y.value) === "table" || p.value === "table" ? "rounded-bottom" : e.radius), o = l(() => e.stickyHeader ? "scroll" : e.layout), V = l(() => o.value === "scroll" && p.value === "table"), W = l(() => {
|
|
40
|
+
var t, a;
|
|
41
|
+
return !!((t = e.stickyHeader) != null && t.maxHeight && ((a = e.stickyHeader) == null ? void 0 : a.listLength) > 3);
|
|
42
|
+
}), X = l(() => {
|
|
43
|
+
var t;
|
|
41
44
|
return {
|
|
42
|
-
maxHeight:
|
|
45
|
+
maxHeight: W.value ? (t = e.stickyHeader) == null ? void 0 : t.maxHeight : ""
|
|
43
46
|
};
|
|
44
|
-
}),
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
}), w = l(() => !!(e.isLoading || i != null && i.value)), c = O("scrollContainerRef"), x = O("tableRef"), T = Y(!1), { arrivedState: L, measure: j } = te(c, { behavior: "smooth" });
|
|
48
|
+
function g() {
|
|
49
|
+
const t = c.value;
|
|
50
|
+
!t || o.value !== "scroll" || (T.value = t.scrollWidth > t.clientWidth, j());
|
|
51
|
+
}
|
|
52
|
+
N(c, g), N(x, g), le(
|
|
53
|
+
c,
|
|
54
|
+
(t) => {
|
|
55
|
+
var a;
|
|
56
|
+
(a = t[0]) != null && a.isIntersecting && g();
|
|
57
|
+
},
|
|
58
|
+
{ threshold: 0.01 }
|
|
59
|
+
);
|
|
60
|
+
const F = l(() => !L.left), U = l(() => !L.right), q = l(() => o.value === "scroll" && T.value);
|
|
61
|
+
function B(t) {
|
|
62
|
+
var a;
|
|
63
|
+
(a = c.value) == null || a.scrollBy({ left: t, behavior: "smooth" });
|
|
64
|
+
}
|
|
65
|
+
return Z(se.key, {
|
|
66
|
+
density: l(() => e.density || P.value || re.Comfortable),
|
|
67
|
+
hasCustomExpandToggle: l(() => e.hasCustomExpandToggle),
|
|
68
|
+
hasActions: l(() => e.hasActions),
|
|
69
|
+
isExpandable: l(() => e.isExpandable),
|
|
70
|
+
isSelectable: l(
|
|
71
|
+
() => e.isSelectable && !e.isLoading && !(i != null && i.value) && !e.isEmpty && !(h != null && h.value)
|
|
52
72
|
),
|
|
53
|
-
isLoading:
|
|
54
|
-
layout:
|
|
55
|
-
}),
|
|
56
|
-
|
|
57
|
-
}), (
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"overflow-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
isLoading: w,
|
|
74
|
+
layout: o
|
|
75
|
+
}), ee(() => {
|
|
76
|
+
E && (E.value = e.isSelectable);
|
|
77
|
+
}), (t, a) => (d(), v("div", de, [
|
|
78
|
+
u("div", {
|
|
79
|
+
ref_key: "scrollContainerRef",
|
|
80
|
+
ref: c,
|
|
81
|
+
class: n(["stash-table relative", [
|
|
82
|
+
{ rounded: C.value === "rounded" },
|
|
83
|
+
{ "rounded-b": C.value === "rounded-bottom" },
|
|
84
|
+
{ "border-t border-ice-200": b(p) === "table" },
|
|
85
|
+
{ "overflow-auto scroll-smooth": o.value === "scroll" },
|
|
86
|
+
{ shadow: V.value },
|
|
87
|
+
{
|
|
88
|
+
"overflow-visible lg:overflow-auto lg:shadow": o.value === "stack"
|
|
89
|
+
}
|
|
90
|
+
]]),
|
|
91
|
+
"data-test": "stash-table",
|
|
92
|
+
"aria-busy": w.value,
|
|
93
|
+
style: k(X.value)
|
|
94
|
+
}, [
|
|
95
|
+
u("table", {
|
|
96
|
+
ref_key: "tableRef",
|
|
97
|
+
ref: x,
|
|
98
|
+
class: "relative w-full border-separate"
|
|
77
99
|
}, [
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
100
|
+
u("thead", {
|
|
101
|
+
class: n(["border-b border-ice-200", {
|
|
102
|
+
"hidden lg:table-header-group": o.value === "stack"
|
|
103
|
+
}])
|
|
104
|
+
}, [
|
|
105
|
+
S(t.$slots, "head")
|
|
106
|
+
], 2),
|
|
107
|
+
u("tbody", null, [
|
|
108
|
+
w.value ? (d(), H(J, { key: 0 }, {
|
|
109
|
+
default: f(() => [
|
|
110
|
+
r(M, {
|
|
111
|
+
colspan: "100%",
|
|
112
|
+
class: n({ "relative! col-span-12": o.value === "stack" })
|
|
113
|
+
}, {
|
|
114
|
+
default: f(() => [
|
|
115
|
+
r(oe, {
|
|
116
|
+
style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
|
|
117
|
+
}, null, 8, ["style"])
|
|
118
|
+
]),
|
|
119
|
+
_: 1
|
|
120
|
+
}, 8, ["class"])
|
|
121
|
+
]),
|
|
122
|
+
_: 1
|
|
123
|
+
})) : e.isEmpty || b(h) ? (d(), H(J, { key: 1 }, {
|
|
124
|
+
default: f(() => [
|
|
125
|
+
r(M, {
|
|
126
|
+
colspan: "100%",
|
|
127
|
+
class: n({ "relative! col-span-12": o.value === "stack" })
|
|
128
|
+
}, {
|
|
129
|
+
default: f(() => [
|
|
130
|
+
S(t.$slots, "empty", {}, () => [
|
|
131
|
+
r(ae, {
|
|
132
|
+
class: "w-full bg-white",
|
|
133
|
+
text: e.emptyStateText,
|
|
134
|
+
style: k([o.value === "scroll" ? { "max-width": "100vw" } : {}])
|
|
135
|
+
}, null, 8, ["text", "style"])
|
|
136
|
+
])
|
|
137
|
+
]),
|
|
138
|
+
_: 3
|
|
139
|
+
}, 8, ["class"])
|
|
140
|
+
]),
|
|
141
|
+
_: 3
|
|
142
|
+
})) : S(t.$slots, "body", { key: 2 })
|
|
143
|
+
])
|
|
144
|
+
], 512)
|
|
145
|
+
], 14, ue),
|
|
146
|
+
q.value ? (d(), v("div", {
|
|
147
|
+
key: 0,
|
|
148
|
+
class: n([b(m)["stash-table-scroll-overlay"], "pointer-events-none absolute inset-0 flex items-center justify-between z-2"])
|
|
149
|
+
}, [
|
|
150
|
+
F.value ? (d(), v(I, { key: 0 }, [
|
|
151
|
+
u("div", {
|
|
152
|
+
class: n([b(m)["stash-table-scroll-shadow-left"], "stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4"]),
|
|
153
|
+
"data-test": "stash-table|scroll-shadow-left"
|
|
154
|
+
}, null, 2),
|
|
155
|
+
r(A, {
|
|
156
|
+
class: "pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto",
|
|
157
|
+
secondary: "",
|
|
158
|
+
icon: "",
|
|
159
|
+
"aria-label": "Scroll table left",
|
|
160
|
+
"data-test": "stash-table|scroll-left",
|
|
161
|
+
onClick: a[0] || (a[0] = (G) => B(-200))
|
|
162
|
+
}, {
|
|
163
|
+
default: f(() => [
|
|
164
|
+
r($, { name: "chevron-left" })
|
|
94
165
|
]),
|
|
95
166
|
_: 1
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
167
|
+
})
|
|
168
|
+
], 64)) : _("", !0),
|
|
169
|
+
U.value ? (d(), v(I, { key: 1 }, [
|
|
170
|
+
u("div", {
|
|
171
|
+
class: n([b(m)["stash-table-scroll-shadow-right"], "stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4"]),
|
|
172
|
+
"data-test": "stash-table|scroll-shadow-right"
|
|
173
|
+
}, null, 2),
|
|
174
|
+
r(A, {
|
|
175
|
+
class: "pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto",
|
|
176
|
+
secondary: "",
|
|
177
|
+
icon: "",
|
|
178
|
+
"aria-label": "Scroll table right",
|
|
179
|
+
"data-test": "stash-table|scroll-right",
|
|
180
|
+
onClick: a[1] || (a[1] = (G) => B(200))
|
|
181
|
+
}, {
|
|
182
|
+
default: f(() => [
|
|
183
|
+
r($, {
|
|
184
|
+
name: "chevron-right",
|
|
185
|
+
class: "text-ice-900"
|
|
186
|
+
})
|
|
113
187
|
]),
|
|
114
|
-
_:
|
|
115
|
-
})
|
|
116
|
-
])
|
|
117
|
-
])
|
|
118
|
-
]
|
|
188
|
+
_: 1
|
|
189
|
+
})
|
|
190
|
+
], 64)) : _("", !0)
|
|
191
|
+
], 2)) : _("", !0)
|
|
192
|
+
]));
|
|
119
193
|
}
|
|
120
|
-
})
|
|
194
|
+
}), be = {
|
|
195
|
+
"stash-table-scroll-shadow-left": "_stash-table-scroll-shadow-left_cuovy_2",
|
|
196
|
+
"stash-table-scroll-shadow-right": "_stash-table-scroll-shadow-right_cuovy_6",
|
|
197
|
+
"stash-table-scroll-overlay": "_stash-table-scroll-overlay_cuovy_11"
|
|
198
|
+
}, he = {
|
|
199
|
+
$style: be
|
|
200
|
+
}, Oe = /* @__PURE__ */ ne(fe, [["__cssModules", he]]);
|
|
121
201
|
export {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
202
|
+
ie as Layout,
|
|
203
|
+
se as TABLE_INJECTION,
|
|
204
|
+
ce as TableRadius,
|
|
205
|
+
Oe as default
|
|
126
206
|
};
|
|
127
207
|
//# sourceMappingURL=Table.js.map
|
package/dist/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n Scroll = 'scroll',\n Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n None = 'none',\n Rounded = 'rounded',\n RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities>;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions: ComputedRef<boolean>;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle: ComputedRef<boolean>;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable: ComputedRef<boolean>;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable: ComputedRef<boolean>;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout: ComputedRef<Layouts>;\n\n /**\n * Sets the table loading state.\n */\n isLoading: ComputedRef<boolean>;\n}\n","<script lang=\"ts\">\n import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import { Layouts, TableRadiuses } from './Table.types';\n\n export * from './Table.keys';\n export * from './Table.types';\n\n export interface TableProps {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n */\n density?: SpacingDensities;\n\n /**\n * Sets the text for the empty state; the default value is \"No Results\".\n */\n emptyStateText?: string;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions?: boolean;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle?: boolean;\n\n /**\n * Shows the empty state\n */\n isEmpty?: boolean;\n\n /**\n * Shows the loading state\n */\n isLoading?: boolean;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable?: boolean;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable?: boolean;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout?: Layouts;\n\n /**\n * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n */\n radius?: TableRadiuses;\n\n /**\n * Allows the table head to be sticky when scrolling inside the table body\n */\n stickyHeader?: {\n listLength: number;\n maxHeight: string;\n };\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, inject, provide, watchEffect } from 'vue';\n\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import EmptyState from '../EmptyState/EmptyState.vue';\n import Loading from '../Loading/Loading.vue';\n import TableCell from '../TableCell/TableCell.vue';\n import TableRow from '../TableRow/TableRow.vue';\n import { TABLE_INJECTION } from './Table.keys';\n\n const props = withDefaults(defineProps<TableProps>(), {\n density: undefined,\n emptyStateText: '',\n hasActions: false,\n hasCustomExpandToggle: false,\n isEmpty: false,\n isLoading: false,\n isExpandable: false,\n isSelectable: false,\n layout: 'scroll',\n radius: 'rounded',\n stickyHeader: undefined,\n });\n\n const {\n density: dataViewDensity,\n variant: dataViewVariant,\n isEmpty: isDataViewEmpty,\n isLoading: isDataViewLoading,\n isSelectable: isDataViewSelectable,\n } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n const computedRadius = computed<TableRadiuses>(() => {\n // Will work for tables when rendered inside of a Module with OR without a DataView.\n if (moduleVariant?.value === 'table') {\n return 'rounded-bottom';\n }\n\n if (dataViewVariant.value === 'table') {\n return 'rounded-bottom';\n }\n\n return props.radius;\n });\n\n const computedLayout = computed<Layouts>(() => {\n if (props.stickyHeader) {\n return 'scroll';\n }\n\n return props.layout;\n });\n\n const isShadowEnabled = computed<boolean>(() => {\n return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n });\n\n const isStickyHeaderEnabled = computed<boolean>(() => {\n return !!(\n (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n // scrollable table and sticky headers not needed when list is small\n );\n });\n\n const rootStyle = computed(() => ({\n maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n }));\n\n const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n provide(TABLE_INJECTION.key, {\n density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n hasActions: computed(() => props.hasActions),\n isExpandable: computed(() => props.isExpandable),\n isSelectable: computed(\n () =>\n props.isSelectable &&\n !props.isLoading &&\n !isDataViewLoading?.value &&\n !props.isEmpty &&\n !isDataViewEmpty?.value,\n ),\n isLoading: isTableLoading,\n layout: computedLayout,\n });\n\n watchEffect(() => {\n // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n // making it important to have Table to control selection props.\n // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n // and move the information up into DataView, that sometimes aren't used.\n if (isDataViewSelectable) {\n isDataViewSelectable.value = props.isSelectable;\n }\n });\n</script>\n\n<template>\n <div\n class=\"stash-table relative\"\n :class=\"[\n { rounded: computedRadius === 'rounded' },\n { 'rounded-b': computedRadius === 'rounded-bottom' },\n { 'border-t border-ice-200': dataViewVariant === 'table' },\n { 'overflow-auto': computedLayout === 'scroll' },\n { shadow: isShadowEnabled },\n {\n 'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n },\n ]\"\n data-test=\"stash-table\"\n :aria-busy=\"isTableLoading\"\n :style=\"rootStyle\"\n >\n <table class=\"relative w-full border-separate\">\n <thead\n class=\"border-b border-ice-200\"\n :class=\"{\n 'hidden lg:table-header-group': computedLayout === 'stack',\n }\"\n >\n <!-- @slot head -->\n <slot name=\"head\"> </slot>\n </thead>\n <tbody>\n <!--\n col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below lg (when table elements are using display: grid ).\n The colspan attr does the same in all other cases when the table elements are using their native table styles.\n relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n These are necessary in order to properly horizontally center Loading, and EmptyState\n -->\n <TableRow v-if=\"isTableLoading\">\n <TableCell colspan=\"100%\" :class=\"{ '!relative col-span-12': computedLayout === 'stack' }\">\n <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n </TableCell>\n </TableRow>\n <!-- @slot empty -->\n <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n <TableRow>\n <TableCell colspan=\"100%\" :class=\"{ '!relative col-span-12': computedLayout === 'stack' }\">\n <slot name=\"empty\">\n <EmptyState\n class=\"w-full bg-white\"\n :text=\"props.emptyStateText\"\n :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n />\n </slot>\n </TableCell>\n </TableRow>\n </template>\n <!-- @slot body -->\n <slot v-else name=\"body\"></slot>\n </tbody>\n </table>\n </div>\n</template>\n"],"names":["Layout","TableRadius","props","__props","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_createElementBlock","_unref","_createElementVNode","_hoisted_2","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n Scroll = 'scroll',\n Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n None = 'none',\n Rounded = 'rounded',\n RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities>;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions: ComputedRef<boolean>;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle: ComputedRef<boolean>;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable: ComputedRef<boolean>;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable: ComputedRef<boolean>;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout: ComputedRef<Layouts>;\n\n /**\n * Sets the table loading state.\n */\n isLoading: ComputedRef<boolean>;\n}\n","<script lang=\"ts\">\n import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import { Layouts, TableRadiuses } from './Table.types';\n\n export * from './Table.keys';\n export * from './Table.types';\n\n export interface TableProps {\n /**\n * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n */\n density?: SpacingDensities;\n\n /**\n * Sets the text for the empty state; the default value is \"No Results\".\n */\n emptyStateText?: string;\n\n /**\n * Styles the last column for \"row actions\"\n */\n hasActions?: boolean;\n\n /**\n * If true, hides the default expansion toggle column\n */\n hasCustomExpandToggle?: boolean;\n\n /**\n * Shows the empty state\n */\n isEmpty?: boolean;\n\n /**\n * Shows the loading state\n */\n isLoading?: boolean;\n\n /**\n * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n */\n isExpandable?: boolean;\n\n /**\n * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n */\n isSelectable?: boolean;\n\n /**\n * Sets the table layout; the default value is \"scroll\".\n */\n layout?: Layouts;\n\n /**\n * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n */\n radius?: TableRadiuses;\n\n /**\n * Allows the table head to be sticky when scrolling inside the table body\n */\n stickyHeader?: {\n listLength: number;\n maxHeight: string;\n };\n }\n</script>\n\n<script setup lang=\"ts\">\n import { useIntersectionObserver, useResizeObserver, useScroll } from '@vueuse/core';\n import { computed, inject, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\n import Button from '../Button/Button.vue';\n import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n import EmptyState from '../EmptyState/EmptyState.vue';\n import Icon from '../Icon/Icon.vue';\n import Loading from '../Loading/Loading.vue';\n import TableCell from '../TableCell/TableCell.vue';\n import TableRow from '../TableRow/TableRow.vue';\n import { TABLE_INJECTION } from './Table.keys';\n\n const SCROLL_DELTA_PX = 200;\n\n const props = withDefaults(defineProps<TableProps>(), {\n density: undefined,\n emptyStateText: '',\n hasActions: false,\n hasCustomExpandToggle: false,\n isEmpty: false,\n isLoading: false,\n isExpandable: false,\n isSelectable: false,\n layout: 'scroll',\n radius: 'rounded',\n stickyHeader: undefined,\n });\n\n const classes = useCssModule();\n\n const {\n density: dataViewDensity,\n variant: dataViewVariant,\n isEmpty: isDataViewEmpty,\n isLoading: isDataViewLoading,\n isSelectable: isDataViewSelectable,\n } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n const computedRadius = computed<TableRadiuses>(() => {\n // Will work for tables when rendered inside of a Module with OR without a DataView.\n if (moduleVariant?.value === 'table') {\n return 'rounded-bottom';\n }\n\n if (dataViewVariant.value === 'table') {\n return 'rounded-bottom';\n }\n\n return props.radius;\n });\n\n const computedLayout = computed<Layouts>(() => {\n if (props.stickyHeader) {\n return 'scroll';\n }\n\n return props.layout;\n });\n\n const isShadowEnabled = computed<boolean>(() => {\n return computedLayout.value === 'scroll' && dataViewVariant.value === 'table';\n });\n\n const isStickyHeaderEnabled = computed<boolean>(() => {\n return !!(\n (props.stickyHeader?.maxHeight && props.stickyHeader?.listLength > 3) // table can't scroll without a max height; sticky headers only needed for a scrollable table\n // scrollable table and sticky headers not needed when list is small\n );\n });\n\n const rootStyle = computed(() => ({\n maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n }));\n\n const isTableLoading = computed(() => Boolean(props.isLoading || isDataViewLoading?.value));\n\n const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainerRef');\n const tableRef = useTemplateRef<HTMLTableElement>('tableRef');\n const hasHorizontalOverflow = ref(false);\n\n const { arrivedState, measure } = useScroll(scrollContainerRef, { behavior: 'smooth' });\n\n function updateOverflow() {\n const el = scrollContainerRef.value;\n if (!el || computedLayout.value !== 'scroll') return;\n hasHorizontalOverflow.value = el.scrollWidth > el.clientWidth;\n measure();\n }\n\n useResizeObserver(scrollContainerRef, updateOverflow);\n useResizeObserver(tableRef, updateOverflow);\n\n // recalculate overflow when the scroll container is intersected by the viewport.\n // For instance when the table is inside a v-show container\n useIntersectionObserver(\n scrollContainerRef,\n (entries) => {\n if (entries[0]?.isIntersecting) updateOverflow();\n },\n { threshold: 0.01 },\n );\n\n const canScrollLeft = computed(() => !arrivedState.left);\n const canScrollRight = computed(() => !arrivedState.right);\n const showScrollButtons = computed(() => computedLayout.value === 'scroll' && hasHorizontalOverflow.value);\n\n function scrollBy(delta: number) {\n scrollContainerRef.value?.scrollBy({ left: delta, behavior: 'smooth' });\n }\n\n provide(TABLE_INJECTION.key, {\n density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n hasActions: computed(() => props.hasActions),\n isExpandable: computed(() => props.isExpandable),\n isSelectable: computed(\n () =>\n props.isSelectable &&\n !props.isLoading &&\n !isDataViewLoading?.value &&\n !props.isEmpty &&\n !isDataViewEmpty?.value,\n ),\n isLoading: isTableLoading,\n layout: computedLayout,\n });\n\n watchEffect(() => {\n // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n // making it important to have Table to control selection props.\n // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n // and move the information up into DataView, that sometimes aren't used.\n if (isDataViewSelectable) {\n isDataViewSelectable.value = props.isSelectable;\n }\n });\n</script>\n\n<template>\n <div class=\"stash-table-wrapper relative\">\n <div\n ref=\"scrollContainerRef\"\n class=\"stash-table relative\"\n :class=\"[\n { rounded: computedRadius === 'rounded' },\n { 'rounded-b': computedRadius === 'rounded-bottom' },\n { 'border-t border-ice-200': dataViewVariant === 'table' },\n { 'overflow-auto scroll-smooth': computedLayout === 'scroll' },\n { shadow: isShadowEnabled },\n {\n 'overflow-visible lg:overflow-auto lg:shadow': computedLayout === 'stack',\n },\n ]\"\n data-test=\"stash-table\"\n :aria-busy=\"isTableLoading\"\n :style=\"rootStyle\"\n >\n <table ref=\"tableRef\" class=\"relative w-full border-separate\">\n <thead\n class=\"border-b border-ice-200\"\n :class=\"{\n 'hidden lg:table-header-group': computedLayout === 'stack',\n }\"\n >\n <!-- @slot head -->\n <slot name=\"head\"> </slot>\n </thead>\n <tbody>\n <!--\n col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below lg (when table elements are using display: grid ).\n The colspan attr does the same in all other cases when the table elements are using their native table styles.\n relative prevents the loading/empty state from overflowing the table whenever the table has actions and the table cell applies position absolute.\n \"max-width: '100vw'\" prevents the loading/empty state from overflowing the table whenever the table is in the scroll layout.\n These are necessary in order to properly horizontally center Loading, and EmptyState\n -->\n <TableRow v-if=\"isTableLoading\">\n <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n <Loading :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\" />\n </TableCell>\n </TableRow>\n <!-- @slot empty -->\n <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n <TableRow>\n <TableCell colspan=\"100%\" :class=\"{ 'relative! col-span-12': computedLayout === 'stack' }\">\n <slot name=\"empty\">\n <EmptyState\n class=\"w-full bg-white\"\n :text=\"props.emptyStateText\"\n :style=\"[computedLayout === 'scroll' ? { 'max-width': '100vw' } : {}]\"\n />\n </slot>\n </TableCell>\n </TableRow>\n </template>\n <!-- @slot body -->\n <slot v-else name=\"body\"></slot>\n </tbody>\n </table>\n </div>\n <div\n v-if=\"showScrollButtons\"\n :class=\"classes['stash-table-scroll-overlay']\"\n class=\"pointer-events-none absolute inset-0 flex items-center justify-between z-2\"\n >\n <template v-if=\"canScrollLeft\">\n <div\n :class=\"classes['stash-table-scroll-shadow-left']\"\n class=\"stash-table-scroll-shadow border-l border-ice-100 absolute left-0 top-0 bottom-0 w-4\"\n data-test=\"stash-table|scroll-shadow-left\"\n />\n <Button\n class=\"pointer-events-auto absolute left-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n secondary\n icon\n :aria-label=\"'Scroll table left'\"\n data-test=\"stash-table|scroll-left\"\n @click=\"scrollBy(-SCROLL_DELTA_PX)\"\n >\n <Icon name=\"chevron-left\" />\n </Button>\n </template>\n <template v-if=\"canScrollRight\">\n <div\n :class=\"classes['stash-table-scroll-shadow-right']\"\n class=\"stash-table-scroll-shadow border-r border-ice-100 absolute right-0 top-0 bottom-0 w-4\"\n data-test=\"stash-table|scroll-shadow-right\"\n />\n\n <Button\n class=\"pointer-events-auto absolute right-3 top-[7px] border border-ice-100 bg-white rounded-full shadow size-6 p-0 min-w-auto\"\n secondary\n icon\n :aria-label=\"'Scroll table right'\"\n data-test=\"stash-table|scroll-right\"\n @click=\"scrollBy(SCROLL_DELTA_PX)\"\n >\n <Icon name=\"chevron-right\" class=\"text-ice-900\" />\n </Button>\n </template>\n </div>\n </div>\n</template>\n\n<style module>\n .stash-table-scroll-shadow-left {\n background: linear-gradient(90deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n }\n\n .stash-table-scroll-shadow-right {\n background: linear-gradient(270deg, rgb(38 38 38 / 10%) 0%, rgb(38 38 38 / 0%) 32.65%);\n }\n\n @media print {\n .stash-table-scroll-overlay {\n display: none !important;\n }\n }\n</style>\n"],"names":["Layout","TableRadius","props","__props","classes","useCssModule","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","computedLayout","isShadowEnabled","isStickyHeaderEnabled","_a","_b","rootStyle","isTableLoading","scrollContainerRef","useTemplateRef","tableRef","hasHorizontalOverflow","ref","arrivedState","measure","useScroll","updateOverflow","el","useResizeObserver","useIntersectionObserver","entries","canScrollLeft","canScrollRight","showScrollButtons","scrollBy","delta","provide","TABLE_INJECTION","SpacingDensity","watchEffect","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_unref","_renderSlot","_ctx","_createBlock","TableRow","_createVNode","TableCell","Loading","EmptyState","_normalizeClass","_Fragment","Button","_cache","$event","Icon"],"mappings":";;;;;;;;;;;;;;;AAIO,IAAKA,uBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,MAAA,CAAA,CAAA,GAOAC,uBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;ACyEV,UAAMC,IAAQC,GAcRC,IAAUC,EAAA,GAEV;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IAAA,IACZC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFL,EAAM,MACd,GAEKe,IAAiBD,EAAkB,MACnCd,EAAM,eACD,WAGFA,EAAM,MACd,GAEKgB,IAAkBF,EAAkB,MACjCC,EAAe,UAAU,YAAYV,EAAgB,UAAU,OACvE,GAEKY,IAAwBH,EAAkB,MAAM;;AACpD,aAAO,CAAC,GACLI,IAAAlB,EAAM,iBAAN,QAAAkB,EAAoB,eAAaC,IAAAnB,EAAM,iBAAN,gBAAAmB,EAAoB,cAAa;AAAA,IAGvE,CAAC,GAEKC,IAAYN,EAAS,MAAA;;AAAO;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAlB,EAAM,iBAAN,gBAAAkB,EAAoB,YAAY;AAAA,MAAA;AAAA,KACzE,GAEIG,IAAiBP,EAAS,MAAM,GAAQd,EAAM,aAAaO,KAAA,QAAAA,EAAmB,MAAM,GAEpFe,IAAqBC,EAA4B,oBAAoB,GACrEC,IAAWD,EAAiC,UAAU,GACtDE,IAAwBC,EAAI,EAAK,GAEjC,EAAE,cAAAC,GAAc,SAAAC,MAAYC,GAAUP,GAAoB,EAAE,UAAU,UAAU;AAEtF,aAASQ,IAAiB;AACxB,YAAMC,IAAKT,EAAmB;AAC9B,MAAI,CAACS,KAAMhB,EAAe,UAAU,aACpCU,EAAsB,QAAQM,EAAG,cAAcA,EAAG,aAClDH,EAAA;AAAA,IACF;AAEA,IAAAI,EAAkBV,GAAoBQ,CAAc,GACpDE,EAAkBR,GAAUM,CAAc,GAI1CG;AAAA,MACEX;AAAA,MACA,CAACY,MAAY;;AACX,SAAIhB,IAAAgB,EAAQ,CAAC,MAAT,QAAAhB,EAAY,kBAAgBY,EAAA;AAAA,MAClC;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;AAGpB,UAAMK,IAAgBrB,EAAS,MAAM,CAACa,EAAa,IAAI,GACjDS,IAAiBtB,EAAS,MAAM,CAACa,EAAa,KAAK,GACnDU,IAAoBvB,EAAS,MAAMC,EAAe,UAAU,YAAYU,EAAsB,KAAK;AAEzG,aAASa,EAASC,GAAe;;AAC/B,OAAArB,IAAAI,EAAmB,UAAnB,QAAAJ,EAA0B,SAAS,EAAE,MAAMqB,GAAO,UAAU;IAC9D;AAEA,WAAAC,EAAQC,GAAgB,KAAK;AAAA,MAC3B,SAAS3B,EAAS,MAAMd,EAAM,WAAWI,EAAgB,SAASsC,GAAe,WAAW;AAAA,MAC5F,uBAAuB5B,EAAS,MAAMd,EAAM,qBAAqB;AAAA,MACjE,YAAYc,EAAS,MAAMd,EAAM,UAAU;AAAA,MAC3C,cAAcc,EAAS,MAAMd,EAAM,YAAY;AAAA,MAC/C,cAAcc;AAAA,QACZ,MACEd,EAAM,gBACN,CAACA,EAAM,aACP,EAACO,KAAA,QAAAA,EAAmB,UACpB,CAACP,EAAM,WACP,EAACM,KAAA,QAAAA,EAAiB;AAAA,MAAA;AAAA,MAEtB,WAAWe;AAAA,MACX,QAAQN;AAAA,IAAA,CACT,GAED4B,GAAY,MAAM;AAKhB,MAAInC,MACFA,EAAqB,QAAQR,EAAM;AAAA,IAEvC,CAAC,cAID4C,EAAA,GAAAC,EAqGM,OArGNC,IAqGM;AAAA,MApGJC,EA0DM,OAAA;AAAA,iBAzDA;AAAA,QAAJ,KAAIzB;AAAA,QACJ,UAAM,wBAAsB;AAAA,qBACCT,EAAA,UAAc,UAAA;AAAA,yBAAyCA,EAAA,UAAc,iBAAA;AAAA,uCAA8DmC,EAAA3C,CAAA,MAAe,QAAA;AAAA,2CAAyDU,EAAA,UAAc,SAAA;AAAA,oBAAmCC,EAAA,MAAA;AAAA;2DAAsFD,EAAA,UAAc;AAAA,UAAA;AAAA;QAU7X,aAAU;AAAA,QACT,aAAWM,EAAA;AAAA,QACX,SAAOD,EAAA,KAAS;AAAA,MAAA;QAEjB2B,EAwCQ,SAAA;AAAA,mBAxCG;AAAA,UAAJ,KAAIvB;AAAA,UAAW,OAAM;AAAA,QAAA;UAC1BuB,EAQQ,SAAA;AAAA,YAPN,UAAM,2BAAyB;AAAA,8CACuBhC,EAAA,UAAc;AAAA,YAAA;;YAKpEkC,EAA0BC,EAAA,QAAA,MAAA;AAAA,UAAA;UAE5BH,EA6BQ,SAAA,MAAA;AAAA,YArBU1B,EAAA,cAAhB8B,EAIWC,GAAA,EAAA,KAAA,KAAA;AAAA,yBAHT,MAEY;AAAA,gBAFZC,EAEYC,GAAA;AAAA,kBAFD,SAAQ;AAAA,kBAAQ,oCAAkCvC,EAAA,UAAc,SAAA;AAAA,gBAAA;6BACzE,MAAkF;AAAA,oBAAlFsC,EAAkFE,IAAA;AAAA,sBAAxE,UAAQxC,EAAA,UAAc,WAAA,EAAA,aAAA,QAAA,IAAA,EAAA,CAAA;AAAA,oBAAA;;;;;;kBAIff,EAAM,WAAWgD,EAAA1C,CAAA,UACpC6C,EAUWC,GAAA,EAAA,KAAA,KAAA;AAAA,yBATT,MAQY;AAAA,gBARZC,EAQYC,GAAA;AAAA,kBARD,SAAQ;AAAA,kBAAQ,oCAAkCvC,EAAA,UAAc,SAAA;AAAA,gBAAA;6BACzE,MAMO;AAAA,oBANPkC,EAMOC,uBANP,MAMO;AAAA,sBALLG,EAIEG,IAAA;AAAA,wBAHA,OAAM;AAAA,wBACL,MAAMxD,EAAM;AAAA,wBACZ,UAAQe,EAAA,UAAc,WAAA,EAAA,aAAA,QAAA,IAAA,EAAA,CAAA;AAAA,sBAAA;;;;;;;kBAOjCkC,EAAgCC,EAAA,QAAA,QAAA,EAAA,KAAA,EAAA,CAAA;AAAA,UAAA;;;MAK9Bb,EAAA,cADRQ,EAwCM,OAAA;AAAA;QAtCH,OAAKY,EAAA,CAAET,EAAA9C,CAAA,EAAO,4BAAA,GACT,4EAA4E,CAAA;AAAA,MAAA;QAElEiC,EAAA,cAAhBU,EAgBWa,GAAA,EAAA,KAAA,KAAA;AAAA,UAfTX,EAIE,OAAA;AAAA,YAHC,OAAKU,EAAA,CAAET,EAAA9C,CAAA,EAAO,gCAAA,GACT,sFAAsF,CAAA;AAAA,YAC5F,aAAU;AAAA,UAAA;UAEZmD,EASSM,GAAA;AAAA,YARP,OAAM;AAAA,YACN,WAAA;AAAA,YACA,MAAA;AAAA,YACC,cAAY;AAAA,YACb,aAAU;AAAA,YACT,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEvB,EAAQ,IAAiB;AAAA,UAAA;uBAEjC,MAA4B;AAAA,cAA5Be,EAA4BS,GAAA,EAAtB,MAAK,gBAAc;AAAA,YAAA;;;;QAGb1B,EAAA,cAAhBS,EAiBWa,GAAA,EAAA,KAAA,KAAA;AAAA,UAhBTX,EAIE,OAAA;AAAA,YAHC,OAAKU,EAAA,CAAET,EAAA9C,CAAA,EAAO,iCAAA,GACT,uFAAuF,CAAA;AAAA,YAC7F,aAAU;AAAA,UAAA;UAGZmD,EASSM,GAAA;AAAA,YARP,OAAM;AAAA,YACN,WAAA;AAAA,YACA,MAAA;AAAA,YACC,cAAY;AAAA,YACb,aAAU;AAAA,YACT,SAAKC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEvB,EAAS,GAAe;AAAA,UAAA;uBAEhC,MAAkD;AAAA,cAAlDe,EAAkDS,GAAA;AAAA,gBAA5C,MAAK;AAAA,gBAAgB,OAAM;AAAA,cAAA;;;;;;;;;;;;;;;"}
|
package/dist/TableCell.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as _, useCssModule as p, inject as d, createElementBlock as r, openBlock as c, normalizeClass as u, unref as o, createCommentVNode as f, renderSlot as y, toDisplayString as h } from "vue";
|
|
2
|
+
import "lodash-es/uniqueId";
|
|
2
3
|
import "lodash-es/cloneDeep";
|
|
3
4
|
import "./Module.keys-DcqBbvvT.js";
|
|
4
5
|
import "lodash-es/get";
|
|
5
|
-
import "lodash-es/uniqueId";
|
|
6
6
|
import "./DataView.keys-aSOnA4AD.js";
|
|
7
7
|
import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
|
|
8
8
|
import "@leaflink/snitch";
|
package/dist/TableHeaderRow.js
CHANGED
|
@@ -2,9 +2,9 @@ import { defineComponent as k, inject as w, ref as T, createElementBlock as C, o
|
|
|
2
2
|
import { t as R } from "./locale.js";
|
|
3
3
|
import S from "./Checkbox.js";
|
|
4
4
|
import { D as h } from "./DataView.keys-aSOnA4AD.js";
|
|
5
|
+
import "lodash-es/uniqueId";
|
|
5
6
|
import "lodash-es/cloneDeep";
|
|
6
7
|
import "./Module.keys-DcqBbvvT.js";
|
|
7
|
-
import "lodash-es/uniqueId";
|
|
8
8
|
import "./Illustration.vue_vue_type_script_setup_true_lang-C1bPkWZZ.js";
|
|
9
9
|
import { T as B } from "./Table.keys-LHQf6FEH.js";
|
|
10
10
|
import n from "./TableHeaderCell.js";
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as g, ref as n, computed as r, createElementBlock as S, openBlock as u, createElementVNode as i, createBlock as T, renderSlot as s, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as B } from "vue";
|
|
2
2
|
import { u as D, a as O, f as z, s as A, o as F, b as I } from "./floating-ui.vue-CuGrC-z8.js";
|
|
3
|
-
import { u as P } from "./index-
|
|
3
|
+
import { u as P } from "./index-DA70nQCT.js";
|
|
4
4
|
const M = { class: "stash-tooltip__wrapper relative inline-flex size-fit" }, N = 6, C = 12, U = /* @__PURE__ */ g({
|
|
5
5
|
__name: "Tooltip",
|
|
6
6
|
props: {
|
|
@@ -78,4 +78,4 @@ const M = { class: "stash-tooltip__wrapper relative inline-flex size-fit" }, N =
|
|
|
78
78
|
export {
|
|
79
79
|
U as _
|
|
80
80
|
};
|
|
81
|
-
//# sourceMappingURL=Tooltip.vue_vue_type_script_setup_true_lang-
|
|
81
|
+
//# sourceMappingURL=Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { arrow, autoUpdate, flip, offset, shift, type Side, useFloating } from '@floating-ui/vue';\n import { useMouseInElement } from '@vueuse/core';\n import { computed, ref } from 'vue';\n\n export type TooltipSide = Side;\n\n const ARROW_OFFSET_PX = 6;\n const OFFSET_DISTANCE_PX = 12;\n\n const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n };\n\n export interface TooltipSlots {\n /**\n * The content to display in the tooltip. This may be text node, an element, or a component.\n */\n content: any;\n /**\n * The default slot is the element or component to which the tooltip will be anchored.\n */\n default: any;\n /**\n * A slot for the primary icon. This icon will be displayed before the text or content.\n */\n icon: any;\n /**\n * A slot for the secondary icon. This icon will be displayed after the text or content.\n */\n secondaryIcon: any;\n }\n\n defineSlots<TooltipSlots>();\n\n export interface TooltipProps {\n /**\n * Disables teleporting the popover menu to an external element\n * @default false\n */\n disableTeleport?: boolean;\n /**\n * Sets the placement of the menu\n * @default 'top'\n */\n side?: TooltipSide;\n /**\n * Disables the tooltip\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n * @default false\n */\n isOpen?: boolean;\n /**\n * The query selector where the tooltip should be teleported\n * @default '#stash-menus-mount-node'\n */\n teleportTo?: string | HTMLElement;\n /**\n * String content to display within the tooltip\n * @default ''\n */\n text?: string;\n }\n\n const props = withDefaults(defineProps<TooltipProps>(), {\n disableTeleport: false,\n isDisabled: false,\n isOpen: false,\n side: 'top',\n teleportTo: '#stash-menus-mount-node',\n text: '',\n });\n\n const anchor = ref<HTMLElement | null>(null);\n const floatingArrow = ref<HTMLElement | null>(null);\n const tooltip = ref<HTMLElement | null>(null);\n\n const { isOutside } = useMouseInElement(anchor);\n\n const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n const placementSetting = computed(() => props.side);\n\n const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n whileElementsMounted: autoUpdate,\n placement: placementSetting,\n middleware: [\n flip(),\n shift({ padding: 8 }),\n offset(OFFSET_DISTANCE_PX),\n arrow({ element: floatingArrow, padding: 8 }),\n ],\n });\n\n const arrowStyles = computed(() => {\n const arrowPosition = SIDE_MAP[placement.value];\n\n return {\n left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n };\n });\n</script>\n\n<template>\n <div class=\"stash-tooltip__wrapper relative inline-flex size-fit\">\n <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n <slot></slot>\n </span>\n <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n <div\n ref=\"tooltip\"\n data-test=\"stash-tooltip\"\n class=\"stash-tooltip pointer-events-none z-screen flex w-[148px] flex-col items-center whitespace-normal rounded bg-ice-900 p-3 text-center text-xs text-white opacity-0 shadow transition-opacity\"\n role=\"tooltip\"\n :style=\"{\n ...floatingStyles,\n opacity: open ? 0.95 : 0,\n }\"\n >\n <slot name=\"icon\"></slot>\n <slot name=\"content\">{{ props.text }}</slot>\n <slot name=\"secondaryIcon\"></slot>\n <div\n ref=\"floatingArrow\"\n class=\"stash-tooltip__arrow absolute z-behind size-[12px] rotate-45 bg-ice-900\"\n :style=\"arrowStyles\"\n ></div>\n </div>\n </Teleport>\n </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","shift","offset","arrow","arrowStyles","arrowPosition","_a","_b","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx","_createBlock","_Teleport","_normalizeStyle","_unref","_createTextVNode","_toDisplayString"],"mappings":";;;6EAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAyDFC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,MAAcC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY;AAAA,QACVM,EAAA;AAAA,QACAC,EAAM,EAAE,SAAS,GAAG;AAAA,QACpBC,EAAOpB,CAAkB;AAAA,QACzBqB,EAAM,EAAE,SAASf,GAAe,SAAS,GAAG;AAAA,MAAA;AAAA,IAC9C,CACD,GAEKgB,IAAcX,EAAS,MAAM;;AACjC,YAAMY,IAAgBtB,EAASc,EAAU,KAAK;AAE9C,aAAO;AAAA,QACL,QAAMS,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKW,IAAAX,EAAe,MAAM,UAArB,gBAAAW,EAA4B,MAAK,OAAO,GAAGX,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACS,CAAa,GAAG,IAAIxB,CAAe;AAAA,MAAA;AAAA,IAExC,CAAC;sBAID2B,EAAA,GAAAC,EAyBM,OAzBNC,GAyBM;AAAA,MAxBJC,EAEO,QAAA;AAAA,iBAFG;AAAA,QAAJ,KAAIzB;AAAA,QAAS,aAAU;AAAA,QAAuB,OAAM;AAAA,MAAA;QACxD0B,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;YAEfC,EAoBWC,GAAA;AAAA,QApBA,IAAI/B,EAAM;AAAA,QAAa,UAAUA,EAAM;AAAA,MAAA;QAChD2B,EAkBM,OAAA;AAAA,mBAjBA;AAAA,UAAJ,KAAItB;AAAA,UACJ,aAAU;AAAA,UACV,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,OAAK2B,EAAA;AAAA,eAAiBC,EAAAtB,CAAA;AAAA,qBAAmCH,EAAA,QAAI,OAAA;AAAA,UAAA;;UAK9DoB,EAAyBC,EAAA,QAAA,MAAA;AAAA,UACzBD,EAA4CC,yBAA5C,MAA4C;AAAA,YAApBK,EAAAC,EAAAnC,EAAM,IAAI,GAAA,CAAA;AAAA,UAAA;UAClC4B,EAAkCC,EAAA,QAAA,eAAA;AAAA,UAClCF,EAIO,OAAA;AAAA,qBAHD;AAAA,YAAJ,KAAIvB;AAAA,YACJ,OAAM;AAAA,YACL,SAAOgB,EAAA,KAAW;AAAA,UAAA;;;;;;"}
|