@_tc/template-core 0.2.1 → 0.2.2

package/fe/packages/react/ui/components/testPage/demos/date/DateFormatDemo.js

@@ -0,0 +1,35 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { DatePicker } from "../../../Date/Date.js";
+import "../../../Date/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/date/DateFormatDemo.tsx
+var DateFormatDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => DateFormatDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "7. 自定义格式",
+	order: 7,
+	contentClassName: "space-y-4"
+};
+function DateFormatDemo() {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-2 gap-4",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground mb-2",
+			children: "自定义日期格式"
+		}), /* @__PURE__ */ jsx(DatePicker, {
+			format: "yyyy/MM/dd",
+			placeholder: "选择日期 (yyyy/MM/dd)"
+		})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground mb-2",
+			children: "自定义日期时间格式"
+		}), /* @__PURE__ */ jsx(DatePicker, {
+			showTime: true,
+			format: "yyyy-MM-dd HH:mm:ss",
+			placeholder: "选择日期时间 (yyyy-MM-dd HH:mm:ss)"
+		})] })]
+	}) });
+}
+//#endregion
+export { DateFormatDemo_exports, DateFormatDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/date/DateFormatDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/date/DateFormatDemo.tsx?raw
+var DateFormatDemo_default = "import { DatePicker } from '@tc/ui-react/components/Date'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n  title: '7. 自定义格式',\n  order: 7,\n  contentClassName: 'space-y-4',\n} satisfies DemoMeta\n\nexport default function DateFormatDemo() {\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <p className=\"text-sm text-muted-foreground mb-2\">自定义日期格式</p>\n                  <DatePicker format=\"yyyy/MM/dd\" placeholder=\"选择日期 (yyyy/MM/dd)\" />\n                </div>\n                <div>\n                  <p className=\"text-sm text-muted-foreground mb-2\">自定义日期时间格式</p>\n                  <DatePicker showTime format=\"yyyy-MM-dd HH:mm:ss\" placeholder=\"选择日期时间 (yyyy-MM-dd HH:mm:ss)\" />\n                </div>\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { DateFormatDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/date/DateRangeDemo.d.ts

@@ -0,0 +1,6 @@
+export declare const demoMeta: {
+    title: string;
+    order: number;
+    contentClassName: string;
+};
+export default function DateRangeDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/date/DateRangeDemo.js

@@ -0,0 +1,76 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { DatePicker } from "../../../Date/Date.js";
+import "../../../Date/index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/date/DateRangeDemo.tsx
+var DateRangeDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => DateRangeDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "3. 范围选择 (Range Picker)",
+	order: 3,
+	contentClassName: "space-y-4"
+};
+function DateRangeDemo() {
+	const [rangeWithTime, setRangeWithTime] = useState();
+	const [emptyRange, setEmptyRange] = useState();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-2 gap-8",
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium mb-2",
+				children: "基本范围选择"
+			}),
+			/* @__PURE__ */ jsx(DatePicker, {
+				mode: "range",
+				value: emptyRange,
+				onChange: (val) => {
+					setEmptyRange(val);
+					console.log("范围选择:", val);
+				},
+				placeholder: "选择日期范围"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-muted-foreground mt-2",
+				children: ["值: ", /* @__PURE__ */ jsx("code", {
+					className: "text-xs bg-muted px-1 py-0.5 rounded",
+					children: JSON.stringify(emptyRange || "未选择")
+				})]
+			})
+		] }), /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium mb-2",
+				children: "范围选择 + 时间选择"
+			}),
+			/* @__PURE__ */ jsx(DatePicker, {
+				mode: "range",
+				value: rangeWithTime,
+				showTime: true,
+				onChange: (val) => {
+					setRangeWithTime(val);
+					console.log("范围时间选择:", val);
+				},
+				placeholder: "选择日期时间范围"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-muted-foreground mt-2",
+				children: [
+					"值:",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "text-xs bg-muted px-1 py-0.5 rounded",
+						children: JSON.stringify(rangeWithTime || "未选择")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground mt-1",
+				children: "选择开始日期后，右侧会显示开始时间选择器；选择结束日期后，会显示结束时间选择器"
+			})
+		] })]
+	}) });
+}
+//#endregion
+export { DateRangeDemo_exports, DateRangeDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/date/DateRangeDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/date/DateRangeDemo.tsx?raw
+var DateRangeDemo_default = "import { useState } from 'react'\nimport { DatePicker, type DateChangeStrValue } from '@tc/ui-react/components/Date'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n  title: '3. 范围选择 (Range Picker)',\n  order: 3,\n  contentClassName: 'space-y-4',\n} satisfies DemoMeta\n\nexport default function DateRangeDemo() {\n  const [rangeWithTime, setRangeWithTime] = useState<DateChangeStrValue>()\n  const [emptyRange, setEmptyRange] = useState<DateChangeStrValue>()\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-8\">\n                <div>\n                  <h3 className=\"text-sm font-medium mb-2\">基本范围选择</h3>\n                  <DatePicker\n                    mode=\"range\"\n                    value={emptyRange}\n                    onChange={(val) => {\n                      setEmptyRange(val)\n                      console.log('范围选择:', val)\n                    }}\n                    placeholder=\"选择日期范围\"\n                  />\n                  <p className=\"text-sm text-muted-foreground mt-2\">\n                    值: <code className=\"text-xs bg-muted px-1 py-0.5 rounded\">{JSON.stringify(emptyRange || '未选择')}</code>\n                  </p>\n                </div>\n                <div>\n                  <h3 className=\"text-sm font-medium mb-2\">范围选择 + 时间选择</h3>\n                  <DatePicker\n                    mode=\"range\"\n                    value={rangeWithTime}\n                    showTime\n                    onChange={(val) => {\n                      setRangeWithTime(val)\n                      console.log('范围时间选择:', val)\n                    }}\n                    placeholder=\"选择日期时间范围\"\n                  />\n                  <p className=\"text-sm text-muted-foreground mt-2\">\n                    值:{' '}\n                    <code className=\"text-xs bg-muted px-1 py-0.5 rounded\">{JSON.stringify(rangeWithTime || '未选择')}</code>\n                  </p>\n                  <p className=\"text-xs text-muted-foreground mt-1\">\n                    选择开始日期后，右侧会显示开始时间选择器；选择结束日期后，会显示结束时间选择器\n                  </p>\n                </div>\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { DateRangeDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/date/DateTimeDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function DateTimeDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/date/DateTimeDemo.js

@@ -0,0 +1,60 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { DatePicker } from "../../../Date/Date.js";
+import "../../../Date/index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/testPage/demos/date/DateTimeDemo.tsx
+var DateTimeDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => DateTimeDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "2. 日期时间选择器 (showTime)",
+	description: "时间选择器显示在日历右侧，提供更好的用户体验",
+	order: 2,
+	contentClassName: "space-y-4"
+};
+function DateTimeDemo() {
+	const [dateTime1, setDateTime1] = useState();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-2 gap-8",
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium mb-2",
+				children: "基本用法 - 单日期时间"
+			}),
+			/* @__PURE__ */ jsx(DatePicker, {
+				showTime: true,
+				placeholder: "请选择日期时间"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground mt-2",
+				children: "点击输入框打开选择器，时间选择器在右侧显示"
+			})
+		] }), /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium mb-2",
+				children: "受控模式"
+			}),
+			/* @__PURE__ */ jsx(DatePicker, {
+				showTime: true,
+				value: dateTime1,
+				onChange: (val, date) => {
+					setDateTime1(val);
+					console.log("选中日期时间:", val);
+					console.log("Date 对象:", date);
+				},
+				placeholder: "受控日期时间选择器"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm text-muted-foreground mt-2",
+				children: ["选中的值: ", /* @__PURE__ */ jsx("code", {
+					className: "text-xs bg-muted px-1 py-0.5 rounded",
+					children: String(dateTime1 || "未选择")
+				})]
+			})
+		] })]
+	}) });
+}
+//#endregion
+export { DateTimeDemo_exports, DateTimeDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/date/DateTimeDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/date/DateTimeDemo.tsx?raw
+var DateTimeDemo_default = "import { useState } from 'react'\nimport { DatePicker, type DateChangeStrValue } from '@tc/ui-react/components/Date'\nimport type { DemoMeta } from '../../types'\n\nexport const demoMeta = {\n  title: '2. 日期时间选择器 (showTime)',\n  description: '时间选择器显示在日历右侧，提供更好的用户体验',\n  order: 2,\n  contentClassName: 'space-y-4',\n} satisfies DemoMeta\n\nexport default function DateTimeDemo() {\n  const [dateTime1, setDateTime1] = useState<DateChangeStrValue>()\n  return (\n    <>\n      <div className=\"grid grid-cols-2 gap-8\">\n                <div>\n                  <h3 className=\"text-sm font-medium mb-2\">基本用法 - 单日期时间</h3>\n                  <DatePicker showTime placeholder=\"请选择日期时间\" />\n                  <p className=\"text-xs text-muted-foreground mt-2\">点击输入框打开选择器，时间选择器在右侧显示</p>\n                </div>\n                <div>\n                  <h3 className=\"text-sm font-medium mb-2\">受控模式</h3>\n                  <DatePicker\n                    showTime\n                    value={dateTime1}\n                    onChange={(val, date) => {\n                      setDateTime1(val)\n                      console.log('选中日期时间:', val)\n                      console.log('Date 对象:', date)\n                    }}\n                    placeholder=\"受控日期时间选择器\"\n                  />\n                  <p className=\"text-sm text-muted-foreground mt-2\">\n                    选中的值: <code className=\"text-xs bg-muted px-1 py-0.5 rounded\">{String(dateTime1 || '未选择')}</code>\n                  </p>\n                </div>\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { DateTimeDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuAccordionDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function MenuAccordionDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/menu/MenuAccordionDemo.js

@@ -0,0 +1,78 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Menu } from "../../../Menu/Menu.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { LayoutDashboard, Package, Settings } from "lucide-react";
+//#region packages/react/ui/components/testPage/demos/menu/MenuAccordionDemo.tsx
+var MenuAccordionDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => MenuAccordionDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "2. 手风琴展开 (accordion)",
+	description: "同一层级同时只能展开一个子菜单",
+	order: 2,
+	contentClassName: "space-y-3"
+};
+var menuItems = [
+	{
+		key: "dashboard",
+		label: "Dashboard",
+		icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
+	},
+	{
+		key: "products",
+		label: "Products",
+		icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
+		children: [
+			{
+				key: "products-list",
+				label: "All Products"
+			},
+			{
+				key: "products-create",
+				label: "Create New"
+			},
+			{
+				key: "products-categories",
+				label: "Categories",
+				children: [{
+					key: "cat-electronics",
+					label: "Electronics"
+				}, {
+					key: "cat-clothing",
+					label: "Clothing"
+				}]
+			}
+		]
+	},
+	{
+		key: "settings",
+		label: "Settings",
+		icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+		children: [{
+			key: "settings-profile",
+			label: "Profile"
+		}, {
+			key: "settings-billing",
+			label: "Billing",
+			danger: true
+		}]
+	}
+];
+function MenuAccordionDemo() {
+	const [accordionKey, setAccordionKey] = useState("dashboard");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		className: "w-56 border rounded-lg overflow-hidden",
+		children: /* @__PURE__ */ jsx(Menu, {
+			mode: "left",
+			expandMode: "accordion",
+			selectedKey: accordionKey,
+			onSelect: setAccordionKey,
+			items: menuItems
+		})
+	}) });
+}
+//#endregion
+export { MenuAccordionDemo_exports, MenuAccordionDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuAccordionDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/menu/MenuAccordionDemo.tsx?raw
+var MenuAccordionDemo_default = "import { useState } from 'react'\nimport { LayoutDashboard, Package, Settings } from 'lucide-react'\nimport { Menu, type MenuItemData } from '@tc/ui-react/components'\nimport type { DemoMeta } from '../../types'\n\n\nexport const demoMeta = {\n  title: '2. 手风琴展开 (accordion)',\n  description: '同一层级同时只能展开一个子菜单',\n  order: 2,\n  contentClassName: 'space-y-3',\n} satisfies DemoMeta\n\n// ─── 示例数据 ────────────────────────────────────────────────────────────────\n\nconst menuItems: MenuItemData[] = [\n  {\n    key: 'dashboard',\n    label: 'Dashboard',\n    icon: <LayoutDashboard className=\"h-4 w-4\" />,\n  },\n  {\n    key: 'products',\n    label: 'Products',\n    icon: <Package className=\"h-4 w-4\" />,\n    children: [\n      { key: 'products-list', label: 'All Products' },\n      { key: 'products-create', label: 'Create New' },\n      {\n        key: 'products-categories',\n        label: 'Categories',\n        children: [\n          { key: 'cat-electronics', label: 'Electronics' },\n          { key: 'cat-clothing', label: 'Clothing' },\n        ],\n      },\n    ],\n  },\n  {\n    key: 'settings',\n    label: 'Settings',\n    icon: <Settings className=\"h-4 w-4\" />,\n    children: [\n      { key: 'settings-profile', label: 'Profile' },\n      { key: 'settings-billing', label: 'Billing', danger: true },\n    ],\n  },\n]\n\nexport default function MenuAccordionDemo() {\n  const [accordionKey, setAccordionKey] = useState('dashboard')\n  return (\n    <>\n      <div className=\"w-56 border rounded-lg overflow-hidden\">\n                <Menu mode=\"left\" expandMode=\"accordion\" selectedKey={accordionKey} onSelect={setAccordionKey} items={menuItems} />\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { MenuAccordionDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuClickTriggerDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function MenuClickTriggerDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/menu/MenuClickTriggerDemo.js

@@ -0,0 +1,79 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Menu } from "../../../Menu/Menu.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { LayoutDashboard, Package, Settings } from "lucide-react";
+//#region packages/react/ui/components/testPage/demos/menu/MenuClickTriggerDemo.tsx
+var MenuClickTriggerDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => MenuClickTriggerDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "7. Click 触发",
+	description: "点击展开子菜单，而非 hover",
+	order: 7,
+	contentClassName: "space-y-3"
+};
+var menuItems = [
+	{
+		key: "dashboard",
+		label: "Dashboard",
+		icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
+	},
+	{
+		key: "products",
+		label: "Products",
+		icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
+		children: [
+			{
+				key: "products-list",
+				label: "All Products"
+			},
+			{
+				key: "products-create",
+				label: "Create New"
+			},
+			{
+				key: "products-categories",
+				label: "Categories",
+				children: [{
+					key: "cat-electronics",
+					label: "Electronics"
+				}, {
+					key: "cat-clothing",
+					label: "Clothing"
+				}]
+			}
+		]
+	},
+	{
+		key: "settings",
+		label: "Settings",
+		icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+		children: [{
+			key: "settings-profile",
+			label: "Profile"
+		}, {
+			key: "settings-billing",
+			label: "Billing",
+			danger: true
+		}]
+	}
+];
+function MenuClickTriggerDemo() {
+	const [selectedKey, setSelectedKey] = useState("dashboard");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		className: "w-56 border rounded-lg overflow-hidden",
+		children: /* @__PURE__ */ jsx(Menu, {
+			mode: "left",
+			expandTrigger: "click",
+			expandMode: "multiple",
+			selectedKey,
+			onSelect: setSelectedKey,
+			items: menuItems
+		})
+	}) });
+}
+//#endregion
+export { MenuClickTriggerDemo_exports, MenuClickTriggerDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuClickTriggerDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/menu/MenuClickTriggerDemo.tsx?raw
+var MenuClickTriggerDemo_default = "import { useState } from 'react'\nimport { LayoutDashboard, Package, Settings } from 'lucide-react'\nimport { Menu, type MenuItemData } from '@tc/ui-react/components'\nimport type { DemoMeta } from '../../types'\n\n\nexport const demoMeta = {\n  title: '7. Click 触发',\n  description: '点击展开子菜单，而非 hover',\n  order: 7,\n  contentClassName: 'space-y-3',\n} satisfies DemoMeta\n\n// ─── 示例数据 ────────────────────────────────────────────────────────────────\n\nconst menuItems: MenuItemData[] = [\n  {\n    key: 'dashboard',\n    label: 'Dashboard',\n    icon: <LayoutDashboard className=\"h-4 w-4\" />,\n  },\n  {\n    key: 'products',\n    label: 'Products',\n    icon: <Package className=\"h-4 w-4\" />,\n    children: [\n      { key: 'products-list', label: 'All Products' },\n      { key: 'products-create', label: 'Create New' },\n      {\n        key: 'products-categories',\n        label: 'Categories',\n        children: [\n          { key: 'cat-electronics', label: 'Electronics' },\n          { key: 'cat-clothing', label: 'Clothing' },\n        ],\n      },\n    ],\n  },\n  {\n    key: 'settings',\n    label: 'Settings',\n    icon: <Settings className=\"h-4 w-4\" />,\n    children: [\n      { key: 'settings-profile', label: 'Profile' },\n      { key: 'settings-billing', label: 'Billing', danger: true },\n    ],\n  },\n]\n\nexport default function MenuClickTriggerDemo() {\n  const [selectedKey, setSelectedKey] = useState('dashboard')\n  return (\n    <>\n      <div className=\"w-56 border rounded-lg overflow-hidden\">\n                <Menu\n                  mode=\"left\"\n                  expandTrigger=\"click\"\n                  expandMode=\"multiple\"\n                  selectedKey={selectedKey}\n                  onSelect={setSelectedKey}\n                  items={menuItems}\n                />\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { MenuClickTriggerDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function MenuCollapsedDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedDemo.js

@@ -0,0 +1,82 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Menu } from "../../../Menu/Menu.js";
+import "../../../index.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { BarChart3, Bell, FileText, HelpCircle, LayoutDashboard, ShoppingCart, Users } from "lucide-react";
+//#region packages/react/ui/components/testPage/demos/menu/MenuCollapsedDemo.tsx
+var MenuCollapsedDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => MenuCollapsedDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "3. 折叠模式 (collapsed)",
+	description: "收起后仅展示图标，hover 弹出子菜单",
+	order: 3,
+	contentClassName: "space-y-3"
+};
+var iconMenuItems = [
+	{
+		key: "dashboard",
+		label: "Dashboard",
+		icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
+	},
+	{
+		key: "users",
+		label: "Users",
+		icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+		children: [{
+			key: "users-list",
+			label: "All Users",
+			icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" })
+		}, {
+			key: "users-roles",
+			label: "Roles",
+			icon: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+		}]
+	},
+	{
+		key: "analytics",
+		label: "Analytics",
+		icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+		children: [{
+			key: "analytics-overview",
+			label: "Overview"
+		}, {
+			key: "analytics-reports",
+			label: "Reports"
+		}]
+	},
+	{
+		key: "orders",
+		label: "Orders",
+		icon: /* @__PURE__ */ jsx(ShoppingCart, { className: "h-4 w-4" })
+	},
+	{
+		key: "notifications",
+		label: "Notifications",
+		icon: /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" })
+	},
+	{
+		key: "help",
+		label: "Help",
+		icon: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" })
+	}
+];
+function MenuCollapsedDemo() {
+	const [collapsed, setCollapsed] = useState(false);
+	const [collapsedKey, setCollapsedKey] = useState("dashboard");
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		className: "border rounded-lg overflow-hidden inline-flex",
+		children: /* @__PURE__ */ jsx(Menu, {
+			mode: "left",
+			selectedKey: collapsedKey,
+			onSelect: setCollapsedKey,
+			collapsed,
+			onCollapse: setCollapsed,
+			items: iconMenuItems
+		})
+	}) });
+}
+//#endregion
+export { MenuCollapsedDemo_exports, MenuCollapsedDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/menu/MenuCollapsedDemo.tsx?raw
+var MenuCollapsedDemo_default = "import { useState } from 'react'\nimport { LayoutDashboard, Users, FileText, BarChart3, ShoppingCart, Bell, HelpCircle } from 'lucide-react'\nimport { Menu, type MenuItemData } from '@tc/ui-react/components'\nimport type { DemoMeta } from '../../types'\n\n\nexport const demoMeta = {\n  title: '3. 折叠模式 (collapsed)',\n  description: '收起后仅展示图标，hover 弹出子菜单',\n  order: 3,\n  contentClassName: 'space-y-3',\n} satisfies DemoMeta\n\n// ─── 示例数据 ────────────────────────────────────────────────────────────────\n\nconst iconMenuItems: MenuItemData[] = [\n  { key: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className=\"h-4 w-4\" /> },\n  {\n    key: 'users',\n    label: 'Users',\n    icon: <Users className=\"h-4 w-4\" />,\n    children: [\n      { key: 'users-list', label: 'All Users', icon: <Users className=\"h-4 w-4\" /> },\n      { key: 'users-roles', label: 'Roles', icon: <FileText className=\"h-4 w-4\" /> },\n    ],\n  },\n  {\n    key: 'analytics',\n    label: 'Analytics',\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    children: [\n      { key: 'analytics-overview', label: 'Overview' },\n      { key: 'analytics-reports', label: 'Reports' },\n    ],\n  },\n  { key: 'orders', label: 'Orders', icon: <ShoppingCart className=\"h-4 w-4\" /> },\n  { key: 'notifications', label: 'Notifications', icon: <Bell className=\"h-4 w-4\" /> },\n  { key: 'help', label: 'Help', icon: <HelpCircle className=\"h-4 w-4\" /> },\n]\n\nexport default function MenuCollapsedDemo() {\n  const [collapsed, setCollapsed] = useState(false)\n  const [collapsedKey, setCollapsedKey] = useState('dashboard')\n  return (\n    <>\n      <div className=\"border rounded-lg overflow-hidden inline-flex\">\n                <Menu\n                  mode=\"left\"\n                  selectedKey={collapsedKey}\n                  onSelect={setCollapsedKey}\n                  collapsed={collapsed}\n                  onCollapse={setCollapsed}\n                  items={iconMenuItems}\n                />\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { MenuCollapsedDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedNoIconDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function MenuCollapsedNoIconDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedNoIconDemo.js

@@ -0,0 +1,44 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Menu } from "../../../Menu/Menu.js";
+import "../../../index.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { LayoutDashboard, Settings } from "lucide-react";
+//#region packages/react/ui/components/testPage/demos/menu/MenuCollapsedNoIconDemo.tsx
+var MenuCollapsedNoIconDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => MenuCollapsedNoIconDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "9. 无 icon 折叠",
+	description: "收起时无 icon 的菜单项留白占位",
+	order: 9,
+	contentClassName: "space-y-3"
+};
+function MenuCollapsedNoIconDemo() {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		className: "border rounded-lg overflow-hidden inline-flex",
+		children: /* @__PURE__ */ jsx(Menu, {
+			mode: "left",
+			defaultCollapsed: true,
+			expandMode: "multiple",
+			items: [
+				{
+					key: "a",
+					label: "Home",
+					icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" })
+				},
+				{
+					key: "b",
+					label: "Reports"
+				},
+				{
+					key: "c",
+					label: "Settings",
+					icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
+				}
+			]
+		})
+	}) });
+}
+//#endregion
+export { MenuCollapsedNoIconDemo_exports, MenuCollapsedNoIconDemo as default, demoMeta };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuCollapsedNoIconDemo2.js

