@webx-ui/module-banners 0.2.3 → 0.3.0

package/dist/BannersPage-Dl_BCozz.js

@@ -0,0 +1,591 @@
+import { defineComponent as H, ref as T, useTemplateRef as pe, onMounted as ve, nextTick as be, openBlock as r, createBlock as _, unref as e, isRef as ye, withCtx as i, createVNode as d, createElementVNode as z, withKeys as Y, createTextVNode as R, toDisplayString as C, computed as V, watch as A, createElementBlock as U, createSlots as fe, createCommentVNode as L, Fragment as te, normalizeClass as K, resolveDynamicComponent as me, renderList as _e } from "vue";
+import { useRoute as se, useRouter as re } from "vue-router";
+import { useModal as ke, useLocales as we, WxDialog as ge, WxFormItem as Z, WxInput as ee, WxSpace as xe, WxButton as ae, WxTooltip as he, WxIcon as O, WxSegmented as We, WxSkeleton as oe, WxEmpty as j, WxSortableList as Be, WxBadge as le, WxAlert as Ve, toast as x, confirm as ie, createModal as qe, WxCard as Pe, WxListDetail as $e, WxText as ne, WxIndicator as ze } from "@webx-ui/core";
+import { useAdmin as G, useTranslate as J, useErrorText as ce, WxScreenHead as Ce, WxRowMenu as ue, WxListScreen as Te } from "@webx-ui/module-admin";
+import { c as Q, u as X, _ as de } from "./index-3RALKrkh.js";
+const Se = /* @__PURE__ */ H({
+  name: "WxBannerPlaceDialog",
+  __name: "PlaceDialog",
+  props: {
+    place: { default: null }
+  },
+  setup(M) {
+    const h = M, { open: b, resolve: D, dismiss: S } = ke(), k = Q(G()), t = we();
+    X();
+    const p = J("webx-banners"), a = h.place !== null;
+    function q() {
+      if (h.place === null) return {};
+      if (h.place.titles) return { ...h.place.titles };
+      const c = t.list.value[0]?.code;
+      return c === void 0 ? {} : { [c]: h.place.title };
+    }
+    const u = T(h.place?.key ?? ""), m = T(q()), W = T(!1), P = T({}), v = pe("field");
+    ve(async () => {
+      await be(), v.value?.querySelector("input")?.focus();
+    });
+    function I() {
+      return Object.values(m.value).some((c) => c.trim() !== "");
+    }
+    function w(c) {
+      const y = Object.keys(P.value).find((g) => g === c || g.startsWith(`${c}.`));
+      return y === void 0 ? void 0 : P.value[y]?.[0];
+    }
+    async function B() {
+      if (!(!I() || W.value)) {
+        W.value = !0, P.value = {};
+        try {
+          D(
+            a && h.place !== null ? await k.renamePlace(h.place.key, m.value) : await k.createPlace({ key: u.value.trim(), title: m.value })
+          );
+        } catch (c) {
+          P.value = c.body?.errors ?? {};
+        } finally {
+          W.value = !1;
+        }
+      }
+    }
+    return (c, y) => (r(), _(e(ge), {
+      open: e(b),
+      "onUpdate:open": y[3] || (y[3] = (g) => ye(b) ? b.value = g : null),
+      title: a ? e(p)("places.rename-title") : e(p)("places.new-title"),
+      width: 440
+    }, {
+      footer: i(() => [
+        d(e(xe), { size: "sm" }, {
+          default: i(() => [
+            d(e(ae), {
+              variant: "outline",
+              onClick: y[2] || (y[2] = (g) => e(S)())
+            }, {
+              default: i(() => [
+                R(C(e(p)("places.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            d(e(ae), {
+              type: "primary",
+              loading: W.value,
+              disabled: !I() || u.value.trim() === "",
+              onClick: B
+            }, {
+              default: i(() => [
+                R(C(a ? e(p)("places.save") : e(p)("places.create")), 1)
+              ]),
+              _: 1
+            }, 8, ["loading", "disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      default: i(() => [
+        d(e(Z), {
+          label: e(p)("places.field-title"),
+          error: w("title"),
+          required: ""
+        }, {
+          default: i(() => [
+            z("div", {
+              ref_key: "field",
+              ref: v
+            }, [
+              d(e(ee), {
+                modelValue: m.value,
+                "onUpdate:modelValue": y[0] || (y[0] = (g) => m.value = g),
+                localized: "",
+                "aria-label": e(p)("places.field-title"),
+                onKeyup: Y(B, ["enter"])
+              }, null, 8, ["modelValue", "aria-label"])
+            ], 512)
+          ]),
+          _: 1
+        }, 8, ["label", "error"]),
+        d(e(Z), {
+          label: e(p)("places.field-key"),
+          error: w("key"),
+          help: a ? void 0 : e(p)("places.key-help"),
+          required: ""
+        }, {
+          default: i(() => [
+            d(e(ee), {
+              modelValue: u.value,
+              "onUpdate:modelValue": y[1] || (y[1] = (g) => u.value = g),
+              disabled: a,
+              "aria-label": e(p)("places.field-key"),
+              autocomplete: "off",
+              onKeyup: Y(B, ["enter"])
+            }, null, 8, ["modelValue", "aria-label"])
+          ]),
+          _: 1
+        }, 8, ["label", "error", "help"])
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+}), Ie = { class: "wx-banner-place" }, Me = ["aria-label"], De = { class: "wx-banner-place__usage" }, Ue = {
+  key: 0,
+  class: "wx-banner-place__layout"
+}, Le = { class: "wx-banner-row__thumb" }, Re = ["src"], Ee = { class: "wx-banner-row__body" }, Fe = { class: "wx-banner-row__title" }, Ne = {
+  key: 0,
+  class: "wx-banner-row__facts"
+}, Ae = /* @__PURE__ */ H({
+  name: "WxBannerPlacePane",
+  __name: "PlacePane",
+  props: {
+    place: {},
+    base: {},
+    inline: { type: Boolean, default: !0 }
+  },
+  emits: ["back", "changed"],
+  setup(M, { emit: h }) {
+    const b = M, D = h, S = G(), k = Q(S), t = se(), p = re();
+    X();
+    const a = J("webx-banners"), q = ce(), u = T([]), m = T(!0), W = V(() => S.can("banners.manage")), P = V({
+      get: () => t.query.view === "trashed" ? "trashed" : "live",
+      set: (n) => {
+        p.replace({
+          query: { ...t.query, view: n === "trashed" ? "trashed" : void 0 }
+        });
+      }
+    }), v = V(() => P.value === "trashed"), I = V(() => [
+      { value: "live", label: a("banner.all") },
+      { value: "trashed", label: a("banner.trashed"), icon: "trash" }
+    ]), w = V(() => W.value && !v.value && u.value.length > 1), B = V(() => ["single", "random", "slider"].includes(b.place.layout) ? a(`places.layout-${b.place.layout}`) : "");
+    async function c() {
+      m.value = !0;
+      try {
+        u.value = await k.list(b.place.key, v.value);
+      } catch (n) {
+        x.danger(q(n));
+      } finally {
+        m.value = !1;
+      }
+    }
+    A(v, () => {
+      c();
+    }), c();
+    function y(n) {
+      return `${b.base}/${n.id}`;
+    }
+    function g() {
+      p.push({ path: `${b.base}/new`, query: { place: b.place.key } });
+    }
+    async function F() {
+      try {
+        await k.reorder(
+          b.place.key,
+          u.value.map((n) => n.id)
+        );
+      } catch (n) {
+        x.danger(q(n, a("banner.reorder-failed"))), await c();
+      }
+    }
+    async function E(n) {
+      try {
+        const f = await k.get(n.id);
+        await k.save(n.id, { ...f.values, enabled: !n.enabled }), x.success(n.enabled ? a("banner.switched-off") : a("banner.switched-on"));
+      } catch (f) {
+        x.danger(q(f));
+      } finally {
+        await c();
+      }
+    }
+    async function N(n) {
+      if (await ie({
+        title: a("banner.delete-title", { name: n.title }),
+        message: a("banner.delete-text"),
+        confirmText: a("banner.delete"),
+        cancelText: a("banner.cancel"),
+        tone: "danger"
+      }))
+        try {
+          await k.remove(n.id), x.success(a("banner.deleted")), D("changed");
+        } catch (o) {
+          x.danger(q(o));
+        } finally {
+          await c();
+        }
+    }
+    async function l(n) {
+      try {
+        await k.restore(n.id), x.success(a("banner.restored")), D("changed");
+      } catch (f) {
+        x.danger(q(f));
+      } finally {
+        await c();
+      }
+    }
+    function $(n) {
+      if (v.value)
+        return W.value ? [
+          {
+            key: "restore",
+            icon: "refresh",
+            label: a("banner.restore"),
+            run: () => {
+              l(n);
+            }
+          }
+        ] : [];
+      const f = {
+        key: "open",
+        icon: "edit",
+        label: a("banner.open"),
+        run: () => {
+          p.push(y(n));
+        }
+      };
+      return W.value ? [
+        f,
+        {
+          key: "toggle",
+          icon: n.enabled ? "eye-off" : "eye",
+          label: n.enabled ? a("banner.disable") : a("banner.enable"),
+          run: () => {
+            E(n);
+          }
+        },
+        {
+          key: "delete",
+          icon: "trash",
+          label: a("banner.delete"),
+          danger: !0,
+          run: () => {
+            N(n);
+          }
+        }
+      ] : [f];
+    }
+    const s = V(
+      () => W.value && !v.value ? [{ key: "new", label: a("banner.new"), icon: "plus", primary: !0, run: g }] : []
+    );
+    return (n, f) => (r(), U("div", Ie, [
+      d(e(Ce), {
+        level: 3,
+        back: !b.inline,
+        "back-label": e(a)("places.places"),
+        title: M.place.title,
+        actions: s.value,
+        "collapse-below": 420,
+        onBack: f[0] || (f[0] = (o) => D("back"))
+      }, fe({ _: 2 }, [
+        M.place.declared ? {
+          name: "title-after",
+          fn: i(() => [
+            d(e(he), {
+              content: e(a)("places.declared-help")
+            }, {
+              default: i(() => [
+                z("span", {
+                  class: "wx-banner-place__lock",
+                  tabindex: "0",
+                  "aria-label": e(a)("places.declared")
+                }, [
+                  d(e(O), {
+                    name: "lock",
+                    size: "sm"
+                  })
+                ], 8, Me)
+              ]),
+              _: 1
+            }, 8, ["content"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["back", "back-label", "title", "actions"]),
+      z("p", De, [
+        z("span", null, C(e(a)("places.usage")), 1),
+        z("code", null, "banners('" + C(M.place.key) + "')", 1),
+        B.value ? (r(), U("span", Ue, "· " + C(B.value), 1)) : L("", !0)
+      ]),
+      d(e(We), {
+        modelValue: P.value,
+        "onUpdate:modelValue": f[1] || (f[1] = (o) => P.value = o),
+        class: "wx-banner-place__views",
+        size: "sm",
+        options: I.value,
+        "aria-label": e(a)("banner.all")
+      }, null, 8, ["modelValue", "options", "aria-label"]),
+      m.value && u.value.length === 0 ? (r(), _(e(oe), {
+        key: 0,
+        rows: 4
+      })) : u.value.length === 0 ? (r(), _(e(j), {
+        key: 1,
+        title: v.value ? e(a)("banner.empty-bin") : e(a)("banner.empty"),
+        description: v.value ? void 0 : e(a)("banner.empty-help")
+      }, null, 8, ["title", "description"])) : (r(), U(te, { key: 2 }, [
+        d(e(Be), {
+          modelValue: u.value,
+          "onUpdate:modelValue": f[2] || (f[2] = (o) => u.value = o),
+          class: K(["wx-banner-place__list", { "is-loading": m.value }]),
+          hoverable: "",
+          plain: "",
+          "item-key": "id",
+          handle: w.value ? "grip" : "row",
+          "item-label": (o) => o.title,
+          disabled: !w.value,
+          onMove: F
+        }, {
+          default: i(({ item: o }) => [
+            (r(), _(me(v.value ? "div" : "router-link"), {
+              to: v.value ? void 0 : y(o),
+              class: K(["wx-banner-row", { "is-off": !o.enabled && !v.value }])
+            }, {
+              default: i(() => [
+                z("span", Le, [
+                  o.thumb ? (r(), U("img", {
+                    key: 0,
+                    src: o.thumb,
+                    alt: "",
+                    loading: "lazy"
+                  }, null, 8, Re)) : (r(), _(e(O), {
+                    key: 1,
+                    name: "image",
+                    size: "sm",
+                    "aria-label": e(a)("banner.no-picture")
+                  }, null, 8, ["aria-label"]))
+                ]),
+                z("span", Ee, [
+                  z("span", Fe, C(o.title), 1),
+                  o.video || !o.enabled && !v.value ? (r(), U("span", Ne, [
+                    o.video ? (r(), _(e(le), {
+                      key: 0,
+                      size: "sm",
+                      type: "info"
+                    }, {
+                      default: i(() => [
+                        R(C(e(a)("banner.video")), 1)
+                      ]),
+                      _: 1
+                    })) : L("", !0),
+                    !o.enabled && !v.value ? (r(), _(e(le), {
+                      key: 1,
+                      dot: "",
+                      size: "sm"
+                    }, {
+                      default: i(() => [
+                        R(C(e(a)("banner.disabled")), 1)
+                      ]),
+                      _: 1
+                    })) : L("", !0)
+                  ])) : L("", !0)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["to", "class"]))
+          ]),
+          actions: i(({ item: o }) => [
+            d(e(ue), {
+              actions: $(o),
+              label: o.title
+            }, null, 8, ["actions", "label"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "class", "handle", "item-label", "disabled"]),
+        w.value ? (r(), _(e(Ve), {
+          key: 0,
+          class: "wx-banner-place__note",
+          type: "info",
+          description: e(a)("banner.order")
+        }, null, 8, ["description"])) : L("", !0)
+      ], 64))
+    ]));
+  }
+}), Ke = /* @__PURE__ */ de(Ae, [["__scopeId", "data-v-48d645bf"]]), Oe = {
+  key: 2,
+  class: "wx-banners__list"
+}, je = ["onClick"], He = { class: "wx-banners__name" }, Ge = /* @__PURE__ */ H({
+  __name: "BannersPage",
+  props: {
+    base: { default: "/banners" }
+  },
+  setup(M) {
+    const h = M, b = G(), D = Q(b), S = se(), k = re();
+    X();
+    const t = J("webx-banners"), p = ce(), a = T([]), q = T(!0), u = T(!1), m = T(!0), W = V(() => b.can("banners.manage")), P = qe(Se), v = V(
+      () => b.state.manifest?.modules.find((l) => l.id === "banners")?.title ?? t("module.banners")
+    ), I = V(() => {
+      const l = S.query.place;
+      return typeof l == "string" && l !== "" ? l : null;
+    }), w = V(() => a.value.find((l) => l.key === I.value) ?? null);
+    async function B() {
+      q.value = !0;
+      try {
+        a.value = await D.places();
+      } catch (l) {
+        x.danger(p(l));
+      } finally {
+        q.value = !1;
+      }
+    }
+    B(), A([a, w, m], () => {
+      !m.value || a.value.length === 0 || w.value !== null || k.replace({ query: { ...S.query, place: a.value[0].key } });
+    }), A(w, (l) => {
+      l !== null && m.value && (u.value = !0);
+    }), I.value !== null && (u.value = !0);
+    function c(l) {
+      const $ = { ...S.query, place: l.key };
+      delete $.view, k.replace({ query: $ }), u.value = !0;
+    }
+    async function y() {
+      const l = await P({ place: null });
+      l && (x.success(t("places.created")), await B(), c(l));
+    }
+    async function g(l) {
+      await P({ place: l }) && (x.success(t("places.renamed")), await B());
+    }
+    async function F(l) {
+      if (await ie({
+        title: t("places.delete-title", { place: l.title }),
+        message: t("places.delete-text"),
+        confirmText: t("places.delete"),
+        cancelText: t("places.cancel"),
+        tone: "danger"
+      }))
+        try {
+          if (await D.removePlace(l.key), x.success(t("places.deleted")), I.value === l.key) {
+            const s = { ...S.query };
+            delete s.place, delete s.view, k.replace({ query: s }), u.value = !1;
+          }
+        } catch (s) {
+          x.danger(p(s));
+        } finally {
+          await B();
+        }
+    }
+    function E(l) {
+      return !W.value || l.declared ? [] : [
+        { key: "rename", icon: "edit", label: t("places.rename"), run: () => {
+          g(l);
+        } },
+        {
+          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: l.count > 0 ? t("places.delete-empty-first") : t("places.delete"),
+          danger: !0,
+          disabled: l.count > 0,
+          run: () => {
+            F(l);
+          }
+        }
+      ];
+    }
+    const N = V(
+      () => W.value ? [{ key: "new-place", label: t("places.new"), icon: "plus", run: () => {
+        y();
+      } }] : []
+    );
+    return (l, $) => (r(), _(e(Te), {
+      title: v.value,
+      actions: N.value,
+      card: !1
+    }, {
+      default: i(() => [
+        d(e(Pe), {
+          class: "wx-banners",
+          padding: "none"
+        }, {
+          default: i(() => [
+            d(e($e), {
+              open: u.value,
+              "onUpdate:open": $[0] || ($[0] = (s) => u.value = s),
+              class: "wx-banners__panes",
+              "list-width": 300,
+              "detail-min": 440,
+              "detail-label": e(t)("places.places"),
+              onDetailInline: $[1] || ($[1] = (s) => m.value = s)
+            }, {
+              list: i(() => [
+                q.value && a.value.length === 0 ? (r(), _(e(oe), {
+                  key: 0,
+                  class: "wx-banners__loading",
+                  rows: 3
+                })) : a.value.length === 0 ? (r(), _(e(j), {
+                  key: 1,
+                  title: e(t)("places.empty"),
+                  description: e(t)("places.empty-help")
+                }, null, 8, ["title", "description"])) : (r(), U("ul", Oe, [
+                  (r(!0), U(te, null, _e(a.value, (s) => (r(), U("li", {
+                    key: s.key,
+                    class: "wx-banners__row"
+                  }, [
+                    z("button", {
+                      type: "button",
+                      class: K(["wx-banners__open", { "is-current": s.key === I.value }]),
+                      onClick: (n) => c(s)
+                    }, [
+                      z("span", He, [
+                        d(e(ne), {
+                          truncate: "",
+                          weight: "medium"
+                        }, {
+                          default: i(() => [
+                            R(C(s.title), 1)
+                          ]),
+                          _: 2
+                        }, 1024),
+                        s.declared ? (r(), _(e(O), {
+                          key: 0,
+                          class: "wx-banners__lock",
+                          name: "lock",
+                          size: "sm",
+                          "aria-label": e(t)("places.declared")
+                        }, null, 8, ["aria-label"])) : L("", !0),
+                        d(e(ze), {
+                          class: "wx-banners__count",
+                          type: "neutral",
+                          value: s.count,
+                          label: e(t)("places.count")
+                        }, null, 8, ["value", "label"])
+                      ]),
+                      d(e(ne), {
+                        size: "sm",
+                        tone: "muted",
+                        mono: "",
+                        truncate: ""
+                      }, {
+                        default: i(() => [
+                          R("banners('" + C(s.key) + "')", 1)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ], 10, je),
+                    E(s).length > 0 ? (r(), _(e(ue), {
+                      key: 0,
+                      actions: E(s),
+                      label: s.title
+                    }, null, 8, ["actions", "label"])) : L("", !0)
+                  ]))), 128))
+                ]))
+              ]),
+              detail: i(({ inline: s, back: n }) => [
+                w.value ? (r(), _(Ke, {
+                  key: w.value.key,
+                  place: w.value,
+                  base: h.base,
+                  inline: s,
+                  onBack: n,
+                  onChanged: B
+                }, null, 8, ["place", "base", "inline", "onBack"])) : L("", !0)
+              ]),
+              empty: i(() => [
+                d(e(j), {
+                  title: e(t)("places.choose"),
+                  description: e(t)("places.choose-help")
+                }, null, 8, ["title", "description"])
+              ]),
+              _: 1
+            }, 8, ["open", "detail-label"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["title", "actions"]));
+  }
+}), ea = /* @__PURE__ */ de(Ge, [["__scopeId", "data-v-615232f0"]]);
+export {
+  ea as default
+};
+//# sourceMappingURL=BannersPage-Dl_BCozz.js.map