@frigear-nu/subscriptions 0.0.0-stage → 0.0.2

package/dist/runtime/app/components/SubscriptionPlans.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { usePlans } from "../composables/usePlans";
+import { useSubscription } from "../composables/useSubscription";
+defineOptions({ name: "SubscriptionPlans" });
+const props = defineProps({
+  locale: { type: String, required: false },
+  currency: { type: String, required: false },
+  interval: { type: String, required: false },
+  plans: { type: Array, required: false },
+  confirmChange: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["select"]);
+const t = useModuleT("subscriptions.plans");
+const tp = useModuleT("subscriptions.catalog");
+const ti = useModuleT("subscriptions.interval");
+const { plans: allPlans, status } = usePlans();
+const { plan: currentPlan, isActive, pending, subscribe, error } = useSubscription();
+const visible = computed(() => allPlans.value.filter((p) => !props.plans || props.plans.includes(p.key)));
+const currentRank = computed(() => allPlans.value.find((p) => p.key === currentPlan.value)?.rank ?? null);
+function priceFor(plan) {
+  return plan.prices.find((p) => p.interval === props.interval) ?? plan.prices[0];
+}
+function formatPrice(price) {
+  if (price.amount === null) return "";
+  return new Intl.NumberFormat(props.locale, {
+    style: "currency",
+    currency: (props.currency ?? price.currency).toUpperCase()
+  }).format(price.amount / 100);
+}
+function intervalLabel(price) {
+  const singular = { day: "day", week: "week", month: "month", year: "year" };
+  const unit = singular[price.interval];
+  if (price.intervalCount <= 1) return ti(unit, unit);
+  return `${price.intervalCount} ${ti(`${unit}s`, `${unit}s`)}`;
+}
+const labelOf = (plan) => tp(`${plan.key}.label`, plan.label);
+const descriptionOf = (plan) => plan.description ? tp(`${plan.key}.description`, plan.description) : "";
+function stateOf(plan) {
+  if (!isActive.value) return "subscribe";
+  if (plan.key === currentPlan.value) return "current";
+  if (currentRank.value === null) return "subscribe";
+  return plan.rank > currentRank.value ? "upgrade" : "downgrade";
+}
+const stateLabel = (state) => t(state, { current: "Current plan", subscribe: "Subscribe", upgrade: "Upgrade", downgrade: "Downgrade" }[state]);
+const confirming = ref(null);
+const confirmOpen = computed({
+  get: () => confirming.value !== null,
+  set: (value) => {
+    if (!value) confirming.value = null;
+  }
+});
+async function go(plan, price) {
+  emit("select", plan, price);
+  confirming.value = null;
+  await subscribe(plan.key).catch(() => void 0);
+}
+function choose(plan) {
+  const price = priceFor(plan);
+  if (!price) return;
+  if (props.confirmChange && isActive.value) confirming.value = { plan, price };
+  else go(plan, price);
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <slot
+      v-if="status === 'pending' && !visible.length"
+      name="loading"
+    >
+      <p class="text-center text-sm text-muted">
+        {{ t("loading", "Loading plans\u2026") }}
+      </p>
+    </slot>
+
+    <slot
+      v-else-if="!visible.length"
+      name="empty"
+    >
+      <p class="text-center text-sm text-muted">
+        {{ t("empty", "No plans are available right now.") }}
+      </p>
+    </slot>
+
+    <UAlert
+      v-if="error"
+      color="error"
+      variant="subtle"
+      :description="error"
+    />
+
+    <div
+      v-if="visible.length"
+      class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+    >
+      <UCard
+        v-for="plan in visible"
+        :key="plan.key"
+        :data-plan="plan.key"
+      >
+        <template #header>
+          <slot
+            name="header"
+            :plan="plan"
+            :state="stateOf(plan)"
+          >
+            <div class="flex items-center justify-between gap-2">
+              <h3 class="font-semibold">
+                {{ labelOf(plan) }}
+              </h3>
+              <slot
+                name="badge"
+                :plan="plan"
+                :state="stateOf(plan)"
+              >
+                <UBadge
+                  v-if="stateOf(plan) === 'current'"
+                  color="primary"
+                  variant="subtle"
+                >
+                  {{ t("current", "Current plan") }}
+                </UBadge>
+              </slot>
+            </div>
+            <p
+              v-if="descriptionOf(plan)"
+              class="mt-1 text-sm text-muted"
+            >
+              {{ descriptionOf(plan) }}
+            </p>
+          </slot>
+        </template>
+
+        <slot
+          name="price"
+          :plan="plan"
+          :price="priceFor(plan)"
+          :format-price="formatPrice"
+          :interval-label="intervalLabel"
+        >
+          <template v-if="priceFor(plan)">
+            <p class="text-2xl font-bold">
+              {{ formatPrice(priceFor(plan)) }}
+              <span class="text-sm font-normal text-muted">/ {{ intervalLabel(priceFor(plan)) }}</span>
+            </p>
+            <p
+              v-if="priceFor(plan).trialPeriodDays"
+              class="mt-1 text-sm text-muted"
+            >
+              {{ t("trial", "{days}-day free trial", { days: priceFor(plan).trialPeriodDays }) }}
+            </p>
+          </template>
+        </slot>
+
+        <slot
+          name="features"
+          :plan="plan"
+        />
+
+        <template #footer>
+          <slot
+            name="action"
+            :plan="plan"
+            :state="stateOf(plan)"
+            :pending="pending"
+            :select="() => choose(plan)"
+          >
+            <UButton
+              block
+              :loading="pending"
+              :disabled="stateOf(plan) === 'current' || !priceFor(plan)"
+              :variant="stateOf(plan) === 'current' ? 'outline' : 'solid'"
+              :label="stateLabel(stateOf(plan))"
+              @click="choose(plan)"
+            />
+          </slot>
+        </template>
+      </UCard>
+    </div>
+
+    <UModal
+      v-model:open="confirmOpen"
+      :title="t('confirmTitle', 'Change plan')"
+    >
+      <template #body>
+        <slot
+          name="confirm"
+          :plan="confirming?.plan"
+          :price="confirming?.price"
+        >
+          <p>{{ t("confirmBody", "Switch to {plan}? Your subscription will be updated.", { plan: confirming ? labelOf(confirming.plan) : "" }) }}</p>
+        </slot>
+      </template>
+      <template #footer>
+        <slot
+          name="confirm-actions"
+          :plan="confirming?.plan"
+          :price="confirming?.price"
+          :confirm="() => confirming && go(confirming.plan, confirming.price)"
+        >
+          <UButton
+            variant="outline"
+            :label="t('cancel', 'Cancel')"
+            @click="confirming = null"
+          />
+          <UButton
+            :label="t('confirm', 'Confirm')"
+            :loading="pending"
+            @click="confirming && go(confirming.plan, confirming.price)"
+          />
+        </slot>
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,71 @@
+import type { SubscriptionPlan, SubscriptionPlanPrice } from '../composables/usePlans.js';
+type __VLS_Props = {
+    locale?: string;
+    /** Override the price currency formatting currency (defaults to the price's own currency). */
+    currency?: string;
+    interval?: SubscriptionPlanPrice['interval'];
+    /** Only show these plan keys. */
+    plans?: string[];
+    /** Ask for confirmation (modal) before changing an existing subscription. */
+    confirmChange?: boolean;
+};
+declare function formatPrice(price: SubscriptionPlanPrice): string;
+declare function intervalLabel(price: SubscriptionPlanPrice): any;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_17: {
+    plan: any;
+    state: "upgrade" | "downgrade" | "subscribe" | "current";
+}, __VLS_19: {
+    plan: any;
+    state: "upgrade" | "downgrade" | "subscribe" | "current";
+}, __VLS_27: {
+    plan: any;
+    price: SubscriptionPlanPrice | undefined;
+    formatPrice: typeof formatPrice;
+    intervalLabel: typeof intervalLabel;
+}, __VLS_29: {
+    plan: any;
+}, __VLS_32: {
+    plan: any;
+    state: "upgrade" | "downgrade" | "subscribe" | "current";
+    pending: any;
+    select: () => void;
+}, __VLS_48: {
+    plan: any;
+    price: any;
+}, __VLS_51: {
+    plan: any;
+    price: any;
+    confirm: () => any;
+};
+type __VLS_Slots = {} & {
+    loading?: (props: typeof __VLS_1) => any;
+} & {
+    empty?: (props: typeof __VLS_3) => any;
+} & {
+    header?: (props: typeof __VLS_17) => any;
+} & {
+    badge?: (props: typeof __VLS_19) => any;
+} & {
+    price?: (props: typeof __VLS_27) => any;
+} & {
+    features?: (props: typeof __VLS_29) => any;
+} & {
+    action?: (props: typeof __VLS_32) => any;
+} & {
+    confirm?: (props: typeof __VLS_48) => any;
+} & {
+    'confirm-actions'?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (plan: SubscriptionPlan, price: SubscriptionPlanPrice) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((plan: SubscriptionPlan, price: SubscriptionPlanPrice) => 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/app/components/SubscriptionStatus.d.vue.ts

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    locale?: string;
+};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
+    plan: any;
+    label: any;
+    subscription: any;
+}, __VLS_15: {
+    subscription: any;
+    badge: any;
+}, __VLS_23: {
+    subscription: any;
+    cancelsAt: any;
+    dateText: any;
+}, __VLS_25: {}, __VLS_33: {
+    manage: () => Promise<void | undefined>;
+    resubscribe: () => Promise<any>;
+    cancelling: boolean;
+    pending: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_9) => any;
+} & {
+    loading?: (props: typeof __VLS_11) => any;
+} & {
+    plan?: (props: typeof __VLS_13) => any;
+} & {
+    badge?: (props: typeof __VLS_15) => any;
+} & {
+    dates?: (props: typeof __VLS_23) => any;
+} & {
+    empty?: (props: typeof __VLS_25) => any;
+} & {
+    actions?: (props: typeof __VLS_33) => 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/app/components/SubscriptionStatus.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { usePlans } from "../composables/usePlans";
+import { useSubscription } from "../composables/useSubscription";
+defineOptions({ name: "SubscriptionStatus" });
+const props = defineProps({
+  locale: { type: String, required: false }
+});
+const t = useModuleT("subscriptions.status");
+const tp = useModuleT("subscriptions.catalog");
+const { plans } = usePlans();
+const { subscription, plan, status, isActive, cancelsAt, pending, error, subscribe, openPortal } = useSubscription();
+const planLabel = computed(() => {
+  const found = plans.value.find((p) => p.key === plan.value);
+  return plan.value ? tp(`${plan.value}.label`, found?.label ?? plan.value) : plan.value;
+});
+const badge = computed(() => {
+  const value = subscription.value?.status;
+  if (value === "active") return { label: t("active", "Active"), color: "success" };
+  if (value === "trialing") return { label: t("trialing", "Trial"), color: "info" };
+  if (value === "past_due" || value === "unpaid") return { label: t("pastDue", "Past due"), color: "warning" };
+  if (value === "canceled") return { label: t("canceled", "Canceled"), color: "neutral" };
+  return { label: t("other", "Inactive"), color: "neutral" };
+});
+function formatDate(value) {
+  return value ? new Intl.DateTimeFormat(props.locale, { dateStyle: "long" }).format(new Date(value)) : "";
+}
+const dateText = computed(() => {
+  if (cancelsAt.value) return t("cancels", "Ends on {date}", { date: formatDate(cancelsAt.value) });
+  const end = subscription.value?.currentPeriodEnd;
+  return end ? t("renews", "Renews on {date}", { date: formatDate(end) }) : "";
+});
+const resubscribe = () => subscription.value?.planKey ? subscribe(subscription.value.planKey).catch(() => void 0) : subscribe(subscription.value?.priceId ?? "").catch(() => void 0);
+const manage = () => openPortal().catch(() => void 0);
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <slot name="header">
+        <h3 class="font-semibold">
+          {{ t("title", "Your subscription") }}
+        </h3>
+      </slot>
+    </template>
+
+    <slot
+      v-if="status === 'pending' && !subscription"
+      name="loading"
+    >
+      <p class="text-sm text-muted">
+        {{ t("loading", "Loading subscription\u2026") }}
+      </p>
+    </slot>
+
+    <template v-else-if="isActive && subscription">
+      <div class="flex flex-wrap items-center gap-2">
+        <slot
+          name="plan"
+          :plan="plan"
+          :label="planLabel"
+          :subscription="subscription"
+        >
+          <span class="font-medium">{{ planLabel }}</span>
+        </slot>
+        <slot
+          name="badge"
+          :subscription="subscription"
+          :badge="badge"
+        >
+          <UBadge
+            :color="badge.color"
+            variant="subtle"
+          >
+            {{ badge.label }}
+          </UBadge>
+        </slot>
+      </div>
+      <slot
+        name="dates"
+        :subscription="subscription"
+        :cancels-at="cancelsAt"
+        :date-text="dateText"
+      >
+        <p
+          v-if="dateText"
+          class="mt-2 text-sm text-muted"
+        >
+          {{ dateText }}
+        </p>
+      </slot>
+    </template>
+
+    <slot
+      v-else
+      name="empty"
+    >
+      <p class="text-sm text-muted">
+        {{ t("none", "You do not have an active subscription.") }}
+      </p>
+    </slot>
+
+    <UAlert
+      v-if="error"
+      class="mt-3"
+      color="error"
+      variant="subtle"
+      :description="error"
+    />
+
+    <template
+      v-if="isActive"
+      #footer
+    >
+      <slot
+        name="actions"
+        :manage="manage"
+        :resubscribe="resubscribe"
+        :cancelling="!!cancelsAt"
+        :pending="pending"
+      >
+        <div class="flex flex-wrap gap-2">
+          <UButton
+            :loading="pending"
+            :label="t('manage', 'Manage billing')"
+            @click="manage"
+          />
+          <UButton
+            v-if="cancelsAt"
+            variant="outline"
+            :loading="pending"
+            :label="t('resubscribe', 'Resubscribe')"
+            @click="resubscribe"
+          />
+        </div>
+      </slot>
+    </template>
+  </UCard>
+</template>

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

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    locale?: string;
+};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_13: {
+    plan: any;
+    label: any;
+    subscription: any;
+}, __VLS_15: {
+    subscription: any;
+    badge: any;
+}, __VLS_23: {
+    subscription: any;
+    cancelsAt: any;
+    dateText: any;
+}, __VLS_25: {}, __VLS_33: {
+    manage: () => Promise<void | undefined>;
+    resubscribe: () => Promise<any>;
+    cancelling: boolean;
+    pending: any;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_9) => any;
+} & {
+    loading?: (props: typeof __VLS_11) => any;
+} & {
+    plan?: (props: typeof __VLS_13) => any;
+} & {
+    badge?: (props: typeof __VLS_15) => any;
+} & {
+    dates?: (props: typeof __VLS_23) => any;
+} & {
+    empty?: (props: typeof __VLS_25) => any;
+} & {
+    actions?: (props: typeof __VLS_33) => 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/app/composables/index.d.ts

@@ -0,0 +1,4 @@
+export { usePlans } from './usePlans.js';
+export type { SubscriptionPlan, SubscriptionPlanPrice } from './usePlans.js';
+export { useSubscription } from './useSubscription.js';
+export type { UserSubscription } from './useSubscription.js';

package/dist/runtime/app/composables/index.js

@@ -0,0 +1,2 @@
+export { usePlans } from "./usePlans.js";
+export { useSubscription } from "./useSubscription.js";

package/dist/runtime/app/composables/usePlans.d.ts

@@ -0,0 +1,23 @@
+export interface SubscriptionPlanPrice {
+    id: string;
+    /** Minor units (e.g. cents). */
+    amount: number | null;
+    currency: string;
+    interval: 'day' | 'week' | 'month' | 'year';
+    intervalCount: number;
+    trialPeriodDays: number | null;
+    lookupKey: string | null;
+}
+export interface SubscriptionPlan {
+    key: string;
+    label: string;
+    description?: string;
+    rank: number;
+    prices: SubscriptionPlanPrice[];
+}
+export declare const usePlans: () => {
+    plans: any;
+    status: any;
+    error: any;
+    refresh: any;
+};

package/dist/runtime/app/composables/usePlans.js

@@ -0,0 +1,10 @@
+export const usePlans = () => {
+  const { data, status, error, refresh } = useFetch("/api/subscriptions/plans", {
+    key: "subscriptions:plans",
+    default: () => ({ plans: [] })
+  });
+  const plans = computed(
+    () => [...data.value?.plans ?? []].sort((a, b) => a.rank - b.rank)
+  );
+  return { plans, status, error, refresh };
+};

package/dist/runtime/app/composables/useSubscription.d.ts

@@ -0,0 +1,27 @@
+import type { MaybeRefOrGetter } from 'vue';
+export interface UserSubscription {
+    id: string;
+    planKey: string | null;
+    priceId: string;
+    status: string;
+    cancelAtPeriodEnd: boolean;
+    currentPeriodStart: string | null;
+    currentPeriodEnd: string | null;
+    endedAt: string | null;
+}
+export declare const useSubscription: () => {
+    subscription: any;
+    plan: any;
+    status: any;
+    isActive: any;
+    cancelsAt: any;
+    has: (planKey: MaybeRefOrGetter<string>) => any;
+    pending: any;
+    error: any;
+    refresh: any;
+    subscribe: (planKeyOrPriceId: string, options?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }) => Promise<any>;
+    openPortal: (returnUrl?: string) => Promise<void>;
+};

