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

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     :id="'bk-menu-list-button-' + id"
-    class="bk-menu-list-button"
+    class="bk-menu-list-button _bk_grid _bk_items-center _bk_pl-15 _bk_pr-20 _bk_py-15 _bk_gap-x-10 _bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_text-sm _bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200"
     :disabled="disabled"
     :class="type ? 'bk-is-' + type : ''"
     @click.prevent.stop="onClick"
@@ -37,3 +37,187 @@ export default {
   name: "MenuButton"
 };
 </script>
+
+<style>
+@media screen and (min-height: 900px) {
+.bk .bk-menu-list-button {
+
+column-gap: 15px !important;
+
+font-size: 16px !important;
+
+line-height: 24px !important;
+}
+  }
+  .bk .bk-menu-list-button {
+
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+}
+  .bk .bk-menu-list-button[disabled] {
+
+pointer-events: none;
+}
+  .bk .bk-menu-list-button[disabled] .bk-menu-list-icon {
+
+--bk-tw-border-opacity: 1;
+
+border-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-border-opacity, 1));
+
+--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-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button[disabled] span,
+    .bk .bk-menu-list-button[disabled] strong {
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button strong {
+
+font-weight: 600;
+}
+  .bk .bk-menu-list-button span {
+    grid-column: 2;
+    font-size: 14px;
+    line-height: 20px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+  }
+  .bk .bk-menu-list-button:not([disabled]).bk-is-danger .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-red-normal) / 0.4);
+
+--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-normal) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button:not([disabled]).bk-is-danger:hover .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-red-normal) / 0.5);
+
+background-color: rgb(var(--bk-theme-red-normal) / 0.2);
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button:not([disabled]).bk-is-success .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
+
+--bk-tw-bg-opacity: 1;
+
+background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button:not([disabled]).bk-is-success:hover .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
+
+background-color: rgb(var(--bk-theme-lime-normal) / 0.2);
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-yellow-normal) / 0.4);
+
+--bk-tw-bg-opacity: 1;
+
+background-color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-bg-opacity, 1));
+
+color: rgb(var(--bk-theme-yellow-dark) / 0.6);
+}
+  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow:hover .bk-menu-list-icon {
+
+border-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
+
+background-color: rgb(var(--bk-theme-yellow-normal) / 0.2);
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
+}
+  .bk .bk-menu-list-button:hover .bk-menu-list-icon {
+
+--bk-tw-border-opacity: 1;
+
+border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
+
+--bk-tw-bg-opacity: 1;
+
+background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+}
+
+.bk .bk-menu-list-icon {
+
+display: flex;
+
+align-items: center;
+
+justify-content: center;
+
+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));
+
+--bk-tw-bg-opacity: 1;
+
+background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+
+--bk-tw-text-opacity: 1;
+
+color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+
+height: 40px;
+
+width: 40px;
+  grid-column: 1;
+  grid-row: 1 / -1;
+}
+
+@media screen and (min-height: 900px) {
+
+.bk .bk-menu-list-icon {
+
+width: 50px;
+
+height: 50px;
+}
+  }
+
+.bk .bk-menu-list-icon svg {
+
+pointer-events: none;
+
+height: 25px;
+
+width: 25px;
+
+fill: currentColor;
+}
+</style>

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

@@ -2,16 +2,20 @@
   <BlokkliTransition name="menu">
     <div
       v-if="menuOpen"
-      class="bk bk-menu-list"
+      class="bk _bk_fixed _bk_inset-y-0 _bk_left-0 _bk_bg-white _bk_shadow-lg _bk_max-w-[480px] _bk_lg:min-w-[400px] _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-menu _bk_w-[calc(100vw-40px)]"
       @wheel.passive.stop
       @touchstart.stop.passive
       @touchmove.stop.passive
     >
