@pequity/squirrel 1.0.20-beta.2 → 1.0.20-beta.3

package/dist/es/useSelectList.js

@@ -1,143 +1,256 @@
-import { ref as S, computed as f, watch as y, onUnmounted as U, nextTick as Y } from "vue";
-import { setupListKeyboardNavigation as Z } from "./listKeyboardNavigation.js";
-import { cloneDeep as G, uniqBy as H } from "lodash-es";
-import { isObject as C } from "./object.js";
-import { toString as J } from "./string.js";
-import { useVirtualizer as Q } from "@tanstack/vue-virtual";
-const W = (e) => {
-  let i = Array.isArray(e) ? e.slice() : [];
-  return i.length && !C(i[0]) && (i = i.filter((o, c, u) => u.indexOf(o) === c).map((o) => ({ value: o, text: o }))), i;
-}, X = (e, i, o, c, u) => {
-  let n = e;
-  return i && C(e) && (o ? n = e.map((d) => d[c]) : n = e && e[c]), Array.isArray(n) ? n : [n];
-}, T = () => new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e))), L = (e) => new Promise((i) => setTimeout(i, e || 0)), w = { sm: 32, md: 40, lg: 48 }, R = "clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10", O = "selected", ae = (e, i, o, c) => {
-  let u = null;
-  const n = S([]), s = S([]), d = S(""), x = f(() => n.value.filter((l) => s.value.includes(l[e.itemValue]))), m = f(() => G(n.value).filter((l) => String(l[e.itemText]).toLocaleLowerCase().includes(String(d.value).toLocaleLowerCase()))), E = f(() => e.itemSize ? e.itemSize : w[e.size]), z = f(() => m.value.map((t) => t[e.itemValue]).every((t) => s.value.includes(t))), I = Q(
-    f(() => ({
-      count: m.value.length,
-      getScrollElement: () => o.value,
-      getItemKey: (l) => J(m.value[l][e.itemValue]),
-      estimateSize: () => e.itemSize ? e.itemSize : w[e.size],
-      overscan: 10
-    }))
-  ), _ = (l) => {
-    var t;
-    return (t = m.value[l]) == null ? void 0 : t[e.itemValue];
-  }, q = (l) => {
-    var t;
-    return (t = m.value[l]) == null ? void 0 : t[e.itemText];
-  };
-  y(
-    () => e.modelValue,
-    (l) => {
-      s.value = X(
-        l,
-        e.valueIsObject,
-        e.multiple,
-        e.itemValue,
-        n.value
+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: !0,
-      deep: !0
+      immediate: true,
+      deep: true
     }
-  ), y(d, async (l) => {
-    if (await B(), await T(), !u)
+  );
+  watch(search, async (nV) => {
+    await scrollScrollerToTop();
+    await nextFrame();
+    if (!navigationSvc) {
       return;
-    const t = u.getItems().filter((a) => a.style.transform.includes("translateY(0px)"))[0];
-    l || e.multiple ? u.setFocusedItem(t) : A() > -1 ? b() : u.clearFocusedState();
-  }), U(() => {
-    u == null || u.destroy(), u = null;
+    }
+    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 j = () => {
-    if (e.selectedTopShown) {
-      const l = n.value.reduce(
-        (t, a) => (s.value.includes(a[e.itemValue]) ? t[0].push(a) : t[1].push(a), t),
+  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;
+        },
         [[], []]
       );
-      n.value = l[0].sort(
-        (t, a) => String(t[e.itemText]).localeCompare(String(a[e.itemText]), void 0, {
-          numeric: !0,
+      internalItems.value = arr[0].sort(
+        (a, b) => String(a[props.itemText]).localeCompare(String(b[props.itemText]), void 0, {
+          numeric: true,
           sensitivity: "base"
         })
-      ).concat(l[1]);
+      ).concat(arr[1]);
     }
-  }, N = async (l, t) => {
-    var r, F;
-    const a = l.currentTarget;
-    e.multiple && e.searchable && document.activeElement !== ((r = i.value) == null ? void 0 : r.$el.querySelector("input")) && ((F = i.value) == null || F.$el.querySelector("input").focus()), e.multiple ? g(t) ? c("update:modelValue", v(s.value.filter((D) => D !== t))) : c("update:modelValue", v([...s.value, t])) : c("update:modelValue", e.valueIsObject ? V(t) : t), await Y(), u == null || u.setFocusedItem(a.parentElement), c("select", t);
-  }, v = (l) => e.valueIsObject ? l.map((t) => V(t)) : l, V = (l) => n.value.find((t) => t[e.itemValue] === l), g = (l) => s.value.includes(l), h = () => {
-    u ? u.init() : u = Z({
-      itemContainer: o.value,
-      itemSelector: "[p-select-list-option]",
-      itemSelectSelector: "[p-select-list-option-item]",
-      itemFocusClass: "bg-p-blue-10"
-    });
-  }, M = () => {
-    u == null || u.destroy(), u = null;
-  }, $ = async () => {
-    h();
-  }, k = () => {
-    u == null || u.clearFocusedState();
-  }, B = async () => {
-    I.value.scrollToOffset(0), await T();
-  }, b = async (l) => {
-    var a;
-    l != null && l.wait && await L(l.wait);
-    const t = A();
-    if (o.value && I.value && t > -1) {
-      I.value.scrollToIndex(t, {
+  };
+  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 L(), await T();
-      const r = (a = o.value) == null ? void 0 : a.querySelector(`.${O}`);
-      u == null || u.setFocusedItem(r == null ? void 0 : r.parentNode);
+      });
+      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);
     }
-  }, A = () => n.value.indexOf(x.value[0]), K = () => {
-    if (!e.multiple)
+  };
+  const getActiveItemIndex = () => {
+    return internalItems.value.indexOf(selectedItems.value[0]);
+  };
+  const selectAll = () => {
+    if (!props.multiple) {
       return;
-    const l = s.value, t = m.value.map((r) => r[e.itemValue]), a = H([...l, ...t], (r) => r);
-    c("update:modelValue", v(a));
-  }, P = () => {
-    d.value = "", c("update:modelValue", []);
-  };
-  return y(
-    () => e.items,
-    (l) => {
-      if (n.value = W(l), e.multiple && e.items.length && s.value.length) {
-        const t = s.value.filter((a) => n.value.some((r) => r[e.itemValue] === a));
-        t.length !== s.value.length && (console.warn("[p-select-list] Some values in the modelValue are not in the items list."), c("update:modelValue", v(t)));
+    }
+    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: !0
+      immediate: true
     }
-  ), {
-    LIST_ITEM_SIZES: w,
-    LIST_ITEM_CLASS: R,
-    LIST_ITEM_ACTIVE_CLASS: O,
-    selectedItems: x,
-    computedItems: m,
-    computedItemSize: E,
-    computedInsideSelected: z,
-    internalItems: n,
-    internalValue: s,
-    search: d,
-    rowVirtualizer: I,
-    getValue: _,
-    getText: q,
-    isSelected: g,
-    setupNavigationSvc: h,
-    destroyNavigationSvc: M,
-    select: N,
-    onFocus: $,
-    onMousemove: k,
-    scrollToActiveItem: b,
-    putSelectedItemsOnTop: j,
-    selectAll: K,
-    clearAll: P
+  );
+  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 {
-  ae as useSelectList
+  useSelectList
 };