@wener/console
Version:
Base console UI toolkit
985 lines (984 loc) • 72.7 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
function _array_without_holes(arr) {
if (Array.isArray(arr))
return _array_like_to_array(arr);
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
}
catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
}
else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator(fn) {
return function () {
var self = this, args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _iterable_to_array(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
return Array.from(iter);
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _non_iterable_spread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _to_consumable_array(arr) {
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
function _ts_generator(thisArg, body) {
var f, y, t, _ = {
label: 0,
sent: function () {
if (t[0] & 1)
throw t[1];
return t[1];
},
trys: [],
ops: []
}, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
return d(g, "next", {
value: verb(0)
}), d(g, "throw", {
value: verb(1)
}), d(g, "return", {
value: verb(2)
}), typeof Symbol === "function" && d(g, Symbol.iterator, {
value: function () {
return this;
}
}), g;
function verb(n) {
return function (v) {
return step([
n,
v
]);
};
}
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [
op[0] & 2,
t.value
];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [
0
];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [
6,
e
];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
/**
* DataView Storybook Stories
*/ import React, { useEffect, useState } from "react";
import { PiChartLineLight, PiFunnelLight, PiGearLight, PiUserLight } from "react-icons/pi";
import { createDataViewStore, DataViewLayout, DataViewProvider, PageInfo, PageNav, useDataViewStoreContext } from "./index.js";
import { ResourceListItem } from "./ResourceListItem.js";
var meta = {
title: "Components/DataView",
component: DataViewLayout.Composite,
tags: [
"autodocs"
],
parameters: {
layout: "fullscreen"
}
};
export default meta;
// Sample data for demonstrations
var sampleUsers = Array.from({
length: 100
}, function (_, i) {
return {
id: i + 1,
name: "User ".concat(i + 1),
email: "user".concat(i + 1, "@example.com"),
status: i % 3 === 0 ? "Active" : i % 3 === 1 ? "Inactive" : "Pending"
};
});
// ============================================
// Story 1: Complete DataView with all features
// ============================================
export var Complete = {
render: function () {
var _useState = _sliced_to_array(useState(true), 2), showSummary = _useState[0], setShowSummary = _useState[1];
var _useState1 = _sliced_to_array(useState(1), 2), pageNumber = _useState1[0], setPageNumber = _useState1[1];
var _useState2 = _sliced_to_array(useState(20), 2), pageSize = _useState2[0], setPageSize = _useState2[1];
var pageCount = Math.ceil(sampleUsers.length / pageSize);
var startIndex = (pageNumber - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize, sampleUsers.length);
var currentPageData = sampleUsers.slice(startIndex, endIndex);
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Composite, {
header: /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u7528\u6237\u7BA1\u7406",
filter: /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React.createElement("input", {
placeholder: "\u641C\u7D22\u7528\u6237...",
className: "input input-sm input-bordered w-64"
}), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm btn-ghost"
}, /*#__PURE__*/ React.createElement(PiFunnelLight, null))),
actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm"
}, "\u5BFC\u51FA"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-sm"
}, "\u65B0\u5EFA\u7528\u6237"))
}),
leftPanel: /*#__PURE__*/ React.createElement(DataViewLayout.Sidebar, {
title: "\u7B5B\u9009\u5668",
footer: /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm btn-block"
}, "\u91CD\u7F6E\u7B5B\u9009")
}, /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("label", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("div", {
className: "label"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "\u72B6\u6001")), /*#__PURE__*/ React.createElement("select", {
className: "select select-sm select-bordered"
}, /*#__PURE__*/ React.createElement("option", null, "\u5168\u90E8"), /*#__PURE__*/ React.createElement("option", null, "Active"), /*#__PURE__*/ React.createElement("option", null, "Inactive"), /*#__PURE__*/ React.createElement("option", null, "Pending"))), /*#__PURE__*/ React.createElement("label", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("div", {
className: "label"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "\u89D2\u8272")), /*#__PURE__*/ React.createElement("select", {
className: "select select-sm select-bordered"
}, /*#__PURE__*/ React.createElement("option", null, "\u5168\u90E8"), /*#__PURE__*/ React.createElement("option", null, "Admin"), /*#__PURE__*/ React.createElement("option", null, "User"), /*#__PURE__*/ React.createElement("option", null, "Guest"))))),
rightPanel: showSummary ? /*#__PURE__*/ React.createElement(DataViewLayout.Summary, {
title: "\u7528\u6237\u8BE6\u60C5",
description: "\u67E5\u770B\u548C\u7F16\u8F91\u7528\u6237\u7684\u8BE6\u7EC6\u4FE1\u606F",
onClose: function () {
return setShowSummary(false);
},
tabs: [
{
key: "overview",
label: "\u6982\u89C8",
icon: /*#__PURE__*/ React.createElement(PiUserLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h4", {
className: "text-base-content/70 text-sm font-semibold"
}, "\u57FA\u672C\u4FE1\u606F"), /*#__PURE__*/ React.createElement("div", {
className: "mt-2 space-y-2"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u59D3\u540D"), /*#__PURE__*/ React.createElement("p", null, "John Doe")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u90AE\u7BB1"), /*#__PURE__*/ React.createElement("p", null, "john@example.com")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u72B6\u6001"), /*#__PURE__*/ React.createElement("span", {
className: "badge badge-success badge-sm"
}, "Active")))))
},
{
key: "analytics",
label: "\u5206\u6790",
icon: /*#__PURE__*/ React.createElement(PiChartLineLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h4", {
className: "text-base-content/70 text-sm font-semibold"
}, "\u4F7F\u7528\u7EDF\u8BA1"), /*#__PURE__*/ React.createElement("div", {
className: "mt-2 space-y-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "stat"
}, /*#__PURE__*/ React.createElement("div", {
className: "stat-title"
}, "\u767B\u5F55\u6B21\u6570"), /*#__PURE__*/ React.createElement("div", {
className: "stat-value text-primary"
}, "142")), /*#__PURE__*/ React.createElement("div", {
className: "stat"
}, /*#__PURE__*/ React.createElement("div", {
className: "stat-title"
}, "\u6700\u540E\u767B\u5F55"), /*#__PURE__*/ React.createElement("div", {
className: "stat-value text-sm"
}, "2024-01-15")))))
},
{
key: "settings",
label: "\u8BBE\u7F6E",
icon: /*#__PURE__*/ React.createElement(PiGearLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label cursor-pointer"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "\u63A5\u6536\u90AE\u4EF6\u901A\u77E5"), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "toggle toggle-primary",
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label cursor-pointer"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "\u542F\u7528\u4E8C\u6B21\u9A8C\u8BC1"), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "toggle toggle-primary"
}))))
}
]
}) : undefined,
footer: /*#__PURE__*/ React.createElement(DataViewLayout.Footer, null, /*#__PURE__*/ React.createElement(PageInfo, {
from: startIndex + 1,
to: endIndex,
total: sampleUsers.length,
pageSize: pageSize,
onPageSizeChange: setPageSize
}), /*#__PURE__*/ React.createElement(PageNav, {
pageNumber: pageNumber,
pageCount: pageCount,
onPageNumberChange: setPageNumber
}), !showSummary && /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm btn-ghost ml-auto",
onClick: function () {
return setShowSummary(true);
}
}, "\u663E\u793A\u8BE6\u60C5"))
}, /*#__PURE__*/ React.createElement("div", {
className: "h-full overflow-auto"
}, /*#__PURE__*/ React.createElement("table", {
className: "table-zebra table-pin-rows table"
}, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, /*#__PURE__*/ React.createElement("th", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox checkbox-sm"
})), /*#__PURE__*/ React.createElement("th", null, "ID"), /*#__PURE__*/ React.createElement("th", null, "\u59D3\u540D"), /*#__PURE__*/ React.createElement("th", null, "\u90AE\u7BB1"), /*#__PURE__*/ React.createElement("th", null, "\u72B6\u6001"))), /*#__PURE__*/ React.createElement("tbody", null, currentPageData.map(function (user) {
return /*#__PURE__*/ React.createElement("tr", {
key: user.id,
className: "hover"
}, /*#__PURE__*/ React.createElement("td", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox checkbox-sm"
})), /*#__PURE__*/ React.createElement("td", null, user.id), /*#__PURE__*/ React.createElement("td", null, user.name), /*#__PURE__*/ React.createElement("td", null, user.email), /*#__PURE__*/ React.createElement("td", null, /*#__PURE__*/ React.createElement("span", {
className: "badge badge-sm ".concat(user.status === "Active" ? "badge-success" : user.status === "Inactive" ? "badge-error" : "badge-warning")
}, user.status)));
}))))));
}
};
export var Minimal = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Composite, {
header: /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u7B80\u5355\u5217\u8868"
}),
footer: /*#__PURE__*/ React.createElement(DataViewLayout.Footer, null, /*#__PURE__*/ React.createElement(PageInfo, {
from: 1,
to: 10,
total: 100
}), /*#__PURE__*/ React.createElement(PageNav, {
pageNumber: 1,
pageCount: 10
}))
}, /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "prose"
}, /*#__PURE__*/ React.createElement("h2", null, "\u4E3B\u8981\u5185\u5BB9\u533A\u57DF"), /*#__PURE__*/ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u6700\u7B80\u5316\u7684 DataView \u793A\u4F8B\uFF0C\u53EA\u6709 header\u3001content \u548C footer\u3002")))));
}
};
// ============================================
// Story 3: With Left Panel Only
// ============================================
export var WithLeftPanel = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Composite, {
header: /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u5E26\u4FA7\u8FB9\u680F\u7684\u5217\u8868"
}),
leftPanel: /*#__PURE__*/ React.createElement(DataViewLayout.Sidebar, {
title: "\u5BFC\u822A"
}, /*#__PURE__*/ React.createElement("ul", {
className: "menu"
}, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", {
className: "active"
}, "\u5168\u90E8\u9879\u76EE")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u8FDB\u884C\u4E2D")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u5DF2\u5B8C\u6210")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u5DF2\u5F52\u6863"))))
}, /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
}, Array.from({
length: 12
}, function (_, i) {
return /*#__PURE__*/ React.createElement("div", {
key: i,
className: "card bg-base-200 shadow-sm"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h2", {
className: "card-title"
}, "\u9879\u76EE ", i + 1), /*#__PURE__*/ React.createElement("p", null, "\u9879\u76EE\u63CF\u8FF0\u4FE1\u606F..."), /*#__PURE__*/ React.createElement("div", {
className: "card-actions justify-end"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-sm"
}, "\u67E5\u770B"))));
})))));
}
};
// ============================================
// Story 4: With Right Panel Only (No Tabs)
// ============================================
export var WithRightPanel = {
render: function () {
var _useState = _sliced_to_array(useState(true), 2), showSummary = _useState[0], setShowSummary = _useState[1];
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Composite, {
header: /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u5217\u8868\u89C6\u56FE"
}),
rightPanel: showSummary ? /*#__PURE__*/ React.createElement(DataViewLayout.Summary, {
title: "\u8BA2\u5355\u8BE6\u60C5",
description: "\u67E5\u770B\u8BA2\u5355\u7684\u8BE6\u7EC6\u4FE1\u606F",
onClose: function () {
return setShowSummary(false);
},
tabs: [
{
key: "info",
label: "\u57FA\u672C\u4FE1\u606F",
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u8BA2\u5355\u53F7"), /*#__PURE__*/ React.createElement("p", {
className: "font-mono"
}, "#ORD-2024-001")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u5BA2\u6237"), /*#__PURE__*/ React.createElement("p", null, "John Doe")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u91D1\u989D"), /*#__PURE__*/ React.createElement("p", {
className: "font-semibold"
}, "\u00A51,234.56")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "text-base-content/60 text-xs"
}, "\u72B6\u6001"), /*#__PURE__*/ React.createElement("span", {
className: "badge badge-success"
}, "\u5DF2\u5B8C\u6210")))
},
{
key: "items",
label: "\u8BA2\u5355\u9879",
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "border-b pb-2"
}, /*#__PURE__*/ React.createElement("p", {
className: "font-semibold"
}, "\u5546\u54C1 A"), /*#__PURE__*/ React.createElement("p", {
className: "text-base-content/60 text-sm"
}, "\u6570\u91CF: 2 \u00D7 \u00A5500.00")), /*#__PURE__*/ React.createElement("div", {
className: "border-b pb-2"
}, /*#__PURE__*/ React.createElement("p", {
className: "font-semibold"
}, "\u5546\u54C1 B"), /*#__PURE__*/ React.createElement("p", {
className: "text-base-content/60 text-sm"
}, "\u6570\u91CF: 1 \u00D7 \u00A5234.56")))
}
]
}, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React.createElement("span", {
className: "badge badge-success"
}, "\u5DF2\u652F\u4ED8"), /*#__PURE__*/ React.createElement("span", {
className: "badge badge-info"
}, "\u5DF2\u53D1\u8D27"))) : undefined
}, /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("table", {
className: "table"
}, /*#__PURE__*/ React.createElement("thead", null, /*#__PURE__*/ React.createElement("tr", null, /*#__PURE__*/ React.createElement("th", null, "\u8BA2\u5355\u53F7"), /*#__PURE__*/ React.createElement("th", null, "\u5BA2\u6237"), /*#__PURE__*/ React.createElement("th", null, "\u91D1\u989D"), /*#__PURE__*/ React.createElement("th", null, "\u72B6\u6001"))), /*#__PURE__*/ React.createElement("tbody", null, /*#__PURE__*/ React.createElement("tr", {
className: "hover"
}, /*#__PURE__*/ React.createElement("td", {
className: "font-mono"
}, "#ORD-2024-001"), /*#__PURE__*/ React.createElement("td", null, "John Doe"), /*#__PURE__*/ React.createElement("td", null, "\u00A51,234.56"), /*#__PURE__*/ React.createElement("td", null, /*#__PURE__*/ React.createElement("span", {
className: "badge badge-success"
}, "\u5DF2\u5B8C\u6210"))), /*#__PURE__*/ React.createElement("tr", {
className: "hover"
}, /*#__PURE__*/ React.createElement("td", {
className: "font-mono"
}, "#ORD-2024-002"), /*#__PURE__*/ React.createElement("td", null, "Jane Smith"), /*#__PURE__*/ React.createElement("td", null, "\u00A52,345.67"), /*#__PURE__*/ React.createElement("td", null, /*#__PURE__*/ React.createElement("span", {
className: "badge badge-warning"
}, "\u5904\u7406\u4E2D"))))), !showSummary && /*#__PURE__*/ React.createElement("div", {
className: "mt-4"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm btn-primary",
onClick: function () {
return setShowSummary(true);
}
}, "\u663E\u793A\u8BE6\u60C5\u9762\u677F")))));
}
};
// ============================================
// Story 5: Header Variants
// ============================================
export var HeaderVariants = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "bg-base-200 h-screen space-y-4 p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u57FA\u672C\u6807\u9898"
})), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u5E26\u64CD\u4F5C\u7684\u6807\u9898"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm"
}, "\u81EA\u5B9A\u4E49\u64CD\u4F5C"))), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u5E26\u8FC7\u6EE4\u548C\u64CD\u4F5C",
filter: /*#__PURE__*/ React.createElement("input", {
placeholder: "\u641C\u7D22...",
className: "input input-sm input-bordered"
}),
actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm"
}, "\u53D6\u6D88"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-sm"
}, "\u4FDD\u5B58"))
})));
}
};
// ============================================
// Story 6: Summary Tab Variants
// ============================================
export var SummaryTabs = {
render: function () {
var _useState = _sliced_to_array(useState("tab1"), 2), activeTab = _useState[0], setActiveTab = _useState[1];
return /*#__PURE__*/ React.createElement("div", {
className: "bg-base-200 h-screen p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 h-full shadow"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Summary, {
title: "\u591A\u6807\u7B7E\u9875\u793A\u4F8B",
description: "\u5C55\u793A\u4E0D\u540C\u7684\u5185\u5BB9\u9762\u677F",
activeTab: activeTab,
onTabChange: setActiveTab,
onClose: function () {
return console.log("Close");
},
tabs: [
{
key: "tab1",
label: "\u6807\u7B7E\u9875 1",
icon: /*#__PURE__*/ React.createElement(PiUserLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("h3", {
className: "font-semibold"
}, "\u7B2C\u4E00\u4E2A\u6807\u7B7E\u9875"), /*#__PURE__*/ React.createElement("p", null, "\u8FD9\u662F\u7B2C\u4E00\u4E2A\u6807\u7B7E\u9875\u7684\u5185\u5BB9\u3002"))
},
{
key: "tab2",
label: "\u6807\u7B7E\u9875 2",
icon: /*#__PURE__*/ React.createElement(PiChartLineLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("h3", {
className: "font-semibold"
}, "\u7B2C\u4E8C\u4E2A\u6807\u7B7E\u9875"), /*#__PURE__*/ React.createElement("p", null, "\u8FD9\u662F\u7B2C\u4E8C\u4E2A\u6807\u7B7E\u9875\u7684\u5185\u5BB9\u3002"))
},
{
key: "tab3",
label: "\u6807\u7B7E\u9875 3",
icon: /*#__PURE__*/ React.createElement(PiGearLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("h3", {
className: "font-semibold"
}, "\u7B2C\u4E09\u4E2A\u6807\u7B7E\u9875"), /*#__PURE__*/ React.createElement("p", null, "\u8FD9\u662F\u7B2C\u4E09\u4E2A\u6807\u7B7E\u9875\u7684\u5185\u5BB9\u3002"))
},
{
key: "tab4",
label: "\u7981\u7528",
disabled: true,
content: /*#__PURE__*/ React.createElement("div", null, "\u7981\u7528\u7684\u6807\u7B7E\u9875")
}
]
}, /*#__PURE__*/ React.createElement("div", {
className: "alert alert-info"
}, /*#__PURE__*/ React.createElement("span", null, "\u8FD9\u662F children \u5185\u5BB9\uFF0C\u663E\u793A\u5728\u6807\u7B7E\u9875\u4E4B\u524D")))));
}
};
// ============================================
// Story 7: Pagination Only
// ============================================
export var PaginationOnly = {
render: function () {
var _useState = _sliced_to_array(useState(1), 2), pageNumber = _useState[0], setPageNumber = _useState[1];
var _useState1 = _sliced_to_array(useState(30), 2), pageSize = _useState1[0], setPageSize = _useState1[1];
return /*#__PURE__*/ React.createElement("div", {
className: "bg-base-200 min-h-screen space-y-8 p-8"
}, /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 p-4 shadow"
}, /*#__PURE__*/ React.createElement("h3", {
className: "mb-4 font-semibold"
}, "PageInfo \u7EC4\u4EF6"), /*#__PURE__*/ React.createElement(PageInfo, {
from: 1,
to: 30,
total: 1234,
pageSize: pageSize,
pageSizeOptions: [
10,
20,
30,
50,
100
],
onPageSizeChange: setPageSize
})), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 p-4 shadow"
}, /*#__PURE__*/ React.createElement("h3", {
className: "mb-4 font-semibold"
}, "PageNav \u7EC4\u4EF6"), /*#__PURE__*/ React.createElement(PageNav, {
pageNumber: pageNumber,
pageCount: 42,
onPageNumberChange: setPageNumber
})), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 p-4 shadow"
}, /*#__PURE__*/ React.createElement("h3", {
className: "mb-4 font-semibold"
}, "\u7EC4\u5408\u4F7F\u7528"), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-4"
}, /*#__PURE__*/ React.createElement(PageInfo, {
from: (pageNumber - 1) * pageSize + 1,
to: Math.min(pageNumber * pageSize, 1234),
total: 1234,
pageSize: pageSize,
onPageSizeChange: setPageSize
}), /*#__PURE__*/ React.createElement("div", {
className: "flex-1"
}), /*#__PURE__*/ React.createElement(PageNav, {
pageNumber: pageNumber,
pageCount: Math.ceil(1234 / pageSize),
onPageNumberChange: setPageNumber
}))));
}
};
// ============================================
// Story 7: ListItem Component
// ============================================
export var ListItemDemo = {
render: function () {
var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
var handleSelect = function (id, isSelected) {
setSelected(function (prev) {
return isSelected ? _to_consumable_array(prev).concat([
id
]) : prev.filter(function (x) {
return x !== id;
});
});
};
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen space-y-4 p-8"
}, /*#__PURE__*/ React.createElement("h2", {
className: "text-2xl font-bold"
}, "ListItem \u7EC4\u4EF6\u6F14\u793A"), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "Basic ListItem"), /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
title: "Simple Item",
description: "A brief description of this item",
selected: selected.includes(1),
onSelectedChange: function (s) {
return handleSelect(1, s);
}
}, "This is a simple list item with title, description and children content."))), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "ListItem with Actions"), /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
title: "Item with Actions",
description: "This item demonstrates action buttons",
selected: selected.includes(2),
onSelectedChange: function (s) {
return handleSelect(2, s);
},
actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "Edit"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "Delete"))
}, "Additional content about this item goes here."))), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "ListItem with Clickable Title"), /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
title: "Clickable Title",
description: "The title is clickable",
onTitleClick: function () {
return alert("Title clicked!");
},
selected: selected.includes(3),
onSelectedChange: function (s) {
return handleSelect(3, s);
}
}, "Click the title above to trigger an action."))), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "ListItem with Meta Info"), /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
title: "Task: Complete Project Documentation",
description: "Documentation task for the Q4 release",
selected: selected.includes(4),
onSelectedChange: function (s) {
return handleSelect(4, s);
},
actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-xs"
}, "Complete"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "Edit")),
meta: /*#__PURE__*/ React.createElement("span", null, "Created by ", /*#__PURE__*/ React.createElement("strong", null, "John Doe"), " \u2022 Updated 2 hours ago \u2022 Priority: High")
}, /*#__PURE__*/ React.createElement("p", null, "Review and finalize the project documentation, including API reference, user guides, and deployment instructions.")))), /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "Multiple Items"), Array.from({
length: 5
}, function (_, i) {
return /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
key: i,
title: "Item ".concat(i + 1),
description: "Brief description of item ".concat(i + 1),
selected: selected.includes(i + 10),
onSelectedChange: function (s) {
return handleSelect(i + 10, s);
},
onTitleClick: function () {
return alert("Clicked item ".concat(i + 1));
},
actions: /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "View"),
meta: "Created ".concat(i + 1, " days ago")
}, "Additional details and content for item ", i + 1);
}))));
}
};
// ============================================
// Story 8: Virtual List Component
// ============================================
export var VirtualListDemo = {
render: function () {
var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
// Generate large dataset
var largeDataset = Array.from({
length: 10000
}, function (_, i) {
return {
id: i + 1,
title: "Item ".concat(i + 1),
description: "This is the description for item ".concat(i + 1),
createdBy: "User ".concat(i % 50 + 1),
createdAt: new Date(Date.now() - i * 60000).toISOString(),
status: [
"Active",
"Pending",
"Completed",
"Archived"
][i % 4]
};
});
var handleSelect = function (id, isSelected) {
setSelected(function (prev) {
return isSelected ? _to_consumable_array(prev).concat([
id
]) : prev.filter(function (x) {
return x !== id;
});
});
};
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen p-8"
}, /*#__PURE__*/ React.createElement("div", {
className: "card bg-base-100 h-[calc(100vh-4rem)] shadow"
}, /*#__PURE__*/ React.createElement("div", {
className: "card-body flex flex-col"
}, /*#__PURE__*/ React.createElement("div", {
className: "mb-4 flex items-center justify-between"
}, /*#__PURE__*/ React.createElement("h3", {
className: "card-title"
}, "Virtual List - 10,000 Items"), /*#__PURE__*/ React.createElement("div", {
className: "text-sm"
}, "Selected: ", /*#__PURE__*/ React.createElement("strong", null, selected.length))), /*#__PURE__*/ React.createElement("div", {
className: "flex-1 overflow-hidden rounded-lg border"
}, /*#__PURE__*/ React.createElement(DataViewLayout.List, {
data: largeDataset,
estimatedItemSize: 100,
renderItem: function (param) {
var item = param.item, index = param.index;
return /*#__PURE__*/ React.createElement(DataViewLayout.ListItem, {
key: item.id,
title: item.title,
description: item.description,
selected: selected.includes(item.id),
onSelectedChange: function (s) {
return handleSelect(item.id, s);
},
onTitleClick: function () {
return alert("Clicked: ".concat(item.title));
},
actions: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "Edit"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-xs"
}, "Delete")),
meta: /*#__PURE__*/ React.createElement("span", null, "Created by ", /*#__PURE__*/ React.createElement("strong", null, item.createdBy), " \u2022 ", new Date(item.createdAt).toLocaleDateString(), " \u2022 Status: ", item.status)
});
}
})))));
}
};
// ============================================
// Story 9: Complete with Virtual List
// ============================================
export var CompleteWithList = {
render: function () {
var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
var _useState1 = _sliced_to_array(useState(false), 2), showSummary = _useState1[0], setShowSummary = _useState1[1];
var _useState2 = _sliced_to_array(useState(null), 2), activeItem = _useState2[0], setActiveItem = _useState2[1];
var items = Array.from({
length: 500
}, function (_, i) {
return {
id: i + 1,
title: "Project ".concat(i + 1),
description: "Project description for item ".concat(i + 1),
createdBy: "User ".concat(i % 20 + 1),
createdAt: new Date(Date.now() - i * 3600000).toISOString(),
status: [
"Active",
"Pending",
"Completed"
][i % 3]
};
});
var handleSelect = function (id, isSelected) {
setSelected(function (prev) {
return isSelected ? _to_consumable_array(prev).concat([
id
]) : prev.filter(function (x) {
return x !== id;
});
});
};
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(DataViewLayout.Composite, {
header: /*#__PURE__*/ React.createElement(DataViewLayout.Header, {
title: "\u9879\u76EE\u5217\u8868",
filter: /*#__PURE__*/ React.createElement("input", {
type: "text",
placeholder: "\u641C\u7D22\u9879\u76EE...",
className: "input input-bordered input-sm w-64"
}),
actions: /*#__PURE__*/ React.createElement("div", {
className: "flex gap-2"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost btn-sm"
}, /*#__PURE__*/ React.createElement(PiFunnelLight, {
className: "h-4 w-4"
}), "\u7B5B\u9009"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-sm"
}, "+ \u65B0\u5EFA\u9879\u76EE"))
}),
leftPanel: /*#__PURE__*/ React.createElement(DataViewLayout.Sidebar, {
title: "\u5206\u7C7B"
}, /*#__PURE__*/ React.createElement("div", {
className: "menu"
}, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u5168\u90E8\u9879\u76EE (", items.length, ")")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u8FDB\u884C\u4E2D (", items.filter(function (x) {
return x.status === "Active";
}).length, ")")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u5F85\u5904\u7406 (", items.filter(function (x) {
return x.status === "Pending";
}).length, ")")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "\u5DF2\u5B8C\u6210 (", items.filter(function (x) {
return x.status === "Completed";
}).length, ")")))),
rightPanel: showSummary && activeItem && /*#__PURE__*/ React.createElement(DataViewLayout.Summary, {
title: activeItem.title,
description: activeItem.description,
onClose: function () {
return setShowSummary(false);
},
tabs: [
{
key: "details",
label: "\u8BE6\u60C5",
icon: /*#__PURE__*/ React.createElement(PiUserLight, null),
content: /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
className: "label-text"