@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/CodeBlock/highlight.js

@@ -0,0 +1,164 @@
+import { h } from "vue";
+import { refractor } from "refractor/core";
+import bash from "refractor/bash";
+import c from "refractor/c";
+import clike from "refractor/clike";
+import css from "refractor/css";
+import diff from "refractor/diff";
+import docker from "refractor/docker";
+import go from "refractor/go";
+import java from "refractor/java";
+import javascript from "refractor/javascript";
+import json from "refractor/json";
+import jsx from "refractor/jsx";
+import kotlin from "refractor/kotlin";
+import markdown from "refractor/markdown";
+import markup from "refractor/markup";
+import php from "refractor/php";
+import python from "refractor/python";
+import ruby from "refractor/ruby";
+import scss from "refractor/scss";
+import sql from "refractor/sql";
+import toml from "refractor/toml";
+import tsx from "refractor/tsx";
+import typescript from "refractor/typescript";
+import yaml from "refractor/yaml";
+// Port of what react-syntax-highlighter 16.1.0 (`PrismLight`) renders for the
+// React CodeBlock's options. The React CodeBlock highlights with refractor,
+// passes a custom `renderer` (which turns `wrapLines` on), and renders every
+// row with `createElement({ useInlineStyles: true, stylesheet: {} })`. The
+// functions below follow `dist/esm/highlight.js` and `dist/esm/create-element.js`
+// for that path, so the emitted <span> tree, class names and text nodes are
+// the same. Options CodeBlock never enables (line numbers, `wrapLongLines`,
+// `lineProps`, inline styles from a stylesheet) are left out.
+// PrismLight's `registerLanguage(name, syntax)` ignores `name` and calls
+// `refractor.register(syntax)`, so registration below mirrors the React list
+// one for one. Quirk kept: React registers `json` again as "jsonc", which
+// adds no "jsonc" language, so `language="jsonc"` renders as plain text.
+// refractor/core is a shared singleton; registering the same syntaxes twice
+// is a no-op.
+const LANGUAGES = [
+    javascript, // javascript
+    jsx, // jsx
+    typescript, // typescript
+    tsx, // tsx
+    markup, // markup
+    css, // css
+    scss, // scss
+    c, // c
+    clike, // clike
+    bash, // bash
+    json, // json
+    json, // jsonc
+    python, // python
+    sql, // sql
+    diff, // diff
+    markdown, // markdown
+    yaml, // yaml
+    toml, // toml
+    docker, // docker
+    java, // java
+    go, // go
+    php, // php
+    ruby, // ruby
+    kotlin, // kotlin
+];
+for (const syntax of LANGUAGES) {
+    refractor.register(syntax);
+}
+const createLineElement = ({ children, className = [] }) => ({
+    // `wrapLines` is on and `lineProps` is `{}`, so only the class names remain
+    type: "element",
+    tagName: "span",
+    properties: { className },
+    children,
+});
+// Every text node becomes a <span> carrying the classes of all its ancestors
+const flattenCodeTree = (tree, className = [], newTree = []) => {
+    for (const node of tree) {
+        if (node.type === "text") {
+            newTree.push(createLineElement({ children: [node], className: [...new Set(className)] }));
+        }
+        else if (node.children) {
+            const classNames = className.concat((node.type === "element" && node.properties?.className) || []);
+            flattenCodeTree(node.children, classNames).forEach((element) => newTree.push(element));
+        }
+    }
+    return newTree;
+};
+// `processLines` with wrapLines = true and no line numbers: splits the
+// flattened spans at every "\n" and groups them into one <span> per line
+const processLines = (codeTree) => {
+    const tree = flattenCodeTree(codeTree);
+    const newTree = [];
+    let lastLineBreakIndex = -1;
+    let index = 0;
+    const createLine = (children, className = []) => createLineElement({ children, className });
+    while (index < tree.length) {
+        const node = tree[index];
+        const value = node.children[0].value;
+        const newLines = value.match(/\n/g);
+        if (newLines) {
+            const splitValue = value.split("\n");
+            splitValue.forEach((text, i) => {
+                const newChild = { type: "text", value: `${text}\n` };
+                if (i === 0) {
+                    // First line: everything since the last break, plus this piece
+                    const children = tree.slice(lastLineBreakIndex + 1, index).concat(createLineElement({ children: [newChild], className: node.properties.className }));
+                    newTree.push(createLine(children));
+                }
+                else if (i === splitValue.length - 1) {
+                    // Last line: carried into the next row, or a row of its own at the end
+                    const next = tree[index + 1];
+                    const stringChild = next && next.children && next.children[0];
+                    const lastLineInPreviousSpan = { type: "text", value: `${text}` };
+                    if (stringChild) {
+                        tree.splice(index + 1, 0, createLineElement({ children: [lastLineInPreviousSpan], className: node.properties.className }));
+                    }
+                    else {
+                        newTree.push(createLine([lastLineInPreviousSpan], node.properties.className));
+                    }
+                }
+                else {
+                    // Neither first nor last
+                    newTree.push(createLine([newChild], node.properties.className));
+                }
+            });
+            lastLineBreakIndex = index;
+        }
+        index++;
+    }
+    if (lastLineBreakIndex !== tree.length - 1) {
+        const children = tree.slice(lastLineBreakIndex + 1, tree.length);
+        if (children && children.length) {
+            newTree.push(createLine(children));
+        }
+    }
+    return newTree;
+};
+// `getCodeTree` for refractor: unknown languages and "text" fall back to one text node
+const getCodeTree = (code, language) => {
+    const defaultCodeValue = [{ type: "text", value: code }];
+    try {
+        return language && language !== "text" ? [refractor.highlight(code, language)] : defaultCodeValue;
+    }
+    catch {
+        return defaultCodeValue;
+    }
+};
+// `createElement` with `useInlineStyles: true` and an empty stylesheet: no
+// class is filtered out, "token" is prepended once more (so tokens read
+// `token token keyword`, as in React), and the style object stays empty.
+const renderNode = (node) => {
+    if (node.type === "text") {
+        return node.value;
+    }
+    const element = node;
+    const classNames = element.properties.className;
+    const startingClassName = classNames.includes("token") ? ["token"] : [];
+    const className = startingClassName.concat(classNames).join(" ") || undefined;
+    return h(element.tagName, { class: className }, element.children.map(renderNode));
+};
+/** The rows react-syntax-highlighter hands to the React CodeBlock's renderer, as vnodes. */
+export const renderHighlightedRows = (code, language) => processLines(getCodeTree(code, language)).map(renderNode);
+//# sourceMappingURL=highlight.js.map

