@octans/ui 1.0.0

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

@@ -0,0 +1,62 @@
+import { ColorFormat } from '../../utils/color';
+/**
+ * How a swatch is drawn — the rounded square that matches the rest of the
+ * library's controls, or a dot.
+ *
+ * A circle is not only decoration: a round swatch is unmistakably "a colour"
+ * rather than "a small button", which matters most where the swatch is the
+ * whole control and has no border or label around it.
+ */
+export type ColorSwatchShape = 'square' | 'circle';
+export interface ColorPickerProps {
+    /**
+     * The current colour, in any form `parseColor` understands — `#rgb`,
+     * `#rrggbbaa`, `rgb()`, `hsl()`, `oklab()`, `oklch()` or `transparent`.
+     *
+     * A value that cannot be parsed is left in the text field untouched rather
+     * than being replaced, so a half-typed colour is not destroyed as you type.
+     */
+    modelValue?: string | null;
+    /**
+     * Offer an alpha slider, and allow emitting colours with transparency.
+     *
+     * Off by default: most colours in a design system are opaque, and a stray
+     * `#ffffff00` is an unpleasant surprise for whatever consumes the value.
+     */
+    alpha?: boolean;
+    /**
+     * Pin the output to one format. When omitted the picker emits in whichever
+     * format the incoming value was written in, falling back to hex — so it does
+     * not quietly rewrite an `oklch()` theme into hex.
+     */
+    format?: ColorFormat;
+    /**
+     * Which formats the switcher offers. Ignored when `format` pins the output.
+     */
+    formats?: ColorFormat[];
+    /**
+     * Preset colours shown as a row of swatches under the controls.
+     */
+    swatches?: string[];
+    /**
+     * Shape of those swatches.
+     *
+     * @default 'square'
+     */
+    swatchShape?: ColorSwatchShape;
+    /**
+     * Offer the screen eyedropper. Hidden anyway in browsers without the
+     * `EyeDropper` API, which at the time of writing means Firefox and Safari.
+     */
+    eyedropper?: boolean;
+    /**
+     * Offer a button that opens the operating system's own colour dialog, for
+     * users who want their platform picker and its recent colours.
+     */
+    systemPicker?: boolean;
+    /**
+     * Hide the text field and format switcher, leaving only the visual controls.
+     */
+    hideInput?: boolean;
+    disabled?: boolean;
+}

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

@@ -0,0 +1,34 @@
+import { Gradient } from '../../utils/gradient';
+import { ColorSelectorProps } from './types';
+declare const __VLS_export: import('vue').DefineComponent<ColorSelectorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | Gradient) => any;
+    "update:swatches": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<ColorSelectorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Gradient) => any) | undefined;
+    "onUpdate:swatches"?: ((value: string[]) => any) | undefined;
+}>, {
+    placement: import('../Popper').PopperPlacementType;
+    disabled: boolean;
+    trigger: import('./types').ColorSelectorTriggerType;
+    mode: import('./types').ColorSelectorMode;
+    fullWidth: boolean;
+    placeholder: string;
+    readonly: boolean;
+    alpha: boolean;
+    swatchShape: import('../ColorPicker').ColorSwatchShape;
+    eyedropper: boolean;
+    systemPicker: boolean;
+    hideShape: boolean;
+    hideSpace: boolean;
+    minStops: number;
+    maxStops: number;
+    pinStart: boolean;
+    pinEnd: boolean;
+    swatchSize: number | string;
+    showValue: boolean;
+    clearable: boolean;
+    rememberSwatches: boolean;
+    maxSwatches: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as ColorSelector } from './ColorSelector.vue';
+export { type ColorSelectorProps, type ColorSelectorMode, type ColorSelectorTriggerType } from './types';

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

