@frigear-nu/forms 0.0.6 → 0.0.8

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

@@ -0,0 +1,13 @@
+import type { FormStep } from '../../../types.js';
+type __VLS_Props = {
+    step: FormStep;
+    /** Keys of the fields the step condition may look at. */
+    conditionFields: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormStep>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormStep>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  step: { type: Object, required: true },
+  conditionFields: { type: Array, required: true }
+});
+const emit = defineEmits(["patch"]);
+const t = useModuleT("forms");
+</script>
+
+<template>
+  <aside class="space-y-4 border-b border-default bg-elevated/40 p-3">
+    <h3 class="font-semibold">
+      {{ t("builder.step", "Step") }}
+    </h3>
+    <UFormField :label="t('builder.stepTitle', 'Title')">
+      <FormBuilderText
+        :model-value="step.title"
+        @update:model-value="emit('patch', { title: $event })"
+      />
+    </UFormField>
+    <UFormField :label="t('builder.description', 'Help text')">
+      <FormBuilderText
+        :model-value="step.description"
+        @update:model-value="emit('patch', { description: $event })"
+      />
+    </UFormField>
+    <FormBuilderCondition
+      :model-value="step.showIf"
+      :fields="conditionFields"
+      @update:model-value="emit('patch', { showIf: $event })"
+    />
+  </aside>
+</template>

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

