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

package/src/hooks/usePopoverState.ts

@@ -0,0 +1,67 @@
+import { refDebounced } from '@vueuse/core';
+import { Ref, ref, watch } from 'vue';
+
+export type UsePopoverStateEmit = (event: 'update:state' | 'open' | 'close', value?: 'open' | 'closed') => void;
+
+export type UsePopoverStateOptions = {
+  debounce?: Ref<number>;
+};
+
+export type UsePopoverStateReturn = {
+  state: Readonly<Ref<'open' | 'closed'>>;
+
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+
+// TODO: Use `defineEmits` after migration to Vue 3
+export const usePopoverState = (
+  isOpen: Ref<boolean>,
+  emit: UsePopoverStateEmit,
+  options: UsePopoverStateOptions = {}
+): UsePopoverStateReturn => {
+  // State
+  const state = ref<'open' | 'closed'>(isOpen.value ? 'open' : 'closed');
+
+  watch(isOpen, (value) => {
+    state.value = value ? 'open' : 'closed';
+  });
+
+  const debouncedState = refDebounced(state, options.debounce ?? 0);
+
+  watch(debouncedState, (value) => {
+    emit('update:state', value);
+
+    switch (value) {
+      case 'open':
+        emit('open');
+        break;
+
+      case 'closed':
+        emit('close');
+        break;
+    }
+  });
+
+  // Methods
+  function open(): void {
+    state.value = 'open';
+  }
+
+  function close(): void {
+    state.value = 'closed';
+  }
+
+  function toggle(): void {
+    state.value = state.value === 'open' ? 'closed' : 'open';
+  }
+
+  return {
+    state: debouncedState,
+
+    open,
+    close,
+    toggle,
+  };
+};

package/src/hooks/useProxyModelValue.ts

@@ -0,0 +1,50 @@
+import { Ref, WritableComputedRef, computed } from 'vue';
+
+export type UseProxyModelValueEmit<T> = (event: 'update:modelValue', value: T) => void;
+
+export type UseProxyModelValueOptions<T> = {
+  defaultValue?: Ref<NonNullable<T>>;
+};
+
+export type UseProxyModelValueReturn<T> = WritableComputedRef<T>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>
+): UseProxyModelValueReturn<T>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>,
+  options: Required<Pick<UseProxyModelValueOptions<T>, 'defaultValue'>>
+): UseProxyModelValueReturn<NonNullable<T>>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>,
+  options: UseProxyModelValueOptions<T> = {}
+): UseProxyModelValueReturn<T> {
+  const { defaultValue } = options;
+
+  if (defaultValue) {
+    return computed({
+      get: () => {
+        return modelValue.value ?? defaultValue.value;
+      },
+
+      set: (value) => {
+        emit('update:modelValue', value);
+      },
+    });
+  }
+
+  return computed({
+    get: () => {
+      return modelValue.value;
+    },
+
+    set: (value) => {
+      emit('update:modelValue', value);
+    },
+  });
+}

package/src/hooks/useResponsive/index.ts

@@ -0,0 +1 @@
+export { default as useResponsive } from './useResponsive';

package/src/hooks/useResponsive/useResponsive.ts

@@ -0,0 +1,58 @@
+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();
+  const currentRootElement = ref<Element>();
+
+  if (element) {
+    watch(element, (value) => {
+      currentRootElement.value = value;
+    });
+  } else {
+    onMounted(() => {
+      if (currentInstance) {
+        const element = (currentInstance.vnode as any)[isVue3 ? 'el' : 'elm'] as unknown;
+
+        if (element instanceof Element) {
+          currentRootElement.value = element as Element;
+        }
+      }
+    });
+  }
+
+  // State
+  const isDesktop = computed(() => {
+    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
+  });
+
+  const isMobile = computed(() => {
+    return !isDesktop.value;
+  });
+
+  const desktopQuery = useMediaQuery(`(min-width: ${screens.md})`);
+
+  // Helpers
+  function isForcedDesktop(element?: Element): boolean {
+    if (!element) {
+      return false;
+    }
+
+    const forcedScreens = element.getAttribute('force-screen')?.split(/\s+/);
+
+    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl'].includes(forcedScreen))) {
+      return true;
+    }
+
+    return isForcedDesktop(element.parentElement ?? undefined);
+  }
+
+  return {
+    isDesktop,
+    isMobile,
+  };
+}
+
+export default useResponsive;

package/src/hooks/useTheme.ts

