@webx-ui/module-banners 0.1.0

package/dist/index.js

@@ -0,0 +1,979 @@
+import { defineComponent as X, computed as $, ref as W, watch as j, onMounted as ke, onBeforeUnmount as Ce, openBlock as m, createElementBlock as M, Fragment as H, createVNode as c, unref as e, withCtx as p, createSlots as _e, createTextVNode as E, toDisplayString as L, createBlock as D, createCommentVNode as A, useTemplateRef as Ne, nextTick as qe, isRef as De, createElementVNode as R, withKeys as me, normalizeClass as ae, resolveDynamicComponent as Ie, renderList as Oe } from "vue";
+import { useRoute as ie, useRouter as ce, onBeforeRouteLeave as Le } from "vue-router";
+import { useLocales as xe, localizedValue as Me, confirm as G, WxSkeleton as Q, WxCard as te, WxBadge as ne, WxFormItem as le, WxSelect as Re, WxActionBar as Ue, WxButton as se, toast as T, useModal as ze, WxDialog as Ae, WxInput as ye, WxSpace as Ee, WxTooltip as Ke, WxIcon as re, WxSegmented as Fe, WxEmpty as oe, WxSortableList as Je, WxAlert as je, createModal as He, WxListDetail as Ge, WxText as he, WxIndicator as Qe } from "@webx-ui/core";
+import { useAdmin as J, useTranslate as Y, useErrorText as ue, WxScreenHead as $e, WxScreen as Xe, WxSaveState as Ye, WxRowMenu as Pe, WxListScreen as Ze } from "@webx-ui/module-admin";
+function Z(i) {
+  const s = `${i.apiPath}/banners`, u = (n) => `${s}/places/${encodeURIComponent(n)}`, y = (n) => n.data;
+  return {
+    places: () => i.http.get(`${s}/places`).then(y),
+    createPlace: (n) => i.http.post(`${s}/places`, n).then(y),
+    renamePlace: (n, v) => i.http.put(u(n), { title: v }).then(y),
+    removePlace: (n) => i.http.delete(u(n)).then(() => {
+    }),
+    list: (n, v = !1) => i.http.get(`${u(n)}/banners${v ? "?trashed=1" : ""}`).then(y),
+    get: (n) => i.http.get(`${s}/${n}`).then(y),
+    create: (n, v) => i.http.post(`${u(n)}/banners`, { values: v }).then(y),
+    save: (n, v, d) => i.http.put(
+      `${s}/${n}`,
+      d === void 0 ? { values: v } : { values: v, place: d }
+    ).then(y),
+    remove: (n) => i.http.delete(`${s}/${n}`).then(() => {
+    }),
+    // The resource of the list line, and not the form's pair: a restored banner stays closed.
+    restore: (n) => i.http.post(`${s}/${n}/restore`, {}).then(y),
+    reorder: (n, v) => i.http.post(`${u(n)}/reorder`, { ids: v }).then(() => {
+    })
+  };
+}
+const ea = {
+  module: {
+    banners: "Banners"
+  },
+  places: {
+    hero: "Home page slider",
+    promo: "Promo strip",
+    list: "Places",
+    new: "New place",
+    title: "Name",
+    key: "Key",
+    "key-help": "What the site’s template asks for: lowercase Latin letters, digits and dashes, starting with a letter. It cannot be changed later.",
+    declared: "Declared in the configuration",
+    "in-template": "In a template: banners(':key')",
+    count: "Banners",
+    rename: "Rename",
+    delete: "Delete",
+    "delete-confirm": "Delete the place “:title”?",
+    "delete-not-empty": "Only an empty place can be deleted — the bin counts too.",
+    empty: "No places yet",
+    choose: "Choose a place on the left",
+    create: "Create",
+    save: "Save",
+    cancel: "Cancel",
+    created: "Place created",
+    renamed: "Place renamed",
+    deleted: "Place deleted",
+    places: "Places",
+    "new-title": "New place",
+    "rename-title": "Rename the place",
+    "delete-title": "Delete the place “:place”?",
+    "delete-text": "There is nothing in it. A template that still asks for it gets an empty list, not an error.",
+    "delete-empty-first": "Delete: empty it first",
+    "delete-blocked": "Banners in this place, the bin included: :count. Take them out first.",
+    "field-title": "Name",
+    "field-key": "Key",
+    "declared-help": "Cannot be renamed or deleted here: a template asks for it by its key.",
+    usage: "In a template:",
+    "layout-single": "One banner",
+    "layout-random": "A random one",
+    "layout-slider": "Slider",
+    "empty-help": "The site’s config declares the places its templates ask for.",
+    "choose-help": "Its banners open beside the list."
+  },
+  banner: {
+    new: "New banner",
+    trash: "Bin",
+    "to-trash": "Move to the bin",
+    restore: "Restore",
+    open: "Open",
+    enable: "Turn on",
+    disable: "Turn off",
+    disabled: "Off",
+    video: "Video",
+    empty: "No banners in this place yet",
+    "trash-empty": "The bin is empty",
+    place: "Place",
+    "place-help": "Moving the banner puts it at the end of the new place.",
+    back: "Back to the place",
+    save: "Save",
+    saved: "Banner saved",
+    trashed: "Bin",
+    restored: "Banner restored",
+    "leave-title": "Leave without saving?",
+    "leave-text": "The changes to this banner will be lost.",
+    leave: "Leave",
+    stay: "Stay",
+    reorder: "Reorder",
+    untitled: "Untitled banner",
+    all: "Banners",
+    "empty-help": "The site shows them wherever a template asks for this place.",
+    "empty-bin": "The bin is empty.",
+    "no-picture": "No picture",
+    order: "Drag to change the order on the site.",
+    "switched-on": "Switched on.",
+    "switched-off": "Switched off.",
+    delete: "Delete",
+    "delete-title": "Delete “:name”?",
+    "delete-text": "It goes to the bin and leaves the site. Restored, it comes back to its place.",
+    deleted: "Moved to the bin.",
+    "reorder-failed": "The new order was not saved.",
+    "save-failed": "Not saved.",
+    cancel: "Cancel"
+  },
+  screen: {
+    media: "Pictures and video",
+    image: "Picture",
+    "image-help": "Required. Shown on wide screens, and as the poster of the video.",
+    "image-mobile": "Picture for phones",
+    "image-mobile-help": "Optional. Narrow screens show it instead of the picture above.",
+    video: "Video",
+    "video-help": "Optional. Plays silently over the picture; the picture becomes its poster and what is seen without it.",
+    words: "Words",
+    title: "Title",
+    "title-help": "A banner with words is shown only in the languages they are written in; one without words is shown everywhere.",
+    text: "Text",
+    "text-help": "Plain text; line breaks are kept.",
+    buttons: "Buttons",
+    "buttons-help": "Up to three. A button without a label in a language is not shown in it.",
+    "buttons-add": "Add a button",
+    "buttons-empty": "No buttons",
+    label: "Label",
+    link: "Link",
+    variant: "Look",
+    "variant-placeholder": "The first one",
+    settings: "Settings",
+    enabled: "On",
+    "enabled-help": "Only a banner that is on is shown on the site. A new one starts off."
+  }
+}, we = /* @__PURE__ */ new WeakSet();
+function ee() {
+  try {
+    const { i18n: i } = J();
+    we.has(i) || (i.defaults("webx-banners", ea), we.add(i));
+  } catch {
+  }
+}
+const aa = /* @__PURE__ */ X({
+  name: "WxBannerEditorPage",
+  __name: "BannerEditorPage",
+  props: {
+    base: { default: "/banners" }
+  },
+  setup(i) {
+    const s = i, u = J(), y = Z(u), n = ie(), v = ce(), d = xe();
+    ee();
+    const l = Y("webx-banners"), t = ue(), P = $(() => {
+      const a = n.params.id;
+      return typeof a == "string" && a !== "" ? Number(a) : null;
+    }), b = W(null), g = W({}), S = W(""), h = W(null), k = W(null), O = W([]), C = W(!0), B = W(!1), w = W({}), x = $(() => u.can("banners.manage")), N = $(() => JSON.stringify(g.value)), U = $(
+      () => S.value !== "" && (N.value !== S.value || h.value !== k.value)
+    ), K = $(() => B.value ? "saving" : U.value || P.value === null ? "unsaved" : "saved"), F = $(() => {
+      const a = g.value.title, q = P.value === null ? l("banner.new") : b.value?.title ?? "";
+      return Me(a, d.active.value, q) || l("banner.untitled");
+    }), r = $(() => {
+      const a = k.value ?? h.value;
+      return a === null ? s.base : `${s.base}?place=${encodeURIComponent(a)}`;
+    }), I = $(
+      () => u.state.manifest?.modules.find((a) => a.id === "banners")?.title ?? l("module.banners")
+    ), f = $(
+      () => O.value.map((a) => ({ value: a.key, label: `${a.title} · ${a.key}` }))
+    ), o = $({
+      get: () => h.value,
+      set: (a) => {
+        h.value = a == null ? null : String(a);
+      }
+    });
+    function V() {
+      return {
+        image: null,
+        image_mobile: null,
+        video: null,
+        title: {},
+        text: {},
+        buttons: [],
+        enabled: !1
+      };
+    }
+    function _(a) {
+      b.value = a.banner, g.value = a.values, S.value = JSON.stringify(a.values), h.value = a.banner.place, k.value = a.banner.place;
+    }
+    async function pe() {
+      C.value = !0;
+      try {
+        const [a, q] = await Promise.all([
+          y.places(),
+          P.value === null ? Promise.resolve(null) : y.get(P.value)
+        ]);
+        if (O.value = a, q !== null)
+          _(q);
+        else {
+          const z = n.query.place, Se = typeof z == "string" && a.some((Ve) => Ve.key === z) ? z : null, fe = V();
+          b.value = null, g.value = fe, S.value = JSON.stringify(fe), h.value = Se ?? a[0]?.key ?? null, k.value = h.value;
+        }
+      } catch (a) {
+        T.danger(t(a)), v.push(s.base);
+      } finally {
+        C.value = !1;
+      }
+    }
+    async function ve() {
+      if (!(B.value || !x.value || h.value === null)) {
+        B.value = !0, w.value = {};
+        try {
+          const a = P.value === null, q = a ? await y.create(h.value, g.value) : await y.save(
+            P.value,
+            g.value,
+            h.value !== k.value ? h.value : void 0
+          );
+          _(q), T.success(l("banner.saved")), a && v.replace(`${s.base}/${q.banner.id}`);
+        } catch (a) {
+          const q = a.body;
+          q?.errors ? (w.value = q.errors, T.danger(l("banner.save-failed"))) : T.danger(t(a));
+        } finally {
+          B.value = !1;
+        }
+      }
+    }
+    async function Be() {
+      const a = b.value;
+      if (!(!a || !await G({
+        title: l("banner.delete-title", { name: a.title }),
+        message: l("banner.delete-text"),
+        confirmText: l("banner.delete"),
+        cancelText: l("banner.cancel"),
+        tone: "danger"
+      })))
+        try {
+          await y.remove(a.id), T.success(l("banner.deleted")), S.value = N.value, h.value = k.value, v.push(r.value);
+        } catch (z) {
+          T.danger(t(z));
+        }
+    }
+    function be(a) {
+      U.value && a.preventDefault();
+    }
+    function We(a) {
+      (a.ctrlKey || a.metaKey) && a.key.toLowerCase() === "s" && (a.preventDefault(), (U.value || P.value === null) && ve());
+    }
+    j(P, (a) => {
+      a !== null && b.value?.id === a || pe();
+    }), ke(() => {
+      pe(), window.addEventListener("beforeunload", be);
+    }), Ce(() => {
+      window.removeEventListener("beforeunload", be);
+    }), Le(async () => !U.value || !x.value ? !0 : await G({
+      title: l("banner.leave-title"),
+      message: l("banner.leave-text"),
+      confirmText: l("banner.leave"),
+      cancelText: l("banner.cancel"),
+      tone: "danger"
+    }));
+    const Te = $(
+      () => x.value && b.value !== null ? [
+        {
+          key: "delete",
+          label: l("banner.delete"),
+          icon: "trash",
+          danger: !0,
+          menu: !0,
+          run: () => {
+            Be();
+          }
+        }
+      ] : []
+    );
+    return (a, q) => (m(), M("div", {
+      class: "wx-banner-editor",
+      onKeydown: We
+    }, [
+      C.value ? (m(), M(H, { key: 0 }, [
+        c(e(Q), {
+          class: "wx-banner-editor__ghost",
+          title: "",
+          rows: 1
+        }),
+        c(e(te), null, {
+          default: p(() => [
+            c(e(Q), { rows: 6 })
+          ]),
+          _: 1
+        })
+      ], 64)) : (m(), M(H, { key: 1 }, [
+        c(e($e), {
+          divider: "",
+          back: r.value,
+          "back-label": I.value,
+          title: F.value,
+          actions: Te.value
+        }, _e({ _: 2 }, [
+          b.value && !b.value.enabled ? {
+            name: "title-after",
+            fn: p(() => [
+              c(e(ne), { dot: "" }, {
+                default: p(() => [
+                  E(L(e(l)("banner.disabled")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["back", "back-label", "title", "actions"]),
+        c(e(te), { class: "wx-banner-editor__place" }, {
+          default: p(() => [
+            c(e(le), {
+              label: e(l)("banner.place"),
+              help: P.value === null ? void 0 : e(l)("banner.place-help"),
+              error: w.value.place?.[0],
+              required: ""
+            }, {
+              default: p(() => [
+                c(e(Re), {
+                  modelValue: o.value,
+                  "onUpdate:modelValue": q[0] || (q[0] = (z) => o.value = z),
+                  options: f.value,
+                  disabled: !x.value || B.value,
+                  "aria-label": e(l)("banner.place")
+                }, null, 8, ["modelValue", "options", "disabled", "aria-label"])
+              ]),
+              _: 1
+            }, 8, ["label", "help", "error"])
+          ]),
+          _: 1
+        }),
+        c(e(Xe), {
+          modelValue: g.value,
+          "onUpdate:modelValue": q[1] || (q[1] = (z) => g.value = z),
+          name: "banners.form",
+          errors: w.value,
+          disabled: !x.value || B.value
+        }, null, 8, ["modelValue", "errors", "disabled"]),
+        x.value ? (m(), D(e(Ue), { key: 0 }, {
+          state: p(() => [
+            c(e(Ye), { state: K.value }, null, 8, ["state"])
+          ]),
+          default: p(() => [
+            c(e(se), {
+              type: "primary",
+              loading: B.value,
+              disabled: !U.value && P.value !== null || h.value === null,
+              onClick: ve
+            }, {
+              default: p(() => [
+                E(L(e(l)("banner.save")), 1)
+              ]),
+              _: 1
+            }, 8, ["loading", "disabled"])
+          ]),
+          _: 1
+        })) : A("", !0)
+      ], 64))
+    ], 32));
+  }
+}), de = (i, s) => {
+  const u = i.__vccOpts || i;
+  for (const [y, n] of s)
+    u[y] = n;
+  return u;
+}, ge = /* @__PURE__ */ de(aa, [["__scopeId", "data-v-038085a4"]]), ta = /* @__PURE__ */ X({
+  name: "WxBannerPlaceDialog",
+  __name: "PlaceDialog",
+  props: {
+    place: { default: null }
+  },
+  setup(i) {
+    const s = i, { open: u, resolve: y, dismiss: n } = ze(), v = Z(J()), d = xe();
+    ee();
+    const l = Y("webx-banners"), t = s.place !== null;
+    function P() {
+      if (s.place === null) return {};
+      if (s.place.titles) return { ...s.place.titles };
+      const w = d.list.value[0]?.code;
+      return w === void 0 ? {} : { [w]: s.place.title };
+    }
+    const b = W(s.place?.key ?? ""), g = W(P()), S = W(!1), h = W({}), k = Ne("field");
+    ke(async () => {
+      await qe(), k.value?.querySelector("input")?.focus();
+    });
+    function O() {
+      return Object.values(g.value).some((w) => w.trim() !== "");
+    }
+    function C(w) {
+      const x = Object.keys(h.value).find((N) => N === w || N.startsWith(`${w}.`));
+      return x === void 0 ? void 0 : h.value[x]?.[0];
+    }
+    async function B() {
+      if (!(!O() || S.value)) {
+        S.value = !0, h.value = {};
+        try {
+          y(
+            t && s.place !== null ? await v.renamePlace(s.place.key, g.value) : await v.createPlace({ key: b.value.trim(), title: g.value })
+          );
+        } catch (w) {
+          h.value = w.body?.errors ?? {};
+        } finally {
+          S.value = !1;
+        }
+      }
+    }
+    return (w, x) => (m(), D(e(Ae), {
+      open: e(u),
+      "onUpdate:open": x[3] || (x[3] = (N) => De(u) ? u.value = N : null),
+      title: t ? e(l)("places.rename-title") : e(l)("places.new-title"),
+      width: 440
+    }, {
+      footer: p(() => [
+        c(e(Ee), { size: "sm" }, {
+          default: p(() => [
+            c(e(se), {
+              variant: "outline",
+              onClick: x[2] || (x[2] = (N) => e(n)())
+            }, {
+              default: p(() => [
+                E(L(e(l)("places.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            c(e(se), {
+              type: "primary",
+              loading: S.value,
+              disabled: !O() || b.value.trim() === "",
+              onClick: B
+            }, {
+              default: p(() => [
+                E(L(t ? e(l)("places.save") : e(l)("places.create")), 1)
+              ]),
+              _: 1
+            }, 8, ["loading", "disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      default: p(() => [
+        c(e(le), {
+          label: e(l)("places.field-title"),
+          error: C("title"),
+          required: ""
+        }, {
+          default: p(() => [
+            R("div", {
+              ref_key: "field",
+              ref: k
+            }, [
+              c(e(ye), {
+                modelValue: g.value,
+                "onUpdate:modelValue": x[0] || (x[0] = (N) => g.value = N),
+                localized: "",
+                "aria-label": e(l)("places.field-title"),
+                onKeyup: me(B, ["enter"])
+              }, null, 8, ["modelValue", "aria-label"])
+            ], 512)
+          ]),
+          _: 1
+        }, 8, ["label", "error"]),
+        c(e(le), {
+          label: e(l)("places.field-key"),
+          error: C("key"),
+          help: t ? void 0 : e(l)("places.key-help"),
+          required: ""
+        }, {
+          default: p(() => [
+            c(e(ye), {
+              modelValue: b.value,
+              "onUpdate:modelValue": x[1] || (x[1] = (N) => b.value = N),
+              disabled: t,
+              "aria-label": e(l)("places.field-key"),
+              autocomplete: "off",
+              onKeyup: me(B, ["enter"])
+            }, null, 8, ["modelValue", "aria-label"])
+          ]),
+          _: 1
+        }, 8, ["label", "error", "help"])
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+}), na = { class: "wx-banner-place" }, la = ["aria-label"], sa = { class: "wx-banner-place__usage" }, ra = {
+  key: 0,
+  class: "wx-banner-place__layout"
+}, oa = { class: "wx-banner-row__thumb" }, ia = ["src"], ca = { class: "wx-banner-row__body" }, ua = { class: "wx-banner-row__title" }, da = {
+  key: 0,
+  class: "wx-banner-row__facts"
+}, pa = /* @__PURE__ */ X({
+  name: "WxBannerPlacePane",
+  __name: "PlacePane",
+  props: {
+    place: {},
+    base: {},
+    inline: { type: Boolean, default: !0 }
+  },
+  emits: ["back", "changed"],
+  setup(i, { emit: s }) {
+    const u = i, y = s, n = J(), v = Z(n), d = ie(), l = ce();
+    ee();
+    const t = Y("webx-banners"), P = ue(), b = W([]), g = W(!0), S = $(() => n.can("banners.manage")), h = $({
+      get: () => d.query.view === "trashed" ? "trashed" : "live",
+      set: (o) => {
+        l.replace({
+          query: { ...d.query, view: o === "trashed" ? "trashed" : void 0 }
+        });
+      }
+    }), k = $(() => h.value === "trashed"), O = $(() => [
+      { value: "live", label: t("banner.all") },
+      { value: "trashed", label: t("banner.trashed"), icon: "trash" }
+    ]), C = $(() => S.value && !k.value && b.value.length > 1), B = $(() => ["single", "random", "slider"].includes(u.place.layout) ? t(`places.layout-${u.place.layout}`) : "");
+    async function w() {
+      g.value = !0;
+      try {
+        b.value = await v.list(u.place.key, k.value);
+      } catch (o) {
+        T.danger(P(o));
+      } finally {
+        g.value = !1;
+      }
+    }
+    j(k, () => {
+      w();
+    }), w();
+    function x(o) {
+      return `${u.base}/${o.id}`;
+    }
+    function N() {
+      l.push({ path: `${u.base}/new`, query: { place: u.place.key } });
+    }
+    async function U() {
+      try {
+        await v.reorder(
+          u.place.key,
+          b.value.map((o) => o.id)
+        );
+      } catch (o) {
+        T.danger(P(o, t("banner.reorder-failed"))), await w();
+      }
+    }
+    async function K(o) {
+      try {
+        const V = await v.get(o.id);
+        await v.save(o.id, { ...V.values, enabled: !o.enabled }), T.success(o.enabled ? t("banner.switched-off") : t("banner.switched-on"));
+      } catch (V) {
+        T.danger(P(V));
+      } finally {
+        await w();
+      }
+    }
+    async function F(o) {
+      if (await G({
+        title: t("banner.delete-title", { name: o.title }),
+        message: t("banner.delete-text"),
+        confirmText: t("banner.delete"),
+        cancelText: t("banner.cancel"),
+        tone: "danger"
+      }))
+        try {
+          await v.remove(o.id), T.success(t("banner.deleted")), y("changed");
+        } catch (_) {
+          T.danger(P(_));
+        } finally {
+          await w();
+        }
+    }
+    async function r(o) {
+      try {
+        await v.restore(o.id), T.success(t("banner.restored")), y("changed");
+      } catch (V) {
+        T.danger(P(V));
+      } finally {
+        await w();
+      }
+    }
+    function I(o) {
+      if (k.value)
+        return S.value ? [
+          {
+            key: "restore",
+            icon: "refresh",
+            label: t("banner.restore"),
+            run: () => {
+              r(o);
+            }
+          }
+        ] : [];
+      const V = {
+        key: "open",
+        icon: "edit",
+        label: t("banner.open"),
+        run: () => {
+          l.push(x(o));
+        }
+      };
+      return S.value ? [
+        V,
+        {
+          key: "toggle",
+          icon: o.enabled ? "eye-off" : "eye",
+          label: o.enabled ? t("banner.disable") : t("banner.enable"),
+          run: () => {
+            K(o);
+          }
+        },
+        {
+          key: "delete",
+          icon: "trash",
+          label: t("banner.delete"),
+          danger: !0,
+          run: () => {
+            F(o);
+          }
+        }
+      ] : [V];
+    }
+    const f = $(
+      () => S.value && !k.value ? [{ key: "new", label: t("banner.new"), icon: "plus", primary: !0, run: N }] : []
+    );
+    return (o, V) => (m(), M("div", na, [
+      c(e($e), {
+        level: 3,
+        back: !u.inline,
+        "back-label": e(t)("places.places"),
+        title: i.place.title,
+        actions: f.value,
+        "collapse-below": 420,
+        onBack: V[0] || (V[0] = (_) => y("back"))
+      }, _e({ _: 2 }, [
+        i.place.declared ? {
+          name: "title-after",
+          fn: p(() => [
+            c(e(Ke), {
+              content: e(t)("places.declared-help")
+            }, {
+              default: p(() => [
+                R("span", {
+                  class: "wx-banner-place__lock",
+                  tabindex: "0",
+                  "aria-label": e(t)("places.declared")
+                }, [
+                  c(e(re), {
+                    name: "lock",
+                    size: "sm"
+                  })
+                ], 8, la)
+              ]),
+              _: 1
+            }, 8, ["content"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["back", "back-label", "title", "actions"]),
+      R("p", sa, [
+        R("span", null, L(e(t)("places.usage")), 1),
+        R("code", null, "banners('" + L(i.place.key) + "')", 1),
+        B.value ? (m(), M("span", ra, "· " + L(B.value), 1)) : A("", !0)
+      ]),
+      c(e(Fe), {
+        modelValue: h.value,
+        "onUpdate:modelValue": V[1] || (V[1] = (_) => h.value = _),
+        class: "wx-banner-place__views",
+        size: "sm",
+        options: O.value,
+        "aria-label": e(t)("banner.all")
+      }, null, 8, ["modelValue", "options", "aria-label"]),
+      g.value && b.value.length === 0 ? (m(), D(e(Q), {
+        key: 0,
+        rows: 4
+      })) : b.value.length === 0 ? (m(), D(e(oe), {
+        key: 1,
+        title: k.value ? e(t)("banner.empty-bin") : e(t)("banner.empty"),
+        description: k.value ? void 0 : e(t)("banner.empty-help")
+      }, null, 8, ["title", "description"])) : (m(), M(H, { key: 2 }, [
+        c(e(Je), {
+          modelValue: b.value,
+          "onUpdate:modelValue": V[2] || (V[2] = (_) => b.value = _),
+          class: ae(["wx-banner-place__list", { "is-loading": g.value }]),
+          plain: "",
+          "item-key": "id",
+          handle: C.value ? "grip" : "row",
+          "item-label": (_) => _.title,
+          disabled: !C.value,
+          onMove: U
+        }, {
+          default: p(({ item: _ }) => [
+            (m(), D(Ie(k.value ? "div" : "router-link"), {
+              to: k.value ? void 0 : x(_),
+              class: ae(["wx-banner-row", { "is-off": !_.enabled && !k.value }])
+            }, {
+              default: p(() => [
+                R("span", oa, [
+                  _.thumb ? (m(), M("img", {
+                    key: 0,
+                    src: _.thumb,
+                    alt: "",
+                    loading: "lazy"
+                  }, null, 8, ia)) : (m(), D(e(re), {
+                    key: 1,
+                    name: "image",
+                    size: "sm",
+                    "aria-label": e(t)("banner.no-picture")
+                  }, null, 8, ["aria-label"]))
+                ]),
+                R("span", ca, [
+                  R("span", ua, L(_.title), 1),
+                  _.video || !_.enabled && !k.value ? (m(), M("span", da, [
+                    _.video ? (m(), D(e(ne), {
+                      key: 0,
+                      size: "sm",
+                      type: "info"
+                    }, {
+                      default: p(() => [
+                        E(L(e(t)("banner.video")), 1)
+                      ]),
+                      _: 1
+                    })) : A("", !0),
+                    !_.enabled && !k.value ? (m(), D(e(ne), {
+                      key: 1,
+                      dot: "",
+                      size: "sm"
+                    }, {
+                      default: p(() => [
+                        E(L(e(t)("banner.disabled")), 1)
+                      ]),
+                      _: 1
+                    })) : A("", !0)
+                  ])) : A("", !0)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["to", "class"]))
+          ]),
+          actions: p(({ item: _ }) => [
+            c(e(Pe), {
+              actions: I(_),
+              label: _.title
+            }, null, 8, ["actions", "label"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "class", "handle", "item-label", "disabled"]),
+        C.value ? (m(), D(e(je), {
+          key: 0,
+          class: "wx-banner-place__note",
+          type: "info",
+          description: e(t)("banner.order")
+        }, null, 8, ["description"])) : A("", !0)
+      ], 64))
+    ]));
+  }
+}), va = /* @__PURE__ */ de(pa, [["__scopeId", "data-v-23c95ae5"]]), ba = {
+  key: 2,
+  class: "wx-banners__list"
+}, fa = ["onClick"], ma = { class: "wx-banners__name" }, ya = /* @__PURE__ */ X({
+  __name: "BannersPage",
+  props: {
+    base: { default: "/banners" }
+  },
+  setup(i) {
+    const s = i, u = J(), y = Z(u), n = ie(), v = ce();
+    ee();
+    const d = Y("webx-banners"), l = ue(), t = W([]), P = W(!0), b = W(!1), g = W(!0), S = $(() => u.can("banners.manage")), h = He(ta), k = $(
+      () => u.state.manifest?.modules.find((r) => r.id === "banners")?.title ?? d("module.banners")
+    ), O = $(() => {
+      const r = n.query.place;
+      return typeof r == "string" && r !== "" ? r : null;
+    }), C = $(() => t.value.find((r) => r.key === O.value) ?? null);
+    async function B() {
+      P.value = !0;
+      try {
+        t.value = await y.places();
+      } catch (r) {
+        T.danger(l(r));
+      } finally {
+        P.value = !1;
+      }
+    }
+    B(), j([t, C, g], () => {
+      !g.value || t.value.length === 0 || C.value !== null || v.replace({ query: { ...n.query, place: t.value[0].key } });
+    }), j(C, (r) => {
+      r !== null && g.value && (b.value = !0);
+    }), O.value !== null && (b.value = !0);
+    function w(r) {
+      const I = { ...n.query, place: r.key };
+      delete I.view, v.replace({ query: I }), b.value = !0;
+    }
+    async function x() {
+      const r = await h({ place: null });
+      r && (T.success(d("places.created")), await B(), w(r));
+    }
+    async function N(r) {
+      await h({ place: r }) && (T.success(d("places.renamed")), await B());
+    }
+    async function U(r) {
+      if (await G({
+        title: d("places.delete-title", { place: r.title }),
+        message: d("places.delete-text"),
+        confirmText: d("places.delete"),
+        cancelText: d("places.cancel"),
+        tone: "danger"
+      }))
+        try {
+          if (await y.removePlace(r.key), T.success(d("places.deleted")), O.value === r.key) {
+            const f = { ...n.query };
+            delete f.place, delete f.view, v.replace({ query: f }), b.value = !1;
+          }
+        } catch (f) {
+          T.danger(l(f));
+        } finally {
+          await B();
+        }
+    }
+    function K(r) {
+      return !S.value || r.declared ? [] : [
+        { key: "rename", icon: "edit", label: d("places.rename"), run: () => {
+          N(r);
+        } },
+        {
+          key: "delete",
+          icon: "trash",
+          // Said in the line itself, since a switched-off line cannot carry a tooltip: an empty
+          // place is the only kind that goes (decision 1).
+          label: r.count > 0 ? d("places.delete-empty-first") : d("places.delete"),
+          danger: !0,
+          disabled: r.count > 0,
+          run: () => {
+            U(r);
+          }
+        }
+      ];
+    }
+    const F = $(
+      () => S.value ? [{ key: "new-place", label: d("places.new"), icon: "plus", run: () => {
+        x();
+      } }] : []
+    );
+    return (r, I) => (m(), D(e(Ze), {
+      title: k.value,
+      actions: F.value,
+      card: !1
+    }, {
+      default: p(() => [
+        c(e(te), {
+          class: "wx-banners",
+          padding: "none"
+        }, {
+          default: p(() => [
+            c(e(Ge), {
+              open: b.value,
+              "onUpdate:open": I[0] || (I[0] = (f) => b.value = f),
+              class: "wx-banners__panes",
+              "list-width": 300,
+              "detail-min": 440,
+              "detail-label": e(d)("places.places"),
+              onDetailInline: I[1] || (I[1] = (f) => g.value = f)
+            }, {
+              list: p(() => [
+                P.value && t.value.length === 0 ? (m(), D(e(Q), {
+                  key: 0,
+                  class: "wx-banners__loading",
+                  rows: 3
+                })) : t.value.length === 0 ? (m(), D(e(oe), {
+                  key: 1,
+                  title: e(d)("places.empty"),
+                  description: e(d)("places.empty-help")
+                }, null, 8, ["title", "description"])) : (m(), M("ul", ba, [
+                  (m(!0), M(H, null, Oe(t.value, (f) => (m(), M("li", {
+                    key: f.key,
+                    class: "wx-banners__row"
+                  }, [
+                    R("button", {
+                      type: "button",
+                      class: ae(["wx-banners__open", { "is-current": f.key === O.value }]),
+                      onClick: (o) => w(f)
+                    }, [
+                      R("span", ma, [
+                        c(e(he), {
+                          truncate: "",
+                          weight: "medium"
+                        }, {
+                          default: p(() => [
+                            E(L(f.title), 1)
+                          ]),
+                          _: 2
+                        }, 1024),
+                        f.declared ? (m(), D(e(re), {
+                          key: 0,
+                          class: "wx-banners__lock",
+                          name: "lock",
+                          size: "sm",
+                          "aria-label": e(d)("places.declared")
+                        }, null, 8, ["aria-label"])) : A("", !0),
+                        c(e(Qe), {
+                          class: "wx-banners__count",
+                          type: "neutral",
+                          value: f.count,
+                          label: e(d)("places.count")
+                        }, null, 8, ["value", "label"])
+                      ]),
+                      c(e(he), {
+                        size: "sm",
+                        tone: "muted",
+                        mono: "",
+                        truncate: ""
+                      }, {
+                        default: p(() => [
+                          E("banners('" + L(f.key) + "')", 1)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ], 10, fa),
+                    K(f).length > 0 ? (m(), D(e(Pe), {
+                      key: 0,
+                      actions: K(f),
+                      label: f.title
+                    }, null, 8, ["actions", "label"])) : A("", !0)
+                  ]))), 128))
+                ]))
+              ]),
+              detail: p(({ inline: f, back: o }) => [
+                C.value ? (m(), D(va, {
+                  key: C.value.key,
+                  place: C.value,
+                  base: s.base,
+                  inline: f,
+                  onBack: o,
+                  onChanged: B
+                }, null, 8, ["place", "base", "inline", "onBack"])) : A("", !0)
+              ]),
+              empty: p(() => [
+                c(e(oe), {
+                  title: e(d)("places.choose"),
+                  description: e(d)("places.choose-help")
+                }, null, 8, ["title", "description"])
+              ]),
+              _: 1
+            }, 8, ["open", "detail-label"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["title", "actions"]));
+  }
+}), ha = /* @__PURE__ */ de(ya, [["__scopeId", "data-v-615232f0"]]);
+function xa(i = {}) {
+  const s = i.path ?? "/banners";
+  return {
+    id: "banners",
+    path: s,
+    routes: [
+      // The open place is in the address (`?place=`), so a link to it is a link to its banners.
+      { path: s, name: "webx.banners", component: ha, props: { base: s } },
+      // A banner not written yet: the place it goes to rides in the query (`?place=hero`).
+      {
+        path: `${s}/new`,
+        name: "webx.banners.new",
+        component: ge,
+        props: { base: s }
+      },
+      {
+        path: `${s}/:id(\\d+)`,
+        name: "webx.banners.edit",
+        component: ge,
+        props: { base: s }
+      }
+    ]
+  };
+}
+export {
+  ge as WxBannerEditorPage,
+  ha as WxBannersPage,
+  xa as banners,
+  ea as bannersMessages,
+  Z as createBannersApi
+};
+//# sourceMappingURL=index.js.map