@m2s2/vue-lib 2.1.0 → 2.2.0

package/dist/index28.mjs

@@ -1,112 +1,89 @@
-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 _ = {
+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: "sub-form"
-}, A = ["disabled"], S = ["disabled"], w = ["disabled"], C = {
+  class: "dt-empty"
+}, N = { class: "dt-toolbar" }, S = ["placeholder", "value"], x = { class: "dt-pills" }, F = ["onClick"], $ = { class: "dt-count" }, w = {
   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",
+  class: "dt-col-panel"
+}, B = ["checked", "onChange"], M = { class: "dt-scroll" }, R = /* @__PURE__ */ V({
+  __name: "DataTable",
   props: {
-    mode: { default: "anon" },
-    subscribeAnon: {},
-    subscribeAuth: {},
-    unsubscribeAuth: {}
+    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." }
   },
-  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: ["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;
     }
-    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]
-        ]),
-        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]
+    function f(s) {
+      var c;
+      (c = h.value) != null && c.contains(s.target) || (o.value = !1, document.removeEventListener("click", f));
+    }
+    function y() {
+      o.value = !o.value, o.value && setTimeout(() => document.addEventListener("click", f), 0);
+    }
+    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("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)
         ]),
-        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)
+        n("div", M, [
+          L(s.$slots, "default")
+        ])
+      ], 64))
     ]));
   }
 });
 export {
-  Y as default
+  R as default
 };

package/dist/index30.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"),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=_;

package/dist/index30.mjs

@@ -1,74 +1,112 @@
-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 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: "dialog-message"
-}, S = {
+  class: "sub-form"
+}, A = ["disabled"], S = ["disabled"], w = ["disabled"], C = {
   key: 0,
-  class: "dialog-footer"
-}, T = ["onClick"], F = /* @__PURE__ */ k({
-  __name: "Dialog",
+  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",
   props: {
-    data: {},
-    open: { type: Boolean }
+    mode: { default: "anon" },
+    subscribeAnon: {},
+    subscribeAuth: {},
+    unsubscribeAuth: {}
   },
-  emits: ["action", "close"],
-  setup(e, { emit: m }) {
-    const c = e, i = m;
-    function g(o) {
-      i("action", o.value);
-    }
-    function u() {
-      c.data.modal || i("close");
+  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";
+          }
+        }
     }
-    function f(o) {
-      o.key === "Escape" && !c.data.modal && i("close");
-    }
-    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
-          }, [
-            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)
+    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]
+        ]),
+        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]
         ]),
-        _: 3
-      })
+        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)
     ]));
   }
 });
 export {
-  F as default
+  Y as default
 };

package/dist/index32.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"),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;

package/dist/index32.mjs

@@ -1,87 +1,74 @@
-import { defineComponent as C, openBlock as t, createBlock as g, Teleport as $, createVNode as h, Transition as y, withCtx as k, createElementBlock as a, withModifiers as w, createCommentVNode as l, normalizeStyle as B, normalizeClass as f, createElementVNode as o, toDisplayString as i, renderSlot as N, Fragment as S, renderList as V } from "vue";
-const x = { class: "panel-header" }, z = { class: "panel-header-text" }, E = {
-  id: "panel-title",
-  class: "panel-title"
-}, T = {
+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 = {
   key: 0,
-  class: "panel-subtitle"
-}, A = { class: "panel-body" }, D = {
+  class: "dialog-message"
+}, S = {
   key: 0,
-  class: "panel-message"
-}, F = {
-  key: 0,
-  class: "panel-footer"
-}, L = ["onClick"], j = /* @__PURE__ */ C({
-  __name: "Panel",
+  class: "dialog-footer"
+}, T = ["onClick"], F = /* @__PURE__ */ k({
+  __name: "Dialog",
   props: {
     data: {},
     open: { type: Boolean }
   },
   emits: ["action", "close"],
-  setup(e, { emit: b }) {
-    const c = e, d = b, r = () => c.data.side ?? "right";
-    function p(s) {
-      d("action", s.value);
+  setup(e, { emit: m }) {
+    const c = e, i = m;
+    function g(o) {
+      i("action", o.value);
+    }
+    function u() {
+      c.data.modal || i("close");
     }
-    function v() {
-      c.data.modal || d("close");
+    function f(o) {
+      o.key === "Escape" && !c.data.modal && i("close");
     }
-    return (s, m) => (t(), g($, { to: "body" }, [
-      h(y, { name: "panel-overlay-fade" }, {
-        default: k(() => [
+    return (o, r) => (t(), y(b, { to: "body" }, [
+      h(v, { name: "dialog-fade" }, {
+        default: C(() => [
           e.open ? (t(), a("div", {
             key: 0,
-            class: "m2s2-panel-overlay",
-            onClick: w(v, ["self"])
-          })) : l("", !0)
-        ]),
-        _: 1
-      }),
-      h(y, {
-        name: `panel-slide-${r()}`
-      }, {
-        default: k(() => {
-          var u;
-          return [
-            e.open ? (t(), a("div", {
-              key: 0,
-              class: f(["m2s2-panel-content", `m2s2-panel-content--${r()}`]),
-              style: B(e.data.width ? { "--panel-width": e.data.width } : {}),
-              role: "dialog",
-              "aria-modal": !0,
-              "aria-labelledby": "panel-title"
-            }, [
-              o("div", x, [
-                o("div", z, [
-                  o("h2", E, i(e.data.title), 1),
-                  e.data.subtitle ? (t(), a("p", T, i(e.data.subtitle), 1)) : l("", !0)
-                ]),
-                e.data.modal ? l("", !0) : (t(), a("button", {
+            class: "m2s2-dialog-overlay",
+            onClick: B(u, ["self"]),
+            onKeydown: f
+          }, [
+            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: "panel-close",
+                  class: "dialog-close",
                   "aria-label": "Close",
-                  onClick: m[0] || (m[0] = (n) => d("close"))
+                  onClick: r[0] || (r[0] = (l) => i("close"))
                 }, "✕"))
               ]),
-              o("div", A, [
-                e.data.message && !s.$slots.default ? (t(), a("p", D, i(e.data.message), 1)) : l("", !0),
-                N(s.$slots, "default")
+              n("div", x, [
+                e.data.message ? (t(), a("p", D, d(e.data.message), 1)) : s("", !0),
+                _(o.$slots, "default")
               ]),
-              (u = e.data.actions) != null && u.length ? (t(), a("div", F, [
-                (t(!0), a(S, null, V(e.data.actions, (n) => (t(), a("button", {
-                  key: n.label,
-                  class: f(["panel-btn", `panel-btn--${n.variant ?? "secondary"}`]),
-                  onClick: (M) => p(n)
-                }, i(n.label), 11, L))), 128))
-              ])) : l("", !0)
-            ], 6)) : l("", !0)
-          ];
-        }),
+              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)
+        ]),
         _: 3
-      }, 8, ["name"])
+      })
     ]));
   }
 });
 export {
-  j as default
+  F as default
 };

package/dist/index34.cjs

@@ -1 +1 @@
-"use strict";const e=require("./index2.cjs");;/* empty css         */module.exports=e;
+"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;