@shwfed/nuxt 0.7.9 → 0.7.11

package/dist/runtime/table-renderers/builtins.js

@@ -1,17 +1,117 @@
 import { jsx, jsxs } from "vue/jsx-runtime";
 import { Icon } from "@iconify/vue";
 import { format as formatDate, isValid, toDate } from "date-fns";
-import { defineComponent } from "vue";
+import { defineComponent, h, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { z } from "zod";
 import { defineTableRenderer } from "./registry.js";
 import { useNuxtApp } from "#app";
+import { expressionC, getLocalizedText, hasVisibleLocaleValue, localeC } from "../utils/coders.js";
 import { Button } from "../components/ui/button/index.js";
 import { Checkbox } from "../components/ui/checkbox/index.js";
+import ExpressionEditor from "../components/ui/expression-editor/ExpressionEditor.vue";
+import { Input } from "../components/ui/input/index.js";
+import Locale from "../components/ui/locale/Locale.vue";
+import { NativeSelect, NativeSelectOption } from "../components/ui/native-select/index.js";
+import { Switch } from "../components/ui/switch/index.js";
 const JUSTIFY_CLASS = {
   left: "justify-start",
   center: "justify-center",
   right: "justify-end"
 };
+const MARKDOWN_EXPRESSION_EXAMPLE = "{{ expression }}";
+const TABLE_RENDERER_CONFIG_MESSAGES = {
+  zh: {
+    "copyable": "\u53EF\u590D\u5236",
+    "copyable-description": "\u4E3A\u975E\u7A7A\u5355\u5143\u683C\u663E\u793A\u590D\u5236\u64CD\u4F5C\u3002",
+    "copy-cell-value": "\u590D\u5236\u5355\u5143\u683C\u5185\u5BB9",
+    "copy-expression": "\u590D\u5236\u8868\u8FBE\u5F0F",
+    "copy-expression-description": "\u590D\u5236\u65F6\u4F7F\u7528\u7684 CEL \u8868\u8FBE\u5F0F\u3002\u53D8\u91CF\uFF1Arow\u3001index\u3002",
+    "copy-expression-placeholder": "\u8F93\u5165\u590D\u5236 CEL \u8868\u8FBE\u5F0F",
+    "align": "\u5BF9\u9F50",
+    "align-left": "\u5DE6\u5BF9\u9F50",
+    "align-center": "\u5C45\u4E2D",
+    "align-right": "\u53F3\u5BF9\u9F50",
+    "selection-cross-page": "\u8DE8\u9875\u5168\u9009",
+    "format": "\u683C\u5F0F",
+    "preview": "\u9884\u89C8",
+    "markdown": "Markdown",
+    "markdown-description": "\u652F\u6301 Markdown \u7F16\u8F91\uFF0C\u652F\u6301\u5728 {expression} \u4E2D\u6C42\u503C\uFF1B\u5168\u90E8\u8BED\u8A00\u7559\u7A7A\u65F6\u56DE\u9000\u5230\u5355\u5143\u683C\u503C\u3002",
+    "no-options": "\u65E0\u53EF\u914D\u7F6E\u9879\u3002",
+    "select-all-rows-on-page": "\u9009\u62E9\u5F53\u524D\u9875\u5168\u90E8\u884C",
+    "select-all-rows": "\u9009\u62E9\u5168\u90E8\u884C",
+    "expand-row": "\u5C55\u5F00\u884C",
+    "collapse-row": "\u6536\u8D77\u884C",
+    "expand-all-rows": "\u5C55\u5F00\u5168\u90E8\u884C",
+    "collapse-all-rows": "\u6536\u8D77\u5168\u90E8\u884C"
+  },
+  ja: {
+    "copyable": "\u30B3\u30D4\u30FC\u53EF\u80FD",
+    "copyable-description": "\u7A7A\u3067\u306A\u3044\u30BB\u30EB\u306B\u30B3\u30D4\u30FC\u64CD\u4F5C\u3092\u8868\u793A\u3057\u307E\u3059\u3002",
+    "copy-cell-value": "\u30BB\u30EB\u306E\u5185\u5BB9\u3092\u30B3\u30D4\u30FC",
+    "copy-expression": "\u30B3\u30D4\u30FC\u5F0F",
+    "copy-expression-description": "\u30B3\u30D4\u30FC\u6642\u306B\u4F7F\u3046 CEL \u5F0F\u3067\u3059\u3002\u5909\u6570: row\u3001index\u3002",
+    "copy-expression-placeholder": "\u30B3\u30D4\u30FC\u7528 CEL \u5F0F\u3092\u5165\u529B",
+    "align": "\u914D\u7F6E",
+    "align-left": "\u5DE6\u5BC4\u305B",
+    "align-center": "\u4E2D\u592E\u63C3\u3048",
+    "align-right": "\u53F3\u5BC4\u305B",
+    "selection-cross-page": "\u30DA\u30FC\u30B8\u3092\u307E\u305F\u3044\u3067\u5168\u9078\u629E",
+    "format": "\u30D5\u30A9\u30FC\u30DE\u30C3\u30C8",
+    "preview": "\u30D7\u30EC\u30D3\u30E5\u30FC",
+    "markdown": "Markdown",
+    "markdown-description": "Markdown \u3067\u7DE8\u96C6\u3067\u304D\u3001{expression} \u3082\u5229\u7528\u3067\u304D\u307E\u3059\u3002\u3059\u3079\u3066\u7A7A\u6B04\u306A\u3089\u30BB\u30EB\u5024\u306B\u623B\u308A\u307E\u3059\u3002",
+    "no-options": "\u8A2D\u5B9A\u53EF\u80FD\u306A\u9805\u76EE\u306F\u3042\u308A\u307E\u305B\u3093\u3002",
+    "select-all-rows-on-page": "\u73FE\u5728\u306E\u30DA\u30FC\u30B8\u306E\u3059\u3079\u3066\u306E\u884C\u3092\u9078\u629E",
+    "select-all-rows": "\u3059\u3079\u3066\u306E\u884C\u3092\u9078\u629E",
+    "expand-row": "\u884C\u3092\u5C55\u958B",
+    "collapse-row": "\u884C\u3092\u6298\u308A\u305F\u305F\u3080",
+    "expand-all-rows": "\u3059\u3079\u3066\u306E\u884C\u3092\u5C55\u958B",
+    "collapse-all-rows": "\u3059\u3079\u3066\u306E\u884C\u3092\u6298\u308A\u305F\u305F\u3080"
+  },
+  en: {
+    "copyable": "Copyable",
+    "copyable-description": "Show a copy action for non-empty cells.",
+    "copy-cell-value": "Copy cell value",
+    "copy-expression": "Copy expression",
+    "copy-expression-description": "CEL expression used when copying. Variables: row, index.",
+    "copy-expression-placeholder": "Enter a copy CEL expression",
+    "align": "Align",
+    "align-left": "Left",
+    "align-center": "Center",
+    "align-right": "Right",
+    "selection-cross-page": "Cross page select-all",
+    "format": "Format",
+    "preview": "Preview",
+    "markdown": "Markdown",
+    "markdown-description": "Supports Markdown and {expression}; if every locale is blank, use the cell value.",
+    "no-options": "No options.",
+    "select-all-rows-on-page": "Select all rows on page",
+    "select-all-rows": "Select all rows",
+    "expand-row": "Expand row",
+    "collapse-row": "Collapse row",
+    "expand-all-rows": "Expand all rows",
+    "collapse-all-rows": "Collapse all rows"
+  }
+};
+function useTableRendererConfigI18n() {
+  return useI18n({
+    inheritLocale: true,
+    messages: TABLE_RENDERER_CONFIG_MESSAGES
+  });
+}
+function getTableRendererConfigText(key) {
+  const language = navigator?.language?.toLocaleLowerCase() ?? "zh";
+  if (language.startsWith("ja")) {
+    return TABLE_RENDERER_CONFIG_MESSAGES.ja[key];
+  }
+  if (language.startsWith("en")) {
+    return TABLE_RENDERER_CONFIG_MESSAGES.en[key];
+  }
+  return TABLE_RENDERER_CONFIG_MESSAGES.zh[key];
+}
+const TEXT_RENDERER_COPY_EXPRESSION_C = expressionC(/.+/, { row: "dyn", index: "int" }).optional();
+const DATE_RENDERER_PREVIEW_DATE = new Date(2025, 8, 30, 13, 59, 43);
 const TableRendererTextConfig = defineComponent({
   name: "TableRendererTextConfig",
   props: {
@@ -21,62 +121,76 @@ const TableRendererTextConfig = defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
+    const { t } = useTableRendererConfigI18n();
+    const copyExpressionEditor = ref(null);
     const value = () => props.modelValue ?? {};
     const update = (patch) => {
       emit("update:modelValue", { ...value(), ...patch });
     };
+    function clearValidation() {
+      copyExpressionEditor.value?.clearValidation();
+    }
+    function validate() {
+      return copyExpressionEditor.value ? copyExpressionEditor.value.validate() : true;
+    }
+    expose({
+      clearValidation,
+      validate
+    });
     return () => /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: [
-      /* @__PURE__ */ jsxs("label", { class: "flex items-center gap-2 select-none", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: Boolean(value().copyable),
-            onInput: (e) => {
-              if (e.target instanceof HTMLInputElement)
-                update({ copyable: e.target.checked });
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: "Copyable" })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          "data-field-key": "rendererCopyable",
+          class: "flex items-center justify-between gap-3 py-1",
+          children: [
+            /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { class: "text-sm font-medium text-zinc-800", children: t("copyable") }),
+              /* @__PURE__ */ jsx("span", { class: "text-xs text-zinc-500", children: t("copyable-description") })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                modelValue: Boolean(value().copyable),
+                "onUpdate:modelValue": (...args) => update({ copyable: args[0] === true })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ExpressionEditor,
+        {
+          ref: copyExpressionEditor,
+          "data-field-key": "rendererCopyExpression",
+          modelValue: value().copyExpression ?? void 0,
+          label: t("copy-expression"),
+          description: t("copy-expression-description"),
+          placeholder: t("copy-expression-placeholder"),
+          schema: TEXT_RENDERER_COPY_EXPRESSION_C,
+          "onUpdate:modelValue": (nextValue) => update({ copyExpression: nextValue ?? null })
+        }
+      ),
       /* @__PURE__ */ jsxs("label", { class: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { class: "text-xs text-zinc-500", children: "Copy expression" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            class: "border border-zinc-200 rounded px-2 py-1 text-sm",
-            placeholder: "CEL expression (row, index)",
-            value: value().copyExpression ?? "",
-            onInput: (e) => {
-              if (e.target instanceof HTMLInputElement)
-                update({ copyExpression: e.target.value || null });
+        /* @__PURE__ */ jsx("span", { class: "text-xs font-medium text-zinc-500", children: t("align") }),
+        h(NativeSelect, {
+          "data-field-key": "rendererAlign",
+          "modelValue": value().align ?? "left",
+          "class": "w-full",
+          "onUpdate:modelValue": (...args) => {
+            const nextValue = args[0];
+            if (nextValue === "left" || nextValue === "center" || nextValue === "right") {
+              update({ align: nextValue });
             }
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("label", { class: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { class: "text-xs text-zinc-500", children: "Align" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            class: "border border-zinc-200 rounded px-2 py-1 text-sm bg-white",
-            value: value().align ?? "left",
-            onChange: (e) => {
-              if (e.target instanceof HTMLSelectElement) {
-                const v = e.target.value;
-                if (v === "left" || v === "center" || v === "right")
-                  update({ align: v });
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "left", children: "left" }),
-              /* @__PURE__ */ jsx("option", { value: "center", children: "center" }),
-              /* @__PURE__ */ jsx("option", { value: "right", children: "right" })
-            ]
-          }
-        )
+        }, {
+          default: () => [
+            h(NativeSelectOption, { value: "left" }, { default: () => t("align-left") }),
+            h(NativeSelectOption, { value: "center" }, { default: () => t("align-center") }),
+            h(NativeSelectOption, { value: "right" }, { default: () => t("align-right") })
+          ]
+        })
       ] })
     ] });
   }
@@ -91,24 +205,32 @@ const TableRendererSelectionConfig = defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { t } = useTableRendererConfigI18n();
     const value = () => props.modelValue ?? {};
     const update = (patch) => {
       emit("update:modelValue", { ...value(), ...patch });
     };
-    return () => /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: /* @__PURE__ */ jsxs("label", { class: "flex items-center gap-2 select-none", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: Boolean(value().crossPage),
-          onInput: (e) => {
-            if (e.target instanceof HTMLInputElement)
-              update({ crossPage: e.target.checked });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { children: "Cross page select-all" })
-    ] }) });
+    return () => /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        "data-field-key": "rendererSelectionCrossPage",
+        class: "flex items-center gap-2 select-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: Boolean(value().crossPage),
+              onInput: (e) => {
+                if (e.target instanceof HTMLInputElement)
+                  update({ crossPage: e.target.checked });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: t("selection-cross-page") })
+        ]
+      }
+    ) });
   }
 });
 const TableRendererDateConfig = defineComponent({
@@ -120,26 +242,35 @@ const TableRendererDateConfig = defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
+    const { t } = useTableRendererConfigI18n();
     const value = () => props.modelValue ?? {};
     const update = (patch) => {
       emit("update:modelValue", { ...value(), ...patch });
     };
-    return () => /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: /* @__PURE__ */ jsxs("label", { class: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("span", { class: "text-xs text-zinc-500", children: "Format" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          class: "border border-zinc-200 rounded px-2 py-1 text-sm",
-          placeholder: "yyyy-MM-dd",
-          value: value().format ?? "",
-          onInput: (e) => {
-            if (e.target instanceof HTMLInputElement)
-              update({ format: e.target.value });
+    expose({
+      clearValidation: () => void 0,
+      validate: () => true
+    });
+    return () => /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: [
+      /* @__PURE__ */ jsxs("label", { class: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { class: "text-xs font-medium text-zinc-500", children: t("format") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "data-field-key": "rendererDateFormat",
+            placeholder: "yyyy-MM-dd",
+            modelValue: value().format ?? "",
+            "onUpdate:modelValue": (nextValue) => update({ format: String(nextValue) })
           }
-        }
-      )
-    ] }) });
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { class: "rounded-md bg-zinc-50/70 px-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { class: "text-xs font-medium text-zinc-500", children: t("preview") }),
+        /* @__PURE__ */ jsx("div", { class: "mt-1 font-mono text-sm text-zinc-700", children: formatTableRendererDate(DATE_RENDERER_PREVIEW_DATE, value().format ?? "yyyy-MM-dd") }),
+        /* @__PURE__ */ jsx("div", { class: "mt-1 text-xs text-zinc-400", children: "2025-09-30 13:59:43" })
+      ] })
+    ] });
   }
 });
 const TableRendererMarkdownConfig = defineComponent({
@@ -151,35 +282,103 @@ const TableRendererMarkdownConfig = defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
+    const { t } = useTableRendererConfigI18n();
     const value = () => props.modelValue ?? {};
     const update = (patch) => {
       emit("update:modelValue", { ...value(), ...patch });
     };
-    return () => /* @__PURE__ */ jsx("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: /* @__PURE__ */ jsxs("label", { class: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx("span", { class: "text-xs text-zinc-500", children: "Source" }),
+    expose({
+      clearValidation: () => void 0,
+      validate: () => true
+    });
+    return () => /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-3 text-sm text-zinc-700", children: [
+      /* @__PURE__ */ jsxs("div", { class: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { class: "text-xs font-medium text-zinc-500", children: t("markdown") }),
+        /* @__PURE__ */ jsx("span", { class: "text-sm text-zinc-500", children: t("markdown-description", { expression: MARKDOWN_EXPRESSION_EXAMPLE }) })
+      ] }),
       /* @__PURE__ */ jsx(
-        "textarea",
+        Locale,
         {
-          class: "border border-zinc-200 rounded px-2 py-1 text-sm min-h-20",
-          placeholder: "Markdown source (leave empty to use cell value)",
-          value: value().source ?? "",
-          onInput: (e) => {
-            if (e.target instanceof HTMLTextAreaElement)
-              update({ source: e.target.value || void 0 });
-          }
+          "data-field-key": "rendererMarkdownSource",
+          "data-slot": "table-renderer-markdown-source-locale",
+          multiline: true,
+          modelValue: value().source,
+          "onUpdate:modelValue": (nextValue) => update({ source: hasVisibleLocaleValue(nextValue) ? nextValue : void 0 })
         }
       )
-    ] }) });
+    ] });
+  }
+});
+const TableRendererMarkdownCell = defineComponent({
+  name: "TableRendererMarkdownCell",
+  props: {
+    source: {
+      type: Array,
+      default: void 0
+    },
+    fallbackSource: {
+      type: String,
+      required: true
+    },
+    row: {
+      default: void 0
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { locale } = useI18n();
+    const { $md } = useNuxtApp();
+    return () => {
+      const source = getLocalizedText(props.source, locale.value) ?? props.fallbackSource;
+      return /* @__PURE__ */ jsx("div", { class: "relative w-full py-2 px-1 flex items-center justify-center text-xs", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          class: "prose prose-zinc text-xs",
+          innerHTML: $md.inline`${source}`({
+            row: props.row,
+            index: BigInt(props.index),
+            id: props.id
+          })
+        }
+      ) });
+    };
   }
 });
 const NoOptionsConfig = defineComponent({
   name: "TableRendererNoOptionsConfig",
   emits: ["update:modelValue"],
-  setup() {
-    return () => /* @__PURE__ */ jsx("div", { class: "text-xs text-zinc-500", children: "No options." });
+  setup(_props, { expose }) {
+    const { t } = useTableRendererConfigI18n();
+    expose({
+      clearValidation: () => void 0,
+      validate: () => true
+    });
+    return () => /* @__PURE__ */ jsx("div", { class: "text-xs text-zinc-500", children: t("no-options") });
   }
 });
+function formatTableRendererDate(value, formatPattern) {
+  let date = null;
+  try {
+    date = typeof value === "string" || typeof value === "number" || value instanceof Date ? toDate(value) : null;
+  } catch {
+  }
+  if (!date || !isValid(date)) {
+    return "-";
+  }
+  try {
+    return formatDate(date, formatPattern);
+  } catch {
+    return "-";
+  }
+}
 defineTableRenderer(
   "table.renderer.text",
   {
@@ -222,6 +421,7 @@ defineTableRenderer(
             options.copyable && !isEmpty ? /* @__PURE__ */ jsx(
               Button,
               {
+                "aria-label": getTableRendererConfigText("copy-cell-value"),
                 class: "p-1 w-6 h-6 flex items-center justify-center right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-0 absolute transition-opacity duration-180",
                 size: "xs",
                 onClick: onCopy,
@@ -232,7 +432,10 @@ defineTableRenderer(
         }
       );
     },
-    config: TableRendererTextConfig
+    config: TableRendererTextConfig,
+    columnDefOverrides: {
+      sortingFn: "alphanumeric"
+    }
   }
 );
 defineTableRenderer(
@@ -248,7 +451,7 @@ defineTableRenderer(
           id: `${ctx.column.id}-${ctx.row.id}`,
           disabled: !ctx.row.getCanSelect(),
           modelValue: ctx.row.getIsSelected(),
-          "onUpdate:modelValue": ctx.row.getToggleSelectedHandler(),
+          "onUpdate:modelValue": (value) => ctx.row.toggleSelected(value === true),
           class: "w-4 h-4"
         }
       ) });
