@frigear-nu/events 0.0.10 → 0.1.0

package/dist/module.json

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

package/dist/module.mjs

@@ -25,7 +25,7 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/subscriptions": { 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`, ...).
+    // Provides the admin route and shell the admin pages live in; the page components come from `@frigear-nu/ui`.
     "@frigear-nu/admin": { version: ">=0.0.0", optional: true }
   },
   async setup(options, nuxt) {
@@ -53,7 +53,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.public.events = {
       pages: { events: eventsPath, event: eventPath, tickets: ticketsPath, admin: adminPath, adminEvent: adminEventPath }
     };
-    await registerDatabaseTable(nuxt, {
+    registerDatabaseTable(nuxt, {
       resolver,
       schema: (dialect) => `./runtime/server/db/schema.${dialect}`
     });
@@ -101,7 +101,9 @@ const module$1 = defineNuxtModule({
       { name: "useMyTickets", 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") }
+      { name: "useEventsTranslate", from: resolver.resolve("./runtime/app/composables/useEvents") },
+      { name: "useEventLinks", from: resolver.resolve("./runtime/app/composables/useEventLinks") },
+      { name: "useEventActions", from: resolver.resolve("./runtime/app/composables/useEventActions") }
     ]);
     addComponentsDir({ path: resolver.resolve("./runtime/app/components") });
     addModulePages(MODULE_NAME, resolver, [
@@ -124,7 +126,7 @@ const module$1 = defineNuxtModule({
       extendWidgets(nuxt, "admin.dashboard.top", { id: "events-upcoming-stat", component: resolver.resolve("./runtime/app/widgets/UpcomingEventsStat.vue"), order: 20 });
       extendWidgets(nuxt, "admin.dashboard.side", { id: "events-upcoming", component: resolver.resolve("./runtime/app/widgets/UpcomingEvents.vue"), order: 10 });
     }
-    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "account" });
   }
 });
 

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

@@ -1,5 +1,5 @@
-import { type AdminAddon, type AdminAddonGroup } from '../utils/admin-event.js';
-declare function open(addonGroup: AdminAddonGroup, currency: string, existing?: AdminAddon): void;
+import type { StaffAddon, StaffAddonGroup } from '../utils/admin-event.js';
+declare function open(addonGroup: StaffAddonGroup, currency: string, existing?: StaffAddon): void;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,12 +1,11 @@
 <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 { busy, run } = useAction();
 const dialog = ref(false);
 const groupId = ref("");
 const editingAddon = ref(null);
@@ -40,7 +39,7 @@ const save = () => run(async () => {
   }
   dialog.value = false;
   emit("refresh");
-}, t("admin.addonSaved", "Add-on saved."));
+}, { success: t("admin.addonSaved", "Add-on saved.") });
 </script>
 
 <template>
@@ -95,7 +94,7 @@ const save = () => run(async () => {
     <template #footer>
       <div class="flex w-full justify-end gap-2">
         <UButton
-          variant="subtle"
+          variant="outline"
           color="neutral"
           :label="t('admin.cancel', 'Cancel')"
           @click="dialog = false"

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

@@ -1,5 +1,5 @@
-import { type AdminAddon, type AdminAddonGroup } from '../utils/admin-event.js';
-declare function open(addonGroup: AdminAddonGroup, currency: string, existing?: AdminAddon): void;
+import type { StaffAddon, StaffAddonGroup } from '../utils/admin-event.js';
+declare function open(addonGroup: StaffAddonGroup, currency: string, existing?: StaffAddon): void;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,5 +1,5 @@
-import { type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
-declare function open(ticketType: AdminTicketType, existing?: AdminAddonGroup): void;
+import type { StaffAddonGroup, StaffTicketType } from '../utils/admin-event.js';
+declare function open(ticketType: StaffTicketType, existing?: StaffAddonGroup): void;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,10 +1,9 @@
 <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 { busy, run } = useAction();
 const dialog = ref(false);
 const ticketTypeId = ref("");
 const editingGroup = ref(null);
@@ -25,7 +24,7 @@ const save = () => run(async () => {
   }
   dialog.value = false;
   emit("refresh");
-}, t("admin.groupSaved", "Add-on group saved."));
+}, { success: t("admin.groupSaved", "Add-on group saved.") });
 </script>
 
 <template>
