bitboss-ui 2.1.113 → 2.1.115

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

@@ -1,152 +1,11 @@
-import { BaseColorInputEvents, BaseColorInputSlots } from '../BaseColorInput/types';
-import { HTMLAttributes, InputHTMLAttributes } from 'vue';
-import { IconType } from '../../types/Icon';
-export type BbColorInputProps = {
-    /**
-     * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
-     */
-    alpha?: boolean;
-    /**
-     * Name of the icon to be added at the end of the input.
-     */
-    'append:icon'?: IconType;
-    /**
-     * Guides to the browser as to the type of information expected in the field.
-     */
-    autocomplete?: InputHTMLAttributes['autocomplete'];
-    /**
-     * Sets autofocus on page load.
-     */
-    autofocus?: InputHTMLAttributes['autofocus'];
-    /**
-     * Displays a clear button when the input has a value and is being interacted with.
-     */
-    clearable?: boolean;
-    /**
-     * Displays the component in a compact version.
-     */
-    compact?: boolean;
-    /**
-     * Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`.
-     */
-    direction?: 'horizontal' | 'vertical' | 'auto' | string;
-    /**
-     * Disables the component
-     */
-    disabled?: boolean;
-    /**
-     * Can be a string or an array of string containing the messages to display.
-     */
-    errors?: string | string[];
-    /**
-     * Define if the component should be in an error state.
-     * It usually attaches a CSS class for styling purposes.
-     */
-    hasErrors?: boolean;
-    /**
-     * Visually hides the label of the input while maintaining accessibility.
-     */
-    hideLabel?: boolean;
-    /**
-     * Color box to be displayed near the input, usually to indicate instructions.
-     */
-    hint?: string;
-    /**
-     * The identifier of the component.
-     */
-    id?: HTMLAttributes['id'];
-    /**
-     * Color content of the label of the element.
-     */
-    label: string;
-    /**
-     * Sets the color alignment of the label.
-     */
-    labelPosition?: 'left' | 'center' | 'right';
-    /**
-     * Sets the component in a loading state, usually triggering some visual styles.
-     */
-    loading?: boolean;
-    /**
-     * Used my v-model
-     */
-    modelValue: string | null;
-    /**
-     * Defines the name of the input.
-     */
-    name?: InputHTMLAttributes['name'];
-    /**
-     * Keeps the hint displayed.
-     */
-    persistentHint?: boolean;
-    /**
-     * String displayed when there's no data.
-     */
-    placeholder?: InputHTMLAttributes['placeholder'];
-    /**
-     * Name of the icon to be added at the start of the input.
-     */
-    'prepend:icon'?: IconType;
-    /**
-     * Sets the input in a readonly state.
-     */
-    readonly?: boolean;
-    /**
-     * Sets the input as required.
-     */
-    required?: boolean;
-    /**
-     * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
-     */
-    reverse?: boolean;
-    /**
-     * Show an eyedropper button to sample any color on screen.
-     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
-     * @default false
-     */
-    picker?: boolean;
-    /**
-     * Controls swatches display in the picker:
-     * - `true`       — show the built-in Material-palette swatches
-     * - `string[][]` — show custom swatches (each inner array = a column of shades)
-     * - `false` / omitted — no swatches section
-     */
-    swatches?: boolean | string[][];
-};
-export type BbColorInputEvents = BaseColorInputEvents;
-export type BbColorInputSlots = BaseColorInputSlots & {
-    /**
-     * Replaces the default label text rendered above the color input.
-     * @param text - The `label` prop value.
-     * @param hasErrors - Whether the input is in an error state.
-     */
-    label?: (props: {
-        text: string;
-        hasErrors: boolean;
-    }) => any;
-};
+import { BbColorInputProps, BbColorInputEvents, BbColorInputSlots } from './types';
+export type { BbColorInputProps, BbColorInputEvents, BbColorInputSlots };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: Readonly<BaseColorInputSlots & {
-        /**
-         * Replaces the default label text rendered above the color input.
-         * @param text - The `label` prop value.
-         * @param hasErrors - Whether the input is in an error state.
-         */
-        label?: (props: {
-            text: string;
-            hasErrors: boolean;
-        }) => any;
-    }> & BaseColorInputSlots & {
-        /**
-         * Replaces the default label text rendered above the color input.
-         * @param text - The `label` prop value.
-         * @param hasErrors - Whether the input is in an error state.
-         */
-        label?: (props: {
-            text: string;
-            hasErrors: boolean;
-        }) => any;
+    slots: Readonly<import('../BaseColorInput/types').BaseColorInputSlots & {
+        label?: (props: import('./types').BbColorInputLabelSlotProps) => any;
+    }> & import('../BaseColorInput/types').BaseColorInputSlots & {
+        label?: (props: import('./types').BbColorInputLabelSlotProps) => any;
     };
     refs: {};
     rootEl: HTMLDivElement;
@@ -154,24 +13,24 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<BbColorInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     input: (event: Event) => any;
-    "update:modelValue": (value: string | null) => any;
-    keydown: (event: KeyboardEvent) => any;
     blur: (event: FocusEvent) => any;
     change: (event: Event) => any;
     click: (event: MouseEvent) => any;
     focus: (event: FocusEvent) => any;
+    keydown: (event: KeyboardEvent) => any;
     mousedown: (event: MouseEvent) => any;
     mouseup: (event: MouseEvent) => any;
+    "update:modelValue": (value: string | null) => any;
 }, string, import('vue').PublicProps, Readonly<BbColorInputProps> & Readonly<{
     onInput?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
     onChange?: ((event: Event) => any) | undefined;
     onClick?: ((event: MouseEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent) => any) | undefined;
     onMousedown?: ((event: MouseEvent) => any) | undefined;
     onMouseup?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -0,0 +1,131 @@
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { IconType } from '../../types/Icon';
+import { BaseColorInputEvents, BaseColorInputSlots } from '../BaseColorInput/types';
+export type BbColorInputProps = {
+    /**
+     * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
+     */
+    alpha?: boolean;
+    /**
+     * Name of the icon to be added at the end of the input.
+     */
+    'append:icon'?: IconType;
+    /**
+     * Guides the browser as to the type of information expected in the field.
+     */
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    /**
+     * Sets autofocus on page load.
+     */
+    autofocus?: InputHTMLAttributes['autofocus'];
+    /**
+     * Displays a clear button when the input has a value and is being interacted with.
+     */
+    clearable?: boolean;
+    /**
+     * Displays the component in a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`.
+     */
+    direction?: 'horizontal' | 'vertical' | 'auto' | string;
+    /**
+     * Disables the component.
+     */
+    disabled?: boolean;
+    /**
+     * Can be a string or an array of string containing the messages to display.
+     */
+    errors?: string | string[];
+    /**
+     * Define if the component should be in an error state.
+     * It usually attaches a CSS class for styling purposes.
+     */
+    hasErrors?: boolean;
+    /**
+     * Visually hides the label of the input while maintaining accessibility.
+     */
+    hideLabel?: boolean;
+    /**
+     * Text box to be displayed near the input, usually to indicate instructions.
+     */
+    hint?: string;
+    /**
+     * The identifier of the component.
+     */
+    id?: HTMLAttributes['id'];
+    /**
+     * Text content of the label of the element.
+     */
+    label: string;
+    /**
+     * Sets the text alignment of the label.
+     */
+    labelPosition?: 'left' | 'center' | 'right';
+    /**
+     * Sets the component in a loading state, usually triggering some visual styles.
+     */
+    loading?: boolean;
+    /**
+     * Used by v-model.
+     */
+    modelValue: string | null;
+    /**
+     * Defines the name of the input.
+     */
+    name?: InputHTMLAttributes['name'];
+    /**
+     * Keeps the hint displayed.
+     */
+    persistentHint?: boolean;
+    /**
+     * String displayed when there's no data.
+     */
+    placeholder?: InputHTMLAttributes['placeholder'];
+    /**
+     * Name of the icon to be added at the start of the input.
+     */
+    'prepend:icon'?: IconType;
+    /**
+     * Sets the input in a readonly state.
+     */
+    readonly?: boolean;
+    /**
+     * Sets the input as required.
+     */
+    required?: boolean;
+    /**
+     * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
+     */
+    reverse?: boolean;
+    /**
+     * Show an eyedropper button to sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     *
+     * @defaultValue `false`
+     */
+    picker?: boolean;
+    /**
+     * Controls swatches display in the picker:
+     * - `true`       — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
+};
+/** Re-export for consumers importing events type from BbColorInput. */
+export type { BaseColorInputEvents as BbColorInputEvents };
+/** Props exposed by the `label` slot. */
+export type BbColorInputLabelSlotProps = {
+    /** The `label` prop value. */
+    text: string;
+    /** Whether the input is in an error state. */
+    hasErrors: boolean;
+};
+export type BbColorInputSlots = BaseColorInputSlots & {
+    /**
+     * Replaces the default label text rendered above the color input.
+     */
+    label?: (props: BbColorInputLabelSlotProps) => any;
+};

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

@@ -1,115 +1,5 @@
-import { CommonProps } from '../../types/CommonProps';
-export type BbColorPaletteProps = Pick<CommonProps, 'arrowPadding' | 'eager' | 'offset' | 'padding' | 'placement' | 'transitionDuration'> & {
-    /**
-     * v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when
-     * `alpha` is enabled), or `null` when empty.
-     */
-    modelValue: string | null;
-    /**
-     * Enable the alpha channel. The picker shows an opacity slider and emits
-     * `#RRGGBBAA` hex8 values.
-     */
-    alpha?: boolean;
-    /**
-     * Controls swatches display in the picker:
-     * - `true`       — show the built-in Material-palette swatches
-     * - `string[][]` — show custom swatches (each inner array = a column of shades)
-     * - `false` / omitted — no swatches section
-     */
-    swatches?: boolean | string[][];
-    /**
-     * External activator element or component ref.
-     * When provided, the `activator` slot is not rendered and click listeners are
-     * attached programmatically to the referenced element — mirroring the
-     * BbDropdown activator API.
-     */
-    activator?: HTMLElement | Record<string, any> | null;
-    /**
-     * Element or component ref the popover positions itself relative to.
-     * Defaults to the activator element when omitted, allowing the popover to
-     * be anchored to a larger container (e.g. the full input row) while a
-     * smaller element (e.g. a color dot) remains the click target.
-     */
-    anchor?: HTMLElement | Record<string, any> | null;
-    /**
-     * Constrains the popover within a bounding element.
-     * Accepts an HTMLElement, a Vue component ref, or a CSS selector string.
-     */
-    boundary?: HTMLElement | Record<string, any> | string | null;
-    /**
-     * Whether to flip the popover to the opposite side when there is not enough space.
-     * @default true
-     */
-    flip?: boolean;
-    /**
-     * Show the popover arrow. Hidden by default since the palette has its own visual frame.
-     * @default false
-     */
-    showArrow?: boolean;
-    /**
-     * Disable all interaction (activator and palette).
-     */
-    disabled?: boolean;
-    /**
-     * Prevent opening the palette while keeping the activator visible.
-     */
-    readonly?: boolean;
-    /**
-     * Accessible label applied to the activator element via `aria-label`.
-     * Defaults to the locale string for "Open color picker" when omitted.
-     */
-    label?: string;
-    /**
-     * Show an eyedropper button inside the palette to sample any color on screen.
-     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
-     * @default false
-     */
-    picker?: boolean;
-};
-export type BbColorPaletteEvents = {
-    (e: 'update:modelValue', value: string | null): void;
-    /** Fires whenever the popover opens or closes. */
-    (e: 'update:open', value: boolean): void;
-};
-export type BbColorPaletteSlots = {
-    /**
-     * Custom activator element.
-     * Apply `v-bind="props"` to the element you want to use as the trigger —
-     * this wires up the ref callback that lets BbColorPalette track the element.
-     *
-     * @example
-     * ```vue
-     * <BbColorPalette v-model="color">
-     *   <template #activator="{ props: dotProps, open, color }">
-     *     <button v-bind="dotProps" :style="{ background: color }">Pick</button>
-     *   </template>
-     * </BbColorPalette>
-     * ```
-     */
-    activator?: (props: {
-        /**
-         * Spread onto your activator element to register the ref.
-         * ARIA attributes (`aria-haspopup`, `aria-expanded`, `aria-label`) are set
-         * programmatically so they stay correct for both the slot and external activator paths.
-         */
-        props: {
-            ref: (el: unknown) => void;
-        };
-        /**
-         * Spread onto a wrapping element when you want the popover to anchor to
-         * something larger than the click target (e.g. the full input row).
-         * When unused the activator element is also the anchor.
-         */
-        anchorProps: {
-            ref: (el: unknown) => void;
-        };
-        /** Whether the palette popover is currently open. */
-        open: boolean;
-        /** The current color value (mirrors `modelValue`). */
-        color: string | null;
-        disabled?: boolean;
-    }) => any;
-};
+import { BbColorPaletteProps, BbColorPaletteEvents, BbColorPaletteSlots } from './types';
+export type { BbColorPaletteProps, BbColorPaletteEvents, BbColorPaletteSlots };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<BbColorPaletteSlots> & BbColorPaletteSlots;

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

@@ -0,0 +1,127 @@
+import { CommonProps } from '../../types/CommonProps';
+export type BbColorPaletteProps = Pick<CommonProps, 'arrowPadding' | 'eager' | 'offset' | 'padding' | 'placement' | 'transitionDuration'> & {
+    /**
+     * v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when
+     * `alpha` is enabled), or `null` when empty.
+     */
+    modelValue: string | null;
+    /**
+     * Enable the alpha channel. The picker shows an opacity slider and emits
+     * `#RRGGBBAA` hex8 values.
+     *
+     * @defaultValue `false`
+     */
+    alpha?: boolean;
+    /**
+     * Controls swatches display in the picker:
+     * - `true`       — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
+    /**
+     * External activator element or component ref.
+     * When provided, the `activator` slot is not rendered and click listeners are
+     * attached programmatically to the referenced element — mirroring the
+     * BbDropdown activator API.
+     */
+    activator?: HTMLElement | Record<string, any> | null;
+    /**
+     * Element or component ref the popover positions itself relative to.
+     * Defaults to the activator element when omitted, allowing the popover to
+     * be anchored to a larger container (e.g. the full input row) while a
+     * smaller element (e.g. a color dot) remains the click target.
+     */
+    anchor?: HTMLElement | Record<string, any> | null;
+    /**
+     * Constrains the popover within a bounding element.
+     * Accepts an HTMLElement, a Vue component ref, or a CSS selector string.
+     */
+    boundary?: HTMLElement | Record<string, any> | string | null;
+    /**
+     * Whether to flip the popover to the opposite side when there is not enough space.
+     *
+     * @defaultValue `true`
+     */
+    flip?: boolean;
+    /**
+     * Show the popover arrow. Hidden by default since the palette has its own visual frame.
+     *
+     * @defaultValue `false`
+     */
+    showArrow?: boolean;
+    /**
+     * Disable all interaction (activator and palette).
+     */
+    disabled?: boolean;
+    /**
+     * Prevent opening the palette while keeping the activator visible.
+     */
+    readonly?: boolean;
+    /**
+     * Accessible label applied to the activator element via `aria-label`.
+     * Defaults to the locale string for "Open color picker" when omitted.
+     */
+    label?: string;
+    /**
+     * Show an eyedropper button inside the palette to sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     *
+     * @defaultValue `false`
+     */
+    picker?: boolean;
+};
+export type BbColorPaletteEvents = {
+    /** Emitted when the color value changes. Payload is `#RRGGBB` or `#RRGGBBAA` (when alpha is enabled), or `null` when cleared. */
+    (e: 'update:modelValue', value: string | null): void;
+    /** Emitted whenever the popover opens or closes. */
+    (e: 'update:open', value: boolean): void;
+};
+/** Props spread onto the activator element to wire up the dropdown reference. */
+export type BbColorPaletteActivatorProps = {
+    /** Ref callback to register the activator element. */
+    ref: (el: unknown) => void;
+};
+/** Props spread onto an optional anchor element when it differs from the activator. */
+export type BbColorPaletteAnchorProps = {
+    /** Ref callback to register the anchor element. */
+    ref: (el: unknown) => void;
+};
+/** Props exposed by the `activator` slot. */
+export type BbColorPaletteActivatorSlotProps = {
+    /**
+     * Spread onto your activator element to register the ref.
+     * ARIA attributes (`aria-haspopup`, `aria-expanded`, `aria-label`) are set
+     * programmatically so they stay correct for both the slot and external activator paths.
+     */
+    props: BbColorPaletteActivatorProps;
+    /**
+     * Spread onto a wrapping element when you want the popover to anchor to
+     * something larger than the click target (e.g. the full input row).
+     * When unused the activator element is also the anchor.
+     */
+    anchorProps: BbColorPaletteAnchorProps;
+    /** Whether the palette popover is currently open. */
+    open: boolean;
+    /** The current color value (mirrors `modelValue`). */
+    color: string | null;
+    /** Whether the palette is disabled. */
+    disabled?: boolean;
+};
+export type BbColorPaletteSlots = {
+    /**
+     * Custom activator element.
+     * Apply `v-bind="props"` to the element you want to use as the trigger —
+     * this wires up the ref callback that lets BbColorPalette track the element.
+     *
+     * @example
+     * ```vue
+     * <BbColorPalette v-model="color">
+     *   <template #activator="{ props: dotProps, open, color }">
+     *     <button v-bind="dotProps" :style="{ background: color }">Pick</button>
+     *   </template>
+     * </BbColorPalette>
+     * ```
+     */
+    activator?: (props: BbColorPaletteActivatorSlotProps) => any;
+};