@central-design-system/components 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/utils/date/date.d.ts

@@ -0,0 +1,190 @@
+export interface IRawDate {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    millisecond?: number;
+    timezoneOffset?: number;
+    dateHash?: string;
+    timeHash?: string;
+    date?: number;
+    changed?: boolean;
+}
+export declare type TDateLocale = {
+    days: string[];
+    daysShort: string[];
+    months: string[];
+    monthsLong: string[];
+    monthsShort: string[];
+    firstDayOfWeek: number;
+    format24h: boolean;
+    pluralDay: (day?: number) => string;
+};
+/**
+ * Format date by mask
+ * @param value
+ * @param mask
+ * @param dateLocale
+ * @param __forcedYear
+ * @param __forcedTimezoneOffset
+ */
+export declare function formatDate(value: any, mask: string, dateLocale: TDateLocale, __forcedYear: number, __forcedTimezoneOffset: number): string | undefined;
+/**
+ * Set a specific year, month and day to a date.
+ * @param date
+ * @param rawModified
+ * @param utc
+ */
+export declare function adjustDate(date: Date, rawModified: IRawDate, utc: boolean): Date;
+/**
+ * Parse any string into a date object based on the format passed.
+ * @param str
+ * @param mask
+ * @param dateLocale
+ */
+export declare function extractDate(str: string, mask: string, dateLocale: TDateLocale): Date;
+/**
+ * Split date by mask.
+ * @param str
+ * @param mask
+ * @param dateLocale
+ * @param defaultModel
+ */
+export declare function splitDate(str?: string | any, mask?: string, dateLocale?: TDateLocale, defaultModel?: IRawDate): IRawDate;
+/**
+ * Check a date string for validity.
+ * @param date
+ */
+export declare function isValid(date: any): boolean;
+/**
+ * The following method is just a wrapper to help you in cases where you just need current time but with a different year, or month, or second etc.
+ * @param modified
+ * @param utc
+ */
+export declare function buildDate(modified: IRawDate, utc: boolean): Date;
+/**
+ * Get the day number in week for a given date.
+ * @param date
+ */
+export declare function getDayOfWeek(date: Date): number;
+/**
+ * Get the week number in year for a given date.
+ * @param date
+ */
+export declare function getWeekOfYear(date: Date): number;
+/**
+ * Get the day of the year from a given date.
+ * @param date
+ */
+export declare function getDayOfYear(date: Date): number | undefined;
+/**
+ * Check a date is in a given date/time range.
+ * @param date
+ * @param from
+ * @param to
+ * @param opts
+ */
+export declare function isBetweenDates(date: Date, from: Date, to: Date, opts: {
+    onlyDate: boolean;
+    inclusiveFrom: boolean;
+    inclusiveTo: boolean;
+}): boolean;
+/**
+ * Add a given date/time unit from a given date.
+ * @param date
+ * @param modified
+ */
+export declare function addToDate(date: Date, modified: IRawDate): Date;
+/**
+ * Subtract a given date/time unit from a given date.
+ * @param date
+ * @param modified
+ */
+export declare function subtractFromDate(date: Date, modified: IRawDate): Date;
+/**
+ * Beginning of a given date/time unit for a given date.
+ * @param date
+ * @param unit
+ * @param utc
+ */
+export declare function startOfDate(date: Date, unit: string, utc?: boolean): Date;
+/**
+ * End of a given date/time unit for a given date.
+ * @param date
+ * @param unit
+ * @param utc
+ */
+export declare function endOfDate(date: Date, unit: string, utc: boolean): Date;
+/**
+ * Get the maximum date from a given date and other dates.
+ * @param date
+ * @param args
+ */
+export declare function getMaxDate(date: Date, ...args: Date[]): Date;
+/**
+ * Get the minimum date from a given date and other dates.
+ * @param date
+ * @param args
+ */
+export declare function getMinDate(date: Date, ...args: Date[]): Date;
+/**
+ * Get the difference between two dates.
+ * @param date
+ * @param subtract
+ * @param unit
+ */
+export declare function getDateDiff(date: Date, subtract: Date, unit?: string): number;
+/**
+ * Get date format
+ * @param date
+ */
+export declare function inferDateFormat(date: Date | any): 'date' | 'number' | 'string';
+/**
+ * Normalize a date in a given date/time range.
+ * @param date
+ * @param min
+ * @param max
+ */
+export declare function getDateBetween(date: Date, min: Date, max: Date): Date;
+/**
+ * Check of two dates unit are equal.
+ * @param date1
+ * @param date2
+ * @param unit
+ */
+export declare function isSameDate(date1: Date, date2: Date, unit: string): boolean;
+/**
+ * Get the number of days in a month.
+ * @param date
+ */
+export declare function daysInMonth(date: Date): number;
+/**
+ * Cloning date object.
+ * @param date
+ */
+export declare function clone(date: Date): Date;
+declare const _default: {
+    formatDate: typeof formatDate;
+    clone: typeof clone;
+    isValid: typeof isValid;
+    buildDate: typeof buildDate;
+    getDayOfWeek: typeof getDayOfWeek;
+    getWeekOfYear: typeof getWeekOfYear;
+    isBetweenDates: typeof isBetweenDates;
+    addToDate: typeof addToDate;
+    subtractFromDate: typeof subtractFromDate;
+    adjustDate: typeof adjustDate;
+    startOfDate: typeof startOfDate;
+    endOfDate: typeof endOfDate;
+    getMaxDate: typeof getMaxDate;
+    getMinDate: typeof getMinDate;
+    getDateDiff: typeof getDateDiff;
+    getDayOfYear: typeof getDayOfYear;
+    inferDateFormat: typeof inferDateFormat;
+    getDateBetween: typeof getDateBetween;
+    isSameDate: typeof isSameDate;
+    daysInMonth: typeof daysInMonth;
+};
+export default _default;

