@central-design-system/components 3.0.0-beta.8 → 3.0.0-rc.1

package/dist/composable/theme.d.ts

@@ -0,0 +1,73 @@
+import { ComputedRef } from 'vue';
+import type { TThemes } from '../themes';
+import type { App, DeepReadonly, InjectionKey, PropType, Ref } from 'vue';
+declare type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export declare type IThemeOptions = false | {
+    cspNonce?: string;
+    defaultTheme?: TThemes | string;
+    variations?: false | VariationOptions;
+    themes?: Record<string, ThemeDefinition>;
+};
+export declare type ThemeDefinition = DeepPartial<InternalThemeDefinition>;
+export declare type TTheme = typeof availableTheme[number];
+export interface Colors extends BaseColors {
+    [key: string]: string;
+}
+interface VariationOptions {
+    colors: string[];
+    lighten: number;
+    darken: number;
+}
+interface InternalThemeDefinition {
+    dark: boolean;
+    colors: Colors;
+    variables: Record<string, string | number>;
+}
+interface BaseColors {
+    'brand-primary': string;
+    'brand-primary-active': string;
+    'brand-primary-border': string;
+    'brand-primary-content': string;
+    'brand-primary-hover': string;
+    'brand-secondary': string;
+    'brand-secondary-active': string;
+    'brand-secondary-border': string;
+    'brand-secondary-hover': string;
+}
+export interface ThemeInstance {
+    readonly isDisabled: boolean;
+    readonly themes: Ref<Record<string, InternalThemeDefinition>>;
+    readonly name: Readonly<Ref<string>>;
+    readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
+    readonly computedThemes: DeepReadonly<Ref<Record<string, InternalThemeDefinition>>>;
+    readonly themeClasses: Readonly<ComputedRef<string | undefined>>;
+    readonly styles: Readonly<ComputedRef<string>>;
+    readonly global: {
+        readonly name: Ref<string>;
+        readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
+    };
+}
+export declare const ThemeSymbol: InjectionKey<ThemeInstance>;
+export declare const availableTheme: readonly ["cdsLight", "cdsDark", "b2bLight", "b2bDark"];
+export declare const makeThemeProps: <Defaults extends {
+    theme?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Тема
+     */
+    theme: {
+        type: PropType<string>;
+        available: readonly ["cdsLight", "cdsDark", "b2bLight", "b2bDark"];
+        default: undefined;
+    };
+}, Defaults>;
+export declare function createTheme(options?: IThemeOptions): ThemeInstance & {
+    install: (app: App) => void;
+};
+export declare function provideTheme(props: {
+    theme?: string;
+}): ThemeInstance;
+export declare function useTheme(): ThemeInstance;
+export {};

package/dist/composable/transition.d.ts

