@onereach/ui-components-common 21.5.0 → 21.5.2

package/dist/directives/dropdown-close.d.ts

@@ -1,4 +1,5 @@
 import { DirectiveHook } from 'vue';
 export declare const DropdownClose: {
-    [x: string]: DirectiveHook;
+    created: DirectiveHook;
+    bind: DirectiveHook;
 };

package/dist/directives/dropdown-open.d.ts

@@ -1,4 +1,5 @@
 import { DirectiveHook } from 'vue';
 export declare const DropdownOpen: {
-    [x: string]: DirectiveHook;
+    created: DirectiveHook;
+    bind: DirectiveHook;
 };

package/dist/directives.js

@@ -1,5 +1,21 @@
-import { D as r, a } from "./dropdown-open-k6cFnrqA.js";
+const o = (d, n) => {
+  d.addEventListener("keydown", (e) => {
+    ["Escape"].includes(e.key) && n.value(e);
+  });
+}, a = {
+  created: o,
+  bind: o
+}, t = (d, n) => {
+  d.addEventListener("keydown", (e) => {
+    ["Enter", " "].includes(e.key) && n.value(e);
+  }), d.addEventListener("click", (e) => {
+    e.stopPropagation(), e.preventDefault(), n.value(e);
+  });
+}, c = {
+  created: t,
+  bind: t
+};
 export {
-  r as DropdownClose,
-  a as DropdownOpen
+  a as DropdownClose,
+  c as DropdownOpen
 };

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-BpeWsfb0.js";
+import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-C9_kxaDj.js";
 export {
   a as useControlAttributes,
   u as useDateFormat,

package/dist/index.js

@@ -1,6 +1,6 @@
-import { D as _, a as s } from "./dropdown-open-k6cFnrqA.js";
+import { DropdownClose as _, DropdownOpen as s } from "./directives.js";
 import { getItemByValue as T, getItemsByValue as a, searchItemsByLabel as t } from "./helpers.js";
-import { D as o, L as A, T as O, a as C, b as D, c as i, d as S, e as N, f as X, g as P, h as L, i as m, j as u, k as l, l as n, m as M, u as I, n as g } from "./useValidationAttributes-BpeWsfb0.js";
+import { D as o, L as A, T as O, a as C, b as D, c as i, d as S, e as N, f as X, g as P, h as L, i as m, j as u, k as l, l as n, m as M, u as I, n as g } from "./useValidationAttributes-C9_kxaDj.js";
 import { D as H, T as F } from "./TimeFormat-CdFMIbra.js";
 import { Spacing as f } from "./types.js";
 import { CODE_BACKSPACE as b, CODE_BREAK as d, CODE_DELETE as G, CODE_DOWN as c, CODE_END as U, CODE_ENTER as V, CODE_ESC as y, CODE_HOME as h, CODE_LEFT as v, CODE_PAGEDOWN as W, CODE_PAGEUP as k, CODE_RIGHT as w, CODE_SPACE as K, CODE_UP as Y, HSL_LIMITS as j, PLACEMENT_BOTTOM_END as q, PLACEMENT_BOTTOM_START as z, PLACEMENT_LEFT_END as Q, PLACEMENT_LEFT_START as J, PLACEMENT_RIGHT_END as Z, PLACEMENT_RIGHT_START as $, PLACEMENT_TOP_END as ee, PLACEMENT_TOP_START as Ee, RX_ABBREVIATION_FROM_STRING as _e, RX_ARRAY_NOTATION as se, RX_BV_PREFIX as Re, RX_DATE as Te, RX_DATE_SPLIT as ae, RX_DIGITS as te, RX_ENCODED_COMMA as re, RX_ENCODE_REVERSE as oe, RX_EXTENSION as Ae, RX_HASH as Oe, RX_HASH_ID as Ce, RX_HREF as De, RX_HTML_TAGS as ie, RX_HYPHENATE as Se, RX_LONG_COLOR as Ne, RX_LOWER_UPPER as Xe, RX_NUMBER as Pe, RX_PLUS as Le, RX_QUERY_START as me, RX_REGEXP_REPLACE as ue, RX_SHORT_COLOR as le, RX_SPACES as ne, RX_SPACE_SPLIT as Me, RX_STAR as Ie, RX_START_SPACE_WORD as ge, RX_TIME as pe, RX_TRIM_LEFT as He, RX_TRIM_RIGHT as Fe, RX_UNDERSCORE as xe, RX_UN_KEBAB as fe, exclude as Be, extractCssVarName as be, flattenDeep as de, generateColorFromString as Ge, generateHslFromString as ce, getAbbreviation as Ue, getHashOfString as Ve, hexToRgb as ye, hslToColorString as he, include as ve, isAncestor as We, isArray as ke, isDescendant as we, isEmpty as Ke, isEqual as Ye, isNil as je, isNull as qe, isNumber as ze, isObject as Qe, isString as Je, normalize as Ze, pxToRem as $e, rgbToHex as eE, toArray as EE } from "./utils.js";

package/dist/{useValidationAttributes-BpeWsfb0.js → useValidationAttributes-C9_kxaDj.js}

@@ -1,19 +1,18 @@
-import { useAttrs as h, computed as u, inject as g, isRef as p, ref as c, watch as v, getCurrentInstance as M, onMounted as R } from "vue";
+import { useAttrs as h, computed as u, inject as g, isRef as p, ref as c, watch as f, getCurrentInstance as M, onMounted as R } from "vue";
 import { D as x, T as b } from "./TimeFormat-CdFMIbra.js";
 import { r as C } from "./dom-qGGG2YCX.js";
 import { g as E } from "./getPageElevations-BuZyM94T.js";
 import { useMutationObserver as $, useResizeObserver as F, refDebounced as S, useMediaQuery as P } from "@vueuse/core";
 import O from "@onereach/styles/screens.json";
-import { isVue3 as Y } from "@/constants";
-import L from "@onereach/styles/tailwind.config.json";
-const k = () => {
+import Y from "@onereach/styles/tailwind.config.json";
+const Z = () => {
   const e = h();
   return {
     readonly: u(() => e.readonly),
     disabled: u(() => e.disabled),
     "force-state": u(() => e["force-state"])
   };
-}, V = Symbol(), U = Symbol(), q = Symbol(), G = (e) => u(() => e.value ?? g(V, x.Short)), J = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+}, L = Symbol(), U = Symbol(), V = Symbol(), _ = (e) => u(() => e.value ?? g(L, x.Short)), k = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
   dateStyle: e.value,
   timeZone: "UTC"
 }).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
