dishui 0.0.89 → 0.0.91

package/dist/components/Table/index.d.ts

@@ -1,11 +1,26 @@
 import React from 'react';
+export type TableCardOptions = {
+    /** Applied to each Table.Body grid. */
+    gridClassName?: string;
+    gridStyle?: React.CSSProperties;
+    /** Applied to each body row card. */
+    className?: string;
+    style?: React.CSSProperties;
+    fieldClassName?: string;
+    fieldStyle?: React.CSSProperties;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+};
 export type TableProps = {
     children: React.ReactNode;
+    card?: boolean;
+    cardOptions?: TableCardOptions;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
 } & React.TableHTMLAttributes<HTMLTableElement>;
+declare const Table: ({ children, className, card, cardOptions, onClick, onMouseEnter, onMouseLeave, ...rest }: TableProps) => React.JSX.Element;
 export type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;
 export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 export type TableRowProps = {
@@ -19,6 +34,8 @@ export type TableRowProps = {
 } & Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'>;
 export type TableCellProps = {
     children?: React.ReactNode;
+    /** Visible field label in card body cells only. */
+    label?: React.ReactNode;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     colSpan?: number;
@@ -42,7 +59,8 @@ export type TableHeaderCellProps = {
 } & React.ThHTMLAttributes<HTMLTableCellElement>;
 export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
 export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
-interface TableCompound extends React.FC<TableProps> {
+export type TableCardProps = Omit<TableProps, 'card'>;
+interface TableSubcomponents {
     Caption: React.FC<TableCaptionProps>;
     Footer: React.FC<TableFooterProps>;
     Head: React.FC<TableHeadProps>;
@@ -51,5 +69,8 @@ interface TableCompound extends React.FC<TableProps> {
     Cell: React.FC<TableCellProps>;
     HeaderCell: React.FC<TableHeaderCellProps>;
 }
-declare const TableWithCompounds: TableCompound;
+declare const TableCard: (props: TableCardProps) => React.JSX.Element;
+declare const TableWithCompounds: typeof Table & TableSubcomponents & {
+    Card: typeof TableCard & TableSubcomponents;
+};
 export default TableWithCompounds;

package/dist/components/Table/index.js

@@ -1,117 +1,169 @@
 import { cn as e } from "../../utils/cn.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+/* empty css      */
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Table/index.tsx
-var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseLeave: o, ...s }) => {
-	let c = e("table", r);
-	return /* @__PURE__ */ t("table", {
-		...s,
-		className: c,
-		onClick: i,
-		onMouseEnter: a,
-		onMouseLeave: o,
-		children: n
+var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children: t, className: r = "", card: s = !1, cardOptions: c = o, onClick: l, onMouseEnter: u, onMouseLeave: d, ...f }) => {
+	let p = e("table", s && "blade-table-card", r);
+	return /* @__PURE__ */ n(i.Provider, {
+		value: s ? c : null,
+		children: /* @__PURE__ */ n(a.Provider, {
+			value: !1,
+			children: /* @__PURE__ */ n("table", {
+				role: s ? "table" : void 0,
+				...f,
+				className: p,
+				onClick: l,
+				onMouseEnter: u,
+				onMouseLeave: d,
+				children: t
+			})
+		})
 	});
-}, i = ({ children: n, className: r = "", ...i }) => {
-	let a = e("table-header-group", r);
-	return /* @__PURE__ */ t("thead", {
-		...i,
-		className: a,
-		children: n
-	});
-}, a = ({ children: n, className: r = "", ...i }) => {
-	let a = e("table-row-group", r);
-	return /* @__PURE__ */ t("tbody", {
-		...i,
-		className: a,
-		children: n
-	});
-}, o = ({ children: n, className: r = "", selected: i = !1, onClick: a, onDoubleClick: o, onMouseEnter: s, onMouseLeave: c, ...l }) => {
-	let u = e("table-row", i && "bg-base-200", "hover:bg-base-100", r);
-	return /* @__PURE__ */ t("tr", {
-		className: u,
-		onClick: a,
-		onDoubleClick: o,
-		onMouseEnter: s,
-		onMouseLeave: c,
-		...l,
-		children: n
-	});
-}, s = ({ children: n, className: r = "", onClick: i, colSpan: a, style: o, onDoubleClick: s, onMouseEnter: c, onMouseLeave: l, ...u }) => {
-	let d = e("table-cell", r);
-	return /* @__PURE__ */ t("td", {
-		...u,
-		className: d,
-		onClick: i,
-		colSpan: a,
-		style: o,
-		onDoubleClick: s,
-		onMouseEnter: c,
-		onMouseLeave: l,
-		children: n
-	});
-}, c = ({ children: r, className: i = "", onClick: a, sortable: o = !1, sortDirection: s = null, draggable: c, onDragStart: l, onDragOver: u, onDrop: d, onMouseEnter: f, onMouseLeave: p, ...m }) => {
-	let h = e("table-cell font-medium", o && "cursor-pointer", i);
-	return /* @__PURE__ */ t("th", {
-		...m,
-		className: h,
-		onClick: a,
-		draggable: c,
-		onDragStart: l,
-		onDragOver: u,
-		onDrop: d,
-		onMouseEnter: f,
-		onMouseLeave: p,
-		children: o ? /* @__PURE__ */ n("div", {
-			className: "flex items-center gap-2",
-			children: [r, o && /* @__PURE__ */ t("div", {
-				className: "flex flex-col",
-				children: s === "asc" ? /* @__PURE__ */ t("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					className: "h-4 w-4",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor",
-					children: /* @__PURE__ */ t("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: "2",
-						d: "M5 15l7-7 7 7"
-					})
-				}) : s === "desc" ? /* @__PURE__ */ t("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					className: "h-4 w-4",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor",
-					children: /* @__PURE__ */ t("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: "2",
-						d: "M19 9l-7 7-7-7"
-					})
-				}) : /* @__PURE__ */ t("div", {
-					className: "h-4 w-4 opacity-30",
-					children: /* @__PURE__ */ t("svg", {
+}, c = {
+	Caption: (e) => /* @__PURE__ */ n("caption", { ...e }),
+	Footer: (e) => {
+		let r = t.useContext(i);
+		return /* @__PURE__ */ n("tfoot", {
+			role: r ? "rowgroup" : void 0,
+			...e
+		});
+	},
+	Head: ({ children: r, className: a = "", ...o }) => {
+		let s = t.useContext(i), c = e("table-header-group", a);
+		return /* @__PURE__ */ n("thead", {
+			role: s ? "rowgroup" : void 0,
+			...o,
+			className: c,
+			children: r
+		});
+	},
+	Body: ({ children: r, className: o = "", style: s, ...c }) => {
+		let l = t.useContext(i), u = e("table-row-group", l && "blade-table-card__grid", l?.gridClassName, o);
+		return /* @__PURE__ */ n(a.Provider, {
+			value: !0,
+			children: /* @__PURE__ */ n("tbody", {
+				role: l ? "rowgroup" : void 0,
+				...c,
+				className: u,
+				style: l ? {
+					...l.gridStyle,
+					...s
+				} : s,
+				children: r
+			})
+		});
+	},
+	Row: ({ children: r, className: o = "", selected: s = !1, style: c, onClick: l, onDoubleClick: u, onMouseEnter: d, onMouseLeave: f, ...p }) => {
+		let m = t.useContext(i), h = t.useContext(a) ? m : null, g = e("table-row", s && "bg-base-200", "hover:bg-base-100", h && "blade-table-card__row", h?.className, o);
+		return /* @__PURE__ */ n("tr", {
+			role: m ? "row" : void 0,
+			"data-card-selected": h && s ? "true" : void 0,
+			style: h ? {
+				...h.style,
+				...c
+			} : c,
+			className: g,
+			onClick: l,
+			onDoubleClick: u,
+			onMouseEnter: d,
+			onMouseLeave: f,
+			...p,
+			children: r
+		});
+	},
+	Cell: ({ children: o, label: s, className: c = "", onClick: l, colSpan: u, style: d, onDoubleClick: f, onMouseEnter: p, onMouseLeave: m, ...h }) => {
+		let g = t.useContext(i), _ = t.useContext(a) ? g : null, v = e("table-cell", _ && "blade-table-card__field", _?.fieldClassName, c);
+		return /* @__PURE__ */ r("td", {
+			role: g ? "cell" : void 0,
+			...h,
+			className: v,
+			onClick: l,
+			colSpan: u,
+			style: _ ? {
+				..._.fieldStyle,
+				...d
+			} : d,
+			onDoubleClick: f,
+			onMouseEnter: p,
+			onMouseLeave: m,
+			children: [_ && s != null ? /* @__PURE__ */ n("div", {
+				className: e("blade-table-card__label", _.labelClassName),
+				style: _.labelStyle,
+				children: s
+			}) : null, o]
+		});
+	},
+	HeaderCell: ({ children: o, className: s = "", style: c, onClick: l, sortable: u = !1, sortDirection: d = null, draggable: f, onDragStart: p, onDragOver: m, onDrop: h, onMouseEnter: g, onMouseLeave: _, ...v }) => {
+		let y = t.useContext(i), b = t.useContext(a), x = b ? y : null, S = e("table-cell font-medium", u && "cursor-pointer", x && "blade-table-card__field", x?.fieldClassName, s);
+		return /* @__PURE__ */ n("th", {
+			role: y ? v.scope === "row" || v.scope === "rowgroup" || b && !v.scope ? "rowheader" : "columnheader" : void 0,
+			...v,
+			style: x ? {
+				...x.fieldStyle,
+				...c
+			} : c,
+			className: S,
+			onClick: l,
+			draggable: f,
+			onDragStart: p,
+			onDragOver: m,
+			onDrop: h,
+			onMouseEnter: g,
+			onMouseLeave: _,
+			children: u ? /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2",
+				children: [o, u && /* @__PURE__ */ n("div", {
+					className: "flex flex-col",
+					children: d === "asc" ? /* @__PURE__ */ n("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						className: "h-4 w-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ t("path", {
+						children: /* @__PURE__ */ n("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: "2",
-							d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							d: "M5 15l7-7 7 7"
+						})
+					}) : d === "desc" ? /* @__PURE__ */ n("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						className: "h-4 w-4",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ n("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: "2",
+							d: "M19 9l-7 7-7-7"
+						})
+					}) : /* @__PURE__ */ n("div", {
+						className: "h-4 w-4 opacity-30",
+						children: /* @__PURE__ */ n("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							className: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: "2",
+								d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							})
 						})
 					})
-				})
-			})]
-		}) : r
-	});
-}, l = (e) => /* @__PURE__ */ t("caption", { ...e }), u = (e) => /* @__PURE__ */ t("tfoot", { ...e }), d = r;
-d.Caption = l, d.Footer = u, d.Head = i, d.Body = a, d.Row = o, d.Cell = s, d.HeaderCell = c;
+				})]
+			}) : o
+		});
+	}
+}, l = Object.assign(s, c, { Card: Object.assign((e) => /* @__PURE__ */ n(s, {
+	...e,
+	card: !0
+}), c) });
 //#endregion
