@shwfed/nuxt 0.1.14 → 0.1.16

package/dist/module.json

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

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

@@ -1,17 +1,10 @@
 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 Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
 }>;
-type Column = Readonly<{
+export type Column = Readonly<{
     id?: string;
     title?: string;
     accessor?: Accessor;
@@ -25,8 +18,18 @@ type Column = Readonly<{
     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 +58,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";
@@ -9,6 +9,9 @@ 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 },
@@ -35,51 +38,31 @@ 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) {
+  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,
-      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;
-      },
+      columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
       enablePinning: column.enablePinning,
@@ -87,10 +70,47 @@ const columns = computed(() => {
       meta: {
         tooltip: column.tooltip,
         grow: column.grow ?? false
-      },
-      ...renderer.columnDefOverrides
+      }
     };
-  });
+  }
+  const cell = (ctx) => {
+    return renderer.cell({ ctx, options, helpers });
+  };
+  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;
+    },
+    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() {
@@ -270,7 +290,7 @@ function getSortIcon(column) {
   (header.column.getIsPinned() === 'left' || hasAdjacentColumns(header.column)) && 'border-r'
 ]"
                 :style="{
-  width: `${header.column.getSize()}px`,
+  width: `${header.getSize()}px`,
   ...pinnedStyle(header.column)
 }"
               >
@@ -281,7 +301,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 +309,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 +321,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',
@@ -409,7 +429,7 @@ function getSortIcon(column) {
               <Pagination.ListItem
                 v-if="page.type === 'page'"
                 :class="[
-  'w-7 h-7 flex items-center justify-center border border-zinc-200 rounded text-xs',
+  'w-7 h-7 flex items-center justify-center border border-zinc-200 rounded text-xs bg-transparent',
   'data-[selected]:text-[var(--primary)] data-[selected]:border-[var(--primary)] hover:bg-zinc-100 transition cursor-pointer'
 ]"
                 :value="page.value"

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

@@ -1,17 +1,10 @@
 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 Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
 }>;
-type Column = Readonly<{
+export type Column = Readonly<{
     id?: string;
     title?: string;
     accessor?: Accessor;
@@ -25,8 +18,18 @@ type Column = Readonly<{
     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 +58,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/table-renderers/builtins.js

@@ -223,7 +223,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" })

package/package.json

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