mediacube-ui-v2 0.0.98 → 0.0.100

package/dist/types/components/templates/McToast/McToast.vue.d.ts

@@ -16,7 +16,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     variation: {
         type: () => ColorTypes;
-        default: string;
     };
     /**
      * иконка
@@ -78,7 +77,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     variation: {
         type: () => ColorTypes;
-        default: string;
     };
     /**
      * иконка
@@ -130,12 +128,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     position: ToastPositionsUnion;
     icon: "reset" | "link" | "a_circle" | "access_time" | "account_circle" | "account_edit" | "add" | "add_circle" | "address" | "ads_banner" | "album" | "alert_solid" | "alternate_email" | "amocrm" | "amper_music" | "analytics" | "animation_motion" | "api" | "apple_icon" | "applications" | "applications_new" | "apps" | "archive" | "archive_in" | "archive_out" | "arrow-stats-down" | "arrow-stats-up" | "arrow_backward" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_leftward" | "arrow_rightward" | "arrow_to_grow_circle" | "arrow_up_down" | "arrow_upward" | "arrows" | "artist" | "assessment" | "assets_unassigned" | "assignment" | "assignment_ind" | "assist_icon" | "attach_money" | "audiotrack" | "backspace" | "bank" | "bank_building" | "bank_building_blue" | "bank_card" | "bank_card_arrow" | "bank_card_clock" | "bank_card_double" | "bank_card_virtual_blue" | "bank_money_colored" | "bankwire" | "bell" | "binance_coin_colored" | "biometrics" | "bitcoin" | "bitcoin_cash_colored" | "bitcoin_colored" | "board" | "book" | "broken_link" | "bug" | "bug_big" | "bug_report" | "building" | "building_colored" | "business_center" | "calendar" | "calendar_colored" | "calendar_load" | "calendar_sixteen" | "calendar_two_weeks" | "calendar_user" | "camera_alt" | "camera_plus" | "camera_video" | "cancel" | "cancel_alt" | "capitalist" | "capitalist_colored" | "card" | "card_off" | "card_off_circle" | "card_to_card_blue" | "card_to_card_colored" | "cash-ad" | "cash" | "category" | "cellphone" | "change_sheet" | "channels_icon" | "chart_bar" | "chart_line" | "chat" | "chat_add" | "chat_forum" | "chat_messages" | "check-rhombus" | "check" | "check_all" | "check_circle" | "check_circle_second" | "check_circle_solid" | "check_polygonal" | "checkbox--checked" | "checkbox" | "checkboxes" | "circle" | "circle_arrows" | "click" | "clickup" | "clip" | "clock_check" | "clock_solid" | "close" | "close_circle_outline" | "close_circle_solid" | "cloud_upload" | "coin_speed" | "comment" | "company" | "confetti" | "connection" | "contacts" | "contracts" | "convert" | "copy" | "copyright" | "credit-card" | "credit_card_blink" | "crypto" | "crypto_blue" | "crypto_colored" | "cryptowallet" | "cryptowallet_blue" | "cryptowallet_colored" | "cup" | "dashboard" | "date_range" | "deeplinks" | "delete-account" | "delete" | "delete_alt" | "deprecated" | "desktop_device" | "dialog" | "discord" | "discord_colored" | "dislike" | "doc-export" | "document" | "dollar" | "donate_blue" | "donate_colored" | "dot-status" | "download" | "drag" | "eWallet" | "e_wallet_blue" | "e_wallet_colored" | "edit" | "edit_solid" | "email" | "email_circle" | "email_colored" | "enrollment" | "epayments_colored" | "epidemic-sound" | "epidemic_sound_circle" | "error" | "ethereum_colored" | "event" | "event_alt" | "exit_to_app" | "explicit" | "export" | "export_all" | "express_payment" | "face" | "face_alt" | "facebook" | "facebook_colored" | "fast" | "favorite" | "file" | "file_add" | "file_copy" | "file_download" | "file_export" | "file_eye" | "file_import" | "file_new" | "filter_list" | "find_in_page" | "fire" | "fire_colored" | "fire_solid" | "flag_ar" | "flag_en" | "flag_es" | "flag_pt" | "flag_ru" | "flag_th" | "flag_vi" | "fly_dollar" | "fly_euro" | "freeze" | "fullscreen" | "get_app" | "gift_solid" | "glasses" | "google_colored" | "googleplus_colored" | "graph-no-data" | "group" | "group_connection" | "growth_arrow_circle" | "hand_money" | "help" | "help_invert" | "help_solid" | "help_ukraine_colored" | "home" | "iban" | "iban_blue" | "id_square" | "id_thin" | "image" | "infinity" | "info" | "info_rounded_square" | "info_solid" | "instagram" | "instagram_colored" | "keyboard" | "keyboard_arrow_left" | "keyboard_arrow_right" | "keyboard_arrow_right_thin" | "kraken" | "language" | "layers" | "lightning" | "lightning_circle" | "lightning_circle_solid" | "lightning_outlined" | "like" | "link_broken" | "link_colored" | "link_external" | "link_external_new" | "linkedin" | "linkedin_colored" | "list" | "litecoin_colored" | "live_help" | "loader" | "location_city" | "location_on" | "lock" | "lock_old" | "logout" | "magic_blink" | "mail_outline" | "mc_assist" | "mc_dashboard" | "mc_id" | "mc_pay" | "mc_pay_app" | "mc_pay_compact" | "mc_pay_menu" | "mc_pay_menu_circle_colored" | "mc_pay_mobile_app" | "mc_studio" | "mc_vidwide" | "mcadslogo" | "mediacube" | "menu" | "menu_new" | "message" | "messenger" | "messenger_colored" | "minus" | "mobile_device" | "money_clock" | "money_input" | "more_horiz" | "music" | "music_icon" | "new" | "notes" | "objects" | "obs" | "okru" | "okru_colored" | "ondemand_video" | "partners" | "pause" | "pause_circle_solid" | "payment" | "payoneer" | "payoneer_colored" | "payoneer_cy" | "paypal" | "paypal_colored" | "percent" | "personal_email_colored" | "phone_colored" | "photo_add" | "picture" | "picture_thin" | "plane" | "play-videos" | "play" | "play_circle_solid" | "print" | "prototype" | "public" | "qiwi" | "qiwi_colored" | "radio--checked" | "ready" | "receipt" | "receipt_thin" | "recording" | "recording_circle" | "recruiters" | "redo" | "referral" | "referral_solid" | "reload" | "reload_right" | "remove_red_eye" | "repair" | "reply_arrow" | "requisites" | "resize_video" | "revenue" | "review" | "ripple_colored" | "rocket" | "rocket_colored" | "rocket_small" | "role" | "safety" | "sand_clock" | "save" | "search" | "send" | "send_solid" | "settings" | "settings_solid" | "settings_tools" | "shield" | "shield_blue" | "shield_colored" | "shield_usd" | "shop" | "shopping_cart" | "shuffle" | "sign_out" | "skype" | "skype_colored" | "slack" | "smile_star_eye" | "sort_asc" | "sort_az" | "sort_desc" | "sort_directions" | "sort_list" | "sort_za" | "spy_colored" | "staff" | "star" | "star_round" | "star_round_solid" | "stars" | "stars_fill" | "stats_icon" | "steam" | "steam_colored" | "studio_icon" | "subscriptions" | "suitcase" | "supervised_user_circle" | "support" | "swap_cubes" | "swap_cubes_colored" | "swap_horizontal_circle" | "switches" | "table" | "telegram" | "telegram_colored" | "tether" | "tether_colored" | "three_dots" | "thumb_down" | "thumb_up" | "tiktok" | "time" | "time_thin" | "timelapse" | "timeline" | "tipalti" | "transaction" | "twitter_colored" | "unarchive" | "unfold_more" | "unlock" | "upload_img" | "usd_coin_colored" | "user" | "user_edit" | "user_kyc" | "viber" | "viber_colored" | "videoblocks" | "vidiq-logo-mono" | "vidiq_circle" | "visibility" | "visibility_off" | "vkontakte" | "vkontakte_colored" | "wallet" | "warning" | "webmoney" | "webmoney_colored" | "website_colored" | "whatsapp" | "whatsapp_colored" | "wise_colored" | "worldfirst" | "x_network" | "yandexmoney" | "yoomoney_colored" | "youtube" | "youtube_circled" | "youtube_circled_second" | "youtube_colored" | "youtube_outlined" | "zcash_colored";
     title: string;
-    variation: "transparent" | "purple" | "hover-purple" | "light-purple" | "bg-purple" | "lighter-purple" | "black" | "outline-light" | "dark-gray" | "gray" | "outline-gray" | "hover-gray" | "bg-gray" | "white" | "hover-blue" | "blue" | "light-blue" | "lighter-blue" | "dark-orange" | "orange" | "yellow" | "dark-red" | "red" | "bright-pink" | "pale-pink" | "dark-green" | "green" | "toxic" | "ultraviolet" | "pinkish" | "azure" | "turquoise" | "darken-turquoise";
+    closable: boolean;
     duration: number;
     description: string;
-    closable: boolean;
-    show_time: boolean;
     actions: IToastAction[];
+    show_time: boolean;
     toast: IToast;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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,142 @@
+export declare function useTheme(component?: string): {
+    colors: Record<string, string> | {
+        main: string;
+        "main-light": string;
+        "main-lighter": string;
+        "main-dark": 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,147 @@
+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;
+    "main-light": string;
+    "main-lighter": string;
+    "main-dark": 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,8 @@
 export declare const Colors: {
+    main: string;
+    "main-light": string;
+    "main-lighter": string;
+    "main-dark": string;
     purple: string;
     "hover-purple": string;
     "light-purple": string;
@@ -10,6 +14,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 +39,10 @@ export declare const Colors: {
     transparent: string;
 };
 declare const modes: {
+    readonly main: string;
+    readonly "main-light": string;
+    readonly "main-lighter": string;
+    readonly "main-dark": string;
     readonly purple: string;
     readonly "hover-purple": string;
     readonly "light-purple": string;
@@ -45,6 +54,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.100",
   "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",