@shwfed/nuxt 0.1.12 → 0.1.14

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.1"
+    "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addPlugin, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponentsDir } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -12,6 +12,12 @@ const module$1 = defineNuxtModule({
     addPlugin(resolver.resolve("runtime/plugins/cel/index"));
     addPlugin(resolver.resolve("runtime/plugins/markdown/index"));
     addImportsDir(resolver.resolve("runtime/composables"));
+    addComponentsDir({
+      path: resolver.resolve("runtime/components"),
+      ignore: ["ui/**/*.{vue,ts}"],
+      prefix: "shwfed",
+      extensions: ["vue"]
+    });
     nuxt.options.typescript.tsConfig.include?.push(resolver.resolve("runtime/types/directive.d.ts"));
   }
 });

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

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/app.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { Tooltip } from "reka-ui/namespaced";
+</script>
+
+<template>
+  <Tooltip.Provider>
+    <slot />
+  </Tooltip.Provider>
+</template>

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

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,59 @@
+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<{
+    read: Expression;
+    write: Expression;
+}>;
+type Column = Readonly<{
+    id?: string;
+    title?: string;
+    accessor?: Accessor;
+    accessorKey?: string;
+    renderer?: string | Readonly<{
+        id: string;
+        props: unknown;
+    }>;
+    tooltip?: string;
+    size?: number;
+    enableSorting?: boolean;
+    enableMultiSorting?: boolean;
+    enablePinning?: boolean;
+    grow?: boolean;
+}>;
+declare const __VLS_export: import("vue").DefineComponent<Readonly<{
+    id: string;
+    getRowId?: Expression;
+    getSubRows?: Expression;
+    enableRowSelection?: Expression;
+    enableMultiRowSelection?: Expression;
+    columns: ReadonlyArray<Column>;
+    data: Array<unknown>;
+    cellStyles?: Expression;
+    props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+}>, import("@tanstack/vue-table").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
+    id: string;
+    getRowId?: Expression;
+    getSubRows?: Expression;
+    enableRowSelection?: Expression;
+    enableMultiRowSelection?: Expression;
+    columns: ReadonlyArray<Column>;
+    data: Array<unknown>;
+    cellStyles?: Expression;
+    props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+}>> & Readonly<{}>, {
+    readonly props: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    readonly getRowId: Expression;
+    readonly getSubRows: Expression;
+    readonly enableMultiRowSelection: Expression;
+    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

@@ -0,0 +1,456 @@
+<script setup>
+import { FlexRender, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, useVueTable } from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { Icon } from "@iconify/vue";
+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";
+const props = defineProps({
+  id: { type: String, required: true },
+  getRowId: { type: String, required: false, default: void 0 },
+  getSubRows: { type: String, required: false, default: void 0 },
+  enableRowSelection: { type: String, required: false, default: void 0 },
+  enableMultiRowSelection: { type: String, required: false, default: void 0 },
+  columns: { type: Array, required: true },
+  data: { type: Array, required: true },
+  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);
+function renderInline(source) {
+  return $markdown.renderInline(source);
+}
+function genColumnId(column) {
+  if (typeof column.accessor === "string") {
+    return column.accessor;
+  } else if (column.accessor) {
+    return column.accessor.read;
+  }
+  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;
+    };
+    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,
+      meta: {
+        tooltip: column.tooltip,
+        grow: column.grow ?? false
+      },
+      ...renderer.columnDefOverrides
+    };
+  });
+});
+const table = useVueTable({
+  get columns() {
+    return columns.value;
+  },
+  get data() {
+    return props.data;
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getExpandedRowModel: getExpandedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getRowId: props.getRowId ? (originalRow, index, parent) => {
+    try {
+      const key = $dsl.evaluate(
+        props.getRowId,
+        {
+          row: originalRow,
+          index,
+          parent: parent ? {
+            id: parent.id,
+            index: BigInt(parent.index),
+            original: parent.original
+          } : null
+        }
+      );
+      if (typeof key === "string") {
+        return key;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return parent ? `${parent.index}.${index}` : `${index}`;
+  } : void 0,
+  getSubRows: (row, index) => {
+    if (!props.getSubRows)
+      return void 0;
+    try {
+      const value = $dsl.evaluate(props.getSubRows, {
+        row,
+        index
+      });
+      return Array.isArray(value) ? value : void 0;
+    } catch (e) {
+      console.error(e);
+      return void 0;
+    }
+  },
+  enableRowSelection: (row) => {
+    if (!props.enableRowSelection)
+      return true;
+    try {
+      return Boolean($dsl.evaluate(props.enableRowSelection, {
+        row: row.original,
+        index: BigInt(row.index),
+        id: row.id
+      }));
+    } catch (e) {
+      console.error(e);
+      return true;
+    }
+  },
+  enableMultiRowSelection: props.enableMultiRowSelection ? (row) => {
+    try {
+      return Boolean($dsl.evaluate(props.enableMultiRowSelection, {
+        row: row.original,
+        index: BigInt(row.index),
+        id: row.id
+      }));
+    } catch (e) {
+      console.error(e);
+      return true;
+    }
+  } : void 0,
+  columnResizeMode: "onChange",
+  ...props.props
+});
+defineExpose(table);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: table.getRowModel().rows.length,
+    estimateSize: () => 35,
+    getScrollElement: () => containerRef.value,
+    overscan: 30
+  }))
+);
+const rowTotalSize = computed(() => rowVirtualizer.value.getTotalSize());
+const rowWindow = computed(() => rowVirtualizer.value.getVirtualItems());
+function measureRow(el) {
+  if (!el || !(el instanceof Element))
+    return;
+  rowVirtualizer.value.measureElement(el);
+}
+const rows = computed(() => table.getRowModel().rows);
+function isStyleRecord(x) {
+  return typeof x === "object" && x !== null && !Array.isArray(x);
+}
+function getCellStyles(ctx) {
+  if (!props.cellStyles)
+    return {};
+  try {
+    const result = $dsl.evaluate(props.cellStyles, {
+      row: ctx.row.original,
+      index: BigInt(ctx.row.index),
+      id: ctx.column.id,
+      selected: ctx.row.getIsSelected(),
+      pinned: ctx.column.getIsPinned()
+    });
+    return isStyleRecord(result) ? result : {};
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}
+function hasAdjacentColumns(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return !column.getIsLastColumn("left");
+    // why would anyone pin all columns to the left?
+    case "right":
+      return !column.getIsLastColumn("right");
+    case false:
+      return !column.getIsLastColumn("center") || table.getIsSomeColumnsPinned("right");
+  }
+}
+function pinnedStyle(column) {
+  const pinned = column.getIsPinned();
+  if (!pinned)
+    return {};
+  const style = {
+    [pinned]: `${column.getStart(pinned)}px`
+  };
+  if (column.getIsLastColumn("left"))
+    style.boxShadow = "5px 5px 5px #00000005";
+  if (column.getIsFirstColumn("right"))
+    style.boxShadow = "-5px 5px 5px #00000005";
+  return style;
+}
+const SORT_ICONS = {
+  unsorted: "fluent:arrow-sort-16-regular",
+  asc: "fluent:arrow-sort-up-16-regular",
+  desc: "fluent:arrow-sort-down-16-regular"
+};
+function getSortIcon(column) {
+  const sortDir = column.getIsSorted();
+  const iconKey = sortDir === false ? "unsorted" : sortDir;
+  return SORT_ICONS[iconKey];
+}
+</script>
+
+<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"
+    >
+      <div :style="{ height: `${rowTotalSize}px` }">
+        <table class="grid">
+          <thead class="grid sticky top-0 z-10 select-none">
+            <tr
+              v-for="group in table.getHeaderGroups()"
+              :key="group.id"
+              class="flex w-full border-b 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 py-2 text-zinc-600',
+  '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'
+]"
+                :style="{
+  width: `${header.column.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+
+                <Tooltip
+                  v-if="header.column.columnDef.meta?.tooltip"
+                  :delay-duration="180"
+                  :content="renderInline(header.column.columnDef.meta.tooltip)"
+                >
+                  <Icon icon="fluent:info-20-regular" />
+                </Tooltip>
+
+                <button
+                  v-if="header.column.getCanSort()"
+                  type="button"
+                  :class="[
+  'p-1 cursor-pointer outline-none absolute right-1 top-1/2 -translate-y-1/2 transform-3d',
+  'group-hover:opacity-100 opacity-60 transition-opacity duration-180 bg-transparent'
+]"
+                  @click="header.column.getToggleSortingHandler()?.($event)"
+                >
+                  <Icon :icon="getSortIcon(header.column)" />
+                </button>
+
+                <div
+                  v-if="header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
+                  :class="[
+  'group',
+  'absolute',
+  'top-0',
+  'bottom-0',
+  'right-0',
+  'px-2',
+  'translate-x-2',
+  'z-5',
+  'opacity-0',
+  'duration-150',
+  'transition-opacity',
+  'ease-out',
+  'hover:opacity-100',
+  'cursor-col-resize'
+]"
+                  @mousedown="header.getResizeHandler()($event)"
+                >
+                  <div :class="['w-2pt', 'translate-x-1pt', 'h-full', 'bg-blue-400']" />
+                </div>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody
+            class="grid relative"
+            :style="{ height: `${rowTotalSize}px` }"
+          >
+            <tr
+              v-for="r in rowWindow"
+              :key="rows[r.index]?.id ?? r.index"
+              :ref="measureRow"
+              class="flex absolute w-full"
+              :data-index="rows[r.index]?.index"
+              :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
+            >
+              <td
+                v-for="cell in rows[r.index]?.getVisibleCells() ?? []"
+                :key="cell.id"
+                :class="[
+  'border-b 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'
+]"
+                :style="{
+  width: `${cell.column.getSize()}px`,
+  ...pinnedStyle(cell.column),
+  ...getCellStyles(cell.getContext())
+}"
+              >
+                <FlexRender
+                  :render="cell.column.columnDef.cell"
+                  :props="cell.getContext()"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between w-full p-4 text-sm text-zinc-600">
+      <div />
+      <div class="flex items-center gap-4">
+        <span class="text-xs">{{ `\u5171 ${props.data.length} \u6761` }}</span>
+        <Pagination.Root
+          show-edges
+          :total="props.data.length"
+          :items-per-page="table.getState().pagination.pageSize"
+          :page="table.getState().pagination.pageIndex + 1"
+          @update:page="(page2) => table.setPageIndex(page2 - 1)"
+        >
+          <Pagination.List
+            v-slot="{ items }"
+            class="flex items-center gap-1"
+          >
+            <Pagination.First
+              :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+]"
+            >
+              <Icon
+                icon="radix-icons:double-arrow-left"
+                class="w-4 h-4"
+              />
+            </Pagination.First>
+            <Pagination.Prev
+              :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+]"
+            >
+              <Icon
+                icon="radix-icons:chevron-left"
+                class="w-4 h-4"
+              />
+            </Pagination.Prev>
+
+            <template
+              v-for="(page, index) in items"
+              :key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${index}`"
+            >
+              <Pagination.ListItem
+                v-if="page.type === 'page'"
+                :class="[
+  'w-7 h-7 flex items-center justify-center border border-zinc-200 rounded text-xs',
+  'data-[selected]:text-[var(--primary)] data-[selected]:border-[var(--primary)] hover:bg-zinc-100 transition cursor-pointer'
+]"
+                :value="page.value"
+              >
+                {{ page.value }}
+              </Pagination.ListItem>
+              <Pagination.Ellipsis
+                v-else
+                class="w-7 h-7 flex items-center justify-center text-zinc-400"
+              >
+                &#8230;
+              </Pagination.Ellipsis>
+            </template>
+
+            <Pagination.Next
+              :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+]"
+            >
+              <Icon
+                icon="radix-icons:chevron-right"
+                class="w-4 h-4"
+              />
+            </Pagination.Next>
+            <Pagination.Last
+              :class="[
+  'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
+  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+]"
+            >
+              <Icon
+                icon="radix-icons:double-arrow-right"
+                class="w-4 h-4"
+              />
+            </Pagination.Last>
+          </Pagination.List>
+        </Pagination.Root>
+        <span class="text-xs">前往</span>
+      </div>
+      <div />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,59 @@
+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<{
+    read: Expression;
+    write: Expression;
+}>;
+type Column = Readonly<{
+    id?: string;
+    title?: string;
+    accessor?: Accessor;
+    accessorKey?: string;
+    renderer?: string | Readonly<{
+        id: string;
+        props: unknown;
+    }>;
+    tooltip?: string;
+    size?: number;
+    enableSorting?: boolean;
+    enableMultiSorting?: boolean;
+    enablePinning?: boolean;
+    grow?: boolean;
+}>;
+declare const __VLS_export: import("vue").DefineComponent<Readonly<{
+    id: string;
+    getRowId?: Expression;
+    getSubRows?: Expression;
+    enableRowSelection?: Expression;
+    enableMultiRowSelection?: Expression;
+    columns: ReadonlyArray<Column>;
+    data: Array<unknown>;
+    cellStyles?: Expression;
+    props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+}>, import("@tanstack/vue-table").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
+    id: string;
+    getRowId?: Expression;
+    getSubRows?: Expression;
+    enableRowSelection?: Expression;
+    enableMultiRowSelection?: Expression;
+    columns: ReadonlyArray<Column>;
+    data: Array<unknown>;
+    cellStyles?: Expression;
+    props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+}>> & Readonly<{}>, {
+    readonly props: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    readonly getRowId: Expression;
+    readonly getSubRows: Expression;
+    readonly enableMultiRowSelection: Expression;
+    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/tooltip.d.vue.ts

@@ -0,0 +1,21 @@
+import { type TooltipRootProps } from 'reka-ui';
+type __VLS_Props = TooltipRootProps & {
+    content?: string;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};