@@ -3,6 +3,8 @@ interface ITransitionProps extends TransitionProps {
     transition: string | boolean | (TransitionProps & {
         component?: Component;
     });
+    disabled?: boolean;
+    group?: boolean;
 }
 export declare const makeTransitionProps: <Defaults extends {
     transition?: unknown;

package/dist/composable/transparent.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, PropType } from 'vue';
+export interface ITransparentProps {
+    transparent: boolean;
+}
+export interface IUseTransparentProps {
+    transparentClasses: ComputedRef<string | undefined>;
+}
+export declare const makeTransparentProps: <Defaults extends {
+    transparent?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Позволяет использовать компонент на прозрачном фоне
+     */
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useTransparent(props: ITransparentProps, name: string): IUseTransparentProps;

package/dist/composable/validation.d.ts

@@ -1,5 +1,5 @@
-import type { PropType, ComputedRef, Ref } from 'vue';
 import type { MaybeRef } from '../utils';
+import type { PropType, ComputedRef, Ref } from 'vue';
 export declare type TValidationResult = string | boolean;
 export declare type TValidationRule = TValidationResult | PromiseLike<TValidationResult> | ((value: any) => TValidationResult) | ((value: any) => PromiseLike<TValidationResult>);
 export declare type TValidationOn = typeof allowedValidationOn[number];
@@ -102,7 +102,7 @@ export declare const makeValidationProps: <Defaults extends {
         default: undefined;
     };
     /**
-     * Убирает слот для сообщений об ошибках, если ошибок нет
+     * Убирает слот для сообщений об ошибках
      */
     hideMessages: {
         type: PropType<boolean>;

package/dist/composable/variant.d.ts

@@ -7,15 +7,12 @@ export interface IVariantProps {
 export interface IUseVariant {
     variantClasses: ComputedRef<string>;
 }
-export declare const allowedVariant: readonly ["default", "important"];
+export declare const allowedVariant: readonly ["default", "compact", "important"];
 export declare const makeVariantProps: <Defaults extends {
     variant?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
-    /**
-     * Вариант отображения
-     */
     variant: {
-        type: PropType<any>;
+        type: PropType<"default" | "compact" | "important">;
         default: string;
         validator: (value: TVariant) => boolean;
     };

package/dist/create.d.ts

@@ -1,15 +1,18 @@
+import { ITeleportOptions } from './components/CdsOverlay/composable';
 import { ILocale, TAvailableLocale } from './locale';
+import type { IDisplayOptions, IThemeOptions } from './composable';
 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;
+    theme?: IThemeOptions;
     cssGrid?: boolean;
     ssr?: boolean;
     locale?: TAvailableLocale | ILocale;
+    teleport?: Partial<ITeleportOptions>;
 }
 interface NuxtApp {
     $nuxt?: {
@@ -19,5 +22,8 @@ interface NuxtApp {
 export declare function createCds(options?: ICdsOptions): {
     install: (app: App & NuxtApp) => void;
     display: import("./composable").IDisplayInstance;
+    theme: import("./composable").ThemeInstance & {
+        install: (app: App<any>) => void;
+    };
 };
 export {};

package/dist/globals.d.ts

@@ -27,5 +27,12 @@ declare global {
     >;
   }
 
+  interface MouseEvent {
+    sourceCapabilities?: { firesTouchEvents: boolean };
+  }
+
+  function parseInt(s: string | number, radix?: number): number;
+  function parseFloat(string: string | number): number;
+
   export const __VUE_OPTIONS_API__: boolean | undefined;
 }

package/dist/locale/index.d.ts

@@ -1,11 +1,14 @@
+import type { TNotificationLocale } from '../components/CdsNotification/composable';
 import type { NTable } from '../components/CdsTable/interface';
 import type { NUploader } from '../components/CdsUploader/interface';
-import type { TNotificationLocale } from '../components/CdsNotification/composable';
 import type { TDateLocale } from '../utils';
 export interface ILocale {
     notification: TNotificationLocale;
     table: NTable.ILocale;
     date: TDateLocale;
+    time: {
+        now: string;
+    };
     container: {
         prev?: string;
         next?: string;

package/dist/themes/b2bDark.d.ts

@@ -0,0 +1,190 @@
+declare const _default: {
+    dark: boolean;
+    colors: {
+        'surface-secondary': string;
+        'surface-primary': string;
+        'surface-overlay': string;
+        'surface-inverse': string;
+        'surface-elevated': string;
+        'status-warning-surface': string;
+        'status-warning-line': string;
+        'status-warning-fill-hover': string;
+        'status-warning-fill': string;
+        'status-warning-content': string;
+        'status-success-surface': string;
+        'status-success-line': string;
+        'status-success-fill-hover': string;
+        'status-success-fill': string;
+        'status-success-content': string;
+        'status-progress-surface': string;
+        'status-progress-line': string;
+        'status-progress-fill-hover': string;
+        'status-progress-fill': string;
+        'status-progress-content': string;
+        'status-info-surface': string;
+        'status-info-line': string;
+        'status-info-fill-hover': string;
+        'status-info-fill': string;
+        'status-info-content': string;
+        'status-indication-surface': string;
+        'status-indication-line': string;
+        'status-indication-fill-hover': string;
+        'status-indication-fill': string;
+        'status-indication-content': string;
+        'status-danger-surface': string;
+        'status-danger-line': string;
+        'status-danger-fill-hover': string;
+        'status-danger-fill': string;
+        'status-danger-content': string;
+        'page-primary': string;
+        'other-teal-surface': string;
+        'other-teal-line': string;
+        'other-teal-fill-hover': string;
+        'other-teal-fill': string;
+        'other-teal-content': string;
+        'other-purple-surface': string;
+        'other-purple-line': string;
+        'other-purple-fill-hover': string;
+        'other-purple-fill': string;
+        'other-purple-content': string;
+        'other-pink-surface': string;
+        'other-pink-line': string;
+        'other-pink-fill-hover': string;
+        'other-pink-fill': string;
+        'other-pink-content': string;
+        'other-lime-surface': string;
+        'other-lime-line': string;
+        'other-lime-fill-hover': string;
+        'other-lime-fill': string;
+        'other-lime-content': string;
+        'other-lemon-surface': string;
+        'other-lemon-line': string;
+        'other-lemon-fill-hover': string;
+        'other-lemon-fill': string;
+        'other-lemon-content': string;
+        'other-indigo-surface': string;
+        'other-indigo-line': string;
+        'other-indigo-fill-hover': string;
+        'other-indigo-fill': string;
+        'other-indigo-content': string;
+        'other-cyan-surface': string;
+        'other-cyan-line': string;
+        'other-cyan-fill-hover': string;
+        'other-cyan-fill': string;
+        'other-cyan-content': string;
+        'other-chocolate-surface': string;
+        'other-chocolate-line': string;
+        'other-chocolate-fill-hover': string;
+        'other-chocolate-fill': string;
+        'other-chocolate-content': string;
+        'line-tertiary-hover': string;
+        'line-tertiary': string;
+        'line-selected-hover': string;
+        'line-selected': string;
+        'line-secondary-hover': string;
+        'line-secondary': string;
+        'line-primary-hover': string;
+        'line-primary': string;
+        'line-focus-outline': string;
+        'line-focus': string;
+        'line-elevated': string;
+        'line-disable': string;
+        'fill-selected-hover': string;
+        'fill-selected': string;
+        'fill-secondary-hover': string;
+        'fill-secondary-active': string;
+        'fill-secondary': string;
+        'fill-primary-hover': string;
+        'fill-primary-active': string;
+        'fill-primary': string;
+        'fill-elevated': string;
+        'fill-disable': string;
+        'content-tertiary': string;
+        'content-secondary': string;
+        'content-primary': string;
+        'content-placeholder': string;
+        'content-on-dark': string;
+        'content-link-visited': string;
+        'content-link': string;
+        'content-inverse': string;
+        'content-disable': string;
+        'brand-secondary-hover': string;
+        'brand-secondary-border': string;
+        'brand-secondary-active': string;
+        'brand-secondary': string;
+        'brand-primary-hover': string;
+        'brand-primary-content': string;
+        'brand-primary-border': string;
+        'brand-primary-active': string;
+        'brand-primary': string;
+    };
+    variables: {
+        'spacing-900': string;
+        'spacing-800': string;
+        'spacing-700': string;
+        'spacing-600': string;
+        'spacing-500': string;
+        'spacing-50': string;
+        'spacing-400': string;
+        'spacing-300': string;
+        'spacing-200': string;
+        'spacing-1100': string;
+        'spacing-1000': string;
+        'spacing-100': string;
+        'shadow-y-minus-400': string;
+        'shadow-y-minus-300': string;
+        'shadow-y-minus-200': string;
+        'shadow-y-minus-100': string;
+        'shadow-y-400': string;
+        'shadow-y-300': string;
+        'shadow-y-200': string;
+        'shadow-y-100': string;
+        'shadow-x-minus-400': string;
+        'shadow-x-minus-300': string;
+        'shadow-x-minus-200': string;
+        'shadow-x-minus-100': string;
+        'shadow-x-400': string;
+        'shadow-x-300': string;
+        'shadow-x-200': string;
+        'shadow-x-100': string;
+        'shadow-blur-400': string;
+        'shadow-blur-300': string;
+        'shadow-blur-200': string;
+        'shadow-blur-100': string;
+        'font-weight-regular': number;
+        'font-weight-bold': number;
+        'font-size-900': string;
+        'font-size-800': string;
+        'font-size-700': string;
+        'font-size-600': string;
+        'font-size-500': string;
+        'font-size-50': string;
+        'font-size-400': string;
+        'font-size-300': string;
+        'font-size-200': string;
+        'font-size-1100': string;
+        'font-size-1000': string;
+        'font-size-100': string;
+        'font-line-height-900': string;
+        'font-line-height-800': string;
+        'font-line-height-700': string;
+        'font-line-height-600': string;
+        'font-line-height-500': string;
+        'font-line-height-50': string;
+        'font-line-height-400': string;
+        'font-line-height-300': string;
+        'font-line-height-200': string;
+        'font-line-height-1100': string;
+        'font-line-height-1000': string;
+        'font-line-height-100': string;
+        'font-letter-spacing-500': string;
+        'font-family': string;
+        'border-radius-300': string;
+        'border-radius-200': string;
+        'border-radius-100': string;
+        'border-200': string;
+        'border-100': string;
+        'base-unit': string;
+    };
+};
+export default _default;

package/dist/themes/b2bLight.d.ts

@@ -0,0 +1,190 @@
+declare const _default: {
+    dark: boolean;
+    colors: {
+        'surface-secondary': string;
+        'surface-primary': string;
+        'surface-overlay': string;
+        'surface-inverse': string;
+        'surface-elevated': string;
+        'status-warning-surface': string;
+        'status-warning-line': string;
+        'status-warning-fill-hover': string;
+        'status-warning-fill': string;
+        'status-warning-content': string;
+        'status-success-surface': string;
+        'status-success-line': string;
+        'status-success-fill-hover': string;
+        'status-success-fill': string;
+        'status-success-content': string;
+        'status-progress-surface': string;
+        'status-progress-line': string;
+        'status-progress-fill-hover': string;
+        'status-progress-fill': string;
+        'status-progress-content': string;
+        'status-info-surface': string;
+        'status-info-line': string;
+        'status-info-fill-hover': string;
+        'status-info-fill': string;
+        'status-info-content': string;
+        'status-indication-surface': string;
+        'status-indication-line': string;
+        'status-indication-fill-hover': string;
+        'status-indication-fill': string;
+        'status-indication-content': string;
+        'status-danger-surface': string;
+        'status-danger-line': string;
+        'status-danger-fill-hover': string;
+        'status-danger-fill': string;
+        'status-danger-content': string;
+        'page-primary': string;
+        'other-teal-surface': string;
+        'other-teal-line': string;
+        'other-teal-fill-hover': string;
+        'other-teal-fill': string;
+        'other-teal-content': string;
+        'other-purple-surface': string;
+        'other-purple-line': string;
+        'other-purple-fill-hover': string;
+        'other-purple-fill': string;
+        'other-purple-content': string;
+        'other-pink-surface': string;
+        'other-pink-line': string;
+        'other-pink-fill-hover': string;
+        'other-pink-fill': string;
+        'other-pink-content': string;
+        'other-lime-surface': string;
+        'other-lime-line': string;
+        'other-lime-fill-hover': string;
+        'other-lime-fill': string;
+        'other-lime-content': string;
+        'other-lemon-surface': string;
+        'other-lemon-line': string;
+        'other-lemon-fill-hover': string;
+        'other-lemon-fill': string;
+        'other-lemon-content': string;
+        'other-indigo-surface': string;
+        'other-indigo-line': string;
+        'other-indigo-fill-hover': string;
+        'other-indigo-fill': string;
+        'other-indigo-content': string;
+        'other-cyan-surface': string;
+        'other-cyan-line': string;
+        'other-cyan-fill-hover': string;
+        'other-cyan-fill': string;
+        'other-cyan-content': string;
+        'other-chocolate-surface': string;
+        'other-chocolate-line': string;
+        'other-chocolate-fill-hover': string;
+        'other-chocolate-fill': string;
+        'other-chocolate-content': string;
+        'line-tertiary-hover': string;
+        'line-tertiary': string;
+        'line-selected-hover': string;
+        'line-selected': string;
+        'line-secondary-hover': string;
+        'line-secondary': string;
+        'line-primary-hover': string;
+        'line-primary': string;
+        'line-focus-outline': string;
+        'line-focus': string;
+        'line-elevated': string;
+        'line-disable': string;
+        'fill-selected-hover': string;
+        'fill-selected': string;
+        'fill-secondary-hover': string;
+        'fill-secondary-active': string;
+        'fill-secondary': string;
+        'fill-primary-hover': string;
+        'fill-primary-active': string;
+        'fill-primary': string;
+        'fill-elevated': string;
+        'fill-disable': string;
+        'content-tertiary': string;
+        'content-secondary': string;
+        'content-primary': string;
+        'content-placeholder': string;
+        'content-on-dark': string;
+        'content-link-visited': string;
+        'content-link': string;
+        'content-inverse': string;
+        'content-disable': string;
+        'brand-secondary-hover': string;
+        'brand-secondary-border': string;
+        'brand-secondary-active': string;
+        'brand-secondary': string;
+        'brand-primary-hover': string;
+        'brand-primary-content': string;
+        'brand-primary-border': string;
+        'brand-primary-active': string;
+        'brand-primary': string;
+    };
+    variables: {
+        'spacing-900': string;
+        'spacing-800': string;
+        'spacing-700': string;
+        'spacing-600': string;
+        'spacing-500': string;
+        'spacing-50': string;
+        'spacing-400': string;
+        'spacing-300': string;
+        'spacing-200': string;
+        'spacing-1100': string;
+        'spacing-1000': string;
+        'spacing-100': string;
+        'shadow-y-minus-400': string;
+        'shadow-y-minus-300': string;
+        'shadow-y-minus-200': string;
+        'shadow-y-minus-100': string;
+        'shadow-y-400': string;
+        'shadow-y-300': string;
+        'shadow-y-200': string;
+        'shadow-y-100': string;
+        'shadow-x-minus-400': string;
+        'shadow-x-minus-300': string;
+        'shadow-x-minus-200': string;
+        'shadow-x-minus-100': string;
+        'shadow-x-400': string;
+        'shadow-x-300': string;
+        'shadow-x-200': string;
+        'shadow-x-100': string;
+        'shadow-blur-400': string;
+        'shadow-blur-300': string;
+        'shadow-blur-200': string;
+        'shadow-blur-100': string;
+        'font-weight-regular': number;
+        'font-weight-bold': number;
+        'font-size-900': string;
+        'font-size-800': string;
+        'font-size-700': string;
+        'font-size-600': string;
+        'font-size-500': string;
+        'font-size-50': string;
+        'font-size-400': string;
+        'font-size-300': string;
+        'font-size-200': string;
+        'font-size-1100': string;
+        'font-size-1000': string;
+        'font-size-100': string;
+        'font-line-height-900': string;
+        'font-line-height-800': string;
+        'font-line-height-700': string;
+        'font-line-height-600': string;
+        'font-line-height-500': string;
+        'font-line-height-50': string;
+        'font-line-height-400': string;
+        'font-line-height-300': string;
+        'font-line-height-200': string;
+        'font-line-height-1100': string;
+        'font-line-height-1000': string;
+        'font-line-height-100': string;
+        'font-letter-spacing-500': string;
+        'font-family': string;
+        'border-radius-300': string;
+        'border-radius-200': string;
+        'border-radius-100': string;
+        'border-200': string;
+        'border-100': string;
+        'base-unit': string;
+    };
+};
+export default _default;