@pequity/squirrel 1.0.20 → 1.0.21-beta.1

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

@@ -0,0 +1,82 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass } from "vue";
+import { getColor } from "../tailwind.js";
+const INNER_DIV_CLASS = "block animate-spin absolute box-border rounded-full w-4/5 h-4/5 m-[10%]";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PRingLoader"
+  },
+  __name: "p-ring-loader",
+  props: {
+    size: {
+      type: Number,
+      default: 80
+    },
+    color: {
+      type: String,
+      default: getColor("primary")
+    },
+    duration: {
+      type: String,
+      default: "1.2s",
+      validator(value) {
+        const res = /^\d*\.?\d+(s|ms)$/;
+        return res.test(value);
+      }
+    }
+  },
+  setup(__props) {
+    const calcPropertyValue = (propName, originalValue, modificator) => {
+      var _a, _b;
+      const computedStyle = {};
+      const timeQuantityOuter = (_a = originalValue.match(/^\d*\.?\d+/)) == null ? void 0 : _a[0];
+      const timeUnit = ((_b = originalValue.match(/s|(ms)$/)) == null ? void 0 : _b[0]) || "s";
+      const timeQuantityInner = Math.round(Number(timeQuantityOuter) * 1e3 * modificator) / 1e3;
+      computedStyle[propName] = timeQuantityInner + timeUnit;
+      return computedStyle;
+    };
+    const props = __props;
+    const spinnerStyle = computed(() => {
+      return {
+        borderWidth: `${props.size * 0.1}px`,
+        borderColor: `${props.color} transparent transparent transparent`,
+        animationDuration: props.duration,
+        animationTimingFunction: "cubic-bezier(0.5, 0, 0.5, 1)"
+      };
+    });
+    const animDiv1 = computed(() => {
+      return calcPropertyValue("animationDelay", props.duration, -0.375);
+    });
+    const animDiv2 = computed(() => {
+      return calcPropertyValue("animationDelay", props.duration, -0.25);
+    });
+    const animDiv3 = computed(() => {
+      return calcPropertyValue("animationDelay", props.duration, -0.125);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "relative inline-block",
+        style: normalizeStyle({ width: `${__props.size}px`, height: `${__props.size}px` })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(INNER_DIV_CLASS),
+          style: normalizeStyle([spinnerStyle.value, animDiv1.value])
+        }, null, 4),
+        createElementVNode("div", {
+          class: normalizeClass(INNER_DIV_CLASS),
+          style: normalizeStyle([spinnerStyle.value, animDiv2.value])
+        }, null, 4),
+        createElementVNode("div", {
+          class: normalizeClass(INNER_DIV_CLASS),
+          style: normalizeStyle([spinnerStyle.value, animDiv3.value])
+        }, null, 4),
+        createElementVNode("div", {
+          class: normalizeClass(INNER_DIV_CLASS),
+          style: normalizeStyle([spinnerStyle.value])
+        }, null, 4)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -0,0 +1,98 @@
+import { defineComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withDirectives, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import PBtn from "../p-btn.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PBtnGroup"
+  },
+  __name: "p-select-btn",
+  props: {
+    modelValue: { default: null },
+    items: { default: () => [] },
+    itemValue: { default: "value" },
+    itemText: { default: "text" },
+    itemTooltipText: { default: "text" },
+    size: { default: "md" },
+    showTooltip: { type: Boolean, default: false },
+    highlightSelected: { type: Boolean, default: true },
+    grow: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    noPadding: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const tooltipText = (item) => {
+      return props.showTooltip ? item[props.itemTooltipText] : "";
+    };
+    const select = (item) => {
+      if (!props.multiple) {
+        emit("update:modelValue", item[props.itemValue]);
+      } else {
+        if (Array.isArray(props.modelValue)) {
+          const val = item[props.itemValue];
+          const index = props.modelValue.findIndex((i) => i[props.itemValue] === val);
+          if (index !== -1) {
+            emit(
+              "update:modelValue",
+              props.modelValue.filter((i) => i[props.itemValue] !== val)
+            );
+          } else {
+            emit("update:modelValue", [...props.modelValue, item]);
+          }
+        } else {
+          emit("update:modelValue", [item]);
+        }
+      }
+    };
+    const isSelected = (item) => {
+      if (!props.multiple) {
+        return props.modelValue === item[props.itemValue];
+      } else {
+        if (Array.isArray(props.modelValue)) {
+          const index = props.modelValue.findIndex((i) => i[props.itemValue] === item[props.itemValue]);
+          return index !== -1;
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({ flex: _ctx.grow, "*:px-0 *:py-0": _ctx.noPadding })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+          return withDirectives((openBlock(), createBlock(PBtn, {
+            key: item[_ctx.itemValue],
+            size: _ctx.size,
+            type: "secondary-outline-blue",
+            disabled: item.disabled,
+            class: normalizeClass({
+              "rounded-none": index !== 0 && index !== _ctx.items.length - 1,
+              "rounded-br-none rounded-tr-none": index === 0,
+              "rounded-bl-none rounded-tl-none": index === _ctx.items.length - 1,
+              "-mr-0.5": index !== _ctx.items.length - 1,
+              "flex-1": _ctx.grow
+            }),
+            selected: isSelected(item) && _ctx.highlightSelected,
+            onClick: ($event) => select(item)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, `btn-${index}`, {
+                item,
+                isSelected: isSelected(item)
+              }, () => [
+                createTextVNode(toDisplayString(item[_ctx.itemText]), 1)
+              ])
+            ]),
+            _: 2
+          }, 1032, ["size", "disabled", "class", "selected", "onClick"])), [
+            [_directive_tooltip, { content: tooltipText(item) }]
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -0,0 +1,124 @@
+import { defineComponent, useAttrs, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, createElementVNode, mergeProps, Fragment, renderList, withDirectives, vShow } from "vue";
+import { INPUT_SIZES } from "../inputClassesShared.js";
+import { useInputClasses } from "../useInputClasses.js";
+const _hoisted_1 = ["data-has-error"];
+const _hoisted_2 = ["value"];
+const _hoisted_3 = ["value"];
+const nullValue = "___null_value___";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PSelect",
+    inheritAttrs: false
+  },
+  __name: "p-select",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, null],
+      default: ""
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator(value) {
+        return Object.keys(INPUT_SIZES).includes(value);
+      }
+    },
+    itemText: {
+      type: String,
+      default: "text"
+    },
+    itemValue: {
+      type: [String, Number, Boolean, null],
+      default: "value"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const $attrs = useAttrs();
+    const { labelClasses, selectClasses, errorMsgClasses } = useInputClasses(props);
+    const innerValue = computed({
+      get: () => {
+        if (props.modelValue === null) {
+          return nullValue;
+        }
+        return props.modelValue;
+      },
+      set: (v) => emit("update:modelValue", v)
+    });
+    const attrs = computed(() => {
+      const { class: classes, style: style2, ...rest } = $attrs;
+      return rest;
+    });
+    const style = computed(() => $attrs.style);
+    const innerOptions = computed(() => {
+      return props.items.map((item) => {
+        return {
+          value: item[props.itemValue] === null ? nullValue : item[props.itemValue],
+          text: item[props.itemText]
+        };
+      });
+    });
+    const onChange = (e) => {
+      const value = e.target.value;
+      if (value === nullValue) {
+        emit("update:modelValue", null);
+        return;
+      }
+      emit("update:modelValue", ["true", "false"].includes(value) ? value === "true" : value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ hidden: unref($attrs).hidden }, unref($attrs).class]),
+        "data-has-error": !!__props.errorMsg,
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "label", {
+          label: __props.label,
+          labelClasses: unref(labelClasses)
+        }, () => [
+          __props.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            class: normalizeClass(unref(labelClasses))
+          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("select", mergeProps({ class: unref(selectClasses) }, attrs.value, {
+          value: innerValue.value,
+          onChange
+        }), [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(innerOptions.value, (o) => {
+            return openBlock(), createElementBlock("option", {
+              key: String(o.value),
+              value: o.value
+            }, toDisplayString(o.text), 9, _hoisted_3);
+          }), 128))
+        ], 16, _hoisted_2),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(unref(errorMsgClasses))
+        }, toDisplayString(__props.errorMsg), 3), [
+          [vShow, __props.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-table-loader.js

@@ -0,0 +1,71 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, normalizeClass } from "vue";
+import PSkeletonLoader from "../p-skeleton-loader.js";
+const _hoisted_1 = { class: "block overflow-hidden border border-p-gray-30" };
+const _hoisted_2 = { class: "mb-0 w-full bg-surface" };
+const _hoisted_3 = { class: "relative border-b border-p-gray-30 px-4 py-2" };
+const _hoisted_4 = { class: "skeleton-fade" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PTableLoader"
+  },
+  __name: "p-table-loader",
+  props: {
+    rows: {
+      type: [Number, String],
+      default: 4
+    },
+    columns: {
+      type: [Number, String],
+      default: 6
+    },
+    tdClasses: {
+      type: String,
+      default: "px-4 py-5"
+    },
+    tdSkeletonClasses: {
+      type: String,
+      default: "h-5"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("table", _hoisted_2, [
+          createElementVNode("thead", null, [
+            createElementVNode("tr", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(Number(__props.columns), (col) => {
+                return openBlock(), createElementBlock("th", {
+                  key: col,
+                  class: "bg-surface p-0"
+                }, [
+                  createElementVNode("div", _hoisted_3, [
+                    createVNode(PSkeletonLoader, { class: "h-5" })
+                  ])
+                ]);
+              }), 128))
+            ])
+          ]),
+          createElementVNode("tbody", _hoisted_4, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(Number(__props.rows), (i) => {
+              return openBlock(), createElementBlock("tr", { key: i }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(Number(__props.columns), (col) => {
+                  return openBlock(), createElementBlock("td", {
+                    key: col,
+                    class: normalizeClass([__props.tdClasses, "border-b border-p-blue-15"])
+                  }, [
+                    createVNode(PSkeletonLoader, {
+                      class: normalizeClass(__props.tdSkeletonClasses)
+                    }, null, 8, ["class"])
+                  ], 2);
+                }), 128))
+              ]);
+            }), 128))
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/chunks/p-tabs.js

