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

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 5/23/2023, 3:10:54 PM
+ * Generated on 6/1/2023, 2:01:09 PM
  **/
 export { default as CdsBadge } from './CdsBadge/CdsBadge.vue';
 export { default as CdsBreadcrumbs } from './CdsBreadcrumbs/CdsBreadcrumbs.vue';
@@ -30,6 +30,7 @@ export { default as CdsListItem } from './CdsList/CdsListItem.vue';
 export { default as CdsLoader } from './CdsLoader/CdsLoader.vue';
 export { default as CdsMenu } from './CdsMenu/CdsMenu.vue';
 export { default as CdsOverlay } from './CdsOverlay/CdsOverlay.vue';
+export { default as CdsPagination } from './CdsPagination/CdsPagination.vue';
 export { default as CdsRadio } from './CdsRadioButton/CdsRadio.vue';
 export { default as CdsRadioButton } from './CdsRadioButton/CdsRadioButton.vue';
 export { default as CdsSelect } from './CdsSelect/CdsSelect.vue';
@@ -40,3 +41,4 @@ export { default as CdsTag } from './CdsTag/CdsTag.vue';
 export { default as CdsTextArea } from './CdsTextArea/CdsTextArea.vue';
 export { default as CdsTextInput } from './CdsTextInput/CdsTextInput.vue';
 export { default as CdsTimePicker } from './CdsTimePicker/CdsTimePicker.vue';
+export { default as CdsTooltip } from './CdsTooltip/CdsTooltip.vue';

package/dist/composable/dimensions.d.ts

@@ -13,35 +13,53 @@ export interface IUseDimensions {
 }
 export declare const makeDimensionProps: <Defaults extends {
     height?: unknown;
+    width?: unknown;
     maxHeight?: unknown;
     maxWidth?: unknown;
     minHeight?: unknown;
     minWidth?: unknown;
-    width?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Высота
+     */
     height: {
         type: PropType<string | number>;
         default: string;
     };
+    /**
+     * Ширина
+     */
+    width: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    /**
+     * Максимальная высота
+     */
     maxHeight: {
         type: PropType<string | number>;
         default: string;
     };
+    /**
+     * Максимальная ширина
+     */
     maxWidth: {
         type: PropType<string | number>;
         default: string;
     };
+    /**
+     * Минимальная высота
+     */
     minHeight: {
         type: PropType<string | number>;
         default: string;
     };
+    /**
+     * Минимальная ширина
+     */
     minWidth: {
         type: PropType<string | number>;
         default: string;
     };
-    width: {
-        type: PropType<string | number>;
-        default: string;
-    };
 }, Defaults>;
 export declare function useDimensions(props: IDimensionsProps): IUseDimensions;

package/dist/composable/display.d.ts

@@ -0,0 +1,56 @@
+import type { InjectionKey, Ref } from 'vue';
+export declare const breakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare type TBreakpoint = typeof breakpoints[number];
+export interface IDisplayOptions {
+    mobileBreakpoint?: number | TBreakpoint;
+    thresholds?: Partial<TDisplayThresholds>;
+}
+export interface IDisplayInstance {
+    name: Ref<TBreakpoint>;
+    xs: Ref<boolean>;
+    sm: Ref<boolean>;
+    md: Ref<boolean>;
+    lg: Ref<boolean>;
+    xl: Ref<boolean>;
+    smUp: Ref<boolean>;
+    mdUp: Ref<boolean>;
+    lgUp: Ref<boolean>;
+    xlUp: Ref<boolean>;
+    smDown: Ref<boolean>;
+    mdDown: Ref<boolean>;
+    lgDown: Ref<boolean>;
+    xlDown: Ref<boolean>;
+    mobile: Ref<boolean>;
+    mobileBreakpoint: Ref<number | TBreakpoint>;
+    width: Ref<number>;
+    height: Ref<number>;
+    platform: Ref<TDisplayPlatform>;
+    thresholds: Ref<TDisplayThresholds>;
+    ssr: boolean;
+    update(): void;
+}
+export declare type TDisplayThresholds = {
+    [key in TBreakpoint]: number;
+};
+export declare type TDisplayPlatform = {
+    android: boolean;
+    ios: boolean;
+    cordova: boolean;
+    electron: boolean;
+    chrome: boolean;
+    edge: boolean;
+    firefox: boolean;
+    opera: boolean;
+    win: boolean;
+    mac: boolean;
+    linux: boolean;
+    touch: boolean;
+    ssr: boolean;
+};
+export declare type TSSROptions = boolean | {
+    clientWidth: number;
+    clientHeight?: number;
+};
+export declare const DisplaySymbol: InjectionKey<IDisplayInstance>;
+export declare function createDisplay(options?: IDisplayOptions, ssr?: TSSROptions): IDisplayInstance;
+export declare function useDisplay(): IDisplayInstance;