package/dist/es/components/CodeBlock/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/highlight.ts"],"names":[],"mappings":"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","sourcesContent":["import { h, type VNode } from \"vue\"\nimport { refractor } from \"refractor/core\"\nimport bash from \"refractor/bash\"\nimport c from \"refractor/c\"\nimport clike from \"refractor/clike\"\nimport css from \"refractor/css\"\nimport diff from \"refractor/diff\"\nimport docker from \"refractor/docker\"\nimport go from \"refractor/go\"\nimport java from \"refractor/java\"\nimport javascript from \"refractor/javascript\"\nimport json from \"refractor/json\"\nimport jsx from \"refractor/jsx\"\nimport kotlin from \"refractor/kotlin\"\nimport markdown from \"refractor/markdown\"\nimport markup from \"refractor/markup\"\nimport php from \"refractor/php\"\nimport python from \"refractor/python\"\nimport ruby from \"refractor/ruby\"\nimport scss from \"refractor/scss\"\nimport sql from \"refractor/sql\"\nimport toml from \"refractor/toml\"\nimport tsx from \"refractor/tsx\"\nimport typescript from \"refractor/typescript\"\nimport yaml from \"refractor/yaml\"\n\n// Port of what react-syntax-highlighter 16.1.0 (`PrismLight`) renders for the\n// React CodeBlock's options. The React CodeBlock highlights with refractor,\n// passes a custom `renderer` (which turns `wrapLines` on), and renders every\n// row with `createElement({ useInlineStyles: true, stylesheet: {} })`. The\n// functions below follow `dist/esm/highlight.js` and `dist/esm/create-element.js`\n// for that path, so the emitted <span> tree, class names and text nodes are\n// the same. Options CodeBlock never enables (line numbers, `wrapLongLines`,\n// `lineProps`, inline styles from a stylesheet) are left out.\n\n// PrismLight's `registerLanguage(name, syntax)` ignores `name` and calls\n// `refractor.register(syntax)`, so registration below mirrors the React list\n// one for one. Quirk kept: React registers `json` again as \"jsonc\", which\n// adds no \"jsonc\" language, so `language=\"jsonc\"` renders as plain text.\n// refractor/core is a shared singleton; registering the same syntaxes twice\n// is a no-op.\nconst LANGUAGES = [\n  javascript, // javascript\n  jsx, // jsx\n  typescript, // typescript\n  tsx, // tsx\n  markup, // markup\n  css, // css\n  scss, // scss\n  c, // c\n  clike, // clike\n  bash, // bash\n  json, // json\n  json, // jsonc\n  python, // python\n  sql, // sql\n  diff, // diff\n  markdown, // markdown\n  yaml, // yaml\n  toml, // toml\n  docker, // docker\n  java, // java\n  go, // go\n  php, // php\n  ruby, // ruby\n  kotlin, // kotlin\n]\n\nfor (const syntax of LANGUAGES) {\n  refractor.register(syntax)\n}\n\ntype HastText = { type: \"text\"; value: string }\ntype HastElement = {\n  type: \"element\"\n  tagName: string\n  properties: { className?: string[] }\n  children: HastNode[]\n}\ntype HastRoot = { type: \"root\"; children: HastNode[] }\ntype HastNode = HastText | HastElement | HastRoot\n\nconst createLineElement = ({ children, className = [] }: { children: HastNode[]; className?: string[] }): HastElement => ({\n  // `wrapLines` is on and `lineProps` is `{}`, so only the class names remain\n  type: \"element\",\n  tagName: \"span\",\n  properties: { className },\n  children,\n})\n\n// Every text node becomes a <span> carrying the classes of all its ancestors\nconst flattenCodeTree = (tree: HastNode[], className: string[] = [], newTree: HastElement[] = []): HastElement[] => {\n  for (const node of tree) {\n    if (node.type === \"text\") {\n      newTree.push(createLineElement({ children: [node], className: [...new Set(className)] }))\n    } else if (node.children) {\n      const classNames = className.concat((node.type === \"element\" && node.properties?.className) || [])\n      flattenCodeTree(node.children, classNames).forEach((element) => newTree.push(element))\n    }\n  }\n  return newTree\n}\n\n// `processLines` with wrapLines = true and no line numbers: splits the\n// flattened spans at every \"\\n\" and groups them into one <span> per line\nconst processLines = (codeTree: HastNode[]): HastElement[] => {\n  const tree = flattenCodeTree(codeTree)\n  const newTree: HastElement[] = []\n  let lastLineBreakIndex = -1\n  let index = 0\n\n  const createLine = (children: HastNode[], className: string[] = []) => createLineElement({ children, className })\n\n  while (index < tree.length) {\n    const node = tree[index]!\n    const value = (node.children[0] as HastText).value\n    const newLines = value.match(/\\n/g)\n\n    if (newLines) {\n      const splitValue = value.split(\"\\n\")\n      splitValue.forEach((text, i) => {\n        const newChild: HastText = { type: \"text\", value: `${text}\\n` }\n\n        if (i === 0) {\n          // First line: everything since the last break, plus this piece\n          const children = (tree.slice(lastLineBreakIndex + 1, index) as HastNode[]).concat(\n            createLineElement({ children: [newChild], className: node.properties.className }),\n          )\n          newTree.push(createLine(children))\n        } else if (i === splitValue.length - 1) {\n          // Last line: carried into the next row, or a row of its own at the end\n          const next = tree[index + 1]\n          const stringChild = next && next.children && next.children[0]\n          const lastLineInPreviousSpan: HastText = { type: \"text\", value: `${text}` }\n          if (stringChild) {\n            tree.splice(index + 1, 0, createLineElement({ children: [lastLineInPreviousSpan], className: node.properties.className }))\n          } else {\n            newTree.push(createLine([lastLineInPreviousSpan], node.properties.className))\n          }\n        } else {\n          // Neither first nor last\n          newTree.push(createLine([newChild], node.properties.className))\n        }\n      })\n      lastLineBreakIndex = index\n    }\n    index++\n  }\n\n  if (lastLineBreakIndex !== tree.length - 1) {\n    const children = tree.slice(lastLineBreakIndex + 1, tree.length)\n    if (children && children.length) {\n      newTree.push(createLine(children))\n    }\n  }\n\n  return newTree\n}\n\n// `getCodeTree` for refractor: unknown languages and \"text\" fall back to one text node\nconst getCodeTree = (code: string, language: string | undefined): HastNode[] => {\n  const defaultCodeValue: HastNode[] = [{ type: \"text\", value: code }]\n  try {\n    return language && language !== \"text\" ? [refractor.highlight(code, language) as unknown as HastRoot] : defaultCodeValue\n  } catch {\n    return defaultCodeValue\n  }\n}\n\n// `createElement` with `useInlineStyles: true` and an empty stylesheet: no\n// class is filtered out, \"token\" is prepended once more (so tokens read\n// `token token keyword`, as in React), and the style object stays empty.\nconst renderNode = (node: HastNode): VNode | string => {\n  if (node.type === \"text\") {\n    return node.value\n  }\n  const element = node as HastElement\n  const classNames = element.properties.className!\n  const startingClassName = classNames.includes(\"token\") ? [\"token\"] : []\n  const className = startingClassName.concat(classNames).join(\" \") || undefined\n  return h(element.tagName, { class: className }, element.children.map(renderNode))\n}\n\n/** The rows react-syntax-highlighter hands to the React CodeBlock's renderer, as vnodes. */\nexport const renderHighlightedRows = (code: string, language: string | undefined) =>\n  processLines(getCodeTree(code, language)).map(renderNode)\n"]}

