@octans/ui 1.0.0

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

@@ -0,0 +1,40 @@
+import { InjectionKey } from 'vue';
+import { AppFrameLayoutType, AppFrameSidebarCollapseType } from './types';
+/**
+ * What `AppFrame` tells the chrome mounted inside it. `GlobalNav` reads the
+ * layout so it no longer needs its own copy of the prop, and `Navigation`
+ * drives the sidebar collapse through it — one prop on one component instead
+ * of the same value wired to three.
+ */
+export interface AppFrameLayoutContextType {
+    /** The resolved layout preset. */
+    readonly layout: AppFrameLayoutType;
+    /** Whether the sidebar is collapsed (to its icon rail, or hidden entirely —
+     * see `sidebarCollapse`). */
+    readonly sidebarMin: boolean;
+    /** Collapse or expand the sidebar. `Navigation`'s minimize chevron calls
+     * this, so the frame's column animates with it. */
+    setSidebarMin(value: boolean): void;
+    /** What collapsing means: `rail` narrows to icons, `hide` removes the
+     * sidebar and moves the toggle into the `GlobalNav`. */
+    readonly sidebarCollapse: AppFrameSidebarCollapseType;
+    /** While the sidebar is hidden, hovering the GlobalNav toggle "peeks" it as
+     * an overlay. Read by the frame; set by the toggle's hover. */
+    readonly peek: boolean;
+    setPeek(value: boolean): void;
+    /** True below the responsive breakpoint, where the sidebar is a drawer. */
+    readonly narrow: boolean;
+    /** Whether the drawer is open. Only meaningful while `narrow`. */
+    readonly drawerOpen: boolean;
+    /** Open/close the sidebar drawer; no argument toggles. `GlobalNav`'s
+     * hamburger calls this. */
+    toggleDrawer(open?: boolean): void;
+    /** Whether the frame has sidebar content at all. */
+    readonly hasSidebar: boolean;
+}
+export declare const appFrameLayoutKey: InjectionKey<AppFrameLayoutContextType>;
+/**
+ * The `AppFrame` layout context, or `null` outside one. Chrome components use
+ * this to coordinate with the frame while still working standalone.
+ */
+export declare function useAppFrameLayout(): AppFrameLayoutContextType | null;

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

@@ -0,0 +1,3 @@
+export { default as AppFrame } from './AppFrame.vue';
+export { appFrameLayoutKey, useAppFrameLayout, type AppFrameLayoutContextType } from './context';
+export * from './types';

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

@@ -0,0 +1,52 @@
+import { GlobalNavLayoutModeType } from '../GlobalNav/types';
+/**
+ * How the frame arranges its chrome.
+ *
+ * - `topbar` — the bar runs the full width; the sidebar sits under it on the
+ *   left. The default.
+ * - `sidebar` — the sidebar owns the full height of the window; the bar
+ *   starts to its right.
+ * - `sidebarOnly` — `sidebar`, minus the bar. The save bar and loading bar
+ *   move to the top of the content area, since there is no bar to host them.
+ */
+export type AppFrameLayoutType = 'topbar' | 'sidebar' | 'sidebarOnly';
+/**
+ * What collapsing the sidebar means.
+ *
+ * - `rail` — it narrows to an icon rail; `Navigation`'s own chevron drives it.
+ * - `hide` — it disappears entirely and the toggle moves into the
+ *   `GlobalNav`. Hovering that toggle while hidden peeks the sidebar as an
+ *   overlay.
+ */
+export type AppFrameSidebarCollapseType = 'rail' | 'hide';
+export interface AppFrameProps {
+    /**
+     * Shows a loader over the content area.
+     */
+    loading?: boolean;
+    /**
+     * The layout preset — see `AppFrameLayoutType`. Components inside the frame
+     * (`GlobalNav`, `Navigation`) read it from context, so it is set here and
+     * nowhere else.
+     *
+     * @default 'topbar'
+     */
+    layout?: AppFrameLayoutType;
+    /**
+     * @deprecated Use `layout` — `'default'` is `'topbar'`, `'alternate'` is
+     * `'sidebar'`. Ignored when `layout` is set.
+     */
+    layoutMode?: GlobalNavLayoutModeType;
+    /**
+     * Collapses the sidebar. Also driven from inside by `Navigation`'s
+     * minimize chevron (`allowMinimize`), or — with `sidebarCollapse: 'hide'` —
+     * by the toggle in the `GlobalNav`.
+     */
+    sidebarMin?: boolean;
+    /**
+     * What collapsing means — see `AppFrameSidebarCollapseType`.
+     *
+     * @default 'rail'
+     */
+    sidebarCollapse?: AppFrameSidebarCollapseType;
+}

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

