nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/layout/TableFooter.vue

@@ -0,0 +1,171 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListUiClass } from "../../utils";
+const props = defineProps({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { locale, t } = useUiToolsLocale();
+const controlSize = computed(
+  () => props.size ?? dataListUi.ui.value.pagination?.size ?? dataListUi.controlSize.value
+);
+const ui = computed(() => ({
+  ...dataListUi.ui.value.pagination?.ui,
+  ...props.ui
+}));
+const pageSizeItems = computed(
+  () => internals.tableApi.pagination.pageSizeOptions.value.map((size) => [
+    {
+      label: t("table.footer.pageSizeOption", {
+        count: formatCount(size)
+      }),
+      onSelect: () => internals.pagination.setPageSize(size)
+    }
+  ])
+);
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value);
+}
+</script>
+
+<template>
+  <footer
+    v-if="internals.pagination.mode.value === 'offset'"
+    :class="
+  mergeDataListUiClass(
+    'flex flex-col gap-3 px-4 py-3 text-sm text-muted sm:px-5 lg:flex-row lg:items-center lg:justify-between',
+    void 0,
+    ui.root
+  )
+"
+  >
+    <slot
+      name="selected-count"
+      :selected="internals.selection.selectedCount.value"
+      :total="internals.pagination.rowCount.value ?? 0"
+    >
+      <div :class="ui.summary">
+        {{
+          t("table.footer.rowsSelected", {
+  selected: formatCount(internals.selection.selectedCount.value),
+  total: formatCount(internals.pagination.rowCount.value ?? 0)
+})
+        }}
+      </div>
+    </slot>
+
+    <div
+      :class="
+  mergeDataListUiClass(
+    'flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end',
+    void 0,
+    ui.inner
+  )
+"
+    >
+      <slot
+        name="page-size"
+        :page-size="internals.pagination.pageSize.value"
+        :options="internals.pagination.pageSizeOptions.value"
+        :set-page-size="internals.pagination.setPageSize"
+      >
+        <div :class="mergeDataListUiClass('flex items-center gap-3', void 0, ui.pageSize)">
+          <span>{{ t("table.footer.rowsPerPage") }}</span>
+
+          <UDropdownMenu
+            :items="pageSizeItems"
+            :content="{ align: 'end', side: 'top', sideOffset: 10 }"
+          >
+            <UButton
+              color="neutral"
+              variant="outline"
+              :size="controlSize"
+              :ui="{
+  base: mergeDataListUiClass('min-w-20 justify-between', void 0, ui.button)
+}"
+              :label="String(internals.pagination.pageSize.value)"
+              trailing-icon="i-lucide-chevron-down"
+            />
+          </UDropdownMenu>
+        </div>
+      </slot>
+
+      <div :class="mergeDataListUiClass('flex items-center gap-3', void 0, ui.pages)">
+        <slot
+          name="page-count"
+          :current="internals.pagination.currentPage.value"
+          :total="internals.pagination.totalPages.value"
+        >
+          <span>{{
+            t("table.footer.page", {
+  current: formatCount(internals.pagination.currentPage.value),
+  total: formatCount(internals.pagination.totalPages.value)
+})
+          }}</span>
+        </slot>
+
+        <slot
+          name="navigation"
+          :state="internals.pagination.state.value"
+          :set-page="internals.pagination.setPage"
+          :next="internals.pagination.next"
+          :previous="internals.pagination.previous"
+        >
+          <div :class="mergeDataListUiClass('flex items-center gap-2', void 0, ui.controls)">
+            <UButton
+              color="neutral"
+              variant="outline"
+              :size="controlSize"
+              icon="i-lucide-chevrons-left"
+              :aria-label="t('table.footer.firstPage')"
+              :title="t('table.footer.firstPage')"
+              :disabled="!internals.pagination.canPreviousPage.value"
+              :ui="{ base: ui.button }"
+              @click="internals.pagination.setPage(1)"
+            />
+            <UButton
+              color="neutral"
+              variant="outline"
+              :size="controlSize"
+              icon="i-lucide-chevron-left"
+              :aria-label="t('table.footer.previousPage')"
+              :title="t('table.footer.previousPage')"
+              :disabled="!internals.pagination.canPreviousPage.value"
+              :ui="{ base: ui.button }"
+              @click="internals.pagination.setPage(internals.pagination.currentPage.value - 1)"
+            />
+            <UButton
+              color="neutral"
+              variant="outline"
+              :size="controlSize"
+              icon="i-lucide-chevron-right"
+              :aria-label="t('table.footer.nextPage')"
+              :title="t('table.footer.nextPage')"
+              :disabled="!internals.pagination.canNextPage.value"
+              :ui="{ base: ui.button }"
+              @click="internals.pagination.setPage(internals.pagination.currentPage.value + 1)"
+            />
+            <UButton
+              color="neutral"
+              variant="outline"
+              :size="controlSize"
+              icon="i-lucide-chevrons-right"
+              :aria-label="t('table.footer.lastPage')"
+              :title="t('table.footer.lastPage')"
+              :disabled="!internals.pagination.canNextPage.value"
+              :ui="{ base: ui.button }"
+              @click="internals.pagination.setPage(internals.pagination.totalPages.value)"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </footer>
+</template>

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