@@ -0,0 +1,53 @@
+import { defineComponent, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, createElementVNode, normalizeClass, createCommentVNode, toDisplayString } from "vue";
+const _hoisted_1 = { class: "flex items-center gap-2" };
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "p-tabs",
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    },
+    activeTab: {
+      type: String,
+      required: true
+    },
+    tabsLeftPadding: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["click:tab"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "flex gap-4 border-b border-p-gray-30 text-base font-semibold",
+        style: normalizeStyle({ paddingLeft: `${__props.tabsLeftPadding}px` })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tabData) => {
+          return openBlock(), createBlock(resolveDynamicComponent(tabData.to ? "RouterLink" : "div"), mergeProps({
+            key: `tab-${tabData.name}`
+          }, tabData.to ? { to: tabData.to } : {}, {
+            class: [[__props.activeTab === tabData.name ? "border-primary text-primary" : "border-transparent text-p-gray-40"], "group cursor-pointer border-b-2 pb-3 hover:border-primary hover:text-primary"],
+            onClick: ($event) => _ctx.$emit("click:tab", tabData.name)
+          }), {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                tabData.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                  (openBlock(), createBlock(resolveDynamicComponent(tabData.icon), {
+                    class: normalizeClass(["group-hover:fill-primary", [__props.activeTab === tabData.name ? "fill-primary" : "fill-p-gray-40"]])
+                  }, null, 8, ["class"]))
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", null, toDisplayString(tabData.title), 1)
+              ])
+            ]),
+            _: 2
+          }, 1040, ["class", "onClick"]);
+        }), 128))
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/es/config.js