@@ -36,55 +35,55 @@ const k = () => {
     default:
       return r + n.value;
   }
-}, "") : e.value(void 0, t.value)), K = (e, t) => {
+}, "") : e.value(void 0, t.value)), G = (e, t) => {
   const s = p(e) ? e : c(e), r = p(t) ? t : c();
-  function n(a) {
-    a.style.zIndex = String(Math.max(0, ...E(a)) + 1);
+  function n(i) {
+    i.style.zIndex = String(Math.max(0, ...E(i)) + 1);
   }
-  v([s, r], ([a]) => {
-    a && n(a);
+  f([s, r], ([i]) => {
+    i && n(i);
   }, { immediate: !0 });
-}, N = () => {
+}, J = () => {
   const e = h(), t = M();
   return u(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
-}, X = (e) => u(() => e.value ?? g(U, navigator.language)), ee = (e, t = {}) => {
-  const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), a = c([]), l = c([]);
-  function o() {
-    const i = n.value;
-    if (i) {
-      const d = [...i.children].reduce(({ innerItems: m, outerItems: y }, T) => {
-        const f = T, { x: D, width: I } = f.getBoundingClientRect(), { x: w, width: A } = i.getBoundingClientRect();
-        return D + I > w + A + r ? (s && f.style.setProperty("visibility", "hidden"), {
+}, K = (e) => u(() => e.value ?? g(U, navigator.language)), N = (e, t = {}) => {
+  const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), i = c([]), l = c([]);
+  function a() {
+    const o = n.value;
+    if (o) {
+      const d = [...o.children].reduce(({ innerItems: m, outerItems: y }, T) => {
+        const v = T, { x: D, width: I } = v.getBoundingClientRect(), { x: w, width: A } = o.getBoundingClientRect();
+        return D + I > w + A + r ? (s && v.style.setProperty("visibility", "hidden"), {
           innerItems: m,
-          outerItems: [...y, f]
-        }) : (s && f.style.removeProperty("visibility"), {
-          innerItems: [...m, f],
+          outerItems: [...y, v]
+        }) : (s && v.style.removeProperty("visibility"), {
+          innerItems: [...m, v],
           outerItems: y
         });
       }, {
         innerItems: [],
         outerItems: []
       });
-      a.value = d.innerItems, l.value = d.outerItems;
+      i.value = d.innerItems, l.value = d.outerItems;
     } else
-      a.value = [], l.value = [];
+      i.value = [], l.value = [];
   }
-  return v(n, o, {
+  return f(n, a, {
     immediate: !0
-  }), $(n, o, {
+  }), $(n, a, {
     childList: !0
-  }), F(n, () => C(o)), {
-    innerItems: a,
+  }), F(n, () => C(a)), {
+    innerItems: i,
     outerItems: l
   };
-}, te = (e, t, s = {}) => {
+}, X = (e, t, s = {}) => {
   const r = c(e.value ? "open" : "closed");
-  v(e, (i) => {
-    r.value = i ? "open" : "closed";
+  f(e, (o) => {
+    r.value = o ? "open" : "closed";
   });
   const n = S(r, s.debounce ?? 0);
-  v(n, (i) => {
-    switch (t("update:state", i), i) {
+  f(n, (o) => {
+    switch (t("update:state", o), o) {
       case "open":
         t("open");
         break;
@@ -93,23 +92,23 @@ const k = () => {
         break;
     }
   });
-  function a() {
+  function i() {
     r.value = "open";
   }
   function l() {
     r.value = "closed";
   }
-  function o() {
+  function a() {
     r.value = r.value === "open" ? "closed" : "open";
   }
   return {
     state: n,
-    open: a,
+    open: i,
     close: l,
-    toggle: o
+    toggle: a
   };
 };
-function re(e, t, s = {}) {
+function ee(e, t, s = {}) {
   const { defaultValue: r } = s;
   return r ? u({
     get: () => e.value ?? r.value,
@@ -123,30 +122,30 @@ function re(e, t, s = {}) {
     }
   });
 }
-function ne(e) {
+function te(e) {
   const t = M(), s = c();
-  e ? v(e, (o) => {
-    s.value = o;
+  e ? f(e, (a) => {
+    s.value = a;
   }) : R(() => {
     if (t) {
-      const o = t.vnode[Y ? "el" : "elm"];
+      const a = t.vnode, o = a.el || a.elm;
       o instanceof Element && (s.value = o);
     }
   });
-  const r = u(() => l(s.value) || a.value), n = u(() => !r.value), a = P(`(min-width: ${O.md})`);
-  function l(o) {
+  const r = u(() => l(s.value) || i.value), n = u(() => !r.value), i = P(`(min-width: ${O.md})`);
+  function l(a) {
     var d;
-    if (!o)
+    if (!a)
       return !1;
-    const i = (d = o.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
-    return i != null && i.some((m) => ["md", "lg", "xl"].includes(m)) ? !0 : l(o.parentElement ?? void 0);
+    const o = (d = a.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
+    return o != null && o.some((m) => ["md", "lg", "xl"].includes(m)) ? !0 : l(a.parentElement ?? void 0);
   }
   return {
     isDesktop: r,
     isMobile: n
   };
 }
-const ue = () => L.theme, se = (e) => u(() => e.value ?? g(q, b.Auto)), oe = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+const re = () => Y.theme, ne = (e) => u(() => e.value ?? g(V, b.Auto)), ue = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
   timeStyle: "short",
   hourCycle: e.value !== b.Auto ? e.value : void 0,
   timeZone: "UTC"
@@ -162,7 +161,7 @@ const ue = () => L.theme, se = (e) => u(() => e.value ?? g(q, b.Auto)), oe = (e,
       return r + n.value;
   }
 }, "") : e.value(void 0, t.value));
-function ae(e = !1) {
+function se(e = !1) {
   const t = c(e);
   function s() {
     t.value = !0;
@@ -180,7 +179,7 @@ function ae(e = !1) {
     toggle: n
   };
 }
-const ie = () => {
+const oe = () => {
   const e = h();
   return {
     required: u(() => e.required),
@@ -193,22 +192,22 @@ const ie = () => {
   };
 };
 export {
-  V as D,
+  L as D,
   U as L,
-  q as T,
-  k as a,
-  G as b,
-  J as c,
-  K as d,
-  N as e,
-  X as f,
-  ee as g,
-  te as h,
-  re as i,
-  ne as j,
-  ue as k,
-  se as l,
-  oe as m,
-  ie as n,
-  ae as u
+  V as T,
+  Z as a,
+  _ as b,
+  k as c,
+  G as d,
+  J as e,
+  K as f,
+  N as g,
+  X as h,
+  ee as i,
+  te as j,
+  re as k,
+  ne as l,
+  ue as m,
+  oe as n,
+  se as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-common",
-  "version": "21.5.0",
+  "version": "21.5.2",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
@@ -59,7 +59,7 @@
     "dev": "vite build --watch"
   },
   "dependencies": {
-    "@onereach/styles": "^21.5.0",
+    "@onereach/styles": "^21.5.2",
     "@vueuse/core": "9.13.0"
   },
   "devDependencies": {
@@ -70,5 +70,5 @@
   "peerDependencies": {
     "vue": "3.3.4 || 2.6.14"
   },
-  "gitHead": "d61e2dc2eff47fc993e8e2fd863fa1199d38bc0d"
+  "gitHead": "13fdf07a7d669cb6998d43e7d973486b0f1d2c4b"
 }

package/src/directives/dropdown-close.ts

@@ -1,5 +1,4 @@
 import { DirectiveBinding, DirectiveHook } from 'vue';
-import { isVue3 } from '@/constants';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
@@ -10,5 +9,6 @@ const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<
 };
 
 export const DropdownClose = {
-  [isVue3 ? 'created' : 'bind']: created,
+  'created': created,
+  'bind': created,
 };

package/src/directives/dropdown-open.ts

@@ -1,5 +1,4 @@
 import { DirectiveBinding, DirectiveHook } from 'vue';
-import { isVue3 } from '@/constants';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
@@ -17,5 +16,6 @@ const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<
 };
 
 export const DropdownOpen = {
-  [isVue3 ? 'created' : 'bind']: created,
+  'created': created,
+  'bind': created,
 };

package/src/hooks/useResponsive/useResponsive.ts

@@ -1,7 +1,6 @@
 import screens from '@onereach/styles/screens.json';
 import { useMediaQuery } from '@vueuse/core';
 import { Ref, computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
-import { isVue3 } from '@/constants';
 
 function useResponsive(element?: Ref<Element | undefined>) {
   const currentInstance = getCurrentInstance();
@@ -14,7 +13,8 @@ function useResponsive(element?: Ref<Element | undefined>) {
   } else {
     onMounted(() => {
       if (currentInstance) {
-        const element = (currentInstance.vnode as any)[isVue3 ? 'el' : 'elm'] as unknown;
+        const vnode = (currentInstance.vnode as any);
+        const element = (vnode.el || vnode.elm) as unknown;
 
         if (element instanceof Element) {
           currentRootElement.value = element as Element;

package/dist/dropdown-open-k6cFnrqA.js

@@ -1,20 +0,0 @@
-import { isVue3 as o } from "@/constants";
-const t = (a, d) => {
-  a.addEventListener("keydown", (e) => {
-    ["Escape"].includes(e.key) && d.value(e);
-  });
-}, s = {
-  [o ? "created" : "bind"]: t
-}, n = (a, d) => {
-  a.addEventListener("keydown", (e) => {
-    ["Enter", " "].includes(e.key) && d.value(e);
-  }), a.addEventListener("click", (e) => {
-    e.stopPropagation(), e.preventDefault(), d.value(e);
-  });
-}, c = {
-  [o ? "created" : "bind"]: n
-};
-export {
-  s as D,
-  c as a
-};