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

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

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

package/dist/components/index.d.ts

@@ -1,18 +1,41 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 2/17/2023, 8:45:21 PM
+ * Generated on 5/10/2023, 7:16:03 PM
  **/
 export { default as CdsBadge } from './CdsBadge/CdsBadge.vue';
+export { default as CdsBreadcrumbs } from './CdsBreadcrumbs/CdsBreadcrumbs.vue';
+export { default as CdsBreadcrumbsItem } from './CdsBreadcrumbs/CdsBreadcrumbsItem.vue';
 export { default as CdsButton } from './CdsButton/CdsButton.vue';
+export { default as CdsCheckbox } from './CdsCheckbox/CdsCheckbox.vue';
+export { default as CdsCheckboxGroup } from './CdsCheckbox/CdsCheckboxGroup.vue';
+export { default as CdsCombobox } from './CdsCombobox/CdsCombobox.vue';
+export { default as CdsDatePicker } from './CdsDatePicker/CdsDatePicker.vue';
 export { default as CdsDrawer } from './CdsDrawer/CdsDrawer.vue';
+export { default as CdsDropdown } from './CdsDropdown/CdsDropdown.vue';
+export { default as CdsEmptyState } from './CdsEmptyState/CdsEmptyState.vue';
+export { default as CdsForm } from './CdsForm/CdsForm.vue';
 export { default as CdsCol } from './CdsGrid/CdsCol.vue';
 export { default as CdsGrid } from './CdsGrid/CdsGrid.vue';
 export { default as CdsRow } from './CdsGrid/CdsRow.vue';
 export { default as CdsIcon } from './CdsIcon/CdsIcon.vue';
+export { default as CdsInput } from './CdsInput/CdsInput.vue';
+export { default as CdsInputCounter } from './CdsInput/CdsInputCounter.vue';
+export { default as CdsInputDescription } from './CdsInput/CdsInputDescription.vue';
+export { default as CdsInputLabel } from './CdsInput/CdsInputLabel.vue';
+export { default as CdsInputMessages } from './CdsInput/CdsInputMessages.vue';
 export { default as CdsLink } from './CdsLink/CdsLink.vue';
 export { default as CdsList } from './CdsList/CdsList.vue';
 export { default as CdsListGroup } from './CdsList/CdsListGroup.vue';
 export { default as CdsListItem } from './CdsList/CdsListItem.vue';
 export { default as CdsLoader } from './CdsLoader/CdsLoader.vue';
+export { default as CdsMenu } from './CdsMenu/CdsMenu.vue';
+export { default as CdsOverlay } from './CdsOverlay/CdsOverlay.vue';
+export { default as CdsRadio } from './CdsRadioButton/CdsRadio.vue';
+export { default as CdsRadioButton } from './CdsRadioButton/CdsRadioButton.vue';
+export { default as CdsSelect } from './CdsSelect/CdsSelect.vue';
+export { default as CdsSidebar } from './CdsSidebar/CdsSidebar.vue';
+export { default as CdsStages } from './CdsStages/CdsStages.vue';
 export { default as CdsStatus } from './CdsStatus/CdsStatus.vue';
 export { default as CdsTag } from './CdsTag/CdsTag.vue';
+export { default as CdsTextArea } from './CdsTextArea/CdsTextArea.vue';
+export { default as CdsTextInput } from './CdsTextInput/CdsTextInput.vue';

