@onereach/ui-components-common 19.3.0-beta.5083.0

package/dist/utils/include.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns a copy of the `items` array, including the `value`.
+ */
+export declare const include: <T>(value: T, items: T[]) => T[];

package/dist/utils/index.d.ts

@@ -0,0 +1,26 @@
+export * from './constants/color';
+export * from './constants/key-codes';
+export * from './constants/poper';
+export * from './constants/regex';
+export * from './exclude';
+export * from './functions/color';
+export * from './functions/dom';
+export * from './functions/flattenDeep';
+export * from './functions/hash';
+export * from './functions/px-to-rem';
+export * from './functions/text';
+export * from './include';
+export * from './isAncestor';
+export * from './isArray';
+export * from './isDescendant';
+export * from './isEmpty';
+export * from './isEqual';
+export * from './isNil';
+export * from './isNull';
+export * from './isNumber';
+export * from './isObject';
+export * from './isString';
+export * from './isUndefined';
+export * from './isVisible';
+export * from './toArray';
+export * from './extractCssVarName';

package/dist/utils/isAncestor.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the element `a` is an ancestor of the element `b`.
+ */
+export declare const isAncestor: (a: Element, b: Element) => boolean;

package/dist/utils/isArray.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is an array literal.
+ */
+export declare const isArray: (value: unknown) => value is unknown[];

package/dist/utils/isDescendant.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the element `a` is a descendant of the element `b`.
+ */
+export declare const isDescendant: (a: Element, b: Element) => boolean;

package/dist/utils/isEmpty.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is an empty object, an empty array, a zero-length string, `null`, or `undefined`.
+ */
+export declare const isEmpty: (value: unknown) => boolean;

package/dist/utils/isEqual.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether `a` and `b` are the same value (makes shallow comparison of arrays and objects).
+ */
+export declare const isEqual: (a: unknown, b: unknown) => boolean;

package/dist/utils/isNil.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is `null` or `undefined`.
+ */
+export declare const isNil: (value: unknown) => value is null | undefined;

package/dist/utils/isNull.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is `null`.
+ */
+export declare const isNull: (value: unknown) => value is null;

package/dist/utils/isNumber.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is a number.
+ */
+export declare const isNumber: (value: unknown) => value is number;

package/dist/utils/isObject.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is an object literal.
+ */
+export declare const isObject: (value: unknown) => value is Record<PropertyKey, unknown>;

package/dist/utils/isString.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is a string.
+ */
+export declare const isString: (value: unknown) => value is string;

package/dist/utils/isUndefined.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determines whether the `value` is `undefined`.
+ */
+export declare const isUndefined: (value: unknown) => value is undefined;

package/dist/utils/isVisible.d.ts

@@ -0,0 +1 @@
+export declare const isVisible: (element: Element) => boolean;

package/dist/utils/toArray.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Converts the `value` to an array literal.
+ */
+export declare const toArray: <T>(value: T | T[]) => T[];

package/dist/utils.js