package/dist/utils/{anchor.d.ts → dom/anchor.d.ts}

@@ -15,9 +15,9 @@ export declare type ParsedAnchor = {
 };
 /** Parse a raw anchor string into an object */
 export declare function parseAnchor(anchor: TAnchor): ParsedAnchor;
-export declare function toPhysical(str: 'center' | Tblock | Tinline): "right" | "top" | "bottom" | "left" | "center";
+export declare function toPhysical(str: 'center' | Tblock | Tinline): "top" | "bottom" | "left" | "right" | "center";
 export declare function flipSide(anchor: ParsedAnchor): ParsedAnchor;
 export declare function flipAlign(anchor: ParsedAnchor): ParsedAnchor;
 export declare function flipCorner(anchor: ParsedAnchor): ParsedAnchor;
-export declare function getAxis(anchor: ParsedAnchor): "y" | "x";
+export declare function getAxis(anchor: ParsedAnchor): "x" | "y";
 export {};

package/dist/utils/dom/classNames.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...args: any[]): any;

package/dist/utils/dom/dom.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns:
+ *  - 'null' if the node is not attached to the DOM
+ *  - the root node (HTMLDocument | ShadowRoot) otherwise
+ */
+export declare function attachedRoot(node: Node): null | HTMLDocument | ShadowRoot;
+export declare function isVisible(element: HTMLElement | SVGGraphicsElement): boolean;
+export declare function isStyleSupport(styleName: string | string[], styleValue?: any): boolean;
+export declare function parseStyleText(cssText?: string, camel?: boolean): Record<string, any>;
+export declare function findDOMNodeByInstance(instance: any): any;

package/dist/utils/dom/getScrollParent.d.ts