package/dist/composable/color.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, PropType } from 'vue';
+import type { ComputedRef, PropType } from 'vue';
 export declare type TColor = typeof allowedColor[number];
 export declare type IColorProps = {
     color: TColor | undefined;
@@ -10,11 +10,13 @@ export declare const allowedColor: readonly ["yellow", "light-blue", "blue", "de
 export declare const makeColorProps: <Defaults extends {
     color?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Цвет
+     */
     color: {
         type: PropType<"yellow" | "light-blue" | "blue" | "deep-purple" | "purple" | "pink">;
         available: readonly ["yellow", "light-blue", "blue", "deep-purple", "purple", "pink"];
         default: undefined;
-        description: string;
         validator: (value: TColor) => boolean;
     };
 }, Defaults>;

package/dist/composable/datetime.d.ts

@@ -0,0 +1,76 @@
+import type { IRawDate, TDateLocale } from '../utils';
+import type { ComputedRef, PropType } from 'vue';
+export interface IDatetimeProps {
+    modelValue: string | TDatetimeValueRange | Array<string | TDatetimeValueRange>;
+    mask: string;
+    locale: TDateLocale;
+    readonly: boolean;
+    disabled: boolean;
+}
+export interface IUseDatetime {
+    editable: ComputedRef<boolean>;
+    tabindex: ComputedRef<number>;
+    getCurrentDate: (dateOnly?: boolean) => IRawDate;
+    getShortDate: (date: IRawDate) => Partial<IRawDate>;
+    getLocale: () => TDateLocale;
+    getMask: () => string;
+    decodeString: (date: string) => IRawDate;
+}
+export declare type TDatetimeValueRange = {
+    from: string | IRawDate;
+    to: string | IRawDate;
+    target?: string | IRawDate;
+};
+export declare const makeDatetimeProps: <Defaults extends {
+    modelValue?: unknown;
+    mask?: unknown;
+    locale?: unknown;
+    readonly?: unknown;
+    disabled?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Значение модели
+     */
+    modelValue: {
+        type: PropType<string | TDatetimeValueRange | (string | TDatetimeValueRange)[]>;
+        default: null;
+    };
+    /**
+     * Формат даты/времени
+     */
+    mask: {
+        type: PropType<string>;
+        default: string;
+    };
+    /**
+     * Локализация компонента
+     */
+    locale: {
+        type: PropType<{
+            days: string[];
+            daysShort: string[];
+            months: string[];
+            monthsLong: string[];
+            monthsShort: string[];
+            firstDayOfWeek: number;
+            format24h: boolean;
+            pluralDay: (day?: number | undefined) => string;
+        }>;
+        default: null;
+    };
+    /**
+     * Только для чтения
+     */
+    readonly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Заблокированный
+     */
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useDatetime(props: IDatetimeProps): IUseDatetime;

package/dist/composable/delay.d.ts

@@ -0,0 +1,29 @@
+import type { PropType } from 'vue';
+export interface IDelayProps {
+    closeDelay: number | string;
+    openDelay: number | string;
+}
+export interface IUseDelay {
+    runCloseDelay: () => void;
+    runOpenDelay: () => void;
+}
+export declare const makeDelayProps: <Defaults extends {
+    closeDelay?: unknown;
+    openDelay?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Задержка в миллисекундах перед закрытием оверлея. Только для события hover и focus.
+     */
+    closeDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+    /**
+     * Задержка в миллисекундах перед открытием оверлея. Только для события hover и focus.
+     */
+    openDelay: {
+        type: PropType<string | number>;
+        default: null;
+    };
+}, Defaults>;
+export declare function useDelay(props: IDelayProps, cb?: (value: boolean) => void): IUseDelay;

package/dist/composable/dimensions.d.ts

@@ -0,0 +1,47 @@
+import { ComputedRef } from 'vue';
+import type { PropType } from 'vue';
+export interface IDimensionsProps {
+    height: number | string;
+    maxHeight: number | string;
+    maxWidth: number | string;
+    minHeight: number | string;
+    minWidth: number | string;
+    width: number | string;
+}
+export interface IUseDimensions {
+    dimensionsStyles: ComputedRef<Record<string, any>>;
+}
+export declare const makeDimensionProps: <Defaults extends {
+    height?: unknown;
+    maxHeight?: unknown;
+    maxWidth?: unknown;
+    minHeight?: unknown;
+    minWidth?: unknown;
+    width?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    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>;
+        default: string;
+    };
+}, Defaults>;
+export declare function useDimensions(props: IDimensionsProps): IUseDimensions;

package/dist/composable/direction.d.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, PropType } from 'vue';
+import type { MaybeRef } from '../utils';
+export declare type TDirection = typeof allowedDirection[number];
+export interface IDirectionProps {
+    direction: TDirection;
+}
+export interface IUseDirection {
+    directionClasses: ComputedRef<string>;
+}
+export declare const allowedDirection: readonly ["horizontal", "vertical"];
+export declare const makeDirectionProps: <Defaults extends {
+    direction?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Расположение горизонтальное или вертикальное
+     */
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        available: readonly ["horizontal", "vertical"];
+        validator: (value: TDirection) => boolean;
+    };
+}, Defaults>;
+export declare function useDirection(props: MaybeRef<IDirectionProps>, name: string): IUseDirection;

package/dist/composable/field.d.ts

