@pequity/squirrel 1.0.20-beta.2 → 1.0.20-beta.3

package/dist/es/p-modal.js

@@ -1,13 +1,25 @@
-import { defineComponent as R, useCssVars as G, ref as c, onBeforeMount as J, onMounted as Q, getCurrentInstance as X, watch as Y, nextTick as E, onBeforeUnmount as _, openBlock as g, createBlock as M, Teleport as ee, createVNode as k, Transition as V, withCtx as I, withDirectives as $, createElementVNode as i, normalizeClass as h, normalizeStyle as A, vShow as z, renderSlot as m, createElementBlock as L, toDisplayString as W, createCommentVNode as p, withModifiers as te, createTextVNode as le } from "vue";
-import ae from "./p-alert.js";
-import oe from "./p-close-btn.js";
-import { usePModal as ne } from "./usePModal.js";
-import { _ as se } from "./chunks/_plugin-vue_export-helper.js";
-const ie = ["data-pm-backdrop-id"], re = ["data-pm-wrapper-id", "aria-label", "aria-describedby", "aria-labelledby"], de = ["data-pm-id"], ue = { class: "flex pb-4 pl-8 pr-4 pt-4" }, ce = ["id"], fe = { class: "ml-auto" }, me = {
+import { defineComponent, useCssVars, ref, onBeforeMount, onMounted, getCurrentInstance, watch, nextTick, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow, renderSlot, createElementBlock, toDisplayString, createCommentVNode, withModifiers, createTextVNode } from "vue";
+import PAlert from "./p-alert.js";
+import PCloseBtn from "./p-close-btn.js";
+import { usePModal } from "./usePModal.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["data-pm-backdrop-id"];
+const _hoisted_2 = ["data-pm-wrapper-id", "aria-label", "aria-describedby", "aria-labelledby"];
+const _hoisted_3 = ["data-pm-id"];
+const _hoisted_4 = { class: "flex pb-4 pl-8 pr-4 pt-4" };
+const _hoisted_5 = ["id"];
+const _hoisted_6 = { class: "ml-auto" };
+const _hoisted_7 = {
   key: 0,
   class: "mb-4 px-8"
-}, pe = ["id"], ve = { class: "mt-6 px-8 pt-6" }, N = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])', be = /* @__PURE__ */ R({
-  name: "PModal",
+};
+const _hoisted_8 = ["id"];
+const _hoisted_9 = { class: "mt-6 px-8 pt-6" };
+const FOCUSABLE_ELEMENTS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PModal"
+  },
   __name: "p-modal",
   props: {
     name: {
@@ -60,15 +72,15 @@ const ie = ["data-pm-backdrop-id"], re = ["data-pm-wrapper-id", "aria-label", "a
     },
     live: {
       type: Boolean,
-      default: !1
+      default: false
     },
     enableClose: {
       type: Boolean,
-      default: !0
+      default: true
     },
     modelValue: {
       type: Boolean,
-      default: !1
+      default: false
     },
     closeLabel: {
       type: String,
@@ -76,7 +88,7 @@ const ie = ["data-pm-backdrop-id"], re = ["data-pm-wrapper-id", "aria-label", "a
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     errorMsg: {
       type: String,
@@ -96,188 +108,263 @@ const ie = ["data-pm-backdrop-id"], re = ["data-pm-wrapper-id", "aria-label", "a
     "closed",
     "update:modelValue"
   ],
-  setup(t, { emit: Z }) {
-    G((e) => ({
-      "8a536574": t.maxWidth
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "8a536574": __props.maxWidth
     }));
-    let v = 0;
-    const s = Z, o = t, x = ne(), r = c(0), n = c(""), b = c(!1), y = c(!1), d = c(null), f = c(null);
-    J(() => {
-      o.live && (y.value = !0);
-    }), Q(() => {
-      var l;
-      n.value = "pm-" + ((l = X()) == null ? void 0 : l.uid);
-      const e = o.name ? () => x.state.modals[o.name] : () => o.modelValue;
-      Y(
-        e,
-        (a) => {
-          a ? (y.value = !0, E(() => {
-            b.value = !0;
-          })) : b.value = !1;
+    let animatingZIndex = 0;
+    const emit = __emit;
+    const props = __props;
+    const modal = usePModal();
+    const zIndex = ref(0);
+    const id = ref("");
+    const show = ref(false);
+    const mount = ref(false);
+    const elToFocus = ref(null);
+    const pmWrapper = ref(null);
+    onBeforeMount(() => {
+      if (props.live) {
+        mount.value = true;
+      }
+    });
+    onMounted(() => {
+      var _a;
+      id.value = "pm-" + ((_a = getCurrentInstance()) == null ? void 0 : _a.uid);
+      const valueToWatch = !props.name ? () => props.modelValue : () => modal.state.modals[props.name];
+      watch(
+        valueToWatch,
+        (newVal) => {
+          if (newVal) {
+            mount.value = true;
+            nextTick(() => {
+              show.value = true;
+            });
+          } else {
+            show.value = false;
+          }
         },
         {
-          immediate: !0
+          immediate: true
         }
       );
-    }), _(() => {
-      d.value = null, o.name && x.hide(o.name);
     });
-    const C = () => {
-      o.enableClose === !0 && (s("update:modelValue", !1), o.name && x.hide(o.name));
-    }, j = (e) => {
-      e.target === f.value && C();
-    }, q = (e) => {
-      var l;
-      if ((e.which === 27 || e.keyCode === 27) && C(), e.which === 9 || e.keyCode === 9) {
-        const a = [].slice.call((l = f.value) == null ? void 0 : l.querySelectorAll(N)).filter(function(u) {
-          return !!(u.offsetWidth || u.offsetHeight || u.getClientRects().length);
+    onBeforeUnmount(() => {
+      elToFocus.value = null;
+      props.name && modal.hide(props.name);
+    });
+    const close = () => {
+      if (props.enableClose === true) {
+        emit("update:modelValue", false);
+        props.name && modal.hide(props.name);
+      }
+    };
+    const clickOutside = (e) => {
+      if (e.target === pmWrapper.value) {
+        close();
+      }
+    };
+    const keydown = (e) => {
+      var _a;
+      if (e.which === 27 || e.keyCode === 27) {
+        close();
+      }
+      if (e.which === 9 || e.keyCode === 9) {
+        const all = [].slice.call((_a = pmWrapper.value) == null ? void 0 : _a.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(function(el) {
+          return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
         });
-        e.shiftKey ? (e.target === a[0] || e.target === f.value) && (e.preventDefault(), a[a.length - 1].focus()) : e.target === a[a.length - 1] && (e.preventDefault(), a[0].focus());
+        if (e.shiftKey) {
+          if (e.target === all[0] || e.target === pmWrapper.value) {
+            e.preventDefault();
+            all[all.length - 1].focus();
+          }
+        } else {
+          if (e.target === all[all.length - 1]) {
+            e.preventDefault();
+            all[0].focus();
+          }
+        }
+      }
+    };
+    const getAllVisibleWrappers = () => {
+      return [].slice.call(document.querySelectorAll("[data-pm-wrapper-id]")).filter((w) => w.style.display !== "none");
+    };
+    const getTopZindex = () => {
+      return getAllVisibleWrappers().reduce((acc, curr) => {
+        return parseInt(curr.style.zIndex) > acc ? parseInt(curr.style.zIndex) : acc;
+      }, 0);
+    };
+    const handleFocus = (wrapper) => {
+      const autofocus = wrapper.querySelector("[autofocus]");
+      if (autofocus) {
+        autofocus.focus();
+      } else {
+        const focusable = wrapper.querySelectorAll(FOCUSABLE_ELEMENTS);
+        focusable.length ? focusable[0].focus() : wrapper.focus();
       }
-    }, B = () => [].slice.call(document.querySelectorAll("[data-pm-wrapper-id]")).filter((e) => e.style.display !== "none"), O = () => B().reduce((e, l) => parseInt(l.style.zIndex) > e ? parseInt(l.style.zIndex) : e, 0), T = (e) => {
-      const l = e.querySelector("[autofocus]");
-      if (l)
-        l.focus();
-      else {
-        const a = e.querySelectorAll(N);
-        a.length ? a[0].focus() : e.focus();
+    };
+    const beforeOpen = () => {
+      elToFocus.value = document.activeElement;
+      const lastZindex = getTopZindex();
+      if (animatingZIndex) {
+        zIndex.value = animatingZIndex + 2;
+      } else {
+        zIndex.value = lastZindex === 0 ? props.baseZindex : lastZindex + 2;
+      }
+      animatingZIndex = zIndex.value;
+      emit("before-open");
+    };
+    const opening = () => {
+      emit("opening");
+    };
+    const afterOpen = () => {
+      handleFocus(pmWrapper.value);
+      emit("opened");
+    };
+    const beforeClose = () => {
+      emit("before-close");
+    };
+    const closing = () => {
+      emit("closing");
+    };
+    const afterClose = () => {
+      zIndex.value = 0;
+      if (!props.live) {
+        mount.value = false;
       }
-    }, D = () => {
-      d.value = document.activeElement;
-      const e = O();
-      v ? r.value = v + 2 : r.value = e === 0 ? o.baseZindex : e + 2, v = r.value, s("before-open");
-    }, F = () => {
-      s("opening");
-    }, P = () => {
-      T(f.value), s("opened");
-    }, K = () => {
-      s("before-close");
-    }, U = () => {
-      s("closing");
-    }, H = () => {
-      r.value = 0, o.live || (y.value = !1), E(() => {
+      nextTick(() => {
         window.requestAnimationFrame(() => {
-          var l, a;
-          const e = O();
-          if (e > 0) {
-            const u = B();
-            for (let S = 0; S < u.length; S++) {
-              const w = u[S];
-              if (parseInt(w.style.zIndex) === e) {
-                w.contains(d.value) ? (l = d.value) == null || l.focus() : T(w);
+          var _a, _b;
+          const lastZindex = getTopZindex();
+          if (lastZindex > 0) {
+            const all = getAllVisibleWrappers();
+            for (let i = 0; i < all.length; i++) {
+              const wrapper = all[i];
+              if (parseInt(wrapper.style.zIndex) === lastZindex) {
+                if (wrapper.contains(elToFocus.value)) {
+                  (_a = elToFocus.value) == null ? void 0 : _a.focus();
+                } else {
+                  handleFocus(wrapper);
+                }
                 break;
               }
             }
-          } else
-            document.body.contains(d.value) && ((a = d.value) == null || a.focus());
-          v = 0, s("closed");
+          } else {
+            if (document.body.contains(elToFocus.value)) {
+              (_b = elToFocus.value) == null ? void 0 : _b.focus();
+            }
+          }
+          animatingZIndex = 0;
+          emit("closed");
         });
       });
     };
-    return (e, l) => y.value ? (g(), M(ee, {
-      key: 0,
-      to: t.appendTo
-    }, [
-      k(V, {
-        name: "pm-backdrop-transition",
-        "enter-active-class": t.bgInClass,
-        "leave-active-class": t.bgOutClass
-      }, {
-        default: I(() => [
-          $(i("div", {
-            "data-pm-backdrop-id": n.value,
-            class: h(t.bgClass),
-            style: A({ "z-index": r.value - 1 })
-          }, null, 14, ie), [
-            [z, b.value]
-          ])
-        ]),
-        _: 1
-      }, 8, ["enter-active-class", "leave-active-class"]),
-      k(V, {
-        name: "pm-transition",
-        "enter-active-class": t.inClass,
-        "leave-active-class": t.outClass,
-        onBeforeEnter: D,
-        onEnter: F,
-        onAfterEnter: P,
-        onBeforeLeave: K,
-        onLeave: U,
-        onAfterLeave: H
-      }, {
-        default: I(() => [
-          $(i("div", {
-            ref_key: "pmWrapper",
-            ref: f,
-            "data-pm-wrapper-id": n.value,
-            tabindex: "-1",
-            class: h(t.wrapperClass),
-            style: A({ "z-index": r.value, cursor: t.enableClose ? "pointer" : "default" }),
-            role: "dialog",
-            "aria-label": t.title,
-            "aria-modal": "true",
-            "aria-describedby": `${n.value}-content`,
-            "aria-labelledby": `${n.value}-title`,
-            onClick: l[0] || (l[0] = (a) => j(a)),
-            onKeydown: l[1] || (l[1] = (a) => q(a))
-          }, [
-            i("div", {
-              ref: "pm",
-              "data-pm-id": n.value,
-              class: h(t.modalClass),
-              style: A(t.modalStyle)
+    return (_ctx, _cache) => {
+      return mount.value ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: __props.appendTo
+      }, [
+        createVNode(Transition, {
+          name: "pm-backdrop-transition",
+          "enter-active-class": __props.bgInClass,
+          "leave-active-class": __props.bgOutClass
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              "data-pm-backdrop-id": id.value,
+              class: normalizeClass(__props.bgClass),
+              style: normalizeStyle({ "z-index": zIndex.value - 1 })
+            }, null, 14, _hoisted_1), [
+              [vShow, show.value]
+            ])
+          ]),
+          _: 1
+        }, 8, ["enter-active-class", "leave-active-class"]),
+        createVNode(Transition, {
+          name: "pm-transition",
+          "enter-active-class": __props.inClass,
+          "leave-active-class": __props.outClass,
+          onBeforeEnter: beforeOpen,
+          onEnter: opening,
+          onAfterEnter: afterOpen,
+          onBeforeLeave: beforeClose,
+          onLeave: closing,
+          onAfterLeave: afterClose
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              ref_key: "pmWrapper",
+              ref: pmWrapper,
+              "data-pm-wrapper-id": id.value,
+              tabindex: "-1",
+              class: normalizeClass(__props.wrapperClass),
+              style: normalizeStyle({ "z-index": zIndex.value, cursor: __props.enableClose ? "pointer" : "default" }),
+              role: "dialog",
+              "aria-label": __props.title,
+              "aria-modal": "true",
+              "aria-describedby": `${id.value}-content`,
+              "aria-labelledby": `${id.value}-title`,
+              onClick: _cache[0] || (_cache[0] = ($event) => clickOutside($event)),
+              onKeydown: _cache[1] || (_cache[1] = ($event) => keydown($event))
             }, [
-              m(e.$slots, "title-wrapper", {}, () => [
-                i("div", ue, [
-                  t.title ? (g(), L("h3", {
-                    key: 0,
-                    id: `${n.value}-title`,
-                    class: "mr-auto pt-4 text-xl font-semibold"
-                  }, W(t.title), 9, ce)) : p("", !0),
-                  i("div", fe, [
-                    t.enableClose ? (g(), M(oe, {
+              createElementVNode("div", {
+                ref: "pm",
+                "data-pm-id": id.value,
+                class: normalizeClass(__props.modalClass),
+                style: normalizeStyle(__props.modalStyle)
+              }, [
+                renderSlot(_ctx.$slots, "title-wrapper", {}, () => [
+                  createElementVNode("div", _hoisted_4, [
+                    __props.title ? (openBlock(), createElementBlock("h3", {
                       key: 0,
-                      disabled: t.disabled,
-                      "aria-label": t.closeLabel,
-                      onClick: te(C, ["prevent"])
-                    }, null, 8, ["disabled", "aria-label"])) : p("", !0)
+                      id: `${id.value}-title`,
+                      class: "mr-auto pt-4 text-xl font-semibold"
+                    }, toDisplayString(__props.title), 9, _hoisted_5)) : createCommentVNode("", true),
+                    createElementVNode("div", _hoisted_6, [
+                      __props.enableClose ? (openBlock(), createBlock(PCloseBtn, {
+                        key: 0,
+                        disabled: __props.disabled,
+                        "aria-label": __props.closeLabel,
+                        onClick: withModifiers(close, ["prevent"])
+                      }, null, 8, ["disabled", "aria-label"])) : createCommentVNode("", true)
+                    ])
                   ])
-                ])
-              ], !0),
-              t.errorMsg ? (g(), L("div", me, [
-                k(ae, { type: "error" }, {
-                  default: I(() => [
-                    le(W(t.errorMsg), 1)
-                  ]),
-                  _: 1
-                })
-              ])) : p("", !0),
-              m(e.$slots, "content-wrapper", {}, () => [
-                i("div", {
-                  id: `${n.value}-content`,
-                  class: h([
-                    "relative grow overflow-y-auto overflow-x-hidden px-8",
-                    { "pointer-events-none opacity-50": t.disabled }
+                ], true),
+                __props.errorMsg ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  createVNode(PAlert, { type: "error" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(__props.errorMsg), 1)
+                    ]),
+                    _: 1
+                  })
+                ])) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "content-wrapper", {}, () => [
+                  createElementVNode("div", {
+                    id: `${id.value}-content`,
+                    class: normalizeClass([
+                      "relative grow overflow-y-auto overflow-x-hidden px-8",
+                      { "pointer-events-none opacity-50": __props.disabled }
+                    ])
+                  }, [
+                    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                  ], 10, _hoisted_8)
+                ], true),
+                _ctx.$slots["footer"] ? renderSlot(_ctx.$slots, "footer-wrapper", { key: 1 }, () => [
+                  createElementVNode("div", _hoisted_9, [
+                    renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                   ])
-                }, [
-                  m(e.$slots, "default", {}, void 0, !0)
-                ], 10, pe)
-              ], !0),
-              e.$slots.footer ? m(e.$slots, "footer-wrapper", { key: 1 }, () => [
-                i("div", ve, [
-                  m(e.$slots, "footer", {}, void 0, !0)
-                ])
-              ], !0) : p("", !0)
-            ], 14, de)
-          ], 46, re), [
-            [z, b.value]
-          ])
-        ]),
-        _: 3
-      }, 8, ["enter-active-class", "leave-active-class"])
-    ], 8, ["to"])) : p("", !0);
+                ], true) : createCommentVNode("", true)
+              ], 14, _hoisted_3)
+            ], 46, _hoisted_2), [
+              [vShow, show.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["enter-active-class", "leave-active-class"])
+      ], 8, ["to"])) : createCommentVNode("", true);
+    };
   }
-}), Se = /* @__PURE__ */ se(be, [["__scopeId", "data-v-ee599a02"]]);
+});
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
 export {
-  Se as default
+  pModal as default
 };

package/dist/es/p-pagination-info.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/p-pagination-info.js";
+import { _ as _sfc_main } from "./chunks/p-pagination-info.js";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/p-pagination.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/p-pagination.js";
+import { _ as _sfc_main } from "./chunks/p-pagination.js";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/p-progress-bar.js

@@ -1,39 +1,42 @@
-import { defineComponent as l, resolveDirective as n, openBlock as r, createElementBlock as o, Fragment as i, renderList as a, withDirectives as p, normalizeStyle as u } from "vue";
-import { _ as c } from "./chunks/_plugin-vue_export-helper.js";
-const d = l({
+import { defineComponent, resolveDirective, openBlock, createElementBlock, Fragment, renderList, withDirectives, normalizeStyle } from "vue";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = defineComponent({
   name: "PProgressBar",
   props: {
     total: {
       type: Number,
-      required: !0
+      required: true
     },
     items: {
       type: Array,
-      required: !0
+      required: true
     }
   }
-}), f = {
+});
+const _hoisted_1 = {
   class: "flex justify-start overflow-hidden rounded bg-p-blue-20",
   role: "progressbar"
 };
-function _(t, m, v, g, y, b) {
-  const s = n("tooltip");
-  return r(), o("div", f, [
-    (r(!0), o(i, null, a(t.items, (e) => p((r(), o("div", {
-      key: `progress-value-${e.color}`,
-      class: "h-full",
-      style: u({ width: `${e.value / t.total * 100}%`, background: e.color })
-    }, null, 4)), [
-      [
-        s,
-        e.label,
-        void 0,
-        { top: !0 }
-      ]
-    ])), 128))
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_tooltip = resolveDirective("tooltip");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        key: `progress-value-${item.color}`,
+        class: "h-full",
+        style: normalizeStyle({ width: `${item.value / _ctx.total * 100}%`, background: item.color })
+      }, null, 4)), [
+        [
+          _directive_tooltip,
+          item.label,
+          void 0,
+          { top: true }
+        ]
+      ]);
+    }), 128))
   ]);
 }
-const k = /* @__PURE__ */ c(d, [["render", _]]);
+const pProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  k as default
+  pProgressBar as default
 };

package/dist/es/p-ring-loader.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/p-ring-loader.js";
+import { _ as _sfc_main } from "./chunks/p-ring-loader.js";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/p-select-btn.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./chunks/p-select-btn.js";
+import { _ as _sfc_main } from "./chunks/p-select-btn.js";
 export {
-  f as default
+  _sfc_main as default
 };

package/dist/es/p-select-list.js

@@ -1,4 +1,4 @@
-const t = { sm: "h-8 text-sm", md: "h-10 text-base", lg: "h-12 text-lg" };
+const SIZES = { sm: `h-8 text-sm`, md: `h-10 text-base`, lg: `h-12 text-lg` };
 export {
-  t as SIZES
+  SIZES
 };