-      <button :class="{ 'bk-is-active': menuOpen }" @click="closeMenu">
-        <Icon name="bk_mdi_close" />
+      <button
+        :class="{ 'bk-is-active': menuOpen }"
+        class="_bk_h-40 _bk_md:h-50 _bk_flex _bk_items-center _bk_text-base _bk_font-bold _bk_pl-15 _bk_md:pl-25 _bk_bg-white _bk_text-mono-950"
+        @click="closeMenu"
+      >
+        <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
       </button>
-      <div class="bk-menu-list-inner">
-        <div id="bk-menu-primary">
+      <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col">
+        <div id="bk-menu-primary" class="_bk_grid _bk_border-t _bk_border-t-mono-200">
           <MenuButton
             v-for="button in primaryButtons"
             :id="button.id"
@@ -24,7 +28,7 @@
             @click="onClick(button)"
           />
         </div>
-        <div id="bk-menu-secondary">
+        <div id="bk-menu-secondary" class="_bk_mt-auto">
           <MenuButton
             v-for="button in secondaryButtons"
             :id="button.id"
@@ -37,14 +41,24 @@
             @click="onClick(button)"
           />
         </div>
-        <aside class="bk-menu-meta">
-          <div class="bk-menu-meta-logo">
-            <Icon name="logo" />
+        <aside
+          class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-mono-100 _bk_text-mono-600 _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
+        >
+          <div class="_bk_flex _bk_gap-5 _bk_items-center">
+            <Icon
+              name="logo"
+              class="_bk_bg-accent-700 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-white"
+            />
             <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
           </div>
 
           <div>
-            <a href="https://www.blokk.li" target="_blank">blokk.li</a>
+            <a
+              href="https://www.blokk.li"
+              target="_blank"
+              class="_bk_hover:text-accent-700 _bk_hover:underline"
+              >blokk.li</a
+            >
           </div>
         </aside>
       </div>

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

@@ -5,14 +5,18 @@ type __VLS_Props = {
     id: string;
     title: string;
     anchorEl?: HTMLElement | null;
+    buttonLabel?: string;
     anchorCoordinates?: Coord | null;
     placementY?: PlacementVertical;
     placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
+    fullscreen?: boolean;
 };
-declare var __VLS_6: {};
+declare var __VLS_1: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;

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

@@ -2,7 +2,11 @@
   <div
     ref="el"
     class="bk bk-artboard-tooltip"
-    :class="['bk-is-y-' + placementY, 'bk-is-x-' + placementX]"
+    :class="[
+  'bk-is-y-' + placementY,
+  'bk-is-x-' + placementX,
+  { 'bk-is-fullscreen': fullscreen }
+]"
     :style="{
   '--bk-caret-x': caretX
 }"
@@ -10,9 +14,11 @@
   >
     <div class="bk bk-artboard-tooltip-inner bk-caret-tooltip-inner">
       <div class="bk-artboard-tooltip-header">
-        <div v-html="title" />
+        <div class="_bk_mr-auto" v-html="title" />
+        <slot name="header" />
         <button @click="$emit('close')">
           <Icon :name="closeIcon" />
+          <span v-if="buttonLabel">{{ buttonLabel }}</span>
         </button>
       </div>
       <slot />
@@ -37,10 +43,12 @@ const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
   anchorEl: { type: null, required: false, default: null },
+  buttonLabel: { type: String, required: false },
   anchorCoordinates: { type: [Object, null], required: false, default: null },
   placementY: { type: String, required: false, default: "auto" },
   placementX: { type: String, required: false, default: "center" },
-  closeIcon: { type: null, required: false, default: "bk_mdi_close" }
+  closeIcon: { type: null, required: false, default: "bk_mdi_close" },
+  fullscreen: { type: Boolean, required: false }
 });
 const emit = defineEmits(["close"]);
 const el = useTemplateRef("el");
