@central-design-system/components 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/utils/dom.ts

@@ -1,24 +0,0 @@
-/**
- * Returns:
- *  - 'null' if the node is not attached to the DOM
- *  - the root node (HTMLDocument | ShadowRoot) otherwise
- */
-export function attachedRoot(node: Node): null | HTMLDocument | ShadowRoot {
-  /* istanbul ignore next */
-  if (typeof node.getRootNode !== 'function') {
-    // Shadow DOM not supported (IE11), lets find the root of this node
-    while (node.parentNode) node = node.parentNode;
-
-    // The root parent is the document if the node is attached to the DOM
-    if (node !== document) return null;
-
-    return document;
-  }
-
-  const root = node.getRootNode();
-
-  // The composed root node is the document if the node is attached to the DOM
-  if (root !== document && root.getRootNode({ composed: true }) !== document) return null;
-
-  return root as HTMLDocument | ShadowRoot;
-}

package/src/utils/getCurrentInstance.ts

@@ -1,43 +0,0 @@
-import { getCurrentInstance as _getCurrentInstance } from 'vue';
-import { paramCase } from './';
-
-import type { ComponentInternalInstance } from 'vue';
-
-/**
- * This is a wrapper around Vue's getCurrentInstance
- * WARNING! It's not a public API and can be removed in the future
- * @param name
- * @param message
- */
-export function getCurrentInstance(name: string, message?: string) {
-  const vm = _getCurrentInstance();
-
-  if (!vm) {
-    throw new Error(`[CDS] ${name} ${message || 'must be called from inside a setup function'}`);
-  }
-
-  return vm;
-}
-
-export function getCurrentInstanceName(name = 'composable') {
-  const vm = getCurrentInstance(name);
-  return paramCase(vm.type?.name || '');
-}
-
-let _uid = 0;
-let _map = new WeakMap<ComponentInternalInstance, number>();
-export function getUid() {
-  const vm = getCurrentInstance('getUid');
-
-  if (_map.has(vm)) {
-    return _map.get(vm)!;
-  } else {
-    const uid = _uid++;
-    _map.set(vm, uid);
-    return uid;
-  }
-}
-getUid.reset = () => {
-  _uid = 0;
-  _map = new WeakMap();
-};

package/src/utils/getScrollParent.ts

@@ -1,29 +0,0 @@
-export function getScrollParent(el?: HTMLElement) {
-  while (el) {
-    if (hasScrollbar(el)) return el;
-    el = el.parentElement!;
-  }
-
-  return document.scrollingElement as HTMLElement;
-}
-
-export function getScrollParents(el?: Element | null, stopAt?: Element | null) {
-  const elements: HTMLElement[] = [];
-
-  if (stopAt && el && !stopAt.contains(el)) return elements;
-
-  while (el) {
-    if (hasScrollbar(el)) elements.push(el as HTMLElement);
-    if (el === stopAt) break;
-    el = el.parentElement!;
-  }
-
-  return elements;
-}
-
-export function hasScrollbar(el?: Element | null) {
-  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
-
-  const style = window.getComputedStyle(el);
-  return style.overflowY === 'scroll' || (style.overflowY === 'auto' && el.scrollHeight > el.clientHeight);
-}

package/src/utils/globals.ts

@@ -1,8 +0,0 @@
-export const IN_BROWSER = typeof window !== 'undefined';
-export const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
-export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
-export const SUPPORTS_FOCUS_VISIBLE =
-  IN_BROWSER &&
-  typeof CSS !== 'undefined' &&
-  typeof CSS.supports !== 'undefined' &&
-  CSS.supports('selector(:focus-visible)');

package/src/utils/helpers.ts

