@pequity/squirrel 1.0.20 → 1.0.21

package/dist/cjs/inputClassesMixin.js

@@ -0,0 +1,50 @@
+"use strict";
+const inputClassesShared = require("./inputClassesShared.js");
+const vue = require("vue");
+const inputClassesMixin = vue.defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: "md",
+      validator(value) {
+        return Object.keys(inputClassesShared.INPUT_SIZES).includes(value);
+      }
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      errorMsgClasses: inputClassesShared.ERROR_MSG
+    };
+  },
+  computed: {
+    inputClasses() {
+      const base = `${inputClassesShared.INPUT_BASE} ${inputClassesShared.INPUT_SIZES[this.size]}`;
+      const spacingLeft = this.$slots.prefix ? inputClassesShared.SPACING_PREFIX[this.size] : inputClassesShared.SPACING_LEFT[this.size];
+      const spacingRight = this.$slots.suffix ? inputClassesShared.SPACING_SUFFIX[this.size] : inputClassesShared.SPACING_RIGHT[this.size];
+      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}`;
+      return res;
+    },
+    labelClasses() {
+      const base = `${inputClassesShared.LABEL_BASE} ${inputClassesShared.LABEL_SIZES[this.size]}`;
+      const res = this.required ? `${base} ${inputClassesShared.LABEL_REQUIRED}` : base;
+      return res;
+    },
+    selectClasses() {
+      const res = `${this.inputClasses.replace(` ${inputClassesShared.SPACING_RIGHT[this.size]}`, "")} ${inputClassesShared.SELECT_BASE} ${inputClassesShared.SELECT_ARROW} ${inputClassesShared.SELECT_SIZES[this.size]}`;
+      return res;
+    },
+    textareaClasses() {
+      const res = `${this.inputClasses} ${inputClassesShared.TEXTAREA_BASE}`;
+      return res;
+    }
+  }
+});
+module.exports = inputClassesMixin;

package/dist/cjs/inputClassesShared.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const LABEL_BASE = `block mb-1 font-bold`;
+const LABEL_SIZES = {
+  sm: `text-xs`,
+  md: `text-sm`,
+  lg: `text-base`
+};
+const LABEL_REQUIRED = `after:content-['_*'] after:text-on-error`;
+const ERROR_MSG = `text-xs text-on-error mt-1`;
+const INPUT_BASE = [
+  "text-night",
+  "w-full",
+  "bg-surface",
+  "focus:outline-none",
+  "border-0",
+  "ring-1",
+  "ring-inset",
+  "focus:ring-2",
+  "disabled:ring-p-gray-30",
+  "disabled:hover:ring-p-gray-30",
+  "disabled:bg-p-blue-10",
+  "disabled:cursor-default",
+  "placeholder:text-p-gray-40"
+].join(" ");
+const INPUT_NORMAL = `ring-p-gray-30 hover:ring-primary focus:ring-primary`;
+const INPUT_ERROR = `ring-on-error hover:ring-on-error focus:ring-on-error`;
+const INPUT_SIZES = {
+  sm: `h-8 text-sm rounded`,
+  md: `h-10 text-base rounded`,
+  lg: `h-12 text-lg rounded`
+};
+const TEXTAREA_BASE = `resize-y px-3 py-3 overflow-auto h-auto`;
+const SELECT_BASE = "truncate";
+const SELECT_ARROW = `squirrel-bg-chevron-down bg-no-repeat appearance-none`;
+const SELECT_SIZES = {
+  sm: `bg-[right_0.675rem_center] pr-8`,
+  md: `bg-[right_1rem_center] pr-10`,
+  lg: `bg-[right_1.25rem_center] pr-12`
+};
+const SPACING_LEFT = {
+  sm: `pl-3`,
+  md: `pl-4`,
+  lg: `pl-5`
+};
+const SPACING_RIGHT = {
+  sm: `pr-3`,
+  md: `pr-4`,
+  lg: `pr-5`
+};
+const SPACING_PREFIX = {
+  sm: `pl-6`,
+  md: `pl-8`,
+  lg: `pl-12`
+};
+const SPACING_SUFFIX = {
+  sm: `pr-6`,
+  md: `pr-8`,
+  lg: `pr-12`
+};
+exports.ERROR_MSG = ERROR_MSG;
+exports.INPUT_BASE = INPUT_BASE;
+exports.INPUT_ERROR = INPUT_ERROR;
+exports.INPUT_NORMAL = INPUT_NORMAL;
+exports.INPUT_SIZES = INPUT_SIZES;
+exports.LABEL_BASE = LABEL_BASE;
+exports.LABEL_REQUIRED = LABEL_REQUIRED;
+exports.LABEL_SIZES = LABEL_SIZES;
+exports.SELECT_ARROW = SELECT_ARROW;
+exports.SELECT_BASE = SELECT_BASE;
+exports.SELECT_SIZES = SELECT_SIZES;
+exports.SPACING_LEFT = SPACING_LEFT;
+exports.SPACING_PREFIX = SPACING_PREFIX;
+exports.SPACING_RIGHT = SPACING_RIGHT;
+exports.SPACING_SUFFIX = SPACING_SUFFIX;
+exports.TEXTAREA_BASE = TEXTAREA_BASE;

package/dist/cjs/listKeyboardNavigation.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dom = require("./dom.js");
+const ARROW_UP_KEY = "ArrowUp";
+const ARROW_DOWN_KEY = "ArrowDown";
+const ENTER_KEY = "Enter";
+const ITEM_FOCUS_CLASS = "focus";
+const defaults = Object.freeze({
+  itemContainer: null,
+  // HTMLElement
+  itemSelector: ".dropdown-item:not(.disabled), .dropdown-item:not(:disabled)",
+  itemFocusClass: ITEM_FOCUS_CLASS,
+  /**
+   * The selector for the event trigger
+   */
+  itemSelectSelector: "",
+  /**
+   * The keys to trigger selection
+   */
+  itemSelectKeys: [ENTER_KEY],
+  /**
+   * The events to trigger on selection (enter/space)
+   */
+  itemSelectEvents: ["click"]
+});
+let activeInstance = null;
+const setupListKeyboardNavigation = (options) => {
+  if (!options || !options.itemContainer) {
+    throw Error("You must define an item container");
+  }
+  const opts = { ...defaults, ...options };
+  const { itemContainer, itemSelector, itemFocusClass, itemSelectSelector, itemSelectEvents, itemSelectKeys } = opts;
+  const getItems = () => {
+    if (!itemContainer || !dom.isElement(itemContainer)) {
+      return [];
+    }
+    const items = [...itemContainer.querySelectorAll(`${itemSelector}`)];
+    return items.filter((element) => dom.isVisible(element));
+  };
+  const getFocusedItem = () => {
+    return getItems().find((item) => item.classList.contains(itemFocusClass));
+  };
+  const clearFocusedState = () => {
+    getItems().forEach((item) => item.classList.remove(itemFocusClass));
+  };
+  const setFocusedItem = (el) => {
+    clearFocusedState();
+    el == null ? void 0 : el.classList.add(itemFocusClass);
+  };
+  const listKeydown = (e) => {
+    if ([ARROW_UP_KEY, ARROW_DOWN_KEY].includes(e.key)) {
+      e.preventDefault();
+      const items = getItems();
+      if (!items.length) {
+        return;
+      }
+      const target = getFocusedItem() ?? e.target;
+      const activeElement = dom.getNextActiveElement(items, target, e.key === ARROW_DOWN_KEY, false);
+      setFocusedItem(activeElement);
+      adjustScroll(activeElement);
+    }
+    if (itemSelectKeys.includes(e.key)) {
+      if (getFocusedItem()) {
+        e.preventDefault();
+        const focusedItem = getFocusedItem();
+        const el = itemSelectSelector ? focusedItem == null ? void 0 : focusedItem.querySelector(itemSelectSelector) : getFocusedItem();
+        itemSelectEvents.forEach((e2) => {
+          const event = new Event(e2);
+          if (el) {
+            el.dispatchEvent(event);
+          }
+        });
+      }
+    }
+  };
+  const init = () => {
+    if (activeInstance === instance)
+      ;
+    else {
+      if (activeInstance) {
+        console.warn("There can only be one instance of list navigation active at a time.");
+        activeInstance.destroy();
+      }
+      document.addEventListener("keydown", listKeydown);
+      activeInstance = instance;
+    }
+  };
+  const destroy = () => {
+    clearFocusedState();
+    document.removeEventListener("keydown", listKeydown);
+    activeInstance = null;
+  };
+  const adjustScroll = (activeOptionEl) => {
+    if (!itemContainer || !dom.isElement(itemContainer)) {
+      return;
+    }
+    const bounds = itemContainer.getBoundingClientRect();
+    const { top, bottom } = activeOptionEl.getBoundingClientRect();
+    if (top < bounds.top) {
+      activeOptionEl.scrollIntoView({ behavior: "auto", block: "nearest", inline: "start" });
+    } else if (bottom > bounds.bottom) {
+      activeOptionEl.scrollIntoView({ behavior: "auto", block: "nearest", inline: "end" });
+    }
+  };
+  const instance = { getItems, getFocusedItem, clearFocusedState, setFocusedItem, listKeydown, init, destroy };
+  init();
+  return instance;
+};
+exports.ITEM_FOCUS_CLASS = ITEM_FOCUS_CLASS;
+exports.setupListKeyboardNavigation = setupListKeyboardNavigation;

package/dist/cjs/number.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const toNumberOrNull = (val) => {
+  if (val === "" || val === null || isNaN(Number(val))) {
+    return null;
+  }
+  return Number(val);
+};
+exports.toNumberOrNull = toNumberOrNull;

package/dist/cjs/object.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const isObject = (val) => typeof val === "object" && val !== null;
+exports.isObject = isObject;

package/dist/cjs/p-action-bar.js

@@ -0,0 +1,3 @@
+"use strict";
+const pActionBar_vue_vue_type_script_setup_true_lang = require("./chunks/p-action-bar.js");
+module.exports = pActionBar_vue_vue_type_script_setup_true_lang._sfc_main;

package/dist/cjs/p-alert.js

@@ -0,0 +1,65 @@
+"use strict";
+const tailwind = require("./tailwind.js");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const ALERT_TYPES = {
+  info: `bg-info text-on-info`,
+  warning: `bg-warning text-on-warning`,
+  error: `bg-error text-on-error`,
+  success: `bg-success text-on-success`
+};
+const _sfc_main = vue.defineComponent({
+  name: "PAlert",
+  props: {
+    type: {
+      type: String,
+      default: "info",
+      validator(value) {
+        return Object.keys(ALERT_TYPES).includes(value);
+      }
+    }
+  },
+  computed: {
+    classes() {
+      return `${ALERT_TYPES[this.type]}`;
+    },
+    svgColor() {
+      const type = `on-${this.type}`;
+      return tailwind.getColor(type);
+    }
+  }
+});
+const _hoisted_1 = { class: "flex" };
+const _hoisted_2 = { class: "pr-2" };
+const _hoisted_3 = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_4 = ["fill"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["rounded p-4 text-xs font-semibold", _ctx.classes]),
+    role: "alert"
+  }, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_3, [
+            vue.createElementVNode("path", {
+              d: "M8 0C6.41775 0 4.87104 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346629 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0V0ZM8.16667 3.33333C8.36445 3.33333 8.55779 3.39198 8.72224 3.50186C8.88669 3.61175 9.01486 3.76792 9.09055 3.95065C9.16624 4.13338 9.18604 4.33444 9.14746 4.52842C9.10887 4.72241 9.01363 4.90059 8.87378 5.04044C8.73392 5.18029 8.55574 5.27553 8.36176 5.31412C8.16778 5.3527 7.96671 5.3329 7.78399 5.25721C7.60126 5.18153 7.44508 5.05335 7.3352 4.8889C7.22532 4.72445 7.16667 4.53112 7.16667 4.33333C7.16667 4.06812 7.27203 3.81376 7.45956 3.62623C7.6471 3.43869 7.90145 3.33333 8.16667 3.33333ZM9.66667 12.3333H7C6.82319 12.3333 6.65362 12.2631 6.5286 12.1381C6.40358 12.013 6.33334 11.8435 6.33334 11.6667C6.33334 11.4899 6.40358 11.3203 6.5286 11.1953C6.65362 11.0702 6.82319 11 7 11H7.5C7.54421 11 7.5866 10.9824 7.61786 10.9512C7.64911 10.9199 7.66667 10.8775 7.66667 10.8333V7.83333C7.66667 7.78913 7.64911 7.74674 7.61786 7.71548C7.5866 7.68423 7.54421 7.66667 7.5 7.66667H7C6.82319 7.66667 6.65362 7.59643 6.5286 7.47141C6.40358 7.34638 6.33334 7.17681 6.33334 7C6.33334 6.82319 6.40358 6.65362 6.5286 6.5286C6.65362 6.40357 6.82319 6.33333 7 6.33333H7.66667C8.02029 6.33333 8.35943 6.47381 8.60948 6.72386C8.85953 6.97391 9 7.31305 9 7.66667V10.8333C9 10.8775 9.01756 10.9199 9.04882 10.9512C9.08008 10.9824 9.12247 11 9.16667 11H9.66667C9.84348 11 10.0131 11.0702 10.1381 11.1953C10.2631 11.3203 10.3333 11.4899 10.3333 11.6667C10.3333 11.8435 10.2631 12.013 10.1381 12.1381C10.0131 12.2631 9.84348 12.3333 9.66667 12.3333Z",
+              fill: _ctx.svgColor
+            }, null, 8, _hoisted_4)
+          ]))
+        ])
+      ]),
+      vue.createElementVNode("div", null, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ])
+    ])
+  ], 2);
+}
+const PAlert = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = PAlert;

package/dist/cjs/p-avatar.js

@@ -0,0 +1,71 @@
+"use strict";
+const vue = require("vue");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const SHAPES = {
+  rectangle: "rectangle",
+  circle: "circle"
+};
+const SHAPE_CLASSES = {
+  [SHAPES.rectangle]: "rounded-lg",
+  [SHAPES.circle]: "rounded-full"
+};
+const _sfc_main = vue.defineComponent({
+  name: "PAvatar",
+  props: {
+    shape: {
+      type: String,
+      default: SHAPES.circle,
+      validator: (value) => Object.values(SHAPES).includes(value)
+    },
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    imageClass: {
+      type: String,
+      default: ""
+    },
+    labelClass: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      imageBroken: false
+    };
+  },
+  computed: {
+    shapeClass() {
+      return SHAPE_CLASSES[this.shape];
+    }
+  },
+  watch: {
+    imageSrc() {
+      this.imageBroken = false;
+    }
+  }
+});
+const _hoisted_1 = ["src", "alt"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.shapeClass)
+  }, [
+    _ctx.imageSrc && !_ctx.imageBroken ? (vue.openBlock(), vue.createElementBlock("img", {
+      key: 0,
+      src: _ctx.imageSrc,
+      alt: _ctx.label,
+      class: vue.normalizeClass(["h-full w-full object-cover", [_ctx.shapeClass, _ctx.imageClass]]),
+      onError: _cache[0] || (_cache[0] = ($event) => _ctx.imageBroken = true)
+    }, null, 42, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: vue.normalizeClass(["flex h-full w-full items-center justify-center", [_ctx.shapeClass, _ctx.labelClass]])
+    }, vue.toDisplayString(_ctx.label), 3))
+  ], 2);
+}
+const pAvatar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = pAvatar;