@@ -0,0 +1,4 @@
+//#region packages/react/ui/components/testPage/demos/menu/MenuCollapsedNoIconDemo.tsx?raw
+var MenuCollapsedNoIconDemo_default = "import { LayoutDashboard, Settings } from 'lucide-react'\nimport { Menu } from '@tc/ui-react/components'\nimport type { DemoMeta } from '../../types'\n\n\nexport const demoMeta = {\n  title: '9. 无 icon 折叠',\n  description: '收起时无 icon 的菜单项留白占位',\n  order: 9,\n  contentClassName: 'space-y-3',\n} satisfies DemoMeta\n\n// ─── 示例数据 ────────────────────────────────────────────────────────────────\n\nexport default function MenuCollapsedNoIconDemo() {\n  return (\n    <>\n      <div className=\"border rounded-lg overflow-hidden inline-flex\">\n                <Menu\n                  mode=\"left\"\n                  defaultCollapsed={true}\n                  expandMode=\"multiple\"\n                  items={[\n                    { key: 'a', label: 'Home', icon: <LayoutDashboard className=\"h-4 w-4\" /> },\n                    { key: 'b', label: 'Reports' },\n                    { key: 'c', label: 'Settings', icon: <Settings className=\"h-4 w-4\" /> },\n                  ]}\n                />\n              </div>\n    </>\n  )\n}\n";
+//#endregion
+export { MenuCollapsedNoIconDemo_default as default };