package/dist/runtime/app/composables/useSubscription.js

@@ -0,0 +1,73 @@
+const ACTIVE_STATUSES = ["active", "trialing"];
+export const useSubscription = () => {
+  const { loggedIn } = useUserSession();
+  const t = useModuleT("subscriptions");
+  const pending = ref(false);
+  const error = ref(null);
+  const { data, status, refresh } = useFetch("/api/subscriptions/me", {
+    key: "subscriptions:me",
+    default: () => ({ subscriptions: [], activePlan: null }),
+    immediate: loggedIn.value,
+    watch: false
+  });
+  watch(loggedIn, (value) => {
+    if (value) refresh();
+    else data.value = { subscriptions: [], activePlan: null };
+  });
+  const subscription = computed(() => {
+    const list = data.value?.subscriptions ?? [];
+    return list.find((item) => ACTIVE_STATUSES.includes(item.status)) ?? null;
+  });
+  const plan = computed(() => data.value?.activePlan ?? subscription.value?.planKey ?? null);
+  const isActive = computed(() => subscription.value !== null);
+  const cancelsAt = computed(
+    () => subscription.value?.cancelAtPeriodEnd ? subscription.value.currentPeriodEnd : null
+  );
+  function has(planKey) {
+    return isActive.value && plan.value === toValue(planKey);
+  }
+  async function run(request, fallback) {
+    pending.value = true;
+    error.value = null;
+    try {
+      return await request();
+    } catch (err) {
+      error.value = err instanceof Error ? err.message : fallback;
+      throw err;
+    } finally {
+      pending.value = false;
+    }
+  }
+  function subscribe(planKeyOrPriceId, options = {}) {
+    const isPrice = planKeyOrPriceId.startsWith("price_");
+    const config = useRuntimeConfig().public.subscriptions;
+    const origin = import.meta.client ? window.location.origin : "";
+    const absolute = (path) => path ? `${origin}${path}` : void 0;
+    return run(async () => {
+      const result = await $fetch("/api/subscriptions/checkout", {
+        method: "POST",
+        body: {
+          ...isPrice ? { priceId: planKeyOrPriceId } : { planKey: planKeyOrPriceId },
+          successUrl: options.successUrl ?? absolute(config?.pages?.success),
+          cancelUrl: options.cancelUrl ?? absolute(config?.pages?.cancel)
+        }
+      });
+      if ("url" in result) {
+        await navigateTo(result.url, { external: true });
+      } else {
+        await refresh();
+      }
+      return result;
+    }, t("errors.checkout", "Failed to start checkout."));
+  }
+  function openPortal(returnUrl) {
+    return run(async () => {
+      const { url } = await $fetch("/api/subscriptions/portal", {
+        method: "POST",
+        body: { returnUrl: returnUrl ?? (import.meta.client ? window.location.href : void 0) }
+      });
+      await navigateTo(url, { external: true });
+    }, t("errors.portal", "Failed to open the billing portal."));
+  }
+  return { subscription, plan, status, isActive, cancelsAt, has, pending, error, refresh, subscribe, openPortal };
+};

package/dist/runtime/app/middleware/subscription.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/app/middleware/subscription.js

@@ -0,0 +1,14 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  const meta = to.meta.subscription;
+  const config = useRuntimeConfig().public.subscriptions;
+  const target = meta?.redirectTo ?? config?.pages?.membership;
+  if (!target || to.path === target) return;
+  const { loggedIn } = useUserSession();
+  let activePlan = null;
+  if (loggedIn.value) {
+    const me = await useRequestFetch()("/api/subscriptions/me").catch(() => null);
+    activePlan = me?.activePlan ?? null;
+  }
+  const allowed = activePlan !== null && (!meta?.plans?.length || meta.plans.includes(activePlan));
+  if (!allowed) return navigateTo({ path: target, query: { redirect: to.fullPath } });
+});

package/dist/runtime/app/pages/cancel.d.vue.ts

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