@@ -0,0 +1,50 @@
+import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListPaginationUi;
+};
+declare var __VLS_1: {
+    selected: number;
+    total: number;
+}, __VLS_3: {
+    pageSize: number;
+    options: number[];
+    setPageSize: (nextPageSize: number) => void;
+}, __VLS_16: {
+    current: number;
+    total: number;
+}, __VLS_18: {
+    state: {
+        mode: "none" | "offset" | "cursor";
+        pageIndex: number;
+        pageSize: number;
+        pageCount: number;
+        loadedCount: number;
+        totalCount: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+    };
+    setPage: (page: number) => void;
+    next: () => void;
+    previous: () => void;
+};
+type __VLS_Slots = {} & {
+    'selected-count'?: (props: typeof __VLS_1) => any;
+} & {
+    'page-size'?: (props: typeof __VLS_3) => any;
+} & {
+    'page-count'?: (props: typeof __VLS_16) => any;
+} & {
+    navigation?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,32 @@
+import type { TableLayout } from '../../types/index.js';
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    searchPlaceholder: string;
+    searchLoading: boolean;
+    gridEnabled: boolean;
+};
+type __VLS_Slots = {
+    title?: () => any;
+    actions?: () => any;
+};
+type __VLS_ModelProps = {
+    'searchQuery': string;
+    'tableLayout': TableLayout;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:searchQuery": (value: string) => any;
+    "update:tableLayout": (value: TableLayout) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+    "onUpdate:tableLayout"?: ((value: TableLayout) => 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;
+    };
+};

package/dist/runtime/table/components/layout/TableHeader.vue

