@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/runtime/editor/components/SystemRequirements/index.vue

@@ -83,3 +83,60 @@ function dismiss() {
   hasDismissed.value = true;
 }
 </script>
+
+<style>
+.bk ul.bk-system-requirements {
+    margin-bottom: 15px;
+    display: grid;
+    gap: 10px
+}
+    .bk ul.bk-system-requirements li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 4px;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding: 10px
+}
+    .bk ul.bk-system-requirements li h3 {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 700
+}
+    .bk ul.bk-system-requirements li.bk-is-success .bk-system-requirements-icon {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-text-opacity, 1))
+}
+    .bk ul.bk-system-requirements li.bk-is-error {
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1))
+}
+    .bk ul.bk-system-requirements li.bk-is-error .bk-system-requirements-icon {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-red-light) / var(--bk-tw-text-opacity, 1))
+}
+  .bk .bk-system-requirements-icon {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    padding: 2px
+}
+  .bk .bk-system-requirements-icon svg {
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/components/Tabs/index.d.vue.ts

@@ -0,0 +1,30 @@
+export type TabItem<Id extends string = string> = {
+    id: Id;
+    label: string;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        tabs: TabItem<T>[];
+    } & {
+        modelValue: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/editor/components/Tabs/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="_bk_bg-mono-950 _bk_pt-15 _bk_px-15 _bk_lg:px-20 _bk_xl:px-30 _bk_border-t _bk_border-t-mono-600"
+  >
+    <div role="tablist">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        role="tab"
+        :aria-selected="modelValue === tab.id"
+        :class="{
+  '_bk_!bg-white _bk_!text-mono-900': modelValue === tab.id,
+  '_bk_hover:!bg-mono-700': modelValue !== tab.id
+}"
+        class="_bk_text-lg _bk_font-bold _bk_px-30 _bk_py-10 _bk_rounded-t-md _bk_text-white"
+        @click.prevent="modelValue = tab.id"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <div v-if="$slots.default" class="bk-tabs-panel" role="tabpanel">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  tabs: { type: Array, required: true }
+});
+const modelValue = defineModel({ type: null, ...{ required: true } });
+</script>

package/dist/runtime/editor/components/Tabs/index.vue.d.ts