@@ -0,0 +1,125 @@
+import { PopperPlacementType } from '../Popper';
+import { PropType } from 'vue';
+import { BadgeProgressType, BadgeSizeType, BadgeStatusType } from '../types';
+/**
+ * Badges are used to inform users of the status of an object or an action
+ * that's been taken.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * - `info`
+     * - `success`
+     * - `warning` — amber; something needs a look
+     * - `error` — red; something is wrong
+     * - `new`
+     *
+     * `attention` is accepted as an alias of `warning` for compatibility.
+     */
+    status: {
+        type: PropType<BadgeStatusType>;
+    };
+    /**
+     * - `incomplete`
+     * - `partiallyComplete`
+     * - `complete`
+     */
+    progress: {
+        type: PropType<BadgeProgressType>;
+    };
+    /**
+     * - `small`
+     * - `medium`
+     */
+    size: {
+        type: PropType<BadgeSizeType>;
+        default: string;
+    };
+    /**
+     * An optional leading icon — an Iconify name (`mdi:plus`).
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: StringConstructor;
+    };
+    /**
+     * An optional tooltip to display when the user hovers over the badge.
+     */
+    tooltip: {
+        type: StringConstructor;
+    };
+    /**
+     * Placement of the tooltip if rendered
+     */
+    tooltipPosition: {
+        type: PropType<PopperPlacementType>;
+    };
+    /**
+     * An optional radius value for the badge edges
+     */
+    radius: {
+        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<{
+    /**
+     * - `info`
+     * - `success`
+     * - `warning` — amber; something needs a look
+     * - `error` — red; something is wrong
+     * - `new`
+     *
+     * `attention` is accepted as an alias of `warning` for compatibility.
+     */
+    status: {
+        type: PropType<BadgeStatusType>;
+    };
+    /**
+     * - `incomplete`
+     * - `partiallyComplete`
+     * - `complete`
+     */
+    progress: {
+        type: PropType<BadgeProgressType>;
+    };
+    /**
+     * - `small`
+     * - `medium`
+     */
+    size: {
+        type: PropType<BadgeSizeType>;
+        default: string;
+    };
+    /**
+     * An optional leading icon — an Iconify name (`mdi:plus`).
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: StringConstructor;
+    };
+    /**
+     * An optional tooltip to display when the user hovers over the badge.
+     */
+    tooltip: {
+        type: StringConstructor;
+    };
+    /**
+     * Placement of the tooltip if rendered
+     */
+    tooltipPosition: {
+        type: PropType<PopperPlacementType>;
+    };
+    /**
+     * An optional radius value for the badge edges
+     */
+    radius: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: BadgeSizeType;
+    radius: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,239 @@
+/**
+ * Informs users about important changes or persistent conditions. Use this
+ * component if you need to communicate to users in a prominent way. Banners are
+ * placed at the top of the page or section they apply to, and below the page or
+ * section header.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Title of the banner.
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * Status which determines the color scheme:
+     *
+     *   - `default`
+     *   - `info`
+     *   - `success`
+     *   - `warning` — amber; something needs a look
+     *   - `error` — red; something is wrong
+     *   - `new`
+     *
+     * `attention` is accepted as an alias of `warning` for compatibility.
+     */
+    status: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Icon name. Set to `false` to omit the icon entirely.
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: string;
+    };
+}>, {}, {}, {}, {
+    close(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Title of the banner.
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * Status which determines the color scheme:
+     *
+     *   - `default`
+     *   - `info`
+     *   - `success`
+     *   - `warning` — amber; something needs a look
+     *   - `error` — red; something is wrong
+     *   - `new`
+     *
+     * `attention` is accepted as an alias of `warning` for compatibility.
+     */
+    status: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Icon name. Set to `false` to omit the icon entirely.
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    icon: string | boolean;
+    status: string;
+}, {}, {
+    Icon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        contained: {
+            type: BooleanConstructor;
+        };
+        badge: {
+            type: import('vue').PropType<import('../types').IconBadgeStatusType>;
+        };
+        badgeIcon: {
+            type: StringConstructor;
+        };
+        badgeColor: {
+            type: StringConstructor;
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+        };
+        contained: {
+            type: BooleanConstructor;
+        };
+        badge: {
+            type: import('vue').PropType<import('../types').IconBadgeStatusType>;
+        };
+        badgeIcon: {
+            type: StringConstructor;
+        };
+        badgeColor: {
+            type: StringConstructor;
+        };
+    }>> & Readonly<{}>, {
+        contained: boolean;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    Button: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        type: {
+            type: import('vue').PropType<import('../types').ActionTypeType>;
+            default: string;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: import('vue').PropType<string | number | import('../types').IconBadgeType>;
+        };
+        badgeStatus: {
+            type: import('vue').PropType<import('../types').IconBadgeStatusType>;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        tooltip: {
+            type: StringConstructor;
+        };
+        tooltipPosition: {
+            type: import('vue').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: import('vue').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: import('vue').PropType<import('../types').ActionTypeType>;
+            default: string;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: import('vue').PropType<string | number | import('../types').IconBadgeType>;
+        };
+        badgeStatus: {
+            type: import('vue').PropType<import('../types').IconBadgeStatusType>;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        tooltip: {
+            type: StringConstructor;
+        };
+        tooltipPosition: {
+            type: import('vue').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: import('vue').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>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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