@leaflink/stash 53.3.4 → 53.4.0
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/assets/icons/featured-no-check.svg +1 -0
- package/assets/spritesheet.svg +1 -1
- package/dist/Accordion.vue.d.ts +2 -2
- package/dist/AppNavigationItem.vue.d.ts +1 -1
- package/dist/DataView.js +83 -80
- package/dist/DataView.js.map +1 -1
- package/dist/DataViewFilters.js +5 -4
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewSortButton.js +3 -2
- package/dist/DataViewSortButton.js.map +1 -1
- package/dist/DataViewToolbar.js +3 -2
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/FilterDropdown.js +3 -2
- package/dist/FilterDropdown.js.map +1 -1
- package/dist/Icon.js +1 -0
- package/dist/Icon.js.map +1 -1
- package/dist/Icon.vue.d.ts +1 -1
- package/dist/IconLabel.vue.d.ts +1 -1
- package/dist/ListView.vue.d.ts +6 -6
- package/dist/Module.js +15 -11
- package/dist/Module.js.map +1 -1
- package/dist/Module.keys-DcqBbvvT.js +12 -0
- package/dist/Module.keys-DcqBbvvT.js.map +1 -0
- package/dist/Module.types-B1FfGGac.js.map +1 -1
- package/dist/Module.vue.d.ts +9 -0
- package/dist/ModuleContent.js +1 -1
- package/dist/ModuleFooter.js +1 -1
- package/dist/ModuleHeader.js +1 -1
- package/dist/QuickAction.vue.d.ts +1 -1
- package/dist/RadioNew.js +62 -58
- package/dist/RadioNew.js.map +1 -1
- package/dist/SectionHeader.vue.d.ts +2 -2
- package/dist/SelectStatus.vue.d.ts +1 -1
- package/dist/Table.js +20 -22
- package/dist/Table.js.map +1 -1
- package/dist/TableCell.js +3 -2
- package/dist/TableCell.js.map +1 -1
- package/dist/TableHeaderCell.js +3 -2
- package/dist/TableHeaderCell.js.map +1 -1
- package/dist/TableHeaderRow.js +3 -2
- package/dist/TableHeaderRow.js.map +1 -1
- package/dist/TableRow.js +3 -2
- package/dist/TableRow.js.map +1 -1
- package/dist/TextEditor.vue.d.ts +1 -1
- package/package.json +1 -1
- package/dist/Module.keys-CEsrW2f0.js +0 -10
- package/dist/Module.keys-CEsrW2f0.js.map +0 -1
package/dist/Accordion.vue.d.ts
CHANGED
|
@@ -66,7 +66,7 @@ onOpen?: (() => any) | undefined;
|
|
|
66
66
|
}>, {
|
|
67
67
|
isExpanded: boolean;
|
|
68
68
|
title: string;
|
|
69
|
-
icon: "close" | "copy" | "submit" | "sort" | "search" | "split" | "link" | "tag" | "menu" | "image" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "bank" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "cloud-share" | "combine" | "compass" | "contact" | "contract" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "face-id" | "face" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "fingerprint" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "home" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reorder" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "start" | "storefront" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag-leaf" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
|
|
69
|
+
icon: "close" | "copy" | "submit" | "sort" | "search" | "split" | "link" | "tag" | "menu" | "image" | "action-dots" | "activity" | "alert-bell" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "badge-discount" | "badge-seller-elite" | "badge-seller-power" | "badge-seller-verified" | "bank" | "book-customer" | "building-office" | "bulk-add" | "calendar-reschedule" | "calendar" | "camera" | "caret-down" | "caret-up" | "change-log" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle-check" | "circle-close" | "circle-dollar" | "circle-empty" | "circle-info" | "circle-partial" | "circle-percent" | "circle-question-mark" | "circle-slash" | "circle-status" | "circle-warning" | "clipboard-checkmark" | "clipboard-inventory" | "cloud-share" | "combine" | "compass" | "contact" | "contract" | "credit-card" | "credit-profile" | "dashboard" | "document-accept" | "document-invoice" | "document-recieved" | "document-sent" | "document-view" | "document" | "dolly" | "download" | "edit" | "ellipsis" | "envelope-open" | "envelope" | "equals" | "export" | "face-id" | "face" | "featured-no-check" | "figma" | "file-csv" | "file" | "filter-funnel" | "filter-line" | "fingerprint" | "flag" | "folder" | "folder-bar-graph" | "folder-orders" | "font-bold" | "font-clear-format" | "font-italic" | "font-underline" | "gear" | "github" | "globe" | "graph-bar-chart" | "graph-line-chart" | "graph-pie-chart" | "hazard" | "hazard-outline" | "headset-agent" | "headset-mic" | "heart-filled" | "heart-outline" | "help-question-mark" | "hide" | "history" | "home" | "import" | "keyboard-return" | "tier-1" | "tier-2" | "tier-3" | "license-approved" | "license-certificate" | "lightbulb" | "link-add" | "link-unlink" | "list-bulleted" | "list-items" | "list-numbered" | "loading-big" | "loading-empty" | "loading-small" | "location" | "lock-unlock" | "lock" | "logo-facebook" | "logo-instagram" | "logo-linkedin" | "logo-ll" | "logo-metrc" | "logo-plaid" | "logo-x" | "logo-youtube" | "logout" | "medical" | "megaphone-sound" | "megaphone" | "message-dispute" | "message-reply" | "message" | "minus" | "mj-leaf" | "money" | "note-add" | "note" | "open-in-new" | "paperclip" | "paper-plane" | "performance" | "phone" | "plus" | "preview" | "print" | "product-menu-manage" | "product-menu-search" | "product-menu" | "queue-add" | "queue" | "recent" | "refresh" | "register" | "reorder" | "reply" | "report-download" | "sample" | "save" | "scale-law" | "scale-weight" | "seed-cycle" | "share" | "shop-bag-browse" | "shop-bag-reorder" | "shop-bag" | "shop-basket" | "shop-cart-add" | "shop-cart" | "show" | "sign-dollar" | "sign-percent" | "star-filled" | "star-outline" | "start" | "storefront" | "swap-horizontal" | "swap-vertical" | "tag-star" | "tag-leaf" | "test-results" | "ticket-star" | "ticket" | "tool-dropper" | "tool-wrench" | "transfer" | "trashcan" | "truck" | "upload" | "user-add" | "user-admin" | "user-check" | "user-group" | "user" | "view-card" | "view-detailed" | "view-list" | "warehouse" | "working";
|
|
70
70
|
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
|
|
71
71
|
header?(_: {}): any;
|
|
72
72
|
default?(_: {}): any;
|
|
@@ -80,7 +80,7 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
80
80
|
*
|
|
81
81
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
82
82
|
*/
|
|
83
|
-
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
83
|
+
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "featured-no-check", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
84
84
|
|
|
85
85
|
declare type ToggleState = {
|
|
86
86
|
isExpanded: boolean;
|
|
@@ -71,6 +71,6 @@ declare type IconName = (typeof iconNames)[number];
|
|
|
71
71
|
*
|
|
72
72
|
* https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
|
|
73
73
|
*/
|
|
74
|
-
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
74
|
+
declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "featured-no-check", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
|
|
75
75
|
|
|
76
76
|
export { }
|
package/dist/DataView.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import { M as
|
|
4
|
-
import
|
|
5
|
-
import { a as
|
|
6
|
-
import { _ as
|
|
7
|
-
function
|
|
1
|
+
import { defineComponent as U, useCssModule as J, ref as l, inject as W, computed as n, watch as y, provide as G, createElementBlock as Z, openBlock as I, renderSlot as q, createBlock as H, createCommentVNode as K, normalizeClass as Q, unref as X } from "vue";
|
|
2
|
+
import Y from "lodash-es/cloneDeep";
|
|
3
|
+
import { M as V } from "./Module.keys-DcqBbvvT.js";
|
|
4
|
+
import O from "./Paginate.js";
|
|
5
|
+
import { a as w, D as tt } from "./DataView.keys-aSOnA4AD.js";
|
|
6
|
+
import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
7
|
+
function _(a) {
|
|
8
8
|
const o = a[0] === "-" ? "desc" : "asc";
|
|
9
9
|
return { id: o === "asc" ? a : a.slice(1), order: o };
|
|
10
10
|
}
|
|
11
|
-
function
|
|
11
|
+
function at({ id: a, order: o }) {
|
|
12
12
|
return `${o === "desc" ? "-" : ""}${a}`;
|
|
13
13
|
}
|
|
14
|
-
function
|
|
14
|
+
function nt({ newId: a, newOrder: o, oldId: f, oldOrder: t }) {
|
|
15
15
|
if (a) {
|
|
16
16
|
if (a !== f)
|
|
17
|
-
return
|
|
17
|
+
return at({ id: a, order: o || "asc" });
|
|
18
18
|
if (!o && !t)
|
|
19
19
|
return a;
|
|
20
20
|
if (!(!o && t === "desc")) {
|
|
@@ -33,8 +33,8 @@ function at({ newId: a, newOrder: o, oldId: f, oldOrder: t }) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
var
|
|
37
|
-
const
|
|
36
|
+
var ot = /* @__PURE__ */ ((a) => (a.Table = "table", a))(ot || {});
|
|
37
|
+
const it = /* @__PURE__ */ U({
|
|
38
38
|
__name: "DataView",
|
|
39
39
|
props: {
|
|
40
40
|
currentPage: { default: 1 },
|
|
@@ -42,7 +42,7 @@ const ot = /* @__PURE__ */ R({
|
|
|
42
42
|
currentSort: { default: void 0 },
|
|
43
43
|
data: { default: () => [] },
|
|
44
44
|
density: { default: "comfortable" },
|
|
45
|
-
pageSize: { default:
|
|
45
|
+
pageSize: { default: w },
|
|
46
46
|
disablePagination: { type: Boolean, default: !1 },
|
|
47
47
|
hideBottomPagination: { type: Boolean, default: !1 },
|
|
48
48
|
totalDataCount: { default: 0 },
|
|
@@ -52,56 +52,59 @@ const ot = /* @__PURE__ */ R({
|
|
|
52
52
|
},
|
|
53
53
|
emits: ["update", "update:currentFilters", "update:currentPage", "update:currentSearch", "update:currentSort"],
|
|
54
54
|
setup(a, { expose: o, emit: f }) {
|
|
55
|
-
const t = a, d = f, $ =
|
|
55
|
+
const t = a, d = f, $ = J(), P = l(null), C = W(V.key, V.defaults), L = n(() => {
|
|
56
56
|
var e;
|
|
57
57
|
if (t.variant)
|
|
58
58
|
return t.variant;
|
|
59
|
-
if (((e =
|
|
59
|
+
if (((e = C.variant) == null ? void 0 : e.value) === "table")
|
|
60
60
|
return "table";
|
|
61
|
-
}), x = n(() =>
|
|
61
|
+
}), x = n(() => C.variant !== void 0), T = n(() => {
|
|
62
|
+
var e;
|
|
63
|
+
return (e = C.includeDataviewPagination) == null ? void 0 : e.value;
|
|
64
|
+
}), u = l(1), B = n(() => !t.disablePagination && t.totalDataCount > 0), E = n(() => t.totalDataCount === 1 / 0 && !t.hasNextPage), v = n(() => Math.ceil(t.totalDataCount / t.pageSize)), r = function(e, { shouldEmit: i } = {}) {
|
|
62
65
|
var c, h;
|
|
63
|
-
u.value = e,
|
|
64
|
-
}, C = function({ shouldEmit: e } = {}) {
|
|
65
|
-
const r = Math.max(u.value - 1, 1);
|
|
66
|
-
i(r, { shouldEmit: e });
|
|
66
|
+
u.value = e, i && (S(), d("update:currentPage", e, t.pageSize)), Number((c = P.value) == null ? void 0 : c.getBoundingClientRect().top) < 0 && ((h = P.value) == null || h.scrollIntoView({ behavior: "smooth", block: "start" }));
|
|
67
67
|
}, D = function({ shouldEmit: e } = {}) {
|
|
68
|
-
const
|
|
69
|
-
i
|
|
68
|
+
const i = Math.max(u.value - 1, 1);
|
|
69
|
+
r(i, { shouldEmit: e });
|
|
70
|
+
}, b = function({ shouldEmit: e } = {}) {
|
|
71
|
+
const i = Math.min(u.value + 1, v.value);
|
|
72
|
+
r(i, { shouldEmit: e });
|
|
70
73
|
};
|
|
71
|
-
|
|
74
|
+
y(
|
|
72
75
|
() => t.currentPage,
|
|
73
76
|
() => {
|
|
74
|
-
|
|
77
|
+
r(t.currentPage);
|
|
75
78
|
},
|
|
76
79
|
{ immediate: !0 }
|
|
77
80
|
);
|
|
78
|
-
const s = l(void 0),
|
|
79
|
-
() => s.value ?
|
|
81
|
+
const s = l(void 0), N = n(
|
|
82
|
+
() => s.value ? _(s.value).id : void 0
|
|
80
83
|
), M = n(
|
|
81
|
-
() => s.value ?
|
|
82
|
-
),
|
|
83
|
-
const { id: h, order:
|
|
84
|
-
s.value = k,
|
|
84
|
+
() => s.value ? _(s.value).order : void 0
|
|
85
|
+
), p = function(e, { sortOrder: i, shouldEmit: c } = {}) {
|
|
86
|
+
const { id: h, order: R } = _(s.value || ""), k = nt({ newId: e, newOrder: i, oldId: h, oldOrder: R });
|
|
87
|
+
s.value = k, r(1), c && (S(), d("update:currentSort", k));
|
|
85
88
|
};
|
|
86
|
-
|
|
89
|
+
y(
|
|
87
90
|
() => t.currentSort,
|
|
88
91
|
() => {
|
|
89
|
-
|
|
92
|
+
p(t.currentSort);
|
|
90
93
|
},
|
|
91
94
|
{ immediate: !0 }
|
|
92
95
|
);
|
|
93
|
-
const g = l(""),
|
|
94
|
-
g.value = e || "",
|
|
96
|
+
const g = l(""), j = l(!1), A = l(!1), m = function(e, { shouldEmit: i } = {}) {
|
|
97
|
+
g.value = e || "", r(1), i && (S(), d("update:currentSearch", e));
|
|
95
98
|
};
|
|
96
|
-
|
|
99
|
+
y(
|
|
97
100
|
() => t.currentSearch,
|
|
98
101
|
() => {
|
|
99
102
|
m(t.currentSearch);
|
|
100
103
|
},
|
|
101
104
|
{ immediate: !0 }
|
|
102
105
|
);
|
|
103
|
-
const
|
|
104
|
-
|
|
106
|
+
const z = l({}), F = function(e, { shouldEmit: i } = {}) {
|
|
107
|
+
z.value = e, r(1), i && (S(), d("update:currentFilters", e));
|
|
105
108
|
};
|
|
106
109
|
function S() {
|
|
107
110
|
d("update", {
|
|
@@ -109,34 +112,34 @@ const ot = /* @__PURE__ */ R({
|
|
|
109
112
|
pageSize: t.pageSize,
|
|
110
113
|
ordering: s.value,
|
|
111
114
|
search: g.value,
|
|
112
|
-
filters:
|
|
115
|
+
filters: Y(z.value)
|
|
113
116
|
});
|
|
114
117
|
}
|
|
115
|
-
return
|
|
116
|
-
|
|
118
|
+
return G(
|
|
119
|
+
tt.key,
|
|
117
120
|
Object.freeze({
|
|
118
121
|
// Pagination
|
|
119
122
|
currentPage: n(() => u.value),
|
|
120
|
-
isPaginationEnabled:
|
|
121
|
-
isPaginateNextDisabled:
|
|
122
|
-
pageCount:
|
|
123
|
+
isPaginationEnabled: B,
|
|
124
|
+
isPaginateNextDisabled: E,
|
|
125
|
+
pageCount: v,
|
|
123
126
|
pageSize: n(() => t.pageSize),
|
|
124
127
|
totalDataCount: n(() => t.totalDataCount),
|
|
125
|
-
setPage:
|
|
126
|
-
goPrevPage:
|
|
127
|
-
goNextPage:
|
|
128
|
+
setPage: r,
|
|
129
|
+
goPrevPage: D,
|
|
130
|
+
goNextPage: b,
|
|
128
131
|
// Sorting
|
|
129
|
-
currentSortId:
|
|
132
|
+
currentSortId: N,
|
|
130
133
|
currentSortOrder: M,
|
|
131
|
-
updateCurrentSort:
|
|
134
|
+
updateCurrentSort: p,
|
|
132
135
|
// Search
|
|
133
136
|
currentSearch: n(() => g.value),
|
|
134
137
|
updateCurrentSearch: m,
|
|
135
138
|
// Miscellaneous
|
|
136
139
|
density: n(() => t.density),
|
|
137
|
-
hasToolbar:
|
|
140
|
+
hasToolbar: j,
|
|
138
141
|
isEmpty: n(() => t.data.length === 0),
|
|
139
|
-
isSelectable:
|
|
142
|
+
isSelectable: A,
|
|
140
143
|
isLoading: n(() => t.isLoading),
|
|
141
144
|
isWithinModule: x,
|
|
142
145
|
variant: L
|
|
@@ -144,58 +147,58 @@ const ot = /* @__PURE__ */ R({
|
|
|
144
147
|
), o({
|
|
145
148
|
page: n(() => u.value),
|
|
146
149
|
pageSize: n(() => t.pageSize),
|
|
147
|
-
setPage:
|
|
148
|
-
goPrevPage:
|
|
149
|
-
goNextPage:
|
|
150
|
+
setPage: r,
|
|
151
|
+
goPrevPage: D,
|
|
152
|
+
goNextPage: b,
|
|
150
153
|
ordering: n(() => s.value),
|
|
151
|
-
updateCurrentSort:
|
|
154
|
+
updateCurrentSort: p,
|
|
152
155
|
search: n(() => g.value),
|
|
153
156
|
updateCurrentSearch: m,
|
|
154
|
-
filters: n(() =>
|
|
155
|
-
updateCurrentFilters:
|
|
156
|
-
}), (e,
|
|
157
|
+
filters: n(() => z.value),
|
|
158
|
+
updateCurrentFilters: F
|
|
159
|
+
}), (e, i) => (I(), Z("div", {
|
|
157
160
|
ref_key: "rootRef",
|
|
158
161
|
ref: P,
|
|
159
162
|
class: "stash-data-view relative",
|
|
160
163
|
"data-test": "stash-data-view"
|
|
161
164
|
}, [
|
|
162
|
-
|
|
165
|
+
q(e.$slots, "default", {
|
|
163
166
|
currentPage: u.value,
|
|
164
|
-
currentSortId:
|
|
167
|
+
currentSortId: N.value,
|
|
165
168
|
currentSortOrder: M.value,
|
|
166
169
|
data: e.data,
|
|
167
|
-
goPrevPage:
|
|
168
|
-
goNextPage:
|
|
169
|
-
pageCount:
|
|
170
|
-
setPage:
|
|
170
|
+
goPrevPage: D,
|
|
171
|
+
goNextPage: b,
|
|
172
|
+
pageCount: v.value,
|
|
173
|
+
setPage: r,
|
|
171
174
|
totalDataCount: t.totalDataCount,
|
|
172
|
-
updateCurrentSort:
|
|
175
|
+
updateCurrentSort: p,
|
|
173
176
|
updateCurrentSearch: m
|
|
174
177
|
}),
|
|
175
|
-
|
|
178
|
+
B.value && (!x.value || T.value) && v.value > 1 && !t.hideBottomPagination ? (I(), H(O, {
|
|
176
179
|
key: 0,
|
|
177
|
-
class:
|
|
180
|
+
class: Q(["mt-6", X($).paginate]),
|
|
178
181
|
"current-page": u.value,
|
|
179
|
-
"is-next-disabled": e.isLoading ||
|
|
182
|
+
"is-next-disabled": e.isLoading || E.value,
|
|
180
183
|
"list-length": t.totalDataCount,
|
|
181
184
|
"page-size": t.pageSize,
|
|
182
185
|
variant: t.totalDataCount === 1 / 0 ? "stats" : "standard",
|
|
183
|
-
onSetPage:
|
|
184
|
-
}, null, 8, ["class", "current-page", "is-next-disabled", "list-length", "page-size", "variant"])) :
|
|
186
|
+
onSetPage: i[0] || (i[0] = (c) => r(c, { shouldEmit: !0 }))
|
|
187
|
+
}, null, 8, ["class", "current-page", "is-next-disabled", "list-length", "page-size", "variant"])) : K("", !0)
|
|
185
188
|
], 512));
|
|
186
189
|
}
|
|
187
|
-
}), rt = "_paginate_1xzdj_3",
|
|
190
|
+
}), rt = "_paginate_1xzdj_3", ut = {
|
|
188
191
|
paginate: rt
|
|
189
|
-
},
|
|
190
|
-
$style:
|
|
191
|
-
},
|
|
192
|
+
}, st = {
|
|
193
|
+
$style: ut
|
|
194
|
+
}, gt = /* @__PURE__ */ et(it, [["__cssModules", st]]);
|
|
192
195
|
export {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
196
|
+
tt as DATA_VIEW_INJECTION,
|
|
197
|
+
w as DEFAULT_PAGE_SIZE,
|
|
198
|
+
ot as DataViewVariant,
|
|
199
|
+
gt as default,
|
|
200
|
+
_ as deserializeSortValue,
|
|
201
|
+
nt as getNextSort,
|
|
202
|
+
at as serializeSortValue
|
|
200
203
|
};
|
|
201
204
|
//# sourceMappingURL=DataView.js.map
|
package/dist/DataView.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataView.js","sources":["../src/components/DataView/DataView.utils.ts","../src/components/DataView/DataView.types.ts","../src/components/DataView/DataView.vue"],"sourcesContent":["import { SortId, SortOrder, SortValue, SortValueDeserialized } from './DataView.types';\n\n/**\n * Receives a SortValue (ex: `'-product_name'`) and returns an object with a `id` and an `order`.\n */\nexport function deserializeSortValue(sort: SortValue): SortValueDeserialized {\n const order = sort[0] === '-' ? 'desc' : 'asc';\n const id = order === 'asc' ? sort : sort.slice(1);\n\n return { id, order };\n}\n\n/**\n * Receives an object with a `id` and an `order` and returns a SortValue (ex: `'-product_name'`).\n */\nexport function serializeSortValue({ id, order }: SortValueDeserialized): SortValue {\n return `${order === 'desc' ? '-' : ''}${id}`;\n}\n\ninterface GetNextSortArgs {\n newId: SortId | undefined;\n newOrder?: SortOrder;\n oldId?: SortId;\n oldOrder?: SortOrder;\n}\n\n/**\n * Given new and old sorting data, it returns the next sorting value using the following sorting cycle:\n *\n * \"unsorted --> ascending --> descending --> unsorted\"\n */\nexport function getNextSort({ newId, newOrder, oldId, oldOrder }: GetNextSortArgs): SortValue | undefined {\n if (!newId) {\n return undefined;\n }\n\n if (newId !== oldId) {\n // if sorting by a new field, sort ascending\n return serializeSortValue({ id: newId, order: newOrder || 'asc' });\n }\n\n /**\n * `newOrder` and `oldOrder` can each have 3 different values: undefined, 'asc', or 'desc'.\n * Therefore, there are 9 possible combinations (3 times 3). See below:\n */\n\n // #region newOrder: undefined\n if (!newOrder && !oldOrder) {\n return newId; // ascending\n }\n\n if (!newOrder && oldOrder === 'desc') {\n return undefined; // unsorted\n }\n\n if (!newOrder && oldOrder === 'asc') {\n return `-${newId}`; // descending\n }\n // #endregion\n\n // #region newOrder: asc\n if (newOrder === 'asc' && !oldOrder) {\n return newId;\n }\n\n if (newOrder === 'asc' && oldOrder === 'asc') {\n return undefined;\n }\n\n if (newOrder === 'asc' && oldOrder === 'desc') {\n return newId;\n }\n // #endregion\n\n // #region newOrder: desc\n if (newOrder === 'desc' && !oldOrder) {\n return `-${newId}`;\n }\n\n if (newOrder === 'desc' && oldOrder === 'desc') {\n return undefined;\n }\n\n if (newOrder === 'desc' && oldOrder === 'asc') {\n return `-${newId}`;\n }\n // #endregion\n}\n","import { ComputedRef, Ref } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum DataViewVariant {\n Table = 'table',\n}\n\nexport type DataViewVariants = `${DataViewVariant}`;\n\n/**\n * A unique id for a sorting strategy. If the order is descending, it must begin with \"-\" (a hyphen/dash).\n *\n * Ex: `'product_name'` if ascending or `'-product_name'` if descending\n */\nexport type SortValue = string;\n\n/**\n * The SortValue with its leading hyphen/dash removed\n */\nexport type SortId = string;\n\n/**\n * Determined by whether or not there is a leading hyphen/dash in the SortValue\n */\nexport type SortOrder = 'asc' | 'desc';\n\n/**\n * A deserialized instance of a `SortValue`.\n */\nexport type SortValueDeserialized = {\n id: SortId;\n order: SortOrder;\n};\n\n/** Updates the DataView internal state with the given sortId */\nexport type UpdateCurrentSort = (\n sortId: SortId | undefined,\n options?: {\n sortOrder?: SortOrder;\n /** If true, emits the `update:currentSort` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the given page */\nexport type SetPage = (\n page: number,\n options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the previous page */\nexport type GoPrevPage = (options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the next page */\nexport type GoNextPage = (options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the given searchTerm */\nexport type UpdateCurrentSearch = (\n searchTerm?: string,\n options?: {\n /** If true, emits the `update:currentSearch` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the given filter values */\nexport type UpdateCurrentFilters<FilterValues = object> = (\n newFilters: FilterValues,\n options?: {\n /** If true, emits the `update:currentSearch` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\nexport interface UpdateEvent<FilterValues = object> {\n page?: number;\n pageSize?: number;\n ordering?: string;\n search?: string;\n filters?: FilterValues;\n}\n\nexport interface DataViewInjection {\n currentPage: ComputedRef<number>;\n\n /** Optional override for the next button disabled state */\n isPaginateNextDisabled: ComputedRef<boolean>;\n\n isPaginationEnabled: ComputedRef<boolean>;\n\n pageCount: ComputedRef<number>;\n\n pageSize: ComputedRef<number>;\n\n totalDataCount: ComputedRef<number>;\n\n /** Updates the DataView internal state with the given page */\n setPage: SetPage;\n\n /** Updates the DataView internal state with the previous page */\n goPrevPage: GoPrevPage;\n\n /** Updates the DataView internal state with the next page */\n goNextPage: GoNextPage;\n\n currentSortId: ComputedRef<SortId | undefined>;\n\n currentSortOrder: ComputedRef<SortOrder | undefined>;\n\n /** Updates the DataView internal state with the given sortId */\n updateCurrentSort: UpdateCurrentSort;\n\n currentSearch: ComputedRef<string>;\n\n /** Updates the DataView internal state with the given searchTerm */\n updateCurrentSearch: UpdateCurrentSearch;\n\n /**\n * The DataView's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities | undefined>;\n\n /**\n * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted.\n */\n hasToolbar?: Ref<boolean>;\n\n /**\n * Enables certain loading indicators to be displayed within the DataView.\n */\n isLoading?: ComputedRef<boolean>;\n\n /**\n * Enables certain empty states to be displayed within the DataView.\n */\n isEmpty?: ComputedRef<boolean>;\n\n /**\n * Allows Table to control whether or not a DataViewToolbar should show a checkmark\n */\n isSelectable?: Ref<boolean>;\n\n /**\n * Whether or not the DataView is rendered within a Module; the value is inferred based on being\n * able to inject details from Module.\n *\n * Note: This is sent to DataView child components so they only need to worry about interfacing\n * with the DataViewInjection API.\n */\n isWithinModule: ComputedRef<boolean>;\n\n /**\n * The DataView's variant; the default value is undefined.\n */\n variant: ComputedRef<DataViewVariants | undefined>;\n}\n","<script lang=\"ts\">\n export * from './DataView.constants';\n export * from './DataView.keys';\n export * from './DataView.types';\n export * from './DataView.utils';\n</script>\n\n<script setup lang=\"ts\">\n import cloneDeep from 'lodash-es/cloneDeep';\n import { computed, inject, provide, ref, useCssModule, watch } from 'vue';\n\n import { SpacingDensities } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import Paginate from '../Paginate/Paginate.vue';\n import { DEFAULT_PAGE_SIZE } from './DataView.constants';\n import { DATA_VIEW_INJECTION } from './DataView.keys';\n import {\n DataViewVariants,\n GoNextPage,\n GoPrevPage,\n SetPage,\n SortId,\n SortOrder,\n SortValue,\n UpdateCurrentFilters,\n UpdateCurrentSearch,\n UpdateCurrentSort,\n UpdateEvent,\n } from './DataView.types';\n import { deserializeSortValue, getNextSort } from './DataView.utils';\n\n export interface DataViewProps {\n /**\n * Can be used to provide the initial page.\n * Also, it can be used to control the active page with `v-model:current-page=\"myPage\"`.\n */\n currentPage?: number;\n\n /**\n * Can be used to set the initial search term.\n * Also, it can be used to control the active search term with `v-model:current-search=\"mySearchTerm\"`.\n */\n currentSearch?: string;\n\n /**\n * Can be used to provide the initial sort order.\n * Also, it can be used to control the active sort order with `v-model:current-sort=\"mySortOrder\"`.\n */\n currentSort?: SortValue;\n\n /**\n * A list of records. If pagination is enabled, `data` must be only the current page of records.\n */\n data?: object[];\n\n /**\n * Controls the DataView'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 * The number of records to display per page.\n */\n pageSize?: number;\n\n /**\n * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n */\n disablePagination?: boolean;\n\n /**\n * Hides the bottom pagination without disabling the pagination from the toolbar\n */\n hideBottomPagination?: boolean;\n\n /**\n * The total number of records available.\n * Used to auto-enable pagination when results exist.\n * Use `Infinity` for activating 'n of many' pagination\n * DataView does not paginate data for you; instead, `props.data` should always show\n * the current page of results.\n */\n totalDataCount?: number;\n\n /**\n * Whether there is a next page of data or not as informed by the server.\n * This only applies when`totalDataCount=\"Infinity\"` to determine if the \"Next\" pagination button should be disabled.\n */\n hasNextPage?: boolean;\n\n /**\n * DataView variant. The default value is `undefined`. Will default to `table` when used within\n * a `<Module variant=\"table\">`.\n */\n variant?: DataViewVariants;\n\n isLoading?: boolean;\n }\n\n const props = withDefaults(defineProps<DataViewProps>(), {\n currentPage: 1,\n currentSearch: undefined,\n currentSort: undefined,\n data: () => [],\n density: 'comfortable',\n pageSize: DEFAULT_PAGE_SIZE,\n disablePagination: false,\n totalDataCount: 0,\n hasNextPage: undefined,\n hideBottomPagination: false,\n variant: undefined,\n });\n\n const emit = defineEmits<{\n (e: 'update', state: UpdateEvent): void;\n (e: 'update:currentFilters', newFilters: object): void;\n (e: 'update:currentPage', page: number, pageSize: number): void;\n (e: 'update:currentSearch', searchTerm?: string): void;\n (e: 'update:currentSort', payload?: SortValue): void;\n }>();\n\n const classes = useCssModule();\n const rootRef = ref<HTMLElement | null>(null);\n const moduleInjection = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n const computedVariant = computed<DataViewVariants | undefined>(() => {\n if (props.variant) {\n return props.variant;\n }\n\n if (moduleInjection.variant?.value === 'table') {\n return 'table';\n }\n\n return undefined;\n });\n const isWithinModule = computed(() => moduleInjection.variant !== undefined);\n\n // #region pagination\n const internalPage = ref(1);\n const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\n const isPaginateNextDisabled = computed(() => props.totalDataCount === Infinity && !props.hasNextPage);\n const pageCount = computed(() => Math.ceil(props.totalDataCount / props.pageSize));\n\n const setPage: SetPage = function (page: number, { shouldEmit } = {}) {\n internalPage.value = page;\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentPage', page, props.pageSize);\n }\n\n if (Number(rootRef.value?.getBoundingClientRect().top) < 0) {\n rootRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n };\n\n const goPrevPage: GoPrevPage = function ({ shouldEmit } = {}) {\n const page = Math.max(internalPage.value - 1, 1);\n\n setPage(page, { shouldEmit });\n };\n\n /** Updates the DataView internal state with the previous page */\n const goNextPage: GoNextPage = function ({ shouldEmit } = {}) {\n const page = Math.min(internalPage.value + 1, pageCount.value);\n\n setPage(page, { shouldEmit });\n };\n\n watch(\n () => props.currentPage,\n () => {\n setPage(props.currentPage);\n },\n { immediate: true },\n );\n // #endregion pagination\n\n // #region sorting\n const internalSort = ref<SortValue | undefined>(undefined);\n\n const internalSortId = computed<SortId | undefined>(() =>\n internalSort.value ? deserializeSortValue(internalSort.value).id : undefined,\n );\n const internalSortOrder = computed<SortOrder | undefined>(() =>\n internalSort.value ? deserializeSortValue(internalSort.value).order : undefined,\n );\n\n const updateCurrentSort: UpdateCurrentSort = function (sortId, { sortOrder, shouldEmit } = {}) {\n const { id: oldId, order: oldOrder } = deserializeSortValue(internalSort.value || '');\n const nextSort = getNextSort({ newId: sortId, newOrder: sortOrder, oldId, oldOrder });\n\n internalSort.value = nextSort;\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentSort', nextSort);\n }\n };\n\n watch(\n () => props.currentSort,\n () => {\n updateCurrentSort(props.currentSort);\n },\n { immediate: true },\n );\n // #endregion sorting\n\n // #region search\n const internalSearch = ref('');\n\n const hasToolbar = ref(false);\n const isSelectable = ref(false);\n\n const updateCurrentSearch: UpdateCurrentSearch = function (searchTerm, { shouldEmit } = {}) {\n internalSearch.value = searchTerm || '';\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentSearch', searchTerm);\n }\n };\n\n watch(\n () => props.currentSearch,\n () => {\n updateCurrentSearch(props.currentSearch);\n },\n { immediate: true },\n );\n // #endregion search\n\n // #region filters\n const internalFilters = ref<object>({});\n\n const updateCurrentFilters: UpdateCurrentFilters = function (newFilters: object, { shouldEmit } = {}) {\n internalFilters.value = newFilters;\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentFilters', newFilters);\n }\n };\n // #endregion filters\n\n function emitUpdate() {\n emit('update', {\n page: internalPage.value,\n pageSize: props.pageSize,\n ordering: internalSort.value,\n search: internalSearch.value,\n filters: cloneDeep(internalFilters.value),\n });\n }\n\n provide(\n DATA_VIEW_INJECTION.key,\n Object.freeze({\n // Pagination\n currentPage: computed(() => internalPage.value),\n isPaginationEnabled,\n isPaginateNextDisabled,\n pageCount,\n pageSize: computed(() => props.pageSize),\n totalDataCount: computed(() => props.totalDataCount),\n setPage,\n goPrevPage,\n goNextPage,\n\n // Sorting\n currentSortId: internalSortId,\n currentSortOrder: internalSortOrder,\n updateCurrentSort,\n\n // Search\n currentSearch: computed(() => internalSearch.value),\n updateCurrentSearch,\n\n // Miscellaneous\n density: computed(() => props.density),\n hasToolbar,\n isEmpty: computed(() => props.data.length === 0),\n isSelectable,\n isLoading: computed(() => props.isLoading),\n isWithinModule,\n variant: computedVariant,\n }),\n );\n\n defineExpose({\n page: computed(() => internalPage.value),\n pageSize: computed(() => props.pageSize),\n setPage,\n goPrevPage,\n goNextPage,\n ordering: computed(() => internalSort.value),\n updateCurrentSort,\n search: computed(() => internalSearch.value),\n updateCurrentSearch,\n filters: computed(() => internalFilters.value),\n updateCurrentFilters,\n });\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"stash-data-view relative\" data-test=\"stash-data-view\">\n <!-- @slot default -->\n <slot\n :current-page=\"internalPage\"\n :current-sort-id=\"internalSortId\"\n :current-sort-order=\"internalSortOrder\"\n :data=\"data\"\n :go-prev-page=\"goPrevPage\"\n :go-next-page=\"goNextPage\"\n :page-count=\"pageCount\"\n :set-page=\"setPage\"\n :total-data-count=\"props.totalDataCount\"\n :update-current-sort=\"updateCurrentSort\"\n :update-current-search=\"updateCurrentSearch\"\n ></slot>\n\n <Paginate\n v-if=\"isPaginationEnabled && !isWithinModule && pageCount > 1 && !props.hideBottomPagination\"\n class=\"mt-6\"\n :class=\"classes.paginate\"\n :current-page=\"internalPage\"\n :is-next-disabled=\"isLoading || isPaginateNextDisabled\"\n :list-length=\"props.totalDataCount\"\n :page-size=\"props.pageSize\"\n :variant=\"props.totalDataCount === Infinity ? 'stats' : 'standard'\"\n @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n />\n </div>\n</template>\n\n<style module>\n @layer utilities {\n .paginate ul {\n margin: 0;\n }\n }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","props","__props","emit","__emit","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","_a","isWithinModule","internalPage","isPaginationEnabled","isPaginateNextDisabled","pageCount","setPage","page","shouldEmit","emitUpdate","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","hasToolbar","isSelectable","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose"],"mappings":";;;;;;AAKO,SAASA,EAAqBC,GAAwC;AAC3E,QAAMC,IAAQD,EAAK,CAAC,MAAM,MAAM,SAAS;AAGzC,SAAO,EAAE,IAFEC,MAAU,QAAQD,IAAOA,EAAK,MAAM,CAAC,GAEnC,OAAAC,EAAA;AACf;AAKO,SAASC,GAAmB,EAAE,IAAAC,GAAI,OAAAF,KAA2C;AAClF,SAAO,GAAGA,MAAU,SAAS,MAAM,EAAE,GAAGE,CAAE;AAC5C;AAcO,SAASC,GAAY,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,UAAAC,KAAoD;AACxG,MAAKH,GAIL;AAAA,QAAIA,MAAUE;AAEZ,aAAOL,GAAmB,EAAE,IAAIG,GAAO,OAAOC,KAAY,OAAO;AASnE,QAAI,CAACA,KAAY,CAACE;AAChB,aAAOH;AAGT,QAAI,GAACC,KAAYE,MAAa,SAI9B;AAAA,UAAI,CAACF,KAAYE,MAAa;AAC5B,eAAO,IAAIH,CAAK;AAKlB,UAAIC,MAAa,SAAS,CAACE;AACzB,eAAOH;AAGT,UAAI,EAAAC,MAAa,SAASE,MAAa,QAIvC;AAAA,YAAIF,MAAa,SAASE,MAAa;AACrC,iBAAOH;AAKT,YAAIC,MAAa,UAAU,CAACE;AAC1B,iBAAO,IAAIH,CAAK;AAGlB,YAAI,EAAAC,MAAa,UAAUE,MAAa,WAIpCF,MAAa,UAAUE,MAAa;AACtC,iBAAO,IAAIH,CAAK;AAAA;AAAA;AAAA;AAGpB;ACnFO,IAAKI,uBAAAA,OACVA,EAAA,QAAQ,SADEA,IAAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC+FV,UAAMC,IAAQC,GAcRC,IAAOC,GAQPC,IAAUC,EAAA,GACVC,IAAUC,EAAwB,IAAI,GACtCC,IAAkBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ,GACxEC,IAAkBC,EAAuC,MAAM;;AACnE,UAAIZ,EAAM;AACR,eAAOA,EAAM;AAGf,YAAIa,IAAAL,EAAgB,YAAhB,gBAAAK,EAAyB,WAAU;AACrC,eAAO;AAAA,IAIX,CAAC,GACKC,IAAiBF,EAAS,MAAMJ,EAAgB,YAAY,MAAS,GAGrEO,IAAeR,EAAI,CAAC,GACpBS,IAAsBJ,EAAS,MAAM,CAACZ,EAAM,qBAAqBA,EAAM,iBAAiB,CAAC,GACzFiB,IAAyBL,EAAS,MAAMZ,EAAM,mBAAmB,SAAY,CAACA,EAAM,WAAW,GAC/FkB,IAAYN,EAAS,MAAM,KAAK,KAAKZ,EAAM,iBAAiBA,EAAM,QAAQ,CAAC,GAE3EmB,IAAmB,SAAUC,GAAc,EAAE,YAAAC,EAAA,IAAe,CAAA,GAAI;;AACpE,MAAAN,EAAa,QAAQK,GAEjBC,MACFC,EAAA,GACApB,EAAK,sBAAsBkB,GAAMpB,EAAM,QAAQ,IAG7C,QAAOa,IAAAP,EAAQ,UAAR,gBAAAO,EAAe,wBAAwB,GAAG,IAAI,OACvDU,IAAAjB,EAAQ,UAAR,QAAAiB,EAAe,eAAe,EAAE,UAAU,UAAU,OAAO;IAE/D,GAEMC,IAAyB,SAAU,EAAE,YAAAH,EAAA,IAAe,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIL,EAAa,QAAQ,GAAG,CAAC;AAE/C,MAAAI,EAAQC,GAAM,EAAE,YAAAC,GAAY;AAAA,IAC9B,GAGMI,IAAyB,SAAU,EAAE,YAAAJ,EAAA,IAAe,CAAA,GAAI;AAC5D,YAAMD,IAAO,KAAK,IAAIL,EAAa,QAAQ,GAAGG,EAAU,KAAK;AAE7D,MAAAC,EAAQC,GAAM,EAAE,YAAAC,GAAY;AAAA,IAC9B;AAEA,IAAAK;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAmB,EAAQnB,EAAM,WAAW;AAAA,MAC3B;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAM2B,IAAepB,EAA2B,MAAS,GAEnDqB,IAAiBhB;AAAA,MAA6B,MAClDe,EAAa,QAAQtC,EAAqBsC,EAAa,KAAK,EAAE,KAAK;AAAA,IAAA,GAE/DE,IAAoBjB;AAAA,MAAgC,MACxDe,EAAa,QAAQtC,EAAqBsC,EAAa,KAAK,EAAE,QAAQ;AAAA,IAAA,GAGlEG,IAAuC,SAAUC,GAAQ,EAAE,WAAAC,GAAW,YAAAX,EAAA,IAAe,IAAI;AAC7F,YAAM,EAAE,IAAIxB,GAAO,OAAOC,MAAaT,EAAqBsC,EAAa,SAAS,EAAE,GAC9EM,IAAWvC,GAAY,EAAE,OAAOqC,GAAQ,UAAUC,GAAW,OAAAnC,GAAO,UAAAC,GAAU;AAEpF,MAAA6B,EAAa,QAAQM,GACrBd,EAAQ,CAAC,GAELE,MACFC,EAAA,GACApB,EAAK,sBAAsB+B,CAAQ;AAAA,IAEvC;AAEA,IAAAP;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAA8B,EAAkB9B,EAAM,WAAW;AAAA,MACrC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAMkC,IAAiB3B,EAAI,EAAE,GAEvB4B,IAAa5B,EAAI,EAAK,GACtB6B,IAAe7B,EAAI,EAAK,GAExB8B,IAA2C,SAAUC,GAAY,EAAE,YAAAjB,EAAA,IAAe,CAAA,GAAI;AAC1F,MAAAa,EAAe,QAAQI,KAAc,IACrCnB,EAAQ,CAAC,GAELE,MACFC,EAAA,GACApB,EAAK,wBAAwBoC,CAAU;AAAA,IAE3C;AAEA,IAAAZ;AAAA,MACE,MAAM1B,EAAM;AAAA,MACZ,MAAM;AACJ,QAAAqC,EAAoBrC,EAAM,aAAa;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAKpB,UAAMuC,IAAkBhC,EAAY,EAAE,GAEhCiC,IAA6C,SAAUC,GAAoB,EAAE,YAAApB,EAAA,IAAe,CAAA,GAAI;AACpG,MAAAkB,EAAgB,QAAQE,GACxBtB,EAAQ,CAAC,GAELE,MACFC,EAAA,GACApB,EAAK,yBAAyBuC,CAAU;AAAA,IAE5C;AAGA,aAASnB,IAAa;AACpB,MAAApB,EAAK,UAAU;AAAA,QACb,MAAMa,EAAa;AAAA,QACnB,UAAUf,EAAM;AAAA,QAChB,UAAU2B,EAAa;AAAA,QACvB,QAAQO,EAAe;AAAA,QACvB,SAASQ,EAAUH,EAAgB,KAAK;AAAA,MAAA,CACzC;AAAA,IACH;AAEA,WAAAI;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA;AAAA,QAEZ,aAAahC,EAAS,MAAMG,EAAa,KAAK;AAAA,QAC9C,qBAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAUN,EAAS,MAAMZ,EAAM,QAAQ;AAAA,QACvC,gBAAgBY,EAAS,MAAMZ,EAAM,cAAc;AAAA,QACnD,SAAAmB;AAAA,QACA,YAAAK;AAAA,QACA,YAAAC;AAAA;AAAA,QAGA,eAAeG;AAAA,QACf,kBAAkBC;AAAA,QAClB,mBAAAC;AAAA;AAAA,QAGA,eAAelB,EAAS,MAAMsB,EAAe,KAAK;AAAA,QAClD,qBAAAG;AAAA;AAAA,QAGA,SAASzB,EAAS,MAAMZ,EAAM,OAAO;AAAA,QACrC,YAAAmC;AAAA,QACA,SAASvB,EAAS,MAAMZ,EAAM,KAAK,WAAW,CAAC;AAAA,QAC/C,cAAAoC;AAAA,QACA,WAAWxB,EAAS,MAAMZ,EAAM,SAAS;AAAA,QACzC,gBAAAc;AAAA,QACA,SAASH;AAAA,MAAA,CACV;AAAA,IAAA,GAGHkC,EAAa;AAAA,MACX,MAAMjC,EAAS,MAAMG,EAAa,KAAK;AAAA,MACvC,UAAUH,EAAS,MAAMZ,EAAM,QAAQ;AAAA,MACvC,SAAAmB;AAAA,MACA,YAAAK;AAAA,MACA,YAAAC;AAAA,MACA,UAAUb,EAAS,MAAMe,EAAa,KAAK;AAAA,MAC3C,mBAAAG;AAAA,MACA,QAAQlB,EAAS,MAAMsB,EAAe,KAAK;AAAA,MAC3C,qBAAAG;AAAA,MACA,SAASzB,EAAS,MAAM2B,EAAgB,KAAK;AAAA,MAC7C,sBAAAC;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"DataView.js","sources":["../src/components/DataView/DataView.utils.ts","../src/components/DataView/DataView.types.ts","../src/components/DataView/DataView.vue"],"sourcesContent":["import { SortId, SortOrder, SortValue, SortValueDeserialized } from './DataView.types';\n\n/**\n * Receives a SortValue (ex: `'-product_name'`) and returns an object with a `id` and an `order`.\n */\nexport function deserializeSortValue(sort: SortValue): SortValueDeserialized {\n const order = sort[0] === '-' ? 'desc' : 'asc';\n const id = order === 'asc' ? sort : sort.slice(1);\n\n return { id, order };\n}\n\n/**\n * Receives an object with a `id` and an `order` and returns a SortValue (ex: `'-product_name'`).\n */\nexport function serializeSortValue({ id, order }: SortValueDeserialized): SortValue {\n return `${order === 'desc' ? '-' : ''}${id}`;\n}\n\ninterface GetNextSortArgs {\n newId: SortId | undefined;\n newOrder?: SortOrder;\n oldId?: SortId;\n oldOrder?: SortOrder;\n}\n\n/**\n * Given new and old sorting data, it returns the next sorting value using the following sorting cycle:\n *\n * \"unsorted --> ascending --> descending --> unsorted\"\n */\nexport function getNextSort({ newId, newOrder, oldId, oldOrder }: GetNextSortArgs): SortValue | undefined {\n if (!newId) {\n return undefined;\n }\n\n if (newId !== oldId) {\n // if sorting by a new field, sort ascending\n return serializeSortValue({ id: newId, order: newOrder || 'asc' });\n }\n\n /**\n * `newOrder` and `oldOrder` can each have 3 different values: undefined, 'asc', or 'desc'.\n * Therefore, there are 9 possible combinations (3 times 3). See below:\n */\n\n // #region newOrder: undefined\n if (!newOrder && !oldOrder) {\n return newId; // ascending\n }\n\n if (!newOrder && oldOrder === 'desc') {\n return undefined; // unsorted\n }\n\n if (!newOrder && oldOrder === 'asc') {\n return `-${newId}`; // descending\n }\n // #endregion\n\n // #region newOrder: asc\n if (newOrder === 'asc' && !oldOrder) {\n return newId;\n }\n\n if (newOrder === 'asc' && oldOrder === 'asc') {\n return undefined;\n }\n\n if (newOrder === 'asc' && oldOrder === 'desc') {\n return newId;\n }\n // #endregion\n\n // #region newOrder: desc\n if (newOrder === 'desc' && !oldOrder) {\n return `-${newId}`;\n }\n\n if (newOrder === 'desc' && oldOrder === 'desc') {\n return undefined;\n }\n\n if (newOrder === 'desc' && oldOrder === 'asc') {\n return `-${newId}`;\n }\n // #endregion\n}\n","import { ComputedRef, Ref } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum DataViewVariant {\n Table = 'table',\n}\n\nexport type DataViewVariants = `${DataViewVariant}`;\n\n/**\n * A unique id for a sorting strategy. If the order is descending, it must begin with \"-\" (a hyphen/dash).\n *\n * Ex: `'product_name'` if ascending or `'-product_name'` if descending\n */\nexport type SortValue = string;\n\n/**\n * The SortValue with its leading hyphen/dash removed\n */\nexport type SortId = string;\n\n/**\n * Determined by whether or not there is a leading hyphen/dash in the SortValue\n */\nexport type SortOrder = 'asc' | 'desc';\n\n/**\n * A deserialized instance of a `SortValue`.\n */\nexport type SortValueDeserialized = {\n id: SortId;\n order: SortOrder;\n};\n\n/** Updates the DataView internal state with the given sortId */\nexport type UpdateCurrentSort = (\n sortId: SortId | undefined,\n options?: {\n sortOrder?: SortOrder;\n /** If true, emits the `update:currentSort` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the given page */\nexport type SetPage = (\n page: number,\n options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the previous page */\nexport type GoPrevPage = (options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the next page */\nexport type GoNextPage = (options?: {\n /** If true, emits the `update:currentPage` and `update` events from DataView */\n shouldEmit?: boolean;\n}) => void;\n\n/** Updates the DataView internal state with the given searchTerm */\nexport type UpdateCurrentSearch = (\n searchTerm?: string,\n options?: {\n /** If true, emits the `update:currentSearch` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\n/** Updates the DataView internal state with the given filter values */\nexport type UpdateCurrentFilters<FilterValues = object> = (\n newFilters: FilterValues,\n options?: {\n /** If true, emits the `update:currentSearch` and `update` events from DataView */\n shouldEmit?: boolean;\n },\n) => void;\n\nexport interface UpdateEvent<FilterValues = object> {\n page?: number;\n pageSize?: number;\n ordering?: string;\n search?: string;\n filters?: FilterValues;\n}\n\nexport interface DataViewInjection {\n currentPage: ComputedRef<number>;\n\n /** Optional override for the next button disabled state */\n isPaginateNextDisabled: ComputedRef<boolean>;\n\n isPaginationEnabled: ComputedRef<boolean>;\n\n pageCount: ComputedRef<number>;\n\n pageSize: ComputedRef<number>;\n\n totalDataCount: ComputedRef<number>;\n\n /** Updates the DataView internal state with the given page */\n setPage: SetPage;\n\n /** Updates the DataView internal state with the previous page */\n goPrevPage: GoPrevPage;\n\n /** Updates the DataView internal state with the next page */\n goNextPage: GoNextPage;\n\n currentSortId: ComputedRef<SortId | undefined>;\n\n currentSortOrder: ComputedRef<SortOrder | undefined>;\n\n /** Updates the DataView internal state with the given sortId */\n updateCurrentSort: UpdateCurrentSort;\n\n currentSearch: ComputedRef<string>;\n\n /** Updates the DataView internal state with the given searchTerm */\n updateCurrentSearch: UpdateCurrentSearch;\n\n /**\n * The DataView's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n */\n density: ComputedRef<SpacingDensities | undefined>;\n\n /**\n * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted.\n */\n hasToolbar?: Ref<boolean>;\n\n /**\n * Enables certain loading indicators to be displayed within the DataView.\n */\n isLoading?: ComputedRef<boolean>;\n\n /**\n * Enables certain empty states to be displayed within the DataView.\n */\n isEmpty?: ComputedRef<boolean>;\n\n /**\n * Allows Table to control whether or not a DataViewToolbar should show a checkmark\n */\n isSelectable?: Ref<boolean>;\n\n /**\n * Whether or not the DataView is rendered within a Module; the value is inferred based on being\n * able to inject details from Module.\n *\n * Note: This is sent to DataView child components so they only need to worry about interfacing\n * with the DataViewInjection API.\n */\n isWithinModule: ComputedRef<boolean>;\n\n /**\n * The DataView's variant; the default value is undefined.\n */\n variant: ComputedRef<DataViewVariants | undefined>;\n}\n","<script lang=\"ts\">\n export * from './DataView.constants';\n export * from './DataView.keys';\n export * from './DataView.types';\n export * from './DataView.utils';\n</script>\n\n<script setup lang=\"ts\">\n import cloneDeep from 'lodash-es/cloneDeep';\n import { computed, inject, provide, ref, useCssModule, watch } from 'vue';\n\n import { SpacingDensities } from '../../../types/misc';\n import { MODULE_INJECTION } from '../Module/Module.keys';\n import Paginate from '../Paginate/Paginate.vue';\n import { DEFAULT_PAGE_SIZE } from './DataView.constants';\n import { DATA_VIEW_INJECTION } from './DataView.keys';\n import {\n DataViewVariants,\n GoNextPage,\n GoPrevPage,\n SetPage,\n SortId,\n SortOrder,\n SortValue,\n UpdateCurrentFilters,\n UpdateCurrentSearch,\n UpdateCurrentSort,\n UpdateEvent,\n } from './DataView.types';\n import { deserializeSortValue, getNextSort } from './DataView.utils';\n\n export interface DataViewProps {\n /**\n * Can be used to provide the initial page.\n * Also, it can be used to control the active page with `v-model:current-page=\"myPage\"`.\n */\n currentPage?: number;\n\n /**\n * Can be used to set the initial search term.\n * Also, it can be used to control the active search term with `v-model:current-search=\"mySearchTerm\"`.\n */\n currentSearch?: string;\n\n /**\n * Can be used to provide the initial sort order.\n * Also, it can be used to control the active sort order with `v-model:current-sort=\"mySortOrder\"`.\n */\n currentSort?: SortValue;\n\n /**\n * A list of records. If pagination is enabled, `data` must be only the current page of records.\n */\n data?: object[];\n\n /**\n * Controls the DataView'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 * The number of records to display per page.\n */\n pageSize?: number;\n\n /**\n * Opt-out of displaying pagination. Hides the pagination buttons and page stats.\n */\n disablePagination?: boolean;\n\n /**\n * Hides the bottom pagination without disabling the pagination from the toolbar\n */\n hideBottomPagination?: boolean;\n\n /**\n * The total number of records available.\n * Used to auto-enable pagination when results exist.\n * Use `Infinity` for activating 'n of many' pagination\n * DataView does not paginate data for you; instead, `props.data` should always show\n * the current page of results.\n */\n totalDataCount?: number;\n\n /**\n * Whether there is a next page of data or not as informed by the server.\n * This only applies when`totalDataCount=\"Infinity\"` to determine if the \"Next\" pagination button should be disabled.\n */\n hasNextPage?: boolean;\n\n /**\n * DataView variant. The default value is `undefined`. Will default to `table` when used within\n * a `<Module variant=\"table\">`.\n */\n variant?: DataViewVariants;\n\n isLoading?: boolean;\n }\n\n const props = withDefaults(defineProps<DataViewProps>(), {\n currentPage: 1,\n currentSearch: undefined,\n currentSort: undefined,\n data: () => [],\n density: 'comfortable',\n pageSize: DEFAULT_PAGE_SIZE,\n disablePagination: false,\n totalDataCount: 0,\n hasNextPage: undefined,\n hideBottomPagination: false,\n variant: undefined,\n });\n\n const emit = defineEmits<{\n (e: 'update', state: UpdateEvent): void;\n (e: 'update:currentFilters', newFilters: object): void;\n (e: 'update:currentPage', page: number, pageSize: number): void;\n (e: 'update:currentSearch', searchTerm?: string): void;\n (e: 'update:currentSort', payload?: SortValue): void;\n }>();\n\n const classes = useCssModule();\n const rootRef = ref<HTMLElement | null>(null);\n const moduleInjection = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n const computedVariant = computed<DataViewVariants | undefined>(() => {\n if (props.variant) {\n return props.variant;\n }\n\n if (moduleInjection.variant?.value === 'table') {\n return 'table';\n }\n\n return undefined;\n });\n const isWithinModule = computed(() => moduleInjection.variant !== undefined);\n\n const includeBottomPaginationInModule = computed(() => moduleInjection.includeDataviewPagination?.value);\n\n // #region pagination\n const internalPage = ref(1);\n const isPaginationEnabled = computed(() => !props.disablePagination && props.totalDataCount > 0);\n const isPaginateNextDisabled = computed(() => props.totalDataCount === Infinity && !props.hasNextPage);\n const pageCount = computed(() => Math.ceil(props.totalDataCount / props.pageSize));\n\n const setPage: SetPage = function (page: number, { shouldEmit } = {}) {\n internalPage.value = page;\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentPage', page, props.pageSize);\n }\n\n if (Number(rootRef.value?.getBoundingClientRect().top) < 0) {\n rootRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n };\n\n const goPrevPage: GoPrevPage = function ({ shouldEmit } = {}) {\n const page = Math.max(internalPage.value - 1, 1);\n\n setPage(page, { shouldEmit });\n };\n\n /** Updates the DataView internal state with the previous page */\n const goNextPage: GoNextPage = function ({ shouldEmit } = {}) {\n const page = Math.min(internalPage.value + 1, pageCount.value);\n\n setPage(page, { shouldEmit });\n };\n\n watch(\n () => props.currentPage,\n () => {\n setPage(props.currentPage);\n },\n { immediate: true },\n );\n // #endregion pagination\n\n // #region sorting\n const internalSort = ref<SortValue | undefined>(undefined);\n\n const internalSortId = computed<SortId | undefined>(() =>\n internalSort.value ? deserializeSortValue(internalSort.value).id : undefined,\n );\n const internalSortOrder = computed<SortOrder | undefined>(() =>\n internalSort.value ? deserializeSortValue(internalSort.value).order : undefined,\n );\n\n const updateCurrentSort: UpdateCurrentSort = function (sortId, { sortOrder, shouldEmit } = {}) {\n const { id: oldId, order: oldOrder } = deserializeSortValue(internalSort.value || '');\n const nextSort = getNextSort({ newId: sortId, newOrder: sortOrder, oldId, oldOrder });\n\n internalSort.value = nextSort;\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentSort', nextSort);\n }\n };\n\n watch(\n () => props.currentSort,\n () => {\n updateCurrentSort(props.currentSort);\n },\n { immediate: true },\n );\n // #endregion sorting\n\n // #region search\n const internalSearch = ref('');\n\n const hasToolbar = ref(false);\n const isSelectable = ref(false);\n\n const updateCurrentSearch: UpdateCurrentSearch = function (searchTerm, { shouldEmit } = {}) {\n internalSearch.value = searchTerm || '';\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentSearch', searchTerm);\n }\n };\n\n watch(\n () => props.currentSearch,\n () => {\n updateCurrentSearch(props.currentSearch);\n },\n { immediate: true },\n );\n // #endregion search\n\n // #region filters\n const internalFilters = ref<object>({});\n\n const updateCurrentFilters: UpdateCurrentFilters = function (newFilters: object, { shouldEmit } = {}) {\n internalFilters.value = newFilters;\n setPage(1);\n\n if (shouldEmit) {\n emitUpdate();\n emit('update:currentFilters', newFilters);\n }\n };\n // #endregion filters\n\n function emitUpdate() {\n emit('update', {\n page: internalPage.value,\n pageSize: props.pageSize,\n ordering: internalSort.value,\n search: internalSearch.value,\n filters: cloneDeep(internalFilters.value),\n });\n }\n\n provide(\n DATA_VIEW_INJECTION.key,\n Object.freeze({\n // Pagination\n currentPage: computed(() => internalPage.value),\n isPaginationEnabled,\n isPaginateNextDisabled,\n pageCount,\n pageSize: computed(() => props.pageSize),\n totalDataCount: computed(() => props.totalDataCount),\n setPage,\n goPrevPage,\n goNextPage,\n\n // Sorting\n currentSortId: internalSortId,\n currentSortOrder: internalSortOrder,\n updateCurrentSort,\n\n // Search\n currentSearch: computed(() => internalSearch.value),\n updateCurrentSearch,\n\n // Miscellaneous\n density: computed(() => props.density),\n hasToolbar,\n isEmpty: computed(() => props.data.length === 0),\n isSelectable,\n isLoading: computed(() => props.isLoading),\n isWithinModule,\n variant: computedVariant,\n }),\n );\n\n defineExpose({\n page: computed(() => internalPage.value),\n pageSize: computed(() => props.pageSize),\n setPage,\n goPrevPage,\n goNextPage,\n ordering: computed(() => internalSort.value),\n updateCurrentSort,\n search: computed(() => internalSearch.value),\n updateCurrentSearch,\n filters: computed(() => internalFilters.value),\n updateCurrentFilters,\n });\n</script>\n\n<template>\n <div ref=\"rootRef\" class=\"stash-data-view relative\" data-test=\"stash-data-view\">\n <!-- @slot default -->\n <slot\n :current-page=\"internalPage\"\n :current-sort-id=\"internalSortId\"\n :current-sort-order=\"internalSortOrder\"\n :data=\"data\"\n :go-prev-page=\"goPrevPage\"\n :go-next-page=\"goNextPage\"\n :page-count=\"pageCount\"\n :set-page=\"setPage\"\n :total-data-count=\"props.totalDataCount\"\n :update-current-sort=\"updateCurrentSort\"\n :update-current-search=\"updateCurrentSearch\"\n ></slot>\n\n <Paginate\n v-if=\"\n isPaginationEnabled &&\n (!isWithinModule || includeBottomPaginationInModule) &&\n pageCount > 1 &&\n !props.hideBottomPagination\n \"\n class=\"mt-6\"\n :class=\"classes.paginate\"\n :current-page=\"internalPage\"\n :is-next-disabled=\"isLoading || isPaginateNextDisabled\"\n :list-length=\"props.totalDataCount\"\n :page-size=\"props.pageSize\"\n :variant=\"props.totalDataCount === Infinity ? 'stats' : 'standard'\"\n @set-page=\"(page: number) => setPage(page, { shouldEmit: true })\"\n />\n </div>\n</template>\n\n<style module>\n @layer utilities {\n .paginate ul {\n margin: 0;\n }\n }\n</style>\n"],"names":["deserializeSortValue","sort","order","serializeSortValue","id","getNextSort","newId","newOrder","oldId","oldOrder","DataViewVariant","props","__props","emit","__emit","classes","useCssModule","rootRef","ref","moduleInjection","inject","MODULE_INJECTION","computedVariant","computed","_a","isWithinModule","includeBottomPaginationInModule","internalPage","isPaginationEnabled","isPaginateNextDisabled","pageCount","setPage","page","shouldEmit","emitUpdate","_b","goPrevPage","goNextPage","watch","internalSort","internalSortId","internalSortOrder","updateCurrentSort","sortId","sortOrder","nextSort","internalSearch","hasToolbar","isSelectable","updateCurrentSearch","searchTerm","internalFilters","updateCurrentFilters","newFilters","cloneDeep","provide","DATA_VIEW_INJECTION","__expose"],"mappings":"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"}
|
package/dist/DataViewFilters.js
CHANGED
|
@@ -5,6 +5,7 @@ import { t as d } from "./locale.js";
|
|
|
5
5
|
import { _ as K } from "./Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js";
|
|
6
6
|
import _ from "./Button.js";
|
|
7
7
|
import L from "lodash-es/cloneDeep";
|
|
8
|
+
import "./Module.keys-DcqBbvvT.js";
|
|
8
9
|
import P from "./Icon.js";
|
|
9
10
|
import { D as R } from "./DataView.keys-aSOnA4AD.js";
|
|
10
11
|
import X from "./FilterChip.js";
|
|
@@ -14,7 +15,7 @@ import te from "./SearchBar.js";
|
|
|
14
15
|
import { D as le } from "./DataViewFilters.keys-BLu07FiP.js";
|
|
15
16
|
import { i as W } from "./isDefined-DzVx0B6k.js";
|
|
16
17
|
var ae = /* @__PURE__ */ ((l) => (l.Cascade = "cascade", l.Nested = "nested", l))(ae || {});
|
|
17
|
-
function
|
|
18
|
+
function he({
|
|
18
19
|
schema: l,
|
|
19
20
|
dataViewRef: N
|
|
20
21
|
}) {
|
|
@@ -70,7 +71,7 @@ function Ae({
|
|
|
70
71
|
const se = {
|
|
71
72
|
key: 1,
|
|
72
73
|
class: "col-span-12 row-start-2 md:col-start-7 md:row-start-1 lg:col-span-8 lg:col-start-5"
|
|
73
|
-
}, re = { class: "hidden md:block" }, ie = { class: "flex gap-4" }, oe = { class: "inline-flex items-center gap-3" }, ne = { class: "flex justify-end gap-gutter" },
|
|
74
|
+
}, re = { class: "hidden md:block" }, ie = { class: "flex gap-4" }, oe = { class: "inline-flex items-center gap-3" }, ne = { class: "flex justify-end gap-gutter" }, Se = /* @__PURE__ */ j({
|
|
74
75
|
__name: "DataViewFilters",
|
|
75
76
|
props: {
|
|
76
77
|
filtersLabelText: { default: d("ll.filterBy") },
|
|
@@ -268,7 +269,7 @@ const se = {
|
|
|
268
269
|
export {
|
|
269
270
|
le as DATA_VIEW_FILTERS_UTILS_INJECTION,
|
|
270
271
|
ae as DrawerStyle,
|
|
271
|
-
|
|
272
|
-
|
|
272
|
+
Se as default,
|
|
273
|
+
he as useFilters
|
|
273
274
|
};
|
|
274
275
|
//# sourceMappingURL=DataViewFilters.js.map
|