@@ -0,0 +1,143 @@
+import { ColorPickerProps } from '../ColorPicker';
+import { PopperPlacementType } from '../Popper';
+import { Gradient, GradientType } from '../../utils/gradient';
+/**
+ * What the field is allowed to hold.
+ *
+ * - `color` — a single colour, emitted as a string.
+ * - `gradient` — a gradient, emitted as a `Gradient` object.
+ * - `both` — either, with a switch in the popover. Read the value's type to
+ *   tell them apart, or use `isGradient()`.
+ */
+export type ColorSelectorMode = 'color' | 'gradient' | 'both';
+/**
+ * What you click to open the picker.
+ *
+ * - `button` — the swatch inside a bordered control, alongside the value.
+ *   A form field, and what it looks like next to a `TextField`.
+ * - `swatch` — the colour and nothing else. No border, no padding, no value
+ *   text. For a toolbar, a table cell, or anywhere a field would be too much
+ *   furniture around one colour.
+ * - `input` — the same bordered control, with the value in a text field you can
+ *   type into. The swatch beside it still opens the picker.
+ */
+export type ColorSelectorTriggerType = 'button' | 'swatch' | 'input';
+/**
+ * The one colour field. `ColorPicker` and `GradientPicker` are the bare
+ * surfaces it wraps — the same relationship `DatePicker` has to `Calendar`.
+ */
+export interface ColorSelectorProps extends Omit<ColorPickerProps, 'modelValue'> {
+    /**
+     * A colour string, or a `Gradient` — see `mode`.
+     */
+    modelValue?: string | Gradient | null;
+    /**
+     * Whether this field holds a colour, a gradient, or either. Defaults to
+     * `color`.
+     */
+    mode?: ColorSelectorMode;
+    /**
+     * Label for the control.
+     */
+    label?: string | false | null;
+    /**
+     * Error text to show below the control.
+     */
+    error?: string | false | null;
+    /**
+     * Help text to show below the control.
+     */
+    helpText?: string | false | null;
+    /**
+     * Renders help text as raw HTML. Use with caution.
+     */
+    helpTextHtml?: string | false | null;
+    /**
+     * Renders a help icon next to the label which links to an external page.
+     */
+    helpLink?: string | false | null;
+    /**
+     * Where the picker opens relative to the trigger.
+     */
+    placement?: PopperPlacementType;
+    /**
+     * What you click to open the picker. `swatch` strips the control back to the
+     * colour itself; `input` lets the value be typed.
+     *
+     * @default 'button'
+     */
+    trigger?: ColorSelectorTriggerType;
+    /**
+     * Stretch the control to the width of its container, so it lines up with the
+     * `TextField`s around it in a form.
+     *
+     * Nothing to stretch under `trigger="swatch"`, which is a swatch and no box.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Size of the trigger swatch — a number of pixels, or any CSS length.
+     *
+     * Worth raising with `trigger="swatch"`: the default 20px is right beside a
+     * value inside a bordered control, and small as a target when the swatch is
+     * the whole control.
+     *
+     * @default 20
+     */
+    swatchSize?: number | string;
+    /**
+     * Show the value on the trigger next to its swatch — the colour itself, or a
+     * summary of the gradient.
+     *
+     * Ignored by `trigger="swatch"`, which is the colour and nothing else.
+     */
+    showValue?: boolean;
+    /**
+     * Text shown on the trigger when there is no value.
+     */
+    placeholder?: string;
+    /**
+     * Offer a button that clears the value back to empty.
+     */
+    clearable?: boolean;
+    /**
+     * Show the value but do not allow it to be changed.
+     */
+    readonly?: boolean;
+    /**
+     * Add each colour you pick to the front of `swatches`, so the palette
+     * remembers what has been used. Pair it with `v-model:swatches` to keep the
+     * list outside the field — shared between several of them, or persisted.
+     *
+     * A colour is remembered when the popover CLOSES, not while you drag: every
+     * position on the saturation square emits as you cross it, and remembering
+     * those would fill the palette with colours nobody chose. Gradients are never
+     * remembered; the palette is a list of colours.
+     *
+     * @default false
+     */
+    rememberSwatches?: boolean;
+    /**
+     * The most swatches to keep. Unset means no limit.
+     *
+     * Set this when `swatches` is a recently-used list, and leave it unset when
+     * it is a palette you curated — the cap drops entries off the END, which is
+     * where a curated palette keeps the colours it was given.
+     */
+    maxSwatches?: number;
+    /** Which gradient shapes to offer. */
+    types?: GradientType[];
+    /** Hide the shape and angle controls. */
+    hideShape?: boolean;
+    /** Hide the interpolation space control. */
+    hideSpace?: boolean;
+    /** Fewest stops the user may leave. Never below 2. */
+    minStops?: number;
+    /** Most stops the user may add. */
+    maxStops?: number;
+    /** Hold the leftmost stop at 0%. See `GradientPickerProps.pinStart`. */
+    pinStart?: boolean;
+    /** Hold the rightmost stop at 100%. */
+    pinEnd?: boolean;
+}

package/dist/components/DataTable/BulkActions.vue.d.ts

