@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/templates/components/main/admin/header/_parts/RequestErrors.vue

@@ -0,0 +1,52 @@
+<script setup>
+import Notification from "./Notification.vue";
+import { useCwa } from "#imports";
+import { ErrorType } from "#cwa/runtime/storage/stores/error/state";
+const $cwa = useCwa();
+function removeError(timestamp) {
+  $cwa.resourcesManager.removeError(timestamp);
+}
+</script>
+
+<template>
+  <div
+    aria-live="assertive"
+    class="cwa:pointer-events-none cwa:fixed cwa:inset-0 cwa:flex cwa:items-end cwa:pt-20 cwa:pb-4 cwa:py-6 cwa:sm:px-4 cwa:sm:items-start cwa:z-notifications"
+  >
+    <TransitionGroup
+      tag="ul"
+      class="cwa:list-none cwa:flex cwa:w-full cwa:flex-col cwa:items-center cwa:gap-y-4 cwa:sm:items-end"
+      enter-active-class="cwa:transform cwa:ease-out cwa:duration-300 cwa:transition"
+      enter-from-class="cwa:translate-y-2 cwa:opacity-0 cwa:sm:translate-y-0 cwa:sm:translate-x-2"
+      enter-to-class="cwa:translate-y-0 cwa:opacity-100 cwa:sm:translate-x-0"
+      leave-active-class="cwa:transition cwa:ease-in cwa:duration-100"
+      leave-from-class="cwa:opacity-100"
+      leave-to-class="cwa:translate-y-2 cwa:opacity-0 cwa:sm:translate-y-0 cwa:sm:translate-x-2"
+    >
+      <Notification
+        v-for="(error, index) in $cwa.resourcesManager.errors"
+        :key="error.timestamp"
+        :data-index="index"
+        @clear="() => removeError(error.timestamp)"
+      >
+        <p class="cwa:text-md cwa:font-bold cwa:text-white">
+          Oops! There was a problem.
+        </p>
+        <ul v-if="error.type === ErrorType.VALIDATION">
+          <li
+            v-for="violation in error.violations"
+            :key="`violation-${violation.property}-${error.timestamp}`"
+          >
+            {{ violation.property }}: {{ violation.message }}
+          </li>
+        </ul>
+        <p
+          v-else
+          class="cwa:mt-1 cwa:text-sm cwa:text-gray-500"
+        >
+          {{ error?.statusCode || "Network Error" }}: {{ error.detail }}
+        </p>
+      </Notification>
+    </TransitionGroup>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/header/_parts/RequestErrors.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/ComponentFocus.vue

