@shwfed/nuxt 0.1.16 → 0.1.17

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/app.vue

@@ -1,5 +1,13 @@
 <script setup>
+import { useHead } from "#app";
 import { Tooltip } from "reka-ui/namespaced";
+useHead({
+  bodyAttrs: {
+    style: {
+      "--primary": "#2DA8BC"
+    }
+  }
+});
 </script>
 
 <template>

package/dist/runtime/components/table.d.vue.ts

@@ -1,5 +1,9 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
 export type Expression = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
 export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
@@ -9,10 +13,7 @@ export type Column = Readonly<{
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;

package/dist/runtime/components/table.vue

@@ -6,7 +6,6 @@ import { getProperty } from "dot-prop";
 import { Pagination } from "reka-ui/namespaced";
 import { computed, ref } from "vue";
 import { useNuxtApp } from "#app";
-import { useCheating } from "../composables/useCheating";
 import { useTableRenderers } from "../composables/useTableRenderers";
 import Tooltip from "./tooltip.vue";
 </script>
@@ -23,7 +22,6 @@ const props = defineProps({
   cellStyles: { type: String, required: false, default: void 0 },
   props: { type: Object, required: false, default: void 0 }
 });
-const isCheating = useCheating();
 const { $dsl, $markdown } = useNuxtApp();
 const { resolveTableRenderer } = useTableRenderers();
 const containerRef = ref(null);
@@ -39,29 +37,10 @@ function genColumnId(column) {
   return crypto.randomUUID();
 }
 function translate(column) {
-  const rendererId = typeof column.renderer === "string" ? column.renderer : column.renderer?.id ? column.renderer.id : "table.renderer.text";
-  const rendererProps = column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null;
-  const renderer = resolveTableRenderer(rendererId);
-  const options = renderer.parseOptions(rendererProps);
-  const helpers = {
-    renderInline,
-    evaluate: $dsl.evaluate
-  };
-  const header = (ctx) => {
-    if (renderer.header) {
-      return renderer.header({
-        ctx,
-        title: typeof column.title === "string" ? column.title : void 0,
-        options,
-        helpers
-      });
-    }
-    return typeof column.title === "string" ? column.title : void 0;
-  };
   if (Array.isArray(column.columns) && column.columns.length > 0) {
     return {
       id: column.id ?? genColumnId(column),
-      header,
+      header: column.title,
       columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
@@ -73,13 +52,14 @@ function translate(column) {
       }
     };
   }
-  const cell = (ctx) => {
-    return renderer.cell({ ctx, options, helpers });
-  };
+  const renderer = resolveTableRenderer(typeof column.renderer === "string" ? column.renderer : column.renderer?.id ? column.renderer.id : "table.renderer.text");
+  const options = renderer.parseOptions(column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null);
   return {
     id: column.id ?? genColumnId(column),
-    header,
-    cell,
+    header: (ctx) => renderer.header?.({ ctx, options }) ?? column.title,
+    cell: (ctx) => {
+      return renderer.cell({ ctx, options });
+    },
     accessorFn: (row, index) => {
       const key = column.accessorKey ? column.accessorKey : column.accessor;
       if (typeof key === "string") {
@@ -224,15 +204,24 @@ function getCellStyles(ctx) {
     return {};
   }
 }
-function hasAdjacentColumns(column) {
+function shouldHaveRightBorder(column) {
   switch (column.getIsPinned()) {
     case "left":
-      return !column.getIsLastColumn("left");
-    // why would anyone pin all columns to the left?
+      return true;
     case "right":
       return !column.getIsLastColumn("right");
     case false:
-      return !column.getIsLastColumn("center") || table.getIsSomeColumnsPinned("right");
+      return !column.getIsLastColumn("center");
+  }
+}
+function shouldHaveLeftBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return false;
+    case "right":
+      return true;
+    case false:
+      return false;
   }
 }
 function pinnedStyle(column) {
@@ -263,11 +252,10 @@ function getSortIcon(column) {
 <template>
   <div
     class="flex flex-col h-full"
-    :style="isCheating ? { '--primary': '#BC1111' } : { '--primary': '#2DA8BC' }"
   >
     <div
       ref="containerRef"
-      class="overflow-scroll flex-1 border border-zinc-200 rounded relative"
+      class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
     >
       <div :style="{ height: `${rowTotalSize}px` }">
         <table class="grid">
@@ -287,7 +275,8 @@ function getSortIcon(column) {
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_10%,white)] group',
   header.column.getIsPinned() && 'sticky z-15',
-  (header.column.getIsPinned() === 'left' || hasAdjacentColumns(header.column)) && 'border-r'
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
 ]"
                 :style="{
   width: `${header.getSize()}px`,
@@ -354,7 +343,7 @@ function getSortIcon(column) {
               v-for="r in rowWindow"
               :key="rows[r.index]?.id ?? r.index"
               :ref="measureRow"
-              class="flex absolute w-full"
+              class="flex absolute w-full not-last:border-b border-zinc-300"
               :data-index="rows[r.index]?.index"
               :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
             >
@@ -362,10 +351,11 @@ function getSortIcon(column) {
                 v-for="cell in rows[r.index]?.getVisibleCells() ?? []"
                 :key="cell.id"
                 :class="[
-  'border-b border-zinc-300',
+  'border-zinc-300',
   cell.column.columnDef.meta?.grow && 'flex-1',
   cell.column.getIsPinned() && 'sticky z-15',
-  (cell.column.getIsPinned() === 'left' || hasAdjacentColumns(cell.column)) && 'border-r'
+  shouldHaveRightBorder(cell.column) && 'border-r',
+  shouldHaveLeftBorder(cell.column) && 'border-l'
 ]"
                 :style="{
   width: `${cell.column.getSize()}px`,
@@ -380,6 +370,39 @@ function getSortIcon(column) {
               </td>
             </tr>
           </tbody>
+
+          <tfoot class="hidden has-[[data-footer]]:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
+            <tr
+              v-for="group in table.getFooterGroups()"
+              :key="group.id"
+              class="flex w-full border-zinc-200"
+            >
+              <th
+                v-for="header in group.headers"
+                :key="header.id"
+                :colSpan="header.colSpan"
+                :class="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  'flex items-center gap-2 border-zinc-300 text-zinc-600 p-0',
+  'text-xs flex items-center justify-center relative',
+  'bg-[color-mix(in_srgb,var(--primary)_10%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.footer"
+                  :props="header.getContext()"
+                />
+              </th>
+            </tr>
+          </tfoot>
         </table>
       </div>
     </div>

package/dist/runtime/components/table.vue.d.ts

@@ -1,5 +1,9 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
 export type Expression = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
 export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
@@ -9,10 +13,7 @@ export type Column = Readonly<{
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;

package/dist/runtime/composables/useTableRenderers.d.ts

@@ -1,7 +1,7 @@
 import '../table-renderers/builtins.js';
 import { getTableRenderer, resolveTableRenderer } from '../table-renderers/registry.js';
 export { defineTableRenderer } from '../table-renderers/registry.js';
-export type { TableRenderer, TableRendererCellArgs, TableRendererColumnDefOverrides, TableRendererConfigComponent, TableRendererHeaderArgs, TableRendererId, } from '../table-renderers/registry.js';
+export type { TableRenderer, TableRendererCellArgs, TableRendererColumnDefOverrides, TableRendererConfigComponent, TableRendererFooterArgs, TableRendererHeaderArgs, TableRendererId, } from '../table-renderers/registry.js';
 export declare function useTableRenderers(): {
     getTableRenderer: typeof getTableRenderer;
     resolveTableRenderer: typeof resolveTableRenderer;

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

@@ -4,6 +4,7 @@ import { format as formatDate, isValid, toDate } from "date-fns";
 import { defineComponent } from "vue";
 import { z } from "zod";
 import { defineTableRenderer } from "./registry.js";
+import { useNuxtApp } from "#app";
 const JUSTIFY_CLASS = {
   left: "justify-start",
   center: "justify-center",
@@ -185,16 +186,17 @@ defineTableRenderer(
     align: z.enum(["left", "center", "right"]).default("left")
   },
   {
-    cell: ({ ctx, options, helpers }) => {
+    cell: ({ ctx, options }) => {
       const rawValue = ctx.cell.getValue();
       const isEmpty = rawValue === void 0 || rawValue === null;
       const align = isEmpty ? "center" : options.align ?? "left";
       const justifyClass = JUSTIFY_CLASS[align];
+      const { $dsl } = useNuxtApp();
       const onCopy = async () => {
         try {
           let text = String(ctx.cell.getValue());
-          if (options.copyExpression && helpers.evaluate) {
-            text = String(helpers.evaluate(options.copyExpression, {
+          if (options.copyExpression) {
+            text = String($dsl.evaluate(options.copyExpression, {
               row: ctx.row.original,
               index: BigInt(ctx.row.index)
             }));
@@ -287,7 +289,7 @@ defineTableRenderer(
             type: "checkbox",
             checked,
             class: [
-              "peer h-4 w-4 cursor-pointer transition-colors duration-180 appearance-none rounded",
+              "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-[var(--primary)] checked:bg-[var(--primary)]"
             ],
@@ -333,7 +335,10 @@ defineTableRenderer(
         children: /* @__PURE__ */ jsx(Icon, { icon: ctx.table.getIsAllRowsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
       }
     ) }),
-    config: NoOptionsConfig
+    config: NoOptionsConfig,
+    columnDefOverrides: {
+      enableResizing: false
+    }
   }
 );
 defineTableRenderer(
@@ -394,9 +399,10 @@ defineTableRenderer(
     source: z.string().optional()
   },
   {
-    cell: ({ ctx, options, helpers }) => {
+    cell: ({ ctx, options }) => {
+      const { $markdown } = useNuxtApp();
       const source = options.source ?? String(ctx.cell.getValue());
-      const html = helpers.renderInline(source);
+      const html = $markdown.renderInline(source);
       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: html }) });
     },
     config: TableRendererMarkdownConfig

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

@@ -6,19 +6,14 @@ export type TableRendererColumnDefOverrides<TData extends RowData = unknown> = P
 export type TableRendererCellArgs<TData extends RowData, TValue, TOptions> = Readonly<{
     ctx: CellContext<TData, TValue>;
     options: TOptions;
-    helpers: Readonly<{
-        renderInline: (source: string) => string;
-        evaluate?: (source: string, context?: Record<string, unknown>) => unknown;
-    }>;
 }>;
 export type TableRendererHeaderArgs<TData extends RowData, TValue, TOptions> = Readonly<{
     ctx: HeaderContext<TData, TValue>;
-    title?: string;
     options: TOptions;
-    helpers: Readonly<{
-        renderInline: (source: string) => string;
-        evaluate?: (source: string, context?: Record<string, unknown>) => unknown;
-    }>;
+}>;
+export type TableRendererFooterArgs<TData extends RowData, TValue, TOptions> = Readonly<{
+    ctx: HeaderContext<TData, TValue>;
+    options: TOptions;
 }>;
 export type TableRendererConfigComponent<_TOptions> = unknown;
 export type TableRenderer<TOptions> = Readonly<{
@@ -27,12 +22,14 @@ export type TableRenderer<TOptions> = Readonly<{
     parseOptions: (input: unknown) => TOptions;
     cell: (args: TableRendererCellArgs<unknown, unknown, TOptions>) => VNodeChild;
     header?: (args: TableRendererHeaderArgs<unknown, unknown, TOptions>) => VNodeChild;
+    footer?: (args: TableRendererFooterArgs<unknown, unknown, TOptions>) => VNodeChild;
     config?: TableRendererConfigComponent<TOptions>;
     columnDefOverrides?: TableRendererColumnDefOverrides;
 }>;
 export declare function defineTableRenderer<const TShape extends z.ZodRawShape, const TOptions = z.infer<z.ZodObject<TShape>>>(id: TableRendererId, shape: TShape, impl: Readonly<{
     cell: TableRenderer<TOptions>['cell'];
     header?: TableRenderer<TOptions>['header'];
+    footer?: TableRenderer<TOptions>['footer'];
     config?: TableRenderer<TOptions>['config'];
     columnDefOverrides?: TableRenderer<TOptions>['columnDefOverrides'];
 }>): TableRenderer<TOptions>;

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

@@ -6,11 +6,12 @@ export function defineTableRenderer(id, shape, impl) {
     id,
     optionsSchema,
     parseOptions: (input) => {
-      const normalized = input == null ? {} : input;
+      const normalized = input === null || input === void 0 ? {} : input;
       return optionsSchema.parse(normalized);
     },
     cell: impl.cell,
     header: impl.header,
+    footer: impl.footer,
     config: impl.config,
     columnDefOverrides: impl.columnDefOverrides
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "",
   "license": "MIT",
   "type": "module",