@@ -0,0 +1,96 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useTableInternals } from "../../composables/use-table-internals";
+import ColumnPanel from "../drawers/ColumnPanel.vue";
+import FilterPanel from "../filters/panel/FilterPanel.vue";
+import TableFiltersBar from "../filters/tags/FilterTagsBar.vue";
+import SearchQueryInput from "../utils/SearchQueryInput.vue";
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  searchPlaceholder: { type: String, required: true },
+  searchLoading: { type: Boolean, required: true },
+  gridEnabled: { type: Boolean, required: true }
+});
+const searchQuery = defineModel("searchQuery", { type: String, ...{ required: true } });
+const tableLayout = defineModel("tableLayout", { type: String, ...{ required: true } });
+const internals = useTableInternals();
+const { t } = useUiToolsLocale();
+const refreshLoading = computed(
+  () => internals.queryContent.status.value.isFetching || internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating
+);
+defineSlots();
+function refreshData() {
+  void internals.queryContent.refreshData()();
+}
+</script>
+
+<template>
+  <header class="grid gap-3">
+    <div v-if="$slots.title || title || description" class="grid gap-1">
+      <slot name="title">
+        <h2 class="text-lg font-semibold tracking-tight text-highlighted">
+          {{ title }}
+        </h2>
+      </slot>
+      <p v-if="description" class="text-sm text-muted">
+        {{ description }}
+      </p>
+    </div>
+
+    <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        <SearchQueryInput
+          v-model="searchQuery"
+          :loading="searchLoading"
+          :placeholder="searchPlaceholder"
+        />
+
+        <TableFiltersBar />
+
+        <slot name="actions" />
+      </div>
+
+      <div class="flex shrink-0 self-start items-start justify-end gap-2">
+        <FilterPanel v-if="internals.filterPresentation.hasPanelFilters.value" />
+
+        <ColumnPanel v-if="tableLayout === 'table'" />
+
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="md"
+          icon="i-lucide-refresh-cw"
+          :loading="refreshLoading"
+          :aria-label="t('table.header.refreshData')"
+          :title="t('table.header.refreshData')"
+          @click="refreshData"
+        />
+
+        <UFieldGroup v-if="gridEnabled" size="md" class="shrink-0">
+          <UButton
+            color="neutral"
+            :variant="tableLayout === 'table' ? 'subtle' : 'outline'"
+            size="md"
+            icon="i-lucide-table-properties"
+            :aria-label="t('table.header.tableView')"
+            :title="t('table.header.tableView')"
+            @click="tableLayout = 'table'"
+          />
+          <UButton
+            color="neutral"
+            :variant="tableLayout === 'grid' ? 'subtle' : 'outline'"
+            size="md"
+            icon="i-lucide-layout-grid"
+            :aria-label="t('table.header.gridView')"
+            :title="t('table.header.gridView')"
+            @click="tableLayout = 'grid'"
+          />
+        </UFieldGroup>
+      </div>
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,32 @@
+import type { TableLayout } from '../../types/index.js';
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    searchPlaceholder: string;
+    searchLoading: boolean;
+    gridEnabled: boolean;
+};
+type __VLS_Slots = {
+    title?: () => any;
+    actions?: () => any;
+};
+type __VLS_ModelProps = {
+    'searchQuery': string;
+    'tableLayout': TableLayout;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:searchQuery": (value: string) => any;
+    "update:tableLayout": (value: TableLayout) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:searchQuery"?: ((value: string) => any) | undefined;
+    "onUpdate:tableLayout"?: ((value: TableLayout) => 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;
+    };
+};

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

@@ -0,0 +1,33 @@
+/** @jsxImportSource vue */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: null;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperClass: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    disabled: boolean;
+    wrapperClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/table/components/table/TableCellEllipsis.js

@@ -0,0 +1,83 @@
+import { jsx } from "vue/jsx-runtime";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
+import { computed, defineComponent, onBeforeUnmount, ref } from "vue";
+export default defineComponent({
+  name: "TableCellEllipsis",
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    wrapperClass: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, { slots }) {
+    const contentRef = ref(null);
+    const isOverflowing = ref(false);
+    let resizeObserver = null;
+    const tooltipEnabled = computed(
+      () => !props.disabled && Boolean(props.title) && isOverflowing.value
+    );
+    function measureOverflow() {
+      const element = contentRef.value;
+      if (!element) {
+        isOverflowing.value = false;
+        return;
+      }
+      isOverflowing.value = element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
+    }
+    function startObserver() {
+      if (resizeObserver || typeof ResizeObserver === "undefined" || !contentRef.value) {
+        return;
+      }
+      resizeObserver = new ResizeObserver(() => {
+        measureOverflow();
+      });
+      resizeObserver.observe(contentRef.value);
+    }
+    function stopObserver() {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    }
+    function handlePointerEnter() {
+      measureOverflow();
+      startObserver();
+    }
+    function handlePointerLeave() {
+      stopObserver();
+    }
+    onBeforeUnmount(() => {
+      stopObserver();
+    });
+    return () => /* @__PURE__ */ jsx(
+      UTooltip,
+      {
+        text: props.title ?? void 0,
+        disabled: !tooltipEnabled.value,
+        "delay-duration": 120,
+        content: { side: "top", align: "start" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: contentRef,
+            class: [
+              "block min-w-0 max-w-full truncate overflow-hidden whitespace-nowrap",
+              props.wrapperClass
+            ],
+            onMouseenter: handlePointerEnter,
+            onMouseleave: handlePointerLeave,
+            onFocusin: handlePointerEnter,
+            onFocusout: handlePointerLeave,
+            children: slots.default?.()
+          }
+        )
+      }
+    );
+  }
+});

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    minHeight: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/TableEmptyState.vue