package/fe/packages/react/ui/components/testPage/demos/menu/MenuJsxDemo.d.ts

@@ -0,0 +1,7 @@
+export declare const demoMeta: {
+    title: string;
+    description: string;
+    order: number;
+    contentClassName: string;
+};
+export default function MenuJsxDemo(): import("react/jsx-runtime").JSX.Element;

package/fe/packages/react/ui/components/testPage/demos/menu/MenuJsxDemo.js

@@ -0,0 +1,64 @@
+import { __exportAll } from "../../../../../../../_virtual/_rolldown/runtime.js";
+import { Menu } from "../../../Menu/Menu.js";
+import "../../../index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { HelpCircle, LayoutDashboard, Package, Settings } from "lucide-react";
+//#region packages/react/ui/components/testPage/demos/menu/MenuJsxDemo.tsx
+var MenuJsxDemo_exports = /* @__PURE__ */ __exportAll({
+	default: () => MenuJsxDemo,
+	demoMeta: () => demoMeta
+});
+var demoMeta = {
+	title: "4. JSX 组合式",
+	description: "不使用 data config，直接组合 Menu.Item / Menu.SubMenu",
+	order: 4,
+	contentClassName: "space-y-3"
+};
+function MenuJsxDemo() {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		className: "w-56 border rounded-lg overflow-hidden",
+		children: /* @__PURE__ */ jsxs(Menu, {
+			mode: "left",
+			defaultSelectedKey: "overview",
+			children: [
+				/* @__PURE__ */ jsx(Menu.Item, {
+					eventKey: "overview",
+					icon: /* @__PURE__ */ jsx(LayoutDashboard, { className: "h-4 w-4" }),
+					children: "Overview"
+				}),
+				/* @__PURE__ */ jsxs(Menu.SubMenu, {
+					eventKey: "manage",
+					label: "Manage",
+					icon: /* @__PURE__ */ jsx(Package, { className: "h-4 w-4" }),
+					children: [/* @__PURE__ */ jsx(Menu.Item, {
+						eventKey: "manage-list",
+						children: "List"
+					}), /* @__PURE__ */ jsx(Menu.Item, {
+						eventKey: "manage-edit",
+						children: "Edit"
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Menu.SubMenu, {
+					eventKey: "settings",
+					label: "Settings",
+					icon: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+					children: [/* @__PURE__ */ jsx(Menu.Item, {
+						eventKey: "jsx-profile",
+						children: "Profile"
+					}), /* @__PURE__ */ jsx(Menu.Item, {
+						eventKey: "jsx-billing",
+						danger: true,
+						children: "Billing"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Menu.Item, {
+					eventKey: "help",
+					icon: /* @__PURE__ */ jsx(HelpCircle, { className: "h-4 w-4" }),
+					children: "Help"
+				})
+			]
+		})
+	}) });
+}
+//#endregion
+export { MenuJsxDemo_exports, MenuJsxDemo as default, demoMeta };