package/dist/es/components/CodeBlock/index.js

@@ -0,0 +1,3 @@
+export { CodeBlock, CodeBlockBase, CodeBlockBaseCode, CodeBlockBaseCopyButton, } from "./CodeBlock.js";
+export { CollapsibleCodeBlock } from "./CollapsibleCodeBlock.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/CodeBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CodeBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,uBAAuB,GAGxB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,oBAAoB,EAAkC,MAAM,2BAA2B,CAAA","sourcesContent":["export {\n  CodeBlock,\n  CodeBlockBase,\n  CodeBlockBaseCode,\n  CodeBlockBaseCopyButton,\n  type CodeBlockProps,\n  type CodeTagProps,\n} from \"./CodeBlock.js\"\nexport { CollapsibleCodeBlock, type CollapsibleCodeBlockProps } from \"./CollapsibleCodeBlock.js\"\n"]}

package/dist/es/components/DataTable/DataTable.js

@@ -0,0 +1,296 @@
+import { computed, defineComponent, h, ref, shallowRef, watch } from "vue";
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useVueTable, } from "@tanstack/vue-table";
+import { Checkbox } from "../Checkbox/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../Table/index.js";
+import { DataTablePagination } from "./DataTablePagination.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+// Vue port of packages/ui/src/components/DataTable/DataTable.tsx on
+// @tanstack/vue-table (same table-core as @tanstack/react-table), with the
+// same table options and FlexRender for headers and cells.
+//
+// - `globalFilter`, `columnVisibility` and `rowSelection` are controlled
+//   when the prop is passed (`v-model:global-filter`, ...) and held by the
+//   table otherwise, as in React; `update:*` is emitted with the next value
+//   either way.
+// - `onRowClick` is a function prop (`@row-click` in templates) because its
+//   presence makes the rows interactive (`data-clickable`).
+// - `emptyMessage` is a prop with the `emptyMessage` slot taking precedence.
+// - `enableRowSelection` puts the same checkbox column first, with Checkbox.
+// - React passes only its own props: the root takes the caller's `class`.
+//
+// useReactTable and useVueTable merge options differently: React spreads
+// `state: { ...internal, ...options.state }`, so a key whose value is
+// undefined (a reset global filter) is undefined in `getState()`. vue-table
+// falls back to its internal state for undefined keys, so that internal
+// state starts undefined for those three keys (`initialState`) and no
+// updater ever writes them (each has its own change handler).
+// Id of the checkbox column `enableRowSelection` puts before the columns
+const SELECT_COLUMN_ID = "select";
+const selectColumn = {
+    id: SELECT_COLUMN_ID,
+    header: ({ table }) => h(Checkbox, {
+        "aria-label": "Select all rows",
+        "checked": table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false,
+        "onUpdate:checked": (checked) => table.toggleAllRowsSelected(checked === true),
+    }),
+    cell: ({ row }) => h(Checkbox, {
+        "aria-label": "Select row",
+        "checked": row.getIsSelected(),
+        "onUpdate:checked": (checked) => row.toggleSelected(checked === true),
+    }),
+    enableHiding: false,
+};
+const resolveUpdater = (updater, value) => {
+    return typeof updater === "function" ? updater(value) : updater;
+};
+// One piece of table state: controlled when `controlled()` is defined,
+// otherwise held here, with `onChange` as a notification either way.
+// Successive updaters build on each other instead of on the value read at
+// render.
+const useTableState = (controlled, initial, onChange) => {
+    // Uncontrolled: only the handler writes the state, and it is current at once
+    const internal = shallowRef(initial);
+    // Controlled: the parent may reject or rewrite a change, so accumulate only
+    // within one batch and start every new batch from the current prop
+    let batch = null;
+    const handleChange = (updater) => {
+        const value = controlled();
+        let next;
+        if (value === undefined) {
+            next = resolveUpdater(updater, internal.value);
+            internal.value = next;
+        }
+        else {
+            const pending = batch;
+            const previous = pending && pending.base === value ? pending.next : value;
+            next = resolveUpdater(updater, previous);
+            if (!pending) {
+                queueMicrotask(() => {
+                    batch = null;
+                });
+            }
+            batch = { base: value, next };
+        }
+        onChange(next);
+    };
+    return [() => controlled() ?? internal.value, handleChange];
+};
+const DataTableComponent = defineComponent({
+    name: "DataTable",
+    inheritAttrs: false,
+    props: {
+        /** Column definitions following TanStack Table v8 ColumnDef API */
+        columns: { type: Array, required: true },
+        /** Data array to display */
+        data: { type: Array, required: true },
+        /**
+         * Visual variant
+         * - `"default"`: borderless table with transparent header
+         * - `"bordered"`: rounded border around the table with a tinted header background
+         * @default "default"
+         */
+        variant: { type: String, default: "default" },
+        /** External search/filter string (controlled, `v-model:global-filter`) */
+        globalFilter: { type: String, default: undefined },
+        /** Click handler for rows; makes rows interactive (`@row-click`) */
+        onRowClick: Function,
+        /** Number of rows per page. Set to 0 or Infinity to disable pagination. @default 10 */
+        pageSize: { type: Number, default: 10 },
+        /** Initial sorting state */
+        initialSorting: Array,
+        /** Controlled column visibility (`v-model:column-visibility`) */
+        columnVisibility: Object,
+        /**
+         * Enable row selection: adds a first column with a checkbox per row and a
+         * header checkbox that selects every row. @default false
+         */
+        enableRowSelection: { type: Boolean, default: false },
+        /** Controlled row selection state (`v-model:row-selection`) */
+        rowSelection: Object,
+        /** Custom row ID accessor */
+        getRowId: Function,
+        /** Message shown when there are no rows (or the `emptyMessage` slot). @default "No results." */
+        emptyMessage: {
+            type: [String, Number, Object],
+            default: "No results.",
+        },
+        /** Whether to show pagination controls. Auto-hidden when all rows fit. @default true */
+        showPagination: { type: Boolean, default: true },
+    },
+    emits: {
+        "update:globalFilter": (_value) => true,
+        "update:columnVisibility": (_visibility) => true,
+        "update:rowSelection": (_selection) => true,
+    },
+    setup(props, { attrs, slots, emit }) {
+        const sorting = ref(props.initialSorting ?? []);
+        const shouldPaginate = () => Number.isFinite(props.pageSize) && props.pageSize > 0;
+        const paginationRowModel = getPaginationRowModel();
+        const [globalFilter, handleGlobalFilterChange] = useTableState(() => props.globalFilter, "", (next) => emit("update:globalFilter", next));
+        const [columnVisibility, handleColumnVisibilityChange] = useTableState(() => props.columnVisibility, {}, (next) => emit("update:columnVisibility", next));
+        const [rowSelection, handleRowSelectionChange] = useTableState(() => props.rowSelection, {}, (next) => emit("update:rowSelection", next));
+        const columns = computed(() => (props.enableRowSelection ? [selectColumn, ...props.columns] : props.columns));
+        const isSelectColumn = (id) => props.enableRowSelection && id === SELECT_COLUMN_ID;
+        const table = useVueTable({
+            get data() {
+                return props.data;
+            },
+            get columns() {
+                return columns.value;
+            },
+            state: {
+                get sorting() {
+                    return sorting.value;
+                },
+                get globalFilter() {
+                    return globalFilter();
+                },
+                get columnVisibility() {
+                    return columnVisibility();
+                },
+                get rowSelection() {
+                    return rowSelection();
+                },
+            },
+            initialState: {
+                globalFilter: undefined,
+                columnVisibility: undefined,
+                rowSelection: undefined,
+                ...(shouldPaginate() ? { pagination: { pageIndex: 0, pageSize: props.pageSize } } : {}),
+            },
+            onSortingChange: (updater) => {
+                sorting.value = resolveUpdater(updater, sorting.value);
+            },
+            onGlobalFilterChange: handleGlobalFilterChange,
+            onColumnVisibilityChange: handleColumnVisibilityChange,
+            onRowSelectionChange: handleRowSelectionChange,
+            get getRowId() {
+                const { getRowId } = props;
+                return getRowId ? (originalRow) => getRowId(originalRow) : undefined;
+            },
+            get enableRowSelection() {
+                return props.enableRowSelection;
+            },
+            getCoreRowModel: getCoreRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            // TanStack keeps its pagination model once created, so a disabled
+            // pageSize (0 or Infinity) switches pagination off explicitly, and back on
+            get manualPagination() {
+                return !shouldPaginate();
+            },
+            get getPaginationRowModel() {
+                return shouldPaginate() ? paginationRowModel : undefined;
+            },
+        });
+        // pageSize only seeds initialState, so apply later prop changes to the table
+        watch(() => props.pageSize, (pageSize, previous) => {
+            if (!shouldPaginate())
+                return;
+            if (Number.isFinite(previous) && previous > 0) {
+                table.setPageSize(pageSize);
+            }
+            else {
+                // Page index is not auto-reset while pagination is off (filters may
+                // have changed since), so start over from the first page
+                table.setPagination({ pageIndex: 0, pageSize });
+            }
+        });
+        return () => {
+            const headerGroups = table.getHeaderGroups();
+            const rows = table.getRowModel().rows;
+            const totalRows = table.getFilteredRowModel().rows.length;
+            // Hidden only when every row fits on one page, both at the configured
+            // page size and at the one picked in the rows-per-page select
+            const hasPagination = shouldPaginate() && totalRows > Math.min(props.pageSize, table.getState().pagination.pageSize);
+            const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
+            const { onRowClick } = props;
+            const headerRows = headerGroups.map((headerGroup) => h(TableRow, { key: headerGroup.id }, {
+                default: () => headerGroup.headers.map((header) => {
+                    const align = header.column.columnDef.meta?.align;
+                    // aria-sort goes on one header at a time: the primary sort
+                    // column's real header, not its group placeholders
+                    const sorted = !header.isPlaceholder && header.column.getSortIndex() === 0 ? header.column.getIsSorted() : false;
+                    return h(TableHead, {
+                        "key": header.id,
+                        "colspan": header.colSpan > 1 ? header.colSpan : undefined,
+                        "class": isSelectColumn(header.column.id) ? s.SelectColumn : undefined,
+                        ...(align ? { style: { textAlign: align } } : {}),
+                        "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined,
+                    }, {
+                        default: () => header.isPlaceholder
+                            ? null
+                            : h(FlexRender, { render: header.column.columnDef.header, props: header.getContext() }),
+                    });
+                }),
+            }));
+            const bodyRows = rows.length === 0
+                ? [
+                    h(TableRow, null, {
+                        default: () => [
+                            h(TableCell, { colspan: visibleColumnCount, class: s.EmptyCell }, { default: () => (slots.emptyMessage ? slots.emptyMessage() : props.emptyMessage) }),
+                        ],
+                    }),
+                ]
+                : rows.map((row) => {
+                    const cells = row.getVisibleCells();
+                    return h(TableRow, {
+                        key: row.id,
+                        ...(onRowClick
+                            ? {
+                                // Clickable rows are reached with Tab and activated
+                                // with Enter or Space, like a button
+                                tabindex: 0,
+                                onClick: () => onRowClick(row.original),
+                                onKeydown: (event) => {
+                                    // Keys on a control inside the row are the control's
+                                    if (event.target !== event.currentTarget)
+                                        return;
+                                    if (event.key !== "Enter" && event.key !== " ")
+                                        return;
+                                    event.preventDefault();
+                                    onRowClick(row.original);
+                                },
+                            }
+                            : {}),
+                    }, {
+                        default: () => cells.map((cell) => {
+                            const align = cell.column.columnDef.meta?.align;
+                            return h(TableCell, {
+                                key: cell.id,
+                                ...(align ? { style: { textAlign: align } } : {}),
+                                // A click on a selection checkbox is not a row click
+                                ...(onRowClick && isSelectColumn(cell.column.id)
+                                    ? { onClick: (event) => event.stopPropagation() }
+                                    : {}),
+                            }, {
+                                default: () => h(FlexRender, { render: cell.column.columnDef.cell, props: cell.getContext() }),
+                            });
+                        }),
+                    });
+                });
+            return h("div", {
+                "class": [s.DataTable, attrs.class],
+                "data-variant": props.variant,
+                "data-clickable": onRowClick ? "" : undefined,
+            }, [
+                h("div", { class: s.TableContainer }, [
+                    h(Table, null, {
+                        default: () => [
+                            h(TableHeader, null, { default: () => headerRows }),
+                            h(TableBody, null, { default: () => bodyRows }),
+                        ],
+                    }),
+                ]),
+                props.showPagination && hasPagination ? h(DataTablePagination, { table }) : null,
+            ]);
+        };
+    },
+});
+/**
+ * Data table on TanStack Table v8: sorting, global filter, pagination,
+ * column visibility and row clicks. Typed as a plain component so `h()` and
+ * templates accept it; `DataTableProps<TData>` is the typed props shape.
+ */
+export const DataTable = DataTableComponent;
+//# sourceMappingURL=DataTable.js.map

