@frigear-nu/events 0.0.6 → 0.0.8

package/README.md

@@ -26,7 +26,7 @@ export default defineNitroPlugin((nitro) => {
 })
 ```
 
-Full documentation: `apps/docs/content/4.modules/25.events.md`.
+Full documentation: `apps/docs/content/4.modules/06.events.md`.
 
 ## Development
 

package/dist/module.d.mts

@@ -1,14 +1,15 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { H3Event } from 'h3';
+import { Translated } from '@frigear-nu/ui/translated';
+export { Translated } from '@frigear-nu/ui/translated';
 
-/** A text that is either one string or a map of locale -> string. */
-type Translated = string | Record<string, string>;
 /** `null` = open to everyone, `'any'` = any active subscription, or a list of plan keys. */
 type MembershipRequirement = 'any' | string[] | null;
 type EventStatus = 'draft' | 'published' | 'archived';
 type TicketStatus = 'pending' | 'paid' | 'cancelled' | 'refunded' | 'expired';
 type ModuleOptions = {
     settings?: {
+        mcp?: boolean;
         pages?: {
             /** Event list. `true` = `/events`. */
             events?: string | boolean;
@@ -16,6 +17,10 @@ type ModuleOptions = {
             event?: string | boolean;
             /** The signed-in user's tickets. `true` = `/account/tickets`. */
             tickets?: string | boolean;
+            /** Staff event list (needs the `events:authorize` hook to allow staff). `true` = `/admin/events`. Off by default. */
+            admin?: string | boolean;
+            /** Staff event page (details, ticket types, attendees); must contain an `:id` param. `true` = `/admin/events/:id`. Off by default. */
+            adminEvent?: string | boolean;
         };
         /** Minutes an unpaid ticket keeps its seat (the Stripe session expires then). Defaults to `30`. */
         reservationMinutes?: number;
@@ -23,14 +28,14 @@ type ModuleOptions = {
 };
 type EventsRuntimeConfig = {
     reservationMinutes: number;
-    /** Whether `@frigear-nu/subscriptions` is installed (membership requirements can be evaluated). */
-    membershipEnabled: boolean;
 };
 type PublicModuleOptions = {
     pages: {
         events?: string;
         event?: string;
         tickets?: string;
+        admin?: string;
+        adminEvent?: string;
     };
 };
 type AddonDto = {
@@ -57,6 +62,8 @@ type TicketTypeDto = {
     hidePrice: boolean;
     isDefault: boolean;
     requiresMembership: MembershipRequirement;
+    /** Holders of these plans cannot buy this ticket (`'any'` = any active subscription). */
+    excludesMembership: MembershipRequirement;
     /** Seats left, or null when unlimited. */
     remaining: number | null;
     saleStartsAt: string | null;
@@ -64,7 +71,7 @@ type TicketTypeDto = {
     /** `open | not_started | ended | sold_out`. */
     saleState: 'open' | 'not_started' | 'ended' | 'sold_out';
     /** Only set for signed-in users: `null` when allowed, otherwise why not. */
-    blocked: 'membership_required' | 'limit_reached' | null;
+    blocked: 'membership_required' | 'membership_excluded' | 'limit_reached' | null;
     addonGroups: AddonGroupDto[];
 };
 type EventSummaryDto = {
@@ -73,7 +80,7 @@ type EventSummaryDto = {
     name: Translated;
     description: Translated | null;
     image: string | null;
-    location: string | null;
+    location: Translated | null;
     startsAt: string;
     endsAt: string | null;
     requiresMembership: MembershipRequirement;
@@ -88,6 +95,8 @@ type PurchaseBody = {
     addonIds?: string[];
     successUrl?: string;
     cancelUrl?: string;
+    /** The buyer's site language (e.g. `da`), kept on the ticket so later mails and Stripe texts use it. */
+    locale?: string;
 };
 type PurchaseResponse = {
     ticket: TicketDto;
@@ -115,6 +124,8 @@ type TicketDto = {
     code: string | null;
     checkedInAt: string | null;
     createdAt: string;
+    /** Language the buyer was browsing in when buying, for localised mails; `null` for tickets bought before it was kept. */
+    locale: string | null;
 };
 type CheckInResponse = {
     ok: boolean;
@@ -135,6 +146,26 @@ type AuthorizeContext = {
     /** Set `ctx.allowed = true` to let the user manage events / check tickets in. Denied by default. */
     allowed: boolean;
 };
+/** A selectable membership (plan) offered by a membership provider. */
+type MembershipOption = {
+    value: string;
+    label: string;
+};
+/** Context of the `events:membership:check` hook. */
+type MembershipCheckContext = {
+    userId: number;
+    /** `'any'` = any active membership, or the plan keys of which the user must hold one. */
+    requirement: 'any' | string[];
+    /** A provider sets this to `true` when the user holds a matching membership. Defaults to `false`. */
+    satisfied: boolean;
+};
+/** Context of the `events:membership:options` hook. */
+type MembershipOptionsContext = {
+    /** A provider sets this to `true`: membership rules can then be used on events and tickets. */
+    available: boolean;
+    /** The memberships staff can pick from. */
+    options: MembershipOption[];
+};
 type TicketHookContext = {
     ticket: TicketDto;
 };
@@ -154,6 +185,13 @@ declare module 'nitropack' {
     interface NitroRuntimeHooks {
         /** Staff gate (event management, check-in): set `ctx.allowed = true` to let the user in. Denied by default. */
         'events:authorize': (ctx: AuthorizeContext) => void | Promise<void>;
+        /**
+         * Membership provider (e.g. `@frigear-nu/subscriptions`): set `ctx.satisfied = true` when the user holds a
+         * membership matching `ctx.requirement`. With no provider a requirement can never be met, so it fails closed.
+         */
+        'events:membership:check': (ctx: MembershipCheckContext) => void | Promise<void>;
+        /** Membership provider: set `ctx.available = true` and add the selectable memberships to `ctx.options`. */
+        'events:membership:options': (ctx: MembershipOptionsContext) => void | Promise<void>;
         /** Policy hook: throw to deny a purchase. */
         'events:purchase:before': (ctx: PurchaseBeforeContext) => void | Promise<void>;
         /** A ticket became `paid` (free tickets immediately, paid ones after the Stripe event). Send confirmations here. */
@@ -165,4 +203,4 @@ declare module 'nitropack' {
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { AddonDto, AddonGroupDto, AuthorizeContext, CheckInResponse, EventDetailDto, EventStatus, EventSummaryDto, EventsRuntimeConfig, MembershipRequirement, ModuleOptions, PublicModuleOptions, PurchaseBeforeContext, PurchaseBody, PurchaseResponse, TicketDto, TicketHookContext, TicketStatus, TicketTypeDto, Translated };
+export type { AddonDto, AddonGroupDto, AuthorizeContext, CheckInResponse, EventDetailDto, EventStatus, EventSummaryDto, EventsRuntimeConfig, MembershipCheckContext, MembershipOption, MembershipOptionsContext, MembershipRequirement, ModuleOptions, PublicModuleOptions, PurchaseBeforeContext, PurchaseBody, PurchaseResponse, TicketDto, TicketHookContext, TicketStatus, TicketTypeDto };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/events",
   "configKey": "events",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,12 +1,10 @@
-import { defineNuxtModule, createResolver, hasNuxtModule, addServerTemplate, addTypeTemplate, addServerImportsDir, addServerPlugin, addImports, addComponentsDir, extendPages, addServerHandler } from '@nuxt/kit';
-import { registerModule, registerLocales, registerDatabaseTable, defineModulePage } from '@frigear-nu/module-kit/utils';
+import { defineNuxtModule, createResolver, hasNuxtModule, addServerImportsDir, addServerPlugin, addImports, addComponentsDir, addServerHandler } from '@nuxt/kit';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, registerDatabaseTable, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
+import { adminRoute } from '@frigear-nu/admin/utils';
+import { addAuthScope } from '@frigear-nu/auth/utils';
+import { addMcpDefinitions } from '@frigear-nu/mcp/utils';
 
 const MODULE_NAME = "@frigear-nu/events";
-function resolvePagePath(setting, defaultPath) {
-  if (typeof setting === "string") return setting;
-  if (setting === true) return defaultPath;
-  return void 0;
-}
 const module$1 = defineNuxtModule({
   meta: { name: MODULE_NAME, configKey: "events" },
   defaults: {
@@ -18,44 +16,47 @@ const module$1 = defineNuxtModule({
       defaults: { kv: true }
     },
     "@frigear-nu/module-kit": { version: ">=0.0.1" },
+    "@frigear-nu/auth": { version: ">=0.0.1" },
+    "@frigear-nu/mcp": { version: ">=0.0.1" },
     "@frigear-nu/users": { version: ">=0.0.1" },
+    "@frigear-nu/ui": { version: ">=0.0.1" },
     "@frigear-nu/stripe": { version: ">=0.0.1" },
     "@frigear-nu/payments": { version: ">=0.0.1" },
     "@frigear-nu/subscriptions": { version: ">=0.0.1", optional: true },
-    "@frigear-nu/menu": { version: ">=0.0.1", optional: true }
+    "@frigear-nu/menu": { version: ">=0.0.1", optional: true },
+    "@frigear-nu/widget": { version: ">=0.0.0", optional: true },
+    // Provides the shared page components of the admin pages (`AdminPage`, `AdminTable`, ...).
+    "@frigear-nu/admin": { version: ">=0.0.0", optional: true }
   },
   async setup(options, nuxt) {
     registerModule(MODULE_NAME, nuxt);
+    addAuthScope(
+      nuxt,
+      { name: "events:manage", description: "Manage events, tickets and check-in (staff)" },
+      { name: "tickets:read", description: "Read your tickets and event details" },
+      { name: "tickets:write", description: "Buy tickets and pay for them" },
+      { name: "events:pii", description: "See attendee names and emails through MCP tools (also needs events:manage)" }
+    );
     const resolver = createResolver(import.meta.url);
+    registerTailwindSource(nuxt, resolver.resolve("./runtime/app"));
     registerLocales(nuxt, resolver.resolve("./runtime/i18n/lang"));
     const settings = options.settings ?? {};
-    const withMenus = hasNuxtModule("@frigear-nu/menu");
-    const withMembership = hasNuxtModule("@frigear-nu/subscriptions");
     const eventsPath = resolvePagePath(settings.pages?.events, "/events");
     const eventPath = resolvePagePath(settings.pages?.event, "/events/:slug");
     const ticketsPath = resolvePagePath(settings.pages?.tickets, "/account/tickets");
+    const withAdmin = hasNuxtModule("@frigear-nu/admin");
+    const adminPath = withAdmin ? resolvePagePath(settings.pages?.admin, adminRoute(nuxt, "events")) : void 0;
+    const adminEventPath = withAdmin ? resolvePagePath(settings.pages?.adminEvent, adminRoute(nuxt, "events", ":id")) : void 0;
     nuxt.options.runtimeConfig.events = {
-      reservationMinutes: settings.reservationMinutes ?? 30,
-      membershipEnabled: withMembership
+      reservationMinutes: settings.reservationMinutes ?? 30
     };
     nuxt.options.runtimeConfig.public.events = {
-      pages: { events: eventsPath, event: eventPath, tickets: ticketsPath }
+      pages: { events: eventsPath, event: eventPath, tickets: ticketsPath, admin: adminPath, adminEvent: adminEventPath }
     };
     await registerDatabaseTable(nuxt, {
       resolver,
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
-    addServerTemplate({
-      filename: "#events/membership",
-      getContents: () => withMembership ? `export { hasActiveSubscription } from '@frigear-nu/subscriptions/utils'` : `export const hasActiveSubscription = async () => false`
-    });
-    addTypeTemplate({
-      filename: "types/events-membership.d.ts",
-      getContents: () => `declare module '#events/membership' {
-  export function hasActiveSubscription(userId: number, options?: { plans?: string[], statuses?: string[] }): Promise<boolean>
-}
-`
-    });
     const route = (method, path, file) => addServerHandler({ route: `/api/events${path}`, method, handler: resolver.resolve(`./runtime/server/routes/${file}`) });
     route("get", "", "public/events.get");
     route("get", "/tickets/me", "public/tickets-me.get");
@@ -64,10 +65,13 @@ const module$1 = defineNuxtModule({
     route("post", "/check-in", "public/check-in.post");
     route("get", "/:slug", "public/event.get");
     route("post", "/:slug/purchase", "public/purchase.post");
+    route("get", "/admin/membership-options", "admin/membership-options.get");
     route("get", "/admin/events", "admin/events.get");
+    route("get", "/admin/events/:id", "admin/event.get");
     route("post", "/admin/events", "admin/events.post");
     route("patch", "/admin/events/:id", "admin/event.patch");
     route("delete", "/admin/events/:id", "admin/event.delete");
+    route("post", "/admin/events/:id/clone", "admin/event-clone.post");
     route("get", "/admin/events/:id/tickets", "admin/attendees.get");
     route("post", "/admin/events/:id/ticket-types", "admin/ticket-types.post");
     route("patch", "/admin/ticket-types/:id", "admin/ticket-type.patch");
@@ -81,32 +85,39 @@ const module$1 = defineNuxtModule({
     route("post", "/admin/tickets/:id/cancel", "admin/ticket-cancel.post");
     route("post", "/admin/tickets/:id/refund", "admin/ticket-refund.post");
     addServerImportsDir(resolver.resolve("./runtime/server/utils"));
+    if (settings.mcp === true) addMcpDefinitions(nuxt, resolver.resolve("./runtime/server/mcp"));
     addServerPlugin(resolver.resolve("./runtime/server/plugins/payment-hooks"));
+    addServerPlugin(resolver.resolve("./runtime/server/plugins/staff-scopes"));
+    nuxt.hook("modules:done", () => {
+      if (hasNuxtModule("@frigear-nu/subscriptions", nuxt)) {
+        addServerPlugin(resolver.resolve("./runtime/server/plugins/subscriptions-membership"));
+      }
+    });
     addImports([
       { name: "useEvents", from: resolver.resolve("./runtime/app/composables/useEvents") },
       { name: "useEvent", from: resolver.resolve("./runtime/app/composables/useEvents") },
       { name: "useMyTickets", from: resolver.resolve("./runtime/app/composables/useEvents") },
-      { name: "useEventsLocale", from: resolver.resolve("./runtime/app/composables/useEvents") }
+      { name: "useEventsLocale", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useEventsFallbackLocale", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useEventsTranslate", from: resolver.resolve("./runtime/app/composables/useEvents") }
     ]);
     addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
-    if (eventsPath || eventPath || ticketsPath) {
-      extendPages((pages) => {
-        const existingPaths = new Set(pages.map((page) => page.path));
-        if (eventsPath && !existingPaths.has(eventsPath)) {
-          pages.push(defineModulePage(MODULE_NAME, { name: "events-list", path: eventsPath, file: resolver.resolve("./runtime/app/pages/events.vue") }));
-        }
-        if (eventPath && !existingPaths.has(eventPath)) {
-          pages.push(defineModulePage(MODULE_NAME, { name: "events-detail", path: eventPath, file: resolver.resolve("./runtime/app/pages/event.vue") }));
-        }
-        if (ticketsPath && !existingPaths.has(ticketsPath)) {
-          pages.push(defineModulePage(MODULE_NAME, { name: "events-tickets", path: ticketsPath, file: resolver.resolve("./runtime/app/pages/tickets.vue") }));
-        }
-      });
-    }
-    if (withMenus) {
-      const { registerMenuSource } = await import('@frigear-nu/menu/utils');
-      registerMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    addModulePages(MODULE_NAME, resolver, [
+      { name: "events-list", path: eventsPath, file: "./runtime/app/pages/events.vue" },
+      { name: "events-detail", path: eventPath, file: "./runtime/app/pages/event.vue" },
+      { name: "events-admin", path: adminPath, file: "./runtime/app/pages/admin.vue" },
+      { name: "events-admin-event", path: adminEventPath, file: "./runtime/app/pages/admin-event.vue" },
+      { name: "events-tickets", path: ticketsPath, file: "./runtime/app/pages/tickets.vue" }
+    ]);
+    if (adminEventPath && hasNuxtModule("@frigear-nu/widget")) {
+      const { extendTabs } = await import('@frigear-nu/widget/utils');
+      extendTabs(nuxt, "admin.events", [
+        { id: "details", component: resolver.resolve("./runtime/app/tabs/Details.vue"), order: 0, label: "Details", labelKey: "events.admin.tabs.details", icon: "i-lucide-file-text" },
+        { id: "tickets", component: resolver.resolve("./runtime/app/tabs/Tickets.vue"), order: 10, label: "Tickets", labelKey: "events.admin.tabs.tickets", icon: "i-lucide-ticket" },
+        { id: "attendees", component: resolver.resolve("./runtime/app/tabs/Attendees.vue"), order: 20, label: "Attendees", labelKey: "events.admin.tabs.attendees", icon: "i-lucide-users" }
+      ]);
     }
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
   }
 });
 

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

@@ -0,0 +1,11 @@
+import { type AdminAddon, type AdminAddonGroup } from '../utils/admin-event.js';
+declare function open(addonGroup: AdminAddonGroup, currency: string, existing?: AdminAddon): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,113 @@
+<script setup>
+import { fromCents, toCents } from "@frigear-nu/ui/money";
+import { DEFAULT_CURRENCY } from "../../utils";
+import { useAdminAction } from "../utils/admin-event";
+defineOptions({ name: "EventAdminAddonDialog" });
+const emit = defineEmits(["refresh"]);
+const t = useModuleT("events");
+const tr = useEventsTranslate();
+const { busy, run } = useAdminAction();
+const dialog = ref(false);
+const groupId = ref("");
+const editingAddon = ref(null);
+const addon = reactive({ label: void 0, description: void 0, price: 0, capacity: "" });
+const addonCurrency = ref(DEFAULT_CURRENCY);
+function open(addonGroup, currency, existing) {
+  groupId.value = addonGroup.id;
+  addonCurrency.value = currency;
+  editingAddon.value = existing ?? null;
+  Object.assign(addon, {
+    label: existing?.label,
+    description: existing?.description ?? void 0,
+    price: existing ? fromCents(existing.price, currency) : 0,
+    capacity: existing?.capacity ?? ""
+  });
+  dialog.value = true;
+}
+defineExpose({ open });
+const save = () => run(async () => {
+  const body = {
+    label: addon.label,
+    description: addon.description ?? null,
+    // Prices are stored in minor units (øre/cents).
+    price: toCents(Number(addon.price), addonCurrency.value),
+    capacity: addon.capacity === "" ? null : Number(addon.capacity)
+  };
+  if (editingAddon.value) {
+    await $fetch(`/api/events/admin/addons/${editingAddon.value.id}`, { method: "PATCH", body });
+  } else {
+    await $fetch(`/api/events/admin/addon-groups/${groupId.value}/addons`, { method: "POST", body });
+  }
+  dialog.value = false;
+  emit("refresh");
+}, t("admin.addonSaved", "Add-on saved."));
+</script>
+
+<template>
+  <UModal
+    v-model:open="dialog"
+    :title="editingAddon ? t('admin.editAddon', 'Edit choice') : t('admin.addAddon', 'Add choice')"
+  >
+    <template #body>
+      <form
+        id="admin-addon-form"
+        class="flex flex-col gap-4"
+        @submit.prevent="save"
+      >
+        <UFormField :label="t('admin.name', 'Name')">
+          <TranslatedInput
+            v-model="addon.label"
+            required
+          />
+        </UFormField>
+        <UFormField :label="t('admin.description', 'Description')">
+          <TranslatedInput
+            v-model="addon.description"
+            multiline
+            :rows="2"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('admin.price', 'Price')"
+          :description="t('admin.addonPriceHelp', 'Added to the ticket price. 0 means included.')"
+        >
+          <UInput
+            v-model="addon.price"
+            type="number"
+            min="0"
+            step="0.01"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('admin.capacity', 'Capacity')"
+          :description="t('admin.capacityHelp', 'Leave empty for unlimited.')"
+        >
+          <UInput
+            v-model="addon.capacity"
+            type="number"
+            min="0"
+            class="w-full"
+          />
+        </UFormField>
+      </form>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          variant="subtle"
+          color="neutral"
+          :label="t('admin.cancel', 'Cancel')"
+          @click="dialog = false"
+        />
+        <UButton
+          type="submit"
+          form="admin-addon-form"
+          :loading="busy"
+          :disabled="!tr(addon.label)"
+          :label="t('admin.save', 'Save')"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,11 @@
+import { type AdminAddon, type AdminAddonGroup } from '../utils/admin-event.js';
+declare function open(addonGroup: AdminAddonGroup, currency: string, existing?: AdminAddon): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+import { type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+declare function open(ticketType: AdminTicketType, existing?: AdminAddonGroup): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,79 @@
+<script setup>
+import { useAdminAction } from "../utils/admin-event";
+defineOptions({ name: "EventAdminAddonGroupDialog" });
+const emit = defineEmits(["refresh"]);
+const t = useModuleT("events");
+const tr = useEventsTranslate();
+const { busy, run } = useAdminAction();
+const dialog = ref(false);
+const ticketTypeId = ref("");
+const editingGroup = ref(null);
+const group = reactive({ title: void 0, required: false, multiple: false });
+function open(ticketType, existing) {
+  ticketTypeId.value = ticketType.id;
+  editingGroup.value = existing ?? null;
+  Object.assign(group, { title: existing?.title, required: existing?.required ?? false, multiple: existing?.multiple ?? false });
+  dialog.value = true;
+}
+defineExpose({ open });
+const save = () => run(async () => {
+  const body = { title: group.title, required: group.required, multiple: group.multiple };
+  if (editingGroup.value) {
+    await $fetch(`/api/events/admin/addon-groups/${editingGroup.value.id}`, { method: "PATCH", body });
+  } else {
+    await $fetch(`/api/events/admin/ticket-types/${ticketTypeId.value}/addon-groups`, { method: "POST", body });
+  }
+  dialog.value = false;
+  emit("refresh");
+}, t("admin.groupSaved", "Add-on group saved."));
+</script>
+
+<template>
+  <UModal
+    v-model:open="dialog"
+    :title="editingGroup ? t('admin.editGroup', 'Edit add-on group') : t('admin.addGroup', 'Add add-on group')"
+  >
+    <template #body>
+      <form
+        id="admin-addon-group-form"
+        class="flex flex-col gap-4"
+        @submit.prevent="save"
+      >
+        <UFormField
+          :label="t('admin.groupTitle', 'Title')"
+          :description="t('admin.groupTitleHelp', 'Shown above the choices, e.g. Food.')"
+        >
+          <TranslatedInput
+            v-model="group.title"
+            required
+          />
+        </UFormField>
+        <UCheckbox
+          v-model="group.required"
+          :label="t('admin.groupRequiredLabel', 'Buyers must choose at least one')"
+        />
+        <UCheckbox
+          v-model="group.multiple"
+          :label="t('admin.groupMultipleLabel', 'Buyers can choose several')"
+        />
+      </form>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          variant="subtle"
+          color="neutral"
+          :label="t('admin.cancel', 'Cancel')"
+          @click="dialog = false"
+        />
+        <UButton
+          type="submit"
+          form="admin-addon-group-form"
+          :loading="busy"
+          :disabled="!tr(group.title)"
+          :label="t('admin.save', 'Save')"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,11 @@
+import { type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+declare function open(ticketType: AdminTicketType, existing?: AdminAddonGroup): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import { type AdminAddon, type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+type __VLS_Props = {
+    ticketType: AdminTicketType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+    addGroup: () => any;
+    editGroup: (group: AdminAddonGroup) => any;
+    addAddon: (group: AdminAddonGroup) => any;
+    editAddon: (group: AdminAddonGroup, addon: AdminAddon) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+    onAddGroup?: (() => any) | undefined;
+    onEditGroup?: ((group: AdminAddonGroup) => any) | undefined;
+    onAddAddon?: ((group: AdminAddonGroup) => any) | undefined;
+    onEditAddon?: ((group: AdminAddonGroup, addon: AdminAddon) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;