@@ -64,6 +72,9 @@ const { placementY, placementX, caretX } = useStickyToolbar(el, {
   },
   getCaretWidth() {
     return 30;
+  },
+  isFullscreen() {
+    return !!props.fullscreen;
   }
 });
 watch(ui.openTooltip, (id) => {
@@ -88,3 +99,212 @@ onBeforeUnmount(() => {
   }
 });
 </script>
+
+<style>
+.bk.bk-artboard-tooltip {
+  --bk-gap: 15px;
+  --bk-caret-size: 10px;
+  pointer-events: auto;
+  position: absolute;
+  left: 0px;
+  bottom: 50px;
+  z-index: calc(var(--bk-z-index-base) + 170000) /* "selection-add" */;
+  will-change: transform;
+}
+@media (min-width: 1024px) {
+  .bk.bk-artboard-tooltip {
+    position: absolute;
+    bottom: auto;
+    top: 0px;
+  }
+}
+
+  .bk.bk-artboard-tooltip:before,
+  .bk.bk-artboard-tooltip:after {
+    content: '';
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    position: absolute;
+    transform: translateX(
+      calc(((var(--bk-caret-x)) * 1px) - var(--bk-caret-size))
+    );
+  }
+
+  .bk.bk-artboard-tooltip:before {
+    --bk-header-bg: var(--bk-border);
+  }
+
+  .bk.bk-artboard-tooltip.bk-is-y-top:before,
+    .bk.bk-artboard-tooltip.bk-is-y-top:after {
+      border-width: var(--bk-caret-size) var(--bk-caret-size) 0
+        var(--bk-caret-size);
+      border-color: var(--bk-header-bg) transparent transparent transparent;
+      top: 100%;
+      left: 0px;
+    }
+
+  .bk.bk-artboard-tooltip.bk-is-y-top:after {
+      --bk-header-bg: var(--bk-bg);
+      margin-top: -1px;
+    }
+
+  .bk.bk-artboard-tooltip.bk-is-y-bottom:before,
+    .bk.bk-artboard-tooltip.bk-is-y-bottom:after {
+      border-width: 0 var(--bk-caret-size) var(--bk-caret-size)
+        var(--bk-caret-size);
+      border-color: transparent transparent var(--bk-header-bg) transparent;
+      bottom: 100%;
+    }
+
+  .bk.bk-artboard-tooltip.bk-is-y-bottom:after {
+  margin-bottom: -1px;
+}
+
+  /* No vertical caret when centered */
+
+  .bk.bk-artboard-tooltip.bk-is-y-center:before,
+    .bk.bk-artboard-tooltip.bk-is-y-center:after {
+  display: none;
+}
+
+  /* Caret on left side pointing left */
+
+  .bk.bk-artboard-tooltip.bk-is-x-right:before,
+    .bk.bk-artboard-tooltip.bk-is-x-right:after {
+      border-width: var(--bk-caret-size) var(--bk-caret-size)
+        var(--bk-caret-size) 0;
+      border-color: transparent var(--bk-header-bg) transparent transparent;
+      right: 100%;
+      top: 50%;
+      left: auto;
+      transform: translateX(0) translateY(-50%);
+    }
+
+  .bk.bk-artboard-tooltip.bk-is-x-right:after {
+  margin-right: -1px;
+}
+
+  /* Caret on right side pointing right */
+
+  .bk.bk-artboard-tooltip.bk-is-x-left:before,
+    .bk.bk-artboard-tooltip.bk-is-x-left:after {
+      border-width: var(--bk-caret-size) 0 var(--bk-caret-size)
+        var(--bk-caret-size);
+      border-color: transparent transparent transparent var(--bk-header-bg);
+      left: 100%;
+      top: 50%;
+      right: auto;
+      transform: translateX(0) translateY(-50%);
+    }
+
+  .bk.bk-artboard-tooltip.bk-is-x-left:after {
+  margin-left: -1px;
+}
+
+  .bk.bk-artboard-tooltip.bk-is-fullscreen:before,
+    .bk.bk-artboard-tooltip.bk-is-fullscreen:after {
+  display: none;
+}
+
+  .bk.bk-artboard-tooltip.bk-is-fullscreen .bk-artboard-tooltip-inner {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  border-radius: 0px;
+}
+
+  @media (min-width: 1024px) {
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-inner {
+    border-radius: 6px;
+    --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
+    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  }
+}
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-inner {
+    border: 1px solid var(--bk-border);
+    background: var(--bk-bg);
+  }
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-header {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 0.025em;
+    background: var(--bk-header-bg);
+    color: var(--bk-header-text);
+}
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-header > div {
+      padding: var(--bk-gap);
+    }
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-header > button {
+  display: flex;
+  height: 40px;
+  min-width: 40px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
+      color: var(--bk-header-text);
+}
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-header > button:hover {
+        background: var(--bk-header-hover);
+      }
+
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-header > button svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.bk .bk-artboard-tooltip-info {
+  display: flex;
+  align-items: center;
+  border-top-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+.bk .bk-artboard-tooltip-info-button {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / var(--bk-tw-text-opacity, 1));
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.bk .bk-artboard-tooltip-info-button:hover {
+  background-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 0.1);
+}
+
+.bk .bk-artboard-tooltip-info-button {
+  border-right-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-right-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+.bk .bk-artboard-tooltip-info-button[disabled] {
+  pointer-events: none;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+</style>

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

@@ -5,14 +5,18 @@ type __VLS_Props = {
     id: string;
     title: string;
     anchorEl?: HTMLElement | null;
+    buttonLabel?: string;
     anchorCoordinates?: Coord | null;
     placementY?: PlacementVertical;
     placementX?: PlacementHorizontal;
     closeIcon?: BlokkliIcon;
+    fullscreen?: boolean;
 };
-declare var __VLS_6: {};
+declare var __VLS_1: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;

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

@@ -30,3 +30,26 @@ onBeforeUnmount(() => {
   observer?.disconnect();
 });
 </script>
+
+<style>
+.bk .bk-auto-height {
+  position: relative;
+  overflow: hidden;
+  transition: 0.3s height;
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1)
+}
+
+  .bk .bk-auto-height.bk-is-top .bk-auto-height-inner {
+  top: 0px
+}
+
+  .bk .bk-auto-height.bk-is-bottom .bk-auto-height-inner {
+  bottom: 0px
+}
+
+  .bk .bk-auto-height .bk-auto-height-inner {
+  position: absolute;
+  left: 0px;
+  width: 100%
+}
+</style>

package/dist/runtime/editor/components/Banner/Inner.d.vue.ts

@@ -0,0 +1,30 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    text?: string;
+    button?: string;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    'before-button'?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    text: string;
+    button: string;
+}, {}, {}, {}, 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/Banner/Inner.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="_bk_p-10">
+    <slot name="before" />
+    <div class="_bk_lg:flex _bk_lg:items-center _bk_lg:gap-10">
+      <Icon :name="icon" class="_bk_size-25 _bk_mr-10 _bk_hidden _bk_lg:flex" />
+      <div class="_bk_mr-auto">
+        <slot>
+          <p v-if="text" v-html="text" />
+        </slot>
+      </div>
+      <slot name="before-button" />
+      <button
+        v-if="button"
+        class="bk-button bk-is-small bk-is-scheme"
+        @click="$emit('click')"
+      >
+        {{ button }}
+        <Icon name="bk_mdi_close" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  icon: { type: null, required: true },
+  text: { type: String, required: false, default: void 0 },
+  button: { type: String, required: false, default: void 0 }
+});
+defineEmits(["click"]);
+</script>

package/dist/runtime/editor/components/Banner/Inner.vue.d.ts

@@ -0,0 +1,30 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon: BlokkliIcon;
+    text?: string;
+    button?: string;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    'before-button'?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    text: string;
+    button: string;
+}, {}, {}, {}, 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;
+    };
+};