@central-design-system/components 2.33.0 → 3.0.0-alpha.1

package/dist/components/CdsGrid/CdsCol.vue.d.ts

@@ -0,0 +1,73 @@
+export declare const componentName = "CdsCol";
+declare const _sfc_main: import("vue").DefineComponent<{
+    xs: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    sm: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    md: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    lg: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    xl: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    span: {
+        type: import("vue").PropType<string | number | import("./types").TColumnSpanType>;
+        default: undefined;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    xs: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    sm: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    md: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    lg: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    xl: {
+        type: import("vue").PropType<import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    span: {
+        type: import("vue").PropType<string | number | import("./types").TColumnSpanType>;
+        default: undefined;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}>>, {
+    xs: import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>;
+    sm: import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>;
+    md: import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>;
+    lg: import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>;
+    xl: import("./types").TColumnBreakpoint<import("./types").TColumnGridBreakpoint | import("./types").TColumnFlexBreakpoint>;
+    tag: string;
+    span: string | number | import("./types").TColumnSpanType;
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,55 @@
+export declare const componentName = "CdsGrid";
+declare const _sfc_main: import("vue").DefineComponent<{
+    wide: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    subgrid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    condensed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    narrow: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    wide: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    subgrid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    condensed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    narrow: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}>>, {
+    tag: string;
+    condensed: boolean;
+    narrow: boolean;
+    subgrid: boolean;
+    wide: boolean;
+}>;
+export default _sfc_main;

package/dist/components/CdsGrid/CdsRow.vue.d.ts

@@ -0,0 +1,37 @@
+export declare const componentName = "CdsRow";
+declare const _sfc_main: import("vue").DefineComponent<{
+    condensed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    narrow: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    condensed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    narrow: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    tag: {
+        type: import("vue").PropType<string>;
+        default: string;
+        description: string;
+    };
+}>>, {
+    tag: string;
+    condensed: boolean;
+    narrow: boolean;
+}>;
+export default _sfc_main;

package/dist/components/CdsGrid/composable/column.d.ts

@@ -0,0 +1,84 @@
+import type { PropType } from 'vue';
+import type { TColumnBreakpoint, TColumnSpan, TColumnFlexBreakpoint, TColumnGridBreakpoint, TColumnSpanType } from '../types';
+export interface IColumnProps {
+    tag: string | undefined;
+    xs: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint> | undefined;
+    sm: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint> | undefined;
+    md: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint> | undefined;
+    lg: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint> | undefined;
+    xl: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint> | undefined;
+    span: TColumnSpan<TColumnSpanType>;
+}
+export interface IUseColumn {
+    breakpoints: TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>[];
+}
+export declare const makeColumnProps: <Defaults extends {
+    xs?: unknown;
+    sm?: unknown;
+    md?: unknown;
+    lg?: unknown;
+    xl?: unknown;
+    span?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * >320px
+     */
+    xs: {
+        type: PropType<TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    /**
+     * >672px
+     */
+    sm: {
+        type: PropType<TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    /**
+     * >1056px
+     */
+    md: {
+        type: PropType<TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    /**
+     * >1312px
+     */
+    lg: {
+        type: PropType<TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    /**
+     * >1584px
+     */
+    xl: {
+        type: PropType<TColumnBreakpoint<TColumnGridBreakpoint | TColumnFlexBreakpoint>>;
+        default: undefined;
+    };
+    /**
+     * Only CSS Grid supported. Постоянный диапазон колонок, start или end значения, которые не изменятся.
+     */
+    span: {
+        type: PropType<string | number | TColumnSpanType>;
+        default: undefined;
+    };
+}, Defaults>;
+export declare const useBreakpoints: (props: IColumnProps) => IUseColumn;
+/**
+ * Build the appropriate grid className for the given set of breakpoints.
+ * @param {Array<boolean|number|TColumnGridBreakpoint>} breakpoints
+ * @param prefix
+ * @returns {string}
+ */
+export declare const getClassNameForGridBreakpoints: (breakpoints: TColumnBreakpoint<TColumnGridBreakpoint>[], prefix: string) => string;
+/**
+ * Build the appropriate flex className for the given set of breakpoints.
+ * @param {Array<boolean|number|TColumnFlexBreakpoint>} breakpoints
+ * @param prefix
+ * @returns {string}
+ */
+export declare const getClassNameForFlexBreakpoints: (breakpoints: TColumnBreakpoint<TColumnFlexBreakpoint>[], prefix: string) => string;
+/**
+ * Build the appropriate className for a span value
+ */
+export declare const getClassNameForSpan: (value: TColumnSpan<TColumnSpanType>, prefix: string) => string;

package/dist/components/CdsGrid/composable/grid.d.ts

@@ -0,0 +1,24 @@
+import type { PropType } from 'vue';
+export interface IUseGrid {
+    prefix: string;
+}
+export declare const makeGridProps: <Defaults extends {
+    condensed?: unknown;
+    narrow?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * Конденсированная сетка. Уменьшенный отступ до 1px по обеим сторонам
+     */
+    condensed: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Узкая сетка
+     */
+    narrow: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare const useGrid: () => IUseGrid;

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

@@ -0,0 +1,4 @@
+export * from './grid';
+export * from './subgrid';
+export * from './wide';
+export * from './column';

package/dist/components/CdsGrid/composable/subgrid.d.ts

@@ -0,0 +1,20 @@
+import type { PropType } from 'vue';
+import type { IGridProps } from '../types';
+export interface ISubgridProps extends IGridProps {
+    subgrid: boolean;
+}
+export interface IUseSubgrid {
+    suffix: string;
+}
+export declare const makeSubgridProps: <Defaults extends {
+    subgrid?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * Only CSS Grid supported. Вложенная сетка
+     */
+    subgrid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare const useSubgrid: (props: ISubgridProps) => IUseSubgrid;

package/dist/components/CdsGrid/composable/wide.d.ts

@@ -0,0 +1,12 @@
+import type { PropType } from 'vue';
+export declare const makeWideProps: <Defaults extends {
+    wide?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../../../utils').AppendDefault<{
+    /**
+     * Удаляет max-width по умолчанию и растягивает сетку на всю ширину контейнера
+     */
+    wide: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;

package/dist/components/CdsGrid/mode/CSSGrid.d.ts

@@ -0,0 +1,5 @@
+import type { SetupContext } from 'vue';
+import type { ISubgridProps } from '../composable';
+export declare function CSSGrid(props: ISubgridProps, context: SetupContext): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;

package/dist/components/CdsGrid/mode/FlexGrid.d.ts

@@ -0,0 +1,5 @@
+import type { SetupContext } from 'vue';
+import type { IGridProps } from '../types';
+export declare function FlexGrid(props: IGridProps, context: SetupContext): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;

package/dist/components/CdsGrid/types.d.ts

@@ -0,0 +1,27 @@
+export interface IGridProps {
+  tag: string;
+  condensed: boolean;
+  narrow: boolean;
+  wide: boolean;
+}
+
+export type TColumnBreakpoint<T> = T | boolean | number | string;
+export type TColumnSpan<T> = T | string | number | undefined;
+
+export type TColumnGridBreakpoint = {
+  span?: string | number | TPercentSpan;
+  offset?: number | string;
+  start?: number | string;
+  end?: number | string;
+};
+export type TColumnFlexBreakpoint = {
+  span?: string | number | boolean;
+  offset?: number | string;
+  order?: number | string;
+};
+export type TColumnSpanType = {
+  span?: string | number | TPercentSpan;
+  start?: number | string;
+  end?: number | string;
+};
+export type TPercentSpan = '25%' | '50%' | '75%' | '100%';

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

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import type { TCdsIconsName } from '@central-design-system/icons';
+export declare const componentName = "CdsIcon";
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: string;
+        available: readonly ["xs", "sm", "md", "lg", "xl"];
+        validator: (value: "xs" | "sm" | "md" | "lg" | "xl") => boolean;
+    };
+    name: {
+        /**
+         * Название иконки
+         */
+        type: PropType<"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" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocolate-menu" | "clock" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "external" | "facebook-fill" | "facebook" | "filters" | "flag" | "globe" | "infinity" | "info-fill" | "info" | "link" | "list-search" | "list" | "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" | "search" | "settings" | "shopping-cart" | "sort-date" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        default: undefined;
+        validator: (value: TCdsIconsName) => boolean;
+    };
+}, {
+    iconComponent: import("vue").ComputedRef<string>;
+    sizeClasses: import("vue").ComputedRef<string>;
+} | {
+    sizeClasses: import("vue").ComputedRef<string>;
+    iconComponent?: undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+        default: string;
+        available: readonly ["xs", "sm", "md", "lg", "xl"];
+        validator: (value: "xs" | "sm" | "md" | "lg" | "xl") => boolean;
+    };
+    name: {
+        /**
+         * Название иконки
+         */
+        type: PropType<"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" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocolate-menu" | "clock" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "external" | "facebook-fill" | "facebook" | "filters" | "flag" | "globe" | "infinity" | "info-fill" | "info" | "link" | "list-search" | "list" | "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" | "search" | "settings" | "shopping-cart" | "sort-date" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        default: undefined;
+        validator: (value: TCdsIconsName) => boolean;
+    };
+}>> & {}, {
+    name: "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" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocolate-menu" | "clock" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "external" | "facebook-fill" | "facebook" | "filters" | "flag" | "globe" | "infinity" | "info-fill" | "info" | "link" | "list-search" | "list" | "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" | "search" | "settings" | "shopping-cart" | "sort-date" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+}>;
+export default _sfc_main;

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

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