@karibsen/eponyme 0.6.0 → 0.8.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, tags, 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,59 @@ field.string({
 })
 ```
 
+### Tags
+
+`field.tags()` holds a short list of values, with suggestions and optional free entry:
+
+```ts
+tags: field.tags({
+  suggestions: ['Nuxt', 'Vue', 'TypeScript'],
+  allowCustom: true,
+  maxItems: 5,
+})
+```
+
+The value type follows the options: closed, it is `('Nuxt' | 'Vue' | 'TypeScript')[]`; with
+`allowCustom`, `string[]`. One array never mixes two types.
+
+The list is normalised **on the server** before the write: trimmed, blanks dropped, duplicates
+folded case-insensitively. A suggestion imposes its spelling, so typing `nuxt` beside a declared
+`Nuxt` yields `Nuxt` and a listing never splits in two. `minItems` and `maxItems` count what is
+left after that folding.
+
+### 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.
@@ -174,17 +244,49 @@ Add the required models to your Prisma schema:
 
 ```prisma
 model Eponyme {
-  name      String    @id
-  data      Json      @db.JsonB
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime?
-  versions  EponymeVersion[]
+  name        String    @id
+  draft       Json      @db.JsonB
+  published   Json      @db.JsonB
+  status      String
+  publishedAt DateTime?
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime?
+  versions    EponymeVersion[]
+  index       EponymeEntryIndex[]
 
   @@index([deletedAt])
+  @@index([publishedAt])
   @@map("eponyme_entries")
 }
 
+/// Filterable values pulled out of the content columns, so a listing can look them up
+/// instead of loading and normalizing every entry of a collection to compare them.
+/// Rewritten for an entry inside the same transaction as the write that changed it.
+model EponymeEntryIndex {
+  entryName String
+  /// "draft" or "published": the two disagree, and a public listing must only see one.
+  version   String
+  key       String
+  /// Case-folded, so a lookup never has to guess which spelling was stored first.
+  value     String
+  entry     Eponyme @relation(fields: [entryName], references: [name], onDelete: Cascade)
+
+  @@id([entryName, version, key, value])
+  @@index([key, version, value])
+  @@map("eponyme_entry_index")
+}
+
+/// Remembers which filterable schema each collection was last indexed against, so the
+/// module can rebuild only what a config change actually invalidated.
+model EponymeIndexState {
+  name        String   @id
+  fingerprint String
+  updatedAt   DateTime @updatedAt
+
+  @@map("eponyme_index_state")
+}
+
 model EponymeVersion {
   id        Int          @id @default(autoincrement())
   entryName String
@@ -740,44 +842,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,133 @@ 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.
+     * Whether the filterable index is rebuilt at startup when the configuration that produced
+     * it has changed.
+     *
+     * @remarks
+     * Leave it on. Ordinary writes keep the index current, but a field that becomes filterable
+     * leaves the entries already stored without a row for it, and a filter on them then answers
+     * "none" instead of failing — a wrong listing rather than an error.
+     *
+     * Turning it off is an escape hatch: if a rebuild ever fails on every boot, this gets the
+     * application up again so `reindexEponymeEntries()` can be run by hand.
+     *
+     * @default true
+     */
+    autoReindex?: boolean;
+    /**
+     * 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.6.0",
+  "version": "0.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +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",
@@ -18,6 +30,7 @@ const module$1 = defineNuxtModule({
       sessionDurationDays: 7
     },
     cacheSeconds: 5,
+    autoReindex: true,
     browserCacheSeconds: 30,
     cdnCacheSeconds: 300
   },
@@ -64,6 +77,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 = {
@@ -76,6 +90,7 @@ const module$1 = defineNuxtModule({
     };
     nuxt.options.runtimeConfig.eponymeContent = {
       cacheSeconds: options.cacheSeconds ?? 5,
+      autoReindex: options.autoReindex ?? true,
       browserCacheSeconds: options.browserCacheSeconds ?? 30,
       cdnCacheSeconds: options.cdnCacheSeconds ?? 300
     };
@@ -113,6 +128,9 @@ Note that '~/' points at ${nuxt.options.srcDir}, so a server module needs '~~/'.
     addImportsDir(resolver.resolve("./runtime/composables"));
     addServerImports([
       { name: "getEponymeSitemapEntries", from: resolver.resolve("./runtime/server/utils/eponyme-sitemap") },
+      // The backfill for the filterable index, which a migration cannot do on its own:
+      // reading a value out of the JSONB envelope needs the configured schema.
+      { name: "reindexEponymeEntries", from: resolver.resolve("./runtime/server/utils/eponyme-reindex") },
       // A `custom` form posts to the host application's own route, so this is what
       // keeps server-side validation as the security boundary.
       { name: "validateEponymeForm", from: resolver.resolve("./runtime/server/utils/eponyme-form") },
@@ -150,7 +168,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' {
@@ -161,10 +178,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/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/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,10 +5,12 @@ 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";
 import SlugField from "./SlugField.vue";
+import TagsField from "./TagsField.vue";
 import TextareaField from "./TextareaField.vue";
 import TextField from "./TextField.vue";
 import UrlField from "./UrlField.vue";
@@ -59,6 +61,10 @@ const component = computed(() => {
       return ColorField;
     case "url":
       return UrlField;
+    case "phone":
+      return PhoneField;
+    case "tags":
+      return TagsField;
     default:
       return TextField;
   }
@@ -78,6 +84,14 @@ const specificProps = computed(() => {
     case "radio":
     case "checkboxGroup":
       return { options: field.options.options };
+    case "tags":
+      return {
+        suggestions: field.options.suggestions,
+        allowCustom: field.options.allowCustom,
+        minItems: field.options.minItems,
+        maxItems: field.options.maxItems,
+        placeholder: field.options.placeholder
+      };
     case "select":
       return { options: field.options.options, placeholder: field.options.placeholder };
     case "number":
@@ -95,6 +109,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>