@m2s2/vue-lib 2.0.0 → 2.2.0

package/dist/index26.mjs

@@ -1,112 +1,283 @@
-import { defineComponent as k, ref as o, computed as y, openBlock as s, createElementBlock as t, Fragment as d, withDirectives as f, createElementVNode as i, vModelText as h, toDisplayString as m, createCommentVNode as v } from "vue";
-const _ = {
-  key: 0,
-  class: "sub-form"
-}, A = ["disabled"], S = ["disabled"], w = ["disabled"], C = {
-  key: 0,
-  class: "sub-feedback sub-feedback--error"
-}, x = {
-  key: 1,
-  class: "sub-success"
-}, U = {
-  key: 1,
-  class: "sub-auth"
-}, V = ["disabled"], B = {
-  key: 0,
-  class: "sub-feedback sub-feedback--success"
-}, D = ["disabled"], E = {
-  key: 2,
-  class: "sub-feedback sub-feedback--error"
-}, Y = /* @__PURE__ */ k({
-  __name: "SubscribeForm",
+import { defineComponent as oe, ref as s, watch as ie, computed as E, openBlock as _, createElementBlock as w, createElementVNode as l, createTextVNode as x, withDirectives as v, vModelText as b, Fragment as W, renderList as j, toDisplayString as P, createCommentVNode as re } from "vue";
+import { marked as ue } from "./index53.mjs";
+const ce = { class: "be-root" }, de = { class: "be-meta" }, ve = { class: "be-field be-field--full" }, be = ["value"], pe = { class: "be-field" }, ge = { class: "be-field" }, fe = { class: "be-field be-field--full" }, me = { class: "be-field be-field--full" }, _e = { class: "be-field" }, we = { class: "be-tags" }, xe = ["onClick", "aria-label"], he = { class: "be-field" }, ke = { class: "be-field be-field--cover" }, ye = { class: "be-cover" }, Ce = ["src"], Ie = { class: "be-cover__pick" }, Pe = { class: "be-editor" }, Te = {
+  class: "be-toolbar",
+  role: "toolbar",
+  "aria-label": "Formatting"
+}, Se = ["title", "onClick"], Ee = { class: "be-panes" }, Ue = { class: "be-pane be-pane--write" }, Be = ["value"], Le = { class: "be-pane be-pane--preview" }, Ve = ["innerHTML"], De = { class: "be-footer" }, He = { class: "be-footer__meta" }, Re = ["disabled"], Ne = /* @__PURE__ */ oe({
+  __name: "BlogEditor",
   props: {
-    mode: { default: "anon" },
-    subscribeAnon: {},
-    subscribeAuth: {},
-    unsubscribeAuth: {}
+    initialPost: {},
+    coverImageUrl: {}
   },
-  setup(p) {
-    const a = p, n = o(""), b = o(""), e = o("idle"), l = o(!1), g = y(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n.value.trim()));
-    async function r() {
-      if (e.value !== "submitting")
-        if (a.mode === "auth")
-          if (l.value) {
-            if (!a.unsubscribeAuth) return;
-            e.value = "submitting";
-            try {
-              await a.unsubscribeAuth(), l.value = !1, e.value = "idle";
-            } catch {
-              e.value = "error";
-            }
-          } else {
-            if (!a.subscribeAuth) return;
-            e.value = "submitting";
-            try {
-              await a.subscribeAuth(), l.value = !0, e.value = "done";
-            } catch {
-              e.value = "error";
-            }
-          }
-        else {
-          if (!g.value || !a.subscribeAnon) return;
-          e.value = "submitting";
-          try {
-            await a.subscribeAnon(n.value.trim(), b.value.trim()), e.value = "done";
-          } catch {
-            e.value = "error";
-          }
-        }
+  emits: ["publish", "coverImageSelected"],
+  setup(G, { emit: J }) {
+    var H, R, M, F, N, O, $, q, A;
+    const n = G, U = J, Q = [
+      { label: "Heading 2", icon: "H2", prefix: "## " },
+      { label: "Heading 3", icon: "H3", prefix: "### " },
+      { label: "Bold", icon: "B", wrap: ["**", "**"] },
+      { label: "Italic", icon: "I", wrap: ["*", "*"] },
+      { label: "Inline code", icon: "`", wrap: ["`", "`"] },
+      { label: "Code block", icon: "{ }", block: "\n```\n\n```\n" },
+      { label: "Blockquote", icon: "❝", prefix: "> " },
+      { label: "Link", icon: "⇗", wrap: ["[", "](url)"] },
+      { label: "Image", icon: "⬚", block: `![alt text](image-url)
+` },
+      { label: "Bullet list", icon: "•–", prefix: "- " },
+      { label: "Numbered list", icon: "1.", prefix: "1. " },
+      { label: "Divider", icon: "—", block: `
+---
+
+` }
+    ];
+    function X() {
+      return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
     }
-    return (F, u) => p.mode === "anon" ? (s(), t(d, { key: 0 }, [
-      e.value !== "done" ? (s(), t("div", _, [
-        f(i("input", {
-          "onUpdate:modelValue": u[0] || (u[0] = (c) => b.value = c),
-          class: "sub-input",
-          type: "text",
-          placeholder: "Your name (optional)",
-          disabled: e.value === "submitting"
-        }, null, 8, A), [
-          [h, b.value]
+    function B(t) {
+      return t.toLowerCase().replace(/[^a-z0-9\s-]/g, "").trim().replace(/\s+/g, "-").replace(/-+/g, "-");
+    }
+    function L(t) {
+      const e = t.trim().split(/\s+/).filter(Boolean).length;
+      return Math.max(1, Math.ceil(e / 200));
+    }
+    const c = s(((H = n.initialPost) == null ? void 0 : H.title) ?? ""), p = s(((R = n.initialPost) == null ? void 0 : R.slug) ?? ""), h = s(((M = n.initialPost) == null ? void 0 : M.date) ?? X()), g = s(((F = n.initialPost) == null ? void 0 : F.summary) ?? ""), k = s(((N = n.initialPost) == null ? void 0 : N.excerpt) ?? ""), o = s([...((O = n.initialPost) == null ? void 0 : O.tags) ?? []]), d = s((($ = n.initialPost) == null ? void 0 : $.readingTime) ?? 1), i = s(((q = n.initialPost) == null ? void 0 : q.content) ?? ""), y = s((A = n.initialPost) == null ? void 0 : A.coverImage), f = s(""), T = s(!!n.initialPost), V = s(null);
+    ie(() => n.initialPost, (t) => {
+      t && (c.value = t.title, p.value = t.slug, h.value = t.date, g.value = t.summary, k.value = t.excerpt ?? "", o.value = [...t.tags], d.value = t.readingTime ?? 1, i.value = t.content, y.value = t.coverImage, T.value = !0);
+    });
+    const Y = E(() => ue.parse(i.value)), D = E(() => c.value.trim().length > 0 && g.value.trim().length > 0 && i.value.trim().length > 0), S = E(() => y.value ?? n.coverImageUrl);
+    function Z(t) {
+      c.value = t.target.value, T.value || (p.value = B(c.value)), d.value = L(i.value);
+    }
+    function ee(t) {
+      i.value = t.target.value, d.value = L(i.value);
+    }
+    function le(t) {
+      if (t.key === "Enter" || t.key === ",") {
+        t.preventDefault();
+        const e = f.value.trim().replace(/,/g, "").toLowerCase();
+        e && !o.value.includes(e) && (o.value = [...o.value, e]), f.value = "";
+      }
+      t.key === "Backspace" && !f.value && o.value.length && (o.value = o.value.slice(0, -1));
+    }
+    function te(t) {
+      o.value = o.value.filter((e) => e !== t);
+    }
+    function ae(t) {
+      var r;
+      const e = (r = t.target.files) == null ? void 0 : r[0];
+      if (!e) return;
+      U("coverImageSelected", e);
+      const a = new FileReader();
+      a.onload = () => {
+        y.value = a.result;
+      }, a.readAsDataURL(e);
+    }
+    function ne(t) {
+      const e = V.value;
+      if (!e) return;
+      const a = e.selectionStart, r = e.selectionEnd, u = i.value;
+      let C, I;
+      if (t.wrap) {
+        const [m, K] = t.wrap, z = u.slice(a, r) || "text";
+        C = u.slice(0, a) + m + z + K + u.slice(r), I = a + m.length + z.length + K.length;
+      } else if (t.prefix) {
+        const m = u.lastIndexOf(`
+`, a - 1) + 1;
+        C = u.slice(0, m) + t.prefix + u.slice(m), I = a + t.prefix.length;
+      } else if (t.block)
+        C = u.slice(0, a) + t.block + u.slice(r), I = a + t.block.length;
+      else
+        return;
+      i.value = C, setTimeout(() => {
+        e.selectionStart = e.selectionEnd = I, e.focus();
+      }, 0);
+    }
+    function se() {
+      D.value && U("publish", {
+        title: c.value,
+        slug: p.value || B(c.value),
+        date: h.value,
+        summary: g.value,
+        excerpt: k.value || void 0,
+        tags: o.value,
+        readingTime: d.value,
+        content: i.value,
+        coverImage: n.coverImageUrl ?? y.value
+      });
+    }
+    return (t, e) => (_(), w("div", ce, [
+      l("section", de, [
+        l("div", ve, [
+          e[7] || (e[7] = l("label", { class: "be-label" }, [
+            x("Title "),
+            l("span", { class: "be-required" }, "*")
+          ], -1)),
+          l("input", {
+            class: "be-input",
+            type: "text",
+            value: c.value,
+            onInput: Z,
+            placeholder: "Post title…"
+          }, null, 40, be)
+        ]),
+        l("div", pe, [
+          e[8] || (e[8] = l("label", { class: "be-label" }, "Slug", -1)),
+          v(l("input", {
+            class: "be-input",
+            type: "text",
+            "onUpdate:modelValue": e[0] || (e[0] = (a) => p.value = a),
+            onInput: e[1] || (e[1] = (a) => T.value = !0),
+            placeholder: "post-slug"
+          }, null, 544), [
+            [b, p.value]
+          ])
+        ]),
+        l("div", ge, [
+          e[9] || (e[9] = l("label", { class: "be-label" }, "Date", -1)),
+          v(l("input", {
+            class: "be-input",
+            type: "date",
+            "onUpdate:modelValue": e[2] || (e[2] = (a) => h.value = a)
+          }, null, 512), [
+            [b, h.value]
+          ])
+        ]),
+        l("div", fe, [
+          e[10] || (e[10] = l("label", { class: "be-label" }, [
+            x("Summary "),
+            l("span", { class: "be-required" }, "*")
+          ], -1)),
+          v(l("textarea", {
+            class: "be-input be-input--textarea",
+            rows: "2",
+            "onUpdate:modelValue": e[3] || (e[3] = (a) => g.value = a),
+            placeholder: "Short description shown in blog listings…"
+          }, null, 512), [
+            [b, g.value]
+          ])
+        ]),
+        l("div", me, [
+          e[11] || (e[11] = l("label", { class: "be-label" }, [
+            x("Excerpt "),
+            l("span", { class: "be-optional" }, "(optional)")
+          ], -1)),
+          v(l("textarea", {
+            class: "be-input be-input--textarea",
+            rows: "2",
+            "onUpdate:modelValue": e[4] || (e[4] = (a) => k.value = a),
+            placeholder: "Longer teaser for social previews…"
+          }, null, 512), [
+            [b, k.value]
+          ])
+        ]),
+        l("div", _e, [
+          e[12] || (e[12] = l("label", { class: "be-label" }, "Tags", -1)),
+          l("div", we, [
+            (_(!0), w(W, null, j(o.value, (a) => (_(), w("span", {
+              key: a,
+              class: "be-tag"
+            }, [
+              x(P(a) + " ", 1),
+              l("button", {
+                type: "button",
+                class: "be-tag__remove",
+                onClick: (r) => te(a),
+                "aria-label": `Remove tag ${a}`
+              }, "×", 8, xe)
+            ]))), 128)),
+            v(l("input", {
+              class: "be-tag-input",
+              type: "text",
+              "onUpdate:modelValue": e[5] || (e[5] = (a) => f.value = a),
+              onKeydown: le,
+              placeholder: "Add tag, press Enter…"
+            }, null, 544), [
+              [b, f.value]
+            ])
+          ])
+        ]),
+        l("div", he, [
+          e[13] || (e[13] = l("label", { class: "be-label" }, "Reading time (min)", -1)),
+          v(l("input", {
+            class: "be-input be-input--narrow",
+            type: "number",
+            min: "1",
+            "onUpdate:modelValue": e[6] || (e[6] = (a) => d.value = a)
+          }, null, 512), [
+            [
+              b,
+              d.value,
+              void 0,
+              { number: !0 }
+            ]
+          ])
         ]),
-        f(i("input", {
-          "onUpdate:modelValue": u[1] || (u[1] = (c) => n.value = c),
-          class: "sub-input",
-          type: "email",
-          placeholder: "your@email.com",
-          disabled: e.value === "submitting"
-        }, null, 8, S), [
-          [h, n.value]
+        l("div", ke, [
+          e[14] || (e[14] = l("label", { class: "be-label" }, "Cover Image", -1)),
+          l("div", ye, [
+            S.value ? (_(), w("img", {
+              key: 0,
+              class: "be-cover__preview",
+              src: S.value,
+              alt: "Cover preview"
+            }, null, 8, Ce)) : re("", !0),
+            l("label", Ie, [
+              x(P(S.value ? "Replace" : "Choose image") + " ", 1),
+              l("input", {
+                type: "file",
+                accept: "image/*",
+                onChange: ae,
+                hidden: ""
+              }, null, 32)
+            ])
+          ])
+        ])
+      ]),
+      l("section", Pe, [
+        l("div", Te, [
+          (_(), w(W, null, j(Q, (a) => l("button", {
+            key: a.label,
+            type: "button",
+            class: "be-toolbar__btn",
+            title: a.label,
+            onClick: (r) => ne(a)
+          }, P(a.icon), 9, Se)), 64))
         ]),
-        i("button", {
-          class: "sub-btn",
-          disabled: !g.value || e.value === "submitting",
-          onClick: r
-        }, m(e.value === "submitting" ? "Submitting…" : "Subscribe"), 9, w),
-        e.value === "error" ? (s(), t("p", C, " Something went wrong — please try again. ")) : v("", !0)
-      ])) : (s(), t("div", x, [...u[2] || (u[2] = [
-        i("span", { class: "sub-success-icon" }, "✓", -1),
-        i("p", { class: "sub-success-text" }, "Check your email to confirm your subscription.", -1)
-      ])]))
-    ], 64)) : (s(), t("div", U, [
-      l.value ? (s(), t(d, { key: 1 }, [
-        u[3] || (u[3] = i("span", { class: "sub-subscribed-label" }, "✓ Subscribed to blog updates", -1)),
-        i("button", {
-          class: "sub-btn sub-btn--unsub",
-          disabled: e.value === "submitting",
-          onClick: r
-        }, m(e.value === "submitting" ? "Unsubscribing…" : "Unsubscribe"), 9, D)
-      ], 64)) : (s(), t(d, { key: 0 }, [
-        i("button", {
-          class: "sub-btn",
-          disabled: e.value === "submitting",
-          onClick: r
-        }, m(e.value === "submitting" ? "Subscribing…" : "Subscribe to Blog Updates"), 9, V),
-        e.value === "done" ? (s(), t("p", B, "You're subscribed!")) : v("", !0)
-      ], 64)),
-      e.value === "error" ? (s(), t("p", E, " Something went wrong — please try again. ")) : v("", !0)
+        l("div", Ee, [
+          l("div", Ue, [
+            e[15] || (e[15] = l("div", { class: "be-pane__label" }, "Markdown", -1)),
+            l("textarea", {
+              ref_key: "textareaEl",
+              ref: V,
+              class: "be-pane__textarea",
+              value: i.value,
+              onInput: ee,
+              placeholder: "Write your post in markdown…",
+              spellcheck: "true"
+            }, null, 40, Be)
+          ]),
+          l("div", Le, [
+            e[16] || (e[16] = l("div", { class: "be-pane__label" }, "Preview", -1)),
+            l("div", {
+              class: "be-pane__preview prose",
+              innerHTML: Y.value
+            }, null, 8, Ve)
+          ])
+        ])
+      ]),
+      l("footer", De, [
+        l("span", He, "~" + P(d.value) + " min read", 1),
+        l("button", {
+          type: "button",
+          class: "be-publish",
+          disabled: !D.value,
+          onClick: se
+        }, " Publish Post ", 8, Re)
+      ])
     ]));
   }
 });
 export {
-  Y as default
+  Ne as default
 };

package/dist/index28.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),m={class:"m2s2-dialog-content",role:"dialog","aria-modal":!0,"aria-labelledby":"dialog-title"},k={class:"dialog-header"},g={id:"dialog-title",class:"dialog-title"},u={class:"dialog-body"},y={key:0,class:"dialog-message"},B={key:0,class:"dialog-footer"},f=["onClick"],C=e.defineComponent({__name:"Dialog",props:{data:{},open:{type:Boolean}},emits:["action","close"],setup(t,{emit:i}){const n=t,l=i;function s(o){l("action",o.value)}function d(){n.data.modal||l("close")}function r(o){o.key==="Escape"&&!n.data.modal&&l("close")}return(o,c)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"dialog-fade"},{default:e.withCtx(()=>[t.open?(e.openBlock(),e.createElementBlock("div",{key:0,class:"m2s2-dialog-overlay",onClick:e.withModifiers(d,["self"]),onKeydown:r},[e.createElementVNode("div",m,[e.createElementVNode("div",k,[e.createElementVNode("h2",g,e.toDisplayString(t.data.title),1),t.data.modal?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,class:"dialog-close","aria-label":"Close",onClick:c[0]||(c[0]=a=>l("close"))},"✕"))]),e.createElementVNode("div",u,[t.data.message?(e.openBlock(),e.createElementBlock("p",y,e.toDisplayString(t.data.message),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")]),t.data.actions.length?(e.openBlock(),e.createElementBlock("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data.actions,a=>(e.openBlock(),e.createElementBlock("button",{key:a.label,class:e.normalizeClass(["dialog-btn",`dialog-btn--${a.variant??"secondary"}`]),onClick:b=>s(a)},e.toDisplayString(a.label),11,f))),128))])):e.createCommentVNode("",!0)])],32)):e.createCommentVNode("",!0)]),_:3})]))}});module.exports=C;
+"use strict";const e=require("vue"),h={class:"table-panel"},f={key:0,class:"dt-empty"},g={class:"dt-toolbar"},y=["placeholder","value"],C={class:"dt-pills"},v=["onClick"],B={class:"dt-count"},E={key:0,class:"dt-col-panel"},p=["checked","onChange"],V={class:"dt-scroll"},b=e.defineComponent({__name:"DataTable",props:{columnDefs:{default:()=>[]},colVisibility:{default:()=>({})},statuses:{default:()=>[]},statusFilter:{default:"all"},statusLabels:{default:()=>({})},searchValue:{default:""},searchPlaceholder:{default:"Search…"},totalCount:{default:0},filteredCount:{default:0},emptyMessage:{default:"No data yet."}},emits:["searchChange","statusChange","colToggle"],setup(t,{emit:u}){const i=t,c=u,o=e.ref(!1),s=e.ref(null);function d(a){return a==="all"?"All":i.statusLabels[a]??a}function r(a){var n;(n=s.value)!=null&&n.contains(a.target)||(o.value=!1,document.removeEventListener("click",r))}function m(){o.value=!o.value,o.value&&setTimeout(()=>document.addEventListener("click",r),0)}return(a,n)=>(e.openBlock(),e.createElementBlock("div",h,[t.totalCount===0?(e.openBlock(),e.createElementBlock("p",f,e.toDisplayString(t.emptyMessage),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",g,[t.statuses.length>0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("input",{class:"dt-search",type:"search",placeholder:t.searchPlaceholder,value:t.searchValue,onInput:n[0]||(n[0]=l=>c("searchChange",l.target.value))},null,40,y),e.createElementVNode("div",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.statuses,l=>(e.openBlock(),e.createElementBlock("button",{key:l,class:e.normalizeClass(["dt-pill",{"dt-pill--active":t.statusFilter===l}]),onClick:k=>c("statusChange",l)},e.toDisplayString(d(l)),11,v))),128))]),e.createElementVNode("span",B,e.toDisplayString(t.filteredCount)+" of "+e.toDisplayString(t.totalCount),1)],64)):e.createCommentVNode("",!0),t.columnDefs.length>0?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"colWrapRef",ref:s,class:"dt-col-wrap"},[e.createElementVNode("button",{class:"dt-col-btn",onClick:m},"⚙ Columns"),o.value?(e.openBlock(),e.createElementBlock("div",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columnDefs,l=>(e.openBlock(),e.createElementBlock("label",{key:l.key,class:"dt-col-check"},[e.createElementVNode("input",{type:"checkbox",checked:t.colVisibility[l.key]??!0,onChange:k=>c("colToggle",l.key)},null,40,p),e.createTextVNode(" "+e.toDisplayString(l.label),1)]))),128))])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)]),e.createElementVNode("div",V,[e.renderSlot(a.$slots,"default")])],64))]))}});module.exports=b;

package/dist/index28.mjs

@@ -1,74 +1,89 @@
-import { defineComponent as k, openBlock as t, createBlock as y, Teleport as b, createVNode as h, Transition as v, withCtx as C, createElementBlock as a, withModifiers as B, createElementVNode as n, toDisplayString as d, createCommentVNode as s, renderSlot as _, Fragment as $, renderList as p, normalizeClass as w } from "vue";
-const E = {
-  class: "m2s2-dialog-content",
-  role: "dialog",
-  "aria-modal": !0,
-  "aria-labelledby": "dialog-title"
-}, N = { class: "dialog-header" }, V = {
-  id: "dialog-title",
-  class: "dialog-title"
-}, x = { class: "dialog-body" }, D = {
+import { defineComponent as V, ref as m, openBlock as l, createElementBlock as a, toDisplayString as u, Fragment as d, createElementVNode as n, renderList as k, normalizeClass as p, createCommentVNode as r, createTextVNode as D, renderSlot as L } from "vue";
+const T = { class: "table-panel" }, E = {
   key: 0,
-  class: "dialog-message"
-}, S = {
+  class: "dt-empty"
+}, N = { class: "dt-toolbar" }, S = ["placeholder", "value"], x = { class: "dt-pills" }, F = ["onClick"], $ = { class: "dt-count" }, w = {
   key: 0,
-  class: "dialog-footer"
-}, T = ["onClick"], F = /* @__PURE__ */ k({
-  __name: "Dialog",
+  class: "dt-col-panel"
+}, B = ["checked", "onChange"], M = { class: "dt-scroll" }, R = /* @__PURE__ */ V({
+  __name: "DataTable",
   props: {
-    data: {},
-    open: { type: Boolean }
+    columnDefs: { default: () => [] },
+    colVisibility: { default: () => ({}) },
+    statuses: { default: () => [] },
+    statusFilter: { default: "all" },
+    statusLabels: { default: () => ({}) },
+    searchValue: { default: "" },
+    searchPlaceholder: { default: "Search…" },
+    totalCount: { default: 0 },
+    filteredCount: { default: 0 },
+    emptyMessage: { default: "No data yet." }
   },
-  emits: ["action", "close"],
-  setup(e, { emit: m }) {
-    const c = e, i = m;
-    function g(o) {
-      i("action", o.value);
+  emits: ["searchChange", "statusChange", "colToggle"],
+  setup(e, { emit: g }) {
+    const v = e, i = g, o = m(!1), h = m(null);
+    function C(s) {
+      return s === "all" ? "All" : v.statusLabels[s] ?? s;
     }
-    function u() {
-      c.data.modal || i("close");
+    function f(s) {
+      var c;
+      (c = h.value) != null && c.contains(s.target) || (o.value = !1, document.removeEventListener("click", f));
     }
-    function f(o) {
-      o.key === "Escape" && !c.data.modal && i("close");
+    function y() {
+      o.value = !o.value, o.value && setTimeout(() => document.addEventListener("click", f), 0);
     }
-    return (o, r) => (t(), y(b, { to: "body" }, [
-      h(v, { name: "dialog-fade" }, {
-        default: C(() => [
-          e.open ? (t(), a("div", {
-            key: 0,
-            class: "m2s2-dialog-overlay",
-            onClick: B(u, ["self"]),
-            onKeydown: f
+    return (s, c) => (l(), a("div", T, [
+      e.totalCount === 0 ? (l(), a("p", E, u(e.emptyMessage), 1)) : (l(), a(d, { key: 1 }, [
+        n("div", N, [
+          e.statuses.length > 0 ? (l(), a(d, { key: 0 }, [
+            n("input", {
+              class: "dt-search",
+              type: "search",
+              placeholder: e.searchPlaceholder,
+              value: e.searchValue,
+              onInput: c[0] || (c[0] = (t) => i("searchChange", t.target.value))
+            }, null, 40, S),
+            n("div", x, [
+              (l(!0), a(d, null, k(e.statuses, (t) => (l(), a("button", {
+                key: t,
+                class: p(["dt-pill", { "dt-pill--active": e.statusFilter === t }]),
+                onClick: (b) => i("statusChange", t)
+              }, u(C(t)), 11, F))), 128))
+            ]),
+            n("span", $, u(e.filteredCount) + " of " + u(e.totalCount), 1)
+          ], 64)) : r("", !0),
+          e.columnDefs.length > 0 ? (l(), a("div", {
+            key: 1,
+            ref_key: "colWrapRef",
+            ref: h,
+            class: "dt-col-wrap"
           }, [
-            n("div", E, [
-              n("div", N, [
-                n("h2", V, d(e.data.title), 1),
-                e.data.modal ? s("", !0) : (t(), a("button", {
-                  key: 0,
-                  class: "dialog-close",
-                  "aria-label": "Close",
-                  onClick: r[0] || (r[0] = (l) => i("close"))
-                }, "✕"))
-              ]),
-              n("div", x, [
-                e.data.message ? (t(), a("p", D, d(e.data.message), 1)) : s("", !0),
-                _(o.$slots, "default")
-              ]),
-              e.data.actions.length ? (t(), a("div", S, [
-                (t(!0), a($, null, p(e.data.actions, (l) => (t(), a("button", {
-                  key: l.label,
-                  class: w(["dialog-btn", `dialog-btn--${l.variant ?? "secondary"}`]),
-                  onClick: (z) => g(l)
-                }, d(l.label), 11, T))), 128))
-              ])) : s("", !0)
-            ])
-          ], 32)) : s("", !0)
+            n("button", {
+              class: "dt-col-btn",
+              onClick: y
+            }, "⚙ Columns"),
+            o.value ? (l(), a("div", w, [
+              (l(!0), a(d, null, k(e.columnDefs, (t) => (l(), a("label", {
+                key: t.key,
+                class: "dt-col-check"
+              }, [
+                n("input", {
+                  type: "checkbox",
+                  checked: e.colVisibility[t.key] ?? !0,
+                  onChange: (b) => i("colToggle", t.key)
+                }, null, 40, B),
+                D(" " + u(t.label), 1)
+              ]))), 128))
+            ])) : r("", !0)
+          ], 512)) : r("", !0)
         ]),
-        _: 3
-      })
+        n("div", M, [
+          L(s.$slots, "default")
+        ])
+      ], 64))
     ]));
   }
 });
 export {
-  F as default
+  R as default
 };

package/dist/index30.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),k={class:"panel-header"},u={class:"panel-header-text"},p={id:"panel-title",class:"panel-title"},y={key:0,class:"panel-subtitle"},B={class:"panel-body"},h={key:0,class:"panel-message"},C={key:0,class:"panel-footer"},b=["onClick"],f=e.defineComponent({__name:"Panel",props:{data:{},open:{type:Boolean}},emits:["action","close"],setup(t,{emit:d}){const o=t,n=d,s=()=>o.data.side??"right";function r(l){n("action",l.value)}function m(){o.data.modal||n("close")}return(l,c)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"panel-overlay-fade"},{default:e.withCtx(()=>[t.open?(e.openBlock(),e.createElementBlock("div",{key:0,class:"m2s2-panel-overlay",onClick:e.withModifiers(m,["self"])})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:`panel-slide-${s()}`},{default:e.withCtx(()=>{var i;return[t.open?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["m2s2-panel-content",`m2s2-panel-content--${s()}`]),style:e.normalizeStyle(t.data.width?{"--panel-width":t.data.width}:{}),role:"dialog","aria-modal":!0,"aria-labelledby":"panel-title"},[e.createElementVNode("div",k,[e.createElementVNode("div",u,[e.createElementVNode("h2",p,e.toDisplayString(t.data.title),1),t.data.subtitle?(e.openBlock(),e.createElementBlock("p",y,e.toDisplayString(t.data.subtitle),1)):e.createCommentVNode("",!0)]),t.data.modal?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,class:"panel-close","aria-label":"Close",onClick:c[0]||(c[0]=a=>n("close"))},"✕"))]),e.createElementVNode("div",B,[t.data.message&&!l.$slots.default?(e.openBlock(),e.createElementBlock("p",h,e.toDisplayString(t.data.message),1)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default")]),(i=t.data.actions)!=null&&i.length?(e.openBlock(),e.createElementBlock("div",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data.actions,a=>(e.openBlock(),e.createElementBlock("button",{key:a.label,class:e.normalizeClass(["panel-btn",`panel-btn--${a.variant??"secondary"}`]),onClick:v=>r(a)},e.toDisplayString(a.label),11,b))),128))])):e.createCommentVNode("",!0)],6)):e.createCommentVNode("",!0)]}),_:3},8,["name"])]))}});module.exports=f;
+"use strict";const e=require("vue"),b={key:0,class:"sub-form"},d=["disabled"],m=["disabled"],v=["disabled"],p={key:0,class:"sub-feedback sub-feedback--error"},k={key:1,class:"sub-success"},g={key:1,class:"sub-auth"},f=["disabled"],y={key:0,class:"sub-feedback sub-feedback--success"},h=["disabled"],B={key:2,class:"sub-feedback sub-feedback--error"},_=e.defineComponent({__name:"SubscribeForm",props:{mode:{default:"anon"},subscribeAnon:{},subscribeAuth:{},unsubscribeAuth:{}},setup(c){const u=c,n=e.ref(""),l=e.ref(""),t=e.ref("idle"),o=e.ref(!1),r=e.computed(()=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n.value.trim()));async function a(){if(t.value!=="submitting")if(u.mode==="auth")if(o.value){if(!u.unsubscribeAuth)return;t.value="submitting";try{await u.unsubscribeAuth(),o.value=!1,t.value="idle"}catch{t.value="error"}}else{if(!u.subscribeAuth)return;t.value="submitting";try{await u.subscribeAuth(),o.value=!0,t.value="done"}catch{t.value="error"}}else{if(!r.value||!u.subscribeAnon)return;t.value="submitting";try{await u.subscribeAnon(n.value.trim(),l.value.trim()),t.value="done"}catch{t.value="error"}}}return(E,s)=>c.mode==="anon"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.value!=="done"?(e.openBlock(),e.createElementBlock("div",b,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=i=>l.value=i),class:"sub-input",type:"text",placeholder:"Your name (optional)",disabled:t.value==="submitting"},null,8,d),[[e.vModelText,l.value]]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[1]||(s[1]=i=>n.value=i),class:"sub-input",type:"email",placeholder:"your@email.com",disabled:t.value==="submitting"},null,8,m),[[e.vModelText,n.value]]),e.createElementVNode("button",{class:"sub-btn",disabled:!r.value||t.value==="submitting",onClick:a},e.toDisplayString(t.value==="submitting"?"Submitting…":"Subscribe"),9,v),t.value==="error"?(e.openBlock(),e.createElementBlock("p",p," Something went wrong — please try again. ")):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",k,[...s[2]||(s[2]=[e.createElementVNode("span",{class:"sub-success-icon"},"✓",-1),e.createElementVNode("p",{class:"sub-success-text"},"Check your email to confirm your subscription.",-1)])]))],64)):(e.openBlock(),e.createElementBlock("div",g,[o.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[s[3]||(s[3]=e.createElementVNode("span",{class:"sub-subscribed-label"},"✓ Subscribed to blog updates",-1)),e.createElementVNode("button",{class:"sub-btn sub-btn--unsub",disabled:t.value==="submitting",onClick:a},e.toDisplayString(t.value==="submitting"?"Unsubscribing…":"Unsubscribe"),9,h)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("button",{class:"sub-btn",disabled:t.value==="submitting",onClick:a},e.toDisplayString(t.value==="submitting"?"Subscribing…":"Subscribe to Blog Updates"),9,f),t.value==="done"?(e.openBlock(),e.createElementBlock("p",y,"You're subscribed!")):e.createCommentVNode("",!0)],64)),t.value==="error"?(e.openBlock(),e.createElementBlock("p",B," Something went wrong — please try again. ")):e.createCommentVNode("",!0)]))}});module.exports=_;