package/dist/composable/index.d.ts

@@ -34,3 +34,6 @@ export * from './select';
 export * from './filter';
 export * from './menu';
 export * from './datetime';
+export * from './resizeObserver';
+export * from './refs';
+export * from './display';

package/dist/composable/overlay.d.ts

@@ -75,7 +75,7 @@ export declare const makeOverlayProps: <Defaults extends {
         default: boolean;
     };
     /**
-     * Значение z-index для оверлея
+     * Значение z-index
      */
     zIndex: {
         type: PropType<string | number>;

package/dist/composable/refs.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+export interface IUseRefs<T extends {}> {
+    refs: Ref<(T | undefined)[]>;
+    updateRef: (value: any, index: number) => void;
+}
+export declare function useRefs<T extends {}>(): IUseRefs<T>;

package/dist/composable/resizeObserver.d.ts

@@ -0,0 +1,7 @@
+import type { DeepReadonly, Ref } from 'vue';
+interface IUseResizeObserver {
+    resizeRef: Ref<HTMLElement | undefined>;
+    contentRect: DeepReadonly<Ref<DOMRectReadOnly | undefined>>;
+}
+export declare function useResizeObserver(callback?: ResizeObserverCallback): IUseResizeObserver;
+export {};

package/dist/create.d.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue';
+import type { IDisplayOptions } from './composable';
+export interface ICdsOptions {
+    components?: Record<string, any>;
+    directives?: Record<string, any>;
+    icons?: Record<string, any>;
+    illustrations?: Record<string, any>;
+    display?: IDisplayOptions;
+    cssGrid?: boolean;
+    ssr?: boolean;
+}
+interface NuxtApp {
+    $nuxt?: {
+        hook: (name: string, fn: () => void) => void;
+    };
+}
+export declare function createCds(options?: ICdsOptions): {
+    install: (app: App & NuxtApp) => void;
+    display: import("./composable").IDisplayInstance;
+};
+export {};

package/dist/globals.d.ts

@@ -13,4 +13,6 @@ declare global {
       | undefined
     > & { lastMousedownWasOutside: boolean };
   }
+
+  export const __VUE_OPTIONS_API__: boolean | undefined;
 }

package/dist/utils/helpers.d.ts