@@ -1,312 +0,0 @@
-import { computed, reactive, watchEffect, toRefs } from 'vue';
-
-import type { ComponentPublicInstance, ComputedGetter, PropType, Ref, ToRefs } from 'vue';
-import type { TItemKey } from '@components/composable';
-
-export const keyNames = Object.freeze({
-  enter: 'Enter',
-  tab: 'Tab',
-  delete: 'Delete',
-  esc: 'Escape',
-  space: ' ',
-  up: 'ArrowUp',
-  down: 'ArrowDown',
-  left: 'ArrowLeft',
-  right: 'ArrowRight',
-  end: 'End',
-  home: 'Home',
-  del: 'Del',
-  backspace: 'Backspace',
-  insert: 'Insert',
-  pageup: 'PageUp',
-  pagedown: 'PageDown',
-  shift: 'Shift'
-});
-
-export const classesStates = Object.freeze({
-  hover: 'cds-state-hover',
-  focus: 'cds-state-focus',
-  active: 'cds-state-active',
-  visited: 'cds-state-visited',
-  disabled: 'cds-state-disabled',
-  checked: 'cds-state-checked',
-  indeterminate: 'cds-state-indeterminate',
-  invalid: 'cds-state-invalid',
-  empty: 'cds-state-empty',
-  loading: 'cds-state-loading',
-  readonly: 'cds-state-readonly'
-});
-
-/**
- * Check if value is a object.
- * @param obj
- */
-export function isObject(obj: any): obj is object {
-  return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
-}
-
-/**
- * Check if value is a Date.
- * @param value
- */
-export function isDate(value: any) {
-  return Object.prototype.toString.call(value) === '[object Date]';
-}
-
-/**
- * Deep merge two objects.
- * @param source
- * @param target
- * @param arrayFn
- */
-export function mergeDeep(
-  source: Record<string, any> = {},
-  target: Record<string, any> = {},
-  arrayFn?: (a: unknown[], b: unknown[]) => unknown[]
-) {
-  const out: Record<string, any> = {};
-
-  for (const key in source) {
-    out[key] = source[key];
-  }
-
-  for (const key in target) {
-    const sourceProperty = source[key];
-    const targetProperty = target[key];
-
-    // Only continue deep merging if
-    // both properties are objects
-    if (isObject(sourceProperty) && isObject(targetProperty)) {
-      out[key] = mergeDeep(sourceProperty, targetProperty, arrayFn);
-
-      continue;
-    }
-
-    if (Array.isArray(sourceProperty) && Array.isArray(targetProperty) && arrayFn) {
-      out[key] = arrayFn(sourceProperty, targetProperty);
-
-      continue;
-    }
-
-    out[key] = targetProperty;
-  }
-
-  return out;
-}
-
-/**
- * Deep compare two values to determine if they are equivalent.
- * @param a
- * @param b
- */
-export function deepEqual(a: any, b: any): boolean {
-  if (a === b) return true;
-
-  if (a instanceof Date && b instanceof Date && a.getTime() !== b.getTime()) {
-    // If the values are Date, compare them as timestamps
-    return false;
-  }
-
-  if (a !== Object(a) || b !== Object(b)) {
-    // If the values aren't objects, they were already checked for equality
-    return false;
-  }
-
-  const props = Object.keys(a);
-
-  if (props.length !== Object.keys(b).length) {
-    // Different number of props, don't bother to check
-    return false;
-  }
-
-  return props.every((p) => deepEqual(a[p], b[p]));
-}
-
-/**
- * Wrap value in array if it's not already an array
- * @param value
- */
-export function wrapInArray<T>(value: T | T[] | null | undefined): T[] {
-  return value == null ? [] : Array.isArray(value) ? value : [value];
-}
-
-/**
- * Get the nested value of an object at a given path.
- * @param obj
- * @param path
- * @param fallback
- */
-export function getNestedValue(obj: any, path: (string | number)[], fallback?: any): any {
-  const last = path.length - 1;
-
-  if (last < 0) return obj === undefined ? fallback : obj;
-
-  for (let i = 0; i < last; i++) {
-    if (obj == null) {
-      return fallback;
-    }
-    obj = obj[path[i]];
-  }
-
-  if (obj == null) return fallback;
-
-  return obj[path[last]] === undefined ? fallback : obj[path[last]];
-}
-
-/**
- * Get the value of an object at a given path.
- * @param obj
- * @param path
- * @param fallback
- */
-export function getObjectValueByPath(obj: any, path: string, fallback?: any) {
-  if (obj == null || !path || typeof path !== 'string') return fallback;
-  if (obj[path] !== undefined) return obj[path];
-  path = path.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
-  path = path.replace(/^\./, ''); // strip a leading dot
-  return getNestedValue(obj, path.split('.'), fallback);
-}
-
-export function getPropertyFromItem(item: any, property: SelectItemKey, fallback?: any): any {
-  if (property == null) return item === undefined ? fallback : item;
-  if (item !== Object(item)) return fallback;
-  if (typeof property === 'string') return getObjectValueByPath(item, property, fallback);
-  if (Array.isArray(property)) return getNestedValue(item, property, fallback);
-  if (typeof property !== 'function') return fallback;
-
-  const value = property(item, fallback);
-  return typeof value === 'undefined' ? fallback : value;
-}
-
-/**
- * @description This function is used to return a copy of the object that is composed of the picked object properties.
- * @param obj
- * @param paths
- */
-export function pick<T extends object, U extends Extract<keyof T, string>>(
-  obj: T,
-  paths: U[]
-): [yes: MaybePick<T, U>, no: Omit<T, U>];
-export function pick<T extends object, U extends Extract<keyof T, string>>(
-  obj: T,
-  paths: (U | RegExp)[]
-): [yes: Partial<T>, no: Partial<T>] {
-  const found = Object.create(null);
-  const rest = Object.create(null);
-
-  for (const key in obj) {
-    if (paths.some((path) => (path instanceof RegExp ? path.test(key) : path === key))) {
-      found[key] = obj[key];
-    } else {
-      rest[key] = obj[key];
-    }
-  }
-
-  return [found, rest];
-}
-
-/**
- * Convert a computed ref to a record of refs.
- * The getter function must always return an object with the same keys.
- */
-export function destructComputed<T extends object>(getter: ComputedGetter<T & NotAUnion<T>>): ToRefs<T>;
-export function destructComputed<T extends object>(getter: ComputedGetter<T>) {
-  const refs = reactive({}) as T;
-  const base = computed(getter);
-  watchEffect(
-    () => {
-      for (const key in base.value) {
-        refs[key] = base.value[key];
-      }
-    },
-    { flush: 'sync' }
-  );
-  return toRefs(refs);
-}
-
-/**
- * Array.includes but value can be any type
- * @param arr
- * @param val
- */
-export function includes(arr: readonly any[], val: any) {
-  return arr.includes(val);
-}
-
-export function convertToUnit(str: number, unit?: string): string;
-export function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
-export function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
-  if (str == null || str === '') {
-    return undefined;
-  } else if (isNaN(+str!)) {
-    return String(str);
-  } else if (!isFinite(+str!)) {
-    return undefined;
-  } else {
-    return `${Number(str)}${unit}`;
-  }
-}
-
-/**
- * Clamp a value between a min and max
- * @param value
- * @param min
- * @param max
- */
-export function clamp(value: number, min = 0, max = 1) {
-  return Math.max(min, Math.min(max, value));
-}
-
-/**
- * Is value an like event
- * @param key
- */
-export const isOn = (key: string) => key.startsWith('on');
-
-export const EventProp = [Function, Array] as PropType<EventProp>;
-
-export function isComponentInstance(obj: any): obj is ComponentPublicInstance {
-  return obj?.$el;
-}
-
-export function isFixedPosition(el?: HTMLElement) {
-  while (el) {
-    if (window.getComputedStyle(el).position === 'fixed') {
-      return true;
-    }
-    el = el.offsetParent as HTMLElement;
-  }
-  return false;
-}
-
-export function padStart(string: number | string, targetLength: number, padString: string) {
-  targetLength = targetLength >> 0;
-  string = String(string);
-  padString = String(padString);
-  if (string.length > targetLength) {
-    return String(string);
-  }
-
-  targetLength = targetLength - string.length;
-  if (targetLength > padString.length) {
-    padString += padString.repeat(targetLength / padString.length);
-  }
-  return padString.slice(0, targetLength) + String(string);
-}
-
-export function pad(n: string | number, length = 2) {
-  return padStart(n, length, '0');
-}
-
-/**
- * Types
- */
-export type MaybeRef<T> = T | Ref<T>;
-export type SelectItemKey = TItemKey;
-export type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T
-  ? Partial<Pick<T, U>>
-  : Pick<T, U>;
-export type EventProp<T = (...args: any[]) => any> = T;
-// Only allow a single return type
-type NotAUnion<T> = [T] extends [infer U] ? _NotAUnion<U, U> : never;
-type _NotAUnion<T, U> = U extends any ? ([T] extends [U] ? unknown : never) : never;