@@ -0,0 +1,8 @@
+import defaultConfig from '@onereach/styles/tailwind.config.json';
+import { Config } from 'tailwindcss';
+
+export type UseThemeReturn = Record<keyof NonNullable<Config['theme']>, Record<string, string>>;
+
+export const useTheme = (): UseThemeReturn => {
+  return (defaultConfig as unknown as Config).theme as UseThemeReturn;
+};

package/src/hooks/useTimeFormat.ts

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

package/src/hooks/useTimeMask.ts

@@ -0,0 +1,41 @@
+import { ComputedRef, Ref, computed } from 'vue';
+import { FormatFunction, Locale, ModelValue, TimeFormat } from '../types';
+
+export type UseTimeMaskReturn = ComputedRef<string>;
+
+export const useTimeMask = (
+  format: Ref<`${TimeFormat}` | FormatFunction<ModelValue<Date>>>,
+  locale: Ref<`${Locale}`>
+): UseTimeMaskReturn => {
+  return computed(() => {
+    if (typeof format.value !== 'function') {
+      const formatter = new Intl.DateTimeFormat(locale.value, {
+        timeStyle: 'short',
+        hourCycle: format.value !== TimeFormat.Auto ? format.value : undefined,
+        timeZone: 'UTC',
+      });
+
+      return formatter.formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((mask, part) => {
+        switch (part.type) {
+          case 'hour':
+            return mask + part.value
+              .replace(/^\d{1}$/, 'H')
+              .replace(/^\d{2}$/, 'HH');
+
+          case 'minute':
+            return mask + part.value
+              .replace(/^\d{1}$/, 'M')
+              .replace(/^\d{2}$/, 'MM');
+
+          case 'dayPeriod':
+            return mask + 'A';
+
+          default:
+            return mask + part.value;
+        }
+      }, '');
+    }
+
+    return format.value(undefined, locale.value);
+  });
+};

package/src/hooks/useToggle.ts

@@ -0,0 +1,32 @@
+import { ref, Ref } from 'vue';
+
+export type UseToggleReturn = {
+  isActiveToggle: Ref<boolean>;
+
+  show(): void;
+  hide(): void;
+  toggle(): void;
+};
+
+export default function useToggle(defaultValue = false): UseToggleReturn {
+  const isActiveToggle = ref(defaultValue);
+
+  function show(): void {
+    isActiveToggle.value = true;
+  }
+
+  function hide(): void {
+    isActiveToggle.value = false;
+  }
+
+  function toggle(): void {
+    isActiveToggle.value = !isActiveToggle.value;
+  }
+
+  return {
+    isActiveToggle,
+    show,
+    hide,
+    toggle,
+  };
+}

package/src/hooks/useValidationAttributes.ts

@@ -0,0 +1,25 @@
+import { computed, ComputedRef, useAttrs } from 'vue';
+
+export type UseValidationAttributesReturn = {
+  required: ComputedRef<boolean | undefined>;
+  minlength: ComputedRef<number | undefined>;
+  maxlength: ComputedRef<number | undefined>;
+  pattern: ComputedRef<string | undefined>;
+  min: ComputedRef<number | undefined>;
+  max: ComputedRef<number | undefined>;
+  step: ComputedRef<number | undefined>;
+};
+
+export const useValidationAttributes = (): UseValidationAttributesReturn => {
+  const attributes = useAttrs();
+
+  return {
+    required: computed(() => attributes['required'] as boolean | undefined),
+    minlength: computed(() => attributes['minlength'] as number | undefined),
+    maxlength: computed(() => attributes['maxlength'] as number | undefined),
+    pattern: computed(() => attributes['pattern'] as string | undefined),
+    min: computed(() => attributes['min'] as number | undefined),
+    max: computed(() => attributes['max'] as number | undefined),
+    step: computed(() => attributes['step'] as number | undefined),
+  };
+};

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './directives';
+export * from './helpers';
+export * from './tokens';
+export * from './types';
+export * from './hooks';
+export * from './utils';

package/src/tokens/DATE_FORMAT.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { DateFormat } from '../types';
+
+export const DATE_FORMAT: InjectionKey<`${DateFormat}`> = Symbol();

package/src/tokens/LOCALE.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { Locale } from '../types';
+
+export const LOCALE: InjectionKey<`${Locale}`> = Symbol();

package/src/tokens/TIME_FORMAT.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { TimeFormat } from '../types';
+
+export const TIME_FORMAT: InjectionKey<`${TimeFormat}`> = Symbol();

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from './DATE_FORMAT';
+export * from './LOCALE';
+export * from './TIME_FORMAT';