package/dist/es/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { computed, defineComponent, h, ref, shallowRef, watch, type PropType, type VNode, type VNodeChild } from \"vue\"\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n  type ColumnDef,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/vue-table\"\nimport { Checkbox, type CheckedState } from \"../Checkbox/index.js\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table/index.js\"\nimport { DataTablePagination } from \"./DataTablePagination.js\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\n// Augments table-core, which @tanstack/vue-table re-exports: @plexui/ui\n// augments the same module, so both declarations merge when a project\n// type-checks the two packages together\ndeclare module \"@tanstack/table-core\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: \"left\" | \"center\" | \"right\"\n  }\n}\n\n// Vue port of packages/ui/src/components/DataTable/DataTable.tsx on\n// @tanstack/vue-table (same table-core as @tanstack/react-table), with the\n// same table options and FlexRender for headers and cells.\n//\n// - `globalFilter`, `columnVisibility` and `rowSelection` are controlled\n//   when the prop is passed (`v-model:global-filter`, ...) and held by the\n//   table otherwise, as in React; `update:*` is emitted with the next value\n//   either way.\n// - `onRowClick` is a function prop (`@row-click` in templates) because its\n//   presence makes the rows interactive (`data-clickable`).\n// - `emptyMessage` is a prop with the `emptyMessage` slot taking precedence.\n// - `enableRowSelection` puts the same checkbox column first, with Checkbox.\n// - React passes only its own props: the root takes the caller's `class`.\n//\n// useReactTable and useVueTable merge options differently: React spreads\n// `state: { ...internal, ...options.state }`, so a key whose value is\n// undefined (a reset global filter) is undefined in `getState()`. vue-table\n// falls back to its internal state for undefined keys, so that internal\n// state starts undefined for those three keys (`initialState`) and no\n// updater ever writes them (each has its own change handler).\n\n// Id of the checkbox column `enableRowSelection` puts before the columns\nconst SELECT_COLUMN_ID = \"select\"\n\nconst selectColumn: ColumnDef<any, unknown> = {\n  id: SELECT_COLUMN_ID,\n  header: ({ table }) =>\n    h(Checkbox, {\n      \"aria-label\": \"Select all rows\",\n      \"checked\": table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? \"indeterminate\" : false,\n      \"onUpdate:checked\": (checked: CheckedState) => table.toggleAllRowsSelected(checked === true),\n    }),\n  cell: ({ row }) =>\n    h(Checkbox, {\n      \"aria-label\": \"Select row\",\n      \"checked\": row.getIsSelected(),\n      \"onUpdate:checked\": (checked: CheckedState) => row.toggleSelected(checked === true),\n    }),\n  enableHiding: false,\n}\n\nconst resolveUpdater = <T>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\n// One piece of table state: controlled when `controlled()` is defined,\n// otherwise held here, with `onChange` as a notification either way.\n// Successive updaters build on each other instead of on the value read at\n// render.\nconst useTableState = <T>(\n  controlled: () => T | undefined,\n  initial: T,\n  onChange: (next: T) => void,\n): [() => T, (updater: Updater<T>) => void] => {\n  // Uncontrolled: only the handler writes the state, and it is current at once\n  const internal = shallowRef<T>(initial)\n  // Controlled: the parent may reject or rewrite a change, so accumulate only\n  // within one batch and start every new batch from the current prop\n  let batch: { base: T; next: T } | null = null\n\n  const handleChange = (updater: Updater<T>) => {\n    const value = controlled()\n    let next: T\n    if (value === undefined) {\n      next = resolveUpdater(updater, internal.value)\n      internal.value = next\n    } else {\n      const pending = batch\n      const previous = pending && pending.base === value ? pending.next : value\n      next = resolveUpdater(updater, previous)\n      if (!pending) {\n        queueMicrotask(() => {\n          batch = null\n        })\n      }\n      batch = { base: value, next }\n    }\n    onChange(next)\n  }\n\n  return [() => controlled() ?? internal.value, handleChange]\n}\n\nconst DataTableComponent = defineComponent({\n  name: \"DataTable\",\n  inheritAttrs: false,\n  props: {\n    /** Column definitions following TanStack Table v8 ColumnDef API */\n    columns: { type: Array as PropType<ColumnDef<any, unknown>[]>, required: true },\n    /** Data array to display */\n    data: { type: Array as PropType<any[]>, required: true },\n    /**\n     * Visual variant\n     * - `\"default\"`: borderless table with transparent header\n     * - `\"bordered\"`: rounded border around the table with a tinted header background\n     * @default \"default\"\n     */\n    variant: { type: String as PropType<\"default\" | \"bordered\">, default: \"default\" },\n    /** External search/filter string (controlled, `v-model:global-filter`) */\n    globalFilter: { type: String, default: undefined },\n    /** Click handler for rows; makes rows interactive (`@row-click`) */\n    onRowClick: Function as PropType<(row: any) => void>,\n    /** Number of rows per page. Set to 0 or Infinity to disable pagination. @default 10 */\n    pageSize: { type: Number, default: 10 },\n    /** Initial sorting state */\n    initialSorting: Array as PropType<SortingState>,\n    /** Controlled column visibility (`v-model:column-visibility`) */\n    columnVisibility: Object as PropType<VisibilityState>,\n    /**\n     * Enable row selection: adds a first column with a checkbox per row and a\n     * header checkbox that selects every row. @default false\n     */\n    enableRowSelection: { type: Boolean, default: false },\n    /** Controlled row selection state (`v-model:row-selection`) */\n    rowSelection: Object as PropType<RowSelectionState>,\n    /** Custom row ID accessor */\n    getRowId: Function as PropType<(row: any) => string>,\n    /** Message shown when there are no rows (or the `emptyMessage` slot). @default \"No results.\" */\n    emptyMessage: {\n      type: [String, Number, Object] as PropType<string | number | VNode | null>,\n      default: \"No results.\",\n    },\n    /** Whether to show pagination controls. Auto-hidden when all rows fit. @default true */\n    showPagination: { type: Boolean, default: true },\n  },\n  emits: {\n    \"update:globalFilter\": (_value: string) => true,\n    \"update:columnVisibility\": (_visibility: VisibilityState) => true,\n    \"update:rowSelection\": (_selection: RowSelectionState) => true,\n  },\n  setup(props, { attrs, slots, emit }) {\n    const sorting = ref<SortingState>(props.initialSorting ?? [])\n\n    const shouldPaginate = () => Number.isFinite(props.pageSize) && props.pageSize > 0\n    const paginationRowModel = getPaginationRowModel<any>()\n\n    const [globalFilter, handleGlobalFilterChange] = useTableState<string>(\n      () => props.globalFilter,\n      \"\",\n      (next) => emit(\"update:globalFilter\", next),\n    )\n    const [columnVisibility, handleColumnVisibilityChange] = useTableState<VisibilityState>(\n      () => props.columnVisibility,\n      {},\n      (next) => emit(\"update:columnVisibility\", next),\n    )\n    const [rowSelection, handleRowSelectionChange] = useTableState<RowSelectionState>(\n      () => props.rowSelection,\n      {},\n      (next) => emit(\"update:rowSelection\", next),\n    )\n\n    const columns = computed(() => (props.enableRowSelection ? [selectColumn, ...props.columns] : props.columns))\n    const isSelectColumn = (id: string) => props.enableRowSelection && id === SELECT_COLUMN_ID\n\n    const table = useVueTable<any>({\n      get data() {\n        return props.data\n      },\n      get columns() {\n        return columns.value\n      },\n      state: {\n        get sorting() {\n          return sorting.value\n        },\n        get globalFilter() {\n          return globalFilter()\n        },\n        get columnVisibility() {\n          return columnVisibility()\n        },\n        get rowSelection() {\n          return rowSelection()\n        },\n      },\n      initialState: {\n        globalFilter: undefined,\n        columnVisibility: undefined,\n        rowSelection: undefined,\n        ...(shouldPaginate() ? { pagination: { pageIndex: 0, pageSize: props.pageSize } } : {}),\n      },\n      onSortingChange: (updater) => {\n        sorting.value = resolveUpdater(updater, sorting.value)\n      },\n      onGlobalFilterChange: handleGlobalFilterChange,\n      onColumnVisibilityChange: handleColumnVisibilityChange,\n      onRowSelectionChange: handleRowSelectionChange,\n      get getRowId() {\n        const { getRowId } = props\n        return getRowId ? (originalRow: any) => getRowId(originalRow) : undefined\n      },\n      get enableRowSelection() {\n        return props.enableRowSelection\n      },\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      // TanStack keeps its pagination model once created, so a disabled\n      // pageSize (0 or Infinity) switches pagination off explicitly, and back on\n      get manualPagination() {\n        return !shouldPaginate()\n      },\n      get getPaginationRowModel() {\n        return shouldPaginate() ? paginationRowModel : undefined\n      },\n    })\n\n    // pageSize only seeds initialState, so apply later prop changes to the table\n    watch(\n      () => props.pageSize,\n      (pageSize, previous) => {\n        if (!shouldPaginate()) return\n        if (Number.isFinite(previous) && previous > 0) {\n          table.setPageSize(pageSize)\n        } else {\n          // Page index is not auto-reset while pagination is off (filters may\n          // have changed since), so start over from the first page\n          table.setPagination({ pageIndex: 0, pageSize })\n        }\n      },\n    )\n\n    return () => {\n      const headerGroups = table.getHeaderGroups()\n      const rows = table.getRowModel().rows\n      const totalRows = table.getFilteredRowModel().rows.length\n      // Hidden only when every row fits on one page, both at the configured\n      // page size and at the one picked in the rows-per-page select\n      const hasPagination =\n        shouldPaginate() && totalRows > Math.min(props.pageSize, table.getState().pagination.pageSize)\n      const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n      const { onRowClick } = props\n\n      const headerRows = headerGroups.map((headerGroup) =>\n        h(\n          TableRow,\n          { key: headerGroup.id },\n          {\n            default: () =>\n              headerGroup.headers.map((header) => {\n                const align = header.column.columnDef.meta?.align\n                // aria-sort goes on one header at a time: the primary sort\n                // column's real header, not its group placeholders\n                const sorted =\n                  !header.isPlaceholder && header.column.getSortIndex() === 0 ? header.column.getIsSorted() : false\n                return h(\n                  TableHead,\n                  {\n                    \"key\": header.id,\n                    \"colspan\": header.colSpan > 1 ? header.colSpan : undefined,\n                    \"class\": isSelectColumn(header.column.id) ? s.SelectColumn : undefined,\n                    ...(align ? { style: { textAlign: align } } : {}),\n                    \"aria-sort\": sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined,\n                  },\n                  {\n                    default: () =>\n                      header.isPlaceholder\n                        ? null\n                        : h(FlexRender, { render: header.column.columnDef.header, props: header.getContext() }),\n                  },\n                )\n              }),\n          },\n        ),\n      )\n\n      const bodyRows =\n        rows.length === 0\n          ? [\n              h(TableRow, null, {\n                default: () => [\n                  h(\n                    TableCell,\n                    { colspan: visibleColumnCount, class: s.EmptyCell },\n                    { default: (): VNodeChild => (slots.emptyMessage ? slots.emptyMessage() : props.emptyMessage) },\n                  ),\n                ],\n              }),\n            ]\n          : rows.map((row) => {\n              const cells = row.getVisibleCells()\n              return h(\n                TableRow,\n                {\n                  key: row.id,\n                  ...(onRowClick\n                    ? {\n                        // Clickable rows are reached with Tab and activated\n                        // with Enter or Space, like a button\n                        tabindex: 0,\n                        onClick: () => onRowClick(row.original),\n                        onKeydown: (event: KeyboardEvent) => {\n                          // Keys on a control inside the row are the control's\n                          if (event.target !== event.currentTarget) return\n                          if (event.key !== \"Enter\" && event.key !== \" \") return\n                          event.preventDefault()\n                          onRowClick(row.original)\n                        },\n                      }\n                    : {}),\n                },\n                {\n                  default: () =>\n                    cells.map((cell) => {\n                      const align = cell.column.columnDef.meta?.align\n                      return h(\n                        TableCell,\n                        {\n                          key: cell.id,\n                          ...(align ? { style: { textAlign: align } } : {}),\n                          // A click on a selection checkbox is not a row click\n                          ...(onRowClick && isSelectColumn(cell.column.id)\n                            ? { onClick: (event: MouseEvent) => event.stopPropagation() }\n                            : {}),\n                        },\n                        {\n                          default: () =>\n                            h(FlexRender, { render: cell.column.columnDef.cell, props: cell.getContext() }),\n                        },\n                      )\n                    }),\n                },\n              )\n            })\n\n      return h(\n        \"div\",\n        {\n          \"class\": [s.DataTable, attrs.class],\n          \"data-variant\": props.variant,\n          \"data-clickable\": onRowClick ? \"\" : undefined,\n        },\n        [\n          h(\"div\", { class: s.TableContainer }, [\n            h(Table, null, {\n              default: () => [\n                h(TableHeader, null, { default: () => headerRows }),\n                h(TableBody, null, { default: () => bodyRows }),\n              ],\n            }),\n          ]),\n          props.showPagination && hasPagination ? h(DataTablePagination, { table }) : null,\n        ],\n      )\n    }\n  },\n})\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** Visual variant. @default \"default\" */\n  variant?: \"default\" | \"bordered\"\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Called with the next filter string (`v-model:global-filter`) */\n  \"onUpdate:globalFilter\"?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination. @default 10 */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Called with the next column visibility (`v-model:column-visibility`) */\n  \"onUpdate:columnVisibility\"?: (visibility: VisibilityState) => void\n  /** Enable row selection: a first column of checkboxes, with select-all in the header. @default false */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Called with the next row selection (`v-model:row-selection`) */\n  \"onUpdate:rowSelection\"?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows. @default \"No results.\" */\n  emptyMessage?: string | number | VNode | null\n  /** Class applied to the outermost wrapper */\n  class?: unknown\n  /** Whether to show pagination controls. Auto-hidden when all rows fit. @default true */\n  showPagination?: boolean\n}\n\n/**\n * Data table on TanStack Table v8: sorting, global filter, pagination,\n * column visibility and row clicks. Typed as a plain component so `h()` and\n * templates accept it; `DataTableProps<TData>` is the typed props shape.\n */\nexport const DataTable = DataTableComponent\n"]}