@@ -0,0 +1,30 @@
+export type TabItem<Id extends string = string> = {
+    id: Id;
+    label: string;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        tabs: TabItem<T>[];
+    } & {
+        modelValue: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (evt: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/editor/components/Toolbar/index.vue

@@ -2,14 +2,14 @@
   <div
     v-show="activeSidebarLeft && sidebarVisible"
     id="bk-sidebar-content-left"
-    class="bk-sidebar bk-is-left"
+    class="bk-sidebar bk-is-left bk"
     :class="{ 'bk-is-hidden': !sidebarVisible }"
   />
 
   <div
     v-show="activeSidebarRight || activeSidebarRightBottom"
     ref="sidebarRightWrapper"
-    class="bk-sidebar-right-wrapper"
+    class="bk bk-sidebar-right-wrapper"
     :class="{
   'bk-is-resizing-split': isResizingSplit,
   'bk-is-split': activeSidebarRightBottom
@@ -18,7 +18,7 @@
     <div
       v-show="activeSidebarRight"
       id="bk-sidebar-content-right"
-      class="bk-sidebar bk-is-right"
+      class="bk-sidebar bk-is-right bk"
       :class="{ 'bk-is-hidden': !sidebarVisible }"
       :style="rightSidebarStyle"
     />
@@ -36,7 +36,7 @@
     <div
       v-show="activeSidebarRightBottom"
       id="bk-sidebar-content-right-bottom"
-      class="bk-sidebar bk-is-right-bottom"
+      class="bk-sidebar bk-is-right-bottom bk"
       :class="{ 'bk-is-hidden': !sidebarVisible }"
     />
   </div>
@@ -60,6 +60,7 @@
     <div id="bk-toolbar-title" class="bk-toolbar-container" />
     <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
     <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
+    <div id="bk-toolbar-artboard" class="bk-toolbar-container" />
     <div
       id="bk-toolbar-before-sidebar"
       class="bk-sidebar-container-tabs bk-toolbar-container"
@@ -187,3 +188,213 @@ export default {
   name: "BlokkliToolbar"
 };
 </script>
+
+<style>
+.bk.bk-toolbar-menu {
+  pointer-events: auto;
+  position: relative;
+  z-index: calc(var(--bk-z-index-base) + 390000) /* "menu" */;
+  height: 100%;
+  grid-area: menu;
+}
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button {
+  position: relative;
+  z-index: 50;
+  display: flex;
+  height: 100%;
+  width: var(--bk-toolbar-left-width);
+  align-items: center;
+  justify-content: center;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+  @media (min-width: 1024px) {
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+  }
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
+  }
+}
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button.bk-is-active {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1));
+}
+  .bk.bk-toolbar-menu .bk-toolbar-menu-button svg {
+  pointer-events: none;
+  height: 24px;
+  width: 24px;
+  fill: currentColor;
+}
+
+.bk.bk-toolbar {
+  position: relative;
+  z-index: calc(var(--bk-z-index-base) + 160000) /* "toolbar" */;
+  user-select: none;
+  pointer-events: auto;
+  display: flex;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  font-size: 16px;
+  line-height: 24px;
+  contain: style size;
+  grid-area: toolbar;
+}
+
+@media (min-width: 1024px) {
+
+.bk .bk-toolbar-container:not(:first-child) {
+    border-left-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-left-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+  }
+      }
+
+.bk .bk-toolbar-container:empty {
+  display: none;
+}
+
+.bk .bk-toolbar-container {
+  position: relative;
+  display: flex;
+  height: 100%;
+}
+
+.bk .bk-toolbar-container#bk-toolbar-view-options {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .bk .bk-toolbar-container#bk-toolbar-view-options {
+    display: flex;
+  }
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title {
+  flex: 1 1 0%;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+@media (min-width: 1024px) {
+  .bk .bk-toolbar-container#bk-toolbar-title {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .bk .bk-toolbar-container#bk-toolbar-title {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled {
+  position: relative;
+  border-right-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-right-color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-border-opacity, 1));
+  font-size: 14px;
+  line-height: 20px;
+  line-height: 1 !important;
+  background-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
+  color: rgb(var(--bk-theme-yellow-light) / 0.9);
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled:hover {
+  background-color: rgb(var(--bk-theme-yellow-dark) / 0.8);
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+        flex: 0 0 auto;
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-toolbar-title-scheduled-text {
+  white-space: nowrap;
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-icon svg {
+  fill: currentColor;
+}
+
+.bk .bk-toolbar-button {
+  display: flex;
+  height: 40px;
+  min-width: 50px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
+}
+
+@media (min-width: 1024px) {
+  .bk .bk-toolbar-button {
+    height: 50px;
+  }
+  .bk .bk-toolbar-button:not(.bk-is-active):hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+  }
+}
+
+.bk .bk-toolbar-button.bk-is-active {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk .bk-toolbar-button.bk-is-inactive {
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk .bk-toolbar-button[disabled] {
+  pointer-events: none;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk .bk-toolbar-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+@media (min-width: 1024px) {
+  .bk .bk-toolbar-button svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.bk .bk-toolbar-button .bk-icon svg {
+  fill: currentColor;
+}
+</style>

package/dist/runtime/editor/components/Tooltip/Context.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    label: string;
+    description?: 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/editor/components/Tooltip/Context.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="_bk_mt-8 _bk_text-xs _bk_w-full">
+    <strong>{{ label }}</strong>
+    <span v-if="description">: {{ description }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  description: { type: String, required: false }
+});
+</script>

package/dist/runtime/editor/components/Tooltip/Context.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    label: string;
+    description?: 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/editor/components/Tooltip/Status.d.vue.ts

@@ -0,0 +1,8 @@
+import type { UiStatus } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    status: UiStatus;
+    description: 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/editor/components/Tooltip/Status.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="_bk_w-full _bk_text-xs _bk_font-medium _bk_mt-8 _bk_flex _bk_gap-5"
+    :class="'bk-scheme-' + scheme"
+  >
+    <div
+      class="_bk_size-[0.75em] _bk_rounded-full _bk_bg-scheme-normal _bk_shrink-0 _bk_translate-y-2"
+    />
+    <div class="_bk_whitespace-normal _bk_text-scheme-normal">{{ description }}</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  status: { type: String, required: true },
+  description: { type: String, required: true }
+});
+const scheme = computed(() => {
+  if (props.status === "success") {
+    return "lime";
+  } else if (props.status === "warning") {
+    return "yellow";
+  }
+  return "red";
+});
+</script>

package/dist/runtime/editor/components/Tooltip/Status.vue.d.ts

@@ -0,0 +1,8 @@
+import type { UiStatus } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    status: UiStatus;
+    description: 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/editor/components/Tooltip/index.d.vue.ts

@@ -0,0 +1,27 @@
+import type { Placement } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    label: string;
+    placement?: Placement | 'inline';
+    description?: string | null;
+    margin?: boolean;
+    small?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    shortcut?: (props: typeof __VLS_1) => any;
+} & {
+    status?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    description: string | null;
+    placement: Placement | "inline";
+    margin: boolean;
+}, {}, {}, {}, 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/editor/components/Tooltip/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="_bk_text-white _bk_text-sm _bk_rounded _bk_select-none _bk_pointer-events-none _bk_leading-none _bk_whitespace-nowrap _bk_min-h-40 _bk_font-sans _bk_flex _bk_flex-col _bk_justify-center"
+    :class="{
+  '_bk_!text-xs _bk_!min-h-25 _bk_!px-5 _bk_!py-3': small,
+  '_bk_absolute _bk_invisible _bk_group-hover/tooltip:visible _bk_bg-mono-800/90 _bk_p-10': placement !== 'inline',
+  '_bk_top-full _bk_mt-5': placement.startsWith('below-'),
+  '_bk_bottom-full _bk_mb-5': placement.startsWith('above-'),
+  '_bk_top-0': placement.startsWith('top-'),
+  '_bk_bottom-0': placement.startsWith('bottom-'),
+  '_bk_top-1/2 _bk_-translate-y-1/2': placement.startsWith('center-'),
+  '_bk_left-0': placement.endsWith('-left'),
+  '_bk_ml-5': placement.endsWith('-left') && margin,
+  '_bk_right-0': placement.endsWith('-right'),
+  '_bk_mr-5': placement.endsWith('-right') && margin,
+  '_bk_left-full _bk_ml-5': placement.endsWith('-after'),
+  '_bk_right-full _bk_mr-5': placement.endsWith('-before'),
+  '_bk_left-1/2 _bk_-translate-x-1/2': placement.endsWith('-center')
+}"
+  >
+    <div class="_bk_flex _bk_gap-5 _bk_justify-between _bk_items-center">
+      <div class="_bk_font-bold" v-html="label" />
+      <slot name="shortcut" />
+    </div>
+    <div v-if="description" class="_bk_font-normal _bk_mt-5 _bk_text-xs">
+      <div v-if="description" v-html="description" />
+    </div>
+    <slot name="status" />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  placement: { type: String, required: false, default: "below-left" },
+  description: { type: [String, null], required: false, default: "" },
+  margin: { type: Boolean, required: false, default: false },
+  small: { type: Boolean, required: false }
+});
+</script>

package/dist/runtime/editor/components/Tooltip/index.vue.d.ts

@@ -0,0 +1,27 @@
+import type { Placement } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    label: string;
+    placement?: Placement | 'inline';
+    description?: string | null;
+    margin?: boolean;
+    small?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    shortcut?: (props: typeof __VLS_1) => any;
+} & {
+    status?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    description: string | null;
+    placement: Placement | "inline";
+    margin: boolean;
+}, {}, {}, {}, 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;
+    };
+};