@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/steppers/footer-stepper-styles.d.ts

@@ -0,0 +1,28 @@
+export declare const footerStepperStyles: {
+    bullet: import("tailwind-variants").TVReturnType<{
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined, string, {
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined>>;
+    pill: import("tailwind-variants").TVReturnType<{
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined, "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors", {
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined>>;
+};

package/dist/components/steppers/footer-stepper-styles.js

@@ -0,0 +1,16 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/footer-stepper-styles.ts
+var footerStepperStyles = {
+	bullet: tv({
+		base: ["h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600", "hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden"].join(" "),
+		variants: { active: { true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary" } }
+	}),
+	pill: tv({
+		base: "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors",
+		variants: { active: { true: "bg-rui-primary dark:bg-rui-primary" } }
+	})
+};
+//#endregion
+export { footerStepperStyles };
+
+//# sourceMappingURL=footer-stepper-styles.js.map

package/dist/components/steppers/footer-stepper-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-stepper-styles.js","names":[],"sources":["../../../src/components/steppers/footer-stepper-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const footerStepperStyles = {\n  // the current bullet stretches into a short bar, so position reads without relying on color\n  bullet: tv({\n    base: [\n      'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n      'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n    ].join(' '),\n    variants: {\n      active: {\n        true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n"],"mappings":";;AAEA,IAAa,sBAAsB;CAEjC,QAAQ,GAAG;EACT,MAAM,CACJ,6HACA,gGACF,CAAC,CAAC,KAAK,GAAG;EACV,UAAU,EACR,QAAQ,EACN,MAAM,wFACR,EACF;CACF,CAAC;CACD,MAAM,GAAG;EACP,MAAM;EACN,UAAU,EACR,QAAQ,EACN,MAAM,qCACR,EACF;CACF,CAAC;AACH"}

package/dist/components/steppers/stepper-icon-styles.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The step marker: an outlined number ahead, a filled number with a soft halo
+ * for the current step, and a tinted, primary-outlined check behind. A status state shows its
+ * icon at full size in the step's own color.
+ */
+export declare const stepperIconStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors", {
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined>>;

package/dist/components/steppers/stepper-icon-styles.js

@@ -0,0 +1,39 @@
+import { StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/stepper-icon-styles.ts
+/**
+* The step marker: an outlined number ahead, a filled number with a soft halo
+* for the current step, and a tinted, primary-outlined check behind. A status state shows its
+* icon at full size in the step's own color.
+*/
+var stepperIconStyles = tv({
+	base: "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors",
+	variants: {
+		size: {
+			md: "size-6 text-xs [--rui-icon-size:0.875rem]",
+			lg: "size-8 text-sm [--rui-icon-size:1rem]"
+		},
+		state: {
+			[StepperState.inactive]: "border border-rui-outline bg-rui-surface text-rui-text-secondary",
+			[StepperState.active]: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30",
+			[StepperState.done]: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter",
+			[StepperState.error]: "",
+			[StepperState.warning]: "",
+			[StepperState.info]: "",
+			[StepperState.success]: ""
+		},
+		status: {
+			true: "![--rui-icon-size:100%]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		state: StepperState.inactive,
+		status: false
+	}
+});
+//#endregion
+export { stepperIconStyles };
+
+//# sourceMappingURL=stepper-icon-styles.js.map

package/dist/components/steppers/stepper-icon-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-icon-styles.js","names":[],"sources":["../../../src/components/steppers/stepper-icon-styles.ts"],"sourcesContent":["import { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nexport const stepperIconStyles = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,oBAAoB,GAAG;CAClC,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;IACJ,aAAa,WAAW;IAExB,aAAa,SAAS;IAEtB,aAAa,OAAO;IACpB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;IACpB,aAAa,UAAU;EAC1B;EACA,QAAQ;GACN,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO,aAAa;EAAU,QAAQ;CAAM;AAC7E,CAAC"}

package/dist/components/steppers/stepper-styles.d.ts

@@ -0,0 +1,202 @@
+export declare const stepperStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}>>;

package/dist/components/steppers/stepper-styles.js

@@ -0,0 +1,98 @@
+import { StepperOrientation, StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/stepper-styles.ts
+var stepperStyles = tv({
+	slots: {
+		root: "flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+		step: "flex items-center px-6 relative",
+		title: "",
+		subtitle: "",
+		label: "flex flex-col items-start text-left ml-2",
+		divider: "border-rui-divider"
+	},
+	variants: {
+		orientation: {
+			[StepperOrientation.horizontal]: {
+				root: "whitespace-nowrap lg:whitespace-normal",
+				step: "",
+				divider: "block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]"
+			},
+			[StepperOrientation.vertical]: {
+				root: "flex-col inline-flex",
+				step: "px-1 py-3",
+				divider: "block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l"
+			}
+		},
+		state: {
+			[StepperState.inactive]: {
+				step: "text-rui-text-disabled",
+				title: "text-rui-text-secondary",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.active]: {
+				step: "text-rui-text",
+				title: "",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.done]: {
+				step: "text-rui-text",
+				title: "",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.error]: {
+				step: "text-rui-error",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.warning]: {
+				step: "text-rui-warning",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.info]: {
+				step: "text-rui-info",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.success]: {
+				step: "text-rui-success",
+				title: "",
+				subtitle: ""
+			}
+		},
+		iconTop: { true: {
+			step: "flex-col",
+			label: "ml-0 mt-4 items-center text-center"
+		} },
+		custom: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			custom: true,
+			state: StepperState.inactive,
+			class: { step: "text-rui-text" }
+		},
+		{
+			orientation: StepperOrientation.vertical,
+			custom: true,
+			class: { divider: "mx-5" }
+		},
+		{
+			orientation: StepperOrientation.vertical,
+			iconTop: true,
+			class: { divider: "self-center mx-auto" }
+		}
+	],
+	defaultVariants: {
+		state: StepperState.inactive,
+		orientation: StepperOrientation.horizontal,
+		custom: false
+	}
+});
+//#endregion
+export { stepperStyles };
+
+//# sourceMappingURL=stepper-styles.js.map

package/dist/components/steppers/stepper-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-styles.js","names":[],"sources":["../../../src/components/steppers/stepper-styles.ts"],"sourcesContent":["import { StepperOrientation, StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nexport const stepperStyles = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EAEL,MAAM;EACN,MAAM;EACN,OAAO;EACP,UAAU;EACV,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,aAAa;IACV,mBAAmB,aAAa;IAC/B,MAAM;IACN,MAAM;IACN,SAAS;GACX;IACC,mBAAmB,WAAW;IAC7B,MAAM;IAEN,MAAM;IAEN,SAAS;GACX;EACF;EACA,OAAO;IAEJ,aAAa,WAAW;IACvB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,SAAS;IACrB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,OAAO;IACnB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,QAAQ;IACpB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,UAAU;IACtB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,OAAO;IACnB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,UAAU;IACtB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;EACF;EACA,SAAS,EACP,MAAM;GACJ,MAAM;GACN,OAAO;EACT,EACF;EACA,QAAQ;GACN,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GAAE,QAAQ;GAAM,OAAO,aAAa;GAAU,OAAO,EAAE,MAAM,gBAAgB;EAAE;EAE/E;GAAE,aAAa,mBAAmB;GAAU,QAAQ;GAAM,OAAO,EAAE,SAAS,OAAO;EAAE;EACrF;GAAE,aAAa,mBAAmB;GAAU,SAAS;GAAM,OAAO,EAAE,SAAS,sBAAsB;EAAE;CACvG;CACA,iBAAiB;EACf,OAAO,aAAa;EACpB,aAAa,mBAAmB;EAChC,QAAQ;CACV;AACF,CAAC"}

package/dist/components/tables/RuiDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n  type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyBlockerWarning } from '@/composables/sticky-blocker';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * attribute to use from column definitions to display column titles\n   */\n  columnAttr?: keyof TableColumn<T>;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * The text and icon shown when there are no rows, e.g.\n   * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * Why the last read failed. Shown above any rows kept from an earlier read,\n   * or in place of the empty state; `loading` still takes precedence.\n   */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n   * while the table runs past it.\n   */\n  hidePagination?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * keep the pagination bar at the table's end instead of pinning it to the bottom of the view while\n   * the rows run past it, for a table that is one section of a longer page\n   */\n  disableStickyPagination?: boolean;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  hidePagination = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  disableStickyPagination = false,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n  'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    /**\n     * A full-width row after every row, read as the second half of the same item: no divider between\n     * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n     * that would otherwise widen the table. It comes before an open expanded panel.\n     */\n    'row-append': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'error': () => any;\n    /**\n     * Rows under the body, such as a total, rendered in `<tfoot>`. Its cells take the body cells'\n     * padding, height (dense included) and text, under `:where()`, so a cell's own classes still win.\n     */\n    'tfoot': () => any;\n  }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n  const width = get(scrollerWidth);\n  return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  mappedGroups,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n  if (!isNestedTable || paginationModifiers.external)\n    return false;\n  const { limits } = get(paginationData);\n  const sizes = limits ?? toValue(tableDefaults.limits);\n  // the rows themselves, not the pagination total, which is only filled in after mount\n  return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place, since two stuck bars would\n * stack, as does the bar of a table with `disableStickyPagination`.\n */\nconst paginationMayStick = computed<boolean>(() => !disableStickyPagination && !isNestedTable);\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => get(paginationMayStick) && get(showPagination));\nconst paginationStuck = computed<boolean>(() => get(paginationMayStick) && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n  const element: unknown = get(paginationBar)?.$el;\n  return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, paginationStuck);\n\nuseStickyBlockerWarning(paginationBarElement, () => get(paginationMayStick) && get(showPagination), 'The RuiDataTable pagination bar');\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n  const label = cols?.find(column => column.key === key)?.[columnAttr];\n  return {\n    key: String(key),\n    label: label === undefined || label === null ? String(key) : String(label),\n  };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n  return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime, so no reactivity is needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n  await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref): destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  groupLabels,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getGroupSize,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      v-if=\"showMobileSort\"\n      :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <div\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      :tabindex=\"scrollerTabindex\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :style=\"viewportStyle\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"headerLoading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"headerLoading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n          :error=\"error\"\n          :error-title=\"errorTitle\"\n          :retry-text=\"retryText\"\n          @retry=\"emit('retry')\"\n        >\n          <template\n            v-if=\"slots.error\"\n            #error\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"error\" />\n          </template>\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['row-append']\"\n            #row-append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"row-append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot\n          v-if=\"slots.tfoot\"\n          :class=\"ui.tfoot()\"\n          data-id=\"table-tfoot\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n    <div\n      v-if=\"paginationData && showPagination && !isNestedTable\"\n      ref=\"paginationSentinel\"\n      class=\"border-0!\"\n      aria-hidden=\"true\"\n      data-id=\"table-pagination-sentinel\"\n    />\n    <RuiTablePagination\n      v-if=\"paginationData && showPagination\"\n      ref=\"paginationBar\"\n      v-model=\"paginationData\"\n      :class=\"ui.pagination({ sticky: paginationStuck })\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      :data-sticky=\"paginationStuck || undefined\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T, TSort extends TableSortData<T> = TableSortData<T>\">\nimport type { HTMLAttributes } from 'vue';\nimport type { DataTableModelEmits, DataTableModels, GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, { type TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\nimport { getColumnLabel, GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { usePropModel } from '@/composables/prop-model';\nimport { useStickyBlockerWarning } from '@/composables/sticky-blocker';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * The column property holding the header text. Defaults to `label`; a property of the app's\n   * own goes on its column type, e.g. `TableColumn<Row> & { title: string }`.\n   */\n  columnAttr?: string;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * The text and icon shown when there are no rows, e.g.\n   * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * Why the last read failed. Shown above any rows kept from an earlier read,\n   * or in place of the empty state; `loading` still takes precedence.\n   */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n   * while the table runs past it.\n   */\n  hidePagination?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * keep the pagination bar at the table's end instead of pinning it to the bottom of the view while\n   * the rows run past it, for a table that is one section of a longer page\n   */\n  disableStickyPagination?: boolean;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  hidePagination = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  disableStickyPagination = false,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n  modelValue: selectedProp,\n  expanded: expandedProp,\n  pagination: paginationProp,\n  paginationModifiers: paginationModifiersProp,\n  sort: sortProp,\n  sortModifiers: sortModifiersProp,\n  collapsed: collapsedProp,\n} = defineProps<Props<T, IdType> & DataTableModels<T, IdType, TSort> & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props<T, IdType>>>();\n\nconst emit = defineEmits<DataTableModelEmits<T, IdType, TSort> & {\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n  'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    /**\n     * A full-width row after every row, read as the second half of the same item: no divider between\n     * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n     * that would otherwise widen the table. It comes before an open expanded panel.\n     */\n    'row-append': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'error': () => any;\n    /**\n     * Rows under the body, such as a total, rendered in `<tfoot>`. Its cells take the body cells'\n     * padding, height (dense included) and text, under `:where()`, so a cell's own classes still win.\n     */\n    'tfoot': () => any;\n  }\n>>();\n\nconst selectedData = usePropModel('modelValue', () => selectedProp);\nconst expanded = usePropModel('expanded', () => expandedProp);\nconst [pagination, paginationModifiers] = usePropModel<TablePaginationData, 'external'>('pagination', () => paginationProp, () => paginationModifiersProp);\nconst [sort, sortModifiers] = usePropModel<TableSortData<T>, 'external'>('sort', () => sortProp, () => sortModifiersProp);\nconst collapsed = usePropModel('collapsed', () => collapsedProp);\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n  const width = get(scrollerWidth);\n  return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  mappedGroups,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n  if (!isNestedTable || paginationModifiers.external)\n    return false;\n  const { limits } = get(paginationData);\n  const sizes = limits ?? toValue(tableDefaults.limits);\n  // the rows themselves, not the pagination total, which is only filled in after mount\n  return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place, since two stuck bars would\n * stack, as does the bar of a table with `disableStickyPagination`.\n */\nconst paginationMayStick = computed<boolean>(() => !disableStickyPagination && !isNestedTable);\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => get(paginationMayStick) && get(showPagination));\nconst paginationStuck = computed<boolean>(() => get(paginationMayStick) && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n  const element: unknown = get(paginationBar)?.$el;\n  return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, paginationStuck);\n\nuseStickyBlockerWarning(paginationBarElement, () => get(paginationMayStick) && get(showPagination), 'The RuiDataTable pagination bar');\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n  const column = cols?.find(column => column.key === key);\n  return {\n    key: String(key),\n    label: (column && getColumnLabel(column, columnAttr)) ?? String(key),\n  };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n  return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime, so no reactivity is needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n  await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref): destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  groupLabels,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getGroupSize,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      v-if=\"showMobileSort\"\n      :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <div\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      :tabindex=\"scrollerTabindex\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :style=\"viewportStyle\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"headerLoading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"headerLoading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n          :error=\"error\"\n          :error-title=\"errorTitle\"\n          :retry-text=\"retryText\"\n          @retry=\"emit('retry')\"\n        >\n          <template\n            v-if=\"slots.error\"\n            #error\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"error\" />\n          </template>\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['row-append']\"\n            #row-append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"row-append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot\n          v-if=\"slots.tfoot\"\n          :class=\"ui.tfoot()\"\n          data-id=\"table-tfoot\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n    <div\n      v-if=\"paginationData && showPagination && !isNestedTable\"\n      ref=\"paginationSentinel\"\n      class=\"border-0!\"\n      aria-hidden=\"true\"\n      data-id=\"table-pagination-sentinel\"\n    />\n    <RuiTablePagination\n      v-if=\"paginationData && showPagination\"\n      ref=\"paginationBar\"\n      v-model=\"paginationData\"\n      :class=\"ui.pagination({ sticky: paginationStuck })\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      :data-sticky=\"paginationStuck || undefined\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}