@central-design-system/components 3.0.0-alpha.2 → 3.0.0-alpha.4

package/src/utils/dom.ts

@@ -0,0 +1,24 @@
+/**
+ * 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,311 @@
+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'
+});
+
+/**
+ * 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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,92 @@
+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;