package/dist/es/components/DataTable/DataTableColumnHeader.js

@@ -0,0 +1,44 @@
+import { defineComponent, h } from "vue";
+import { ArrowDownSm, ArrowUpSm, Sort } from "../Icon/index.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+// Vue port of packages/ui/src/components/DataTable/DataTableColumnHeader.tsx.
+// React reads `column`, `title` and `className` only, so the root takes the
+// caller's `class` and nothing else.
+const DataTableColumnHeaderComponent = defineComponent({
+    name: "DataTableColumnHeader",
+    inheritAttrs: false,
+    props: {
+        /** TanStack Table column object (from the header context) */
+        column: { type: Object, required: true },
+        /** Display text for the header */
+        title: { type: String, required: true },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const { column, title } = props;
+            if (!column.getCanSort()) {
+                return h("span", { class: attrs.class }, title);
+            }
+            const sorted = column.getIsSorted();
+            return h("button", {
+                "type": "button",
+                "class": [s.ColumnHeaderButton, attrs.class],
+                "data-sorted": sorted || undefined,
+                "onClick": column.getToggleSortingHandler(),
+            }, [
+                title,
+                h("span", { class: s.SortIcon }, [
+                    sorted === "asc" ? h(ArrowUpSm) : sorted === "desc" ? h(ArrowDownSm) : h(Sort),
+                ]),
+            ]);
+        };
+    },
+});
+/**
+ * Sortable column header: a button that toggles the column's sorting, or
+ * plain text when it cannot sort. Typed as a plain component (no generic
+ * constructor) so `h(DataTableColumnHeader, { column, title })` type-checks
+ * in header renderers.
+ */
+export const DataTableColumnHeader = DataTableColumnHeaderComponent;
+//# sourceMappingURL=DataTableColumnHeader.js.map

