@pequity/squirrel 1.0.20 → 1.0.21-beta.1

package/dist/cjs/text.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const splitStringForHighlight = (textToSearchIn, searchStr) => {
+  const str = String(searchStr).trim();
+  const text = String(textToSearchIn).trim();
+  const index = text.indexOf(str);
+  if (index >= 0) {
+    const part1 = text.substring(0, index);
+    const part2 = text.substring(index, index + str.length);
+    const part3 = text.substring(index + str.length);
+    return [part1, part2, part3];
+  } else {
+    return [text];
+  }
+};
+exports.splitStringForHighlight = splitStringForHighlight;

package/dist/cjs/useInputClasses.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const inputClassesShared = require("./inputClassesShared.js");
+const vue = require("vue");
+const defaults = {
+  size: vue.ref("md"),
+  errorMsg: vue.ref(""),
+  required: vue.ref(false),
+  prefix: vue.ref(false),
+  suffix: vue.ref(false)
+};
+function useInputClasses(props) {
+  const opts = { ...defaults, ...vue.toRefs(props) };
+  const { size, errorMsg, required, prefix, suffix } = opts;
+  const inputClasses = vue.computed(() => {
+    const base = `${inputClassesShared.INPUT_BASE} ${inputClassesShared.INPUT_SIZES[size.value]}`;
+    const spacingLeft = prefix.value ? inputClassesShared.SPACING_PREFIX[size.value] : inputClassesShared.SPACING_LEFT[size.value];
+    const spacingRight = suffix.value ? inputClassesShared.SPACING_SUFFIX[size.value] : inputClassesShared.SPACING_RIGHT[size.value];
+    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}`;
+    return res;
+  });
+  const labelClasses = vue.computed(() => {
+    const base = `${inputClassesShared.LABEL_BASE} ${inputClassesShared.LABEL_SIZES[size.value]}`;
+    const res = required.value ? `${base} ${inputClassesShared.LABEL_REQUIRED}` : base;
+    return res;
+  });
+  const selectClasses = vue.computed(() => {
+    const res = `${inputClasses.value.replace(` ${inputClassesShared.SPACING_RIGHT[size.value]}`, "")} ${inputClassesShared.SELECT_BASE} ${inputClassesShared.SELECT_ARROW} ${inputClassesShared.SELECT_SIZES[size.value]}`;
+    return res;
+  });
+  const textareaClasses = vue.computed(() => {
+    const res = `${inputClasses.value} ${inputClassesShared.TEXTAREA_BASE}`;
+    return res;
+  });
+  const errorMsgClasses = vue.ref(inputClassesShared.ERROR_MSG);
+  return {
+    inputClasses,
+    labelClasses,
+    selectClasses,
+    textareaClasses,
+    errorMsgClasses
+  };
+}
+exports.useInputClasses = useInputClasses;

package/dist/cjs/usePLoading.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const lodashEs = require("lodash-es");
+const show = vue.ref(false);
+const loadingIds = [];
+let timer;
+const usePLoading = (options) => {
+  const { delay } = { delay: 200, ...options };
+  const scope = vue.getCurrentScope();
+  const loadingShow = () => {
+    if (loadingIds.length === 0 && delay > 0) {
+      timer = setTimeout(() => {
+        show.value = true;
+      }, delay);
+    } else {
+      show.value = true;
+    }
+    loadingIds.push(lodashEs.uniqueId());
+  };
+  const loadingHide = () => {
+    if (loadingIds.length === 1) {
+      show.value = false;
+    }
+    clearTimeout(timer);
+    loadingIds.pop();
+  };
+  if (scope) {
+    vue.onScopeDispose(() => {
+      loadingHide();
+    });
+  }
+  return { show, loadingShow, loadingHide };
+};
+exports.usePLoading = usePLoading;

package/dist/cjs/usePModal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const state = vue.reactive({
+  modals: {}
+});
+const usePModal = () => {
+  const show = (name) => {
+    state.modals[name] = true;
+  };
+  const hide = (name) => {
+    delete state.modals[name];
+  };
+  const hideAll = () => {
+    Object.keys(state.modals).forEach((modalName) => {
+      hide(modalName);
+    });
+  };
+  return { state, show, hide, hideAll };
+};
+exports.usePModal = usePModal;

package/dist/cjs/usePTableColResize.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pTable = require("./p-table.js");
+const vue = require("vue");
+const usePTableColResize = (options) => {
+  const { enabled, ths } = options;
+  const isColResizing = vue.ref(false);
+  const colResizeHandleLeft = vue.ref("0px");
+  const colResizingWidth = vue.ref(0);
+  const colResizingIndex = vue.ref(-1);
+  const colResize = (e) => {
+    colResizeHandleLeft.value = `${e.clientX}px`;
+    if (isColResizing.value) {
+      document.body.classList.add("cursor-col-resize");
+      const th = ths.value[colResizingIndex.value];
+      const rect = th.getBoundingClientRect();
+      const diff = e.clientX - rect.left - th.offsetWidth;
+      const widthToSet = th.offsetWidth + diff;
+      setColResizingWidth(widthToSet);
+      colResizeHandleLeft.value = e.clientX < rect.left ? "0px" : `${e.clientX}px`;
+    }
+  };
+  const colResizeStart = (e, i) => {
+    if (e.detail === 1) {
+      e.preventDefault();
+      isColResizing.value = true;
+      colResizingWidth.value = ths.value[i].offsetWidth;
+      colResizingIndex.value = i;
+    }
+  };
+  const colResizeStop = () => {
+    if (!isColResizing.value) {
+      return;
+    }
+    isColResizing.value = false;
+    document.body.classList.remove("cursor-col-resize");
+  };
+  const colResizeFitToData = (colIndex) => {
+    var _a;
+    isColResizing.value = true;
+    const tds = (_a = ths.value[colIndex].closest("table")) == null ? void 0 : _a.querySelectorAll("tbody tr td:nth-child(" + (colIndex + 1) + ") div.w-max");
+    if (!tds) {
+      return;
+    }
+    const maxWidth = [...tds].reduce((max, td) => {
+      const width = td.getBoundingClientRect().width;
+      return width > max ? width : max;
+    }, 0);
+    setColResizingWidth(maxWidth);
+    vue.nextTick(() => {
+      isColResizing.value = false;
+    });
+  };
+  const setColResizingWidth = (width) => {
+    colResizingWidth.value = width > pTable.MIN_WIDTH_COL_RESIZE ? Math.ceil(width) : pTable.MIN_WIDTH_COL_RESIZE;
+  };
+  vue.onMounted(() => {
+    enabled.value && document.addEventListener("mouseup", colResizeStop);
+  });
+  vue.onBeforeUnmount(() => {
+    enabled.value && document.removeEventListener("mouseup", colResizeStop);
+  });
+  vue.watch(enabled, (nV) => {
+    if (nV) {
+      document.addEventListener("mouseup", colResizeStop);
+    } else {
+      document.removeEventListener("mouseup", colResizeStop);
+    }
+  });
+  return {
+    isColResizing,
+    colResizeHandleLeft,
+    colResizingIndex,
+    colResizingWidth,
+    colResize,
+    colResizeStart,
+    colResizeStop,
+    colResizeFitToData
+  };
+};
+exports.usePTableColResize = usePTableColResize;

package/dist/cjs/usePTableRowVirtualizer.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const vueVirtual = require("@tanstack/vue-virtual");
+const usePTableRowVirtualizer = (options) => {
+  if (!options.value) {
+    return {
+      virtualizer: null,
+      virtualRows: vue.ref([{ key: 0, index: 0 }]),
+      paddingTop: vue.ref(0),
+      paddingBottom: vue.ref(0),
+      measureElement: () => vue.ref(void 0)
+    };
+  }
+  const virtualizer = vueVirtual.useVirtualizer(options);
+  const virtualRows = vue.computed(() => virtualizer.value.getVirtualItems());
+  const paddingTop = vue.computed(() => virtualRows.value.length > 0 ? virtualRows.value[0].start : 0);
+  const paddingBottom = vue.computed(
+    () => virtualRows.value.length > 0 ? (virtualizer == null ? void 0 : virtualizer.value.getTotalSize()) - virtualRows.value[virtualRows.value.length - 1].end : 0
+  );
+  const measureElement = (cmp) => {
+    const el = vue.isRef(cmp) ? vue.unref(cmp) : cmp == null ? void 0 : cmp.$el;
+    if (!el) {
+      return;
+    }
+    virtualizer.value.measureElement(el);
+    return void 0;
+  };
+  return { virtualizer, virtualRows, paddingTop, paddingBottom, measureElement };
+};
+exports.usePTableRowVirtualizer = usePTableRowVirtualizer;

package/dist/cjs/useSelectList.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const listKeyboardNavigation = require("./listKeyboardNavigation.js");
+const lodashEs = require("lodash-es");
+const object = require("./object.js");
+const string = require("./string.js");
+const vueVirtual = require("@tanstack/vue-virtual");
+const createInternalItems = (items) => {
+  let arr = Array.isArray(items) ? items.slice() : [];
+  if (arr.length && !object.isObject(arr[0])) {
+    arr = arr.filter((item, i, self) => self.indexOf(item) === i).map((item) => ({ value: item, text: item }));
+  }
+  return arr;
+};
+const createInternalValue = (modelValue, valueIsObject, multiple, itemValue, internalItems) => {
+  let val = modelValue;
+  if (valueIsObject && object.isObject(modelValue)) {
+    if (multiple) {
+      val = modelValue.map((v) => v[itemValue]);
+    } else {
+      val = modelValue ? modelValue[itemValue] : modelValue;
+    }
+  }
+  const arr = Array.isArray(val) ? val : [val];
+  return arr;
+};
+const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+const nextLoop = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0));
+const LIST_ITEM_SIZES = { sm: 32, md: 40, lg: 48 };
+const LIST_ITEM_CLASS = "clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10";
+const LIST_ITEM_ACTIVE_CLASS = "selected";
+const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
+  let navigationSvc = null;
+  const internalItems = vue.ref([]);
+  const internalValue = vue.ref([]);
+  const search = vue.ref("");
+  const selectedItems = vue.computed(() => {
+    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
+  });
+  const computedItems = vue.computed(() => {
+    return lodashEs.cloneDeep(internalItems.value).filter((item) => {
+      return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
+    });
+  });
+  const computedItemSize = vue.computed(() => props.itemSize ? props.itemSize : LIST_ITEM_SIZES[props.size]);
+  const computedInsideSelected = vue.computed(() => {
+    const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
+    return filteredItems.every((item) => internalValue.value.includes(item));
+  });
+  const rowVirtualizer = vueVirtual.useVirtualizer(
+    vue.computed(() => {
+      return {
+        count: computedItems.value.length,
+        getScrollElement: () => virtualizerRef.value,
+        getItemKey: (index) => string.toString(computedItems.value[index][props.itemValue]),
+        estimateSize: () => {
+          return props.itemSize ? props.itemSize : LIST_ITEM_SIZES[props.size];
+        },
+        overscan: 10
+      };
+    })
+  );
+  const getValue = (index) => {
+    var _a;
+    return (_a = computedItems.value[index]) == null ? void 0 : _a[props.itemValue];
+  };
+  const getText = (index) => {
+    var _a;
+    return (_a = computedItems.value[index]) == null ? void 0 : _a[props.itemText];
+  };
+  vue.watch(
+    () => props.modelValue,
+    (nV) => {
+      internalValue.value = createInternalValue(
+        nV,
+        props.valueIsObject,
+        props.multiple,
+        props.itemValue,
+        internalItems.value
+      );
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  vue.watch(search, async (nV) => {
+    await scrollScrollerToTop();
+    await nextFrame();
+    if (!navigationSvc) {
+      return;
+    }
+    const firstItem = navigationSvc.getItems().filter((item) => item.style.transform.includes("translateY(0px)"))[0];
+    if (nV) {
+      navigationSvc.setFocusedItem(firstItem);
+    } else {
+      if (props.multiple) {
+        navigationSvc.setFocusedItem(firstItem);
+      } else {
+        getActiveItemIndex() > -1 ? scrollToActiveItem() : navigationSvc.clearFocusedState();
+      }
+    }
+  });
+  vue.onUnmounted(() => {
+    navigationSvc == null ? void 0 : navigationSvc.destroy();
+    navigationSvc = null;
+  });
+  const putSelectedItemsOnTop = () => {
+    if (props.selectedTopShown) {
+      const arr = internalItems.value.reduce(
+        (acc, curr) => {
+          internalValue.value.includes(curr[props.itemValue]) ? acc[0].push(curr) : acc[1].push(curr);
+          return acc;
+        },
+        [[], []]
+      );
+      internalItems.value = arr[0].sort(
+        (a, b) => String(a[props.itemText]).localeCompare(String(b[props.itemText]), void 0, {
+          numeric: true,
+          sensitivity: "base"
+        })
+      ).concat(arr[1]);
+    }
+  };
+  const select = async (e, val) => {
+    var _a, _b;
+    const el = e.currentTarget;
+    if (props.multiple && props.searchable && document.activeElement !== ((_a = inputSearch.value) == null ? void 0 : _a.$el.querySelector("input"))) {
+      (_b = inputSearch.value) == null ? void 0 : _b.$el.querySelector("input").focus();
+    }
+    if (props.multiple) {
+      if (!isSelected(val)) {
+        emit("update:modelValue", toArrOfObjIfNeeded([...internalValue.value, val]));
+      } else {
+        emit("update:modelValue", toArrOfObjIfNeeded(internalValue.value.filter((item) => item !== val)));
+      }
+    } else {
+      emit("update:modelValue", props.valueIsObject ? getItemByValue(val) : val);
+    }
+    await vue.nextTick();
+    navigationSvc == null ? void 0 : navigationSvc.setFocusedItem(el.parentElement);
+    emit("select", val);
+  };
+  const toArrOfObjIfNeeded = (arr) => {
+    return props.valueIsObject ? arr.map((val) => getItemByValue(val)) : arr;
+  };
+  const getItemByValue = (value) => {
+    return internalItems.value.find((item) => item[props.itemValue] === value);
+  };
+  const isSelected = (val) => {
+    return internalValue.value.includes(val);
+  };
+  const setupNavigationSvc = () => {
+    if (navigationSvc) {
+      navigationSvc.init();
+    } else {
+      navigationSvc = listKeyboardNavigation.setupListKeyboardNavigation({
+        itemContainer: virtualizerRef.value,
+        itemSelector: "[p-select-list-option]",
+        itemSelectSelector: `[p-select-list-option-item]`,
+        itemFocusClass: "bg-p-blue-10"
+      });
+    }
+  };
+  const destroyNavigationSvc = () => {
+    navigationSvc == null ? void 0 : navigationSvc.destroy();
+    navigationSvc = null;
+  };
+  const onFocus = async () => {
+    setupNavigationSvc();
+  };
+  const onMousemove = () => {
+    navigationSvc == null ? void 0 : navigationSvc.clearFocusedState();
+  };
+  const scrollScrollerToTop = async () => {
+    rowVirtualizer.value.scrollToOffset(0);
+    await nextFrame();
+  };
+  const scrollToActiveItem = async (options) => {
+    var _a;
+    if (options == null ? void 0 : options.wait) {
+      await nextLoop(options.wait);
+    }
+    const activeIndex = getActiveItemIndex();
+    if (virtualizerRef.value && rowVirtualizer.value && activeIndex > -1) {
+      rowVirtualizer.value.scrollToIndex(activeIndex, {
+        align: "center"
+      });
+      await nextLoop();
+      await nextFrame();
+      const activeEl = (_a = virtualizerRef.value) == null ? void 0 : _a.querySelector(`.${LIST_ITEM_ACTIVE_CLASS}`);
+      navigationSvc == null ? void 0 : navigationSvc.setFocusedItem(activeEl == null ? void 0 : activeEl.parentNode);
+    }
+  };
+  const getActiveItemIndex = () => {
+    return internalItems.value.indexOf(selectedItems.value[0]);
+  };
+  const selectAll = () => {
+    if (!props.multiple) {
+      return;
+    }
+    const selectedItems2 = internalValue.value;
+    const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
+    const toEmit = lodashEs.uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
+  };
+  const clearAll = () => {
+    search.value = "";
+    emit("update:modelValue", []);
+  };
+  vue.watch(
+    () => props.items,
+    (nV) => {
+      internalItems.value = createInternalItems(nV);
+      if (props.multiple && props.items.length && internalValue.value.length) {
+        const internalValueFiltered = internalValue.value.filter((item) => {
+          return internalItems.value.some((i) => i[props.itemValue] === item);
+        });
+        if (internalValueFiltered.length !== internalValue.value.length) {
+          console.warn(`[p-select-list] Some values in the modelValue are not in the items list.`);
+          emit("update:modelValue", toArrOfObjIfNeeded(internalValueFiltered));
+        }
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    LIST_ITEM_SIZES,
+    LIST_ITEM_CLASS,
+    LIST_ITEM_ACTIVE_CLASS,
+    selectedItems,
+    computedItems,
+    computedItemSize,
+    computedInsideSelected,
+    internalItems,
+    internalValue,
+    search,
+    rowVirtualizer,
+    getValue,
+    getText,
+    isSelected,
+    setupNavigationSvc,
+    destroyNavigationSvc,
+    select,
+    onFocus,
+    onMousemove,
+    scrollToActiveItem,
+    putSelectedItemsOnTop,
+    selectAll,
+    clearAll
+  };
+};
+exports.useSelectList = useSelectList;

package/dist/es/chunks/_plugin-vue_export-helper.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as _
+};

package/dist/es/chunks/p-action-bar.js

@@ -0,0 +1,61 @@
+import { defineComponent, openBlock, createElementBlock, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent, createCommentVNode } from "vue";
+import PBtn from "../p-btn.js";
+import PCloseBtn from "../p-close-btn.js";
+const _hoisted_1 = {
+  class: "fixed bottom-6 left-1/2 flex h-12 -translate-x-1/2 select-none flex-row items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white",
+  role: "alertdialog"
+};
+const _hoisted_2 = { class: "px-3" };
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 rounded bg-p-purple-50" }, null, -1);
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = { class: "flex items-center gap-2 px-1 py-0.5" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "p-action-bar",
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    actions: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["click:dismiss", "click:action"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(PCloseBtn, {
+          variant: "dark",
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
+        }),
+        createElementVNode("p", _hoisted_2, toDisplayString(__props.label), 1),
+        _hoisted_3,
+        createElementVNode("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action) => {
+            return openBlock(), createBlock(PBtn, {
+              key: `action-${action.name}`,
+              size: "sm",
+              type: "secondary-ghost-dark",
+              onClick: ($event) => _ctx.$emit("click:action", action.name)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_5, [
+                  action.icon ? (openBlock(), createBlock(resolveDynamicComponent(action.icon), {
+                    key: 0,
+                    class: "h-4 w-4"
+                  })) : createCommentVNode("", true),
+                  createElementVNode("div", null, toDisplayString(action.label), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["onClick"]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -0,0 +1,29 @@
+import { defineComponent, openBlock, createElementBlock, renderSlot, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+const _hoisted_1 = { class: "border border-p-gray-30 bg-surface px-6 pt-6" };
+const titleClass = "text-xl font-medium leading-none text-p-purple-60";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "PCard" },
+  __name: "p-card",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "title", { titleClass }, () => [
+          __props.title ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(titleClass)
+          }, toDisplayString(__props.title), 1)) : createCommentVNode("", true)
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

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

@@ -0,0 +1,25 @@
+import { defineComponent, openBlock, createElementBlock } from "vue";
+const _hoisted_1 = ["checked"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "p-checkbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("input", {
+        type: "checkbox",
+        class: "cursor-pointer accent-p-blue-50",
+        checked: __props.modelValue,
+        onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
+      }, null, 40, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};