-export { d as default };
+export { l as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TableProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nconst Table = ({\n  children,\n  className = '',\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, className);\n\n  return (\n    <table \n      {...rest}\n      className={tableClasses}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </table>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableHead = ({\n  children,\n  className = '',\n  ...rest\n}: TableHeadProps) => {\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead {...rest} className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableBody = ({\n  children,\n  className = '',\n  ...rest\n}: TableBodyProps) => {\n  const baseClass = 'table-row-group';\n  \n  const bodyClasses = cn(baseClass, className);\n\n  return (\n    <tbody {...rest} className={bodyClasses}>\n      {children}\n    </tbody>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    className\n  );\n\n  return (\n    <tr \n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children?: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst TableCell = ({\n  children,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const baseClass = 'table-cell';\n  \n  const cellClasses = cn(baseClass, className);\n\n  return (\n    <td\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.ThHTMLAttributes<HTMLTableCellElement>;\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableHeaderCellProps) => {\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    className\n  );\n\n  return (\n    <th\n      {...rest}\n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {sortable ? <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div> : children}\n    </th>\n  );\n};\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\nconst TableCaption = (props: TableCaptionProps) => <caption {...props} />;\nconst TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\n// 扩展Table组件，添加子组件\ninterface TableCompound extends React.FC<TableProps> {\n  Caption: React.FC<TableCaptionProps>;\n  Footer: React.FC<TableFooterProps>;\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst TableWithCompounds = Table as TableCompound;\nTableWithCompounds.Caption = TableCaption;\nTableWithCompounds.Footer = TableFooter;\nTableWithCompounds.Head = TableHead;\nTableWithCompounds.Body = TableBody;\nTableWithCompounds.Row = TableRow;\nTableWithCompounds.Cell = TableCell;\nTableWithCompounds.HeaderCell = TableHeaderCell;\n\nexport default TableWithCompounds; "],"mappings":";;;;AAWA,IAAM,KAAS,EACb,aACA,eAAY,IACZ,YACA,iBACA,iBACA,GAAG,QACa;CAGhB,IAAM,IAAe,EAAG,SAAW,CAAS;CAE5C,OACE,kBAAC,SAAD;EACE,GAAI;EACJ,WAAW;EACF;EACK;EACA;EAEb;CACI,CAAA;AAEX,GAKM,KAAa,EACjB,aACA,eAAY,IACZ,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,sBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EACzB;CACI,CAAA;AAEX,GAKM,KAAa,EACjB,aACA,eAAY,IACZ,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,mBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EACzB;CACI,CAAA;AAEX,GAgBM,KAAY,EAChB,aACA,eAAY,IACZ,cAAW,IACX,YACA,kBACA,iBACA,iBACA,GAAG,QACgB;CAGnB,IAAM,IAAa,EACjB,aACA,KAAY,eACZ,qBACA,CACF;CAEA,OACE,kBAAC,MAAD;EACE,WAAW;EACF;EACM;EACD;EACA;EACd,GAAI;EAEH;CACC,CAAA;AAER,GAgBM,KAAa,EACjB,aACA,eAAY,IACZ,YACA,YACA,UACA,kBACA,iBACA,iBACA,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,cAAW,CAAS;CAE3C,OACE,kBAAC,MAAD;EACE,GAAI;EACJ,WAAW;EACF;EACA;EACF;EACQ;EACD;EACA;EAEb;CACC,CAAA;AAER,GAqBM,KAAmB,EACvB,aACA,eAAY,IACZ,YACA,cAAW,IACX,mBAAgB,MAGhB,cACA,gBACA,eACA,WAGA,iBACA,iBACA,GAAG,QACuB;CAG1B,IAAM,IAAoB,EACxB,0BACA,KAAY,kBACZ,CACF;CAEA,OACE,kBAAC,MAAD;EACE,GAAI;EACJ,WAAW;EACF;EACE;EACE;EACD;EACJ;EACM;EACA;EAEb,UAAA,IAAW,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACT,GACA,KACC,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAkB,QACjB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAiB,CAAA;IACnF,CAAA,IACH,MAAkB,SACpB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAkB,CAAA;IACpF,CAAA,IAEL,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA,kBAAC,OAAD;MAAK,OAAM;MAA6B,WAAU;MAAU,MAAK;MAAO,SAAQ;MAAY,QAAO;MACjG,UAAA,kBAAC,QAAD;OAAM,eAAc;OAAQ,gBAAe;OAAQ,aAAY;OAAI,GAAE;MAAoD,CAAA;KACtH,CAAA;IACF,CAAA;GAEJ,CAAA,CAEJ;EAAI,CAAA,IAAA;CACP,CAAA;AAER,GAIM,KAAgB,MAA6B,kBAAC,WAAD,EAAS,GAAI,EAAQ,CAAA,GAClE,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAa9D,IAAqB;AAC3B,EAAmB,UAAU,GAC7B,EAAmB,SAAS,GAC5B,EAAmB,OAAO,GAC1B,EAAmB,OAAO,GAC1B,EAAmB,MAAM,GACzB,EAAmB,OAAO,GAC1B,EAAmB,aAAa"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport './Table.css';\n\nexport type TableCardOptions = {\n  /** Applied to each Table.Body grid. */\n  gridClassName?: string;\n  gridStyle?: React.CSSProperties;\n  /** Applied to each body row card. */\n  className?: string;\n  style?: React.CSSProperties;\n  fieldClassName?: string;\n  fieldStyle?: React.CSSProperties;\n  labelClassName?: string;\n  labelStyle?: React.CSSProperties;\n};\n\nconst CardContext = React.createContext<TableCardOptions | null>(null);\nconst BodyContext = React.createContext(false);\nconst defaultCardOptions: TableCardOptions = {};\n\nexport type TableProps = {\n  children: React.ReactNode;\n  card?: boolean;\n  cardOptions?: TableCardOptions;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nconst Table = ({\n  children,\n  className = '',\n  card = false,\n  cardOptions = defaultCardOptions,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, card && 'blade-table-card', className);\n\n  return (\n    <CardContext.Provider value={card ? cardOptions : null}>\n      <BodyContext.Provider value={false}>\n        <table\n          role={card ? 'table' : undefined}\n          {...rest}\n          className={tableClasses}\n          onClick={onClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </table>\n      </BodyContext.Provider>\n    </CardContext.Provider>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableHead = ({\n  children,\n  className = '',\n  ...rest\n}: TableHeadProps) => {\n  const options = React.useContext(CardContext);\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead role={options ? 'rowgroup' : undefined} {...rest} className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableBody = ({\n  children,\n  className = '',\n  style,\n  ...rest\n}: TableBodyProps) => {\n  const options = React.useContext(CardContext);\n  const bodyClasses = cn('table-row-group', options && 'blade-table-card__grid', options?.gridClassName, className);\n\n  return (\n    <BodyContext.Provider value={true}>\n      <tbody\n        role={options ? 'rowgroup' : undefined}\n        {...rest}\n        className={bodyClasses}\n        style={options ? { ...options.gridStyle, ...style } : style}\n      >\n        {children}\n      </tbody>\n    </BodyContext.Provider>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  style,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    options && 'blade-table-card__row',\n    options?.className,\n    className\n  );\n\n  return (\n    <tr\n      role={cardOptions ? 'row' : undefined}\n      data-card-selected={options && selected ? 'true' : undefined}\n      style={options ? { ...options.style, ...style } : style}\n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children?: React.ReactNode;\n  /** Visible field label in card body cells only. */\n  label?: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst TableCell = ({\n  children,\n  label,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const cellClasses = cn('table-cell', options && 'blade-table-card__field', options?.fieldClassName, className);\n\n  return (\n    <td\n      role={cardOptions ? 'cell' : undefined}\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {/* Keep children in a fixed slot so mode/label changes preserve local state. */}\n      {options && label !== null && label !== undefined ? <div className={cn('blade-table-card__label', options.labelClassName)} style={options.labelStyle}>{label}</div> : null}\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.ThHTMLAttributes<HTMLTableCellElement>;\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  style,\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableHeaderCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    options && 'blade-table-card__field',\n    options?.fieldClassName,\n    className\n  );\n\n  return (\n    <th\n      role={cardOptions ? (rest.scope === 'row' || rest.scope === 'rowgroup' || (inBody && !rest.scope) ? 'rowheader' : 'columnheader') : undefined}\n      {...rest}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {sortable ? <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div> : children}\n    </th>\n  );\n};\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\nconst TableCaption = (props: TableCaptionProps) => <caption {...props} />;\nconst TableFooter = (props: TableFooterProps) => {\n  const options = React.useContext(CardContext);\n  return <tfoot role={options ? 'rowgroup' : undefined} {...props} />;\n};\n\n// 扩展Table组件，添加子组件\nexport type TableCardProps = Omit<TableProps, 'card'>;\n\ninterface TableSubcomponents {\n  Caption: React.FC<TableCaptionProps>;\n  Footer: React.FC<TableFooterProps>;\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst subcomponents: TableSubcomponents = {\n  Caption: TableCaption,\n  Footer: TableFooter,\n  Head: TableHead,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n};\n\nconst TableCard = (props: TableCardProps) => <Table {...props} card />;\nconst TableWithCompounds = Object.assign(Table, subcomponents, {\n  Card: Object.assign(TableCard, subcomponents),\n});\n\nexport default TableWithCompounds; "],"mappings":"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"}

package/dist/components/pro/DataTable/DataTable.js

@@ -5,31 +5,33 @@ import { TableBody as r } from "./components/TableBody.js";
 import { TablePagination as i } from "./components/TablePagination.js";
 import { treeRowAnimationStyles as a } from "./treeDataUtils.js";
 import { useDataTableModel as o } from "./useDataTableModel.js";
-import { useColumnDragReorder as s } from "./useColumnDragReorder.js";
-import c, { useCallback as l, useEffect as u, useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useColumnDragReorder as ee } from "./useColumnDragReorder.js";
+import s, { useCallback as c, useEffect as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/pro/DataTable/DataTable.tsx
-function h(h) {
-	let { data: g, columns: _, className: v = "", enableSorting: y = !0, enablePagination: b = !0, enableColumnReordering: x = !0, enableExpanding: S = !1, indentSize: C = 16, toolbar: w = {
+function m(m) {
+	let { data: h, columns: te, className: ne = "", viewMode: g, defaultViewMode: _ = "table", onViewModeChange: v, enableViewSwitcher: y = !1, viewSwitcherLabels: b, cardOptions: x, enableSorting: S = !0, enablePagination: C = !0, enableColumnReordering: w = !0, enableExpanding: re = !1, indentSize: ie = 16, toolbar: ae = {
 		enabled: !1,
 		enableColumnSelector: !1,
 		enableFiltering: !1,
 		enableBulkActions: !1
-	}, customFilterPanel: T, onRowClick: ee, onRowDoubleClick: te, onRowMouseEnter: ne, onRowMouseLeave: re, onCellClick: E, onCellDoubleClick: D, onCellMouseEnter: O, onCellMouseLeave: k, onColumnMouseEnter: A, onColumnMouseLeave: j, extensions: M = [] } = h, { table: N, rowSelection: P, visibilityState: F, columnOrderState: I, setColumnOrderState: L, expandedRowsState: R, handleRowExpand: z, resolveRowId: B, handlePaginationChange: V } = o(h), [H, U] = d(null), { draggedColumnId: W, handleDragStart: G, handleDragOver: K, handleDrop: q } = s(I, L), J = {
+	}, customFilterPanel: oe, onRowClick: se, onRowDoubleClick: ce, onRowMouseEnter: le, onRowMouseLeave: T, onCellClick: E, onCellDoubleClick: D, onCellMouseEnter: O, onCellMouseLeave: k, onColumnMouseEnter: A, onColumnMouseLeave: j, extensions: M = [] } = m, { table: N, rowSelection: P, visibilityState: F, columnOrderState: I, setColumnOrderState: L, expandedRowsState: R, handleRowExpand: z, resolveRowId: B, handlePaginationChange: ue } = o(m), [V, H] = u(null), [U, de] = u(_), W = g ?? U, fe = (e) => {
+		e !== W && (g === void 0 && de(e), v?.(e));
+	}, { draggedColumnId: G, handleDragStart: K, handleDragOver: pe, handleDrop: q } = ee(I, L), J = {
 		table: N,
-		data: g,
+		data: h,
 		rows: N.getRowModel().rows,
 		selectedRows: N.getSelectedRowModel().flatRows.map((e) => e.original),
 		getRowId: B
-	}, [Y, X] = d(null);
-	u(() => {
+	}, [Y, X] = u(null);
+	l(() => {
 		if (!Y) return;
 		let e = () => X(null);
 		return window.addEventListener("click", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("click", e), window.removeEventListener("scroll", e, !0);
 		};
 	}, [Y]);
-	let ie = l((e, t, n, r) => {
+	let me = c((e, t, n, r) => {
 		if (M.length === 0) return;
 		let i = n?.id ?? "", a = {
 			value: n?.id == null ? void 0 : t[n.id],
@@ -62,85 +64,102 @@ function h(h) {
 			break;
 		}
 	}
-	return u(() => {
+	return l(() => {
 		let e = document.createElement("style");
 		return e.textContent = a, document.head.appendChild(e), () => {
 			document.head.removeChild(e);
 		};
-	}, []), /* @__PURE__ */ m("div", {
-		className: `w-full ${v}`,
+	}, []), /* @__PURE__ */ p("div", {
+		className: `w-full ${ne}`,
 		children: [
-			/* @__PURE__ */ p(t, {
-				toolbar: w,
+			/* @__PURE__ */ f(t, {
+				toolbar: ae,
 				table: N,
-				columns: _,
+				columns: te,
 				columnOrderState: I,
 				visibilityState: F,
-				activeFilter: H,
-				setActiveFilter: U,
-				customFilterPanel: T,
-				draggedColumnId: W,
-				handleDragStart: G,
+				activeFilter: V,
+				setActiveFilter: H,
+				customFilterPanel: oe,
+				draggedColumnId: G,
+				handleDragStart: K,
 				toggleColumnVisibility: (e) => {
 					N.getColumn(e)?.toggleVisibility();
 				},
 				rowSelection: P,
-				data: g,
-				enableColumnReordering: x,
-				handleDrop: q
+				data: h,
+				enableColumnReordering: w,
+				handleDrop: q,
+				viewSwitcher: y && $ === void 0 ? /* @__PURE__ */ f("div", {
+					role: "group",
+					"aria-label": b?.label ?? "显示方式",
+					className: "flex items-center gap-1",
+					children: ["table", "card"].map((e) => /* @__PURE__ */ f("button", {
+						type: "button",
+						className: `btn btn-sm ${W === e ? "btn-neutral" : "btn-ghost"}`,
+						"aria-pressed": W === e,
+						disabled: g !== void 0 && !v,
+						onClick: () => fe(e),
+						children: b?.[e] ?? (e === "table" ? "表格" : "卡片")
+					}, e))
+				}) : void 0
 			}),
-			Z.length > 0 && /* @__PURE__ */ p("div", {
+			Z.length > 0 && /* @__PURE__ */ f("div", {
 				className: "flex flex-wrap items-start gap-3 mb-4",
-				children: Z.map((e) => /* @__PURE__ */ p(c.Fragment, { children: e.node }, e.name))
+				children: Z.map((e) => /* @__PURE__ */ f(s.Fragment, { children: e.node }, e.name))
 			}),
-			$ === void 0 ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+			$ === void 0 ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 				className: "overflow-x-auto",
-				children: /* @__PURE__ */ m(e, {
+				children: /* @__PURE__ */ p(e, {
 					className: "table-sm w-full",
-					children: [/* @__PURE__ */ p(n, {
+					card: W === "card",
+					cardOptions: x,
+					children: [/* @__PURE__ */ f(n, {
 						table: N,
 						visibilityState: F,
-						enableSorting: y,
-						enableColumnReordering: x,
-						draggedColumnId: W,
+						enableSorting: S,
+						enableColumnReordering: w,
+						draggedColumnId: G,
 						onColumnMouseEnter: A,
 						onColumnMouseLeave: j,
-						handleDragStart: G,
-						handleDragOver: K,
+						handleDragStart: K,
+						handleDragOver: pe,
 						handleDrop: q
-					}), /* @__PURE__ */ p(r, {
+					}), /* @__PURE__ */ f(r, {
 						table: N,
+						card: W === "card",
+						fieldLabels: x?.fieldLabels,
 						expandedRowsState: R,
-						onRowClick: ee,
-						onRowDoubleClick: te,
-						onRowMouseEnter: ne,
-						onRowMouseLeave: re,
+						onRowClick: se,
+						onRowDoubleClick: ce,
+						onRowMouseEnter: le,
+						onRowMouseLeave: T,
 						onCellClick: E,
 						onCellDoubleClick: D,
 						onCellMouseEnter: O,
 						onCellMouseLeave: k,
-						enableExpanding: S,
-						indentSize: C,
+						enableExpanding: re,
+						indentSize: ie,
 						handleRowExpand: z,
 						extensions: M,
 						extensionApi: J,
 						getRowId: B,
-						onCellContextMenu: ie
+						onCellContextMenu: me
 					})]
 				})
-			}), /* @__PURE__ */ p(i, {
-				enablePagination: b,
+			}), /* @__PURE__ */ f(i, {
+				enablePagination: C,
 				table: N,
-				onPaginationChange: V
-			})] }) : /* @__PURE__ */ p("div", {
+				onPaginationChange: ue
+			})] }) : /* @__PURE__ */ f("div", {
 				className: "w-full",
 				children: $
 			}),
-			Q.length > 0 && /* @__PURE__ */ p("div", {
+			Q.length > 0 && /* @__PURE__ */ f("div", {
 				className: "flex flex-wrap items-center gap-3 mt-4",
-				children: Q.map((e) => /* @__PURE__ */ p(c.Fragment, { children: e.node }, e.name))
+				children: Q.map((e) => /* @__PURE__ */ f(s.Fragment, { children: e.node }, e.name))
 			}),
-			Y && /* @__PURE__ */ p("ul", {
+			Y && /* @__PURE__ */ f("ul", {
 				className: "menu bg-base-100 rounded-box shadow-lg border border-base-300 z-1000 p-1",
 				style: {
 					position: "fixed",
@@ -148,7 +167,7 @@ function h(h) {
 					left: Y.x,
 					minWidth: 160
 				},
-				children: Y.items.map((e) => e.separator ? /* @__PURE__ */ p("li", { className: "my-1 border-t border-base-300" }, e.key) : /* @__PURE__ */ p("li", { children: /* @__PURE__ */ p("button", {
+				children: Y.items.map((e) => e.separator ? /* @__PURE__ */ f("li", { className: "my-1 border-t border-base-300" }, e.key) : /* @__PURE__ */ f("li", { children: /* @__PURE__ */ f("button", {
 					type: "button",
 					disabled: e.disabled,
 					onClick: () => {
@@ -161,6 +180,6 @@ function h(h) {
 	});
 }
 //#endregion
-export { h as default };
+export { m as default };
 
 //# sourceMappingURL=DataTable.js.map