package/dist/es/components/DataTable/DataTableColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTableColumnHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,CAAC,MAAM,0DAA0D,CAAA;AAExE,8EAA8E;AAC9E,4EAA4E;AAC5E,qCAAqC;AAErC,MAAM,8BAA8B,GAAG,eAAe,CAAC;IACrD,IAAI,EAAE,uBAAuB;IAC7B,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE;QACL,6DAA6D;QAC7D,MAAM,EAAE,EAAE,IAAI,EAAE,MAAoC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACtE,kCAAkC;QAClC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;KACxC;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;YAE/B,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;gBACzB,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAA;YACjD,CAAC;YAED,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;YAEnC,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,MAAM,EAAE,QAAQ;gBAChB,OAAO,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC;gBAC5C,aAAa,EAAE,MAAM,IAAI,SAAS;gBAClC,SAAS,EAAE,MAAM,CAAC,uBAAuB,EAAE;aAC5C,EACD;gBACE,KAAK;gBACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE;oBAC/B,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;iBAC/E,CAAC;aACH,CACF,CAAA;QACH,CAAC,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAQF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,8BAA8B,CAAA","sourcesContent":["import { defineComponent, h, type PropType } from \"vue\"\nimport type { Column } from \"@tanstack/vue-table\"\nimport { ArrowDownSm, ArrowUpSm, Sort } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\n// Vue port of packages/ui/src/components/DataTable/DataTableColumnHeader.tsx.\n// React reads `column`, `title` and `className` only, so the root takes the\n// caller's `class` and nothing else.\n\nconst DataTableColumnHeaderComponent = defineComponent({\n  name: \"DataTableColumnHeader\",\n  inheritAttrs: false,\n  props: {\n    /** TanStack Table column object (from the header context) */\n    column: { type: Object as PropType<Column<any, any>>, required: true },\n    /** Display text for the header */\n    title: { type: String, required: true },\n  },\n  setup(props, { attrs }) {\n    return () => {\n      const { column, title } = props\n\n      if (!column.getCanSort()) {\n        return h(\"span\", { class: attrs.class }, title)\n      }\n\n      const sorted = column.getIsSorted()\n\n      return h(\n        \"button\",\n        {\n          \"type\": \"button\",\n          \"class\": [s.ColumnHeaderButton, attrs.class],\n          \"data-sorted\": sorted || undefined,\n          \"onClick\": column.getToggleSortingHandler(),\n        },\n        [\n          title,\n          h(\"span\", { class: s.SortIcon }, [\n            sorted === \"asc\" ? h(ArrowUpSm) : sorted === \"desc\" ? h(ArrowDownSm) : h(Sort),\n          ]),\n        ],\n      )\n    }\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData, TValue> = {\n  column: Column<TData, TValue>\n  title: string\n  class?: unknown\n}\n\n/**\n * Sortable column header: a button that toggles the column's sorting, or\n * plain text when it cannot sort. Typed as a plain component (no generic\n * constructor) so `h(DataTableColumnHeader, { column, title })` type-checks\n * in header renderers.\n */\nexport const DataTableColumnHeader = DataTableColumnHeaderComponent\n"]}