package/src/types/DataModel.ts

@@ -0,0 +1,3 @@
+import { Id } from '.';
+
+export type DataModel<T extends { id: Id; } = { id: Id; }> = T;

package/src/types/DateFormat.ts

@@ -0,0 +1,5 @@
+export enum DateFormat {
+  Short = 'short',
+  Medium = 'medium',
+  Long = 'long',
+}

package/src/types/FilterFunction.ts

@@ -0,0 +1 @@
+export type FilterFunction<T> = (value: T) => boolean;

package/src/types/FormatFunction.ts

@@ -0,0 +1,3 @@
+import { Locale } from '.';
+
+export type FormatFunction<T> = (value: T, locale: Locale) => string;

package/src/types/Group.ts

@@ -0,0 +1,6 @@
+export type Group<T> = {
+  label: string;
+  items: T[];
+
+  disabled?: boolean;
+};

package/src/types/GroupFunction.ts

@@ -0,0 +1 @@
+export type GroupFunction<T> = (value: T) => string;

package/src/types/Id.ts

@@ -0,0 +1 @@
+export type Id = string | number;

package/src/types/Item.ts

@@ -0,0 +1,5 @@
+export type Item<T> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};

package/src/types/Locale.ts

@@ -0,0 +1 @@
+export type Locale = string;

package/src/types/ModelValue.ts

@@ -0,0 +1 @@
+export type ModelValue<T> = T | null | undefined;

package/src/types/SearchFunction.ts

@@ -0,0 +1 @@
+export type SearchFunction<T> = (value: string, items: T[]) => Promise<T[]>;

package/src/types/TimeFormat.ts

@@ -0,0 +1,5 @@
+export enum TimeFormat {
+  Auto = 'auto',
+  H12 = 'h12',
+  H23 = 'h23',
+}

package/src/types/index.ts

@@ -0,0 +1,12 @@
+export * from './DataModel';
+export * from './DateFormat';
+export * from './FilterFunction';
+export * from './FormatFunction';
+export * from './Group';
+export * from './GroupFunction';
+export * from './Id';
+export * from './Item';
+export * from './Locale';
+export * from './ModelValue';
+export * from './SearchFunction';
+export * from './TimeFormat';

package/src/utils/constants/color.ts

@@ -0,0 +1,14 @@
+export const HSL_LIMITS = {
+  h: {
+    min: 0,
+    max: 360,
+  },
+  s: {
+    min: 50,
+    max: 75,
+  },
+  l: {
+    min: 60,
+    max: 80,
+  },
+};

package/src/utils/constants/key-codes.ts

@@ -0,0 +1,14 @@
+export const CODE_BACKSPACE = 8;
+export const CODE_BREAK = 19;
+export const CODE_DELETE = 46;
+export const CODE_DOWN = 40;
+export const CODE_END = 35;
+export const CODE_ENTER = 13;
+export const CODE_ESC = 27;
+export const CODE_HOME = 36;
+export const CODE_LEFT = 37;
+export const CODE_PAGEDOWN = 34;
+export const CODE_PAGEUP = 33;
+export const CODE_RIGHT = 39;
+export const CODE_SPACE = 32;
+export const CODE_UP = 38;

package/src/utils/constants/poper.ts

@@ -0,0 +1,8 @@
+export const PLACEMENT_TOP_START = 'top-start';
+export const PLACEMENT_TOP_END = 'top-end';
+export const PLACEMENT_BOTTOM_START = 'bottom-start';
+export const PLACEMENT_BOTTOM_END = 'bottom-end';
+export const PLACEMENT_RIGHT_START = 'right-start';
+export const PLACEMENT_RIGHT_END = 'right-end';
+export const PLACEMENT_LEFT_START = 'left-start';
+export const PLACEMENT_LEFT_END = 'left-end';

package/src/utils/constants/regex.ts

