@webx-ui/module-banners 0.3.2 → 0.3.3

package/dist/BannersPage-D7hpUcBn.js

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