@@ -0,0 +1,282 @@
+import { PropType } from 'vue';
+import { ActionType } from '../types';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    actions: {
+        type: PropType<ActionType[]>;
+    };
+    selectedItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+    totalItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, {}, {}, {
+    checked(): boolean;
+    indeterminate(): boolean;
+}, {
+    onChange(event: any): void;
+    toggle(selectAll: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "change"[], "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    actions: {
+        type: PropType<ActionType[]>;
+    };
+    selectedItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+    totalItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {
+    ActionList: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../ActionList').ActionListProps> & Readonly<{
+            onShow?: (() => any) | undefined;
+            onHide?: (() => any) | undefined;
+            onClose?: (() => any) | undefined;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            show: () => any;
+            hide: () => any;
+            close: () => any;
+        }, import('vue').PublicProps, {
+            placement: import('../Popper').PopperPlacementType;
+            items: import('../ActionList').ActionListItemType[];
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../ActionList').ActionListProps> & Readonly<{
+            onShow?: (() => any) | undefined;
+            onHide?: (() => any) | undefined;
+            onClose?: (() => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            placement: import('../Popper').PopperPlacementType;
+            items: import('../ActionList').ActionListItemType[];
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('../ActionList').ActionListProps> & Readonly<{
+        onShow?: (() => any) | undefined;
+        onHide?: (() => any) | undefined;
+        onClose?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        show: () => any;
+        hide: () => any;
+        close: () => any;
+    }, string, {
+        placement: import('../Popper').PopperPlacementType;
+        items: import('../ActionList').ActionListItemType[];
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+    Button: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        type: {
+            type: PropType<import('../types').ActionTypeType>;
+            default: string;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: PropType<string | number | import('../types').IconBadgeType>;
+        };
+        badgeStatus: {
+            type: PropType<import('../types').IconBadgeStatusType>;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        tooltip: {
+            type: StringConstructor;
+        };
+        tooltipPosition: {
+            type: PropType<import('../types').ActionTooltipPositionType>;
+            default: string;
+        };
+        dropdown: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        fullWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        url: {
+            type: StringConstructor;
+        };
+        external: {
+            type: BooleanConstructor;
+        };
+        invert: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: PropType<import('../types').ActionColorType>;
+        };
+        destructive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        type: {
+            type: PropType<import('../types').ActionTypeType>;
+            default: string;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: PropType<string | number | import('../types').IconBadgeType>;
+        };
+        badgeStatus: {
+            type: PropType<import('../types').IconBadgeStatusType>;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        tooltip: {
+            type: StringConstructor;
+        };
+        tooltipPosition: {
+            type: PropType<import('../types').ActionTooltipPositionType>;
+            default: string;
+        };
+        dropdown: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        fullWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        url: {
+            type: StringConstructor;
+        };
+        external: {
+            type: BooleanConstructor;
+        };
+        invert: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        color: {
+            type: PropType<import('../types').ActionColorType>;
+        };
+        destructive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+        size: string;
+        type: import('../types').ActionTypeType;
+        destructive: boolean;
+        tooltipPosition: import('../types').ActionTooltipPositionType;
+        external: boolean;
+        dropdown: boolean;
+        fullWidth: boolean;
+        invert: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    ButtonGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        segmented: {
+            type: BooleanConstructor;
+        };
+        fill: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        segmented: {
+            type: BooleanConstructor;
+        };
+        fill: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        fill: boolean;
+        segmented: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    CheckboxControl: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        error: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        error: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        disabled: boolean;
+        error: boolean;
+        readonly: boolean;
+        checked: boolean;
+        indeterminate: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,40 @@
+import { ActionType } from '../types';
+import { DataTableColumnType, InterPropsType } from './types';
+declare const __VLS_export: <Row extends Record<string, any> = Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<InterPropsType<Row> & {
+        "onClick-row"?: ((...args: any[]) => any) | undefined;
+        "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
+        "onUpdate:selectedIds"?: ((...args: any[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        actions?(props: {
+            row: Row;
+            index: number;
+            actions: ActionType[] | undefined;
+        }): any;
+    } & {
+        [name: `col:${string}`]: ((props: {
+            row: Row;
+            value: any;
+        }) => any) | undefined;
+        [name: `head:${string}`]: ((props: {
+            col: DataTableColumnType;
+            value?: string;
+            className: string;
+        }) => any) | undefined;
+    };
+    emit: (event: "click-row" | "update:sort" | "update:selectedIds", ...args: any[]) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/DataTable/DataTableFooter.vue.d.ts

@@ -0,0 +1,22 @@
+type DataTableFooterProps = {
+    offset: number;
+    limit: number;
+    total: number;
+    summary?: string;
+    maxPages: number;
+    pageSizes?: number[] | false;
+    loading: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<DataTableFooterProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateOffset: (...args: any[]) => void;
+    updateLimit: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<DataTableFooterProps> & Readonly<{
+    onUpdateOffset?: ((...args: any[]) => any) | undefined;
+    onUpdateLimit?: ((...args: any[]) => any) | undefined;
+}>, {
+    summary: string;
+    loading: boolean;
+    maxPages: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as DataTable } from './DataTable.vue';
+export * from './types';