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

package/dist/utils/helpers.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentPublicInstance, ComputedGetter, PropType, Ref, ToRefs } from 'vue';
+import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
 import type { TItemKey } from '../composable';
+export declare const preventedScrollClass = "cds-scroll-blocked";
 export declare const keyNames: Readonly<{
     enter: "Enter";
     tab: "Tab";
@@ -31,7 +32,13 @@ export declare const classesStates: Readonly<{
     empty: "cds-state-empty";
     loading: "cds-state-loading";
     readonly: "cds-state-readonly";
+    dragging: "cds-state-dragging";
 }>;
+export declare function keys<O extends {}>(o: O): (keyof O)[];
+export declare function has<T extends string>(obj: object, key: T[]): obj is Record<T, unknown>;
+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
@@ -42,6 +49,23 @@ export declare function isObject(obj: any): obj is object;
  * @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
@@ -59,7 +83,8 @@ 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[];
+declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
+export declare function wrapInArray<T>(value: T | T[] | null | undefined): T extends readonly any[] ? IfAny<T, T[], T> : NonNullable<T>[];
 /**
  * Get the nested value of an object at a given path.
  * @param obj
@@ -74,7 +99,29 @@ export declare function getNestedValue(obj: any, path: (string | number)[], fall
  * @param fallback
  */
 export declare function getObjectValueByPath(obj: any, path: string, fallback?: any): any;
+/**
+ * This function is used to get the value of a property from an item. The property can be a string, an array, a function, or a boolean.
+ * If the property is a string, it will be used as a path to retrieve the value from the item.
+ * If the property is an array, it will be used as a nested path to retrieve the value from the item.
+ * If the property is a function, it will be called with the item and the fallback value as arguments, and its return value will be used.
+ * If the property is a boolean, and it's true, the item itself will be returned.
+ * If the property is null, undefined, or a boolean that's not true, the fallback value will be returned.
+ * If the item is not an object, and the property is not a function, the fallback value will be returned.
+ * If the property is not a string, an array, or a function, the fallback value will be returned.
+ * If the value retrieved from the item is undefined, the fallback value will be returned.
+ *
+ * @param item - The item from which to get the property value.
+ * @param property - The property to get from the item. Can be a string, an array, a function, or a boolean.
+ * @param fallback - The value to return if the property is not found or its value is undefined.
+ * @returns The value of the property from the item, or the fallback value.
+ */
 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
@@ -94,6 +141,7 @@ export declare function destructComputed<T extends object>(getter: ComputedGette
 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;
+export declare function convertRemToPx(value: string): number;
 /**
  * Clamp a value between a min and max
  * @param value
@@ -110,9 +158,41 @@ 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 padEnd(str: string, length: number, char?: string): string;
 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>;
+export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild | {
+    [key: string]: any;
+}): ComponentInternalInstance[];
+export declare function focusableChildren(el: Element): HTMLElement[];
+/**
+ * https://github.com/lodash/lodash/blob/master/partition.js
+ * @param items
+ * @param predicates
+ */
+export declare function partition<T>(items: T[], predicates: (item: T) => boolean): [T[], T[]];
+export declare function matchesSelector<T>(el: T | Element | undefined, selector: string): boolean | null;
+/**
+ * Debounce function
+ * @param fn
+ * @param delay
+ */
+export declare function debounce(fn: Function, delay: number): (...args: any[]) => void;
+/**
+ * Pluralize a word based on a number.
+ * @param n
+ * @param opts
+ */
+export declare function plurals(n: number, opts: string[]): string;
+/**
+ * Chunk a string into an array of strings.
+ * @param str
+ * @param size
+ */
+export declare function chunk(str: string, size?: number): string[];
+export declare function noop(): void;
 /**
  * Types
  */
@@ -122,4 +202,14 @@ 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 declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 export {};

package/dist/utils/index.d.ts

@@ -1,15 +1,26 @@
-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 './cache';
+export * from './use/reactivePick';
+export * from './use/eagerComputed';
+export * from './use/pickAttrs';
+export * from './use/cache';
+export * from './use/copyToClipboard';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
 export * from './changeCase/paramCase';
-export * from './date';
+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';
+export * from './dom/hRender';
+export * from './colorsUtils';
+export { default as colors } from './colors';

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

@@ -0,0 +1 @@
+export declare function copyToClipboard(text: string): Promise<unknown>;

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,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.10",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -17,7 +17,11 @@
       "types": "./dist/cds.d.ts"
     },
     "./nuxt": "./nuxt.js",
-    "./dist/cds.css": "./dist/cds.css"
+    "./dist/cds.css": "./dist/cds.css",
+    "./src/": {
+      "import": "./src/",
+      "require": "./src/"
+    }
   },
   "files": [
     "dist",
@@ -26,8 +30,8 @@
   ],
   "types": "./dist/cds.d.ts",
   "scripts": {
-    "build": "rimraf dist && vue-tsc --noEmit && vite build",
-    "type-check": "npx vue-tsc --noEmit -p tsconfig.json --composite false",
+    "build": "rimraf dist && npm run type-check && vite build",
+    "type-check": "npx vue-tsc --noEmit -p tsconfig.build.json --composite false",
     "bump": "npx bumpp",
     "publish:alpha": "npm publish --tag next"
   },

