@mshuja288/aksuicore 0.2.1 → 0.3.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/CHANGELOG.md +6 -0
- package/README.md +1 -1
- package/dist/aksui.css +59 -0
- package/dist/index.cjs +67 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -2
- package/dist/index.d.ts +8 -2
- package/dist/index.js +67 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/patterns/RecordWorkspace.tsx +82 -0
- package/src/patterns/index.ts +6 -1
- package/src/theme/patterns.css +59 -0
package/dist/index.js
CHANGED
|
@@ -726,6 +726,11 @@ function useIsClient2() {
|
|
|
726
726
|
() => false
|
|
727
727
|
);
|
|
728
728
|
}
|
|
729
|
+
var EXPORT_FORMAT_OPTIONS = [
|
|
730
|
+
{ format: "csv", label: "CSV" },
|
|
731
|
+
{ format: "xlsx", label: "Excel" },
|
|
732
|
+
{ format: "json", label: "JSON" }
|
|
733
|
+
];
|
|
729
734
|
function compareColumnValues(column, left, right) {
|
|
730
735
|
const leftRaw = column.display ? column.display(left) : column.value(left);
|
|
731
736
|
const rightRaw = column.display ? column.display(right) : column.value(right);
|
|
@@ -768,6 +773,13 @@ function PreviewIcon() {
|
|
|
768
773
|
/* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "2.4", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
|
|
769
774
|
] });
|
|
770
775
|
}
|
|
776
|
+
function DownloadIcon() {
|
|
777
|
+
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
|
|
778
|
+
/* @__PURE__ */ jsx("path", { d: "M10 3.5v8.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
|
|
779
|
+
/* @__PURE__ */ jsx("path", { d: "M6.5 9.2 10 12.8l3.5-3.6", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
780
|
+
/* @__PURE__ */ jsx("path", { d: "M4 15.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
781
|
+
] });
|
|
782
|
+
}
|
|
771
783
|
function DetailList({ lines }) {
|
|
772
784
|
return /* @__PURE__ */ jsx("dl", { className: "record-detail-list", children: lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "record-detail-row", children: [
|
|
773
785
|
/* @__PURE__ */ jsx("dt", { children: line.label }),
|
|
@@ -788,6 +800,9 @@ function RecordWorkspace({
|
|
|
788
800
|
onDelete,
|
|
789
801
|
canUpdate,
|
|
790
802
|
canDelete,
|
|
803
|
+
onDownload,
|
|
804
|
+
canDownload = true,
|
|
805
|
+
downloadBusy = false,
|
|
791
806
|
toolbar,
|
|
792
807
|
form
|
|
793
808
|
}) {
|
|
@@ -795,6 +810,7 @@ function RecordWorkspace({
|
|
|
795
810
|
const [filters, setFilters] = useState({});
|
|
796
811
|
const [sort, setSort] = useState(null);
|
|
797
812
|
const [sideOpen, setSideOpen] = useState(false);
|
|
813
|
+
const [downloadOpen, setDownloadOpen] = useState(false);
|
|
798
814
|
const [previewEnabled, setPreviewEnabled] = useState(false);
|
|
799
815
|
const [previewKey, setPreviewKey] = useState(null);
|
|
800
816
|
const [tooltip, setTooltip] = useState(null);
|
|
@@ -840,8 +856,16 @@ function RecordWorkspace({
|
|
|
840
856
|
const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
|
|
841
857
|
const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
|
|
842
858
|
const showAdd = canAdd && Boolean(onAdd);
|
|
859
|
+
const showDownload = Boolean(onDownload) && canDownload;
|
|
843
860
|
const showFilters = filterableColumns.length > 0;
|
|
844
861
|
const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
|
|
862
|
+
function requestDownload(format) {
|
|
863
|
+
if (!onDownload || downloadBusy) {
|
|
864
|
+
return;
|
|
865
|
+
}
|
|
866
|
+
onDownload(format);
|
|
867
|
+
setDownloadOpen(false);
|
|
868
|
+
}
|
|
845
869
|
function cellText(column, item) {
|
|
846
870
|
const raw = column.display ? column.display(item) : column.value(item);
|
|
847
871
|
return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
|
|
@@ -1041,6 +1065,33 @@ function RecordWorkspace({
|
|
|
1041
1065
|
/* @__PURE__ */ jsx(PlusIcon, {}),
|
|
1042
1066
|
/* @__PURE__ */ jsx("span", { children: addLabel })
|
|
1043
1067
|
] }) : null,
|
|
1068
|
+
showDownload ? /* @__PURE__ */ jsxs("div", { className: "side-rail-download", children: [
|
|
1069
|
+
/* @__PURE__ */ jsxs(
|
|
1070
|
+
"button",
|
|
1071
|
+
{
|
|
1072
|
+
type: "button",
|
|
1073
|
+
className: "ghost side-rail-download-toggle",
|
|
1074
|
+
"aria-expanded": downloadOpen,
|
|
1075
|
+
disabled: downloadBusy,
|
|
1076
|
+
onClick: () => setDownloadOpen((open) => !open),
|
|
1077
|
+
children: [
|
|
1078
|
+
/* @__PURE__ */ jsx(DownloadIcon, {}),
|
|
1079
|
+
/* @__PURE__ */ jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
|
|
1080
|
+
]
|
|
1081
|
+
}
|
|
1082
|
+
),
|
|
1083
|
+
downloadOpen ? /* @__PURE__ */ jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
|
|
1084
|
+
"button",
|
|
1085
|
+
{
|
|
1086
|
+
type: "button",
|
|
1087
|
+
className: "ghost side-rail-download-format",
|
|
1088
|
+
disabled: downloadBusy,
|
|
1089
|
+
onClick: () => requestDownload(option.format),
|
|
1090
|
+
children: option.label
|
|
1091
|
+
},
|
|
1092
|
+
option.format
|
|
1093
|
+
)) }) : null
|
|
1094
|
+
] }) : null,
|
|
1044
1095
|
showFilters ? /* @__PURE__ */ jsxs("div", { className: "side-rail-filters", children: [
|
|
1045
1096
|
/* @__PURE__ */ jsxs("div", { className: "filter-panel-head", children: [
|
|
1046
1097
|
/* @__PURE__ */ jsx("h3", { children: "Filters" }),
|
|
@@ -1094,6 +1145,22 @@ function RecordWorkspace({
|
|
|
1094
1145
|
/* @__PURE__ */ jsx(PreviewIcon, {})
|
|
1095
1146
|
] }),
|
|
1096
1147
|
showAdd ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsx(PlusIcon, {}) }) : null,
|
|
1148
|
+
showDownload ? /* @__PURE__ */ jsx(
|
|
1149
|
+
"button",
|
|
1150
|
+
{
|
|
1151
|
+
type: "button",
|
|
1152
|
+
className: "ghost side-rail-icon",
|
|
1153
|
+
title: "Download",
|
|
1154
|
+
"aria-label": "Download",
|
|
1155
|
+
"aria-expanded": downloadOpen,
|
|
1156
|
+
disabled: downloadBusy,
|
|
1157
|
+
onClick: () => {
|
|
1158
|
+
setSideOpen(true);
|
|
1159
|
+
setDownloadOpen(true);
|
|
1160
|
+
},
|
|
1161
|
+
children: /* @__PURE__ */ jsx(DownloadIcon, {})
|
|
1162
|
+
}
|
|
1163
|
+
) : null,
|
|
1097
1164
|
showFilters ? /* @__PURE__ */ jsxs(
|
|
1098
1165
|
"button",
|
|
1099
1166
|
{
|