mediacube-ui-v2 0.0.98 → 0.0.99

package/dist/types/composables/index.d.ts

@@ -7,3 +7,4 @@ export { useModal } from './useModal';
 export { useRandomNumber } from './useRandomNumber';
 export { useTooltip } from './useTooltip';
 export { useToast } from './useToast';
+export { useTheme } from './useTheme';

package/dist/types/composables/useHelper.d.ts

@@ -11,6 +11,13 @@ declare function pickDeep(object: {
 declare function hasProperty(object: object, prop: string): boolean;
 declare function isNumber(payload: any): boolean;
 declare function upperFirst(str: string): string;
+/**
+ *  Для создания корректного реактивного результата, overrides - должен быть реактивным
+ *  На выходе получается реактивный обьект, который при обращении к свойствам, достает значения из overrides или из дефолтных значений
+ * */
+declare function mergeReactiveDefaults<T>(defaults: T, overrides: Partial<T>): T;
+declare function setNested(object: any, path: string, value: any): void;
+declare function getNested(object: any, path: string): any;
 export declare function useHelper(): {
     isEmpty: typeof isEmpty;
     isEqual: typeof isEqual;
@@ -21,5 +28,8 @@ export declare function useHelper(): {
     isNumber: typeof isNumber;
     upperFirst: typeof upperFirst;
     pickDeep: typeof pickDeep;
+    mergeReactiveDefaults: typeof mergeReactiveDefaults;
+    setNested: typeof setNested;
+    getNested: typeof getNested;
 };
 export {};

package/dist/types/composables/useTheme.d.ts

@@ -0,0 +1,139 @@
+export declare function useTheme(component?: string): {
+    colors: Record<string, string> | {
+        main: string;
+        purple: string;
+        "hover-purple": string;
+        "light-purple": string;
+        "bg-purple": string;
+        "lighter-purple": string;
+        black: string;
+        "outline-light": string;
+        "dark-gray": string;
+        gray: string;
+        "outline-gray": string;
+        "hover-gray": string;
+        "light-gray": string;
+        "bg-gray": string;
+        white: string;
+        "hover-blue": string;
+        blue: string;
+        "light-blue": string;
+        "lighter-blue": string;
+        "dark-orange": string;
+        orange: string;
+        yellow: string;
+        "dark-red": string;
+        red: string;
+        "bright-pink": string;
+        "pale-pink": string;
+        "dark-green": string;
+        green: string;
+        toxic: string;
+        ultraviolet: string;
+        pinkish: string;
+        azure: string;
+        turquoise: string;
+        "darken-turquoise": string;
+        transparent: string;
+    };
+    components: {
+        badge: {
+            variation: string;
+        };
+        button: {
+            variation: string;
+        };
+        chip: {
+            variation: string;
+            textColor: string;
+        };
+        cropper: {
+            color: string;
+        };
+        datepicker: {
+            color: string;
+        };
+        draggable: {
+            variation: string;
+        };
+        checkbox: {
+            color: string;
+        };
+        radio: {
+            color: string;
+        };
+        range: {
+            color: string;
+        };
+        select: {
+            color: string;
+            selected: string;
+        };
+        fieldText: {
+            color: string;
+        };
+        fieldToggle: {
+            color: string;
+            bg: string;
+        };
+        bottomLoader: {
+            border: string;
+        };
+        noData: {
+            link: string;
+        };
+        notification: {
+            variation: string;
+        };
+        progress: {
+            color: string;
+            helpText: string;
+        };
+        separator: {
+            color: string;
+        };
+        spinDigit: {
+            color: string;
+        };
+        spinNumber: {
+            color: string;
+        };
+        title: {
+            color: string;
+        };
+        tooltip: {
+            color: string;
+            textColor: string;
+        };
+        dropdown: {
+            itemColor: string;
+        };
+        filter: {
+            color: string;
+            chipColor: string;
+            button: string;
+        };
+        overlay: {
+            bg: string;
+            border: string;
+        };
+        sidebar: {
+            chip: string;
+            activeLink: string;
+        };
+        tab: {
+            count: string;
+        };
+        tabs: {
+            color: string;
+            accentColor: string;
+        };
+        tableCard: {
+            backLink: string;
+        };
+        toast: {
+            variation: string;
+        };
+    } | undefined;
+    component: any;
+};

package/dist/types/enums/Themes.d.ts

@@ -0,0 +1,4 @@
+export declare enum Themes {
+    Light = "light",
+    Dark = "dark"
+}

package/dist/types/enums/index.d.ts

@@ -14,6 +14,7 @@ export * from './RadioGroup';
 export * from './Select';
 export * from './Sidebar';
 export * from './Tab';
+export * from './Themes';
 export * from './Title';
 export * from './Toast';
 export * from './Tooltip';

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { App } from 'vue';
+import { IDSOptions } from './types';
 export * from './types';
 export * from './enums';
 export * from './components';
@@ -7,6 +8,6 @@ export * from './consts';
 export * from './utils';
 export * from './assets/tokens/json';
 declare const _default: {
-    install(app: App, options?: {}): void;
+    install(app: App, options?: IDSOptions): void;
 };
 export default _default;

package/dist/types/types/IDSOptions.d.ts

@@ -1,10 +1,15 @@
 import { Router } from 'vue-router';
 import { VueElement } from 'vue';
 import { IToast } from './IToast';
+import { Themes } from '../enums';
+import { ColorThemes } from '.';
 export interface IDSOptions {
     drawerComponents?: Partial<VueElement>;
     modalComponents?: Partial<VueElement>;
     toasts?: Partial<IToast>;
     defaultAvatar?: string | null;
     router?: null | Router;
+    colors?: Record<string, string>;
+    themes?: ColorThemes;
+    theme?: Themes;
 }

package/dist/types/types/index.d.ts

@@ -25,6 +25,7 @@ export * from './ITooltip';
 export * from './styles/Alignment';
 export * from './styles/AvatarSizes';
 export * from './styles/Colors';
+export * from './styles/ColorTheme';
 export * from './styles/Durations';
 export * from './styles/FontSizes';
 export * from './styles/FontWeights';

package/dist/types/types/styles/ColorTheme.d.ts

@@ -0,0 +1,144 @@
+import { ColorTypes } from '..';
+export interface ColorTheme {
+    components: {
+        badge: {
+            variation: ColorTypes | string;
+        };
+        button: {
+            variation: ColorTypes | string;
+        };
+        chip: {
+            variation: ColorTypes | string;
+            textColor: ColorTypes | string;
+        };
+        cropper: {
+            color: ColorTypes | string;
+        };
+        datepicker: {
+            color: ColorTypes | string;
+        };
+        draggable: {
+            variation: ColorTypes | string;
+        };
+        checkbox: {
+            color: ColorTypes | string;
+        };
+        radio: {
+            color: ColorTypes | string;
+        };
+        range: {
+            color: ColorTypes | string;
+        };
+        select: {
+            color: ColorTypes | string;
+            selected: ColorTypes | string;
+        };
+        fieldText: {
+            color: ColorTypes | string;
+        };
+        fieldToggle: {
+            color: ColorTypes | string;
+            bg: ColorTypes | string;
+        };
+        bottomLoader: {
+            border: ColorTypes | string;
+        };
+        noData: {
+            link: ColorTypes | string;
+        };
+        notification: {
+            variation: ColorTypes | string;
+        };
+        progress: {
+            color: ColorTypes | string;
+            helpText: ColorTypes | string;
+        };
+        separator: {
+            color: ColorTypes | string;
+        };
+        spinDigit: {
+            color: ColorTypes | string;
+        };
+        spinNumber: {
+            color: ColorTypes | string;
+        };
+        title: {
+            color: ColorTypes | string;
+        };
+        tooltip: {
+            color: ColorTypes | string;
+            textColor: ColorTypes | string;
+        };
+        dropdown: {
+            itemColor: ColorTypes | string;
+        };
+        filter: {
+            color: ColorTypes | string;
+            chipColor: ColorTypes | string;
+            button: ColorTypes | string;
+        };
+        overlay: {
+            bg: ColorTypes | string;
+            border: ColorTypes | string;
+        };
+        sidebar: {
+            chip: ColorTypes | string;
+            activeLink: ColorTypes | string;
+        };
+        tab: {
+            count: ColorTypes | string;
+        };
+        tabs: {
+            color: ColorTypes | string;
+            accentColor: ColorTypes | string;
+        };
+        tableCard: {
+            backLink: ColorTypes | string;
+        };
+        toast: {
+            variation: ColorTypes | string;
+        };
+    };
+}
+export interface ColorThemes {
+    light: ColorTheme;
+    dark: ColorTheme;
+}
+export declare const ThemesColors: {
+    main: string;
+    purple: string;
+    "hover-purple": string;
+    "light-purple": string;
+    "bg-purple": string;
+    "lighter-purple": string;
+    black: string;
+    "outline-light": string;
+    "dark-gray": string;
+    gray: string;
+    "outline-gray": string;
+    "hover-gray": string;
+    "light-gray": string;
+    "bg-gray": string;
+    white: string;
+    "hover-blue": string;
+    blue: string;
+    "light-blue": string;
+    "lighter-blue": string;
+    "dark-orange": string;
+    orange: string;
+    yellow: string;
+    "dark-red": string;
+    red: string;
+    "bright-pink": string;
+    "pale-pink": string;
+    "dark-green": string;
+    green: string;
+    toxic: string;
+    ultraviolet: string;
+    pinkish: string;
+    azure: string;
+    turquoise: string;
+    "darken-turquoise": string;
+    transparent: string;
+};
+export declare const UiThemes: ColorThemes;

package/dist/types/types/styles/Colors.d.ts

@@ -1,4 +1,5 @@
 export declare const Colors: {
+    main: string;
     purple: string;
     "hover-purple": string;
     "light-purple": string;
@@ -10,6 +11,7 @@ export declare const Colors: {
     gray: string;
     "outline-gray": string;
     "hover-gray": string;
+    "light-gray": string;
     "bg-gray": string;
     white: string;
     "hover-blue": string;
@@ -34,6 +36,7 @@ export declare const Colors: {
     transparent: string;
 };
 declare const modes: {
+    readonly main: string;
     readonly purple: string;
     readonly "hover-purple": string;
     readonly "light-purple": string;
@@ -45,6 +48,7 @@ declare const modes: {
     readonly gray: string;
     readonly "outline-gray": string;
     readonly "hover-gray": string;
+    readonly "light-gray": string;
     readonly "bg-gray": string;
     readonly white: string;
     readonly "hover-blue": string;

package/dist/types/utils/index.d.ts

@@ -1,2 +1,4 @@
 export * from './dayjs';
-export * from './mcGridColAdaptiveProps';
+export * as mcGridColAdaptiveProps from './mcGridColAdaptiveProps';
+export * as mcSvgIconAdaptiveProps from './mcSvgIconAdaptiveProps';
+export * as mcTitleAdaptiveProps from './mcTitleAdaptiveProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.98",
+  "version": "0.0.99",
   "license": "MIT",
   "description": "Design system for Mediacube services",
   "keywords": [
@@ -13,6 +13,7 @@
   "main": "./dist/mediacube-ui-v2.umd.cjs",
   "module": "./dist/mediacube-ui-v2.js",
   "types": "./dist/types/index.d.ts",
+  "variables": "./dist/assets/variables.scss",
   "style": "./dist/style.css",
   "font": "./dist/assets/fonts/inter/inter.css",
   "sprite": "./dist/assets/iconsSprite.svg",