@dskripchenko/ui 1.2.2 → 1.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 A Vue 3 component, token, and theme library on CSS custom properties.
 
-[**English**](./README.md) · [Русский](./README.ru.md) · [Deutsch](./README.de.md) · [中文](./README.zh.md)
+[**English**](./README.md) · [Русский](docs/ru/README.md) · [Deutsch](docs/de/README.md) · [中文](docs/zh/README.md)
 
 [![npm](https://img.shields.io/npm/v/@dskripchenko/ui.svg)](https://www.npmjs.com/package/@dskripchenko/ui)
 [![bundle](https://img.shields.io/bundlephobia/minzip/@dskripchenko/ui)](https://bundlephobia.com/package/@dskripchenko/ui)
@@ -112,7 +112,7 @@ User docs are translated into four languages — pick yours:
 - 🇩🇪 **Deutsch**: [docs/de/](./docs/de/)
 - 🇨🇳 **中文**: [docs/zh/](./docs/zh/)
 
-Contributor docs (English only): [Architecture](./docs/ARCHITECTURE.md), [Component guidelines](./docs/COMPONENT_GUIDELINES.md), [Contributing](./docs/CONTRIBUTING.md), [Roadmap](./docs/ROADMAP.md).
+Contributor docs (English only): [Architecture](./docs/internal/architecture.md), [Component guidelines](./docs/internal/component-guidelines.md), [Contributing](./.github/CONTRIBUTING.md), [Roadmap](./docs/internal/roadmap.md).
 
 ## Theming
 

package/dist/components/Button/UidButton.vue.d.ts

@@ -1,20 +1,25 @@
+import { Component } from 'vue';
 export type UidButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 export type UidButtonSize = 'sm' | 'md' | 'lg';
+export type UidButtonIconPosition = 'start' | 'end';
 export interface UidButtonProps {
     variant?: UidButtonVariant;
     size?: UidButtonSize;
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
+    /** Icon component (e.g. from lucide-vue-next). Without default slot content the button becomes icon-only. */
+    icon?: Component;
+    iconPosition?: UidButtonIconPosition;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
-        default(): unknown;
+        default?(): unknown;
         prepend?(): unknown;
         append?(): unknown;
     }> & {
-        default(): unknown;
+        default?(): unknown;
         prepend?(): unknown;
         append?(): unknown;
     };
@@ -27,11 +32,13 @@ declare const __VLS_component: import('vue').DefineComponent<UidButtonProps, {},
 }, string, import('vue').PublicProps, Readonly<UidButtonProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    icon: Component;
     size: UidButtonSize;
     type: "button" | "submit" | "reset";
     variant: UidButtonVariant;
     disabled: boolean;
     loading: boolean;
+    iconPosition: UidButtonIconPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1,2 +1,2 @@
 export { default as UidButton } from './UidButton.vue';
-export type { UidButtonProps, UidButtonVariant, UidButtonSize } from './UidButton.vue';
+export type { UidButtonProps, UidButtonVariant, UidButtonSize, UidButtonIconPosition } from './UidButton.vue';

package/dist/components/Cascader/UidCascader.vue.d.ts

@@ -14,6 +14,9 @@ export interface UidCascaderProps {
     label?: string;
     hint?: string;
     expandTrigger?: 'click' | 'hover';
+    searchable?: boolean;
+    changeOnSelect?: boolean;
+    searchPlaceholder?: string;
 }
 type __VLS_Props = UidCascaderProps;
 type __VLS_PublicProps = {
@@ -28,9 +31,14 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
 }>, {
     disabled: boolean;
     separator: string;
+    searchable: boolean;
     clearable: boolean;
     expandTrigger: "click" | "hover";
+    changeOnSelect: boolean;
+    searchPlaceholder: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
+    triggerRef: HTMLDivElement;
+    searchRef: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/components/Code/UidCode.vue.d.ts

@@ -6,6 +6,7 @@ export interface UidCodeProps {
     copy?: boolean;
     wrap?: boolean;
     maxHeight?: string;
+    highlight?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -26,6 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<UidCodeProps, {}, {
     lineNumbers: boolean;
     wrap: boolean;
     maxHeight: string;
+    highlight: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Code/highlight.d.ts

@@ -0,0 +1,7 @@
+export type UidCodeTokenType = 'plain' | 'comment' | 'string' | 'number' | 'keyword' | 'literal' | 'function' | 'variable' | 'tag' | 'attr' | 'property' | 'punctuation';
+export interface UidCodeToken {
+    type: UidCodeTokenType;
+    text: string;
+}
+export declare function isHighlightable(language?: string): boolean;
+export declare function tokenize(code: string, language?: string): UidCodeToken[];

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

@@ -1,2 +1,4 @@
 export { default as UidCode } from './UidCode.vue';
 export type { UidCodeProps } from './UidCode.vue';
+export { tokenize, isHighlightable } from './highlight.js';
+export type { UidCodeToken, UidCodeTokenType } from './highlight.js';

package/dist/components/ColorPicker/UidColorPicker.vue.d.ts

@@ -15,8 +15,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     onChange?: ((value: string | null) => any) | undefined;
 }>, {
     disabled: boolean;
-    presets: string[];
     alpha: boolean;
+    presets: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     gradientRef: HTMLDivElement;

package/dist/components/ColorPicker/colorParse.d.ts

@@ -0,0 +1,4 @@
+export type RgbaTuple = [r: number, g: number, b: number, a: number];
+export declare function parseColor(input: string | null | undefined): RgbaTuple | null;
+export declare function toHex([r, g, b, a]: RgbaTuple): string;
+export declare function normalizeColor(input: string | null | undefined): string | null;

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

@@ -1,2 +1,4 @@
 export { default as UidColorPicker } from './UidColorPicker.vue';
 export type { UidColorPickerProps } from './UidColorPicker.vue';
+export { parseColor, normalizeColor } from './colorParse.js';
+export type { RgbaTuple } from './colorParse.js';

package/dist/components/DateRangePicker/UidDateRangePicker.vue.d.ts

@@ -2,6 +2,10 @@ export interface DateRange {
     start: string | null;
     end: string | null;
 }
+export interface DateRangePreset {
+    label: string;
+    range: () => DateRange;
+}
 export interface UidDateRangePickerProps {
     min?: string;
     max?: string;
@@ -9,6 +13,8 @@ export interface UidDateRangePickerProps {
     clearable?: boolean;
     placeholder?: string;
     format?: (date: Date) => string;
+    withTime?: boolean;
+    presets?: DateRangePreset[] | false;
 }
 type __VLS_Props = UidDateRangePickerProps;
 type __VLS_PublicProps = {
@@ -26,6 +32,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     max: string;
     format: (date: Date) => string;
     clearable: boolean;
+    presets: DateRangePreset[] | false;
+    withTime: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     triggerRef: HTMLDivElement;

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

@@ -1,2 +1,2 @@
 export { default as UidDateRangePicker } from './UidDateRangePicker.vue';
-export type { UidDateRangePickerProps, DateRange } from './UidDateRangePicker.vue';
+export type { UidDateRangePickerProps, DateRange, DateRangePreset } from './UidDateRangePicker.vue';

package/dist/components/Drawer/UidDrawer.vue.d.ts

@@ -1,7 +1,9 @@
 export interface UidDrawerProps {
     title?: string;
-    side?: 'right' | 'left' | 'bottom';
+    side?: 'right' | 'left' | 'top' | 'bottom';
     closeOnOverlay?: boolean;
+    /** Close on the Escape key (default). */
+    closeOnEsc?: boolean;
     hideClose?: boolean;
     width?: string;
     height?: string;
@@ -38,8 +40,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     width: string;
     height: string;
     closeOnOverlay: boolean;
+    closeOnEsc: boolean;
     hideClose: boolean;
-    side: "right" | "left" | "bottom";
+    side: "right" | "left" | "top" | "bottom";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     panelRef: HTMLDivElement;
 }, any>;

package/dist/components/Image/UidImage.vue.d.ts

@@ -0,0 +1,54 @@
+export type UidImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export interface UidImageProps {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fit?: UidImageFit;
+    /** Native lazy loading (`loading="lazy"`). */
+    lazy?: boolean;
+    /** Shown when `src` fails to load. */
+    fallbackSrc?: string;
+    /** Corner radius: a CSS value or a token name (`sm`, `md`, `lg`, `full`). */
+    radius?: string;
+    /** Click opens the image in a full-size dialog. */
+    preview?: boolean;
+    /** Larger image for the preview dialog; defaults to `src`. */
+    previewSrc?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        fallback?(): unknown;
+        placeholder?(): unknown;
+    }> & {
+        fallback?(): unknown;
+        placeholder?(): unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<UidImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (event: Event) => any;
+    load: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<UidImageProps> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+    onLoad?: ((event: Event) => any) | undefined;
+}>, {
+    width: number | string;
+    height: number | string;
+    preview: boolean;
+    radius: string;
+    fit: UidImageFit;
+    lazy: boolean;
+    fallbackSrc: string;
+    previewSrc: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as UidImage } from './UidImage.vue';
+export type { UidImageProps, UidImageFit } from './UidImage.vue';

package/dist/components/Menu/UidSubMenu.vue.d.ts

@@ -0,0 +1,48 @@
+import { Component } from 'vue';
+export interface UidSubMenuProps {
+    label?: string;
+    icon?: Component;
+    disabled?: boolean;
+}
+declare function show(focusFirst?: boolean): Promise<void>;
+declare function hide(focusTrigger?: boolean): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(): unknown;
+        label?(): unknown;
+    }> & {
+        default(): unknown;
+        label?(): unknown;
+    };
+    refs: {
+        triggerRef: HTMLButtonElement;
+        panelRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<UidSubMenuProps, {
+    open: typeof show;
+    close: typeof hide;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+}, string, import('vue').PublicProps, Readonly<UidSubMenuProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+}>, {
+    icon: Component;
+    label: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    triggerRef: HTMLButtonElement;
+    panelRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Menu/context.d.ts

@@ -1,2 +1,8 @@
-import { InjectionKey } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 export declare const MENU_CLOSE_KEY: InjectionKey<() => void>;
+export interface MenuLevel {
+    activeSubmenu: Ref<string | null>;
+}
+export declare const MENU_LEVEL_KEY: InjectionKey<MenuLevel>;
+export declare function getLevelItems(menu: HTMLElement | null): HTMLElement[];
+export declare function moveFocus(menu: HTMLElement | null, key: string): boolean;

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

@@ -1,4 +1,6 @@
 export { default as UidMenu } from './UidMenu.vue';
 export { default as UidMenuItem } from './UidMenuItem.vue';
 export { default as UidMenuSeparator } from './UidMenuSeparator.vue';
+export { default as UidSubMenu } from './UidSubMenu.vue';
 export type { UidMenuItemProps } from './UidMenuItem.vue';
+export type { UidSubMenuProps } from './UidSubMenu.vue';

package/dist/components/Modal/UidModal.vue.d.ts

@@ -1,7 +1,9 @@
 export interface UidModalProps {
     title?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     closeOnOverlay?: boolean;
+    /** Close on the Escape key (default). Turn off for a dialog that must be answered. */
+    closeOnEsc?: boolean;
     hideClose?: boolean;
 }
 type __VLS_Props = UidModalProps;
@@ -32,9 +34,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    size: "sm" | "md" | "lg" | "xl";
+    size: "sm" | "md" | "lg" | "xl" | "full";
     title: string;
     closeOnOverlay: boolean;
+    closeOnEsc: boolean;
     hideClose: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     dialogRef: HTMLDivElement;

package/dist/components/Slider/UidSlider.vue.d.ts

@@ -1,3 +1,8 @@
+export interface UidSliderMark {
+    value: number;
+    label?: string;
+}
+export type UidSliderMarks = number[] | Record<number, string> | UidSliderMark[];
 export interface UidSliderProps {
     min?: number;
     max?: number;
@@ -6,6 +11,7 @@ export interface UidSliderProps {
     label?: string;
     showValue?: boolean;
     formatValue?: (val: number) => string;
+    marks?: UidSliderMarks;
 }
 type __VLS_Props = UidSliderProps;
 type __VLS_PublicProps = {
@@ -23,5 +29,6 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     showValue: boolean;
     step: number;
     formatValue: (val: number) => string;
+    marks: UidSliderMarks;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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

@@ -1,2 +1,2 @@
 export { default as UidSlider } from './UidSlider.vue';
-export type { UidSliderProps } from './UidSlider.vue';
+export type { UidSliderProps, UidSliderMark, UidSliderMarks } from './UidSlider.vue';

package/dist/components/Stepper/UidStepper.vue.d.ts

@@ -6,9 +6,19 @@ export interface UidStepperProps {
     steps: StepperStep[];
     current?: number;
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Which steps can be chosen by click or keyboard: none (default), the
+     * completed ones (going back), or all of them.
+     */
+    selectable?: 'none' | 'completed' | 'all';
 }
-declare const _default: import('vue').DefineComponent<UidStepperProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<UidStepperProps> & Readonly<{}>, {
+declare const _default: import('vue').DefineComponent<UidStepperProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<UidStepperProps> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+}>, {
     orientation: "horizontal" | "vertical";
     current: number;
+    selectable: "none" | "completed" | "all";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLOListElement>;
 export default _default;

package/dist/components/Table/UidTable.vue.d.ts

@@ -15,11 +15,11 @@ export interface UidTableProps {
     emptyText?: string;
     striped?: boolean;
     bordered?: boolean;
-    /** Включить колонку чекбоксов слева (header + per-row). */
+    /** Switch on the checkbox column on the left (the header plus every row). */
     selectable?: boolean;
-    /** Set ID-шников выбранных строк. */
+    /** The set of ids of the selected rows. */
     selection?: Set<string | number>;
-    /** Поле id-строки. По умолчанию — `id`. */
+    /** The row's id field. `id` by default. */
     rowKey?: string | ((row: Record<string, unknown>) => string | number);
 }
 declare function __VLS_template(): {

package/dist/components/TreeSelect/UidTreeSelect.vue.d.ts

@@ -2,6 +2,8 @@ import { TreeNode, TreeKey } from '../TreeView/context.js';
 export interface UidTreeSelectProps {
     nodes: TreeNode[];
     multiple?: boolean;
+    checkable?: boolean;
+    checkStrictly?: boolean;
     placeholder?: string;
     disabled?: boolean;
     clearable?: boolean;
@@ -31,6 +33,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     disabled: boolean;
     multiple: boolean;
     clearable: boolean;
+    checkable: boolean;
+    checkStrictly: boolean;
     defaultExpandAll: boolean;
     showGuides: boolean;
     maxTagCount: number;

package/dist/components/TreeView/UidTreeView.vue.d.ts

@@ -3,13 +3,15 @@ export interface UidTreeViewProps {
     nodes: TreeNode[];
     selectable?: TreeSelectable;
     checkable?: boolean;
+    checkStrictly?: boolean;
     disabled?: boolean;
     defaultExpandAll?: boolean;
     showGuides?: boolean;
     /**
-     * Виртуальный корневой узел, оборачивающий все `nodes` как children.
-     * Строка → автогенерируется `{key:'__virtual_root__', label, selectable:false}`.
-     * TreeNode → используется как есть; если children не заданы — туда подставляются props.nodes.
+     * A virtual root node wrapping all of `nodes` as its children.
+     * A string autogenerates `{key:'__virtual_root__', label, selectable:false}`.
+     * A TreeNode is used as is; when its children are not set, props.nodes goes
+     * there.
      */
     virtualRoot?: string | TreeNode | null;
 }
@@ -35,6 +37,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     disabled: boolean;
     selectable: TreeSelectable;
     checkable: boolean;
+    checkStrictly: boolean;
     defaultExpandAll: boolean;
     showGuides: boolean;
     virtualRoot: string | TreeNode | null;