@@ -0,0 +1,12 @@
+export declare function getScrollParent(el?: HTMLElement): HTMLElement;
+export declare function getScrollParents(el?: Element | null, stopAt?: Element | null): HTMLElement[];
+export declare function hasScrollbar(el?: Element | null): boolean;
+export declare function getScrollBarSize(fresh?: boolean): number;
+export declare function getTargetScrollBarSize(target: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function getOffset(node: any): {
+    left: number;
+    top: number;
+};

package/dist/utils/dom/scrollTo.d.ts

@@ -0,0 +1,10 @@
+export interface IScrollToOptions {
+    /** Scroll container, default as window */
+    getContainer?: () => HTMLElement | Window | Document;
+    /** Scroll end callback */
+    callback?: () => void;
+    /** Animation duration, default as 450 */
+    duration?: number;
+}
+export declare function scrollTo(y: number, options?: IScrollToOptions): void;
+export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;

package/dist/utils/dom/warn.d.ts

@@ -0,0 +1 @@
+export declare function warn(component: string, msg: string): void;

package/dist/utils/dom/wrapperRaf.d.ts

@@ -0,0 +1,4 @@
+export declare function wrapperRaf(callback: () => void, times?: number): number;
+export declare namespace wrapperRaf {
+    var cancel: (id: number) => void;
+}

package/dist/utils/helpers.d.ts

@@ -1,23 +1,23 @@
-import type { ComponentPublicInstance, ComputedGetter, PropType, Ref, ToRefs } from 'vue';
+import type { ComponentPublicInstance, ComputedGetter, PropType, Ref, ToRefs, VNodeProps, AllowedComponentProps, Component } from 'vue';
 import type { TItemKey } from '../composable';
-export declare const keyCodes: Readonly<{
-    enter: 13;
-    tab: 9;
-    delete: 46;
-    esc: 27;
-    space: 32;
-    up: 38;
-    down: 40;
-    left: 37;
-    right: 39;
-    end: 35;
-    home: 36;
-    del: 46;
-    backspace: 8;
-    insert: 45;
-    pageup: 33;
-    pagedown: 34;
-    shift: 16;
+export declare const keyNames: Readonly<{
+    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 declare const classesStates: Readonly<{
     hover: "cds-state-hover";
@@ -30,17 +30,78 @@ export declare const classesStates: Readonly<{
     invalid: "cds-state-invalid";
     empty: "cds-state-empty";
     loading: "cds-state-loading";
+    readonly: "cds-state-readonly";
+    dragging: "cds-state-dragging";
 }>;
+export declare function isString(value: any): boolean;
+export declare function isArray(value: any): boolean;
+export declare function isSymbol(value: any): boolean;
+/**
+ * Check if value is a object.
+ * @param obj
+ */
 export declare function isObject(obj: any): obj is object;
+/**
+ * Check if value is a Date.
+ * @param value
+ */
+export declare function isDate(value: any): boolean;
+/**
+ * Check if value is a Window object.
+ * @param obj
+ */
+export declare function isWindow(obj: any): boolean;
+/**
+ * Add item from array if not exists.
+ * @param array
+ * @param value
+ */
+export declare function addItemToArray<T>(array: T[], value: T): T[];
+/**
+ * Remove item from array if exists.
+ * @param array
+ * @param value
+ */
+export declare function removeItemFromArray<T>(array: T[], value: T): T[];
+/**
+ * Deep merge two objects.
+ * @param source
+ * @param target
+ * @param arrayFn
+ */
 export declare function mergeDeep(source?: Record<string, any>, target?: Record<string, any>, arrayFn?: (a: unknown[], b: unknown[]) => unknown[]): Record<string, any>;
+/**
+ * Deep compare two values to determine if they are equivalent.
+ * @param a
+ * @param b
+ */
+export declare function deepEqual(a: any, b: any): boolean;
 /**
  * Wrap value in array if it's not already an array
  * @param value
  */
 export declare function wrapInArray<T>(value: T | T[] | null | undefined): T[];
+/**
+ * Get the nested value of an object at a given path.
+ * @param obj
+ * @param path
+ * @param fallback
+ */
 export declare function getNestedValue(obj: any, path: (string | number)[], fallback?: any): any;
+/**
+ * Get the value of an object at a given path.
+ * @param obj
+ * @param path
+ * @param fallback
+ */
 export declare function getObjectValueByPath(obj: any, path: string, fallback?: any): any;
 export declare function getPropertyFromItem(item: any, property: SelectItemKey, fallback?: any): any;
+/**
+ * This function is used to return the scroll position of the given element.
+ * @param target
+ * @param top
+ */
+export declare function getScroll(target: HTMLElement | Window | Document | null, top: boolean): number;
 /**
  * @description This function is used to return a copy of the object that is composed of the picked object properties.
  * @param obj
@@ -52,15 +113,34 @@ export declare function pick<T extends object, U extends Extract<keyof T, string
  * The getter function must always return an object with the same keys.
  */
 export declare function destructComputed<T extends object>(getter: ComputedGetter<T & NotAUnion<T>>): ToRefs<T>;
-/** Array.includes but value can be any type */
+/**
+ * Array.includes but value can be any type
+ * @param arr
+ * @param val
+ */
 export declare function includes(arr: readonly any[], val: any): boolean;
 export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
+/**
+ * Clamp a value between a min and max
+ * @param value
+ * @param min
+ * @param max
+ */
 export declare function clamp(value: number, min?: number, max?: number): number;
+export declare function createRange(length: number, start?: number): number[];
+/**
+ * Is value an like event
+ * @param key
+ */
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<(...args: any[]) => any>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;
 export declare function isFixedPosition(el?: HTMLElement): boolean;
+export declare function padStart(string: number | string, targetLength: number, padString: string): string;
+export declare function pad(n: string | number, length?: number): string;
+export declare function refElement<T extends Record<string, any> | undefined>(obj: T): Exclude<T, ComponentPublicInstance> | HTMLElement;
+export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
 /**
  * Types
  */
@@ -70,4 +150,13 @@ export declare type MaybePick<T extends object, U extends Extract<keyof T, strin
 export declare type EventProp<T = (...args: any[]) => any> = T;
 declare type NotAUnion<T> = [T] extends [infer U] ? _NotAUnion<U, U> : never;
 declare type _NotAUnion<T, U> = U extends any ? ([T] extends [U] ? unknown : never) : never;
+export declare type ComponentProps<C extends Component> = C extends new (...args: any) => any ? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps> : never;
+/**
+ * Maybe it's a ref, or a plain value, or a getter function
+ *
+ * ```ts
+ * type MaybeRefOrGetter<T> = (() => T) | T | Ref<T> | ComputedRef<T>
+ * ```
+ */
+export declare type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T);
 export {};

package/dist/utils/index.d.ts

@@ -1,13 +1,22 @@
-export * from './propsFactory';
 export * from './helpers';
+export * from './propsFactory';
 export * from './getCurrentInstance';
-export * from './getScrollParent';
-export * from './globals';
-export * from './dom';
-export * from './anchor';
-export * from './box';
-export * from './animation';
+export * from './use/reactivePick';
+export * from './use/eagerComputed';
+export * from './use/pickAttrs';
+export * from './use/cache';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
 export * from './changeCase/paramCase';
+export * from './date/date';
+export * from './dom/globals';
+export * from './dom/getScrollParent';
+export * from './dom/dom';
+export * from './dom/anchor';
+export * from './dom/box';
+export * from './dom/animation';
+export * from './dom/scrollTo';
+export * from './dom/wrapperRaf';
+export * from './dom/warn';
+export * from './dom/classNames';

package/dist/utils/use/cache.d.ts

@@ -0,0 +1,4 @@
+export declare function useCache(): {
+    getCache: (key: string, obj: any) => any;
+    getCacheWithFn: (key: string, fn: () => any) => any;
+};

package/dist/utils/use/eagerComputed.d.ts

@@ -0,0 +1,3 @@
+import type { ComputedRef } from 'vue';
+export declare type ComputedGetter<T> = (...args: any[]) => T;
+export declare function eagerComputed<T>(fn: ComputedGetter<T>): ComputedRef<T>;

package/dist/utils/use/pickAttrs.d.ts

@@ -0,0 +1,11 @@
+export interface IAttrsPickConfig {
+    aria?: boolean;
+    data?: boolean;
+    attr?: boolean;
+}
+/**
+ * Picker props from exist props with filter
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ */
+export declare function pickAttrs(props: Record<string, any>, ariaOnly?: boolean | IAttrsPickConfig): Record<string, any>;

package/dist/utils/use/reactiveComputed.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Computed reactive object.
+ */
+export declare function reactiveComputed<T extends {}>(fn: () => T): T;

package/dist/utils/use/reactivePick.d.ts

@@ -0,0 +1,8 @@
+import type { UnwrapRef } from 'vue';
+export declare type ReactivePickPredicate<T> = (value: T[keyof T], key: keyof T) => boolean;
+export declare function reactivePick<T extends object, K extends keyof T>(obj: T, ...keys: (K | K[])[]): {
+    [S in K]: UnwrapRef<T[S]>;
+};
+export declare function reactivePick<T extends object>(obj: T, predicate: ReactivePickPredicate<T>): {
+    [S in keyof T]?: UnwrapRef<T[S]>;
+};

package/dist/utils/use/toReactive.d.ts

@@ -0,0 +1,8 @@
+import type { MaybeRef } from '../';
+/**
+ * Converts ref to reactive.
+ *
+ * @see https://vueuse.org/toReactive
+ * @param objectRef A ref of object
+ */
+export declare function toReactive<T extends object>(objectRef: MaybeRef<T>): T;

package/dist/utils/use/toValue.d.ts

@@ -0,0 +1,5 @@
+import type { MaybeRefOrGetter } from '../';
+/**
+ * Get the value of value/ref/getter.
+ */
+export declare function toValue<T>(r: MaybeRefOrGetter<T>): T;

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.10",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
   "main": "./dist/cds.umd.js",
   "module": "./dist/cds.es.js",
+  "type": "module",
   "engines": {
     "node": ">= 16"
   },
   "exports": {
     ".": {
       "import": "./dist/cds.es.js",
-      "require": "./dist/cds.umd.js"
+      "require": "./dist/cds.umd.js",
+      "types": "./dist/cds.d.ts"
     },
     "./nuxt": "./nuxt.js",
     "./dist/cds.css": "./dist/cds.css"
@@ -26,10 +28,11 @@
   "scripts": {
     "build": "rimraf dist && vue-tsc --noEmit && vite build",
     "type-check": "npx vue-tsc --noEmit -p tsconfig.json --composite false",
-    "bump": "npx bumpp"
+    "bump": "npx bumpp",
+    "publish:alpha": "npm publish --tag next"
   },
   "peerDependencies": {
-    "vue": "3.2.47"
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@types/node": "16.18.3",

package/src/scss/modules/_transition.scss

@@ -2,6 +2,8 @@
 
 $standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
 $standard-duration: $cds-duration-fast + ms;
+$accent-easting: map-get(map-get($easing, 'ease-in-out'), 'accent');
+$accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
   &-enter-active {
@@ -17,10 +19,23 @@ $standard-duration: $cds-duration-fast + ms;
   }
 }
 
+@mixin fade-out() {
+  &-leave-to {
+    opacity: 0;
+  }
+  &-leave-active {
+    transition-duration: 100ms !important;
+  }
+}
+
 // Generic transitions
 .fade-transition {
   @include transition-default();
 
+  &-leave-active {
+    position: absolute;
+  }
+
   &-enter-from, &-leave-to {
     opacity: 0 !important;
   }
@@ -52,3 +67,90 @@ $standard-duration: $cds-duration-fast + ms;
   }
 }
 
+.slide-transition-right {
+  &-enter-active,
+  &-leave-active {
+    transition: transform $accent-duration $accent-easting;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+
+  &-enter-from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  &-leave-to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slide-transition-left {
+  &-enter-active,
+  &-leave-active {
+    transition: transform $accent-duration $accent-easting;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+
+  &-enter-from {
+    transform: translate3d(100%, 0, 0);
+  }
+  &-leave-to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.jump-transition {
+  &-left, &-right {
+    &-enter-active,
+    &-leave-active {
+      transition: opacity $accent-duration, transform $accent-duration;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0
+    }
+
+    &-leave-active {
+      position: absolute;
+    }
+  }
+
+  &-right {
+    &-enter-from {
+      transform: translate3d(-15px, 0, 0);
+    }
+    &-leave-to {
+      transform: translate3d(15px, 0, 0);
+    }
+  }
+
+  &-left {
+    &-enter-from {
+      transform: translate3d(15px, 0, 0);
+    }
+    &-leave-to {
+      transform: translate3d(-15px, 0, 0);
+    }
+  }
+}
+
+.scale-transition {
+  @include transition-default();
+  @include fade-out();
+
+  &-enter-from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: transform, opacity !important;
+  }
+}
+

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 4/25/2023, 7:08:32 PM
+ * Generated on 7/6/2023, 2:59:15 PM
  **/
 
 /**