@@ -0,0 +1,139 @@
+import type { ComputedRef, PropType } from 'vue';
+import type { EventProp } from '../utils';
+import type { TCdsIconsName } from '@central-design-system/icons';
+export declare type TFieldTypes = typeof allowedFieldType[number];
+export interface IFieldProps {
+    active: boolean;
+    autofocus: boolean;
+    prefix: string | undefined;
+    suffix: string | undefined;
+    prependInnerIcon: TCdsIconsName | undefined;
+    appendInnerIcon: TCdsIconsName | undefined;
+    type: TFieldTypes | undefined;
+    placeholder: string | undefined;
+    counter: boolean;
+    limit: number | undefined;
+    clearable: boolean;
+    'onClick:appendInner': EventProp | undefined;
+    'onClick:prependInner': EventProp | undefined;
+}
+export interface IUseField {
+    hasPrependInnerIcon: ComputedRef<boolean>;
+    hasAppendInnerIcon: ComputedRef<boolean>;
+    fieldClasses: ComputedRef<Record<string, boolean>>;
+    fieldProps: string[];
+    handleClickPrependInner: (event: MouseEvent) => void;
+    handleClickAppendInner: (event: MouseEvent) => void;
+}
+export declare const allowedFieldType: readonly ["text", "password", "email", "number", "tel", "url"];
+export declare const makeFieldProps: <Defaults extends {
+    active?: unknown;
+    autofocus?: unknown;
+    prefix?: unknown;
+    suffix?: unknown;
+    prependInnerIcon?: unknown;
+    appendInnerIcon?: unknown;
+    type?: unknown;
+    placeholder?: unknown;
+    counter?: unknown;
+    limit?: unknown;
+    clearable?: unknown;
+    'onClick:prependInner'?: unknown;
+    'onClick:appendInner'?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Активный элемент
+     */
+    active: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Автофокус
+     */
+    autofocus: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Добавить строку внутрь поля перед значением
+     */
+    prefix: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    /**
+     * Добавить строку внутрь поля после значения
+     */
+    suffix: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    /**
+     * Иконка внутри элемента перед значением поля
+     */
+    prependInnerIcon: {
+        type: PropType<"link" | "filters" | "search" | "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" | "flag" | "globe" | "infinity" | "info-fill" | "info" | "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" | "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;
+    };
+    /**
+     * Иконка внутри элемента после значения поля
+     */
+    appendInnerIcon: {
+        type: PropType<"link" | "filters" | "search" | "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" | "flag" | "globe" | "infinity" | "info-fill" | "info" | "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" | "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;
+    };
+    /**
+     * Тип поля
+     */
+    type: {
+        type: PropType<"number" | "text" | "password" | "email" | "tel" | "url">;
+        default: string;
+        validator: (value: TFieldTypes) => boolean;
+    };
+    /**
+     * Плейсхолдер поля
+     */
+    placeholder: {
+        type: PropType<string>;
+        default: undefined;
+    };
+    /**
+     * Счетчик введенных символов
+     */
+    counter: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Ограничение ввода по количеству символов
+     */
+    limit: {
+        type: PropType<number>;
+        default: undefined;
+    };
+    /**
+     * Очищаемое поле
+     */
+    clearable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Событие клика по иконке внутри элемента перед значением поля
+     */
+    'onClick:prependInner': {
+        type: PropType<(...args: any[]) => any>;
+        default: undefined;
+    };
+    /**
+     * Событие клика по иконке внутри элемента после значения поля
+     */
+    'onClick:appendInner': {
+        type: PropType<(...args: any[]) => any>;
+        default: undefined;
+    };
+}, Defaults>;
+export declare function useField(props: IFieldProps, slots: Record<string, unknown>, name: string): IUseField;

package/dist/composable/filter.d.ts

