@karibsen/eponyme 0.5.0 → 0.7.0

package/README.md

@@ -1,3 +1,5 @@
+![Eponyme cover](https://raw.githubusercontent.com/karibsen-studio/eponyme/main/.github/assets/cover.png)
+
 # Eponyme
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -11,7 +13,7 @@ Define your content in `eponyme.config.ts`. Eponyme provides defaults, validatio
 
 ## Features
 
-- Type-safe fields for text, slugs, rich text, numbers, booleans, images, links, dates, colors, sections, tabs, and arrays
+- Type-safe fields for text, slugs, rich text, numbers, booleans, images, links, phone numbers, dates, colors, sections, tabs, and arrays
 - Declarative defaults and validation
 - Conditional fields, character counters, and sortable arrays
 - Private drafts with explicit publishing
@@ -42,6 +44,13 @@ Install the module:
 pnpm add @karibsen/eponyme
 ```
 
+Eponyme brings its own components, so `@nuxt/ui` is not required. If your application does use
+it, it has to be `^4.10.0` or newer: both ship Tailwind, and an older `@nuxt/ui` resolves a
+version the dashboard was not built against. What that breaks is not predictable — broken
+dashboard styles are the visible case, but it can also fail the build or misbehave elsewhere with
+no obvious link back to the cause. The module checks the installed version and warns at build
+time.
+
 Add it to `nuxt.config.ts`:
 
 ```ts
@@ -85,8 +94,16 @@ export default defineEponymeConfig({
       label: 'Contact email',
       defaultValue: 'hello@example.com',
     }),
+    contactPhone: field.phone({
+      label: 'Contact phone',
+      defaultCountry: 'FR',
+      countries: ['FR', 'BE'],
+      autocomplete: 'tel',
+    }),
     callToAction: field.url({
       label: 'Call to action',
+      // Schemes an external link may use; defaults to ['http', 'https']
+      protocols: ['https', 'mailto'],
       defaultValue: {
         href: '/contact',
         type: 'internal',
@@ -152,6 +169,39 @@ field.string({
 })
 ```
 
+### Phone numbers
+
+`field.phone()` stores its value in **E.164** — `+33611131143` — whatever format it was typed
+in. Normalisation happens on the server before the write, so the stored format is a guarantee
+rather than a convention a client could skip.
+
+```ts
+phone: field.phone({
+  label: 'Phone',
+  // ISO 3166-1 alpha-2, autocompleted from libphonenumber-js
+  countries: ['FR', 'BE'],
+  // Country a number typed without `+` belongs to
+  defaultCountry: 'FR',
+  autocomplete: 'tel',
+  placeholder: '06 11 13 11 43',
+  required: true,
+})
+```
+
+| Option | Effect |
+|---|---|
+| `countries` | Countries whose numbers are accepted. A number resolving to any other is refused, with an error naming the country it came from. Omitted, every country is accepted |
+| `defaultCountry` | Country assumed for a number written without an international prefix. Without it, only `+…` numbers can be understood |
+| `detectCountry` | `false` requires the international `+…` form, so the country is never guessed. Defaults to `true` |
+| `autocomplete` | `tel`, `tel-national` or `tel-country-code`, set on the input |
+| `defaultValue`, `required`, `placeholder`, `label`, `description` | As on every field |
+
+Validation uses the `min` metadata bundle of `libphonenumber-js`, a fraction of the size of the
+full one. It parses and formats every country, and is slightly more permissive: a few numbers
+that are impossible for their region still pass.
+
+A phone field is also allowed in a public `form()`.
+
 ## Prisma
 
 Eponyme uses the Prisma client owned by your application. It does not create the connection or run migrations.
@@ -740,44 +790,6 @@ Two protections apply to the public submission route:
 - a **body size limit**, 64 KB by default, configurable with `maxBodyBytes`. An oversized
   body is refused with `413` before it is parsed.
 
-### Captcha
-
-Set `captcha: true` on the form, then install an adapter — Eponyme defines the contract
-but ships no provider:
-
-```bash
-pnpm add @karibsen/eponyme-captcha
-```
-
-```ts
-export default defineNuxtConfig({
-  modules: ['@karibsen/eponyme', '@karibsen/eponyme-captcha'],
-  eponymeCaptcha: { siteKey: '<your-turnstile-site-key>' },
-})
-```
-
-Render the widget and bind its token; `useEponymeForm` sends it alongside the fields and
-the server verifies it before validating anything:
-
-```vue
-<script setup lang="ts">
-const { captchaToken, requiresCaptcha, submit } = useEponymeForm('contact')
-</script>
-
-<template>
-  <NuxtTurnstile v-if="requiresCaptcha" v-model="captchaToken" />
-</template>
-```
-
-**It fails closed.** Without an adapter, a form declaring `captcha: true` answers `500`
-rather than accepting submissions unprotected. A rejected token answers `422` with a
-`_form` error; the provider's reason stays in the server log, since telling a bot which
-check it failed only helps it.
-
-Writing an adapter for another provider means supplying a `name` and an
-`async verify(token, { ip })` returning `{ success, reason? }`, then pointing the
-`#eponyme/captcha` alias at it.
-
 Rate limiting and file uploads are not implemented yet.
 
 ## Hooks

package/dist/eponyme.mjs

@@ -11,7 +11,7 @@ function collection(options) {
   return { __eponymeCollection: true, ...options };
 }
 
-const PUBLIC_FIELD_TYPES = ["string", "textarea", "email", "url", "number", "boolean", "select", "radio", "checkboxGroup"];
+const PUBLIC_FIELD_TYPES = ["string", "textarea", "email", "phone", "url", "number", "boolean", "select", "radio", "checkboxGroup"];
 const DEFAULT_HONEYPOT = "_eponyme_hp";
 const DEFAULT_MAX_BODY_BYTES = 64 * 1024;
 function form(options) {
@@ -31,8 +31,7 @@ function form(options) {
     // Storing a submission has to be an explicit decision, so `custom` is the default.
     submission: { mode: options.submission?.mode ?? "custom" },
     honeypot,
-    maxBodyBytes: options.maxBodyBytes ?? DEFAULT_MAX_BODY_BYTES,
-    captcha: options.captcha ?? false
+    maxBodyBytes: options.maxBodyBytes ?? DEFAULT_MAX_BODY_BYTES
   };
 }
 

package/dist/module.d.mts

@@ -5,37 +5,118 @@ export { EPONYME_ROLES, canEditEponyme, isEponymeRole } from '../dist/runtime/ty
 export { ArrayFieldDefinition, ArrayFieldOptions, ArrayItemDefinition, ArrayItemFieldDefinition, ArrayItemSchema, ArrayItemValue, BooleanFieldDefinition, BooleanFieldOptions, CheckboxGroupFieldDefinition, CheckboxGroupFieldOptions, CollectionSlugField, ColorFieldDefinition, ColorFieldOptions, DateFieldDefinition, DateFieldOptions, EmailFieldDefinition, EmailFieldOptions, EponymeAuthSession, EponymeAuthUser, EponymeCollectionDataByName, EponymeCollectionDefinition, EponymeCollectionDefinitionBase, EponymeCollectionName, EponymeCollectionOptions, EponymeConfig, EponymeData, EponymeDataByName, EponymeFormDataByName, EponymeFormDefinition, EponymeFormDefinitionBase, EponymeFormFieldDefinition, EponymeFormMode, EponymeFormName, EponymeFormOptions, EponymeFormSchema, EponymeManagedUserResult, EponymeName, EponymeRole, EponymeSchema, EponymeVariableDefinition, EponymeVariableSummary, EponymeVariableValue, EponymeVariables, FieldDefinition, FieldValidationResult, FieldValidator, FieldVisibilityCondition, ImageFieldDefinition, ImageFieldOptions, NumberFieldDefinition, NumberFieldOptions, RadioFieldDefinition, RadioFieldOptions, RichTextFieldDefinition, RichTextFieldOptions, SectionFieldDefinition, SectionFieldOptions, SectionItemFieldDefinition, SectionItemValue, SectionSchema, SectionValue, SelectFieldDefinition, SelectFieldOptions, SelectOption, SlugFieldDefinition, SlugFieldOptions, StringFieldDefinition, StringFieldOptions, TabDefinition, TabFieldDefinition, TabFieldOptions, TabsSchema, TabsValue, TextareaFieldDefinition, TextareaFieldOptions, TodayDateDefault, UrlFieldDefinition, UrlFieldOptions, UrlType, UrlValue } from '../dist/runtime/types/index.js';
 import '../dist/runtime/types/variables.js';
 
+/**
+ * Options read from the `eponyme` key of `nuxt.config`.
+ *
+ * @example
+ * ```ts
+ * export default defineNuxtConfig({
+ *   modules: ['@karibsen/eponyme'],
+ *   eponyme: {
+ *     prismaClient: '~~/server/utils/prisma',
+ *     previewPaths: {
+ *       homepage: '/',
+ *       articles: '/articles/:slug',
+ *     },
+ *   },
+ * })
+ * ```
+ */
 interface ModuleOptions {
+    /**
+     * Route the dashboard is served on. Surrounding slashes are normalised, so `__eponyme` and
+     * `/__eponyme/` are equivalent.
+     *
+     * @default "/__eponyme"
+     */
     dashboardPath?: string;
-    /** Public routes used for previews and sitemap entries. Collections use a `:slug` placeholder. */
+    /**
+     * Public route rendering each entry, keyed by singleton name or by collection name. A
+     * collection value must contain `:slug`, which is replaced by the entry slug.
+     *
+     * @remarks
+     * An entry left out of this map has no preview, no sitemap entry, and no cache tag on the page
+     * that renders it.
+     *
+     * @default {}
+     * @example
+     * ```ts
+     * previewPaths: {
+     *   homepage: '/',
+     *   articles: '/articles/:slug',
+     * }
+     * ```
+     */
     previewPaths?: Record<string, string>;
-    /** Path to a server module exporting an already initialized PrismaClient. */
+    /**
+     * Module specifier of a server file whose default export is an initialised `PrismaClient`.
+     * Nuxt aliases apply, and keep their usual meaning: a server file lives under `~~/`, not `~/`.
+     *
+     * @example
+     * ```ts
+     * prismaClient: '~~/server/utils/prisma'
+     * ```
+     * @see https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/introduction
+     */
     prismaClient: string;
-    /** Default palette offered by every color field; a field can override it with its own `presets`. */
+    /**
+     * Palette offered by every color field, which a field overrides with its own `presets`.
+     *
+     * @remarks
+     * A bare string is labelled from its value. An entry that is not a valid hex colour is dropped.
+     *
+     * @default []
+     * @example
+     * ```ts
+     * colorPresets: [
+     *   { label: 'Ink', value: '#171714' },
+     *   '#ffffff',
+     * ]
+     * ```
+     */
     colorPresets?: Array<string | {
         label: string;
         value: string;
     }>;
     auth?: {
-        /** Fixed lifetime of an authenticated session. */
+        /**
+         * Lifetime of an authenticated session, in days, counted from sign-in and never extended by
+         * activity.
+         *
+         * @default 7
+         */
         sessionDurationDays?: number;
     };
     /**
-     * How long a server instance may reuse content it has already read, in seconds.
-     * A save clears what it changed on its own instance, so this only bounds how long
-     * another instance can still serve the previous content. `0` disables the cache.
+     * How long a server instance may reuse content it has already read, in seconds. `0` disables it.
+     *
+     * @remarks
+     * A save only clears the instance that served it, so this bounds how long another instance can
+     * still answer with the previous content.
+     *
+     * @default 5
      */
     cacheSeconds?: number;
     /**
-     * How long a browser may reuse published content, in seconds. This is what makes a
-     * client-side navigation instant, and it is the one window nobody can purge: a visitor
-     * who already holds a copy keeps it until it expires. Keep it short. `0` disables it.
+     * How long a browser may reuse published content, in seconds. `0` disables it.
+     *
+     * @remarks
+     * A browser cache cannot be purged: a visitor holding a copy keeps it until it expires, whatever
+     * is published meanwhile.
+     *
+     * @default 30
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control
      */
     browserCacheSeconds?: number;
     /**
-     * How long a CDN may reuse published content, in seconds. A CDN can be purged — the
-     * `eponyme:entry:published` hook is the place to do it — so this can be generous.
-     * `0` disables it.
+     * How long a CDN may reuse published content, in seconds. `0` disables it.
+     *
+     * @remarks
+     * Sent as `s-maxage`, with `stale-while-revalidate` twelve times longer. Cached responses carry
+     * cache tags, so a publication can purge them from the `eponyme:entry:published` hook.
+     *
+     * @default 300
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control
      */
     cdnCacheSeconds?: number;
 }

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@karibsen/eponyme",
   "configKey": "eponyme",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,8 +1,21 @@
-import { defineNuxtModule, useLogger, createResolver, findPath, addImports, addImportsDir, addServerImports, addRouteMiddleware, addTypeTemplate, addServerHandler, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, findPath, addImports, addImportsDir, addServerImports, addRouteMiddleware, addTypeTemplate, addServerHandler, addServerPlugin, hasNuxtModule, hasNuxtModuleCompatibility, getNuxtModuleVersion } from '@nuxt/kit';
 import pc from 'picocolors';
 import tailwindcss from '@tailwindcss/vite';
 import { resolve } from 'node:path';
+import { tagPreviewPathRoutes } from '../dist/runtime/utils/cache-tags.js';
 
+const MINIMUM_NUXT_UI = "4.10.0";
+async function warnOnIncompatibleNuxtUi(nuxt, logger) {
+  if (!hasNuxtModule("@nuxt/ui", nuxt)) return;
+  if (await hasNuxtModuleCompatibility("@nuxt/ui", `>=${MINIMUM_NUXT_UI}`, nuxt)) return;
+  const found = await getNuxtModuleVersion("@nuxt/ui", nuxt);
+  logger.warn(
+    `@nuxt/ui ${found || "(unknown version)"} is older than ${MINIMUM_NUXT_UI}, which Eponyme needs in order to share Tailwind with it.
+  Upgrade it with \`npm i @nuxt/ui@^${MINIMUM_NUXT_UI}\`. Keeping an older one resolves a Tailwind this module was not built
+  against, and what that breaks is not predictable: broken dashboard styles are the visible case, but it can also fail the
+  build or misbehave somewhere with no obvious link back to this warning.`
+  );
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "@karibsen/eponyme",
@@ -63,6 +76,7 @@ const module$1 = defineNuxtModule({
   async setup(options, nuxt) {
     const logger = useLogger("eponyme");
     const resolver = createResolver(import.meta.url);
+    await warnOnIncompatibleNuxtUi(nuxt, logger);
     const dashboardPath = `/${(options.dashboardPath || "__eponyme").replace(/^\/+|\/+$/g, "")}`;
     const publicRuntimeConfig = nuxt.options.runtimeConfig.public;
     publicRuntimeConfig.eponyme = {
@@ -78,6 +92,14 @@ const module$1 = defineNuxtModule({
       browserCacheSeconds: options.browserCacheSeconds ?? 30,
       cdnCacheSeconds: options.cdnCacheSeconds ?? 300
     };
+    const tagged = tagPreviewPathRoutes(options.previewPaths ?? {}, nuxt.options.routeRules ??= {});
+    if (tagged.length) {
+      const width = Math.max(...tagged.map(({ route }) => route.length));
+      logger.info(
+        `Cache tags added to ${tagged.length} public route${tagged.length > 1 ? "s" : ""}, so publishing can purge them:
+` + tagged.map(({ route, tag }) => `  ${route.padEnd(width)}  ${tag}`).join("\n")
+      );
+    }
     const preparing = Boolean(nuxt.options._prepare);
     if (!options.prismaClient) {
       if (!preparing) throw new Error(`${pc.red("[Eponyme]")} eponyme.prismaClient is required.`);
@@ -141,7 +163,6 @@ Note that '~/' points at ${nuxt.options.srcDir}, so a server module needs '~~/'.
     nuxt.options.alias["#eponyme/prisma"] = prismaPath;
     const variablesPath = await findPath(resolve(nuxt.options.rootDir, "eponyme.variables.ts"));
     nuxt.options.alias["#eponyme/variables"] = variablesPath ?? resolver.resolve("./runtime/utils/empty-variables");
-    nuxt.options.alias["#eponyme/captcha"] ??= resolver.resolve("./runtime/utils/no-captcha");
     addTypeTemplate({
       filename: "types/eponyme-config.d.ts",
       getContents: () => `declare module '#eponyme/config' {
@@ -152,10 +173,6 @@ declare module '#eponyme/variables' {
   const variables: typeof import(${JSON.stringify(nuxt.options.alias["#eponyme/variables"])})['default']
   export default variables
 }
-declare module '#eponyme/captcha' {
-  const verifier: import('${resolver.resolve("./runtime/types/captcha")}').EponymeCaptchaVerifier
-  export default verifier
-}
 `
     });
     addServerHandler({ middleware: true, handler: resolver.resolve("./runtime/server/middleware/eponyme-no-store") });

package/dist/runtime/assets.d.ts

@@ -0,0 +1,9 @@
+declare module '*.ico?url' {
+  const url: string
+  export default url
+}
+
+declare module '*.png?url' {
+  const url: string
+  export default url
+}

package/dist/runtime/components/editor/EponymeFolderNav.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import { middleEllipsis } from "../../utils/middle-ellipsis";
 const props = defineProps({
   basePath: { type: String, required: true },
   eponyme: { type: String, required: true }
@@ -24,14 +25,6 @@ const visibleBreadcrumbs = computed(() => {
 function label(name) {
   return name.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
 }
-function middleEllipsis(value, maxLength = 28) {
-  const characters = [...value];
-  if (characters.length <= maxLength) return value;
-  const available = maxLength - 1;
-  const startLength = Math.ceil(available / 2);
-  const endLength = Math.floor(available / 2);
-  return `${characters.slice(0, startLength).join("")}\u2026${characters.slice(-endLength).join("")}`;
-}
 function updateBreadcrumbMenuScroll(event) {
   const menu = event.currentTarget;
   if (!menu) return;

package/dist/runtime/components/editor/EponymeFormPage.vue

@@ -171,11 +171,11 @@ async function deleteSubmission(submission) {
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 scope="col"
-                class="ep:border-b ep:border-border-ep ep:p-3 ep:text-[11px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase"
+                class="ep:border-b ep:border-border-ep ep:p-3 ep:text-[11px] ep:font-semibold ep:text-muted-ep ep:uppercase"
               >
                 <button
                   type="button"
-                  class="ep:flex ep:cursor-pointer ep:items-center ep:gap-1 ep:border-0 ep:bg-transparent ep:p-0 ep:text-inherit ep:uppercase"
+                  class="ep:flex ep:cursor-pointer ep:items-center ep:gap-1 ep:border-0 ep:bg-transparent ep:p-0 ep:text-inherit"
                   :aria-sort="header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : 'none'"
                   @click="header.column.toggleSorting()"
                 >

package/dist/runtime/components/editor/EponymePreviewPanel.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import EPButton from "../ui/EPButton.vue";
 import EPSelect from "../ui/EPSelect.vue";
 import { formatVersionDate, useEponymeHistory } from "../../composables/useEponymeHistory";
+import { EPONYME_PREVIEW_QUERY, EPONYME_PREVIEW_TOKEN_QUERY, EPONYME_PREVIEW_VERSION_QUERY } from "../../utils/preview";
 const props = defineProps({
   name: { type: String, required: true },
   path: { type: String, required: true },
@@ -25,9 +26,9 @@ const options = computed(() => [
 ]);
 const previewUrl = computed(() => {
   const url = new URL(props.path, "http://placeholder");
-  url.searchParams.set("__eponyme_preview", props.name);
-  url.searchParams.set("__eponyme_preview_version", selected.value);
-  url.searchParams.set("__eponyme_preview_token", previewToken.value);
+  url.searchParams.set(EPONYME_PREVIEW_QUERY, props.name);
+  url.searchParams.set(EPONYME_PREVIEW_VERSION_QUERY, selected.value);
+  url.searchParams.set(EPONYME_PREVIEW_TOKEN_QUERY, previewToken.value);
   return `${url.pathname}${url.search}`;
 });
 async function reload() {

package/dist/runtime/components/editor/EponymeSidebar.vue

@@ -12,6 +12,7 @@ import { useEponymeAuth } from "../../composables/useEponymeAuth";
 import EPAvatar from "../ui/EPAvatar.vue";
 import EPButton from "../ui/EPButton.vue";
 import EPInputText from "../ui/EPInputText.vue";
+import logoUrl from "../../assets/logo.png?url";
 const props = defineProps({
   basePath: { type: String, required: true }
 });
@@ -128,9 +129,13 @@ watch(() => route.path, () => {
       <NuxtLink
         v-if="!collapsed"
         :to="normalizedBasePath"
-        class="ep:flex ep:min-w-0 ep:items-center ep:gap-2 ep:px-3 ep:text-sm ep:font-bold ep:tracking-tight ep:text-white ep:no-underline"
+        class="ep:flex ep:min-w-0 ep:items-center ep:no-underline"
       >
-        Eponyme
+        <img
+          :src="logoUrl"
+          alt="Eponyme"
+          class="ep:block ep:size-8"
+        >
       </NuxtLink>
       <button
         type="button"

package/dist/runtime/components/fields/FieldRenderer.vue

@@ -5,6 +5,7 @@ import CheckboxGroupField from "./CheckboxGroupField.vue";
 import ColorField from "./ColorField.vue";
 import DateField from "./DateField.vue";
 import NumberField from "./NumberField.vue";
+import PhoneField from "./PhoneField.vue";
 import RadioField from "./RadioField.vue";
 import RichTextField from "./RichTextField.vue";
 import SelectField from "./SelectField.vue";
@@ -59,6 +60,8 @@ const component = computed(() => {
       return ColorField;
     case "url":
       return UrlField;
+    case "phone":
+      return PhoneField;
     default:
       return TextField;
   }
@@ -95,6 +98,14 @@ const specificProps = computed(() => {
       return { presets: field.options.presets };
     case "url":
       return { placeholder: field.options.placeholder };
+    case "phone":
+      return {
+        placeholder: field.options.placeholder,
+        countries: field.options.countries,
+        defaultCountry: field.options.defaultCountry,
+        detectCountry: field.options.detectCountry,
+        autocomplete: field.options.autocomplete
+      };
     default: {
       const options = field.options;
       return {

package/dist/runtime/components/fields/PhoneField.d.vue.ts

@@ -0,0 +1,22 @@
+import type { PhoneFieldOptions } from '../../types/field.js';
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    countries?: PhoneFieldOptions['countries'];
+    defaultCountry?: PhoneFieldOptions['defaultCountry'];
+    detectCountry?: boolean;
+    autocomplete?: PhoneFieldOptions['autocomplete'];
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/PhoneField.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from "vue";
+import EPFormField from "../ui/EPFormField.vue";
+import EPInputText from "../ui/EPInputText.vue";
+import { normalizeEponymePhone } from "../../utils/normalize-phone";
+const props = defineProps({
+  id: { type: String, required: true },
+  modelValue: { type: null, required: false },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  countries: { type: Array, required: false },
+  defaultCountry: { type: String, required: false },
+  detectCountry: { type: Boolean, required: false },
+  autocomplete: { type: String, required: false },
+  errors: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const value = computed(() => typeof props.modelValue === "string" ? props.modelValue : "");
+const options = computed(() => ({
+  countries: props.countries,
+  defaultCountry: props.defaultCountry,
+  detectCountry: props.detectCountry
+}));
+const parsed = computed(() => normalizeEponymePhone(value.value, options.value));
+function normalize() {
+  const next = parsed.value.e164;
+  if (next && next !== value.value) emit("update:modelValue", next);
+}
+</script>
+
+<template>
+  <EPFormField
+    :id="id"
+    :label="label"
+    :description="description"
+    :required="required"
+    :errors="errors"
+  >
+    <EPInputText
+      :id="id"
+      :model-value="value"
+      type="tel"
+      :autocomplete="autocomplete"
+      :placeholder="placeholder"
+      :required="required"
+      :invalid="Boolean(errors.length)"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', String($event))"
+      @blur="normalize"
+    />
+    <p
+      v-if="parsed.e164 && parsed.country"
+      class="ep:mt-1.5 ep:mb-0 ep:text-[11px] ep:text-muted-ep"
+    >
+      {{ parsed.country }} · {{ parsed.e164 }}
+    </p>
+  </EPFormField>
+</template>

package/dist/runtime/components/fields/PhoneField.vue.d.ts

@@ -0,0 +1,22 @@
+import type { PhoneFieldOptions } from '../../types/field.js';
+type __VLS_Props = {
+    id: string;
+    modelValue?: unknown;
+    label: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    countries?: PhoneFieldOptions['countries'];
+    defaultCountry?: PhoneFieldOptions['defaultCountry'];
+    detectCountry?: boolean;
+    autocomplete?: PhoneFieldOptions['autocomplete'];
+    errors?: string[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/EPLinkEditor.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
+import { middleEllipsis } from "../../utils/middle-ellipsis";
 import EPButton from "./EPButton.vue";
 import EPLinkDialog from "./EPLinkDialog.vue";
 import EPTooltip from "./EPTooltip.vue";
@@ -51,7 +52,7 @@ function openLink() {
     />
     <div class="ep:min-w-0 ep:flex-1">
       <p class="ep:m-0 ep:truncate ep:text-sm ep:text-white">
-        {{ value.href || "No link configured" }}
+        {{ value.href ? middleEllipsis(value.href, 40) : "No link configured" }}
       </p>
       <p class="ep:mt-0.5 ep:mb-0 ep:text-[11px] ep:text-muted-ep">
         {{ value.type === "internal" ? "Internal" : "External" }} · {{ value.download ? "Download" : value.openInNewTab ? "New tab" : "Same tab" }}

package/dist/runtime/composables/useEponyme.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type eponymeConfig from '#eponyme/config';
 import type { EponymeDataByName, EponymeName } from '../types/index.js';
 import type { EponymeAction, EponymeStatus, EponymeVersionSelector } from '../server/services/eponyme-store.js';
@@ -9,18 +9,26 @@ export interface UseEponymeOptions {
     /** Keep `{{ variables }}` unresolved. The dashboard editor needs the source text. */
     raw?: boolean;
 }
-/** Read and save a configured eponyme through the public or draft API. */
-export declare function useEponyme<const Name extends ConfigEponymeName>(name: Name, options?: UseEponymeOptions): {
-    data: Ref<EponymeDataByName<any, Name> | undefined>;
-    status: import("vue").ComputedRef<EponymeStatus>;
-    publishedAt: import("vue").ComputedRef<string | null>;
-    pending: import("vue").ComputedRef<boolean>;
-    error: Ref<import("nuxt/app").NuxtError<unknown> | undefined, import("nuxt/app").NuxtError<unknown> | undefined>;
-    errors: Ref<ValidationErrors, ValidationErrors>;
+/**
+ * Named, and annotated on the function below, rather than left to inference.
+ *
+ * An inferred return type has to be expanded when the declaration files are generated, and
+ * the expansion loses `typeof eponymeConfig`: it came out as `EponymeDataByName<any, Name>`,
+ * which collapses every field to the union of all possible field values. Source and
+ * playground were unaffected — they read `src` — so only installed versions of the package
+ * lost their types, on the one composable everything else goes through.
+ */
+export interface UseEponymeResult<Data extends Record<string, unknown>> {
+    data: Ref<Data | undefined>;
+    status: ComputedRef<EponymeStatus>;
+    publishedAt: ComputedRef<string | null>;
+    pending: ComputedRef<boolean>;
+    error: Ref<Error | null | undefined>;
+    errors: Ref<ValidationErrors>;
     refresh: () => Promise<void>;
-    save: {
-        (): Promise<EponymeDataByName<any, Name> | undefined>;
-        (patch: Partial<EponymeDataByName<any, Name>>, action?: EponymeAction): Promise<EponymeDataByName<any, Name> | undefined>;
-    };
-};
+    /** Without a patch, saves the data currently held. Publishes unless told otherwise. */
+    save: (patch?: Partial<Data>, action?: EponymeAction) => Promise<Data | undefined>;
+}
+/** Read and save a configured eponyme through the public or draft API. */
+export declare function useEponyme<const Name extends ConfigEponymeName>(name: Name, options?: UseEponymeOptions): UseEponymeResult<EponymeDataByName<typeof eponymeConfig, Name>>;
 export {};