@@ -101,6 +101,7 @@ export declare function convertToUnit(str: string | number | null | undefined, u
  * @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
@@ -111,6 +112,7 @@ export declare function isComponentInstance(obj: any): obj is ComponentPublicIns
 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;
 /**
  * Types
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -19,7 +19,6 @@
   },
   "files": [
     "dist",
-    "src/utils",
     "src/scss",
     "nuxt.js"
   ],

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 5/26/2023, 3:51:24 PM
+ * Generated on 6/1/2023, 2:19:29 PM
  **/
 
 /**

package/dist/types/CdsOptions.d.ts

@@ -1,3 +0,0 @@
-export interface ICdsOptions {
-  cssGrid?: boolean;
-}

package/src/utils/__test__/helper.test.ts

@@ -1,59 +0,0 @@
-import { pick, isObject, mergeDeep, getNestedValue, getObjectValueByPath, getPropertyFromItem } from '../helpers';
-import {
-  mockHelpersIsObject,
-  mockHelpersMergeDeep,
-  mockHelpersGetNestedValue,
-  mockHelpersGetObjectValueByPath,
-  mockHelpersGetPropertyFromItem,
-  mockHelpersPick
-} from './mocks/helper.mock';
-
-describe('isObject', () => {
-  mockHelpersIsObject.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      expect(isObject(initial)).toEqual(expected);
-    });
-  });
-});
-
-describe('mergeDeep', () => {
-  mockHelpersMergeDeep.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      expect(mergeDeep(initial.source, initial.target, initial.arrayFn)).toEqual(expected);
-    });
-  });
-});
-
-describe('getNestedValue', () => {
-  mockHelpersGetNestedValue.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      expect(getNestedValue(initial.obj, initial.path, initial.fallback)).toEqual(expected);
-    });
-  });
-});
-
-describe('getObjectValueByPath', () => {
-  mockHelpersGetObjectValueByPath.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      expect(getObjectValueByPath(initial.obj, initial.path, initial.fallback)).toEqual(expected);
-    });
-  });
-});
-
-describe('getPropertyFromItem', () => {
-  mockHelpersGetPropertyFromItem.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      expect(getPropertyFromItem(initial.item, initial.property, initial.fallback)).toEqual(expected);
-    });
-  });
-});
-
-describe('pick', () => {
-  mockHelpersPick.forEach(({ name, initial, expected }) => {
-    it(name, () => {
-      const [yes, no] = pick(initial.obj, initial.paths);
-      expect(yes).toEqual(expected.yes);
-      expect(no).toEqual(expected.no);
-    });
-  });
-});

package/src/utils/__test__/mocks/helper.mock.ts

@@ -1,362 +0,0 @@
-import type { IMockDataProvider } from '@/types/vitest';
-import type { SelectItemKey } from '@components/utils';
-
-export const mockHelpersIsObject: IMockDataProvider[] = [
-  {
-    name: 'returns true for objects',
-    initial: {},
-    expected: true
-  },
-  {
-    name: 'returns true for objects with value',
-    initial: { a: 'foo' },
-    expected: true
-  },
-  {
-    name: 'returns false for null',
-    initial: null,
-    expected: false
-  },
-  {
-    name: 'returns false for undefined',
-    initial: undefined,
-    expected: false
-  },
-  {
-    name: 'returns false for empty array',
-    initial: [],
-    expected: false
-  },
-  {
-    name: 'returns false for string',
-    initial: 'str',
-    expected: false
-  },
-  {
-    name: 'returns false for number',
-    initial: 42,
-    expected: false
-  },
-  {
-    name: 'returns false for boolean',
-    initial: true,
-    expected: false
-  },
-  {
-    name: 'returns false for function',
-    initial: () => {},
-    expected: false
-  }
-];
-
-type TMockHelpersMergeDeepInitial = {
-  source?: Record<string, any>;
-  target?: Record<string, any>;
-  arrayFn?: (a: unknown[], b: unknown[]) => unknown[];
-};
-export const mockHelpersMergeDeep: IMockDataProvider<TMockHelpersMergeDeepInitial>[] = [
-  {
-    name: 'should be merges empty objects',
-    initial: {},
-    expected: {}
-  },
-  {
-    name: 'should be merges simple objects',
-    initial: {
-      source: { a: 'foo' },
-      target: { b: 'bar' }
-    },
-    expected: {
-      a: 'foo',
-      b: 'bar'
-    }
-  },
-  {
-    name: 'should be deeply merges nested objects',
-    initial: {
-      source: {
-        a: {
-          b: {
-            c: 'foo'
-          }
-        }
-      },
-      target: {
-        a: {
-          b: {
-            c: 'foo',
-            d: 'bar'
-          }
-        }
-      }
-    },
-    expected: {
-      a: {
-        b: {
-          c: 'foo',
-          d: 'bar'
-        }
-      }
-    }
-  },
-  {
-    name: 'should be uses custom arrayFn to merge arrays',
-    initial: {
-      source: {
-        a: [
-          {
-            a: 'foo'
-          }
-        ]
-      },
-      target: {
-        a: [
-          {
-            b: 'bar'
-          }
-        ]
-      },
-      arrayFn: (a, b) => a.concat(b)
-    },
-    expected: {
-      a: [{ a: 'foo' }, { b: 'bar' }]
-    }
-  }
-];
-
-type TMockHelpersGetNestedValueInitial = {
-  obj?: Record<string, any>;
-  path: (string | number)[];
-  fallback?: any;
-};
-export const mockHelpersGetNestedValue: IMockDataProvider<TMockHelpersGetNestedValueInitial>[] = [
-  {
-    name: 'should return nested value when path is valid',
-    initial: {
-      obj: { a: { b: { c: 'x' } } },
-      path: ['a', 'b', 'c']
-    },
-    expected: 'x'
-  },
-  {
-    name: 'should return fallback when path is invalid',
-    initial: {
-      obj: { a: 'x' },
-      path: ['a', 'b', 'd'],
-      fallback: 'y'
-    },
-    expected: 'y'
-  },
-  {
-    name: 'should return fallback when obj is undefined',
-    initial: {
-      obj: undefined,
-      path: ['a', 'b', 'd'],
-      fallback: 'y'
-    },
-    expected: 'y'
-  },
-  {
-    name: 'should return obj when path is empty array',
-    initial: {
-      obj: {},
-      path: []
-    },
-    expected: {}
-  },
-  {
-    name: 'should return obj with fallback if provided and path is empty array',
-    initial: {
-      obj: undefined,
-      path: [],
-      fallback: 'y'
-    },
-    expected: 'y'
-  }
-];
-
-type TMockHelpersGetObjectValueByPathInitial = {
-  obj?: Record<string, any> | any;
-  path: string;
-  fallback?: any;
-};
-export const mockHelpersGetObjectValueByPath: IMockDataProvider<TMockHelpersGetObjectValueByPathInitial>[] = [
-  {
-    name: 'should return nested value when path is valid',
-    initial: {
-      obj: { a: { b: { c: 'x' } } },
-      path: 'a.b.c'
-    },
-    expected: 'x'
-  },
-  {
-    name: 'should handles indexed arrays',
-    initial: {
-      obj: { users: [{ name: 'Jane' }, { name: 'John' }] },
-      path: 'users[1].name'
-    },
-    expected: 'John'
-  },
-  {
-    name: 'should return fallback when path is invalid',
-    initial: {
-      obj: { a: 'x' },
-      path: 'a.b.d'
-    },
-    expected: undefined
-  },
-  {
-    name: 'should return fallback when obj is undefined',
-    initial: {
-      obj: undefined,
-      path: 'a.b.d',
-      fallback: 'y'
-    },
-    expected: 'y'
-  },
-  {
-    name: 'should return undefined when path is empty string',
-    initial: {
-      obj: {},
-      path: ''
-    },
-    expected: undefined
-  },
-  {
-    name: 'should return obj with fallback if provided and path is empty string',
-    initial: {
-      obj: undefined,
-      path: '',
-      fallback: 'y'
-    },
-    expected: 'y'
-  },
-  {
-    name: "should return obj[path] if it isn't undefined",
-    initial: {
-      obj: { firstKey: 'value' },
-      path: 'firstKey',
-      fallback: 'fallbackValue'
-    },
-    expected: 'value'
-  },
-  {
-    name: 'should return fallback in case of invalid input data',
-    initial: {
-      obj: null,
-      path: null as any,
-      fallback: 5
-    },
-    expected: 5
-  }
-];
-
-type TMockHelpersGetPropertyFromItem = {
-  item: any;
-  property: SelectItemKey;
-  fallback?: any;
-};
-export const mockHelpersGetPropertyFromItem: IMockDataProvider<TMockHelpersGetPropertyFromItem>[] = [
-  {
-    name: 'should return the item if property is null',
-    initial: {
-      item: 'item',
-      property: null as any,
-      fallback: 'fallback'
-    },
-    expected: 'item'
-  },
-  {
-    name: 'should return the item if property is undefined',
-    initial: {
-      item: undefined,
-      property: null as any,
-      fallback: 'fallback'
-    },
-    expected: 'fallback'
-  },
-  {
-    name: 'should return the fallback if item is not an object',
-    initial: {
-      item: 1,
-      property: 'path',
-      fallback: 'fallback'
-    },
-    expected: 'fallback'
-  },
-  {
-    name: 'should return the correct value for a string property',
-    initial: {
-      item: { path: 'value' },
-      property: 'path'
-    },
-    expected: 'value'
-  },
-  {
-    name: 'should return the correct value for an array property and fallback when not found',
-    initial: {
-      item: { path: { subpath: 'value' } },
-      property: ['path', 'subpath'],
-      fallback: 'fallback'
-    },
-    expected: 'value'
-  },
-  {
-    name: 'should return the correct value for a function property',
-    initial: {
-      item: { path: 'value' },
-      property: (item: any) => item.path,
-      fallback: 'fallback'
-    },
-    expected: 'value'
-  },
-  {
-    name: 'should return the fallback if the function returns undefined',
-    initial: {
-      item: { path: 'value' },
-      property: () => undefined,
-      fallback: 'fallback'
-    },
-    expected: 'fallback'
-  }
-];
-
-type TMockHelpersPick = {
-  obj: Record<string, any>;
-  paths: string[] | RegExp[] | any[];
-};
-export const mockHelpersPick: IMockDataProvider<TMockHelpersPick>[] = [
-  {
-    name: 'should correctly selects specified properties and returns both picked and unpicked objects',
-    initial: {
-      obj: { a: 1, b: 2, c: 3 },
-      paths: ['a', 'c']
-    },
-    expected: {
-      yes: { a: 1, c: 3 },
-      no: { b: 2 }
-    }
-  },
-  {
-    name: 'should correctly selects specified properties using regex',
-    initial: {
-      obj: { a: 1, b: 2, c: 3 },
-      paths: [/^[ab]$/]
-    },
-    expected: {
-      yes: { a: 1, b: 2 },
-      no: { c: 3 }
-    }
-  },
-  {
-    name: 'should returns empty objects for non-existing properties',
-    initial: {
-      obj: { a: 1, b: 2, c: 3 },
-      paths: ['x', 'y', 'z']
-    },
-    expected: {
-      yes: {},
-      no: { a: 1, b: 2, c: 3 }
-    }
-  }
-];