@@ -0,0 +1,109 @@
+import { C as E, a as _, b as R, c as e, d as T, e as t, f as A, g as C, h as O, i as r, j as S, k as o, l as N, m as i, H as D, p as X, o as P, t as l, s as L, r as n, q as M, n as I, P as g, Q as H, R as m, u as c, S as d, T as f, v as B, W as x, X as F, w as G, x as b, y as p, V as U, z as u, A as h, _ as y, B as v, D as V, E as W, Y as j, F as q, Z as K, G as Y, I as k, J as w, K as z, U as Q, L as Z, M as J, N as $, O as aa, $ as sa, am as Ea, a5 as _a, a4 as Ra, a2 as ea, a9 as Ta, a6 as ta, a0 as Aa, a3 as Ca, aa as Oa, ab as ra, ac as Sa, ad as oa, ae as Na, af as ia, ag as Da, ah as Xa, ai as Pa, aj as la, ak as La, a7 as na, a8 as Ma, a1 as Ia, al as ga } from "./extractCssVarName-IHa2pGlF.js";
+import { M as ma, f as ca, c as da, e as fa, l as Ba, q as xa, g as Fa, t as Ga, w as ba, p as pa, m as Ua, i as ua, u as ha, v as ya, b as va, k as Va, h as Wa, a as ja, o as qa, r as Ka, d as Ya, s as ka, j as wa, n as za } from "./dom-CwV-xS38.js";
+import { i as Za } from "./isUndefined-B5qXrATz.js";
+import { i as $a } from "./isVisible-BuGrjvTY.js";
+export {
+  E as CODE_BACKSPACE,
+  _ as CODE_BREAK,
+  R as CODE_DELETE,
+  e as CODE_DOWN,
+  T as CODE_END,
+  t as CODE_ENTER,
+  A as CODE_ESC,
+  C as CODE_HOME,
+  O as CODE_LEFT,
+  r as CODE_PAGEDOWN,
+  S as CODE_PAGEUP,
+  o as CODE_RIGHT,
+  N as CODE_SPACE,
+  i as CODE_UP,
+  D as HSL_LIMITS,
+  ma as MutationObs,
+  X as PLACEMENT_BOTTOM_END,
+  P as PLACEMENT_BOTTOM_START,
+  l as PLACEMENT_LEFT_END,
+  L as PLACEMENT_LEFT_START,
+  n as PLACEMENT_RIGHT_END,
+  M as PLACEMENT_RIGHT_START,
+  I as PLACEMENT_TOP_END,
+  g as PLACEMENT_TOP_START,
+  H as RX_ABBREVIATION_FROM_STRING,
+  m as RX_ARRAY_NOTATION,
+  c as RX_BV_PREFIX,
+  d as RX_DATE,
+  f as RX_DATE_SPLIT,
+  B as RX_DIGITS,
+  x as RX_ENCODED_COMMA,
+  F as RX_ENCODE_REVERSE,
+  G as RX_EXTENSION,
+  b as RX_HASH,
+  p as RX_HASH_ID,
+  U as RX_HREF,
+  u as RX_HTML_TAGS,
+  h as RX_HYPHENATE,
+  y as RX_LONG_COLOR,
+  v as RX_LOWER_UPPER,
+  V as RX_NUMBER,
+  W as RX_PLUS,
+  j as RX_QUERY_START,
+  q as RX_REGEXP_REPLACE,
+  K as RX_SHORT_COLOR,
+  Y as RX_SPACES,
+  k as RX_SPACE_SPLIT,
+  w as RX_STAR,
+  z as RX_START_SPACE_WORD,
+  Q as RX_TIME,
+  Z as RX_TRIM_LEFT,
+  J as RX_TRIM_RIGHT,
+  $ as RX_UNDERSCORE,
+  aa as RX_UN_KEBAB,
+  ca as addClass,
+  da as cancelAF,
+  fa as contains,
+  sa as exclude,
+  Ea as extractCssVarName,
+  _a as flattenDeep,
+  Ra as generateColorFromString,
+  ea as generateHslFromString,
+  Ta as getAbbreviation,
+  Ba as getAttr,
+  xa as getBCR,
+  Fa as getById,
+  Ga as getCS,
+  ta as getHashOfString,
+  ba as getMaxZIndex,
+  pa as getStyle,
+  Ua as hasAttr,
+  ua as hasClass,
+  Aa as hexToRgb,
+  Ca as hslToColorString,
+  Oa as include,
+  ra as isAncestor,
+  Sa as isArray,
+  oa as isDescendant,
+  Na as isEmpty,
+  ia as isEqual,
+  Da as isNil,
+  Xa as isNull,
+  Pa as isNumber,
+  la as isObject,
+  La as isString,
+  Za as isUndefined,
+  $a as isVisible,
+  na as normalize,
+  ha as offset,
+  ya as position,
+  Ma as pxToRem,
+  va as reflow,
+  Va as removeAttr,
+  Wa as removeClass,
+  ja as removeNode,
+  qa as removeStyle,
+  Ka as requestAF,
+  Ia as rgbToHex,
+  Ya as select,
+  ka as selectAll,
+  wa as setAttr,
+  za as setStyle,
+  ga as toArray
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@onereach/ui-components-common",
+  "version": "19.3.0-beta.5083.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./src/": "./src/",
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils.js",
+      "default": "./dist/utils.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types.js",
+      "default": "./dist/types.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks.js",
+      "default": "./dist/hooks.js"
+    },
+    "./helpers": {
+      "types": "./dist/helpers/index.d.ts",
+      "import": "./dist/helpers.js",
+      "default": "./dist/helpers.js"
+    },
+    "./directives": {
+      "types": "./dist/directives/index.d.ts",
+      "import": "./dist/directives.js",
+      "default": "./dist/directives.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens.js",
+      "default": "./dist/tokens.js"
+    },
+    "./assets": {
+      "types": "./dist/assets/index.d.ts",
+      "import": "./dist/assets.js",
+      "default": "./dist/assets.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "./shims.d.ts",
+    "./tsconfig.components.json"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@onereach/styles": "19.1.2",
+    "@vueuse/core": "9.13.0",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.0",
+    "rollup-plugin-node-externals": "6.1.2",
+    "vite": "^5.2.3",
+    "vite-plugin-dts": "3.7.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.5 || 2.6.14"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  }
+}

