@pequity/squirrel 1.0.20 → 1.0.21-beta.1

package/dist/es/text.js

@@ -0,0 +1,16 @@
+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];
+  }
+};
+export {
+  splitStringForHighlight
+};

package/dist/es/useInputClasses.js

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

package/dist/es/usePLoading.js

@@ -0,0 +1,35 @@
+import { ref, getCurrentScope, onScopeDispose } from "vue";
+import { uniqueId } from "lodash-es";
+const show = ref(false);
+const loadingIds = [];
+let timer;
+const usePLoading = (options) => {
+  const { delay } = { delay: 200, ...options };
+  const scope = getCurrentScope();
+  const loadingShow = () => {
+    if (loadingIds.length === 0 && delay > 0) {
+      timer = setTimeout(() => {
+        show.value = true;
+      }, delay);
+    } else {
+      show.value = true;
+    }
+    loadingIds.push(uniqueId());
+  };
+  const loadingHide = () => {
+    if (loadingIds.length === 1) {
+      show.value = false;
+    }
+    clearTimeout(timer);
+    loadingIds.pop();
+  };
+  if (scope) {
+    onScopeDispose(() => {
+      loadingHide();
+    });
+  }
+  return { show, loadingShow, loadingHide };
+};
+export {
+  usePLoading
+};

package/dist/es/usePModal.js

@@ -0,0 +1,21 @@
+import { reactive } from "vue";
+const state = 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 };
+};
+export {
+  usePModal
+};

package/dist/es/usePTableColResize.js

@@ -0,0 +1,81 @@
+import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+const usePTableColResize = (options) => {
+  const { enabled, ths } = options;
+  const isColResizing = ref(false);
+  const colResizeHandleLeft = ref("0px");
+  const colResizingWidth = ref(0);
+  const colResizingIndex = 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);
+    nextTick(() => {
+      isColResizing.value = false;
+    });
+  };
+  const setColResizingWidth = (width) => {
+    colResizingWidth.value = width > MIN_WIDTH_COL_RESIZE ? Math.ceil(width) : MIN_WIDTH_COL_RESIZE;
+  };
+  onMounted(() => {
+    enabled.value && document.addEventListener("mouseup", colResizeStop);
+  });
+  onBeforeUnmount(() => {
+    enabled.value && document.removeEventListener("mouseup", colResizeStop);
+  });
+  watch(enabled, (nV) => {
+    if (nV) {
+      document.addEventListener("mouseup", colResizeStop);
+    } else {
+      document.removeEventListener("mouseup", colResizeStop);
+    }
+  });
+  return {
+    isColResizing,
+    colResizeHandleLeft,
+    colResizingIndex,
+    colResizingWidth,
+    colResize,
+    colResizeStart,
+    colResizeStop,
+    colResizeFitToData
+  };
+};
+export {
+  usePTableColResize
+};

package/dist/es/usePTableRowVirtualizer.js

@@ -0,0 +1,31 @@
+import { ref, computed, isRef, unref } from "vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+const usePTableRowVirtualizer = (options) => {
+  if (!options.value) {
+    return {
+      virtualizer: null,
+      virtualRows: ref([{ key: 0, index: 0 }]),
+      paddingTop: ref(0),
+      paddingBottom: ref(0),
+      measureElement: () => ref(void 0)
+    };
+  }
+  const virtualizer = useVirtualizer(options);
+  const virtualRows = computed(() => virtualizer.value.getVirtualItems());
+  const paddingTop = computed(() => virtualRows.value.length > 0 ? virtualRows.value[0].start : 0);
+  const paddingBottom = 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 = isRef(cmp) ? unref(cmp) : cmp == null ? void 0 : cmp.$el;
+    if (!el) {
+      return;
+    }
+    virtualizer.value.measureElement(el);
+    return void 0;
+  };
+  return { virtualizer, virtualRows, paddingTop, paddingBottom, measureElement };
+};
+export {
+  usePTableRowVirtualizer
+};

package/dist/es/useSelectList.js

@@ -0,0 +1,256 @@
+import { ref, computed, watch, onUnmounted, nextTick } from "vue";
+import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
+import { cloneDeep, uniqBy } from "lodash-es";
+import { isObject } from "./object.js";
+import { toString } from "./string.js";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+const createInternalItems = (items) => {
+  let arr = Array.isArray(items) ? items.slice() : [];
+  if (arr.length && !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 && 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 = ref([]);
+  const internalValue = ref([]);
+  const search = ref("");
+  const selectedItems = computed(() => {
+    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
+  });
+  const computedItems = computed(() => {
+    return cloneDeep(internalItems.value).filter((item) => {
+      return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
+    });
+  });
+  const computedItemSize = computed(() => props.itemSize ? props.itemSize : LIST_ITEM_SIZES[props.size]);
+  const computedInsideSelected = computed(() => {
+    const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
+    return filteredItems.every((item) => internalValue.value.includes(item));
+  });
+  const rowVirtualizer = useVirtualizer(
+    computed(() => {
+      return {
+        count: computedItems.value.length,
+        getScrollElement: () => virtualizerRef.value,
+        getItemKey: (index) => 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];
+  };
+  watch(
+    () => props.modelValue,
+    (nV) => {
+      internalValue.value = createInternalValue(
+        nV,
+        props.valueIsObject,
+        props.multiple,
+        props.itemValue,
+        internalItems.value
+      );
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  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();
+      }
+    }
+  });
+  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 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 = 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 = uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
+  };
+  const clearAll = () => {
+    search.value = "";
+    emit("update:modelValue", []);
+  };
+  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
+  };
+};
+export {
+  useSelectList
+};