@@ -0,0 +1,57 @@
+/**
+ *  Generic
+ */
+
+export const RX_ARRAY_NOTATION = /\[(\d+)]/g;
+export const RX_BV_PREFIX = /^(BV?)/;
+export const RX_DIGITS = /^\d+$/;
+export const RX_EXTENSION = /^\..+/;
+export const RX_HASH = /^#/;
+export const RX_HASH_ID = /^#[A-Za-z]+[\w\-:.]*$/;
+export const RX_HTML_TAGS = /(<([^>]+)>)/gi;
+export const RX_HYPHENATE = /\B([A-Z])/g;
+export const RX_LOWER_UPPER = /([a-z])([A-Z])/g;
+export const RX_NUMBER = /^[0-9]*\.?[0-9]+$/;
+export const RX_PLUS = /\+/g;
+export const RX_REGEXP_REPLACE = /[-/\\^$*+?.()|[\]{}]/g;
+export const RX_SPACES = /[\s\uFEFF\xA0]+/g;
+export const RX_SPACE_SPLIT = /\s+/;
+export const RX_STAR = /\/\*$/;
+export const RX_START_SPACE_WORD = /(\s|^)(\w)/g;
+export const RX_TRIM_LEFT = /^\s+/;
+export const RX_TRIM_RIGHT = /\s+$/;
+export const RX_UNDERSCORE = /_/g;
+export const RX_UN_KEBAB = /-(\w)/g;
+export const RX_ABBREVIATION_FROM_STRING = /[\p{Alpha}\p{Nd}]+/gu;
+
+/**
+ *  Date
+ */
+
+// Loose YYYY-MM-DD matching, ignores any appended time inforation
+// Matches '1999-12-20', '1999-1-1', '1999-01-20T22:51:49.118Z', '1999-01-02 13:00:00'
+export const RX_DATE = /^\d+-\d\d?-\d\d?(?:\s|T|$)/;
+
+// Used to split off the date parts of the YYYY-MM-DD string
+export const RX_DATE_SPLIT = /-|\s|T/;
+
+// Time string RegEx (optional seconds)
+export const RX_TIME = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/;
+
+/**
+ *  URL
+ */
+
+// HREFs must end with a hash followed by at least one non-hash character
+export const RX_HREF = /^.*(#[^#]+)$/;
+
+export const RX_ENCODED_COMMA = /%2C/g;
+export const RX_ENCODE_REVERSE = /[!'()*]/g;
+export const RX_QUERY_START = /^(\?|#|&)/;
+
+/**
+ *  Color
+ */
+
+export const RX_SHORT_COLOR = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+export const RX_LONG_COLOR = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

package/src/utils/exclude.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a copy of the `items` array, excluding the `value`.
+ */
+export const exclude = <T>(value: T, items: T[]): typeof items => {
+  return items.filter((item) => item !== value);
+};

package/src/utils/extractCssVarName.ts

@@ -0,0 +1,5 @@
+export function extractCssVarName(string: string): string {
+  return string.replace(/var\((.*)\)/, ($1, $2) => {
+    return $2;
+  });
+}

package/src/utils/functions/color.ts

@@ -0,0 +1,55 @@
+import { RX_SHORT_COLOR, RX_LONG_COLOR } from '../constants/regex';
+import { getHashOfString, normalize } from './hash';
+import { HSL_LIMITS } from '../constants/color';
+
+export function hexToRgb(hex: string) {
+  hex = hex.replace(RX_SHORT_COLOR, (m, r, g, b) => r + r + g + g + b + b);
+
+  const result = RX_LONG_COLOR.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  } : null;
+}
+
+function componentToHex(c: number) {
+  const hex = c.toString(16);
+  return hex.length == 1 ? '0' + hex : hex;
+}
+
+export function rgbToHex(r: number, g: number, b: number) {
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+export function generateHslFromString(
+  str: string,
+  limits: Partial<Record<'h'|'s'|'l', { min: number; max: number; }>> = HSL_LIMITS,
+) {
+  const hRange = (limits?.h ? [limits.h.min, limits.h.max] : [0, 360]) as [number, number];
+  const sRange = (limits?.s ? [limits.s.min, limits.s.max] : [0, 100]) as [number, number];
+  const lRange = (limits?.l ? [limits.l.min, limits.l.max] : [0, 100]) as [number, number];
+
+  const hash = getHashOfString(str);
+
+  const h = normalize(hash, ...hRange);
+  const s = normalize(hash, ...sRange);
+  const l = normalize(hash, ...lRange);
+
+  return {
+    h,
+    s,
+    l,
+  };
+}
+
+export function hslToColorString(hsl: { h: number; s: number; l: number; }): string {
+  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+}
+
+export function generateColorFromString(
+  str: string,
+  limits: Partial<Record<'h'|'s'|'l', { min: number; max: number; }>> = HSL_LIMITS,
+): string {
+  return hslToColorString(generateHslFromString(str, limits));
+}