package/src/assets/index.ts

@@ -0,0 +1,2 @@
+export { default as success } from './success.png';
+export { default as error } from './error.png';

package/src/directives/dropdown-close.ts

@@ -0,0 +1,14 @@
+import { DirectiveBinding, DirectiveHook } from 'vue';
+import { isVue3 } from '@/constants';
+
+const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
+  element.addEventListener('keydown', (event) => {
+    if (['Escape'].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+};
+
+export const DropdownClose = {
+  [isVue3 ? 'created' : 'bind']: created,
+};

package/src/directives/dropdown-open.ts

@@ -0,0 +1,21 @@
+import { DirectiveBinding, DirectiveHook } from 'vue';
+import { isVue3 } from '@/constants';
+
+const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
+  element.addEventListener('keydown', (event) => {
+    if (['Enter', ' '].includes(event.key)) {
+      binding.value(event);
+    }
+  });
+
+  element.addEventListener('click', (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    binding.value(event);
+  });
+};
+
+export const DropdownOpen = {
+  [isVue3 ? 'created' : 'bind']: created,
+};

package/src/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-close';
+export * from './dropdown-open';

package/src/helpers/getItemByValue.ts

@@ -0,0 +1,12 @@
+import { Item } from '../types';
+import { isUndefined } from '../utils';
+
+export const getItemByValue = <T, E extends Item<T>>(value: T, items: E[]): E => {
+  const item = items.find((item) => value === item.value);
+
+  if (isUndefined(item)) {
+    throw new Error('[getItemByValue]: Item not found.');
+  }
+
+  return item;
+};

package/src/helpers/getItemsByValue.ts

@@ -0,0 +1,6 @@
+import { getItemByValue } from '.';
+import { Item } from '../types';
+
+export const getItemsByValue = <T, E extends Item<T>>(value: T[], items: E[]): E[] => {
+  return value.map((value) => getItemByValue(value, items));
+};

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './getItemByValue';
+export * from './getItemsByValue';
+export * from './searchItemsByLabel';

package/src/helpers/searchItemsByLabel.ts

@@ -0,0 +1,5 @@
+import { Item } from '../types';
+
+export const searchItemsByLabel = async <T, E extends Item<T>>(value: string, items: E[]): Promise<E[]> => {
+  return items.filter((item) => new RegExp(value, 'i').test(item.label));
+};

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+export * from './useControlAttributes';
+export * from './useDateFormat';
+export * from './useDateMask';
+export * from './useElevation';
+export * from './useIdAttribute';
+export * from './useLocale';
+export * from './useOverflow';
+export * from './usePopoverState';
+export * from './useProxyModelValue';
+export * from './useResponsive';
+export * from './useTheme';
+export * from './useTimeFormat';
+export * from './useTimeMask';
+export { default as useToggle } from './useToggle';
+export * from './useValidationAttributes';

package/src/hooks/useControlAttributes.ts

@@ -0,0 +1,19 @@
+import { computed, ComputedRef, useAttrs } from 'vue';
+
+export type UseControlAttributesReturn = {
+  readonly: ComputedRef<boolean | undefined>;
+  disabled: ComputedRef<boolean | undefined>;
+
+  'force-state': ComputedRef<string | undefined>;
+};
+
+export const useControlAttributes = (): UseControlAttributesReturn => {
+  const attributes = useAttrs();
+
+  return {
+    readonly: computed(() => attributes['readonly'] as boolean | undefined),
+    disabled: computed(() => attributes['disabled'] as boolean | undefined),
+
+    'force-state': computed(() => attributes['force-state'] as string | undefined),
+  };
+};

package/src/hooks/useDateFormat.ts

@@ -0,0 +1,13 @@
+import { ComputedRef, Ref, computed, inject } from 'vue';
+import { DATE_FORMAT } from '../tokens';
+import { DateFormat, FormatFunction, ModelValue } from '../types';
+
+export type UseDateFormatReturn = ComputedRef<`${DateFormat}` | FormatFunction<ModelValue<Date>>>;
+
+export const useDateFormat = (
+  format: Ref<`${DateFormat}` | FormatFunction<ModelValue<Date>> | undefined>
+): UseDateFormatReturn => {
+  return computed(() => {
+    return format.value ?? inject(DATE_FORMAT, DateFormat.Short);
+  });
+};

package/src/hooks/useDateMask.ts

@@ -0,0 +1,54 @@
+import { ComputedRef, Ref, computed } from 'vue';
+import { DateFormat, FormatFunction, Locale, ModelValue } from '../types';
+
+export type UseDateMaskReturn = ComputedRef<string>;
+
+export const useDateMask = (
+  format: Ref<`${DateFormat}` | FormatFunction<ModelValue<Date>>>,
+  locale: Ref<`${Locale}`>
+): UseDateMaskReturn => {
+  return computed(() => {
+    if (typeof format.value !== 'function') {
+      const formatter = new Intl.DateTimeFormat(locale.value, {
+        dateStyle: format.value,
+        timeZone: 'UTC',
+      });
+
+      return formatter.formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((mask, part) => {
+        switch (part.type) {
+          case 'year':
+            return mask + part.value
+              .replace(/^\d{2}$/, 'YY')
+              .replace(/^\d{4}$/, 'YYYY');
+
+          case 'month':
+            switch (format.value) {
+              case 'short':
+                return mask + part.value
+                  .replace(/^\d{1}$/, 'M')
+                  .replace(/^\d{2}$/, 'MM');
+
+              case 'medium':
+                return mask + 'MMM';
+
+              case 'long':
+                return mask + 'MMMM';
+
+              default:
+                throw new Error('[useDateMask]: `format` has an invalid value.');
+            }
+
+          case 'day':
+            return mask + part.value
+              .replace(/^\d{1}$/, 'D')
+              .replace(/^\d{2}$/, 'DD');
+
+          default:
+            return mask + part.value;
+        }
+      }, '');
+    }
+
+    return format.value(undefined, locale.value);
+  });
+};

package/src/hooks/useElevation.ts

@@ -0,0 +1,32 @@
+import { MaybeElementRef } from '@vueuse/core';
+import { isRef, Ref, ref, watch } from 'vue';
+import { isVisible } from '../utils';
+
+export const useElevation = (
+  element: MaybeElementRef<HTMLElement | undefined>,
+  trigger?: Ref<unknown>
+): void => {
+  const elementRef = isRef(element) ? element : ref(element);
+  const triggerRef = isRef(trigger) ? trigger : ref();
+
+  // Functions
+  function getPageElevations(currentElement: HTMLElement): number[] {
+    return ([...document.body.querySelectorAll('*')] as HTMLElement[])
+      .filter(isVisible)
+      .filter(element => !element.isEqualNode(currentElement))
+      .map((element) => getComputedStyle(element))
+      .map((style) => Number(style.zIndex))
+      .filter((zIndex) => !isNaN(zIndex));
+  }
+
+  function setElementElevation(element: HTMLElement): void {
+    element.style.zIndex = String(Math.max(0, ...getPageElevations(element)) + 1);
+  }
+
+  // Effects
+  watch([elementRef, triggerRef], ([element]) => {
+    if (element) {
+      setElementElevation(element as HTMLElement);
+    }
+  }, { immediate: true });
+};

package/src/hooks/useIdAttribute.ts

@@ -0,0 +1,11 @@
+import { computed, ComputedRef, getCurrentInstance, useAttrs } from 'vue';
+
+export type UseIdAttributeReturn = ComputedRef<string | undefined>;
+
+export const useIdAttribute = (): UseIdAttributeReturn => {
+  const attributes = useAttrs(), component = getCurrentInstance();
+
+  return computed(() => {
+    return attributes['id'] as string | undefined ?? component?.uid.toString();
+  });
+};

package/src/hooks/useLocale.ts

@@ -0,0 +1,13 @@
+import { ComputedRef, Ref, computed, inject } from 'vue';
+import { LOCALE } from '../tokens';
+import { Locale } from '../types';
+
+export type UseLocaleReturn = ComputedRef<`${Locale}`>;
+
+export const useLocale = (
+  locale: Ref<`${Locale}` | undefined>
+): UseLocaleReturn => {
+  return computed(() => {
+    return locale.value ?? inject(LOCALE, navigator.language);
+  });
+};

package/src/hooks/useOverflow.ts

@@ -0,0 +1,83 @@
+import { MaybeElementRef, useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { Ref, UnwrapRef, isRef, ref, watch } from 'vue';
+import { requestAF } from '../utils';
+
+export type UseOverflowReturn = {
+  innerItems: Ref<HTMLElement[]>;
+  outerItems: Ref<HTMLElement[]>;
+};
+
+export interface UseOverflowOptions {
+  hide?: boolean;
+  threshold?: number;
+}
+export const useOverflow = (
+  container: MaybeElementRef<HTMLElement | undefined>,
+  options: UseOverflowOptions = {},
+): UseOverflowReturn => {
+  const { hide = true, threshold = 0 } = options;
+  const containerRef = isRef(container) ? container : ref(container);
+
+  // State
+  const innerItemsRef = ref<HTMLElement[]>([]);
+  const outerItemsRef = ref<HTMLElement[]>([]);
+
+  // Functions
+  function updateState(): void {
+    const container = containerRef.value;
+
+    if (container) {
+      const update = [...container.children].reduce(({ innerItems, outerItems }, child) => {
+        const item = child as HTMLElement;
+
+        const { x: itemOffset, width: itemWidth } = item.getBoundingClientRect();
+        const { x: containerOffset, width: containerWidth } = container.getBoundingClientRect();
+
+        if (itemOffset + itemWidth > containerOffset + containerWidth + threshold) {
+          if (hide) {
+            item.style.setProperty('visibility', 'hidden');
+          }
+
+          return {
+            innerItems,
+            outerItems: [...outerItems, item],
+          };
+        } else {
+          if (hide) {
+            item.style.removeProperty('visibility');
+          }
+
+          return {
+            innerItems: [...innerItems, item],
+            outerItems,
+          };
+        }
+      }, {
+        innerItems: [],
+        outerItems: [],
+      } as UnwrapRef<UseOverflowReturn>);
+
+      innerItemsRef.value = update.innerItems;
+      outerItemsRef.value = update.outerItems;
+    } else {
+      innerItemsRef.value = [];
+      outerItemsRef.value = [];
+    }
+  }
+
+  // Effects
+  watch(containerRef, updateState, {
+    immediate: true,
+  });
+
+  useMutationObserver(containerRef as Ref, updateState, {
+    childList: true,
+  });
+
+  useResizeObserver(containerRef as Ref, () => requestAF(updateState));
+
+  return {
+    innerItems: innerItemsRef as Ref<HTMLElement[]>,
+    outerItems: outerItemsRef as Ref<HTMLElement[]>,
+  };
+};