package/src/scss/modules/_reset.scss

@@ -7,6 +7,11 @@
 
   html {
     font-size: var(--cds-font-base);
+    box-sizing: border-box;
+    overflow-y: scroll;
+    -webkit-text-size-adjust: 100%;
+    word-break: normal;
+    tab-size: 4;
   }
 
   body {

package/src/scss/modules/_transition.scss

@@ -1,8 +1,12 @@
 @import '../mixins/motion';
 
 $standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
-$standard-duration: $cds-duration-fast + ms;
+$decelerated-easing: map-get(map-get($easing, 'ease-out'), 'basic');
+$accelerated-easing: map-get(map-get($easing, 'ease-in'), 'basic');
+
 $accent-easting: map-get(map-get($easing, 'ease-in-out'), 'accent');
+
+$standard-duration: $cds-duration-fast + ms;
 $accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
@@ -154,3 +158,70 @@ $accent-duration: $cds-duration-normal + ms;
   }
 }
 
+.modal-transition,
+.modal-transition-bottom,
+.modal-transition-top {
+  &-enter-active {
+    transition-duration: 225ms !important;
+    transition-timing-function: $decelerated-easing !important;
+  }
+
+  &-leave-active {
+    transition-duration: 125ms !important;
+    transition-timing-function: $accelerated-easing !important;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: transform, opacity !important;
+    pointer-events: none;
+  }
+}
+
+.modal-transition {
+  &-enter-from, &-leave-to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  &-enter-to, &-leave-from {
+    opacity: 1;
+  }
+}
+
+.modal-transition-bottom {
+  &-enter-from, &-leave-to {
+    transform: translateY(calc(50vh + 50%));
+  }
+}
+
+.modal-transition-top {
+  &-enter-from, &-leave-to {
+    transform: translateY(calc(-50vh - 50%));
+  }
+}
+
+.notification-transition {
+  &-enter-active,
+  &-leave-active {
+    transition-duration: $standard-duration;
+    transition-timing-function: $decelerated-easing;
+  }
+
+  &-enter-active {
+    transition-property: transform, opacity;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: scale(.8);
+  }
+
+  &-leave-action {
+    transition-property: opacity;
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+}

package/src/scss/modules/grid/_mixins.scss

@@ -188,10 +188,12 @@
 
       .#{$prefix}-col-auto,
       .#{$prefix}-col#{$infix}-auto {
-        width: auto;
+        @include -make-col-ready($gutter);
+
         // Reset earlier grid tiers
+        width: auto;
         max-width: 100%;
-        flex: 1 0 0;
+        flex: 0 0 auto;
       }
 
       @for $i from 0 through $columns {

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 6/14/2023, 4:10:00 PM
+ * Generated on 1/18/2024, 2:08:21 PM
  **/
 
 /**

package/src/scss/utility/display.scss

@@ -1,13 +1,64 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $display in $displays {
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Без брейкпоинтов
+@each $name, $value in $displays {
+  .cds-#{$name} {
+    display: $value !important;
+  }
+}
+
+@each $name, $value in $overflow {
+  .cds-overflow-#{$name} {
+    overflow: $value !important;
+  }
+}
+
+@each $name, $value in $positions {
   .cds-#{$name} {
-    display: $display !important;
+    position: $value !important;
   }
 }
 
-@each $name, $visibility in $visibility {
+@each $name, $value in $visibility {
   .cds-#{$name} {
-    visibility: $visibility !important;
+    visibility: $value !important;
+  }
+}
+
+// С брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $displays {
+      .#{$breakpoint}\:cds-#{$name} {
+        display: $value !important;
+      }
+    }
+
+    @each $name, $value in $overflow {
+      .#{$breakpoint}\:cds-overflow-#{$name} {
+        overflow: $value !important;
+      }
+    }
+
+    @each $name, $value in $visibility {
+      .#{$breakpoint}\cds-#{$name} {
+        visibility: $value !important;
+      }
+    }
+
+    @each $name, $value in $positions {
+      .#{$breakpoint}\:cds-#{$name} {
+        position: $value !important;
+      }
+    }
   }
 }

package/src/scss/utility/flexbox.scss

@@ -1,37 +1,35 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $direction in $flex-direction {
-  .cds-#{$name} {
-    flex-direction: $direction !important;
-  }
-}
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
-@each $name, $value in $justify-content {
-  .cds-justify-#{$name} {
-    justify-content: $value !important;
-  }
-}
+@each $key, $value in $flex-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
 
-@each $name, $value in $align-items {
-  .cds-items-#{$name} {
-    align-items: $value !important;
+  // без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
   }
-}
 
-@each $name, $value in $align-content {
-  .cds-content-#{$name} {
-    align-content: $value !important;
-  }
-}
+  // брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
 
-@each $name, $value in $flex-wrap {
-  .cds-flex-#{$name} {
-    flex-wrap: $value !important;
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
   }
 }
 
-@each $name, $value in $align-self {
-  .cds-self-#{$name} {
-    align-self: $value !important;
-  }
-}

package/src/scss/utility/index.scss

@@ -1,7 +1,5 @@
-@import 'generatedFiles/generatedStyles';
 @import 'display';
 @import 'layout';
 @import 'spacing';
-@import 'typography';
 @import 'flexbox';
 @import 'lists';

package/src/scss/utility/layout.scss

@@ -1,4 +1,11 @@
-@import "variables";
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
 @each $name, $index in $z-indexes {
   .#{$name} {
@@ -6,6 +13,61 @@
   }
 }
 
-.cds-fullwidth {
-  width: 100%;
+@each $name, $value in $widthHeight {
+  .cds-h-#{$name} {
+    height: $value !important;
+  }
+
+  .cds-w-#{$name} {
+    width: $value !important;
+  }
+
+  .cds-max-h-#{$name} {
+    max-height: $value !important;
+  }
+
+  .cds-max-w-#{$name} {
+    max-width: $value !important;
+  }
+
+  .cds-min-h-#{$name} {
+    min-height: $value !important;
+  }
+
+  .cds-min-w-#{$name} {
+    min-width: $value !important;
+  }
+}
+
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $widthHeight {
+      .#{$breakpoint}\:cds-w-#{$name} {
+        width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-w-#{$name} {
+        min-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-w-#{$name} {
+        max-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-h-#{$name} {
+        height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-h-#{$name} {
+        min-height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-h-#{$name} {
+        max-height: $value !important;
+      }
+    }
+  }
 }