@@ -0,0 +1,21 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+defineProps({
+  minHeight: { type: String, required: true }
+});
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <div
+    class="flex h-full w-full flex-col items-center justify-center gap-3 py-14"
+    :style="{ minHeight }"
+  >
+    <UIcon name="i-lucide-database-zap" class="size-6 text-muted" />
+    <div class="grid gap-1 text-center">
+      <div class="text-sm font-medium text-highlighted">{{ t("table.states.empty.title") }}</div>
+      <div class="text-sm text-muted">{{ t("table.states.empty.description") }}</div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    minHeight: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    minHeight: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/TableLoadingState.vue

@@ -0,0 +1,68 @@
+<script setup>
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { useElementSize } from "@vueuse/core";
+import { computed } from "vue";
+import { useTemplateRef } from "vue";
+import { useTableInternals } from "../../composables/use-table-internals";
+const props = defineProps({
+  minHeight: { type: String, required: true }
+});
+const internals = useTableInternals();
+const rootRef = useTemplateRef("root");
+const { height } = useElementSize(rootRef);
+const rowHeight = 48;
+const topPadding = 24;
+const skeletonRows = computed(() => {
+  const availableHeight = Math.max(height.value - topPadding, 0);
+  const count = Math.max(1, Math.ceil(availableHeight / rowHeight));
+  return Array.from({ length: count }, (_, index) => index);
+});
+const skeletonColumns = computed(() => [
+  {
+    id: "__select",
+    width: "3rem",
+    align: "start",
+    kind: "checkbox",
+    skeletonWidth: "1rem"
+  },
+  ...internals.tableColumns.visibleOrderedColumns.value.map((column, index) => ({
+    id: column.id,
+    width: index === 0 ? "1.3fr" : index === 1 ? "1.15fr" : "0.95fr",
+    align: index >= 3 ? "end" : "start",
+    kind: "text",
+    skeletonWidth: index === 0 ? "10rem" : index === 1 ? "12rem" : index === 2 ? "8rem" : index === 3 ? "9rem" : "7rem"
+  }))
+]);
+const skeletonGridTemplate = computed(
+  () => skeletonColumns.value.map((column) => column.width).join(" ")
+);
+</script>
+
+<template>
+  <div ref="root" class="h-full w-full pt-6" :style="{ minHeight }">
+    <div
+      v-for="rowIndex in skeletonRows"
+      :key="rowIndex"
+      class="grid h-12 items-center gap-3 border-b px-4"
+      style="border-bottom-color: color-mix(in oklab, var(--ui-border) 14%, transparent)"
+      :style="{ gridTemplateColumns: skeletonGridTemplate }"
+    >
+      <div
+        v-for="column in skeletonColumns"
+        :key="`${rowIndex}-${column.id}`"
+        class="flex items-center"
+        :class="[
+  column.align === 'end' ? 'justify-end' : 'justify-start',
+  column.kind === 'checkbox' ? 'pl-0' : ''
+]"
+      >
+        <template v-if="column.kind === 'checkbox'">
+          <USkeleton class="size-4 rounded-md" />
+        </template>
+        <template v-else>
+          <USkeleton class="h-4 rounded-full" :style="{ width: column.skeletonWidth }" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    minHeight: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { DataListTableUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListTableUi;
+};
+declare var __VLS_17: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};