@pequity/squirrel 1.0.20 → 1.0.21-beta.1

package/dist/es/p-modal.js

@@ -0,0 +1,370 @@
+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"
+};
+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: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    baseZindex: {
+      type: Number,
+      default: 1051
+    },
+    bgClass: {
+      type: [String, Object, Array],
+      default: "fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20"
+    },
+    wrapperClass: {
+      type: [String, Object, Array],
+      default: "fixed bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center overflow-y-auto overflow-x-hidden outline-none"
+    },
+    modalClass: {
+      type: [String, Object, Array],
+      default: "pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl"
+    },
+    modalStyle: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    inClass: {
+      type: String,
+      default: "slideInTop"
+    },
+    outClass: {
+      type: String,
+      default: "slideOutTop"
+    },
+    bgInClass: {
+      type: String,
+      default: "fadeIn"
+    },
+    bgOutClass: {
+      type: String,
+      default: "fadeOut"
+    },
+    appendTo: {
+      type: String,
+      default: "body"
+    },
+    live: {
+      type: Boolean,
+      default: false
+    },
+    enableClose: {
+      type: Boolean,
+      default: true
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    closeLabel: {
+      type: String,
+      default: "Close"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    maxWidth: {
+      type: String,
+      default: "500px"
+    }
+  },
+  emits: [
+    "before-open",
+    "opening",
+    "opened",
+    "before-close",
+    "closing",
+    "closed",
+    "update:modelValue"
+  ],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "8a536574": __props.maxWidth
+    }));
+    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: true
+        }
+      );
+    });
+    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);
+        });
+        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();
+      }
+    };
+    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;
+      }
+      nextTick(() => {
+        window.requestAnimationFrame(() => {
+          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 {
+            if (document.body.contains(elToFocus.value)) {
+              (_b = elToFocus.value) == null ? void 0 : _b.focus();
+            }
+          }
+          animatingZIndex = 0;
+          emit("closed");
+        });
+      });
+    };
+    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))
+            }, [
+              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,
+                      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)
+                    ])
+                  ])
+                ], 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)
+                  ])
+                ], true) : createCommentVNode("", true)
+              ], 14, _hoisted_3)
+            ], 46, _hoisted_2), [
+              [vShow, show.value]
+            ])
+          ]),
+          _: 3
+        }, 8, ["enter-active-class", "leave-active-class"])
+      ], 8, ["to"])) : createCommentVNode("", true);
+    };
+  }
+});
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee599a02"]]);
+export {
+  pModal as default
+};

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

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

package/dist/es/p-pagination.js

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

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

@@ -0,0 +1,42 @@
+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: true
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  }
+});
+const _hoisted_1 = {
+  class: "flex justify-start overflow-hidden rounded bg-p-blue-20",
+  role: "progressbar"
+};
+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 pProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  pProgressBar as default
+};

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

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

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

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

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

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

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

@@ -0,0 +1,112 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const SIZES = { sm: "h-7 px-4 text-xs", md: "h-9 px-5 text-sm", lg: "h-11 px-7 text-base" };
+const ACTIVE_CLASS = "text-p-purple-60";
+const getOffsetValues = (container) => {
+  const el = container.cloneNode(true);
+  el.style.visibility = "hidden";
+  document.body.appendChild(el);
+  const activeBtn = el.querySelector(`button.${ACTIVE_CLASS}`);
+  const res = { width: `${activeBtn.offsetWidth}px`, left: `${activeBtn.offsetLeft}px` };
+  document.body.removeChild(el);
+  return res;
+};
+const _sfc_main = defineComponent({
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    itemText: {
+      type: String,
+      default: "text"
+    },
+    itemSubtext: {
+      type: String,
+      default: "subtext"
+    },
+    itemValue: {
+      type: [String, Number],
+      default: "value"
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator(value) {
+        return Object.keys(SIZES).includes(value);
+      }
+    }
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      SIZES,
+      ACTIVE_CLASS
+    };
+  },
+  watch: {
+    modelValue: {
+      handler() {
+        setTimeout(() => this.setPillStyle(), 60);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    click(e, option) {
+      if (!option.disabled) {
+        this.$emit("update:modelValue", option[this.itemValue]);
+      }
+    },
+    setPillStyle() {
+      const el = this.$el.querySelector(`button.${ACTIVE_CLASS}`);
+      if (!el) {
+        return;
+      }
+      const dimensions = el.offsetWidth !== 0 ? { left: `${el.offsetLeft}px`, width: `${el.offsetWidth}px` } : getOffsetValues(this.$el);
+      this.$refs.pill.style.left = dimensions.left;
+      this.$refs.pill.style.width = dimensions.width;
+    }
+  }
+});
+const _hoisted_1 = { class: "relative inline-flex rounded-full border-2 border-p-gray-30 bg-p-gray-30 text-center font-semibold text-p-gray-50" };
+const _hoisted_2 = {
+  ref: "pill",
+  class: "absolute left-0 top-0 inline-block h-full rounded-full bg-surface duration-200 ease-in-out"
+};
+const _hoisted_3 = ["disabled", "onClick"];
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = {
+  key: 0,
+  class: "pl-1 opacity-50"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, null, 512),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (o) => {
+      return openBlock(), createElementBlock("button", {
+        key: o[_ctx.itemValue],
+        disabled: o.disabled,
+        class: normalizeClass(["z-10 duration-700", [
+          _ctx.SIZES[_ctx.size],
+          _ctx.modelValue === o[_ctx.itemValue] ? `${_ctx.ACTIVE_CLASS} hover:text-p-purple-70` : "hover:text-p-gray-60",
+          { "opacity-25": o.disabled }
+        ]]),
+        onClick: ($event) => _ctx.click($event, o)
+      }, [
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("div", null, toDisplayString(o[_ctx.itemText]), 1),
+          o[_ctx.itemSubtext] ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(o[_ctx.itemSubtext]), 1)) : createCommentVNode("", true)
+        ])
+      ], 10, _hoisted_3);
+    }), 128))
+  ]);
+}
+const pSelectPill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  pSelectPill as default
+};