@@ -61,7 +60,7 @@ const save = () => run(async () => {
     <template #footer>
       <div class="flex w-full justify-end gap-2">
         <UButton
-          variant="subtle"
+          variant="outline"
           color="neutral"
           :label="t('admin.cancel', 'Cancel')"
           @click="dialog = false"

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

@@ -1,5 +1,5 @@
-import { type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
-declare function open(ticketType: AdminTicketType, existing?: AdminAddonGroup): void;
+import type { StaffAddonGroup, StaffTicketType } from '../utils/admin-event.js';
+declare function open(ticketType: StaffTicketType, existing?: StaffAddonGroup): void;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,19 +1,19 @@
-import { type AdminAddon, type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+import type { StaffAddon, StaffAddonGroup, StaffTicketType } from '../utils/admin-event.js';
 type __VLS_Props = {
-    ticketType: AdminTicketType;
+    ticketType: StaffTicketType;
 };
 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;
+    editGroup: (group: StaffAddonGroup) => any;
+    addAddon: (group: StaffAddonGroup) => any;
+    editAddon: (group: StaffAddonGroup, addon: StaffAddon) => 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;
+    onEditGroup?: ((group: StaffAddonGroup) => any) | undefined;
+    onAddAddon?: ((group: StaffAddonGroup) => any) | undefined;
+    onEditAddon?: ((group: StaffAddonGroup, addon: StaffAddon) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,30 +1,55 @@
 <script setup>
-import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
-import { useAdminAction } from "../utils/admin-event";
 defineOptions({ name: "EventAdminAddonGroups" });
 defineProps({
   ticketType: { type: Object, required: true }
 });
 const emit = defineEmits(["refresh", "addGroup", "editGroup", "addAddon", "editAddon"]);
 const t = useModuleT("events");
-const locale = useEventsLocale();
+const format = useFormat();
 const tr = useEventsTranslate();
 const confirmAction = useConfirmDialog();
-const { run } = useAdminAction();
+const { run } = useAction();
 const removeGroup = async (addonGroup) => {
-  if (!await confirmAction({ title: t("admin.confirmRemoveGroup", "Delete this add-on group and its choices?"), confirmText: t("admin.remove", "Delete"), cancelText: t("admin.cancel", "Cancel"), destructive: true })) return;
+  const title = tr(addonGroup.title);
+  if (!await confirmAction({
+    title: t("admin.confirmRemoveGroup", "Delete {name}?", { name: title }),
+    description: t("admin.confirmRemoveGroupDescription", "Its choices are deleted too. Tickets already bought keep the choices they made."),
+    confirmText: t("admin.removeGroup", "Delete add-on group"),
+    destructive: true
+  })) return;
   return run(async () => {
     await $fetch(`/api/events/admin/addon-groups/${addonGroup.id}`, { method: "DELETE" });
     emit("refresh");
-  });
+  }, { success: t("admin.groupDeleted", "Deleted {name}", { name: title }) });
 };
 const removeAddon = async (existing) => {
-  if (!await confirmAction({ title: t("admin.confirmRemoveAddon", "Delete this choice?"), confirmText: t("admin.remove", "Delete"), cancelText: t("admin.cancel", "Cancel"), destructive: true })) return;
+  const label = tr(existing.label);
+  if (!await confirmAction({
+    title: t("admin.confirmRemoveAddon", "Delete {name}?", { name: label }),
+    description: t("admin.confirmRemoveAddonDescription", "Tickets already bought keep the choice they made."),
+    confirmText: t("admin.removeAddon", "Delete choice"),
+    destructive: true
+  })) return;
   return run(async () => {
     await $fetch(`/api/events/admin/addons/${existing.id}`, { method: "DELETE" });
     emit("refresh");
-  });
+  }, { success: t("admin.addonDeleted", "Deleted {name}", { name: label }) });
 };
+const groupMenu = (addonGroup) => [
+  [
+    { label: t("admin.addAddon", "Add choice"), icon: "i-lucide-plus", onSelect: () => emit("addAddon", addonGroup) },
+    { label: t("admin.editGroup", "Edit add-on group"), icon: "i-lucide-pencil", onSelect: () => emit("editGroup", addonGroup) }
+  ],
+  [{ label: t("admin.removeGroup", "Delete add-on group"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
+    void removeGroup(addonGroup);
+  } }]
+];
+const addonMenu = (addonGroup, item) => [
+  [{ label: t("admin.editAddon", "Edit choice"), icon: "i-lucide-pencil", onSelect: () => emit("editAddon", addonGroup, item) }],
+  [{ label: t("admin.removeAddon", "Delete choice"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
+    void removeAddon(item);
+  } }]
+];
 </script>
 
 <template>
@@ -32,42 +57,21 @@ const removeAddon = async (existing) => {
     <div
       v-for="addonGroup in ticketType.addonGroups"
       :key="addonGroup.id"
-      class="border-default overflow-hidden rounded-lg border bg-default"
+      class="border-default bg-default overflow-hidden rounded-lg border"
     >
       <div class="border-default flex items-center justify-between gap-2 border-b px-3 py-2">
         <div class="min-w-0 text-sm">
-          <span class="font-medium">{{ tr(addonGroup.title) }}</span>
+          <span class="text-highlighted font-medium">{{ tr(addonGroup.title) }}</span>
           <span class="text-muted ms-2 text-xs">
             {{ addonGroup.required ? t("admin.groupRequired", "required") : t("admin.groupOptional", "optional") }}
             · {{ addonGroup.multiple ? t("admin.groupMultiple", "several choices") : t("admin.groupSingle", "one choice") }}
           </span>
         </div>
-        <div class="flex shrink-0 gap-1">
-          <UButton
-            icon="i-lucide-plus"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            :aria-label="t('admin.addAddon', 'Add choice')"
-            @click="emit('addAddon', addonGroup)"
-          />
-          <UButton
-            icon="i-lucide-pencil"
-            color="neutral"
-            variant="ghost"
-            size="xs"
-            :aria-label="t('admin.edit', 'Edit')"
-            @click="emit('editGroup', addonGroup)"
-          />
-          <UButton
-            icon="i-lucide-trash"
-            color="error"
-            variant="ghost"
-            size="xs"
-            :aria-label="t('admin.remove', 'Delete')"
-            @click="removeGroup(addonGroup)"
-          />
-        </div>
+        <RowMenu
+          :items="groupMenu(addonGroup)"
+          :subject="tr(addonGroup.title)"
+          size="xs"
+        />
       </div>
       <ul
         v-if="addonGroup.addons.length"
@@ -80,26 +84,13 @@ const removeAddon = async (existing) => {
         >
           <div>
             {{ tr(item.label) }}
-            <span class="text-muted">· {{ item.price === 0 ? t("admin.included", "Included") : `+ ${formatPrice(item.price, ticketType.currency, locale)}` }}<template v-if="item.capacity !== null"> · {{ t("admin.capacity", "capacity") }} {{ item.capacity }}</template></span>
-          </div>
-          <div class="flex shrink-0 gap-1">
-            <UButton
-              icon="i-lucide-pencil"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :aria-label="t('admin.edit', 'Edit')"
-              @click="emit('editAddon', addonGroup, item)"
-            />
-            <UButton
-              icon="i-lucide-trash"
-              color="error"
-              variant="ghost"
-              size="xs"
-              :aria-label="t('admin.remove', 'Delete')"
-              @click="removeAddon(item)"
-            />
+            <span class="text-muted">· {{ item.price === 0 ? t("admin.included", "Included") : `+ ${format.money(item.price, ticketType.currency)}` }}<template v-if="item.capacity !== null"> · {{ t("admin.capacity", "Capacity").toLowerCase() }} {{ item.capacity }}</template></span>
           </div>
+          <RowMenu
+            :items="addonMenu(addonGroup, item)"
+            :subject="tr(item.label)"
+            size="xs"
+          />
         </li>
       </ul>
       <p

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

@@ -1,19 +1,19 @@
-import { type AdminAddon, type AdminAddonGroup, type AdminTicketType } from '../utils/admin-event.js';
+import type { StaffAddon, StaffAddonGroup, StaffTicketType } from '../utils/admin-event.js';
 type __VLS_Props = {
-    ticketType: AdminTicketType;
+    ticketType: StaffTicketType;
 };
 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;
+    editGroup: (group: StaffAddonGroup) => any;
+    addAddon: (group: StaffAddonGroup) => any;
+    editAddon: (group: StaffAddonGroup, addon: StaffAddon) => 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;
+    onEditGroup?: ((group: StaffAddonGroup) => any) | undefined;
+    onAddAddon?: ((group: StaffAddonGroup) => any) | undefined;
+    onEditAddon?: ((group: StaffAddonGroup, addon: StaffAddon) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { type AdminTicketType } from '../utils/admin-event.js';
+import type { StaffTicketType } from '../utils/admin-event.js';
 type __VLS_Props = {
     eventId: string;
     /** Membership rules are only offered when @frigear-nu/subscriptions is installed. */
@@ -8,7 +8,7 @@ type __VLS_Props = {
         value: string;
     }>;
 };
-declare function open(ticketType?: AdminTicketType): void;
+declare function open(ticketType?: StaffTicketType): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,7 +1,6 @@
 <script setup>
 import { toCents, fromCents } from "@frigear-nu/ui/money";
 import { DEFAULT_CURRENCY, ticketMdcData } from "../../utils";
-import { useAdminAction } from "../utils/admin-event";
 defineOptions({ name: "EventAdminTicketTypeDialog" });
 const props = defineProps({
   eventId: { type: String, required: true },
@@ -12,7 +11,7 @@ const emit = defineEmits(["refresh"]);
 const t = useModuleT("events");
 const locale = useEventsLocale();
 const tr = useEventsTranslate();
-const { busy, run } = useAdminAction();
+const { busy, run } = useAction();
 const modes = computed(() => [
   { label: t("admin.ruleNone", "Nobody"), value: "none" },
   { label: t("admin.ruleAny", "Any membership"), value: "any" },
@@ -53,7 +52,7 @@ const save = () => run(async () => {
   }
   dialog.value = false;
   emit("refresh");
-}, t("admin.typeSaved", "Ticket type saved."));
+}, { success: t("admin.typeSaved", "Ticket type saved.") });
 </script>
 
 <template>
@@ -157,7 +156,7 @@ const save = () => run(async () => {
     <template #footer>
       <div class="flex w-full justify-end gap-2">
         <UButton
-          variant="subtle"
+          variant="outline"
           color="neutral"
           :label="t('admin.cancel', 'Cancel')"
           @click="dialog = false"

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

@@ -1,4 +1,4 @@
-import { type AdminTicketType } from '../utils/admin-event.js';
+import type { StaffTicketType } from '../utils/admin-event.js';
 type __VLS_Props = {
     eventId: string;
     /** Membership rules are only offered when @frigear-nu/subscriptions is installed. */
@@ -8,7 +8,7 @@ type __VLS_Props = {
         value: string;
     }>;
 };
-declare function open(ticketType?: AdminTicketType): void;
+declare function open(ticketType?: StaffTicketType): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     open: typeof open;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -4,14 +4,14 @@ defineProps({
   to: { type: String, required: true }
 });
 const t = useModuleT("events");
-const locale = useEventsLocale();
+const format = useFormat();
 const tr = useEventsTranslate();
 </script>
 
 <template>
   <NuxtLink
     :to="to"
-    class="group flex flex-col overflow-hidden rounded-xl bg-default ring ring-default transition hover:shadow-lg"
+    class="group bg-default ring-default flex flex-col overflow-hidden rounded-lg ring transition hover:shadow-lg"
   >
     <img
       v-if="event.image"
@@ -33,26 +33,21 @@ const tr = useEventsTranslate();
       >
         {{ t("members", "Members") }}
       </UBadge>
-      <h3 class="text-lg font-semibold text-highlighted">
+      <h3 class="text-highlighted font-semibold">
         {{ tr(event.name) }}
       </h3>
-      <p class="text-sm text-muted">
-        <NuxtTime
-          :datetime="event.startsAt"
-          :locale="locale"
-          date-style="full"
-          time-style="short"
-        /><template v-if="event.location">
+      <p class="text-muted text-sm">
+        {{ format.dateTime(event.startsAt, { dateStyle: "full" }) }}<template v-if="event.location">
           · {{ tr(event.location) }}
         </template>
       </p>
       <p
         v-if="event.description"
-        class="line-clamp-3 text-sm text-muted"
+        class="text-muted line-clamp-3 text-sm"
       >
         {{ tr(event.description) }}
       </p>
-      <span class="mt-auto inline-flex items-center gap-1 pt-2 text-sm font-medium text-primary">
+      <span class="text-primary mt-auto inline-flex items-center gap-1 pt-2 text-sm font-medium">
         {{ t("viewEvent", "View event") }}
         <UIcon
           name="i-lucide-arrow-right"

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

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (created: false | {
+        id: string;
+        slug: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((created: false | {
+        id: string;
+        slug: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,70 @@
+<script setup>
+defineOptions({ name: "EventFormSlideover" });
+const emit = defineEmits(["close"]);
+const t = useModuleT("events");
+const tr = useEventsTranslate();
+const { busy, run } = useAction();
+const draft = reactive({ name: void 0, slug: "", startsAt: "", location: void 0 });
+const slugify = (value) => value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+const draftName = computed(() => tr(draft.name));
+watch(draftName, (name, previous) => {
+  if (draft.slug === slugify(previous)) draft.slug = slugify(name);
+});
+async function save() {
+  const created = await run(
+    () => $fetch("/api/events/admin/events", {
+      method: "POST",
+      body: { name: draft.name, slug: draft.slug, startsAt: draft.startsAt, location: draft.location || null, status: "draft" }
+    }),
+    { success: t("admin.created", "Event created") }
+  );
+  if (created) emit("close", created);
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="event-form"
+    :title="t('admin.create', 'New event')"
+    :description="t('admin.createDescription', 'It is saved as a draft until you publish it.')"
+    :submit-label="t('admin.createAction', 'Create draft')"
+    :loading="busy"
+    :disabled="!draftName"
+    @close="emit('close', false)"
+  >
+    <form
+      id="event-form"
+      class="flex flex-col gap-4"
+      @submit.prevent="save"
+    >
+      <UFormField :label="t('admin.name', 'Name')">
+        <TranslatedInput
+          v-model="draft.name"
+          required
+        />
+      </UFormField>
+      <UFormField
+        :label="t('admin.slug', 'URL name')"
+        :description="t('admin.slugHelp', 'Lowercase letters, numbers and dashes.')"
+      >
+        <UInput
+          v-model="draft.slug"
+          class="w-full"
+          required
+          pattern="[a-z0-9]+(-[a-z0-9]+)*"
+        />
+      </UFormField>
+      <UFormField :label="t('admin.starts', 'Starts')">
+        <UInput
+          v-model="draft.startsAt"
+          type="datetime-local"
+          class="w-full"
+          required
+        />
+      </UFormField>
+      <UFormField :label="t('admin.location', 'Location')">
+        <TranslatedInput v-model="draft.location" />
+      </UFormField>
+    </form>
+  </FormSlideover>
+</template>

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

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (created: false | {
+        id: string;
+        slug: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((created: false | {
+        id: string;
+        slug: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,15 +1,13 @@
 <script setup>
 import { renderSVG } from "uqr";
-import { formatMoney as formatPrice } from "@frigear-nu/ui/money";
 const props = defineProps({
   ticket: { type: Object, required: true },
   to: { type: String, required: false }
 });
 const emit = defineEmits(["pay"]);
 const t = useModuleT("events");
-const locale = useEventsLocale();
+const format = useFormat();
 const tr = useEventsTranslate();
-const colors = { paid: "success", pending: "warning", cancelled: "neutral", expired: "neutral", refunded: "error" };
 const qr = computed(() => props.ticket.code ? `data:image/svg+xml;utf8,${encodeURIComponent(renderSVG(props.ticket.code, { border: 1 }))}` : null);
 const showQr = ref(false);
 </script>
@@ -18,7 +16,7 @@ const showQr = ref(false);
   <UCard :ui="{ body: 'flex flex-col gap-3' }">
     <div class="flex items-start gap-2">
       <div>
-        <h3 class="font-semibold">
+        <h3 class="text-highlighted font-semibold">
           {{ tr(ticket.eventName) }}
         </h3>
         <p class="text-sm text-muted">
@@ -32,14 +30,14 @@ const showQr = ref(false);
       </div>
       <UBadge
         class="ml-auto capitalize"
-        :color="colors[ticket.status] ?? 'neutral'"
+        :color="statusColor(ticket.status, { refunded: 'error' })"
         variant="subtle"
       >
         {{ t(`tickets.status.${ticket.status}`, ticket.status) }}
       </UBadge>
     </div>
     <p class="text-sm">
-      {{ ticket.amount === 0 ? t("detail.tickets.free", "Free") : formatPrice(ticket.amount, ticket.currency, locale) }}
+      {{ ticket.amount === 0 ? t("detail.tickets.free", "Free") : format.money(ticket.amount, ticket.currency) }}
       <UBadge
         v-if="ticket.checkedInAt"
         color="info"
@@ -76,7 +74,7 @@ const showQr = ref(false);
     <img
       v-if="showQr && qr"
       :src="qr"
-      alt="Ticket QR code"
+      :alt="t('tickets.qrAlt', 'Ticket QR code')"
       class="mx-auto w-56 rounded-md bg-white p-2"
     >
   </UCard>