@@ -0,0 +1,151 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, toRef, useTemplateRef, watch } from "vue";
+import { useElementSize, useWindowSize } from "@vueuse/core";
+import { useCwa } from "#imports";
+import { getPublishedResourceState } from "#cwa/runtime/resources/resource-utils";
+const props = defineProps({
+  iri: { type: Object, required: true },
+  domElements: { type: Object, required: true }
+});
+const $cwa = useCwa();
+const domElements = toRef(props, "domElements");
+const iri = toRef(props, "iri");
+const canvas = useTemplateRef("canvas");
+const windowSize = useWindowSize();
+const elementSizeInstances = ref([]);
+watch(props.domElements, (newDomElements) => {
+  for (const esInstance of elementSizeInstances.value) {
+    esInstance.stop();
+  }
+  elementSizeInstances.value = [];
+  const newInstances = [];
+  for (const el of newDomElements) {
+    newInstances.push(useElementSize(el));
+  }
+  elementSizeInstances.value = newInstances;
+});
+const totalWidthAndHeight = computed(() => {
+  let totalValue = 0;
+  for (const esInstance of elementSizeInstances.value) {
+    totalValue += esInstance.width + esInstance.height;
+  }
+  return totalValue;
+});
+const resource = computed(() => {
+  if (!iri.value) {
+    return;
+  }
+  return $cwa.resources.getResource(iri.value).value;
+});
+const resourceData = computed(() => resource.value?.data);
+const position = computed(() => {
+  const clearCoords = {
+    top: 999999999999,
+    left: 99999999999,
+    width: 0,
+    height: 0,
+    windowSize: {
+      width: windowSize.width.value,
+      height: windowSize.height.value
+    },
+    totalWidthAndHeight: totalWidthAndHeight.value
+  };
+  for (const domElement of domElements.value) {
+    if (domElement.nodeType !== 1) {
+      continue;
+    }
+    const domRect = domElement.getBoundingClientRect();
+    clearCoords.top = Math.min(clearCoords.top, domRect.top);
+    clearCoords.left = Math.min(clearCoords.left, domRect.left);
+    clearCoords.width = Math.max(clearCoords.width, domRect.right - clearCoords.left);
+    clearCoords.height = Math.max(clearCoords.height, domRect.bottom - clearCoords.top);
+  }
+  const addY = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+  clearCoords.top += addY;
+  const addX = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
+  clearCoords.left += addX;
+  return {
+    top: clearCoords.top,
+    left: clearCoords.left,
+    width: clearCoords.width,
+    height: clearCoords.height
+  };
+});
+const cssStyle = computed(() => {
+  return {
+    top: `${position.value.top}px`,
+    left: `${position.value.left}px`,
+    width: `${position.value.width}px`,
+    height: `${position.value.height}px`
+  };
+});
+const borderColor = computed(() => {
+  if (!resource.value) {
+    return;
+  }
+  if (resource.value.data?._metadata.adding) {
+    return "cwa:outline-orange";
+  }
+  const publishedState = getPublishedResourceState(resource.value);
+  if (publishedState !== void 0) {
+    return publishedState ? "cwa:outline-green" : "cwa:outline-orange";
+  }
+  return iri.value?.startsWith("/_/") ? "cwa:outline-magenta" : "cwa:outline-green";
+});
+async function redraw() {
+  drawCanvas();
+}
+function drawCanvas() {
+  if (!canvas.value) {
+    return;
+  }
+  const ctx = canvas.value.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const offset = 7;
+  const width = Math.max(windowSize.width.value, document.body.clientWidth);
+  const height = Math.max(windowSize.height.value, document.body.clientHeight);
+  ctx.reset();
+  canvas.value.width = width;
+  canvas.value.height = height;
+  ctx.fillStyle = "rgba(0,0,0,0.4)";
+  ctx.beginPath();
+  ctx.rect(0, 0, width, height);
+  drawRoundedRect(ctx, position.value.left - offset, position.value.top - offset, position.value.width + offset * 2, position.value.height + offset * 2, 8);
+  ctx.fill();
+}
+function drawRoundedRect(ctx, x, y, width, height, radius) {
+  ctx.moveTo(x, y + radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.arcTo(x, y, x, y + radius, radius);
+}
+onMounted(() => {
+  $cwa.admin.eventBus.on("redrawFocus", redraw);
+  watch(resourceData, $cwa.admin.emitRedraw, { deep: true, flush: "post" });
+  watch(canvas, (newCanvas) => newCanvas && redraw());
+  watch(totalWidthAndHeight, $cwa.admin.emitRedraw);
+});
+onBeforeUnmount(() => {
+  $cwa.admin.eventBus.off("redrawFocus", redraw);
+});
+defineExpose({
+  redraw
+});
+</script>
+
+<template>
+  <client-only>
+    <canvas
+      ref="canvas"
+      class="cwa:z-100 cwa:pointer-events-none cwa:absolute cwa:top-0 cwa:left-0"
+    />
+    <div
+      :class="[borderColor]"
+      :style="cssStyle"
+      class="cwa:animate-pulse cwa:absolute cwa:outline-2 cwa:outline-offset-4 cwa:pointer-events-none cwa:outline"
+    />
+  </client-only>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/ComponentFocus.vue.d.ts

@@ -0,0 +1,10 @@
+import type { ComputedRef, Ref } from 'vue';
+type __VLS_Props = {
+    iri: Ref<string | undefined>;
+    domElements: ComputedRef<HTMLElement[]>;
+};
+declare function redraw(): Promise<void>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    redraw: typeof redraw;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useCwa } from "#cwa/runtime/composables/cwa";
+const canvas = useTemplateRef("canvas");
+const windowSize = useWindowSize();
+const $cwa = useCwa();
+const props = defineProps({
+  page: { type: null, required: true },
+  layout: { type: null, required: true }
+});
+async function redraw() {
+  divElementOverlays.value = [];
+  nextTick().then(() => {
+    drawCanvas();
+    divElementOverlays.value = getDivElementOverlays();
+  });
+}
+function getHatchCanvas() {
+  const p = document.createElement("canvas");
+  p.width = 32;
+  p.height = 16;
+  const pctx = p.getContext("2d");
+  if (!pctx) {
+    return;
+  }
+  const x0 = 36;
+  const x1 = -4;
+  const y0 = -2;
+  const y1 = 18;
+  const offset = 32;
+  pctx.strokeStyle = "rgba(255,255,255, .1)";
+  pctx.lineWidth = 5;
+  pctx.beginPath();
+  pctx.moveTo(x0, y0);
+  pctx.lineTo(x1, y1);
+  pctx.moveTo(x0 - offset, y0);
+  pctx.lineTo(x1 - offset, y1);
+  pctx.moveTo(x0 + offset, y0);
+  pctx.lineTo(x1 + offset, y1);
+  pctx.stroke();
+  return p;
+}
+function drawCanvas() {
+  if (!canvas.value) {
+    return;
+  }
+  const ctx = canvas.value.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const width = Math.max(windowSize.width.value, document.body.clientWidth);
+  const height = Math.max(windowSize.height.value, document.body.clientHeight);
+  ctx.reset();
+  canvas.value.width = width;
+  canvas.value.height = height;
+  const hatchCanvas = getHatchCanvas();
+  ctx.fillStyle = hatchCanvas ? ctx.createPattern(hatchCanvas, "repeat") || "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.4)";
+  ctx.beginPath();
+  if ($cwa.admin.resourceStackManager.isEditingLayout.value) {
+    drawLayoutFocus(ctx);
+  } else {
+    drawPageFocus(ctx);
+  }
+  ctx.fill();
+}
+function drawPageFocus(ctx) {
+  const [layoutRect] = getBoundingRect();
+  const pageCoords = getPageCoords();
+  const rightPage = pageCoords.left + pageCoords.width;
+  const bottomPage = pageCoords.top + pageCoords.height;
+  const coordsThree = { x: layoutRect.width, y: bottomPage };
+  const pageFocusCoords = [
+    { x: layoutRect.width, y: 0 },
+    // 2
+    coordsThree,
+    // 3
+    { x: rightPage, y: bottomPage },
+    // 4
+    { x: rightPage, y: pageCoords.top },
+    // 5
+    { x: pageCoords.left, y: pageCoords.top },
+    // 6
+    { x: pageCoords.left, y: bottomPage },
+    // 7
+    coordsThree,
+    // 8
+    { x: layoutRect.width, y: layoutRect.height },
+    // 9
+    { x: 0, y: layoutRect.height }
+    // 10
+    // it will return to start automatically when finished 0:0
+  ];
+  ctx.moveTo(0, 0);
+  for (const coords of pageFocusCoords) {
+    ctx.lineTo(coords.x, coords.y);
+  }
+}
+function drawLayoutFocus(ctx) {
+  const pageCoords = getPageCoords();
+  ctx.moveTo(pageCoords.left, pageCoords.top);
+  ctx.lineTo(pageCoords.left + pageCoords.width, pageCoords.top);
+  ctx.lineTo(pageCoords.left + pageCoords.width, pageCoords.top + pageCoords.height);
+  ctx.lineTo(pageCoords.left, pageCoords.top + pageCoords.height);
+}
+function getBoundingRect() {
+  return [
+    props.layout.getBoundingClientRect(),
+    props.page.getBoundingClientRect()
+  ];
+}
+const getPageCoords = () => {
+  const [layoutRect, pageRect] = getBoundingRect();
+  return {
+    top: pageRect.top - layoutRect.top,
+    left: pageRect.left - layoutRect.left,
+    width: pageRect.width,
+    height: pageRect.height
+  };
+};
+onMounted(() => {
+  $cwa.admin.eventBus.on("redrawFocus", redraw);
+  watch(canvas, (newCanvas) => newCanvas && redraw());
+});
+onBeforeUnmount(() => {
+  $cwa.admin.eventBus.off("redrawFocus", redraw);
+});
+function getDivElementOverlays() {
+  const pageCoords = getPageCoords();
+  const numberToPx = (size) => {
+    return `${size}px`;
+  };
+  if ($cwa.admin.resourceStackManager.isEditingLayout.value) {
+    return [
+      {
+        top: numberToPx(pageCoords.top),
+        left: numberToPx(pageCoords.left),
+        width: numberToPx(pageCoords.width),
+        height: numberToPx(pageCoords.height)
+      }
+    ];
+  }
+  const [layoutRect] = getBoundingRect();
+  const rightPage = pageCoords.left + pageCoords.width;
+  const bottomPage = pageCoords.top + pageCoords.height;
+  return [
+    {
+      top: "0",
+      left: "0",
+      width: numberToPx(layoutRect.width),
+      height: numberToPx(pageCoords.top)
+    },
+    {
+      top: numberToPx(pageCoords.top),
+      left: "0",
+      width: numberToPx(pageCoords.left),
+      height: numberToPx(pageCoords.height)
+    },
+    {
+      top: numberToPx(pageCoords.top),
+      left: numberToPx(rightPage),
+      width: numberToPx(layoutRect.width - rightPage),
+      height: numberToPx(pageCoords.height)
+    },
+    {
+      top: numberToPx(bottomPage),
+      left: "0",
+      width: numberToPx(layoutRect.width),
+      height: numberToPx(layoutRect.height - bottomPage)
+    }
+  ];
+}
+const divElementOverlays = ref(getDivElementOverlays());
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="cwa:pointer-events-none cwa:absolute cwa:top-0 cwa:left-0">
+      <div
+        v-for="(overlay, index) of divElementOverlays"
+        :key="`cwa-admin-overlay-${index}`"
+        :style="overlay"
+        class="cwa:absolute cwa:pointer-events-none cwa:backdrop-blur-[1.5px] cwa:bg-black/30"
+      />
+      <canvas
+        id="cwa-layout-page-overlay"
+        ref="canvas"
+        class="cwa:absolute cwa:top-0 cwa:left-0 cwa:pointer-events-none"
+      />
+    </div>
+  </ClientOnly>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    page: HTMLDivElement;
+    layout: HTMLDivElement;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/ResourceManager.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import ResourceLoadingIndicator from "../_common/ResourceLoadingIndicator.vue";
+import ManagerTabs from "./_parts/ManagerTabs.vue";
+import CwaAdminResourceManagerContextMenu from "./_parts/CwaResourceManagerContextMenu.vue";
+import { useCwa } from "#imports";
+import { CwaUserRoles } from "#cwa/runtime/storage/stores/auth/state";
+import ResourceManagerCtaButton from "#cwa/runtime/templates/components/main/admin/resource-manager/cta/ResourceManagerCtaButton.vue";
+import AddComponentDialog from "#cwa/runtime/templates/components/main/admin/resource-manager/_parts/AddComponentDialog.vue";
+import { useDataResolver } from "#cwa/runtime/templates/components/core/useDataResolver";
+const $cwa = useCwa();
+const currentStackItem = $cwa.admin.resourceStackManager.currentStackItem;
+const spacer = useTemplateRef("spacer");
+const managerHolder = useTemplateRef("managerHolder");
+const allTabsMeta = ref([]);
+const selectedIndex = ref(0);
+const isOpen = ref(false);
+const virtualElement = ref({ getBoundingClientRect: () => ({}) });
+const managerTabs = useTemplateRef("managerTabs");
+const currentManagerTabs = ref();
+const cachedPosition = { top: 0, left: 0 };
+let mousedownTarget = null;
+function showDefaultContext({ top, left }) {
+  const difference = {
+    top: Math.abs(top - cachedPosition.top),
+    left: Math.abs(left - cachedPosition.left)
+  };
+  return isOpen.value && difference.top < 10 && difference.left < 10;
+}
+function openContext({ top, left }) {
+  cachedPosition.top = top;
+  cachedPosition.left = left;
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  });
+  isOpen.value = true;
+}
+function contextMenuHandler(e, type) {
+  const pos = {
+    top: e.clientY,
+    left: e.clientX
+  };
+  if (showDefaultContext(pos) || !$cwa.admin.isEditing || !$cwa.admin.resourceStackManager.isContextPopulating.value) {
+    isOpen.value = false;
+    return;
+  }
+  e.preventDefault();
+  completeStack(e, type, true);
+  openContext(pos);
+}
+function closeContextMenu(e) {
+  isOpen.value = false;
+  completeStack(e, void 0, true);
+}
+function mousedownHandler(e) {
+  mousedownTarget = e.target;
+}
+function clickHandler(e, type) {
+  if (e.target !== mousedownTarget && !$cwa.admin.resourceStackManager.isPopulating.value) {
+    return;
+  }
+  completeStack(e, type);
+  $cwa.admin.resourceStackManager.selectStackIndex(0, false);
+}
+function completeStack(e, type, isContext = false) {
+  $cwa.admin.resourceStackManager.completeStack({ clickTarget: e.target }, isContext, type);
+}
+function selectTab(index) {
+  selectedIndex.value = index;
+}
+const showAdmin = computed(() => {
+  return $cwa.auth.hasRole(CwaUserRoles.ADMIN);
+});
+const showSpacer = computed(() => {
+  return $cwa.admin.resourceStackManager.showManager.value && !!currentStackItem;
+});
+const selectedTab = computed(() => {
+  return currentStackItem.value?.managerTabs?.[selectedIndex.value];
+});
+watch([spacer, managerHolder, currentStackItem, selectedIndex, allTabsMeta], () => {
+  if (!spacer.value || !managerHolder.value || !currentStackItem.value) {
+    return;
+  }
+  const newHeight = managerHolder.value.clientHeight;
+  spacer.value.style.height = `${newHeight}px`;
+  nextTick().then(() => $cwa.admin.emitRedraw());
+}, {
+  flush: "post"
+});
+const resolverProps = computed(() => {
+  return {
+    iri: currentStackItem.value?.iri
+  };
+});
+useDataResolver(allTabsMeta, {
+  components: currentManagerTabs,
+  props: resolverProps,
+  propsValidator: (props) => {
+    return !!props.iri;
+  }
+});
+watch(currentStackItem, (newCurrent, oldCurrent) => {
+  if (oldCurrent && newCurrent && $cwa.resources.isIriPublishableEquivalent(oldCurrent.iri, newCurrent.iri)) {
+    return;
+  }
+  allTabsMeta.value = [];
+  managerTabs.value?.resetTabs();
+  currentManagerTabs.value = newCurrent?.managerTabs;
+});
+onMounted(() => {
+  window.addEventListener("mousedown", mousedownHandler);
+  window.addEventListener("resize", $cwa.admin.emitRedraw, false);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", $cwa.admin.emitRedraw);
+});
+defineExpose({
+  clickHandler,
+  contextMenuHandler,
+  closeContextMenu
+});
+</script>
+
+<template>
+  <div
+    v-if="showSpacer"
+    id="cwa-manager-spacer"
+    ref="spacer"
+    class="relative"
+  />
+  <Transition
+    enter-from-class="cwa:transform cwa:translate-y-full"
+    enter-active-class="cwa:duration-200 cwa:ease-out"
+    enter-to-class="cwa:translate-y-0"
+    leave-from-class="cwa:translate-y-0"
+    leave-active-class="cwa:duration-200 cwa:ease-in"
+    leave-to-class="cwa:transform cwa:translate-y-full"
+  >
+    <div
+      v-if="$cwa.admin.resourceStackManager.showManager.value"
+      class="fixed cwa:bottom-0 cwa:z-manager cwa:w-full cwa:text-white cwa:bg-dark/40"
+      @click.stop
+    >
+      <div class="cwa:dark-blur">
+        <div
+          v-if="allTabsMeta.length"
+          ref="managerHolder"
+        >
+          <ResourceLoadingIndicator class="cwa:absolute cwa:bottom-full cwa:left-0" />
+          <div class="cwa:flex">
+            <div class="cwa:grow">
+              <div class="cwa:flex cwa:items-center cwa:pt-3 cwa:px-4 cwa:gap-x-3">
+                <div class="cwa:grow">
+                  <ManagerTabs
+                    ref="managerTabs"
+                    :tabs="allTabsMeta"
+                    @click="selectTab"
+                  />
+                </div>
+                <div class="cwa:flex cwa:light cwa:items-center cwa:content-center cwa:justify-center">
+                  <ResourceManagerCtaButton />
+                </div>
+              </div>
+              <div class="cwa:p-4 cwa:min-h-[74px] cwa:flex cwa:items-center">
+                <component
+                  :is="selectedTab"
+                  v-if="selectedTab"
+                  class="cwa:w-full"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+  <CwaAdminResourceManagerContextMenu
+    v-if="showAdmin"
+    v-model="isOpen"
+    :virtual-element="virtualElement"
+  />
+  <AddComponentDialog />
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/ResourceManager.vue.d.ts

@@ -0,0 +1,9 @@
+declare function contextMenuHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare function closeContextMenu(e: MouseEvent): void;
+declare function clickHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare const _default: import("vue").DefineComponent<{}, {
+    clickHandler: typeof clickHandler;
+    contextMenuHandler: typeof contextMenuHandler;
+    closeContextMenu: typeof closeContextMenu;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;