package/dist/es/p-select.js

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

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

@@ -0,0 +1,74 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot } from "vue";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const LOADER_TYPES = {
+  rectangle: "rectangle",
+  circle: "circle"
+};
+const LOADER_CSS_CLASSES = {
+  [LOADER_TYPES.rectangle]: "rounded",
+  [LOADER_TYPES.circle]: "rounded-full"
+};
+const SHIMMER_COLOR = "#ffffff";
+const isHexColor = (hexColor) => {
+  const hex = hexColor.replace("#", "");
+  return typeof hexColor === "string" && hexColor.startsWith("#") && hex.length === 6 && !isNaN(Number("0x" + hex));
+};
+const hexToRgb = (hex) => {
+  var _a;
+  return `${(_a = hex.match(/\w\w/g)) == null ? void 0 : _a.map((x) => +`0x${x}`)}`;
+};
+const _sfc_main = defineComponent({
+  name: "PSkeletonLoader",
+  props: {
+    type: {
+      type: String,
+      default: LOADER_TYPES.rectangle,
+      validator(value) {
+        return Object.values(LOADER_TYPES).includes(value);
+      }
+    },
+    bgClass: {
+      type: String,
+      default: "bg-p-gray-30"
+    },
+    cssClass: {
+      type: String,
+      default: ""
+    },
+    shimmerColor: {
+      type: String,
+      default: SHIMMER_COLOR
+    }
+  },
+  data() {
+    return {
+      LOADER_TYPES
+    };
+  },
+  computed: {
+    shimmerStyle() {
+      const rgb = isHexColor(this.shimmerColor) ? hexToRgb(this.shimmerColor) : SHIMMER_COLOR;
+      return {
+        backgroundImage: `linear-gradient(90deg, rgba(${rgb}, 0) 0%, rgba(${rgb}, 0.2) 20%, rgba(${rgb}, 0.5) 60%, rgba(${rgb}, 0))`
+      };
+    },
+    loaderClass() {
+      return this.cssClass ? this.cssClass : LOADER_CSS_CLASSES[this.type];
+    }
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([_ctx.bgClass, _ctx.loaderClass, "relative overflow-hidden"])
+  }, [
+    createElementVNode("div", {
+      class: "shimmer absolute bottom-0 left-0 right-0 top-0",
+      style: normalizeStyle(_ctx.shimmerStyle)
+    }, null, 4),
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ], 2);
+}
+const PSkeletonLoader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-53e537dc"]]);
+export {
+  PSkeletonLoader as default
+};

package/dist/es/p-table-filter-icon.js

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createElementBlock, mergeProps } from "vue";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = defineComponent({
+  name: "PTableFilterIcon",
+  inheritAttrs: false,
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    class: ["h-5 w-5 shrink-0 cursor-pointer filter", { active: _ctx.active }]
+  }, _ctx.$attrs), null, 16);
+}
+const PTableFilterIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cbac2434"]]);
+export {
+  PTableFilterIcon as default
+};