package/src/utils/index.ts

@@ -1,19 +0,0 @@
-export * from './propsFactory';
-export * from './helpers';
-export * from './getCurrentInstance';
-export * from './getScrollParent';
-export * from './globals';
-export * from './dom';
-export * from './anchor';
-export * from './box';
-export * from './animation';
-export * from './cache';
-
-// change case
-export * from './changeCase/noCase';
-export * from './changeCase/lowerCase';
-export * from './changeCase/pascalCase';
-export * from './changeCase/paramCase';
-
-// date
-export * from './date';

package/src/utils/propsFactory.ts

@@ -1,92 +0,0 @@
-import type { PropType } from 'vue';
-import type { Prop, ComponentObjectPropsOptions } from '../shims-vue';
-
-/**
- * Creates a factory function for props definitions.
- * This is used to define props in a composable then override
- * default values in an implementing component.
- *
- * @example Simplified signature
- * (props: Props) => (defaults?: Record<keyof props, any>) => Props
- *
- * @example Usage
- * const makeProps = propsFactory({
- *   foo: String,
- * })
- *
- * defineComponent({
- *   props: {
- *     ...makeProps({
- *       foo: 'a',
- *     }),
- *   },
- *   setup (props) {
- *     // would be "string | undefined", now "string" because a default has been provided
- *     props.foo
- *   },
- * }
- */
-export function propsFactory<PropsOptions extends ComponentObjectPropsOptions = ComponentObjectPropsOptions>(
-  props: PropsOptions,
-  source: string
-) {
-  return <Defaults extends PartialKeys<PropsOptions> = {}>(
-    defaults?: Defaults
-  ): AppendDefault<PropsOptions, Defaults> => {
-    return Object.keys(props).reduce<any>((obj, prop) => {
-      const isObjectDefinition = typeof props[prop] === 'object' && props[prop] != null && !Array.isArray(props[prop]);
-      const definition = isObjectDefinition ? props[prop] : { type: props[prop] };
-
-      if (defaults && prop in defaults) {
-        obj[prop] = {
-          ...definition,
-          default: defaults[prop]
-        };
-      } else {
-        obj[prop] = definition;
-      }
-
-      if (source && !obj[prop].source) {
-        obj[prop].source = source;
-      }
-
-      return obj;
-    }, {});
-  };
-}
-
-export type AppendDefault<T extends ComponentObjectPropsOptions, D extends PartialKeys<T>> = {
-  [P in keyof T]-?: unknown extends D[P]
-    ? T[P]
-    : T[P] extends Record<string, unknown>
-    ? Omit<T[P], 'type' | 'default'> & {
-        type: PropType<MergeDefaults<T[P], D[P]>>;
-        default: MergeDefaults<T[P], D[P]>;
-      }
-    : {
-        type: PropType<MergeDefaults<T[P], D[P]>>;
-        default: MergeDefaults<T[P], D[P]>;
-      };
-};
-
-type MergeDefaults<T, D> = unknown extends D ? InferPropType<T> : NonNullable<InferPropType<T>> | D;
-
-/**
- * Like `Partial<T>` but doesn't care what the value is
- */
-type PartialKeys<T> = { [P in keyof T]?: unknown };
-
-// Copied from Vue
-type InferPropType<T> = T extends null
-  ? any // null & true would fail to infer
-  : T extends { type: null | true }
-  ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
-  : T extends ObjectConstructor | { type: ObjectConstructor }
-  ? Record<string, any>
-  : T extends BooleanConstructor | { type: BooleanConstructor }
-  ? boolean
-  : T extends Prop<infer V, infer D>
-  ? unknown extends V
-    ? D
-    : V
-  : T;