@@ -0,0 +1,13 @@
+import type { FormStep } from '../../../types.js';
+type __VLS_Props = {
+    step: FormStep;
+    /** Keys of the fields the step condition may look at. */
+    conditionFields: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    patch: (patch: Partial<FormStep>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPatch?: ((patch: Partial<FormStep>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { Translated } from '../../../types.js';
+type __VLS_Props = {
+    placeholder?: string;
+    multiline?: boolean;
+    /** Write / Preview toggle for multiline text (markdown). */
+    preview?: boolean;
+};
+type __VLS_ModelProps = {
+    /** Either one string for every language, or a map of locale → text. */
+    modelValue?: Translated | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Translated | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Translated | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,127 @@
+<script setup>
+import { collapseTranslated, expandTranslated, readTranslated } from "../../utils";
+import { useFormsLocale, useFormsLocales } from "../composables/useForms";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  preview: { type: Boolean, required: false, default: true }
+});
+const model = defineModel({ type: null });
+const t = useModuleT("forms");
+const current = useFormsLocale();
+const available = useFormsLocales();
+const translated = computed(() => !!model.value && typeof model.value === "object");
+const added = ref([]);
+const newLocale = ref("");
+const locales = computed(() => [.../* @__PURE__ */ new Set([...available.value, ...Object.keys(translated.value ? model.value : {}), ...added.value])]);
+function addLocale() {
+  const code = newLocale.value.trim();
+  if (/^[a-z]{2,3}(?:[-_][a-z0-9]{2,8})*$/i.test(code) && !locales.value.includes(code)) added.value.push(code);
+  newLocale.value = "";
+}
+function toggle() {
+  model.value = translated.value ? collapseTranslated(model.value, current.value) : expandTranslated(model.value, current.value) ?? {};
+}
+function setPlain(text) {
+  model.value = text || void 0;
+}
+function setLocale(locale, text) {
+  model.value = Object.fromEntries(Object.entries({ ...model.value, [locale]: text }).filter(([, entry]) => entry));
+}
+</script>
+
+<template>
+  <div class="space-y-1">
+    <div
+      v-if="!translated"
+      class="flex items-start gap-1"
+    >
+      <MarkdownTextarea
+        v-if="multiline"
+        :model-value="readTranslated(model, current)"
+        :placeholder="placeholder"
+        :rows="4"
+        :preview="props.preview"
+        class="min-w-0 flex-1"
+        @update:model-value="setPlain(String($event))"
+      />
+      <UInput
+        v-else
+        :model-value="readTranslated(model, current)"
+        :placeholder="placeholder"
+        class="min-w-0 flex-1"
+        @update:model-value="setPlain(String($event))"
+      />
+      <UButton
+        color="neutral"
+        variant="outline"
+        icon="i-lucide-languages"
+        :aria-label="t('builder.translate', 'Translate')"
+        :title="t('builder.translate', 'Translate')"
+        @click="toggle"
+      />
+    </div>
+
+    <div
+      v-else
+      class="space-y-1 rounded-md border border-default p-1.5"
+    >
+      <div
+        v-for="locale in locales"
+        :key="locale"
+        class="flex items-start gap-1.5"
+      >
+        <UBadge
+          :color="locale === current ? 'primary' : 'neutral'"
+          variant="subtle"
+          size="sm"
+          class="mt-1.5 w-8 justify-center uppercase"
+          :label="locale"
+        />
+        <MarkdownTextarea
+          v-if="multiline"
+          :model-value="readTranslated(model, locale)"
+          :placeholder="placeholder"
+          :rows="3"
+          :preview="props.preview"
+          class="min-w-0 flex-1"
+          @update:model-value="setLocale(locale, String($event))"
+        />
+        <UInput
+          v-else
+          :model-value="readTranslated(model, locale)"
+          :placeholder="placeholder"
+          class="min-w-0 flex-1"
+          @update:model-value="setLocale(locale, String($event))"
+        />
+      </div>
+      <form
+        class="flex gap-1"
+        @submit.prevent="addLocale"
+      >
+        <UInput
+          v-model="newLocale"
+          size="xs"
+          :placeholder="t('builder.addLanguage', 'Add language, e.g. da')"
+          class="min-w-0 flex-1"
+        />
+        <UButton
+          type="submit"
+          color="neutral"
+          variant="outline"
+          size="xs"
+          icon="i-lucide-plus"
+          :aria-label="t('builder.addLanguage', 'Add language, e.g. da')"
+        />
+      </form>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="xs"
+        icon="i-lucide-x"
+        :label="t('builder.singleLanguage', 'Same text in every language')"
+        @click="toggle"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { Translated } from '../../../types.js';
+type __VLS_Props = {
+    placeholder?: string;
+    multiline?: boolean;
+    /** Write / Preview toggle for multiline text (markdown). */
+    preview?: boolean;
+};
+type __VLS_ModelProps = {
+    /** Either one string for every language, or a map of locale → text. */
+    modelValue?: Translated | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Translated | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Translated | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+    /** Admin preview: shows a stub and supplies a dummy token instead of loading the provider. */
+    preview?: boolean;
+    /** Bump to reset the widget (and clear the token), e.g. after a failed submit. */
+    resetKey?: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,95 @@
+<script setup>
+import { resolveCaptcha } from "../../utils";
+import { captchaDefaultProvider, captchaSiteKey, loadCaptchaScript } from "../composables/useCaptcha";
+const props = defineProps({
+  field: { type: Object, required: true },
+  preview: { type: Boolean, required: false },
+  resetKey: { type: Number, required: false }
+});
+const model = defineModel({ type: null });
+const t = useModuleT("forms");
+const config = computed(() => resolveCaptcha(props.field, captchaDefaultProvider()));
+const siteKey = computed(() => captchaSiteKey(props.field));
+const providerName = computed(() => t(`captcha.providers.${config.value.provider}`, config.value.provider));
+const container = useTemplateRef("container");
+const failed = ref(false);
+let api;
+let widgetId;
+async function renderWidget() {
+  if (props.preview || !container.value || !siteKey.value) return;
+  failed.value = false;
+  try {
+    api = await loadCaptchaScript(config.value.provider);
+  } catch {
+    failed.value = true;
+    return;
+  }
+  if (!container.value) return;
+  const theme = config.value.theme && (config.value.theme !== "auto" || config.value.provider === "turnstile") ? config.value.theme : void 0;
+  widgetId = api.render(container.value, {
+    "sitekey": siteKey.value,
+    theme,
+    "size": config.value.size,
+    "callback": (token) => {
+      model.value = token;
+    },
+    "expired-callback": () => {
+      model.value = void 0;
+    },
+    "error-callback": () => {
+      model.value = void 0;
+    }
+  });
+}
+function resetWidget() {
+  model.value = props.preview ? "preview" : void 0;
+  if (!props.preview && api && widgetId !== void 0) api.reset(widgetId);
+}
+model.value = props.preview ? "preview" : void 0;
+onMounted(renderWidget);
+onBeforeUnmount(() => {
+  if (api && widgetId !== void 0) api.remove?.(widgetId);
+});
+watch(() => props.resetKey, resetWidget);
+watch([() => config.value.provider, siteKey], () => {
+  if (api && widgetId !== void 0) api.remove?.(widgetId);
+  widgetId = void 0;
+  if (container.value) container.value.innerHTML = "";
+  model.value = void 0;
+  renderWidget();
+});
+</script>
+
+<template>
+  <div
+    v-if="preview"
+    data-testid="captcha-stub"
+    class="flex items-center gap-3 rounded-md border border-dashed border-default bg-elevated/50 px-3 py-4 text-sm text-muted"
+  >
+    <UIcon
+      name="i-lucide-shield-check"
+      class="size-5 shrink-0"
+    />
+    <span>{{ t("captcha.preview", "Captcha: {provider} \u2014 shown to visitors", { provider: providerName }) }}</span>
+  </div>
+  <UAlert
+    v-else-if="!siteKey"
+    color="error"
+    variant="subtle"
+    icon="i-lucide-shield-alert"
+    :title="t('captcha.missingKey', 'The {provider} captcha has no site key configured.', { provider: providerName })"
+  />
+  <UAlert
+    v-else-if="failed"
+    color="error"
+    variant="subtle"
+    icon="i-lucide-shield-alert"
+    :title="t('captcha.loadFailed', 'The captcha could not be loaded. Reload the page to try again.')"
+  />
+  <div
+    v-else
+    ref="container"
+    data-testid="captcha-widget"
+    class="min-h-[65px]"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+import type { FormField } from '../../../types.js';
+type __VLS_Props = {
+    field: FormField;
+    /** Admin preview: shows a stub and supplies a dummy token instead of loading the provider. */
+    preview?: boolean;
+    /** Bump to reset the widget (and clear the token), e.g. after a failed submit. */
+    resetKey?: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+/**
+ * Embeds a published form in a page or in Markdown (MDC): `::form-embed{slug="contact"}`.
+ * Honors the form's access settings: sign-in prompt, password gate, nothing for API-only/token forms.
+ */
+type __VLS_Props = {
+    /** Slug of a published form. */
+    slug: string;
+    /** Show the form's name as a heading above it. */
+    title?: boolean;
+    /** Overrides the locale of translated form content (defaults to the app's locale). */
+    locale?: string;
+    /** Extra classes for the wrapper. */
+    class?: 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/app/components/FormEmbed.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { embedMode } from "../../utils";
+const props = defineProps({
+  slug: { type: String, required: true },
+  title: { type: Boolean, required: false, default: false },
+  locale: { type: String, required: false, default: void 0 },
+  class: { type: String, required: false, default: void 0 }
+});
+const route = useRoute();
+const t = useModuleT("forms");
+const { data: access, status } = useFormAccess(() => props.slug);
+const mode = computed(() => embedMode(access.value));
+const loading = computed(() => !access.value && (status.value === "pending" || status.value === "idle"));
+if (import.meta.dev) {
+  watch(mode, (value) => {
+    if (value === "hidden") console.warn(`[forms] <FormEmbed slug="${props.slug}"> renders nothing: API-only and token forms have no public UI.`);
+  }, { immediate: true });
+}
+const loginPath = computed(() => useAuthPages().login);
+const password = ref("");
+const unlocked = ref("");
+const checking = ref(false);
+const wrong = ref(false);
+async function unlock() {
+  checking.value = true;
+  wrong.value = false;
+  try {
+    await $fetch(`/api/forms/${props.slug}`, { headers: { [FORM_PASSWORD_HEADER]: password.value } });
+    unlocked.value = password.value;
+  } catch {
+    wrong.value = true;
+  } finally {
+    checking.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="mode !== 'hidden'"
+    :class="['not-prose', props.class]"
+    data-form-embed
+  >
+    <div
+      v-if="loading"
+      class="space-y-4"
+      aria-busy="true"
+    >
+      <USkeleton class="h-10 w-full" />
+      <USkeleton class="h-10 w-full" />
+      <USkeleton class="h-24 w-full" />
+      <USkeleton class="h-10 w-32" />
+    </div>
+
+    <UAlert
+      v-else-if="mode === 'not-found'"
+      color="error"
+      variant="subtle"
+      :title="t('error.notFound', 'This form could not be found.')"
+    />
+
+    <template v-else>
+      <h2
+        v-if="props.title && access"
+        class="mb-4 text-2xl font-bold"
+      >
+        {{ access.name }}
+      </h2>
+
+      <UAlert
+        v-if="mode === 'sign-in'"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-lock"
+        :title="t('embed.signInTitle', 'Sign in to use this form')"
+        :actions="[{ label: t('embed.signIn', 'Sign in'), to: { path: loginPath, query: { redirect: route.fullPath } } }]"
+      />
+
+      <UCard v-else-if="mode === 'password' && !unlocked">
+        <form
+          class="space-y-4"
+          @submit.prevent="unlock"
+        >
+          <UFormField
+            :label="t('access.passwordLabel', 'Password')"
+            :description="t('access.passwordHint', 'This form is protected. Enter the password you were given.')"
+            :error="wrong ? t('access.passwordWrong', 'Wrong password.') : void 0"
+          >
+            <UInput
+              v-model="password"
+              type="password"
+              autocomplete="off"
+              class="w-full"
+            />
+          </UFormField>
+          <UButton
+            type="submit"
+            :loading="checking"
+            :disabled="!password"
+            :label="t('access.unlock', 'Continue')"
+          />
+        </form>
+      </UCard>
+
+      <FormRenderer
+        v-else
+        :slug="props.slug"
+        :password="unlocked || void 0"
+        :locale="props.locale"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+/**
+ * Embeds a published form in a page or in Markdown (MDC): `::form-embed{slug="contact"}`.
+ * Honors the form's access settings: sign-in prompt, password gate, nothing for API-only/token forms.
+ */
+type __VLS_Props = {
+    /** Slug of a published form. */
+    slug: string;
+    /** Show the form's name as a heading above it. */
+    title?: boolean;
+    /** Overrides the locale of translated form content (defaults to the app's locale). */
+    locale?: string;
+    /** Extra classes for the wrapper. */
+    class?: 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/app/components/FormField.d.vue.ts

@@ -2,6 +2,10 @@ import type { FormField } from '../../../types.js';
 type __VLS_Props = {
     field: FormField;
     locale: string;
+    /** Admin preview: captcha fields render a stub instead of the provider widget. */
+    preview?: boolean;
+    /** Bumped by the form after a failed submit so captcha widgets reset. */
+    captchaResetKey?: number;
 };
 type __VLS_ModelProps = {
     modelValue?: unknown;

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

@@ -1,10 +1,14 @@
 <script setup>
-import { renderMarkdown, translate } from "../../utils";
+import { isCountryPhone, renderMarkdown, translate } from "../../utils";
 const props = defineProps({
   field: { type: Object, required: true },
-  locale: { type: String, required: true }
+  locale: { type: String, required: true },
+  preview: { type: Boolean, required: false },
+  captchaResetKey: { type: Number, required: false }
 });
 const model = defineModel({ type: null });
+const t = useModuleT("forms");
+const defaultAutocomplete = { email: "email", tel: "tel" };
 const text = (value) => translate(value, props.locale) || void 0;
 const items = computed(() => (props.field.options ?? []).map((option) => ({
   value: option.value,
@@ -23,6 +27,25 @@ const isCheckbox = computed(() => props.field.type === "checkbox");
   />
   <!-- eslint-enable vue/no-v-html -->
 
+  <UFormField
+    v-else-if="field.type === 'captcha'"
+    :name="field.key"
+    :label="text(field.label)"
+    :description="text(field.description)"
+  >
+    <ClientOnly>
+      <FormCaptcha
+        v-model="model"
+        :field="field"
+        :preview="preview"
+        :reset-key="captchaResetKey"
+      />
+      <template #fallback>
+        <div class="h-[65px] rounded-md bg-elevated/50" />
+      </template>
+    </ClientOnly>
+  </UFormField>
+
   <UFormField
     v-else
     :name="field.key"
@@ -68,11 +91,20 @@ const isCheckbox = computed(() => props.field.type === "checkbox");
       :accept="field.validation?.accept?.join(',')"
       class="w-full"
     />
+    <FormPhoneInput
+      v-else-if="isCountryPhone(field)"
+      v-model="model"
+      :config="field.phone"
+      :locale="locale"
+      :placeholder="text(field.placeholder)"
+      :country-label="t('field.phoneCountry', 'Country')"
+    />
     <UInput
       v-else
       v-model="model"
       :type="field.type === 'date' ? 'date' : field.type === 'tel' ? 'tel' : field.type === 'email' ? 'email' : 'text'"
-      :autocomplete="field.autocomplete"
+      :inputmode="field.type === 'tel' ? 'tel' : void 0"
+      :autocomplete="field.autocomplete ?? defaultAutocomplete[field.type]"
       :placeholder="text(field.placeholder)"
       class="w-full"
     />

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

@@ -2,6 +2,10 @@ import type { FormField } from '../../../types.js';
 type __VLS_Props = {
     field: FormField;
     locale: string;
+    /** Admin preview: captcha fields render a stub instead of the provider widget. */
+    preview?: boolean;
+    /** Bumped by the form after a failed submit so captcha widgets reset. */
+    captchaResetKey?: number;
 };
 type __VLS_ModelProps = {
     modelValue?: unknown;

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

@@ -0,0 +1,20 @@
+import type { PhoneConfig } from '../../../types.js';
+type __VLS_Props = {
+    config?: PhoneConfig;
+    locale: string;
+    placeholder?: string;
+    /** Name of the country selector for assistive technology. */
+    countryLabel: string;
+};
+type __VLS_ModelProps = {
+    /** The single merged value, e.g. `+4512345678`. */
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;