@@ -0,0 +1,105 @@
+const config = {
+  content: ["./index.html", "./squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}", "./src/**/*.{vue,js,ts,jsx,tsx,mdx}"],
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      /* Design system colors */
+      white: "#fff",
+      black: "#000",
+      night: "var(--color-night)",
+      "barley-white": "var(--color-barley-white)",
+      "horses-neck": "var(--color-horses-neck)",
+      "active-blue": "var(--color-active-blue)",
+      /* Pequity colors */
+      "p-gray": {
+        10: "var(--color-p-gray-10)",
+        20: "var(--color-p-gray-20)",
+        30: "var(--color-p-gray-30)",
+        40: "var(--color-p-gray-40)",
+        50: "var(--color-p-gray-50)",
+        60: "var(--color-p-gray-60)",
+        70: "var(--color-p-gray-70)",
+        80: "var(--color-p-gray-80)",
+        90: "var(--color-p-gray-90)",
+        100: "var(--color-p-gray-100)"
+      },
+      "p-blue": {
+        10: "var(--color-p-blue-10)",
+        15: "var(--color-p-blue-15)",
+        20: "var(--color-p-blue-20)",
+        30: "var(--color-p-blue-30)",
+        40: "var(--color-p-blue-40)",
+        50: "var(--color-p-blue-50)",
+        60: "var(--color-p-blue-60)",
+        70: "var(--color-p-blue-70)",
+        80: "var(--color-p-blue-80)"
+      },
+      "p-purple": {
+        10: "var(--color-p-purple-10)",
+        20: "var(--color-p-purple-20)",
+        30: "var(--color-p-purple-30)",
+        40: "var(--color-p-purple-40)",
+        50: "var(--color-p-purple-50)",
+        60: "var(--color-p-purple-60)"
+      },
+      "p-green": {
+        10: "var(--color-p-green-10)",
+        20: "var(--color-p-green-20)",
+        30: "var(--color-p-green-30)",
+        40: "var(--color-p-green-40)",
+        50: "var(--color-p-green-50)"
+      },
+      "p-red": {
+        10: "var(--color-p-red-10)",
+        20: "var(--color-p-red-20)",
+        30: "var(--color-p-red-30)",
+        40: "var(--color-p-red-40)",
+        50: "var(--color-p-red-50)"
+      },
+      /* Aliases */
+      primary: "var(--color-primary)",
+      accent: "var(--color-accent)",
+      surface: "var(--color-surface)",
+      "on-surface": "var(--color-on-surface)",
+      error: "var(--color-error)",
+      "on-error": "var(--color-on-error)",
+      info: "var(--color-info)",
+      "on-info": "var(--color-on-info)",
+      success: "var(--color-success)",
+      "on-success": "var(--color-on-success)",
+      warning: "var(--color-warning)",
+      "on-warning": "var(--color-on-warning)"
+    },
+    fontFamily: {
+      sans: ["Inter", "Helvetica", "Arial", "sans-serif"]
+    },
+    fontSize: {
+      xs: "0.75rem",
+      sm: "0.875rem",
+      base: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem"
+    },
+    extend: {
+      borderColor: {
+        DEFAULT: "var(--color-p-gray-30)"
+      },
+      spacing: {
+        7.5: "1.875rem"
+      },
+      zIndex: {
+        110: "110"
+      },
+      screens: {}
+    }
+  }
+};
+export {
+  config
+};

package/dist/es/currency.js

@@ -0,0 +1,9 @@
+const CURRENCY_INPUT_DEFAULTS = Object.freeze({
+  currency: null,
+  precision: 0,
+  locale: "en-US",
+  allowNegative: false
+});
+export {
+  CURRENCY_INPUT_DEFAULTS
+};

package/dist/es/dom.js

@@ -0,0 +1,27 @@
+const isVisible = (element) => {
+  var _a;
+  if (!(element instanceof Element)) {
+    throw Error("You must provide a DOM element.");
+  }
+  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length) && window.getComputedStyle(element).visibility !== "hidden" && window.getComputedStyle(element).display !== "none" && ((_a = element.style) == null ? void 0 : _a.transform.includes("translateY(-9999px)")) === false;
+};
+const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
+  const listLength = list.length;
+  let index = activeElement ? list.indexOf(activeElement) : -1;
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+  }
+  index += shouldGetNext ? 1 : -1;
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength;
+  }
+  return list[Math.max(0, Math.min(index, listLength - 1))];
+};
+const isElement = (el) => {
+  return typeof el === "object" && el !== null && "tagName" in el && el instanceof HTMLElement;
+};
+export {
+  getNextActiveElement,
+  isElement,
+  isVisible
+};