@@ -259,28 +462,23 @@ defineTableRenderer(
       const crossPage = options.crossPage ?? false;
       const indeterminate = crossPage ? ctx.table.getIsSomePageRowsSelected() : ctx.table.getIsSomeRowsSelected();
       const checked = crossPage ? ctx.table.getIsAllPageRowsSelected() : ctx.table.getIsAllRowsSelected();
-      const onInput = crossPage ? ctx.table.getToggleAllPageRowsSelectedHandler() : ctx.table.getToggleAllRowsSelectedHandler();
-      return /* @__PURE__ */ jsx("div", { class: "inline-flex items-center", children: /* @__PURE__ */ jsxs("label", { class: "flex items-center cursor-pointer relative", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: `${ctx.column.id}-header`,
-            type: "checkbox",
-            checked,
-            class: [
-              "peer h-4 w-4 cursor-pointer transition-colors duration-180 appearance-none rounded bg-white",
-              "border border-[color-mix(in_srgb,var(--primary)_10%,#00000033)] not-checked-group-hover:border-[color-mix(in_srgb,var(--primary)_20%,#00000033)]",
-              "not-checked-group-hover:bg-[color-mix(in_srgb,var(--primary)_5%,#00000011)] checked:border-(--primary) checked:bg-(--primary)"
-            ],
-            ref: (el) => {
-              if (el instanceof HTMLInputElement)
-                el.indeterminate = Boolean(indeterminate);
-            },
-            onInput: (e) => onInput(e)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { class: "absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-20-filled", class: "text-white text-xs" }) })
-      ] }) });
+      const modelValue = checked ? true : indeterminate ? "indeterminate" : false;
+      return /* @__PURE__ */ jsx("div", { class: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: `${ctx.column.id}-header`,
+          modelValue,
+          "aria-label": crossPage ? getTableRendererConfigText("select-all-rows-on-page") : getTableRendererConfigText("select-all-rows"),
+          "onUpdate:modelValue": (value) => {
+            if (crossPage) {
+              ctx.table.toggleAllPageRowsSelected(value === true);
+              return;
+            }
+            ctx.table.toggleAllRowsSelected(value === true);
+          },
+          class: "w-4 h-4 bg-white"
+        }
+      ) });
     },
     config: TableRendererSelectionConfig,
     columnDefOverrides: {
@@ -300,6 +498,7 @@ defineTableRenderer(
         {
           variant: "ghost",
           class: "cursor-pointer hover:bg-transparent text-lg",
+          "aria-label": ctx.row.getIsExpanded() ? getTableRendererConfigText("collapse-row") : getTableRendererConfigText("expand-row"),
           onClick: ctx.row.getToggleExpandedHandler(),
           children: /* @__PURE__ */ jsx(Icon, { icon: ctx.row.getIsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
         }
@@ -311,6 +510,7 @@ defineTableRenderer(
         variant: "ghost",
         size: "xs",
         class: "cursor-pointer hover:bg-transparent text-lg",
+        "aria-label": ctx.table.getIsAllRowsExpanded() ? getTableRendererConfigText("collapse-all-rows") : getTableRendererConfigText("expand-all-rows"),
         onClick: ctx.table.getToggleAllRowsExpandedHandler(),
         children: /* @__PURE__ */ jsx(Icon, { icon: ctx.table.getIsAllRowsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
       }
@@ -351,20 +551,14 @@ defineTableRenderer(
   },
   {
     cell: ({ ctx, options }) => {
-      const value = ctx.cell.getValue();
-      let d = null;
-      try {
-        d = typeof value === "string" || typeof value === "number" || value instanceof Date ? toDate(value) : null;
-      } catch {
-      }
-      const date = isValid(d) ? d : null;
-      const formatted = date ? formatDate(date, options.format ?? "yyyy-MM-dd") : "-";
+      const formatted = formatTableRendererDate(ctx.cell.getValue(), options.format ?? "yyyy-MM-dd");
+      const hasDate = formatted !== "-";
       return /* @__PURE__ */ jsx(
         "div",
         {
           class: [
             "relative w-full py-2 px-1 flex items-center justify-center text-xs",
-            date ? "text-zinc-600" : "text-zinc-300 select-none"
+            hasDate ? "text-zinc-600" : "text-zinc-300 select-none"
           ],
           children: formatted
         }
@@ -376,23 +570,20 @@ defineTableRenderer(
 defineTableRenderer(
   "table.renderer.markdown",
   {
-    source: z.string().optional()
+    source: localeC.optional()
   },
   {
     cell: ({ ctx, options }) => {
-      const { $md } = useNuxtApp();
-      const source = options.source ?? String(ctx.cell.getValue());
-      return /* @__PURE__ */ jsx("div", { class: "relative w-full py-2 px-1 flex items-center justify-center text-xs", children: /* @__PURE__ */ jsx(
-        "span",
+      return /* @__PURE__ */ jsx(
+        TableRendererMarkdownCell,
         {
-          class: "prose prose-zinc text-xs",
-          innerHTML: $md.inline`${source}`({
-            row: ctx.row.original,
-            index: BigInt(ctx.row.index),
-            id: ctx.column.id
-          })
+          source: options.source,
+          fallbackSource: String(ctx.cell.getValue()),
+          row: ctx.row.original,
+          index: ctx.row.index,
+          id: ctx.column.id
         }
-      ) });
+      );
     },
     config: TableRendererMarkdownConfig
   }

package/dist/runtime/table-renderers/registry.d.ts

@@ -2,7 +2,7 @@ import type { CellContext, ColumnDef, HeaderContext, RowData } from '@tanstack/v
 import type { VNodeChild } from 'vue';
 import { z } from 'zod';
 export type TableRendererId = string;
-export type TableRendererColumnDefOverrides<TData extends RowData = unknown> = Partial<Pick<ColumnDef<TData, unknown>, 'enableResizing' | 'enableSorting' | 'enableMultiSort' | 'enablePinning' | 'size' | 'meta'>>;
+export type TableRendererColumnDefOverrides<TData extends RowData = unknown> = Partial<Pick<ColumnDef<TData, unknown>, 'enableResizing' | 'enableSorting' | 'enableMultiSort' | 'enablePinning' | 'sortingFn' | 'size' | 'meta'>>;
 export type TableRendererCellArgs<TData extends RowData, TValue, TOptions> = Readonly<{
     ctx: CellContext<TData, TValue>;
     options: TOptions;
@@ -34,4 +34,5 @@ export declare function defineTableRenderer<const TShape extends z.ZodRawShape,
     columnDefOverrides?: TableRenderer<TOptions>['columnDefOverrides'];
 }>): TableRenderer<TOptions>;
 export declare function getTableRenderer(id: TableRendererId): TableRenderer<unknown> | undefined;
+export declare function listTableRenderers(): Array<TableRenderer<unknown>>;
 export declare function resolveTableRenderer(id: TableRendererId): TableRenderer<unknown>;

package/dist/runtime/table-renderers/registry.js

@@ -21,6 +21,9 @@ export function defineTableRenderer(id, shape, impl) {
 export function getTableRenderer(id) {
   return _renderers.get(id);
 }
+export function listTableRenderers() {
+  return Array.from(_renderers.values());
+}
 export function resolveTableRenderer(id) {
   return _renderers.get(id) ?? _renderers.get("table.renderer.text");
 }