@dskripchenko/ui 1.4.0 → 1.5.1

package/README.md

@@ -81,7 +81,7 @@ Switch theme by attribute on `<html>`:
 
 A short selection — the full catalog is in [Storybook](https://dskripchenko.github.io/ui/).
 
-**Forms & input:** Button, Input, Textarea, NumberInput, Checkbox, Radio, Switch, Label, FormField, Select, Combobox, TagsInput, DatePicker, DateRangePicker, TimePicker, ColorPicker, Slider, Rating, FileUpload, Mention, TreeSelect, Cascader
+**Forms & input:** Button, Input, Textarea, NumberInput, Checkbox, CheckboxGroup, Radio, Switch, Label, FormField, Select, Combobox, TagsInput, DatePicker, DateRangePicker, TimePicker, ColorPicker, Slider, Rating, FileUpload, Mention, TreeSelect, Cascader
 
 **Feedback:** Spinner, Skeleton, Badge, Alert, Progress, Toast, Tour
 

package/dist/components/BackTop/UidBackTop.vue.d.ts

@@ -21,8 +21,8 @@ declare const __VLS_component: import('vue').DefineComponent<UidBackTopProps, {}
     onClick?: (() => any) | undefined;
 }>, {
     target: string | HTMLElement | (() => HTMLElement | null);
-    visibleAfter: number;
     smooth: boolean;
+    visibleAfter: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Breadcrumb/UidBreadcrumbItem.vue.d.ts

@@ -1,5 +1,12 @@
 export interface UidBreadcrumbItemProps {
     href?: string;
+    /** Router location. Rendered through the app's globally registered RouterLink; without one it falls back to `href` (or a string `to`). */
+    to?: string | Record<string, unknown>;
+    /**
+     * Marks the crumb as the current page (`aria-current="page"`, current styling, no link).
+     * When omitted, only the last crumb of the list is treated as current.
+     * Set `false` to keep the last crumb a regular one.
+     */
     current?: boolean;
 }
 declare function __VLS_template(): {
@@ -9,14 +16,23 @@ declare function __VLS_template(): {
     }> & {
         default(): unknown;
     };
-    refs: {};
+    refs: {
+        itemRef: HTMLLIElement;
+    };
     rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<UidBreadcrumbItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<UidBreadcrumbItemProps> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<UidBreadcrumbItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<UidBreadcrumbItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
     href: string;
+    to: string | Record<string, unknown>;
     current: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    itemRef: HTMLLIElement;
+}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue';
+export interface BreadcrumbContext {
+    /** Bumped after every UidBreadcrumb update so items can re-check whether they are last. */
+    tick: Ref<number>;
+}
+export declare const BREADCRUMB_KEY: InjectionKey<BreadcrumbContext>;

package/dist/components/Checkbox/UidCheckboxGroup.vue.d.ts

@@ -0,0 +1,36 @@
+export type CheckboxGroupValue = string | number;
+export interface CheckboxGroupOption {
+    value: CheckboxGroupValue;
+    label: string;
+    disabled?: boolean;
+}
+export interface UidCheckboxGroupProps {
+    options: CheckboxGroupOption[];
+    name?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
+}
+type __VLS_Props = UidCheckboxGroupProps;
+type __VLS_PublicProps = {
+    modelValue?: CheckboxGroupValue[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: CheckboxGroupValue[]) => any;
+    change: (value: CheckboxGroupValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CheckboxGroupValue[]) => any) | undefined;
+    onChange?: ((value: CheckboxGroupValue[]) => any) | undefined;
+}>, {
+    label: string;
+    required: boolean;
+    disabled: boolean;
+    hint: string;
+    error: string;
+    name: string;
+    direction: "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -1,2 +1,4 @@
 export { default as UidCheckbox } from './UidCheckbox.vue';
 export type { UidCheckboxProps } from './UidCheckbox.vue';
+export { default as UidCheckboxGroup } from './UidCheckboxGroup.vue';
+export type { UidCheckboxGroupProps, CheckboxGroupOption, CheckboxGroupValue, } from './UidCheckboxGroup.vue';

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

@@ -23,9 +23,9 @@ declare const __VLS_component: import('vue').DefineComponent<UidCodeProps, {}, {
     code: string;
     inline: boolean;
     copy: boolean;
+    wrap: boolean;
     language: string;
     lineNumbers: boolean;
-    wrap: boolean;
     maxHeight: string;
     highlight: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/Grid/UidGrid.vue.d.ts

@@ -20,9 +20,9 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<UidGridProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<UidGridProps> & Readonly<{}>, {
     as: string;
+    justify: "start" | "center" | "end" | "stretch";
     gap: string;
     align: "start" | "center" | "end" | "stretch";
-    justify: "start" | "center" | "end" | "stretch";
     cols: number | string;
     rowGap: string;
     colGap: string;

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

@@ -1,5 +1,6 @@
 import { Component } from 'vue';
 export interface UidMenuItemProps {
+    /** Icon component (e.g. from lucide-vue-next) rendered before the label. */
     icon?: Component;
     disabled?: boolean;
     variant?: 'default' | 'danger';

package/dist/components/Select/UidSelect.vue.d.ts

@@ -4,6 +4,7 @@ export interface SelectOption {
     disabled?: boolean;
     group?: string;
 }
+export type SelectValue = string | number;
 export interface UidSelectProps {
     options: SelectOption[];
     placeholder?: string;
@@ -11,22 +12,31 @@ export interface UidSelectProps {
     searchable?: boolean;
     clearable?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Multi-value mode: v-model is an array, the selected options are shown as
+     * removable chips, and picking an option toggles it without closing the dropdown.
+     */
+    multiple?: boolean;
+    /** Multiple mode: show at most this many chips and collapse the rest into "+N". */
+    maxTagCount?: number;
 }
 type __VLS_Props = UidSelectProps;
 type __VLS_PublicProps = {
-    modelValue?: string | number | null;
+    modelValue?: SelectValue | SelectValue[] | null;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | null) => any;
-    change: (value: string | number | null) => any;
+    "update:modelValue": (value: SelectValue | SelectValue[] | null) => any;
+    change: (value: SelectValue | SelectValue[] | null) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
-    onChange?: ((value: string | number | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectValue | SelectValue[] | null) => any) | undefined;
+    onChange?: ((value: SelectValue | SelectValue[] | null) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
     disabled: boolean;
+    multiple: boolean;
     searchable: boolean;
     clearable: boolean;
+    maxTagCount: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     triggerRef: HTMLDivElement;

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

@@ -1,2 +1,2 @@
 export { default as UidSelect } from './UidSelect.vue';
-export type { UidSelectProps, SelectOption } from './UidSelect.vue';
+export type { UidSelectProps, SelectOption, SelectValue } from './UidSelect.vue';

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

@@ -12,6 +12,13 @@ export interface UidSliderProps {
     showValue?: boolean;
     formatValue?: (val: number) => string;
     marks?: UidSliderMarks;
+    /**
+     * Accessible name for the slider handle, independent of the visible `label`
+     * (e.g. when the visible caption lives elsewhere or is not descriptive enough).
+     */
+    ariaLabel?: string;
+    /** Id(s) of the element(s) that label the slider handle. Takes precedence over `ariaLabel`/`label`. */
+    ariaLabelledby?: string;
 }
 type __VLS_Props = UidSliderProps;
 type __VLS_PublicProps = {
@@ -30,5 +37,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     step: number;
     formatValue: (val: number) => string;
     marks: UidSliderMarks;
+    ariaLabel: string;
+    ariaLabelledby: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Stack/UidStack.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_component: import('vue').DefineComponent<UidStackProps, {},
     direction: "row" | "column" | "row-reverse" | "column-reverse";
     as: string;
     wrap: boolean;
+    justify: "start" | "center" | "end" | "between" | "around" | "evenly";
     gap: string;
     align: "start" | "center" | "end" | "stretch" | "baseline";
-    justify: "start" | "center" | "end" | "between" | "around" | "evenly";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -4,6 +4,11 @@ export interface UidTableColumn {
     sortable?: boolean;
     align?: 'left' | 'center' | 'right';
     width?: string;
+    /**
+     * Pin the column to the left or right edge while the table scrolls horizontally.
+     * Put left-fixed columns first and right-fixed columns last.
+     */
+    fixed?: 'left' | 'right';
 }
 export type SortDirection = 'asc' | 'desc' | null;
 export interface UidTableProps {
@@ -29,7 +34,10 @@ declare function __VLS_template(): {
     }> & {
         [key: string]: (row?: Record<string, unknown>) => unknown;
     };
-    refs: {};
+    refs: {
+        scrollRef: HTMLDivElement;
+        headRowRef: HTMLTableRowElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -53,7 +61,10 @@ declare const __VLS_component: import('vue').DefineComponent<UidTableProps, {},
     selectable: boolean;
     selection: Set<string | number>;
     rowKey: string | ((row: Record<string, unknown>) => string | number);
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollRef: HTMLDivElement;
+    headRowRef: HTMLTableRowElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -33,11 +33,11 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     disabled: boolean;
     multiple: boolean;
     clearable: boolean;
+    maxTagCount: number;
     checkable: boolean;
     checkStrictly: boolean;
     defaultExpandAll: boolean;
     showGuides: boolean;
-    maxTagCount: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
     triggerRef: HTMLDivElement;

package/dist/composables/useRouterLink.d.ts

@@ -0,0 +1,18 @@
+import { Component, ComputedRef } from 'vue';
+export type RouterLocation = string | Record<string, unknown>;
+export interface UseRouterLinkSource {
+    href?: string;
+    to?: RouterLocation;
+}
+export interface UseRouterLink {
+    /** The app's globally registered `RouterLink`, or `null` when `to` is unset or vue-router is not installed. */
+    routerLink: ComputedRef<Component | null>;
+    /** Plain `href` for the `<a>` fallback: explicit `href`, else a string `to`. */
+    fallbackHref: ComputedRef<string | undefined>;
+}
+/**
+ * Resolves `to` against a globally registered RouterLink without warning or rendering a
+ * broken `<routerlink>` element when vue-router is absent; callers fall back to `<a href>`.
+ * Must be called during component setup.
+ */
+export declare function useRouterLink(source: UseRouterLinkSource): UseRouterLink;