@octans/ui 1.0.0

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

@@ -0,0 +1,3 @@
+export { default as Select } from './Select.vue';
+export { type SelectOptionType } from './Select.vue';
+export { type SelectOptionGroupType } from './Select.vue';

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

@@ -0,0 +1,41 @@
+import { SheetProps } from './types';
+declare var __VLS_7: {}, __VLS_38: {}, __VLS_60: {};
+type __VLS_Slots = {} & {
+    external?: (props: typeof __VLS_7) => any;
+} & {
+    actions?: (props: typeof __VLS_38) => any;
+} & {
+    default?: (props: typeof __VLS_60) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SheetProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (v: boolean) => any;
+    "before-open": () => any;
+    "after-open": () => any;
+    "before-close": () => any;
+    "after-close": () => any;
+}, string, import('vue').PublicProps, Readonly<SheetProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((v: boolean) => any) | undefined;
+    "onBefore-open"?: (() => any) | undefined;
+    "onAfter-open"?: (() => any) | undefined;
+    "onBefore-close"?: (() => any) | undefined;
+    "onAfter-close"?: (() => any) | undefined;
+}>, {
+    visible: boolean;
+    size: number;
+    loading: boolean;
+    peek: number;
+    edge: import('./types').SheetEdgeType;
+    animateInDuration: number;
+    animateOutDuration: number;
+    minIndex: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

package/dist/components/Sheet/manager.d.ts

@@ -0,0 +1,34 @@
+import { Ref } from 'vue';
+/**
+ * TODO: This used to be accomplished by passing around the
+ * actual Vue component instance, but I thought this could make
+ * more sense and maybe be simpler?
+ *
+ * The manager is deliberately axis-agnostic: `peek` and `offset` are distances
+ * along whichever axis the sheet slides on, and each sheet turns its own offset
+ * into a transform. That is what lets a top sheet and a right sheet share one
+ * stack.
+ */
+export declare class SheetInstance {
+    isActive: Ref<boolean>;
+    /** How much of this sheet stays visible when it is covered by another. */
+    peek: number;
+    /** Distance this sheet is pushed toward the centre while in the background. */
+    offset: Ref<number>;
+    index: Ref<number>;
+    constructor(opts: {
+        isActive: Ref<boolean>;
+        peek: number;
+        offset: Ref<number>;
+        index: Ref<number>;
+    });
+}
+export declare function createSheetManager(): {
+    stack: SheetInstance[];
+    add(vm: SheetInstance): void;
+    beforeRemove(vm: SheetInstance): void;
+    remove(vm: SheetInstance): void;
+    getNextZIndex(): number;
+    handleOverflow(): void;
+    setOverflowClass(name: string): void;
+};

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

@@ -0,0 +1,92 @@
+import { ActionType } from '../types';
+export type SheetEdgeType = 'right' | 'left' | 'top' | 'bottom';
+export interface SheetProps {
+    /**
+     * Title shown in the sheet header.
+     */
+    title?: string;
+    /**
+     * Whether the sheet is open. Toggle this to show or hide the sheet.
+     *
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Which edge the sheet slides in from.
+     *
+     * `"left"` and `"right"` size the sheet by width and stretch it full height;
+     * `"top"` and `"bottom"` size it by height and stretch it full width.
+     *
+     * @default 'right'
+     */
+    edge?: SheetEdgeType;
+    /**
+     * Size of the sheet along the axis it slides on, in pixels — its width for a
+     * left or right sheet, its height for a top or bottom one. Clamped to the
+     * screen when the sheet becomes the active (foreground) sheet.
+     *
+     * @default 700
+     */
+    size?: number;
+    /**
+     * How many pixels of a background sheet remain visible (peek out) from
+     * behind the sheets stacked on top of it.
+     *
+     * @default 100
+     */
+    peek?: number;
+    /**
+     * Adds padding around the sheet content and constrains it to a comfortable
+     * reading width.
+     */
+    padded?: boolean;
+    /**
+     * Duration of the open (slide/fade-in) animation in milliseconds.
+     * Set to `0` to open instantly with no animation.
+     *
+     * @default 700
+     */
+    animateInDuration?: number;
+    /**
+     * Duration of the close (slide/fade-out) animation in milliseconds.
+     * Set to `0` to close instantly with no animation.
+     *
+     * @default 700
+     */
+    animateOutDuration?: number;
+    /**
+     * Minimum `z-index` used for the sheet. Stacked sheets increment from here.
+     *
+     * @default 1000
+     */
+    minIndex?: number;
+    /**
+     * Accent color for the sheet, shown as a strip along the top of the header.
+     * Accepts any CSS color value, e.g. `"red"`, `"#2196F3"`, `"rgb(0,0,0)"`.
+     */
+    color?: string;
+    /**
+     * Classes to add to the sheet element.
+     */
+    containerClass?: Record<string, string> | string;
+    /**
+     * Classes to add to the sheet content element.
+     */
+    contentClass?: Record<string, string> | string;
+    /**
+     * Shows a spinner over the whole sheet and prevents closing.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The main sheet action, displayed at the upper right corner
+     * of the sheet
+     */
+    primaryAction?: ActionType;
+    /**
+     * Optional secondary actions. These actions and the action groups are
+     * displayed left of the primary action button
+     */
+    secondaryActions?: ActionType[];
+}

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

@@ -0,0 +1,17 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => 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<{
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    lines: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,34 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    subdued: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Number of sections to show.
+     */
+    sections: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+    subdued: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Number of sections to show.
+     */
+    sections: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    subdued: boolean;
+    sections: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,17 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => 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<{
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,52 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * The color of the spinner:
+     *
+     *   - white
+     *   - blue
+     *   - teal
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The size of the spinner:
+     *
+     *   - small
+     *   - large
+     *   - relative
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * The color of the spinner:
+     *
+     *   - white
+     *   - blue
+     *   - teal
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The size of the spinner:
+     *
+     *   - small
+     *   - large
+     *   - relative
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: string;
+    color: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,60 @@
+import { SplitterProps, SplitterResizeType, SplitterSizeType } from './types';
+declare function measure(): void;
+declare function toggle(): void;
+declare function onDblclick(): void;
+declare var __VLS_1: {
+    collapsed: boolean;
+}, __VLS_3: {
+    collapsed: boolean;
+    dragging: boolean;
+}, __VLS_5: {
+    collapsed: boolean;
+};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    handle?: (props: typeof __VLS_3) => any;
+} & {
+    end?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SplitterProps, {
+    /** Re-reads the geometry. For containers that resize without a resize event. */
+    measure: typeof measure;
+    /** Returns the split to the size it was given on mount. */
+    reset: typeof onDblclick;
+    /** Shuts or reopens the start pane, when `collapsible`. */
+    toggle: typeof toggle;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    resize: (detail: SplitterResizeType) => any;
+    "update:size": (size: SplitterSizeType) => any;
+    "update:collapsed": (collapsed: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<SplitterProps> & Readonly<{
+    onResize?: ((detail: SplitterResizeType) => any) | undefined;
+    "onUpdate:size"?: ((size: SplitterSizeType) => any) | undefined;
+    "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: SplitterSizeType;
+    label: string;
+    min: SplitterSizeType;
+    max: SplitterSizeType;
+    step: number;
+    direction: import('./types').SplitterDirectionType;
+    collapsible: boolean;
+    collapsed: boolean;
+    snap: number;
+    deferred: boolean;
+    storageKey: string;
+    snapTo: number | string;
+    handle: import('./types').SplitterHandleType;
+    hitArea: number | string;
+    resetOnDoubleClick: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as Splitter } from './Splitter.vue';
+export type { SplitterProps, SplitterDirectionType, SplitterHandleType, SplitterSizeType, SplitterResizeType } from './types';

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

@@ -0,0 +1,177 @@
+export type SplitterDirectionType = 'horizontal' | 'vertical';
+/**
+ * What the gutter draws by default.
+ *
+ * - `"line"` — a hairline down the middle of the gutter
+ * - `"grip"` — the hairline plus a centred grab bar, for gutters people are
+ *   meant to notice and reach for
+ * - `"none"` — nothing at all, still draggable; for a gutter you are styling
+ *   from the pane edges instead
+ *
+ * The `handle` slot replaces whichever of these is chosen.
+ */
+export type SplitterHandleType = 'line' | 'grip' | 'none';
+/**
+ * A pane size: a number of pixels, or any CSS length as a string.
+ *
+ * Pixels and percentages survive a drag — hand it `240` and it stays a number
+ * of pixels, hand it `"30%"` and it keeps expressing itself as a percentage of
+ * the container, so the layout stays responsive. Other units (`"20rem"`,
+ * `"calc(…)"`, `"var(…)"`) work as a starting size, but the model emits pixels
+ * once dragged: converting 500px back into rem means assuming a font size that
+ * can change underneath us, and a wrong assumption is worse than a plain
+ * number.
+ *
+ * The `resize` event always carries both units, whatever this is.
+ */
+export type SplitterSizeType = number | string;
+/** What `resize` reports, in both units, every time the split moves. */
+export interface SplitterResizeType {
+    /** The start pane's size along the split axis, in pixels. */
+    px: number;
+    /** The same size as a percentage of the container, `0`–`100`. */
+    percent: number;
+    /** Whether the start pane is currently collapsed. */
+    collapsed: boolean;
+}
+export interface SplitterProps {
+    /**
+     * The size of the START pane — the end pane takes whatever is left, so only
+     * one of the two is ever stated. Two-way bindable with `v-model:size`.
+     *
+     * @default '50%'
+     */
+    size?: SplitterSizeType;
+    /**
+     * Which way the panes sit.
+     *
+     * - `"horizontal"` — side by side, split by a vertical gutter (default)
+     * - `"vertical"` — stacked, split by a horizontal gutter
+     *
+     * For three panes or more, nest a Splitter inside a pane of another. The
+     * inner ratio then stays put when the outer one is dragged, which is what
+     * you want for a sidebar beside a split editor.
+     *
+     * @default 'horizontal'
+     */
+    direction?: SplitterDirectionType;
+    /**
+     * The smallest the start pane may be dragged to, as a number of pixels or a
+     * CSS length. Applied as real CSS, so the browser resolves the unit and the
+     * pane cannot render smaller than this even if the container shrinks.
+     *
+     * Percentages and absolute lengths both work. `calc()` is applied but not
+     * understood by the drag clamp, so avoid it here.
+     *
+     * @default 0
+     */
+    min?: SplitterSizeType;
+    /**
+     * The largest the start pane may be dragged to. Same units as `min`.
+     *
+     * @default the container, less the gutter
+     */
+    max?: SplitterSizeType;
+    /**
+     * Stops the gutter being dragged or focused, and greys it out. The panes
+     * hold their current sizes.
+     */
+    disabled?: boolean;
+    /**
+     * Lets the start pane be shut completely by dragging past its minimum, by
+     * pressing Enter on the gutter, or by binding `collapsed`.
+     *
+     * The gutter stays put and stays grabbable when the pane is shut, so there
+     * is always something to pull it back out with.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the start pane is currently shut. Two-way bindable with
+     * `v-model:collapsed`. Only meaningful alongside `collapsible`.
+     */
+    collapsed?: boolean;
+    /**
+     * How far past its minimum the gutter must be dragged before the pane snaps
+     * shut, in pixels. Also how far it must be dragged back out to reopen.
+     *
+     * The gap exists so a pane with a `min` of 200 does not sit at 200 and then
+     * vanish the moment the pointer crosses 199.
+     *
+     * @default 40
+     */
+    snap?: number;
+    /**
+     * Reflows the panes only when the drag ends. While dragging, a line follows
+     * the pointer to show where the split will land.
+     *
+     * For panes whose content is expensive to lay out — a wide DataTable, a
+     * chart, an embedded map — where reflowing every frame stutters.
+     */
+    deferred?: boolean;
+    /**
+     * Remembers the size and collapsed state under this key in `localStorage`,
+     * and restores them on mount.
+     *
+     * Storage being unavailable (private browsing, a full quota, an embedded
+     * context) is not treated as an error: the splitter works for this session
+     * and forgets afterwards.
+     */
+    storageKey?: string;
+    /**
+     * How far each arrow-key press moves the gutter, in pixels. Holding Shift
+     * moves five times as far.
+     *
+     * Deliberately independent of `snapTo`: the keyboard is the precise
+     * instrument, so a coarse drag grid does not have to make the arrows coarse
+     * too. Set both to the same value where you want them to agree.
+     *
+     * @default 10
+     */
+    step?: number;
+    /**
+     * Quantises DRAGGING to fixed increments — a number of pixels, or a
+     * percentage of the container as a string. The gutter then lands only on
+     * multiples of it.
+     *
+     * Unset, dragging is continuous. It does not affect the keyboard (see
+     * `step`), nor `Home` and `End`, which go to the exact bounds, nor a
+     * double-click reset, which goes to the exact `size` given.
+     *
+     * Not to be confused with `snap`, which is the distance a pane must be
+     * dragged past its minimum before it shuts.
+     */
+    snapTo?: number | string;
+    /**
+     * What the gutter draws when the `handle` slot is not used.
+     *
+     * @default 'line'
+     */
+    handle?: SplitterHandleType;
+    /**
+     * How thick the grabbable band is, as a number of pixels or a CSS length.
+     * The gutter still takes only its own width in the layout — this widens the
+     * hit target over the panes on either side without moving anything.
+     *
+     * Worth raising for touch, where a nine-pixel target is a poor one. The cost
+     * is that the pane content immediately either side of the gutter stops being
+     * clickable, so do not overdo it next to interactive edges.
+     *
+     * @default the gutter's own width, i.e. no overhang
+     */
+    hitArea?: number | string;
+    /**
+     * Whether double-clicking the gutter returns it to the `size` it was given
+     * on mount, reopening the pane if it was shut.
+     *
+     * @default true
+     */
+    resetOnDoubleClick?: boolean;
+    /**
+     * The accessible name of the gutter, which is a focusable control in its own
+     * right. Name it after what it resizes — "Resize the sidebar" — wherever
+     * more than one splitter shares a screen.
+     *
+     * @default 'Resize panes'
+     */
+    label?: string;
+}

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

@@ -0,0 +1,130 @@
+import { PropType } from 'vue';
+type StackAlignmentType = 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
+type StackDistributionType = 'equalSpacing' | 'leading' | 'trailing' | 'center' | 'fill' | 'fillEvenly';
+type StackSpacingType = 'extraTight' | 'tight' | 'loose' | 'extraLoose' | 'none';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Aligns items along the stack's cross axis.
+     *
+     * - leading
+     * - trailing
+     * - center
+     * - fill
+     * - baseline
+     */
+    alignment: {
+        type: PropType<StackAlignmentType>;
+    };
+    /**
+     * Aligns items along the stack's main axis.
+     *
+     * - equalSpacing
+     * - leading
+     * - trailing
+     * - center
+     * - fill
+     * - fillEvenly
+     */
+    distribution: {
+        type: PropType<StackDistributionType>;
+    };
+    /**
+     * The margin to add between items.
+     *
+     * - extraTight
+     * - tight
+     * - loose
+     * - extraLoose
+     * - none
+     */
+    spacing: {
+        type: PropType<StackSpacingType>;
+    };
+    /**
+     * An exact gap between items — a number of pixels or any CSS length —
+     * when none of the `spacing` presets fits. Wins over `spacing`.
+     */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    /**
+     * Flip the main axis so that items are rendered vertically.
+     */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Prevent items from wrapping when there is limited space.
+     */
+    wrap: {
+        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<{
+    /**
+     * Aligns items along the stack's cross axis.
+     *
+     * - leading
+     * - trailing
+     * - center
+     * - fill
+     * - baseline
+     */
+    alignment: {
+        type: PropType<StackAlignmentType>;
+    };
+    /**
+     * Aligns items along the stack's main axis.
+     *
+     * - equalSpacing
+     * - leading
+     * - trailing
+     * - center
+     * - fill
+     * - fillEvenly
+     */
+    distribution: {
+        type: PropType<StackDistributionType>;
+    };
+    /**
+     * The margin to add between items.
+     *
+     * - extraTight
+     * - tight
+     * - loose
+     * - extraLoose
+     * - none
+     */
+    spacing: {
+        type: PropType<StackSpacingType>;
+    };
+    /**
+     * An exact gap between items — a number of pixels or any CSS length —
+     * when none of the `spacing` presets fits. Wins over `spacing`.
+     */
+    gap: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    /**
+     * Flip the main axis so that items are rendered vertically.
+     */
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Prevent items from wrapping when there is limited space.
+     */
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    wrap: boolean;
+    vertical: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;