@@ -0,0 +1,52 @@
+import type { IInternalItem } from './items';
+import type { MaybeRef } from '../utils';
+import type { PropType, Ref } from 'vue';
+export declare type TFilterMath = boolean | number | [number, number] | [number, number][];
+export interface IFilterProps {
+    customFilter?: TFilterFunction;
+    customKeyFilter?: TFilterKeyFunctions;
+    filterKeys?: TFilterKeys;
+    filterMode?: TFilterMode;
+    noFilter?: boolean;
+}
+export interface IUseFilter<T> {
+    getMatches: (item: T) => Record<string, TFilterMath> | undefined;
+    filteredItems: Ref<T[]>;
+    filteredMatches: Ref<Map<unknown, Record<string, TFilterMath>>>;
+}
+export declare const makeFilterProps: <Defaults extends {
+    customFilter?: unknown;
+    customKeyFilter?: unknown;
+    filterKeys?: unknown;
+    filterMode?: unknown;
+    noFilter?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    customFilter: {
+        type: PropType<TFilterFunction>;
+        default: null;
+    };
+    customKeyFilter: {
+        type: PropType<TFilterKeyFunctions>;
+        default: null;
+    };
+    filterKeys: {
+        type: PropType<TFilterKeys>;
+        default: string;
+    };
+    filterMode: {
+        type: PropType<TFilterMode>;
+        default: string;
+    };
+    noFilter: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useFilter<T extends IInternalItem>(props: IFilterProps, items: MaybeRef<T[]>, query: Ref<string | number | undefined>, options?: {
+    filterKeys?: MaybeRef<TFilterKeys>;
+}): IUseFilter<T>;
+declare type TFilterFunction = (value: string, query: string, item?: any) => TFilterMath;
+declare type TFilterKeyFunctions = Record<string, TFilterFunction>;
+declare type TFilterKeys = string | string[];
+declare type TFilterMode = 'some' | 'every' | 'union' | 'intersection';
+export {};

package/dist/composable/focus.d.ts

@@ -1,12 +1,22 @@
-import type { Ref } from 'vue';
-export declare type TFocusLocation = 'next' | 'previous' | 'first' | 'last';
+import type { ComputedRef, PropType, Ref } from 'vue';
+export interface IFocusProps {
+    focused: boolean;
+}
 export interface IUseFocus {
-    contentRef: Ref<HTMLElement | null>;
     isFocused: Ref<boolean>;
-    onFocusin: (event: FocusEvent) => void;
-    onFocusout: (event: FocusEvent) => void;
-    onFocus: (event: FocusEvent) => void;
-    onKeydown: (event: KeyboardEvent) => void;
-    focus: (location?: TFocusLocation) => void;
+    focusClasses: ComputedRef<Record<string, boolean>>;
+    focus: () => void;
+    blur: () => void;
 }
-export declare function useFocus(): IUseFocus;
+export declare const makeFocusProps: <Defaults extends {
+    focused?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Элемент в фокусе
+     */
+    focused: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useFocus(props: IFocusProps, name: string): IUseFocus;

package/dist/composable/form.d.ts

@@ -0,0 +1,128 @@
+import { InjectionKey } from 'vue';
+import type { Ref, ComputedRef, PropType } from 'vue';
+import type { IValidationProps } from './validation';
+export interface IFormProvide {
+    register: (item: {
+        id: number | string;
+        validate: () => Promise<string[]>;
+        reset: () => void;
+        resetValidation: () => void;
+    }) => void;
+    unregister: (id: number | string) => void;
+    update: (id: number | string, isValid: boolean | null, errorMessages: string[]) => void;
+    items: Ref<IFormField[]>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isValidating: Ref<boolean>;
+    validateOn: Ref<IFormProps['validateOn']>;
+}
+export interface IFormProps {
+    label: string;
+    description: string;
+    disabled: boolean;
+    readonly: boolean;
+    firstFail: boolean;
+    modelValue: boolean | null;
+    validateOn?: IValidationProps['validateOn'];
+}
+interface IFormField {
+    id: number | string;
+    validate: () => Promise<string[]>;
+    reset: () => void;
+    resetValidation: () => void;
+    isValid: boolean | null;
+    errorMessages: string[];
+}
+interface IFieldValidationResult {
+    id: number | string;
+    errorMessages: string[];
+}
+interface IFormValidationResult {
+    valid: boolean;
+    errors: IFieldValidationResult[];
+}
+export interface SubmitEventPromise extends SubmitEvent, Promise<IFormValidationResult> {
+}
+export declare const makeFormProps: <Defaults extends {
+    label?: unknown;
+    description?: unknown;
+    disabled?: unknown;
+    readonly?: unknown;
+    firstFail?: unknown;
+    modelValue?: unknown;
+    validateOn?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Заголовок формы
+     */
+    label: {
+        type: PropType<string>;
+        default: string;
+    };
+    /**
+     * Описание формы
+     */
+    description: {
+        type: PropType<string>;
+        default: string;
+    };
+    /**
+     * Заблокировать форму
+     */
+    disabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Сделать форму только для чтения
+     */
+    readonly: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Остановить валидацию при первой ошибке
+     */
+    firstFail: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Значение модели
+     */
+    modelValue: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+    /**
+     * Событие для валидации
+     */
+    validateOn: {
+        type: PropType<"input" | "blur" | "submit" | undefined>;
+        default: string;
+    };
+}, Defaults>;
+export declare const FormKey: InjectionKey<IFormProvide>;
+export declare function createForm(props: IFormProps): {
+    errors: Ref<{
+        id: string | number;
+        errorMessages: string[];
+    }[]>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isValidating: Ref<boolean>;
+    model: Ref<boolean | null> & {
+        readonly externalValue: boolean | null;
+    };
+    validate: () => Promise<{
+        valid: boolean;
+        errors: {
+            id: string | number;
+            errorMessages: string[];
+        }[];
+    }>;
+    reset: () => void;
+    resetValidation: () => void;
+};
+export declare function useForm(): IFormProvide | null;
+export {};

package/dist/composable/hidration.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export declare function useHydration(): Ref<boolean>;