@shwfed/nuxt 0.1.15 → 0.1.17

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.15",
+  "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,32 +1,36 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
-declare module '@tanstack/vue-table' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        tooltip?: string;
-        grow?: boolean;
-        __types?: [TData, TValue];
-    }
-}
-type Expression = string;
-type Accessor = string | Readonly<{
+export type Expression = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
+export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
 }>;
-type Column = Readonly<{
+export type Column = Readonly<{
     id?: string;
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;
     enablePinning?: boolean;
+    columns?: ReadonlyArray<Column>;
     grow?: boolean;
 }>;
+declare module '@tanstack/vue-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        tooltip?: string;
+        grow?: boolean;
+        __types?: [TData, TValue];
+    }
+}
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     id: string;
     getRowId?: Expression;
@@ -55,5 +59,3 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     readonly enableRowSelection: Expression;
     readonly cellStyles: Expression;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/table.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script>
 import { FlexRender, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { Icon } from "@iconify/vue";
@@ -6,9 +6,11 @@ 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>
+
+<script setup>
 const props = defineProps({
   id: { type: String, required: true },
   getRowId: { type: String, required: false, default: void 0 },
@@ -20,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);
@@ -35,51 +36,12 @@ function genColumnId(column) {
   }
   return crypto.randomUUID();
 }
-const columns = computed(() => {
-  return props.columns.map((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 cell = (ctx) => {
-      return renderer.cell({ ctx, options, helpers });
-    };
-    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;
-    };
+function translate(column) {
+  if (Array.isArray(column.columns) && column.columns.length > 0) {
     return {
       id: column.id ?? genColumnId(column),
-      header,
-      cell,
-      accessorFn: (row, index) => {
-        const key = column.accessorKey ? column.accessorKey : column.accessor;
-        if (typeof key === "string") {
-          return getProperty(row, key);
-        } else if (key !== void 0) {
-          try {
-            return $dsl.evaluate(key.read, {
-              row,
-              index: BigInt(index)
-            });
-          } catch (e) {
-            console.error(e);
-            return void 0;
-          }
-        }
-        return void 0;
-      },
+      header: column.title,
+      columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
       enablePinning: column.enablePinning,
@@ -87,10 +49,48 @@ const columns = computed(() => {
       meta: {
         tooltip: column.tooltip,
         grow: column.grow ?? false
-      },
-      ...renderer.columnDefOverrides
+      }
     };
-  });
+  }
+  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: (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") {
+        return getProperty(row, key);
+      } else if (key !== void 0) {
+        try {
+          return $dsl.evaluate(key.read, {
+            row,
+            index: BigInt(index)
+          });
+        } catch (e) {
+          console.error(e);
+          return void 0;
+        }
+      }
+      return void 0;
+    },
+    enableSorting: column.enableSorting ?? false,
+    enableMultiSort: column.enableMultiSorting,
+    enablePinning: column.enablePinning,
+    size: column.size,
+    columns: column.columns?.map((column2) => translate(column2)) ?? [],
+    meta: {
+      tooltip: column.tooltip,
+      grow: column.grow ?? false
+    },
+    ...renderer.columnDefOverrides
+  };
+}
+const columns = computed(() => {
+  return props.columns.map((column) => translate(column));
 });
 const table = useVueTable({
   get columns() {
@@ -204,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) {
@@ -243,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">
@@ -267,10 +275,11 @@ 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.column.getSize()}px`,
+  width: `${header.getSize()}px`,
   ...pinnedStyle(header.column)
 }"
               >
@@ -281,7 +290,7 @@ function getSortIcon(column) {
                 />
 
                 <Tooltip
-                  v-if="header.column.columnDef.meta?.tooltip"
+                  v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
                   :delay-duration="180"
                   :content="renderInline(header.column.columnDef.meta.tooltip)"
                 >
@@ -289,7 +298,7 @@ function getSortIcon(column) {
                 </Tooltip>
 
                 <button
-                  v-if="header.column.getCanSort()"
+                  v-if="!header.isPlaceholder && header.column.getCanSort()"
                   type="button"
                   :class="[
   'p-1 cursor-pointer outline-none absolute right-1 top-1/2 -translate-y-1/2 transform-3d',
@@ -301,7 +310,7 @@ function getSortIcon(column) {
                 </button>
 
                 <div
-                  v-if="header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
+                  v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
                   :class="[
   'group',
   'absolute',
@@ -334,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)` }"
             >
@@ -342,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`,
@@ -360,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,32 +1,36 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
-declare module '@tanstack/vue-table' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        tooltip?: string;
-        grow?: boolean;
-        __types?: [TData, TValue];
-    }
-}
-type Expression = string;
-type Accessor = string | Readonly<{
+export type Expression = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
+export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
 }>;
-type Column = Readonly<{
+export type Column = Readonly<{
     id?: string;
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;
     enableMultiSorting?: boolean;
     enablePinning?: boolean;
+    columns?: ReadonlyArray<Column>;
     grow?: boolean;
 }>;
+declare module '@tanstack/vue-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        tooltip?: string;
+        grow?: boolean;
+        __types?: [TData, TValue];
+    }
+}
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     id: string;
     getRowId?: Expression;
@@ -55,5 +59,3 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     readonly enableRowSelection: Expression;
     readonly cellStyles: Expression;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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)
             }));
@@ -223,7 +225,7 @@ defineTableRenderer(
                   "cursor-pointer absolute right-1 top-1/2 -translate-y-1/2 bg-white border",
                   "w-6 h-6 flex items-center justify-center group-hover:opacity-100 opacity-0",
                   "transition-all duration-180 rounded border-zinc-200 text-zinc-500",
-                  "hover:border-[var(--primary)]/50 hover:text-[var(--primary)]/80 hover:bg-[var(--primary)]/10"
+                  "hover:border-[color-mix(in_srgb,var(--primary)_50%,white)] hover:text-[color-mix(in_srgb,var(--primary)_80%,#00000033)] hover:bg-[color-mix(in_srgb,var(--primary)_10%,white)]"
                 ],
                 onClick: onCopy,
                 children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:copy-20-regular" })
@@ -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.15",
+  "version": "0.1.17",
   "description": "",
   "license": "MIT",
   "type": "module",