@central-design-system/components 3.0.0-alpha.0 → 3.0.0-alpha.2

package/dist/components/CdsOverlay/CdsOverlay.vue.d.ts

@@ -0,0 +1,337 @@
+import type { PropType } from 'vue';
+export declare const componentName = "CdsOverlay";
+declare const _sfc_main: import("vue").DefineComponent<{
+    transition: {
+        type: PropType<string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    eager: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scrollStrategy: {
+        type: PropType<"none" | "close" | "block" | "reposition" | ((data: import("./composable").IScrollStrategyData, props: import("./composable").IScrollStrategyProps, scope: import("vue").EffectScope) => void)>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    locationStrategy: {
+        type: PropType<"static" | "connected" | ((data: import("./composable").ILocationStrategyData, props: import("./composable").ILocationStrategyProps, contentStyles: import("vue").Ref<Record<string, string>>) => {
+            updateLocation: (event: Event) => void;
+        } | undefined)>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    location: {
+        type: PropType<import('../../utils').TAnchor>;
+        default: string;
+    };
+    origin: {
+        type: PropType<import('../../utils').TAnchor | "auto" | "overlap">;
+        default: string;
+    };
+    offset: {
+        type: PropType<string | number | number[]>;
+        default: null;
+    };
+    height: {
+        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>; /**
+         * Применяет position: absolute к содержимому оверлея
+         */
+        default: string;
+    };
+    closeDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+    openDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+    activator: {
+        type: PropType<string | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | Element>; /**
+         * Событие, которое срабатывает при клике вне оверлея.
+         */
+        default: null;
+    };
+    activatorProps: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    openOnClick: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    openOnHover: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    openOnFocus: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    closeOnContentClick: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    attach: {
+        type: PropType<string | boolean | Element>;
+        default: boolean;
+    };
+    contained: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    persistent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scrim: {
+        type: PropType<string | boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnBack: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    zIndex: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    contentClasses: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: null;
+    };
+    contentProps: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    /**
+     * Применяет position: absolute к содержимому оверлея
+     */
+    absolute: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, {
+    activatorEl: import("vue").Ref<HTMLElement | undefined>;
+    contentEl: import("vue").Ref<HTMLElement | undefined>;
+    globalTop: Readonly<import("vue").Ref<boolean>>;
+    localTop: import("vue").ComputedRef<boolean>;
+    updateLocation: import("vue").Ref<((event: Event) => void) | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "click:outside" | "afterLeave")[], "update:modelValue" | "click:outside" | "afterLeave", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    transition: {
+        type: PropType<string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    eager: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scrollStrategy: {
+        type: PropType<"none" | "close" | "block" | "reposition" | ((data: import("./composable").IScrollStrategyData, props: import("./composable").IScrollStrategyProps, scope: import("vue").EffectScope) => void)>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    locationStrategy: {
+        type: PropType<"static" | "connected" | ((data: import("./composable").ILocationStrategyData, props: import("./composable").ILocationStrategyProps, contentStyles: import("vue").Ref<Record<string, string>>) => {
+            updateLocation: (event: Event) => void;
+        } | undefined)>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    location: {
+        type: PropType<import('../../utils').TAnchor>;
+        default: string;
+    };
+    origin: {
+        type: PropType<import('../../utils').TAnchor | "auto" | "overlap">;
+        default: string;
+    };
+    offset: {
+        type: PropType<string | number | number[]>;
+        default: null;
+    };
+    height: {
+        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>; /**
+         * Применяет position: absolute к содержимому оверлея
+         */
+        default: string;
+    };
+    closeDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+    openDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+    activator: {
+        type: PropType<string | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | Element>; /**
+         * Событие, которое срабатывает при клике вне оверлея.
+         */
+        default: null;
+    };
+    activatorProps: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    openOnClick: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    openOnHover: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    openOnFocus: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    closeOnContentClick: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    attach: {
+        type: PropType<string | boolean | Element>;
+        default: boolean;
+    };
+    contained: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    persistent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scrim: {
+        type: PropType<string | boolean>;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    closeOnBack: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    zIndex: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    contentClasses: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: null;
+    };
+    contentProps: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+    /**
+     * Применяет position: absolute к содержимому оверлея
+     */
+    absolute: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onAfterLeave?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClick:outside"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    location: import('../../utils').TAnchor;
+    transition: string | boolean | (import("vue").TransitionProps & {
+        component?: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
+    });
+    origin: import('../../utils').TAnchor | "auto" | "overlap";
+    modelValue: boolean;
+    attach: string | boolean | Element;
+    contained: boolean;
+    persistent: boolean;
+    scrim: string | boolean;
+    closeOnBack: boolean;
+    zIndex: string | number;
+    contentClasses: string | string[] | Record<string, boolean>;
+    contentProps: Record<string, unknown>;
+    activator: string | import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | Element;
+    activatorProps: Record<string, any>;
+    openOnClick: boolean | undefined;
+    openOnHover: boolean;
+    openOnFocus: boolean | undefined;
+    closeOnContentClick: boolean;
+    closeDelay: string | number;
+    openDelay: string | number;
+    locationStrategy: "static" | "connected" | ((data: import("./composable").ILocationStrategyData, props: import("./composable").ILocationStrategyProps, contentStyles: import("vue").Ref<Record<string, string>>) => {
+        updateLocation: (event: Event) => void;
+    } | undefined);
+    offset: string | number | number[];
+    scrollStrategy: "none" | "close" | "block" | "reposition" | ((data: import("./composable").IScrollStrategyData, props: import("./composable").IScrollStrategyProps, scope: import("vue").EffectScope) => void);
+    eager: boolean;
+    height: string | number;
+    maxHeight: string | number;
+    maxWidth: string | number;
+    minHeight: string | number;
+    minWidth: string | number;
+    width: string | number;
+    absolute: boolean;
+}>;
+export default _sfc_main;

package/dist/components/CdsOverlay/composable/activator.d.ts

@@ -0,0 +1,81 @@
+import { ComputedRef } from 'vue';
+import type { ComponentPublicInstance, PropType, Ref } from 'vue';
+import type { IDelayProps } from '../../../composable';
+export interface IActivatorProps extends IDelayProps {
+    activator: 'parent' | string | Element | ComponentPublicInstance;
+    activatorProps: Record<string, any>;
+    openOnClick: boolean | undefined;
+    openOnHover: boolean;
+    openOnFocus: boolean | undefined;
+    closeOnContentClick: boolean;
+}
+export interface IUseActivator {
+    activatorEl: Ref<HTMLElement | undefined>;
+    activatorRef: Ref<HTMLElement | undefined>;
+    activatorEvents: ComputedRef<Partial<TAvailableEvents>>;
+    contentEvents: ComputedRef<Partial<TAvailableEvents>>;
+    scrimEvents: ComputedRef<Partial<TAvailableEvents>>;
+}
+declare type TAvailableEvents = {
+    click: (event: MouseEvent) => void;
+    mouseenter: (event: MouseEvent) => void;
+    mouseleave: (event: MouseEvent) => void;
+    focus: (event: FocusEvent) => void;
+    blur: (event: FocusEvent) => void;
+};
+export declare const makeActivatorProps: <Defaults extends {
+    activator?: unknown;
+    activatorProps?: unknown;
+    openOnClick?: unknown;
+    openOnHover?: unknown;
+    openOnFocus?: unknown;
+    closeOnContentClick?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * Элемент, который будет активировать компонент
+     */
+    activator: {
+        type: PropType<string | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | Element>;
+        default: null;
+    };
+    /**
+     * Свойства для элемента активатора
+     */
+    activatorProps: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    /**
+     * Показать компонент по клику на активатор
+     */
+    openOnClick: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    /**
+     * Показать компонент по наведению на активатор
+     */
+    openOnHover: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Показать компонент по фокусу на активатор
+     */
+    openOnFocus: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    /**
+     * Скрыть компонент по клику на контент
+     */
+    closeOnContentClick: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useActivator(props: IActivatorProps, { isActive, isTop }: {
+    isActive: Ref<boolean>;
+    isTop: Ref<boolean>;
+}): IUseActivator;
+export {};

package/dist/components/CdsOverlay/composable/index.d.ts

@@ -0,0 +1,6 @@
+export * from './teleport';
+export * from './stack';
+export * from './activator';
+export * from './locationStrategies';
+export * from './scrollStrategies';
+export * from './scrim';

package/dist/components/CdsOverlay/composable/locationStrategies.d.ts

@@ -0,0 +1,75 @@
+import { Box, TAnchor } from '../../../utils';
+import type { PropType, Ref } from 'vue';
+export interface ILocationStrategyData {
+    contentEl: Ref<HTMLElement | undefined>;
+    activatorEl: Ref<HTMLElement | undefined>;
+    isActive: Ref<boolean>;
+}
+declare type TLocationStrategyFn = (data: ILocationStrategyData, props: ILocationStrategyProps, contentStyles: Ref<Record<string, string>>) => undefined | {
+    updateLocation: (event: Event) => void;
+};
+declare const locationStrategies: {
+    static: typeof staticLocationStrategy;
+    connected: typeof connectedLocationStrategy;
+};
+export interface ILocationStrategyProps {
+    locationStrategy: keyof typeof locationStrategies | TLocationStrategyFn;
+    location: TAnchor;
+    origin: TAnchor | 'auto' | 'overlap';
+    offset?: number | string | number[];
+    maxHeight: number | string;
+    maxWidth: number | string;
+    minHeight: number | string;
+    minWidth: number | string;
+}
+export interface IUseLocationStrategies {
+    contentStyles: Ref<Record<string, string>>;
+    updateLocation: Ref<((event: Event) => void) | undefined>;
+}
+export declare const makeLocationStrategyProps: <Defaults extends {
+    locationStrategy?: unknown;
+    location?: unknown;
+    origin?: unknown;
+    offset?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * Стратегия позиционирования компонента
+     */
+    locationStrategy: {
+        type: PropType<"static" | "connected" | TLocationStrategyFn>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+    /**
+     * Выравнивание компонент по краям top, bottom, left, right. Можно комбинировать, например, top left
+     */
+    location: {
+        type: PropType<TAnchor>;
+        default: string;
+    };
+    origin: {
+        type: PropType<TAnchor | "auto" | "overlap">;
+        default: string;
+    };
+    /**
+     * Отступы компонента от активатора
+     */
+    offset: {
+        type: PropType<string | number | number[]>;
+        default: null;
+    };
+}, Defaults>;
+export declare function useLocationStrategies(props: ILocationStrategyProps, data: ILocationStrategyData): IUseLocationStrategies;
+declare function staticLocationStrategy(): {
+    updateLocation: () => void;
+};
+declare function connectedLocationStrategy(data: ILocationStrategyData, props: ILocationStrategyProps, contentStyles: Ref<Record<string, string>>): {
+    updateLocation: () => {
+        available: {
+            x: number;
+            y: number;
+        };
+        contentBox: Box;
+    } | undefined;
+};
+export {};

package/dist/components/CdsOverlay/composable/scrim.d.ts

@@ -0,0 +1,8 @@
+interface IScrimProps {
+    [key: string]: unknown;
+    modelValue: boolean;
+}
+export declare function CdsScrim(props: IScrimProps): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export {};

package/dist/components/CdsOverlay/composable/scrollStrategies.d.ts

@@ -0,0 +1,33 @@
+import type { EffectScope, PropType, Ref } from 'vue';
+export interface IScrollStrategyData {
+    root: Ref<HTMLElement | undefined>;
+    contentEl: Ref<HTMLElement | undefined>;
+    activatorEl: Ref<HTMLElement | undefined>;
+    isActive: Ref<boolean>;
+    updateLocation: Ref<((event: Event) => void) | undefined>;
+}
+declare type TScrollStrategyFn = (data: IScrollStrategyData, props: IScrollStrategyProps, scope: EffectScope) => void;
+declare const scrollStrategies: {
+    none: null;
+    close: typeof closeScrollStrategy;
+    block: typeof blockScrollStrategy;
+    reposition: typeof repositionScrollStrategy;
+};
+export interface IScrollStrategyProps {
+    scrollStrategy: keyof typeof scrollStrategies | TScrollStrategyFn;
+    contained: boolean | undefined;
+}
+export declare const makeScrollStrategyProps: <Defaults extends {
+    scrollStrategy?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    scrollStrategy: {
+        type: PropType<"none" | "close" | "block" | "reposition" | TScrollStrategyFn>;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+}, Defaults>;
+export declare function useScrollStrategies(props: IScrollStrategyProps, data: IScrollStrategyData): void;
+declare function closeScrollStrategy(data: IScrollStrategyData): void;
+declare function blockScrollStrategy(data: IScrollStrategyData, props: IScrollStrategyProps): void;
+declare function repositionScrollStrategy(data: IScrollStrategyData, props: IScrollStrategyProps, scope: EffectScope): void;
+export {};

package/dist/components/CdsOverlay/composable/stack.d.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef, Ref } from 'vue';
+export interface IUseStack {
+    globalTop: Readonly<Ref<boolean>>;
+    localTop: ComputedRef<boolean>;
+    stackStyles: ComputedRef<{
+        zIndex: number;
+    }>;
+}
+export declare function useStack(isActive: Readonly<Ref<boolean>>, zIndex: Readonly<Ref<string | number>>, disableGlobalStack?: boolean): IUseStack;

package/dist/components/CdsOverlay/composable/teleport.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef } from 'vue';
+import type { Ref } from 'vue';
+export interface IUseTeleport {
+    teleportTarget: ComputedRef<Element | undefined>;
+}
+export declare function useTeleport(target: Ref<boolean | string | Element>, overlayContainerClassName: string): IUseTeleport;

package/dist/components/CdsOverlay/index.d.ts

@@ -0,0 +1 @@
+export { default as CdsOverlay } from './CdsOverlay.vue';

package/dist/components/CdsOverlay/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './point';
+export * from './requestNewFrame';

package/dist/components/CdsOverlay/utils/point.d.ts

@@ -0,0 +1,20 @@
+import { Box, ParsedAnchor } from '../../../utils';
+declare type Point = {
+    x: number;
+    y: number;
+};
+declare class As<T extends string> {
+    private as;
+}
+declare type ElementPoint = Point & As<'element'>;
+declare type ViewportPoint = Point & As<'viewport'>;
+declare type Offset = Point & As<'offset'>;
+/** Convert a point in local space to viewport space */
+export declare function elementToViewport(point: ElementPoint, offset: Offset | Box): ViewportPoint;
+/** Convert a point in viewport space to local space */
+export declare function viewportToElement(point: ViewportPoint, offset: Offset | Box): ElementPoint;
+/** Get the difference between two points */
+export declare function getOffset<T extends Point>(a: T, b: T): Offset;
+/** Convert an anchor object to a point in local space */
+export declare function anchorToPoint(anchor: ParsedAnchor, box: Box): ViewportPoint;
+export {};

package/dist/components/CdsOverlay/utils/requestNewFrame.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Schedule a task to run in an animation frame on its own
+ * This is useful for heavy tasks that may cause jank if all ran together
+ */
+export declare function requestNewFrame(cb: () => void): void;