@indielayer/ui 1.8.4 → 1.9.1

package/lib/node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js

@@ -0,0 +1,412 @@
+import { noop as I, toValue as A, tryOnScopeDispose as W, isIOS as G, useThrottleFn as N, isClient as Q, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { createFilterWrapper as Se, debounceFilter as Oe, throttleFilter as xe } from "../../../../@vueuse_shared@10.2.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { watch as D, computed as O, ref as _, reactive as C, watchEffect as Z, getCurrentInstance as ee, onMounted as te } from "vue";
+function S(e) {
+  var s;
+  const o = A(e);
+  return (s = o == null ? void 0 : o.$el) != null ? s : o;
+}
+const $ = Q ? window : void 0;
+function x(...e) {
+  let s, o, n, i;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([o, n, i] = e, s = $) : [s, o, n, i] = e, !s)
+    return I;
+  Array.isArray(o) || (o = [o]), Array.isArray(n) || (n = [n]);
+  const m = [], u = () => {
+    m.forEach((c) => c()), m.length = 0;
+  }, t = (c, p, l, d) => (c.addEventListener(p, l, d), () => c.removeEventListener(p, l, d)), r = D(
+    () => [S(s), A(i)],
+    ([c, p]) => {
+      u(), c && m.push(
+        ...o.flatMap((l) => n.map((d) => t(c, l, d, p)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), a = () => {
+    r(), u();
+  };
+  return W(a), a;
+}
+let H = !1;
+function ve(e, s, o = {}) {
+  const { window: n = $, ignore: i = [], capture: m = !0, detectIframe: u = !1 } = o;
+  if (!n)
+    return;
+  G && !H && (H = !0, Array.from(n.document.body.children).forEach((l) => l.addEventListener("click", I)));
+  let t = !0;
+  const r = (l) => i.some((d) => {
+    if (typeof d == "string")
+      return Array.from(n.document.querySelectorAll(d)).some((h) => h === l.target || l.composedPath().includes(h));
+    {
+      const h = S(d);
+      return h && (l.target === h || l.composedPath().includes(h));
+    }
+  }), c = [
+    x(n, "click", (l) => {
+      const d = S(e);
+      if (!(!d || d === l.target || l.composedPath().includes(d))) {
+        if (l.detail === 0 && (t = !r(l)), !t) {
+          t = !0;
+          return;
+        }
+        s(l);
+      }
+    }, { passive: !0, capture: m }),
+    x(n, "pointerdown", (l) => {
+      const d = S(e);
+      d && (t = !l.composedPath().includes(d) && !r(l));
+    }, { passive: !0 }),
+    u && x(n, "blur", (l) => {
+      setTimeout(() => {
+        var d;
+        const h = S(e);
+        ((d = n.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(h != null && h.contains(n.document.activeElement)) && s(l);
+      }, 0);
+    })
+  ].filter(Boolean);
+  return () => c.forEach((l) => l());
+}
+function ne() {
+  const e = _(!1);
+  return ee() && te(() => {
+    e.value = !0;
+  }), e;
+}
+function k(e) {
+  const s = ne();
+  return O(() => (s.value, !!e()));
+}
+function B(e, s = {}) {
+  const { window: o = $ } = s, n = k(() => o && "matchMedia" in o && typeof o.matchMedia == "function");
+  let i;
+  const m = _(!1), u = () => {
+    i && ("removeEventListener" in i ? i.removeEventListener("change", t) : i.removeListener(t));
+  }, t = () => {
+    n.value && (u(), i = o.matchMedia(J(e).value), m.value = !!(i != null && i.matches), i && ("addEventListener" in i ? i.addEventListener("change", t) : i.addListener(t)));
+  };
+  return Z(t), W(() => u()), m;
+}
+const pe = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function me(e, s = {}) {
+  function o(t, r) {
+    let a = e[t];
+    return r != null && (a = U(a, r)), typeof a == "number" && (a = `${a}px`), a;
+  }
+  const { window: n = $ } = s;
+  function i(t) {
+    return n ? n.matchMedia(t).matches : !1;
+  }
+  const m = (t) => B(`(min-width: ${o(t)})`, s), u = Object.keys(e).reduce((t, r) => (Object.defineProperty(t, r, {
+    get: () => m(r),
+    enumerable: !0,
+    configurable: !0
+  }), t), {});
+  return Object.assign(u, {
+    greater(t) {
+      return B(`(min-width: ${o(t, 0.1)})`, s);
+    },
+    greaterOrEqual: m,
+    smaller(t) {
+      return B(`(max-width: ${o(t, -0.1)})`, s);
+    },
+    smallerOrEqual(t) {
+      return B(`(max-width: ${o(t)})`, s);
+    },
+    between(t, r) {
+      return B(`(min-width: ${o(t)}) and (max-width: ${o(r, -0.1)})`, s);
+    },
+    isGreater(t) {
+      return i(`(min-width: ${o(t, 0.1)})`);
+    },
+    isGreaterOrEqual(t) {
+      return i(`(min-width: ${o(t)})`);
+    },
+    isSmaller(t) {
+      return i(`(max-width: ${o(t, -0.1)})`);
+    },
+    isSmallerOrEqual(t) {
+      return i(`(max-width: ${o(t)})`);
+    },
+    isInBetween(t, r) {
+      return i(`(min-width: ${o(t)}) and (max-width: ${o(r, -0.1)})`);
+    },
+    current() {
+      const t = Object.keys(e).map((r) => [r, m(r)]);
+      return O(() => t.filter(([, r]) => r.value).map(([r]) => r));
+    }
+  });
+}
+var X = Object.getOwnPropertySymbols, oe = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable, se = (e, s) => {
+  var o = {};
+  for (var n in e)
+    oe.call(e, n) && s.indexOf(n) < 0 && (o[n] = e[n]);
+  if (e != null && X)
+    for (var n of X(e))
+      s.indexOf(n) < 0 && re.call(e, n) && (o[n] = e[n]);
+  return o;
+};
+function he(e, s, o = {}) {
+  const n = o, { window: i = $ } = n, m = se(n, ["window"]);
+  let u;
+  const t = k(() => i && "MutationObserver" in i), r = () => {
+    u && (u.disconnect(), u = void 0);
+  }, a = D(
+    () => S(e),
+    (p) => {
+      r(), t.value && i && p && (u = new MutationObserver(s), u.observe(p, m));
+    },
+    { immediate: !0 }
+  ), c = () => {
+    r(), a();
+  };
+  return W(c), {
+    isSupported: t,
+    stop: c
+  };
+}
+var V = Object.getOwnPropertySymbols, ie = Object.prototype.hasOwnProperty, le = Object.prototype.propertyIsEnumerable, ue = (e, s) => {
+  var o = {};
+  for (var n in e)
+    ie.call(e, n) && s.indexOf(n) < 0 && (o[n] = e[n]);
+  if (e != null && V)
+    for (var n of V(e))
+      s.indexOf(n) < 0 && le.call(e, n) && (o[n] = e[n]);
+  return o;
+};
+function ae(e, s, o = {}) {
+  const n = o, { window: i = $ } = n, m = ue(n, ["window"]);
+  let u;
+  const t = k(() => i && "ResizeObserver" in i), r = () => {
+    u && (u.disconnect(), u = void 0);
+  }, a = O(
+    () => Array.isArray(e) ? e.map((l) => S(l)) : [S(e)]
+  ), c = D(
+    a,
+    (l) => {
+      if (r(), t.value && i) {
+        u = new ResizeObserver(s);
+        for (const d of l)
+          d && u.observe(d, m);
+      }
+    },
+    { immediate: !0, flush: "post", deep: !0 }
+  ), p = () => {
+    r(), c();
+  };
+  return W(p), {
+    isSupported: t,
+    stop: p
+  };
+}
+function be(e, s = { width: 0, height: 0 }, o = {}) {
+  const { window: n = $, box: i = "content-box" } = o, m = O(() => {
+    var r, a;
+    return (a = (r = S(e)) == null ? void 0 : r.namespaceURI) == null ? void 0 : a.includes("svg");
+  }), u = _(s.width), t = _(s.height);
+  return ae(
+    e,
+    ([r]) => {
+      const a = i === "border-box" ? r.borderBoxSize : i === "content-box" ? r.contentBoxSize : r.devicePixelContentBoxSize;
+      if (n && m.value) {
+        const c = S(e);
+        if (c) {
+          const p = n.getComputedStyle(c);
+          u.value = Number.parseFloat(p.width), t.value = Number.parseFloat(p.height);
+        }
+      } else if (a) {
+        const c = Array.isArray(a) ? a : [a];
+        u.value = c.reduce((p, { inlineSize: l }) => p + l, 0), t.value = c.reduce((p, { blockSize: l }) => p + l, 0);
+      } else
+        u.value = r.contentRect.width, t.value = r.contentRect.height;
+    },
+    o
+  ), D(
+    () => S(e),
+    (r) => {
+      u.value = r ? s.width : 0, t.value = r ? s.height : 0;
+    }
+  ), {
+    width: u,
+    height: t
+  };
+}
+const Y = 1;
+function we(e, s = {}) {
+  const {
+    throttle: o = 0,
+    idle: n = 200,
+    onStop: i = I,
+    onScroll: m = I,
+    offset: u = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions: t = {
+      capture: !1,
+      passive: !0
+    },
+    behavior: r = "auto"
+  } = s, a = _(0), c = _(0), p = O({
+    get() {
+      return a.value;
+    },
+    set(v) {
+      d(v, void 0);
+    }
+  }), l = O({
+    get() {
+      return c.value;
+    },
+    set(v) {
+      d(void 0, v);
+    }
+  });
+  function d(v, y) {
+    var M, T, f;
+    const w = A(e);
+    w && ((f = w instanceof Document ? document.body : w) == null || f.scrollTo({
+      top: (M = A(y)) != null ? M : l.value,
+      left: (T = A(v)) != null ? T : p.value,
+      behavior: A(r)
+    }));
+  }
+  const h = _(!1), b = C({
+    left: !0,
+    right: !1,
+    top: !0,
+    bottom: !1
+  }), E = C({
+    left: !1,
+    right: !1,
+    top: !1,
+    bottom: !1
+  }), R = (v) => {
+    h.value && (h.value = !1, E.left = !1, E.right = !1, E.top = !1, E.bottom = !1, i(v));
+  }, F = K(R, o + n), j = (v) => {
+    const y = v === window ? v.document.documentElement : v === document ? v.documentElement : v, { display: M, flexDirection: T } = getComputedStyle(y), f = y.scrollLeft;
+    E.left = f < a.value, E.right = f > a.value;
+    const w = Math.abs(f) <= 0 + (u.left || 0), L = Math.abs(f) + y.clientWidth >= y.scrollWidth - (u.right || 0) - Y;
+    M === "flex" && T === "row-reverse" ? (b.left = L, b.right = w) : (b.left = w, b.right = L), a.value = f;
+    let P = y.scrollTop;
+    v === document && !P && (P = document.body.scrollTop), E.top = P < c.value, E.bottom = P > c.value;
+    const z = Math.abs(P) <= 0 + (u.top || 0), q = Math.abs(P) + y.clientHeight >= y.scrollHeight - (u.bottom || 0) - Y;
+    M === "flex" && T === "column-reverse" ? (b.top = q, b.bottom = z) : (b.top = z, b.bottom = q), c.value = P;
+  }, g = (v) => {
+    const y = v.target === document ? v.target.documentElement : v.target;
+    j(y), h.value = !0, F(v), m(v);
+  };
+  return x(
+    e,
+    "scroll",
+    o ? N(g, o, !0, !1) : g,
+    t
+  ), x(
+    e,
+    "scrollend",
+    R,
+    t
+  ), {
+    x: p,
+    y: l,
+    isScrolling: h,
+    arrivedState: b,
+    directions: E,
+    measure() {
+      const v = A(e);
+      v && j(v);
+    }
+  };
+}
+function ye(e, s = {}) {
+  const {
+    threshold: o = 50,
+    onSwipe: n,
+    onSwipeEnd: i,
+    onSwipeStart: m,
+    passive: u = !0,
+    window: t = $
+  } = s, r = C({ x: 0, y: 0 }), a = C({ x: 0, y: 0 }), c = O(() => r.x - a.x), p = O(() => r.y - a.y), { max: l, abs: d } = Math, h = O(() => l(d(c.value), d(p.value)) >= o), b = _(!1), E = O(() => h.value ? d(c.value) > d(p.value) ? c.value > 0 ? "left" : "right" : p.value > 0 ? "up" : "down" : "none"), R = (f) => [f.touches[0].clientX, f.touches[0].clientY], F = (f, w) => {
+    r.x = f, r.y = w;
+  }, j = (f, w) => {
+    a.x = f, a.y = w;
+  };
+  let g;
+  const v = ce(t == null ? void 0 : t.document);
+  u ? g = v ? { passive: !0 } : { capture: !1 } : g = v ? { passive: !1, capture: !0 } : { capture: !0 };
+  const y = (f) => {
+    b.value && (i == null || i(f, E.value)), b.value = !1;
+  }, M = [
+    x(e, "touchstart", (f) => {
+      if (f.touches.length !== 1)
+        return;
+      g.capture && !g.passive && f.preventDefault();
+      const [w, L] = R(f);
+      F(w, L), j(w, L), m == null || m(f);
+    }, g),
+    x(e, "touchmove", (f) => {
+      if (f.touches.length !== 1)
+        return;
+      const [w, L] = R(f);
+      j(w, L), !b.value && h.value && (b.value = !0), b.value && (n == null || n(f));
+    }, g),
+    x(e, "touchend", y, g),
+    x(e, "touchcancel", y, g)
+  ];
+  return {
+    isPassiveEventSupported: v,
+    isSwiping: b,
+    direction: E,
+    coordsStart: r,
+    coordsEnd: a,
+    lengthX: c,
+    lengthY: p,
+    stop: () => M.forEach((f) => f())
+  };
+}
+function ce(e) {
+  if (!e)
+    return !1;
+  let s = !1;
+  const o = {
+    get passive() {
+      return s = !0, !1;
+    }
+  };
+  return e.addEventListener("x", I, o), e.removeEventListener("x", I), s;
+}
+export {
+  pe as breakpointsTailwind,
+  Se as createFilterWrapper,
+  Oe as debounceFilter,
+  $ as defaultWindow,
+  U as increaseWithUnit,
+  Q as isClient,
+  G as isIOS,
+  I as noop,
+  ve as onClickOutside,
+  xe as throttleFilter,
+  J as toRef,
+  A as toValue,
+  W as tryOnScopeDispose,
+  S as unrefElement,
+  me as useBreakpoints,
+  K as useDebounceFn,
+  be as useElementSize,
+  x as useEventListener,
+  B as useMediaQuery,
+  ne as useMounted,
+  he as useMutationObserver,
+  ae as useResizeObserver,
+  we as useScroll,
+  k as useSupported,
+  ye as useSwipe,
+  N as useThrottleFn
+};

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.8.4";
+declare const _default: "1.9.1";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.8.4";
+const e = "1.9.1";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.8.4",
+  "version": "1.9.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -45,7 +45,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
-    "vue": "^3.0.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@indielayer/stylelint-config": "^1.0.0",
@@ -74,7 +74,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vitest": "^0.32.2",
-    "vue": "^3.3.9",
+    "vue": "^3.5.0",
     "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },

package/src/components/select/Select.vue

@@ -14,6 +14,17 @@ const selectProps = {
     type: String,
     default: 'Filter by...',
   },
+  virtualList: Boolean,
+  virtualListOffsetTop: Number,
+  virtualListOffsetBottom: Number,
+  virtualListItemHeight: {
+    type: Number,
+    default: 33,
+  },
+  virtualListOverscan: {
+    type: Number,
+    default: 5,
+  },
 }
 
 export type SelectOption = {
@@ -44,6 +55,7 @@ import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useVirtualList } from '../../composables/useVirtualList'
 import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
@@ -113,6 +125,17 @@ const internalOptions = computed(() => {
 
 const availableOptions = computed(() => internalOptions.value.filter((option) => !option.disabled))
 
+const { list, scrollTo: scrollToVirtualList, containerProps, wrapperProps } = useVirtualList(
+  internalOptions,
+  {
+    disabled: !props.virtualList,
+    itemHeight: props.virtualListItemHeight,
+    topOffset: props.virtualListOffsetTop || 0,
+    bottomOffset: props.virtualListOffsetBottom || 0,
+    overscan: props.virtualListOverscan,
+  },
+)
+
 const isOpen = computed(() => popoverRef.value?.isOpen)
 
 watch(filter, (val) => {
@@ -158,7 +181,8 @@ function findSelectedIndex() {
 }
 
 function scrollToIndex(index: number) {
-  if (itemsRef.value) itemsRef.value[index]?.$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  if (props.virtualList) scrollToVirtualList(index)
+  else if (itemsRef.value) itemsRef.value[index]?.$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
 watch(selectedIndex, (index) => {
@@ -419,7 +443,9 @@ defineExpose({ focus, blur, reset, validate, setError })
         </div>
 
         <template #content>
-          <x-popover-container :class="classes.content">
+          <x-popover-container
+            :class="classes.content"
+          >
             <slot name="content-header">
               <div v-if="filterable" :class="classes.search">
                 <x-input
@@ -431,22 +457,24 @@ defineExpose({ focus, blur, reset, validate, setError })
                 />
               </div>
             </slot>
-            <div v-if="internalOptions.length > 0" :class="classes.contentBody">
-              <x-menu-item
-                v-for="(item, index) in internalOptions"
-                :key="index"
-                ref="itemsRef"
-                :item="item"
-                :size="size"
-                :disabled="item.disabled"
-                :selected="index === selectedIndex"
-                :color="color"
-                filled
-                @click="() => !multiple && popoverRef?.hide()"
-              />
-            </div>
-            <div v-else class="px-2 text-center text-secondary-400">
-              No options
+            <div v-bind="containerProps" :class="classes.contentBody">
+              <div v-bind="wrapperProps">
+                <x-menu-item
+                  v-for="item in list"
+                  :key="item.index"
+                  ref="itemsRef"
+                  :item="item.data"
+                  :size="size"
+                  :disabled="item.data.disabled"
+                  :selected="item.index === selectedIndex"
+                  :color="color"
+                  filled
+                  @click="() => !multiple && popoverRef?.hide()"
+                />
+              </div>
+              <div v-if="list.length === 0" class="p-2 text-center text-secondary-400">
+                No options
+              </div>
             </div>
             <slot name="content-footer"></slot>
           </x-popover-container>
@@ -465,14 +493,16 @@ defineExpose({ focus, blur, reset, validate, setError })
         :readonly="readonly"
         v-on="inputListeners"
       >
-        <option
-          v-for="(option, index) in options"
-          :key="index"
-          :value="option.value"
-          :disabled="option.disabled"
-        >
-          {{ option.label }}
-        </option>
+        <template v-if="native">
+          <option
+            v-for="(option, index) in options"
+            :key="index"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ option.label }}
+          </option>
+        </template>
       </select>
 
       <div :class="classes.iconWrapper">

package/src/components/select/theme/Select.base.theme.ts

@@ -31,7 +31,7 @@ const theme: SelectTheme = {
 
     search: 'p-1 mb-0.5',
 
-    contentBody: 'overflow-y-auto max-h-64',
+    contentBody: 'overflow-y-auto max-h-64 min-w-[280px]',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',