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

package/dist/utils/date.d.ts

@@ -0,0 +1,181 @@
+import type { ILocale } from '../locale';
+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;
+}
+export declare type TDateLocale = ILocale['date'];
+/**
+ * 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, 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/dom.d.ts

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

package/dist/utils/getScrollParent.d.ts

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

package/dist/utils/globals.d.ts

@@ -0,0 +1,4 @@
+export declare const IN_BROWSER: boolean;
+export declare const SUPPORTS_INTERSECTION: boolean;
+export declare const SUPPORTS_TOUCH: boolean;
+export declare const SUPPORTS_FOCUS_VISIBLE: boolean;

package/dist/utils/helpers.d.ts

@@ -1,22 +1,23 @@
-import type { Ref } from 'vue';
-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;
+import type { ComponentPublicInstance, ComputedGetter, PropType, Ref, ToRefs } from 'vue';
+import type { TItemKey } from '../composable';
+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,9 +31,47 @@ export declare const classesStates: Readonly<{
     empty: "cds-state-empty";
     loading: "cds-state-loading";
 }>;
+/**
+ * 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;
+/**
+ * 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;
 /**
@@ -41,9 +80,43 @@ export declare function getPropertyFromItem(item: any, property: SelectItemKey,
  * @param paths
  */
 export declare function pick<T extends object, U extends Extract<keyof T, string>>(obj: T, paths: U[]): [yes: MaybePick<T, U>, no: Omit<T, U>];
+/**
+ * Convert a computed ref to a record of refs.
+ * 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
+ * @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;
+/**
+ * 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;
 /**
  * Types
  */
 export declare type MaybeRef<T> = T | Ref<T>;
-export declare type SelectItemKey = boolean | string | (string | number)[] | ((item: Record<string, any>, fallback?: any) => any);
+export declare type SelectItemKey = TItemKey;
 export declare type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T ? Partial<Pick<T, U>> : Pick<T, U>;
+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 {};

package/dist/utils/index.d.ts

@@ -1,7 +1,15 @@
 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';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
 export * from './changeCase/paramCase';
+export * from './date';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.2",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -26,10 +26,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.45"
+    "vue": "3.2.47"
   },
   "devDependencies": {
     "@types/node": "16.18.3",
@@ -42,7 +43,7 @@
     "vite": "3.1.7",
     "vite-plugin-dts": "1.6.5",
     "vite-tsconfig-paths": "3.5.1",
-    "vue": "3.2.45",
+    "vue": "3.2.47",
     "vue-router": "4.1.6",
     "vue-tsc": "1.0.9"
   }

package/src/scss/mixins/layout/_shadow.scss

@@ -0,0 +1,4 @@
+@mixin cds-border-shadow($color) {
+  box-shadow: inset 0 0 0 1px $color;
+  border-color: $color;
+}

package/src/scss/mixins/layout/index.scss

@@ -1,3 +1,4 @@
 @import 'convert';
 @import 'mini-unit';
 @import 'spacing';
+@import 'shadow';

package/src/scss/modules/_transition.scss

@@ -1,14 +1,17 @@
 @import '../mixins/motion';
 
 $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 {
-    transition: 0.3s $standard-easing;
+    transition: $standard-duration $standard-easing;
   }
 
   &-leave-active {
-    transition: 0.3s $standard-easing;
+    transition: $standard-duration $standard-easing;
   }
 
   &-move {
@@ -16,11 +19,138 @@ $standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
   }
 }
 
+@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;
+  }
+}
+
 .expand-transition {
   @include transition-default();
 }
 
-.expand-x-transition {
+.expand-transition-x {
   @include transition-default();
 }
+
+.slide-transition-y {
+  @include transition-default();
+
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-transition-x {
+  @include transition-default();
+
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.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 2/18/2023, 7:04:48 PM
+ * Generated on 5/18/2023, 9:57:05 PM
  **/
 
 /**