@leaflink/stash 42.5.0 → 42.5.1
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/README.md +24 -3
- package/dist/ActionsDropdown.js +15 -20
- package/dist/ActionsDropdown.js.map +1 -1
- package/dist/AddressSelect.js +34 -45
- package/dist/AddressSelect.js.map +1 -1
- package/dist/Alert.js +11 -13
- package/dist/Alert.js.map +1 -1
- package/dist/AppNavigationItem.js +4 -6
- package/dist/AppNavigationItem.js.map +1 -1
- package/dist/AppTopbar.js +13 -15
- package/dist/AppTopbar.js.map +1 -1
- package/dist/ButtonGroup.js +12 -14
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/CardMedia.js +9 -11
- package/dist/CardMedia.js.map +1 -1
- package/dist/Carousel.js +41 -44
- package/dist/Carousel.js.map +1 -1
- package/dist/Checkbox.js +9 -11
- package/dist/Checkbox.js.map +1 -1
- package/dist/ChevronToggle.js +2 -4
- package/dist/ChevronToggle.js.map +1 -1
- package/dist/Chip.js +4 -6
- package/dist/Chip.js.map +1 -1
- package/dist/ContextSwitcher.js +12 -17
- package/dist/ContextSwitcher.js.map +1 -1
- package/dist/Copy.js +19 -24
- package/dist/Copy.js.map +1 -1
- package/dist/CurrencyInput.js +8 -13
- package/dist/CurrencyInput.js.map +1 -1
- package/dist/DataView.js +48 -59
- package/dist/DataView.js.map +1 -1
- package/dist/DataViewFilters.js +87 -97
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewSortButton.js +14 -18
- package/dist/DataViewSortButton.js.map +1 -1
- package/dist/DataViewToolbar.js +12 -14
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/DatePicker.js +8 -18
- package/dist/DatePicker.js.map +1 -1
- package/dist/Dialog.js +6 -9
- package/dist/Dialog.js.map +1 -1
- package/dist/Dropdown.js +15 -20
- package/dist/Dropdown.js.map +1 -1
- package/dist/EmptyState.js +10 -13
- package/dist/EmptyState.js.map +1 -1
- package/dist/Field.js +3 -6
- package/dist/Field.js.map +1 -1
- package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js → Field.vue_vue_type_script_setup_true_lang-475832fe.js} +2 -2
- package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js.map → Field.vue_vue_type_script_setup_true_lang-475832fe.js.map} +1 -1
- package/dist/FileUpload.js +27 -30
- package/dist/FileUpload.js.map +1 -1
- package/dist/FilterChip.js +10 -13
- package/dist/FilterChip.js.map +1 -1
- package/dist/FilterDrawerItem.js +5 -8
- package/dist/FilterDrawerItem.js.map +1 -1
- package/dist/FilterDropdown.js +73 -88
- package/dist/FilterDropdown.js.map +1 -1
- package/dist/FilterSelect.js +15 -18
- package/dist/FilterSelect.js.map +1 -1
- package/dist/Filters.js +67 -78
- package/dist/Filters.js.map +1 -1
- package/dist/HttpError.js +4 -7
- package/dist/HttpError.js.map +1 -1
- package/dist/Icon.js +236 -14
- package/dist/Icon.js.map +1 -1
- package/dist/Icon.vue.d.ts +2 -2
- package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js +11 -0
- package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js.map +1 -0
- package/dist/IconLabel.js +4 -6
- package/dist/IconLabel.js.map +1 -1
- package/dist/Illustration.js +6 -8
- package/dist/Illustration.js.map +1 -1
- package/dist/Image.js +39 -49
- package/dist/Image.js.map +1 -1
- package/dist/InlineEdit.js +10 -12
- package/dist/InlineEdit.js.map +1 -1
- package/dist/Input.js +50 -55
- package/dist/Input.js.map +1 -1
- package/dist/InputOptions.js +20 -29
- package/dist/InputOptions.js.map +1 -1
- package/dist/Label.js +1 -4
- package/dist/Label.js.map +1 -1
- package/dist/LicenseChip.js +7 -9
- package/dist/LicenseChip.js.map +1 -1
- package/dist/ListItem.js +11 -13
- package/dist/ListItem.js.map +1 -1
- package/dist/ListView.js +47 -58
- package/dist/ListView.js.map +1 -1
- package/dist/Metric.js +6 -8
- package/dist/Metric.js.map +1 -1
- package/dist/Modal.js +16 -19
- package/dist/Modal.js.map +1 -1
- package/dist/Modals.js +16 -26
- package/dist/Modals.js.map +1 -1
- package/dist/ModalsPlugin.js +12 -22
- package/dist/ModalsPlugin.js.map +1 -1
- package/dist/ObfuscateText.js +7 -9
- package/dist/ObfuscateText.js.map +1 -1
- package/dist/PageNavigation.js +25 -29
- package/dist/PageNavigation.js.map +1 -1
- package/dist/Paginate.js +29 -31
- package/dist/Paginate.js.map +1 -1
- package/dist/QuickAction.js +13 -15
- package/dist/QuickAction.js.map +1 -1
- package/dist/RadioGroup.js +86 -89
- package/dist/RadioGroup.js.map +1 -1
- package/dist/SearchBar.js +18 -20
- package/dist/SearchBar.js.map +1 -1
- package/dist/Select.js +13 -23
- package/dist/Select.js.map +1 -1
- package/dist/SelectStatus.js +26 -36
- package/dist/SelectStatus.js.map +1 -1
- package/dist/Step.js +19 -21
- package/dist/Step.js.map +1 -1
- package/dist/Switch.js +8 -10
- package/dist/Switch.js.map +1 -1
- package/dist/Tab.js +25 -30
- package/dist/Tab.js.map +1 -1
- package/dist/Table.js +19 -21
- package/dist/Table.js.map +1 -1
- package/dist/TableCell.js +21 -22
- package/dist/TableCell.js.map +1 -1
- package/dist/TableHeaderCell.js +4 -4
- package/dist/TableHeaderRow.js +7 -9
- package/dist/TableHeaderRow.js.map +1 -1
- package/dist/TableRow.js +22 -24
- package/dist/TableRow.js.map +1 -1
- package/dist/Tabs.js +11 -16
- package/dist/Tabs.js.map +1 -1
- package/dist/{Tabs.vue_vue_type_script_setup_true_lang-ba383fda.js → Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js} +3 -3
- package/dist/{Tabs.vue_vue_type_script_setup_true_lang-ba383fda.js.map → Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js.map} +1 -1
- package/dist/Textarea.js +10 -13
- package/dist/Textarea.js.map +1 -1
- package/dist/Toast.js +8 -10
- package/dist/Toast.js.map +1 -1
- package/dist/Toasts.js +14 -25
- package/dist/Toasts.js.map +1 -1
- package/dist/ToastsPlugin.js +14 -25
- package/dist/ToastsPlugin.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/index.js +53 -62
- package/dist/index.js.map +1 -1
- package/dist/locale.js +12 -15
- package/dist/locale.js.map +1 -1
- package/dist/{searchFuzzy-13c124f8.js → searchFuzzy-74a7de1c.js} +2 -2
- package/dist/{searchFuzzy-13c124f8.js.map → searchFuzzy-74a7de1c.js.map} +1 -1
- package/dist/storage.js +6 -11
- package/dist/storage.js.map +1 -1
- package/dist/tooltip.js +21 -26
- package/dist/tooltip.js.map +1 -1
- package/dist/useGoogleMaps.js +91 -226
- package/dist/useGoogleMaps.js.map +1 -1
- package/dist/useModals.js +21 -31
- package/dist/useModals.js.map +1 -1
- package/dist/useSearch.js +17 -22
- package/dist/useSearch.js.map +1 -1
- package/dist/useToasts.js +25 -36
- package/dist/useToasts.js.map +1 -1
- package/dist/useValidation.js +79 -108
- package/dist/useValidation.js.map +1 -1
- package/dist/utils/calculateElementOverflow.js +9 -14
- package/dist/utils/calculateElementOverflow.js.map +1 -1
- package/dist/utils/createQueryString.js +9 -15
- package/dist/utils/createQueryString.js.map +1 -1
- package/dist/utils/helpers.js +46 -59
- package/dist/utils/helpers.js.map +1 -1
- package/dist/utils/i18n.js +17 -20
- package/dist/utils/i18n.js.map +1 -1
- package/dist/utils/searchFuzzy.js +7 -12
- package/dist/utils/searchFuzzy.js.map +1 -1
- package/dist/utils/storage.js +10 -15
- package/dist/utils/storage.js.map +1 -1
- package/dist/viewable.js +26 -34
- package/dist/viewable.js.map +1 -1
- package/package.json +2 -4
- package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js +0 -243
- package/dist/Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js.map +0 -1
- package/dist/_MapCache-65811284.js +0 -188
- package/dist/_MapCache-65811284.js.map +0 -1
- package/dist/_Uint8Array-06e4d083.js +0 -66
- package/dist/_Uint8Array-06e4d083.js.map +0 -1
- package/dist/_baseAssignValue-dd1499b4.js +0 -22
- package/dist/_baseAssignValue-dd1499b4.js.map +0 -1
- package/dist/_baseIsEqual-d594c87f.js +0 -171
- package/dist/_baseIsEqual-d594c87f.js.map +0 -1
- package/dist/_createCompounder-ae01a723.js +0 -245
- package/dist/_createCompounder-ae01a723.js.map +0 -1
- package/dist/_getAllKeys-5e735d41.js +0 -44
- package/dist/_getAllKeys-5e735d41.js.map +0 -1
- package/dist/_getPrototype-3e6fccd6.js +0 -7
- package/dist/_getPrototype-3e6fccd6.js.map +0 -1
- package/dist/_getTag-4db47fa6.js +0 -47
- package/dist/_getTag-4db47fa6.js.map +0 -1
- package/dist/_initCloneObject-161353b9.js +0 -88
- package/dist/_initCloneObject-161353b9.js.map +0 -1
- package/dist/_overArg-6d920d99.js +0 -9
- package/dist/_overArg-6d920d99.js.map +0 -1
- package/dist/capitalize-667d9f60.js +0 -42
- package/dist/capitalize-667d9f60.js.map +0 -1
- package/dist/cloneDeep-5bc375b0.js +0 -146
- package/dist/cloneDeep-5bc375b0.js.map +0 -1
- package/dist/debounce-6aca1ca9.js +0 -86
- package/dist/debounce-6aca1ca9.js.map +0 -1
- package/dist/get-27d90892.js +0 -66
- package/dist/get-27d90892.js.map +0 -1
- package/dist/identity-452d03fd.js +0 -20
- package/dist/identity-452d03fd.js.map +0 -1
- package/dist/isArrayLike-09233e52.js +0 -61
- package/dist/isArrayLike-09233e52.js.map +0 -1
- package/dist/isEmpty-2fbad344.js +0 -23
- package/dist/isEmpty-2fbad344.js.map +0 -1
- package/dist/isEqual-fca467fb.js +0 -8
- package/dist/isEqual-fca467fb.js.map +0 -1
- package/dist/isObjectLike-54341556.js +0 -39
- package/dist/isObjectLike-54341556.js.map +0 -1
- package/dist/isPlainObject-55c7f916.js +0 -16
- package/dist/isPlainObject-55c7f916.js.map +0 -1
- package/dist/merge-b14fad9d.js +0 -124
- package/dist/merge-b14fad9d.js.map +0 -1
- package/dist/toString-7d5bf363.js +0 -29
- package/dist/toString-7d5bf363.js.map +0 -1
- package/dist/uniqueId-847efe53.js +0 -10
- package/dist/uniqueId-847efe53.js.map +0 -1
package/dist/Table.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { defineComponent as T, inject as y, computed as a, provide as B, openBlock as w, createElementBlock as C, normalizeClass as b, unref as n, normalizeStyle as L, createElementVNode as
|
|
1
|
+
import { defineComponent as T, inject as y, computed as a, provide as B, openBlock as w, createElementBlock as C, normalizeClass as b, unref as n, normalizeStyle as L, createElementVNode as u, renderSlot as m, createBlock as H, withCtx as s, createVNode as l } from "vue";
|
|
2
|
+
import "lodash-es/cloneDeep";
|
|
2
3
|
import { M as v } from "./Module.keys-2cc7d830.js";
|
|
3
|
-
import "
|
|
4
|
+
import "lodash-es/uniqueId";
|
|
5
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
4
6
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
|
|
5
7
|
import { D as g } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
6
8
|
import N from "./EmptyState.js";
|
|
@@ -9,13 +11,8 @@ import h from "./TableCell.js";
|
|
|
9
11
|
import E from "./TableRow.js";
|
|
10
12
|
import { T as I } from "./Table.keys-1ebe4ecb.js";
|
|
11
13
|
import { S as V } from "./misc-d0eec261.js";
|
|
12
|
-
import "./uniqueId-847efe53.js";
|
|
13
|
-
import "./toString-7d5bf363.js";
|
|
14
|
-
import "./isObjectLike-54341556.js";
|
|
15
|
-
import "./index-79ce320f.js";
|
|
16
14
|
import "./locale.js";
|
|
17
|
-
import "
|
|
18
|
-
import "./_MapCache-65811284.js";
|
|
15
|
+
import "lodash-es/get";
|
|
19
16
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
|
|
20
17
|
import "./_plugin-vue_export-helper-dad06003.js";
|
|
21
18
|
import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
|
|
@@ -25,9 +22,10 @@ import "./Checkbox.js";
|
|
|
25
22
|
import "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
|
|
26
23
|
import "./Button.js";
|
|
27
24
|
import "./Icon.js";
|
|
25
|
+
import "./index-79ce320f.js";
|
|
28
26
|
import "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
|
|
29
27
|
var A = /* @__PURE__ */ ((e) => (e.Scroll = "scroll", e.Stack = "stack", e))(A || {}), O = /* @__PURE__ */ ((e) => (e.None = "none", e.Rounded = "rounded", e.RoundedBottom = "rounded-bottom", e))(O || {});
|
|
30
|
-
const J = { class: "tw-relative tw-border-separate tw-max-w-initial tw-min-w-full" },
|
|
28
|
+
const J = { class: "tw-relative tw-border-separate tw-max-w-initial tw-min-w-full" }, ut = /* @__PURE__ */ T({
|
|
31
29
|
__name: "Table",
|
|
32
30
|
props: {
|
|
33
31
|
density: { default: void 0 },
|
|
@@ -48,7 +46,7 @@ const J = { class: "tw-relative tw-border-separate tw-max-w-initial tw-min-w-ful
|
|
|
48
46
|
variant: p,
|
|
49
47
|
isLoading: x,
|
|
50
48
|
isEmpty: S
|
|
51
|
-
} = y(g.key, g.defaults), { variant:
|
|
49
|
+
} = y(g.key, g.defaults), { variant: i } = y(v.key, v.defaults), c = a(() => (i == null ? void 0 : i.value) === "table" || p.value === "table" ? "rounded-bottom" : t.radius), r = a(() => t.stickyHeader ? "scroll" : t.layout), f = a(() => {
|
|
52
50
|
var o, d;
|
|
53
51
|
return !!((o = t.stickyHeader) != null && o.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
|
|
54
52
|
((d = t.stickyHeader) == null ? void 0 : d.listLength) > 3);
|
|
@@ -78,30 +76,30 @@ const J = { class: "tw-relative tw-border-separate tw-max-w-initial tw-min-w-ful
|
|
|
78
76
|
"data-test": "stash-table",
|
|
79
77
|
style: L(_.value)
|
|
80
78
|
}, [
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
u("table", J, [
|
|
80
|
+
u("thead", {
|
|
83
81
|
class: b(["tw-border-b tw-border-ice-200", {
|
|
84
82
|
"tw-hidden lg:tw-table-header-group": r.value === "stack"
|
|
85
83
|
}])
|
|
86
84
|
}, [
|
|
87
|
-
|
|
85
|
+
m(o.$slots, "head")
|
|
88
86
|
], 2),
|
|
89
|
-
|
|
87
|
+
u("tbody", null, [
|
|
90
88
|
t.isLoading || n(x) ? (w(), H(E, { key: 0 }, {
|
|
91
|
-
default:
|
|
89
|
+
default: s(() => [
|
|
92
90
|
l(h, { colspan: "100%" }, {
|
|
93
|
-
default:
|
|
91
|
+
default: s(() => [
|
|
94
92
|
l(D)
|
|
95
93
|
]),
|
|
96
94
|
_: 1
|
|
97
95
|
})
|
|
98
96
|
]),
|
|
99
97
|
_: 1
|
|
100
|
-
})) : t.isEmpty || n(S) ?
|
|
98
|
+
})) : t.isEmpty || n(S) ? m(o.$slots, "empty", { key: 1 }, () => [
|
|
101
99
|
l(E, null, {
|
|
102
|
-
default:
|
|
100
|
+
default: s(() => [
|
|
103
101
|
l(h, { colspan: "100%" }, {
|
|
104
|
-
default:
|
|
102
|
+
default: s(() => [
|
|
105
103
|
l(N, {
|
|
106
104
|
class: "tw-bg-white tw-w-full",
|
|
107
105
|
text: t.emptyStateText
|
|
@@ -112,7 +110,7 @@ const J = { class: "tw-relative tw-border-separate tw-max-w-initial tw-min-w-ful
|
|
|
112
110
|
]),
|
|
113
111
|
_: 1
|
|
114
112
|
})
|
|
115
|
-
]) :
|
|
113
|
+
]) : m(o.$slots, "body", { key: 2 })
|
|
116
114
|
])
|
|
117
115
|
])
|
|
118
116
|
], 6));
|
|
@@ -122,6 +120,6 @@ export {
|
|
|
122
120
|
A as Layout,
|
|
123
121
|
I as TABLE_INJECTION,
|
|
124
122
|
O as TableRadius,
|
|
125
|
-
|
|
123
|
+
ut as default
|
|
126
124
|
};
|
|
127
125
|
//# 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 { 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","<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 } 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 isLoading: isDataViewLoading,\n isEmpty: isDataViewEmpty,\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 isStickyHeaderEnabled = computed<boolean>(() => {\n return !!(\n (\n props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n props.stickyHeader?.listLength > 3\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 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(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n layout: computedLayout,\n });\n</script>\n\n<template>\n <div\n class=\"stash-table tw-relative\"\n :class=\"[\n { 'tw-rounded': computedRadius === 'rounded' },\n { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n { 'tw-shadow tw-overflow-auto': computedLayout === 'scroll' },\n { 'lg:tw-shadow tw-overflow-visble lg:tw-overflow-auto': computedLayout === 'stack' },\n { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n ]\"\n data-test=\"stash-table\"\n :style=\"rootStyle\"\n >\n <table class=\"tw-relative tw-border-separate tw-max-w-initial tw-min-w-full\">\n <thead\n class=\"tw-border-b tw-border-ice-200\"\n :class=\"{\n 'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n }\"\n >\n <!-- @slot head -->\n <slot name=\"head\"> </slot>\n </thead>\n <tbody>\n <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n <TableCell colspan=\"100%\">\n <Loading />\n </TableCell>\n </TableRow>\n <!-- @slot empty -->\n <slot v-else-if=\"props.isEmpty || isDataViewEmpty\" name=\"empty\">\n <TableRow>\n <TableCell colspan=\"100%\">\n <EmptyState class=\"tw-bg-white tw-w-full\" :text=\"props.emptyStateText\" />\n </TableCell>\n </TableRow>\n </slot>\n <!-- @slot body -->\n <slot v-else name=\"body\"></slot>\n </tbody>\n </table>\n </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewLoading","isDataViewEmpty","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { 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","<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 } 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 isLoading: isDataViewLoading,\n isEmpty: isDataViewEmpty,\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 isStickyHeaderEnabled = computed<boolean>(() => {\n return !!(\n (\n props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n props.stickyHeader?.listLength > 3\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 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(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n layout: computedLayout,\n });\n</script>\n\n<template>\n <div\n class=\"stash-table tw-relative\"\n :class=\"[\n { 'tw-rounded': computedRadius === 'rounded' },\n { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n { 'tw-shadow tw-overflow-auto': computedLayout === 'scroll' },\n { 'lg:tw-shadow tw-overflow-visble lg:tw-overflow-auto': computedLayout === 'stack' },\n { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n ]\"\n data-test=\"stash-table\"\n :style=\"rootStyle\"\n >\n <table class=\"tw-relative tw-border-separate tw-max-w-initial tw-min-w-full\">\n <thead\n class=\"tw-border-b tw-border-ice-200\"\n :class=\"{\n 'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n }\"\n >\n <!-- @slot head -->\n <slot name=\"head\"> </slot>\n </thead>\n <tbody>\n <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n <TableCell colspan=\"100%\">\n <Loading />\n </TableCell>\n </TableRow>\n <!-- @slot empty -->\n <slot v-else-if=\"props.isEmpty || isDataViewEmpty\" name=\"empty\">\n <TableRow>\n <TableCell colspan=\"100%\">\n <EmptyState class=\"tw-bg-white tw-w-full\" :text=\"props.emptyStateText\" />\n </TableCell>\n </TableRow>\n </slot>\n <!-- @slot body -->\n <slot v-else name=\"body\"></slot>\n </tbody>\n </table>\n </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewLoading","isDataViewEmpty","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,SAASC;AAAA,IACP,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBL,EAAgB,UAAU,UACrB,mBAGFS,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWV,EAAgB,SAASkB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/TableCell.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { defineComponent as p, useCssModule as d, inject as u, openBlock as
|
|
2
|
-
import "
|
|
1
|
+
import { defineComponent as p, useCssModule as d, inject as u, openBlock as r, createElementBlock as c, normalizeClass as f, unref as t, toDisplayString as b, createCommentVNode as _, renderSlot as w } from "vue";
|
|
2
|
+
import "lodash-es/cloneDeep";
|
|
3
|
+
import "lodash-es/uniqueId";
|
|
4
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
3
5
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
|
|
4
6
|
import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
7
|
+
import "lodash-es/get";
|
|
5
8
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
|
|
6
9
|
import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
|
|
7
10
|
import { T as y, s as C } from "./Table.keys-1ebe4ecb.js";
|
|
8
11
|
import "./Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js";
|
|
9
12
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
|
|
10
13
|
import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
|
|
11
|
-
import "./uniqueId-847efe53.js";
|
|
12
|
-
import "./toString-7d5bf363.js";
|
|
13
|
-
import "./isObjectLike-54341556.js";
|
|
14
|
-
import "./index-79ce320f.js";
|
|
15
14
|
const T = {
|
|
16
15
|
key: 0,
|
|
17
16
|
class: "tw-text-xs tw-text-ice-900 tw-font-medium lg:tw-hidden"
|
|
@@ -21,36 +20,36 @@ const T = {
|
|
|
21
20
|
isControl: { type: Boolean, default: !1 },
|
|
22
21
|
mobileHeader: { default: "" }
|
|
23
22
|
},
|
|
24
|
-
setup(
|
|
25
|
-
const l =
|
|
26
|
-
if (!
|
|
23
|
+
setup(n) {
|
|
24
|
+
const l = n, e = d(), a = u(y.key);
|
|
25
|
+
if (!a)
|
|
27
26
|
throw new Error("TableCell must be used within a Table component");
|
|
28
|
-
const { density:
|
|
29
|
-
return (m, g) => (
|
|
27
|
+
const { density: o, hasActions: i, layout: s } = a;
|
|
28
|
+
return (m, g) => (r(), c("td", {
|
|
30
29
|
class: f(["stash-table-cell", [
|
|
31
|
-
t(
|
|
32
|
-
t(
|
|
30
|
+
t(e).root,
|
|
31
|
+
t(e)[`layout--${t(s)}`],
|
|
33
32
|
{
|
|
34
|
-
[t(
|
|
35
|
-
[t(
|
|
36
|
-
[t(
|
|
33
|
+
[t(e)["root--density-compact"]]: t(o) === "compact",
|
|
34
|
+
[t(e)["root--density-comfortable"]]: t(o) === "comfortable",
|
|
35
|
+
[t(e)["has-actions"]]: t(i),
|
|
37
36
|
"tw-p-3": t(s) === "scroll",
|
|
38
37
|
"tw-p-1.5": t(s) === "stack",
|
|
39
|
-
"lg:tw-p-3": t(
|
|
40
|
-
"lg:tw-py-6 lg:tw-px-3": t(
|
|
41
|
-
[t(
|
|
38
|
+
"lg:tw-p-3": t(o) === "compact",
|
|
39
|
+
"lg:tw-py-6 lg:tw-px-3": t(o) === "comfortable",
|
|
40
|
+
[t(e)["is-control"]]: l.isControl
|
|
42
41
|
}
|
|
43
42
|
]]),
|
|
44
43
|
"data-test": "stash-table-cell"
|
|
45
44
|
}, [
|
|
46
|
-
l.mobileHeader && t(s) === "stack" ? (
|
|
45
|
+
l.mobileHeader && t(s) === "stack" ? (r(), c("div", T, b(l.mobileHeader), 1)) : _("", !0),
|
|
47
46
|
w(m.$slots, "default")
|
|
48
47
|
], 2));
|
|
49
48
|
}
|
|
50
49
|
}), x = {
|
|
51
50
|
$style: C
|
|
52
|
-
},
|
|
51
|
+
}, J = /* @__PURE__ */ h(k, [["__cssModules", x]]);
|
|
53
52
|
export {
|
|
54
|
-
|
|
53
|
+
J as default
|
|
55
54
|
};
|
|
56
55
|
//# sourceMappingURL=TableCell.js.map
|
package/dist/TableCell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableCellProps {\n /**\n * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n */\n isControl?: boolean;\n /**\n * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n */\n mobileHeader?: string;\n }\n\n const props = withDefaults(defineProps<TableCellProps>(), {\n isControl: false,\n mobileHeader: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableCell must be used within a Table component');\n }\n\n const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n <td\n class=\"stash-table-cell\"\n data-test=\"stash-table-cell\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-p-3': layout === 'scroll',\n 'tw-p-1.5': layout === 'stack',\n 'lg:tw-p-3': density === 'compact',\n 'lg:tw-py-6 lg:tw-px-3': density === 'comfortable',\n [classes['is-control']]: props.isControl,\n },\n ]\"\n >\n <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-text-ice-900 tw-font-medium lg:tw-hidden\">\n {{ props.mobileHeader }}\n </div>\n <!-- @slot default -->\n <slot></slot>\n </td>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n .layout--scroll {\n background-color: var(--color-white);\n border: none;\n border-bottom: 1px solid var(--color-ice-200);\n }\n\n .layout--scroll.has-actions:last-of-type {\n text-align: center;\n }\n\n .layout--stack {\n background-color: var(--color-ice-100);\n border-radius: var(--border-radius);\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: transparent;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n .layout--stack.is-control {\n background-color: transparent;\n }\n\n /* On large screens, layout--stack should match layout--scroll */\n @media screen(lg) {\n .layout--stack {\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: initial;\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: var(--color-white);\n position: initial;\n right: initial;\n text-align: center;\n top: initial;\n }\n\n .layout--stack.is-control {\n background-color: var(--color-white);\n }\n\n .root--density-comfortable:last-of-type:not(.has-actions) {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.row-toggle-expansion-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../src/components/TableCell/TableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, useCssModule } from 'vue';\n\n import { TABLE_INJECTION } from '../Table/Table.vue';\n\n export interface TableCellProps {\n /**\n * If true, displays the cell as a control (vs data) cell without a background color on mobile when Table is in the stacked layout\n */\n isControl?: boolean;\n /**\n * If true, displays the header inside the cell on mobile and tablet screens when Table is in the stacked layout\n */\n mobileHeader?: string;\n }\n\n const props = withDefaults(defineProps<TableCellProps>(), {\n isControl: false,\n mobileHeader: '',\n });\n const classes = useCssModule();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n if (!tableInjection) {\n throw new Error('TableCell must be used within a Table component');\n }\n\n const { density, hasActions, layout } = tableInjection;\n</script>\n\n<template>\n <td\n class=\"stash-table-cell\"\n data-test=\"stash-table-cell\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['root--density-compact']]: density === 'compact',\n [classes['root--density-comfortable']]: density === 'comfortable',\n [classes['has-actions']]: hasActions,\n 'tw-p-3': layout === 'scroll',\n 'tw-p-1.5': layout === 'stack',\n 'lg:tw-p-3': density === 'compact',\n 'lg:tw-py-6 lg:tw-px-3': density === 'comfortable',\n [classes['is-control']]: props.isControl,\n },\n ]\"\n >\n <div v-if=\"props.mobileHeader && layout === 'stack'\" class=\"tw-text-xs tw-text-ice-900 tw-font-medium lg:tw-hidden\">\n {{ props.mobileHeader }}\n </div>\n <!-- @slot default -->\n <slot></slot>\n </td>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n .layout--scroll {\n background-color: var(--color-white);\n border: none;\n border-bottom: 1px solid var(--color-ice-200);\n }\n\n .layout--scroll.has-actions:last-of-type {\n text-align: center;\n }\n\n .layout--stack {\n background-color: var(--color-ice-100);\n border-radius: var(--border-radius);\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: transparent;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n .layout--stack.is-control {\n background-color: transparent;\n }\n\n /* On large screens, layout--stack should match layout--scroll */\n @media screen(lg) {\n .layout--stack {\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: initial;\n }\n\n .layout--stack.has-actions:last-of-type {\n background-color: var(--color-white);\n position: initial;\n right: initial;\n text-align: center;\n top: initial;\n }\n\n .layout--stack.is-control {\n background-color: var(--color-white);\n }\n\n .root--density-comfortable:last-of-type:not(.has-actions) {\n padding-right: 24px;\n }\n\n .root--density-comfortable:first-of-type:not(:global(.stash-table-header-row__selection-cell), :global(.stash-table-row__selection-cell), :global(.row-toggle-expansion-cell)) {\n padding-left: 24px;\n }\n }\n</style>\n"],"names":["classes","useCssModule","tableInjection","inject","TABLE_INJECTION","density","hasActions","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAoBQA,IAAUC,KAEVC,IAAiBC,EAAOC,EAAgB,GAAG;AACjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,iDAAiD;AAGnE,UAAM,EAAE,SAAAG,GAAS,YAAAC,GAAY,QAAAC,EAAA,IAAWL;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/TableHeaderCell.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { defineComponent as k, useCssModule as T, inject as p, computed as m, openBlock as r, createElementBlock as _, normalizeClass as s, unref as t, createElementVNode as x, renderSlot as E, createBlock as w, createCommentVNode as l } from "vue";
|
|
2
|
+
import "lodash-es/cloneDeep";
|
|
2
3
|
import f from "./Icon.js";
|
|
3
4
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
|
|
4
5
|
import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
6
|
+
import "lodash-es/get";
|
|
5
7
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
|
|
6
8
|
import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
|
|
7
9
|
import { T as q } from "./Table.keys-1ebe4ecb.js";
|
|
10
|
+
import "lodash-es/uniqueId";
|
|
8
11
|
import "./Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js";
|
|
9
12
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
|
|
10
13
|
import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
|
|
11
|
-
import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
|
|
12
|
-
import "./uniqueId-847efe53.js";
|
|
13
|
-
import "./toString-7d5bf363.js";
|
|
14
|
-
import "./isObjectLike-54341556.js";
|
|
15
14
|
import "./index-79ce320f.js";
|
|
15
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
16
16
|
const S = {
|
|
17
17
|
key: 0,
|
|
18
18
|
class: "tw-relative tw-h-4 tw-w-3"
|
package/dist/TableHeaderRow.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { defineComponent as f, inject as _, ref as b, openBlock as t, createElementBlock as k, unref as o, createBlock as s, normalizeClass as r, withCtx as y, createCommentVNode as i, renderSlot as x } from "vue";
|
|
2
2
|
import { t as T } from "./locale.js";
|
|
3
3
|
import C from "./Checkbox.js";
|
|
4
|
-
import "
|
|
4
|
+
import "lodash-es/cloneDeep";
|
|
5
|
+
import "lodash-es/uniqueId";
|
|
6
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
5
7
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
|
|
6
8
|
import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
7
9
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
|
|
@@ -10,14 +12,10 @@ import { T as R } from "./Table.keys-1ebe4ecb.js";
|
|
|
10
12
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
|
|
11
13
|
import m from "./TableHeaderCell.js";
|
|
12
14
|
import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
|
|
13
|
-
import "
|
|
14
|
-
import "./isObjectLike-54341556.js";
|
|
15
|
-
import "./toString-7d5bf363.js";
|
|
16
|
-
import "./_MapCache-65811284.js";
|
|
17
|
-
import "./uniqueId-847efe53.js";
|
|
15
|
+
import "lodash-es/get";
|
|
18
16
|
import "./Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js";
|
|
19
|
-
import "./index-79ce320f.js";
|
|
20
17
|
import "./Icon.js";
|
|
18
|
+
import "./index-79ce320f.js";
|
|
21
19
|
const B = {
|
|
22
20
|
class: "stash-table-header-row",
|
|
23
21
|
"data-test": "stash-table-header-row"
|
|
@@ -67,8 +65,8 @@ const B = {
|
|
|
67
65
|
"row-control-cell": "_row-control-cell_s1phl_8"
|
|
68
66
|
}, H = {
|
|
69
67
|
$style: $
|
|
70
|
-
},
|
|
68
|
+
}, Q = /* @__PURE__ */ S(E, [["__cssModules", H]]);
|
|
71
69
|
export {
|
|
72
|
-
|
|
70
|
+
Q as default
|
|
73
71
|
};
|
|
74
72
|
//# sourceMappingURL=TableHeaderRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n export interface TableHeaderRowProps {\n allRowsSelected?: boolean;\n someRowsSelected?: boolean;\n }\n\n const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n allRowsSelected: false,\n someRowsSelected: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'select'): void;\n }>();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableHeaderRow must be used within a Table component');\n }\n\n const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n const checkboxKey = ref(0);\n\n function onSelect() {\n emit('select');\n\n /**\n * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n */\n checkboxKey.value++;\n }\n</script>\n\n<template>\n <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n <TableHeaderCell\n v-if=\"isSelectable\"\n class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n :class=\"$style['row-control-cell']\"\n >\n <Checkbox\n :key=\"checkboxKey\"\n :class=\"$style['row-selection-checkbox']\"\n :checked=\"props.allRowsSelected\"\n :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n :title=\"t('ll.selectAll')\"\n @update:indeterminate=\"onSelect\"\n @update:checked=\"onSelect\"\n />\n </TableHeaderCell>\n <TableHeaderCell\n v-if=\"isExpandable && !hasCustomExpandToggle\"\n :class=\"$style['row-control-cell']\"\n data-test=\"table-row-header-expansion-cell\"\n />\n <!-- @slot default -->\n <slot></slot>\n </tr>\n</template>\n\n<style module>\n .row-selection-checkbox label {\n padding: 0;\n min-height: var(--ll-space-3);\n vertical-align: middle;\n }\n\n .row-control-cell {\n border-right: 0;\n }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHeaderRow.js","sources":["../src/components/TableHeaderRow/TableHeaderRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { inject, ref } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox from '../Checkbox/Checkbox.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableHeaderCell from '../TableHeaderCell/TableHeaderCell.vue';\n\n export interface TableHeaderRowProps {\n allRowsSelected?: boolean;\n someRowsSelected?: boolean;\n }\n\n const props = withDefaults(defineProps<TableHeaderRowProps>(), {\n allRowsSelected: false,\n someRowsSelected: false,\n });\n\n const emit =\n defineEmits<{\n (e: 'select'): void;\n }>();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableHeaderRow must be used within a Table component');\n }\n\n const { hasCustomExpandToggle, isExpandable, isSelectable } = tableInjection;\n\n const checkboxKey = ref(0);\n\n function onSelect() {\n emit('select');\n\n /**\n * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n */\n checkboxKey.value++;\n }\n</script>\n\n<template>\n <tr class=\"stash-table-header-row\" data-test=\"stash-table-header-row\">\n <TableHeaderCell\n v-if=\"isSelectable\"\n class=\"stash-table-header-row__selection-cell tw-min-w-[48px]\"\n :class=\"$style['row-control-cell']\"\n >\n <Checkbox\n :key=\"checkboxKey\"\n :class=\"$style['row-selection-checkbox']\"\n :checked=\"props.allRowsSelected\"\n :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n :title=\"t('ll.selectAll')\"\n @update:indeterminate=\"onSelect\"\n @update:checked=\"onSelect\"\n />\n </TableHeaderCell>\n <TableHeaderCell\n v-if=\"isExpandable && !hasCustomExpandToggle\"\n :class=\"$style['row-control-cell']\"\n data-test=\"table-row-header-expansion-cell\"\n />\n <!-- @slot default -->\n <slot></slot>\n </tr>\n</template>\n\n<style module>\n .row-selection-checkbox label {\n padding: 0;\n min-height: var(--ll-space-3);\n vertical-align: middle;\n }\n\n .row-control-cell {\n border-right: 0;\n }\n</style>\n"],"names":["tableInjection","inject","TABLE_INJECTION","hasCustomExpandToggle","isExpandable","isSelectable","checkboxKey","ref","onSelect","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuBQA,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,uBAAAG,GAAuB,cAAAC,GAAc,cAAAC,EAAA,IAAiBL,GAExDM,IAAcC,EAAI,CAAC;AAEzB,aAASC,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODH,EAAA;AAAA,IACd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/TableRow.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as g, watch as q, openBlock as p, createElementBlock as k, Fragment as z, createElementVNode as F, mergeProps as y, unref as e, createBlock as C, normalizeClass as c, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as S } from "vue";
|
|
2
|
-
import
|
|
2
|
+
import J from "lodash-es/uniqueId";
|
|
3
3
|
import { t as f } from "./locale.js";
|
|
4
4
|
import L from "./Checkbox.js";
|
|
5
5
|
import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
|
|
6
6
|
import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
|
|
7
|
-
import "
|
|
7
|
+
import "lodash-es/cloneDeep";
|
|
8
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
8
9
|
import "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
|
|
9
10
|
import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
|
|
10
11
|
import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
|
|
@@ -12,10 +13,7 @@ import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
|
|
|
12
13
|
import T from "./TableCell.js";
|
|
13
14
|
import { T as G, a as H } from "./Table.keys-1ebe4ecb.js";
|
|
14
15
|
import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
|
|
15
|
-
import "
|
|
16
|
-
import "./isObjectLike-54341556.js";
|
|
17
|
-
import "./get-27d90892.js";
|
|
18
|
-
import "./_MapCache-65811284.js";
|
|
16
|
+
import "lodash-es/get";
|
|
19
17
|
import "./Checkbox.vue_vue_type_style_index_0_scoped_0cd31c8f_lang-4ed993c7.js";
|
|
20
18
|
import "./Button.js";
|
|
21
19
|
import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
|
|
@@ -35,29 +33,29 @@ const Q = /* @__PURE__ */ A({
|
|
|
35
33
|
const n = B, h = D(), t = M(), i = V(), E = j(G.key);
|
|
36
34
|
if (!E)
|
|
37
35
|
throw new Error("TableRow must be used within a Table component");
|
|
38
|
-
const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E,
|
|
36
|
+
const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E, o = P(n.isExpanded), s = g(() => $ && !!i.expansion), I = g(() => {
|
|
39
37
|
var l;
|
|
40
|
-
let
|
|
41
|
-
return u.value && (
|
|
38
|
+
let a = ((l = i.default) == null ? void 0 : l.call(i, { toggleExpand: d }).length) ?? 0;
|
|
39
|
+
return u.value && (a += 1), s.value && !v.value && (a += 1), a;
|
|
42
40
|
}), _ = J("table-row-");
|
|
43
|
-
function d(
|
|
41
|
+
function d(a) {
|
|
44
42
|
if (!s.value)
|
|
45
43
|
throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
|
|
46
|
-
const l = typeof
|
|
47
|
-
|
|
44
|
+
const l = typeof a == "boolean" ? a : !o.value;
|
|
45
|
+
o.value = l, b("update:isExpanded", l);
|
|
48
46
|
}
|
|
49
47
|
return q(
|
|
50
48
|
() => n.isExpanded,
|
|
51
49
|
() => d(n.isExpanded)
|
|
52
|
-
), (
|
|
50
|
+
), (a, l) => (p(), k(z, null, [
|
|
53
51
|
F("tr", y({
|
|
54
52
|
class: ["stash-table-row", [
|
|
55
53
|
e(t).root,
|
|
56
54
|
e(t)[`layout--${e(r)}`],
|
|
57
55
|
{
|
|
58
56
|
[e(t)["is-expandable"]]: s.value,
|
|
59
|
-
[e(t)["is-expanded"]]:
|
|
60
|
-
[e(t)["root--hidden-divider"]]:
|
|
57
|
+
[e(t)["is-expanded"]]: o.value,
|
|
58
|
+
[e(t)["root--hidden-divider"]]: a.hideExpansionDivider,
|
|
61
59
|
"tw-p-gutter": e(r) === "stack",
|
|
62
60
|
"tw-shadow lg:tw-shadow-none tw-mb-6 lg:tw-mb-0": e(r) === "stack" && !s.value,
|
|
63
61
|
"tw-pt-[60px]": e(R) && e(r) === "stack" && !e(u)
|
|
@@ -90,16 +88,16 @@ const Q = /* @__PURE__ */ A({
|
|
|
90
88
|
default: m(() => [
|
|
91
89
|
w(O, {
|
|
92
90
|
"aria-controls": e(_),
|
|
93
|
-
"aria-label":
|
|
94
|
-
direction:
|
|
95
|
-
"is-expanded":
|
|
91
|
+
"aria-label": o.value ? e(f)("ll.table.collapseRow") : e(f)("ll.table.expandRow"),
|
|
92
|
+
direction: o.value ? "up" : "down",
|
|
93
|
+
"is-expanded": o.value,
|
|
96
94
|
onClick: d
|
|
97
95
|
}, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
|
|
98
96
|
]),
|
|
99
97
|
_: 1
|
|
100
98
|
}, 8, ["class"])) : x("", !0),
|
|
101
|
-
S(
|
|
102
|
-
isRowExpanded:
|
|
99
|
+
S(a.$slots, "default", {
|
|
100
|
+
isRowExpanded: o.value,
|
|
103
101
|
toggleExpand: d
|
|
104
102
|
})
|
|
105
103
|
], 16),
|
|
@@ -114,10 +112,10 @@ const Q = /* @__PURE__ */ A({
|
|
|
114
112
|
class: c(["tw-py-0 tw-px-3 tw-bg-white tw-border-none", e(t)["row-expansion-content"]]),
|
|
115
113
|
"data-test": "table-row-expansion-cell",
|
|
116
114
|
colspan: I.value,
|
|
117
|
-
"is-expanded":
|
|
115
|
+
"is-expanded": o.value
|
|
118
116
|
}, {
|
|
119
117
|
default: m(() => [
|
|
120
|
-
S(
|
|
118
|
+
S(a.$slots, "expansion")
|
|
121
119
|
]),
|
|
122
120
|
_: 3
|
|
123
121
|
}, 8, ["id", "class", "colspan", "is-expanded"])
|
|
@@ -126,8 +124,8 @@ const Q = /* @__PURE__ */ A({
|
|
|
126
124
|
}
|
|
127
125
|
}), W = {
|
|
128
126
|
$style: H
|
|
129
|
-
},
|
|
127
|
+
}, he = /* @__PURE__ */ K(Q, [["__cssModules", W]]);
|
|
130
128
|
export {
|
|
131
|
-
|
|
129
|
+
he as default
|
|
132
130
|
};
|
|
133
131
|
//# sourceMappingURL=TableRow.js.map
|
package/dist/TableRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-shadow lg:tw-shadow-none tw-mb-6 lg:tw-mb-0': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"row-toggle-expansion-cell tw-px-0\"\n data-test=\"table-row-toggle-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row-expansion\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <Expand\n is=\"td\"\n :id=\"rowId\"\n class=\"tw-py-0 tw-px-3 tw-bg-white tw-border-none\"\n data-test=\"table-row-expansion-cell\"\n :class=\"classes['row-expansion-content']\"\n :colspan=\"childCellCount\"\n :is-expanded=\"isRowExpanded\"\n >\n <!-- @slot expansion, for expandable content -->\n <slot name=\"expansion\"></slot>\n </Expand>\n </tr>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n /**\n * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n */\n .is-expandable > td {\n border-bottom-color: var(--color-ice-200);\n transition: border-bottom-color 0.5s;\n }\n\n .root--hidden-divider.is-expanded > td {\n transition: border-bottom-color 0s;\n /**\n * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n */\n border-bottom-color: transparent;\n }\n\n .layout--scroll {\n border-radius: 0;\n box-shadow: none !important;\n margin: 0;\n }\n\n .layout--scroll:last-of-type {\n border: 0;\n }\n\n .layout--scroll:last-of-type td {\n border-bottom: none;\n }\n\n .layout--stack {\n align-items: stretch;\n background-color: var(--color-white);\n column-gap: var(--grid-gutter);\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n position: relative;\n row-gap: var(--grid-gutter);\n }\n\n .layout--stack:not(.is-expanded) {\n border-radius: var(--border-radius);\n transition: border-radius 0.5s;\n }\n\n .layout--stack.is-expanded {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n\n .row-selection-checkbox label {\n padding: 0;\n min-height: var(--ll-space-3);\n vertical-align: middle;\n }\n\n .layout--stack .row-control-cell {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n /* On mobile, display controls on their own row, pushing other cells below */\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: 1;\n }\n\n .row-expansion-content {\n box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n }\n\n .layout--stack + .row-expansion,\n .layout--stack + .row-expansion > .row-expansion-content {\n display: block;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: 1px solid var(--color-ice-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n margin-bottom: var(--ll-space-3);\n }\n\n .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n border-top: none;\n }\n\n /* On large screens, match the styles for layout-SCROLL */\n @media screen(lg) {\n .layout--stack {\n align-items: unset;\n background-color: unset;\n border: 0;\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: 0;\n box-shadow: none;\n column-gap: unset;\n display: table-row;\n grid-template-columns: unset;\n row-gap: unset;\n }\n\n .layout--stack:last-of-type {\n border-bottom: 0;\n }\n\n .layout--stack .row-control-cell {\n display: table-cell;\n }\n\n .layout--stack + .row-expansion {\n display: table-row;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: unset;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n display: table-cell;\n margin-bottom: unset;\n }\n\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: unset;\n }\n }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import uniqueId from 'lodash-es/uniqueId';\n import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n import { t } from '../../locale';\n import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n import Expand from '../Expand/Expand.vue';\n import { TABLE_INJECTION } from '../Table/Table.vue';\n import TableCell from '../TableCell/TableCell.vue';\n\n defineOptions({ inheritAttrs: false });\n\n export interface TableRowProps {\n hideExpansionDivider?: boolean;\n isExpanded?: boolean;\n isSelected?: boolean;\n isSelectDisabled?: boolean;\n }\n\n const props = withDefaults(defineProps<TableRowProps>(), {\n /**\n * If true, hides the divider between the parent row and expansion row\n */\n hideExpansionDivider: false,\n isExpanded: false,\n isSelected: false,\n isSelectDisabled: false,\n });\n\n const emit =\n defineEmits<{\n 'update:isSelected': [isChecked: CheckboxProps['checked']];\n 'update:isExpanded': [isExpanded: boolean];\n }>();\n\n const attrs = useAttrs();\n const classes = useCssModule();\n const slots = useSlots();\n\n const tableInjection = inject(TABLE_INJECTION.key);\n\n if (!tableInjection) {\n throw new Error('TableRow must be used within a Table component');\n }\n\n const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n const isRowExpanded = ref(props.isExpanded);\n const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n const childCellCount = computed(() => {\n let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n if (isSelectable.value) {\n count += 1;\n }\n\n if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n count += 1;\n }\n\n return count;\n });\n const rowId = uniqueId('table-row-');\n\n function toggleExpand(value?: boolean) {\n if (!isRowExpandable.value) {\n throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n }\n\n const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n isRowExpanded.value = isExpanded;\n emit('update:isExpanded', isExpanded);\n }\n\n watch(\n () => props.isExpanded,\n () => toggleExpand(props.isExpanded),\n );\n</script>\n\n<template>\n <tr\n class=\"stash-table-row\"\n :class=\"[\n classes.root,\n classes[`layout--${layout}`],\n {\n [classes['is-expandable']]: isRowExpandable,\n [classes['is-expanded']]: isRowExpanded,\n [classes['root--hidden-divider']]: hideExpansionDivider,\n 'tw-p-gutter': layout === 'stack',\n 'tw-shadow lg:tw-shadow-none tw-mb-6 lg:tw-mb-0': layout === 'stack' && !isRowExpandable,\n 'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n },\n ]\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <TableCell\n v-if=\"isSelectable\"\n is-control\n class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n :class=\"classes['row-control-cell']\"\n >\n <Checkbox\n :class=\"classes['row-selection-checkbox']\"\n :checked=\"props.isSelected\"\n :disabled=\"props.isSelectDisabled\"\n :title=\"t('ll.select.self')\"\n @update:checked=\"emit('update:isSelected', $event)\"\n />\n </TableCell>\n <TableCell\n v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n class=\"row-toggle-expansion-cell tw-px-0\"\n data-test=\"table-row-toggle-expansion-cell\"\n is-control\n :class=\"classes['row-control-cell']\"\n >\n <ChevronToggle\n :aria-controls=\"rowId\"\n :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n :direction=\"isRowExpanded ? 'up' : 'down'\"\n :is-expanded=\"isRowExpanded\"\n @click=\"toggleExpand\"\n />\n </TableCell>\n <!-- @slot default -->\n <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n </tr>\n <tr\n v-if=\"isRowExpandable\"\n class=\"stash-table-row stash-table-row-expansion\"\n :class=\"classes['row-expansion']\"\n data-test=\"stash-table-row\"\n v-bind=\"attrs\"\n >\n <Expand\n is=\"td\"\n :id=\"rowId\"\n class=\"tw-py-0 tw-px-3 tw-bg-white tw-border-none\"\n data-test=\"table-row-expansion-cell\"\n :class=\"classes['row-expansion-content']\"\n :colspan=\"childCellCount\"\n :is-expanded=\"isRowExpanded\"\n >\n <!-- @slot expansion, for expandable content -->\n <slot name=\"expansion\"></slot>\n </Expand>\n </tr>\n</template>\n\n<style module>\n .root {\n border: 0;\n }\n\n /**\n * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n */\n .is-expandable > td {\n border-bottom-color: var(--color-ice-200);\n transition: border-bottom-color 0.5s;\n }\n\n .root--hidden-divider.is-expanded > td {\n transition: border-bottom-color 0s;\n /**\n * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n */\n border-bottom-color: transparent;\n }\n\n .layout--scroll {\n border-radius: 0;\n box-shadow: none !important;\n margin: 0;\n }\n\n .layout--scroll:last-of-type {\n border: 0;\n }\n\n .layout--scroll:last-of-type td {\n border-bottom: none;\n }\n\n .layout--stack {\n align-items: stretch;\n background-color: var(--color-white);\n column-gap: var(--grid-gutter);\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n position: relative;\n row-gap: var(--grid-gutter);\n }\n\n .layout--stack:not(.is-expanded) {\n border-radius: var(--border-radius);\n transition: border-radius 0.5s;\n }\n\n .layout--stack.is-expanded {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n }\n\n .row-selection-checkbox label {\n padding: 0;\n min-height: var(--ll-space-3);\n vertical-align: middle;\n }\n\n .layout--stack .row-control-cell {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n /* On mobile, display controls on their own row, pushing other cells below */\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: 1;\n }\n\n .row-expansion-content {\n box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n }\n\n .layout--stack + .row-expansion,\n .layout--stack + .row-expansion > .row-expansion-content {\n display: block;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: 1px solid var(--color-ice-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n margin-bottom: var(--ll-space-3);\n }\n\n .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n border-top: none;\n }\n\n /* On large screens, match the styles for layout-SCROLL */\n @media screen(lg) {\n .layout--stack {\n align-items: unset;\n background-color: unset;\n border: 0;\n border-bottom: 1px solid var(--color-ice-200);\n border-radius: 0;\n box-shadow: none;\n column-gap: unset;\n display: table-row;\n grid-template-columns: unset;\n row-gap: unset;\n }\n\n .layout--stack:last-of-type {\n border-bottom: 0;\n }\n\n .layout--stack .row-control-cell {\n display: table-cell;\n }\n\n .layout--stack + .row-expansion {\n display: table-row;\n }\n\n .layout--stack + .row-expansion > .row-expansion-content {\n border-top: unset;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n display: table-cell;\n margin-bottom: unset;\n }\n\n .row-control-cell + :not(.row-control-cell) {\n grid-column-start: unset;\n }\n }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Tabs.js
CHANGED
|
@@ -1,30 +1,25 @@
|
|
|
1
|
-
import { _ as o } from "./Tabs.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { T as
|
|
1
|
+
import { _ as o } from "./Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js";
|
|
2
|
+
import { T as A, a as B } from "./Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js";
|
|
3
3
|
import "vue";
|
|
4
|
-
import "
|
|
5
|
-
import "
|
|
6
|
-
import "./isObjectLike-54341556.js";
|
|
7
|
-
import "./toString-7d5bf363.js";
|
|
8
|
-
import "./uniqueId-847efe53.js";
|
|
4
|
+
import "lodash-es/debounce";
|
|
5
|
+
import "lodash-es/uniqueId";
|
|
9
6
|
import "./constants.js";
|
|
10
7
|
import "./locale.js";
|
|
11
|
-
import "
|
|
8
|
+
import "lodash-es/get";
|
|
12
9
|
import "./Dropdown.js";
|
|
13
10
|
import "./clickoutside.js";
|
|
14
11
|
import "./utils/calculateElementOverflow.js";
|
|
15
12
|
import "./utils/helpers.js";
|
|
16
|
-
import "
|
|
17
|
-
import "
|
|
18
|
-
import "
|
|
19
|
-
import "./_getPrototype-3e6fccd6.js";
|
|
20
|
-
import "./_overArg-6d920d99.js";
|
|
13
|
+
import "lodash-es/camelCase";
|
|
14
|
+
import "lodash-es/isFinite";
|
|
15
|
+
import "lodash-es/isPlainObject";
|
|
21
16
|
import "./Icon.js";
|
|
22
|
-
import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
|
|
23
17
|
import "./index-79ce320f.js";
|
|
18
|
+
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
24
19
|
import "./_plugin-vue_export-helper-dad06003.js";
|
|
25
20
|
export {
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
A as TABS_INJECTION,
|
|
22
|
+
B as TabVariant,
|
|
28
23
|
o as default
|
|
29
24
|
};
|
|
30
25
|
//# sourceMappingURL=Tabs.js.map
|
package/dist/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as $, ref as a, computed as p, provide as z, onMounted as U, onUpdated as V, onDeactivated as j, onBeforeUnmount as J, openBlock as x, createElementBlock as R, createElementVNode as f, normalizeStyle as q, normalizeClass as A, renderSlot as C, createBlock as F, withCtx as I, unref as b, createTextVNode as K, toDisplayString as W, createVNode as Y, createCommentVNode as G } from "vue";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
2
|
+
import H from "lodash-es/debounce";
|
|
3
|
+
import P from "lodash-es/uniqueId";
|
|
4
4
|
import { DEBOUNCE as Q } from "./constants.js";
|
|
5
5
|
import { t as X } from "./locale.js";
|
|
6
6
|
import Z from "./Dropdown.js";
|
|
@@ -151,4 +151,4 @@ export {
|
|
|
151
151
|
ve as _,
|
|
152
152
|
N as a
|
|
153
153
|
};
|
|
154
|
-
//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-
|
|
154
|
+
//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-aca4f8b8.js.map
|