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

package/dist/composable/select.d.ts

@@ -1,24 +1,24 @@
 import { MaybePick } from '../utils';
 import type { PropType, ComputedRef, Ref } from 'vue';
 import type { IInternalItem, IUseItems } from './items';
+import type { TCdsIconsName } from '@central-design-system/icons';
 export interface ISelectProps {
     multiple: boolean;
     openOnClear: boolean;
     hideSelected: boolean;
-    noDataText: string;
     hideNoData: boolean;
     isSelectAll: boolean;
-    selectAllText: string;
     modelValue: any;
 }
 export declare const makeSelectProps: <Defaults extends {
     multiple?: unknown;
     openOnClear?: unknown;
     hideSelected?: unknown;
-    noDataText?: unknown;
     hideNoData?: unknown;
     isSelectAll?: unknown;
-    selectAllText?: unknown;
+    ellipsis?: unknown;
+    listProps?: unknown;
+    menuIcon?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
     /**
      * Множественный выбор элементов
@@ -41,13 +41,6 @@ export declare const makeSelectProps: <Defaults extends {
         type: PropType<boolean>;
         default: boolean;
     };
-    /**
-     * Текст, который будет отображаться, если нет данных
-     */
-    noDataText: {
-        type: PropType<string>;
-        default: string;
-    };
     /**
      * Скрывать отображаемый текст, если нет данных
      */
@@ -63,11 +56,128 @@ export declare const makeSelectProps: <Defaults extends {
         default: boolean;
     };
     /**
-     * Текст для выбора всех элементов
+     * Отображать элементы выбранного списка в одну строку
+     */
+    ellipsis: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Свойства для списка
+     */
+    listProps: {
+        type: PropType<Omit<Partial<{
+            items: any[];
+            itemTitle: import("./items").TItemKey;
+            itemValue: import("./items").TItemKey;
+            itemChildren: import("./items").TItemKey;
+            itemProps: import("./items").TItemKey;
+            returnObject: boolean;
+            tag: string;
+            size: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
+            disabled: boolean;
+            dark: boolean;
+            required: boolean;
+            selectStrategy: NonNullable<import("./nested/selectStrategies").TSelectStrategyProp>;
+            openStrategy: NonNullable<import("./nested/openStrategies").TOpenStrategyProp>;
+            theme: string;
+            lines: false | "one" | "two" | "three";
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            theme: {
+                type: PropType<string>;
+                available: readonly ["cds", "b2b", "promo", "dark"];
+                default: undefined;
+            };
+            selectStrategy: {
+                type: PropType<NonNullable<import("./nested/selectStrategies").TSelectStrategyProp>>;
+                default: NonNullable<import("./nested/selectStrategies").TSelectStrategyProp>;
+            };
+            openStrategy: {
+                type: PropType<NonNullable<import("./nested/openStrategies").TOpenStrategyProp>>;
+                default: NonNullable<import("./nested/openStrategies").TOpenStrategyProp>;
+            };
+            opened: PropType<unknown[]>;
+            selected: PropType<unknown[]>;
+            required: BooleanConstructor;
+            dark: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
+            disabled: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
+            size: Omit<{
+                type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+                default: string;
+                available: readonly ["xs", "sm", "md", "lg", "xl"];
+                validator: (value: "xs" | "sm" | "md" | "lg" | "xl") => boolean;
+            }, "default" | "type"> & {
+                type: PropType<NonNullable<"xs" | "sm" | "md" | "lg" | "xl">>; /**
+                 * Иконка выпадающего меню
+                 */
+                default: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
+            };
+            tag: {
+                type: PropType<string>;
+                default: string;
+                description: string;
+            };
+            items: {
+                type: PropType<any[]>;
+                default: () => never[];
+            };
+            itemTitle: {
+                type: PropType<import("./items").TItemKey>;
+                default: string;
+            };
+            itemValue: {
+                type: PropType<import("./items").TItemKey>;
+                default: string;
+            };
+            itemChildren: {
+                type: PropType<import("./items").TItemKey>;
+                default: string;
+            };
+            itemProps: {
+                type: PropType<import("./items").TItemKey>;
+                default: string; /**
+                 * Иконка выпадающего меню
+                 */
+            };
+            returnObject: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
+            lines: {
+                type: PropType<false | "one" | "two" | "three">;
+                default: string;
+            };
+        }>> & {
+            "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
+            "onUpdate:opened"?: ((value: unknown[]) => any) | undefined;
+            "onClick:open"?: ((value: {
+                id: unknown;
+                value: boolean;
+                path: unknown[];
+                event: Event;
+            }) => any) | undefined;
+            "onClick:select"?: ((value: {
+                id: unknown;
+                value: boolean;
+                path: unknown[];
+                event: Event;
+            }) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "dark" | "required" | "selectStrategy" | "openStrategy" | "theme" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        default: undefined;
+    };
+    /**
+     * Иконка выпадающего меню
      */
-    selectAllText: {
-        type: PropType<string>;
+    menuIcon: {
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
         default: string;
+        validator: (value: TCdsIconsName) => boolean;
     };
 }, Defaults>;
 export declare function useSelect(props: ISelectProps, items: ComputedRef<IInternalItem[]> | Ref<IInternalItem[]>, transformIn: IUseItems['transformIn'], transformOut: IUseItems['transformOut']): {

package/dist/composable/ssrBoot.d.ts

@@ -0,0 +1,6 @@
+export declare function useSsrBoot(): {
+    ssrBootStyles: import("vue").ComputedRef<{
+        transition: string;
+    } | undefined>;
+    isBooted: Readonly<import("vue").Ref<boolean>>;
+};

package/dist/composable/state.d.ts

@@ -0,0 +1,13 @@
+import type { Ref, UnwrapRef } from 'vue';
+/**
+ * Хук для работы с состоянием как в react.js на основе ref vue 3
+ * Может быть удобен в некоторых случаях
+ * @param defaultStateValue
+ */
+export declare function useState<T, R = Ref<T>>(defaultStateValue?: T | (() => T)): [R, (val: T) => void];
+export declare function useMergedState<T, R = Ref<T>>(defaultStateValue: T | (() => T), option?: {
+    defaultValue?: T | (() => T);
+    value?: Ref<T> | Ref<UnwrapRef<T>>;
+    onChange?: (val: T, prevValue: T) => void;
+    postState?: (val: T) => T;
+}): [R, (val: T) => void];

package/dist/composable/status.d.ts

@@ -1,3 +1,4 @@
+import { MaybeRef } from '../utils';
 import type { ComputedRef, PropType } from 'vue';
 export declare type TStatus = typeof allowedStatus[number];
 export interface IStatusProps {
@@ -10,6 +11,9 @@ export declare const allowedStatus: readonly ["info", "success", "warning", "err
 export declare const makeStatusProps: <Defaults extends {
     status?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Статус состояния
+     */
     status: {
         type: PropType<"error" | "info" | "success" | "warning" | "progress">;
         default: string;
@@ -18,4 +22,4 @@ export declare const makeStatusProps: <Defaults extends {
         validator: (value: TStatus) => boolean;
     };
 }, Defaults>;
-export declare function useStatus(props: IStatusProps, name: string): IUseStatus;
+export declare function useStatus(props: MaybeRef<IStatusProps>, name: string): IUseStatus;

package/dist/composable/tag.d.ts

@@ -1,7 +1,4 @@
 import type { PropType } from 'vue';
-export interface ITagProps {
-    tag: string;
-}
 export declare const makeTagProps: <Defaults extends {
     tag?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{

package/dist/composable/text.d.ts

@@ -1,8 +1,9 @@
-import type { PropType } from 'vue';
+import type { PropType, ComputedRef } from 'vue';
 export interface ITextProps {
     text: string | undefined;
 }
 export interface IUseText {
+    hasText: ComputedRef<boolean>;
 }
 export declare const makeTextProps: <Defaults extends {
     text?: unknown;
@@ -15,3 +16,4 @@ export declare const makeTextProps: <Defaults extends {
         default: undefined;
     };
 }, Defaults>;
+export declare function useText(props: ITextProps, slots: Record<string, unknown>): IUseText;

package/dist/composable/theme.d.ts

@@ -0,0 +1,82 @@
+import { ComputedRef } from 'vue';
+import type { App, DeepReadonly, InjectionKey, PropType, Ref } from 'vue';
+import type { TThemes } from '../themes';
+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, OnColors {
+    [key: string]: string;
+}
+interface VariationOptions {
+    colors: string[];
+    lighten: number;
+    darken: number;
+}
+interface InternalThemeDefinition {
+    dark: boolean;
+    colors: Colors;
+    variables: Record<string, string | number>;
+}
+interface BaseColors {
+    background: string;
+    surface: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    info: string;
+    error: string;
+}
+interface OnColors {
+    'on-background': string;
+    'on-surface': string;
+    'on-primary': string;
+    'on-secondary': string;
+    'on-success': string;
+    'on-warning': string;
+    'on-info': string;
+    'on-error': 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 ["cds", "b2b", "promo", "dark"];
+export declare const makeThemeProps: <Defaults extends {
+    theme?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Тема
+     */
+    theme: {
+        type: PropType<string>;
+        available: readonly ["cds", "b2b", "promo", "dark"];
+        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/variant.d.ts

@@ -0,0 +1,26 @@
+import { MaybeRef } from '../utils';
+import type { ComputedRef, PropType } from 'vue';
+export declare type TVariant = typeof allowedVariant[number];
+export interface IVariantProps {
+    variant: TVariant;
+}
+export interface IUseVariant {
+    variantClasses: ComputedRef<string>;
+}
+export declare const allowedVariant: readonly ["default", "important"];
+export declare const makeVariantProps: <Defaults extends {
+    variant?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Вариант отображения
+     */
+    variant: {
+        type: PropType<"default" | "important">;
+        default: string;
+        validator: (value: TVariant) => boolean;
+    };
+}, Defaults>;
+export declare function useVariant(props: MaybeRef<IVariantProps>, name: string): IUseVariant;
+export declare function genOverlays(isClickable: boolean, name: string): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;

package/dist/create.d.ts

@@ -1,13 +1,16 @@
+import { ILocale, TAvailableLocale } from './locale';
 import type { App } from 'vue';
-import type { IDisplayOptions } from './composable';
+import type { IDisplayOptions, IThemeOptions } 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;
 }
 interface NuxtApp {
     $nuxt?: {

package/dist/directives/index.d.ts

@@ -1 +1,3 @@
 export { ClickOutside } from './click-outside';
+export { Touch } from './touch';
+export { Intersect } from './intersect';

package/dist/directives/intersect/index.d.ts

@@ -0,0 +1,19 @@
+import type { DirectiveBinding } from 'vue';
+declare type ObserveHandler = (isIntersecting: boolean, entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void;
+export interface ObserverDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    value?: ObserveHandler | {
+        handler: ObserveHandler;
+        options?: IntersectionObserverInit;
+    };
+    modifiers: {
+        once?: boolean;
+        quiet?: boolean;
+    };
+}
+declare function mounted(el: HTMLElement, binding: ObserverDirectiveBinding): void;
+declare function unmounted(el: HTMLElement, binding: ObserverDirectiveBinding): void;
+export declare const Intersect: {
+    mounted: typeof mounted;
+    unmounted: typeof unmounted;
+};
+export default Intersect;

package/dist/directives/touch/index.d.ts

@@ -0,0 +1,46 @@
+import type { DirectiveBinding } from 'vue';
+export interface ITouchHandlers {
+    start?: (wrapperEvent: {
+        originalEvent: TouchEvent;
+    } & ITouchData) => void;
+    end?: (wrapperEvent: {
+        originalEvent: TouchEvent;
+    } & ITouchData) => void;
+    move?: (wrapperEvent: {
+        originalEvent: TouchEvent;
+    } & ITouchData) => void;
+    left?: (wrapper: ITouchData) => void;
+    right?: (wrapper: ITouchData) => void;
+    up?: (wrapper: ITouchData) => void;
+    down?: (wrapper: ITouchData) => void;
+}
+export interface ITouchData {
+    touchstartX: number;
+    touchstartY: number;
+    touchmoveX: number;
+    touchmoveY: number;
+    touchendX: number;
+    touchendY: number;
+    offsetX: number;
+    offsetY: number;
+}
+export declare type TTouchWrapper = ITouchHandlers & ITouchData;
+export interface ITouchValue extends ITouchHandlers {
+    parent?: boolean;
+    options?: AddEventListenerOptions;
+}
+export interface ITouchStoredHandlers {
+    touchstart: (event: TouchEvent) => void;
+    touchend: (event: TouchEvent) => void;
+    touchmove: (event: TouchEvent) => void;
+}
+export interface ITouchDirectiveBinding extends Omit<DirectiveBinding, 'value'> {
+    value?: ITouchValue;
+}
+declare function mounted(el: HTMLElement, binding: ITouchDirectiveBinding): void;
+declare function unmounted(el: HTMLElement, binding: ITouchDirectiveBinding): void;
+export declare const Touch: {
+    mounted: typeof mounted;
+    unmounted: typeof unmounted;
+};
+export default Touch;

package/dist/globals.d.ts

@@ -1,3 +1,5 @@
+import type { ITouchStoredHandlers } from './directives/touch';
+
 declare global {
   interface HTMLCollection {
     [Symbol.iterator](): IterableIterator<Element>;
@@ -12,6 +14,17 @@ declare global {
         }
       | undefined
     > & { lastMousedownWasOutside: boolean };
+    _touchHandlers?: {
+      [_uid: number]: ITouchStoredHandlers;
+    };
+    _observe?: Record<
+      number,
+      | {
+          init: boolean;
+          observer: IntersectionObserver;
+        }
+      | undefined
+    >;
   }
 
   export const __VUE_OPTIONS_API__: boolean | undefined;

package/dist/locale/en.d.ts

@@ -0,0 +1,3 @@
+import type { ILocale } from './';
+declare const _default: ILocale;
+export default _default;

package/dist/locale/index.d.ts

@@ -1,12 +1,25 @@
+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 {
-  date: {
-    days: string[];
-    daysShort: string[];
-    months: string[];
-    monthsLong: string[];
-    monthsShort: string[];
-    firstDayOfWeek: number;
-    format24h: boolean;
-    pluralDay: (day?: number) => string;
-  };
+    notification: TNotificationLocale;
+    table: NTable.ILocale;
+    date: TDateLocale;
+    container: {
+        prev?: string;
+        next?: string;
+    };
+    uploader: NUploader.ILocale;
+    dropdown: {
+        noData: string;
+        selectAll: string;
+    };
 }
+export declare const availableLocale: readonly ["ru", "en"];
+export declare type TAvailableLocale = typeof availableLocale[number];
+declare const _default: {
+    ru: ILocale;
+    en: ILocale;
+};
+export default _default;

package/dist/themes/b2b.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    dark?: boolean | undefined;
+    colors?: {
+        [x: string]: string | undefined;
+        background?: string | undefined;
+        surface?: string | undefined;
+        primary?: string | undefined;
+        secondary?: string | undefined;
+        success?: string | undefined;
+        warning?: string | undefined;
+        info?: string | undefined;
+        error?: string | undefined;
+        'on-background'?: string | undefined;
+        'on-surface'?: string | undefined;
+        'on-primary'?: string | undefined;
+        'on-secondary'?: string | undefined;
+        'on-success'?: string | undefined;
+        'on-warning'?: string | undefined;
+        'on-info'?: string | undefined;
+        'on-error'?: string | undefined;
+    } | undefined;
+    variables?: {
+        [x: string]: string | number | undefined;
+    } | undefined;
+};
+export default _default;

package/dist/themes/cds.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    dark?: boolean | undefined;
+    colors?: {
+        [x: string]: string | undefined;
+        background?: string | undefined;
+        surface?: string | undefined;
+        primary?: string | undefined;
+        secondary?: string | undefined;
+        success?: string | undefined;
+        warning?: string | undefined;
+        info?: string | undefined;
+        error?: string | undefined;
+        'on-background'?: string | undefined;
+        'on-surface'?: string | undefined;
+        'on-primary'?: string | undefined;
+        'on-secondary'?: string | undefined;
+        'on-success'?: string | undefined;
+        'on-warning'?: string | undefined;
+        'on-info'?: string | undefined;
+        'on-error'?: string | undefined;
+    } | undefined;
+    variables?: {
+        [x: string]: string | number | undefined;
+    } | undefined;
+};
+export default _default;

package/dist/themes/dark.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    dark?: boolean | undefined;
+    colors?: {
+        [x: string]: string | undefined;
+        background?: string | undefined;
+        surface?: string | undefined;
+        primary?: string | undefined;
+        secondary?: string | undefined;
+        success?: string | undefined;
+        warning?: string | undefined;
+        info?: string | undefined;
+        error?: string | undefined;
+        'on-background'?: string | undefined;
+        'on-surface'?: string | undefined;
+        'on-primary'?: string | undefined;
+        'on-secondary'?: string | undefined;
+        'on-success'?: string | undefined;
+        'on-warning'?: string | undefined;
+        'on-info'?: string | undefined;
+        'on-error'?: string | undefined;
+    } | undefined;
+    variables?: {
+        [x: string]: string | number | undefined;
+    } | undefined;
+};
+export default _default;

package/dist/themes/index.d.ts

@@ -0,0 +1,5 @@
+export * from './themes.d';
+export { default as cds } from './cds';
+export { default as b2b } from './b2b';
+export { default as dark } from './dark';
+export { default as promo } from './promo';

package/dist/themes/promo.d.ts

@@ -0,0 +1,26 @@
+declare const _default: {
+    dark?: boolean | undefined;
+    colors?: {
+        [x: string]: string | undefined;
+        background?: string | undefined;
+        surface?: string | undefined;
+        primary?: string | undefined;
+        secondary?: string | undefined;
+        success?: string | undefined;
+        warning?: string | undefined;
+        info?: string | undefined;
+        error?: string | undefined;
+        'on-background'?: string | undefined;
+        'on-surface'?: string | undefined;
+        'on-primary'?: string | undefined;
+        'on-secondary'?: string | undefined;
+        'on-success'?: string | undefined;
+        'on-warning'?: string | undefined;
+        'on-info'?: string | undefined;
+        'on-error'?: string | undefined;
+    } | undefined;
+    variables?: {
+        [x: string]: string | number | undefined;
+    } | undefined;
+};
+export default _default;

package/dist/themes/themes.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeDefinition } from '../composable';
+
+export interface IThemes {
+  cds: ThemeDefinition;
+  b2b: ThemeDefinition;
+  promo: ThemeDefinition;
+  dark: ThemeDefinition;
+}
+
+export type TThemes = keyof IThemes;