@octans/ui 1.0.0

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

@@ -0,0 +1,284 @@
+import { PropType, VNode } from 'vue';
+import { ActionColorType, ActionTooltipPositionType, ActionTypeType, IconBadgeStatusType, IconBadgeType } from '../types';
+/**
+ * Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or
+ * “Save”. Plain buttons, which look similar to links, are used for less
+ * important or less commonly used actions, such as “view more details”.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * The type of button:
+     *
+     *   - default
+     *   - primary - Extra visual weight and identifies the button as the
+     *     primary action.
+     *   - secondary - The tonal button: a tinted, borderless fill. Use where a
+     *     button should read as a real action but not compete with the
+     *     primary one.
+     *   - destructive - Indicates a dangerous or potentially negative action.
+     *   - outline - Gives the button a subtle alternative to the default button
+     *     styling, appropriate for certain backdrops.
+     *   - plain - A text button: normal button box, no fill or outline.
+     *   - link - Hugs its content like an inline link — no button box at all —
+     *     while still supporting icons, badges and the dropdown caret.
+     */
+    type: {
+        type: PropType<ActionTypeType>;
+        default: string;
+    };
+    /**
+     * An Iconify name (`mdi:plus`).
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: StringConstructor;
+    };
+    /**
+     * A badge to overlay on the button. Either:
+     *
+     *   - a status — `badge="warning"` — drawn as a small glyph on the icon
+     *   - some text — `badge="3"` — drawn as a pill on the top-right corner,
+     *     coloured by `badgeStatus`
+     *   - an object — `:badge="{ text: '3', status: 'error' }"` — for full
+     *     control, including a custom `icon` or `color`
+     */
+    badge: {
+        type: PropType<string | number | IconBadgeType>;
+    };
+    /**
+     * Colours a text badge. Ignored when `badge` is given as an object.
+     */
+    badgeStatus: {
+        type: PropType<IconBadgeStatusType>;
+    };
+    /**
+     * Disables the button, preventing all interaction.
+     */
+    disabled: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Tooltip to show when hovering the button.
+     */
+    tooltip: {
+        type: StringConstructor;
+    };
+    /**
+     * Tooltip position, "top", "bottom", "right" or "left".
+     */
+    tooltipPosition: {
+        type: PropType<ActionTooltipPositionType>;
+        default: string;
+    };
+    /**
+     * Shortcut to append a dropdown icon to the button.
+     */
+    dropdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Allows the button to grow to the width of its container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Changes the size of the button, giving it more or less paadding.
+     *
+     * Sizes:
+     *
+     *   - small
+     *   - medium
+     *   - large
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If provided the button will be rendered as a link and this value will be
+     * used as the href attribute.
+     */
+    url: {
+        type: StringConstructor;
+    };
+    /**
+     * When used with `url` it forces the link to open in a new tab.
+     */
+    external: {
+        type: BooleanConstructor;
+    };
+    /**
+     * This makes the button such that the color is applied to the text and outline instead of the body of the button.
+     */
+    invert: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The colour role the button draws from, keeping its type's structure:
+     * `type="primary" color="secondary"` is a solid secondary fill,
+     * `type="secondary" color="tertiary"` a tonal tertiary,
+     * `type="outline" color="tertiary"` a tertiary-inked outline, and so on.
+     * TYPE sets the weight, COLOR sets the hue — the two never fight.
+     */
+    color: {
+        type: PropType<ActionColorType>;
+    };
+    /**
+     * Shorthand for `color="error"` — a dangerous or destructive action in
+     * whatever weight the type gives it. `type="destructive"` likewise remains
+     * the shorthand for the solid error fill.
+     */
+    destructive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * The type of button:
+     *
+     *   - default
+     *   - primary - Extra visual weight and identifies the button as the
+     *     primary action.
+     *   - secondary - The tonal button: a tinted, borderless fill. Use where a
+     *     button should read as a real action but not compete with the
+     *     primary one.
+     *   - destructive - Indicates a dangerous or potentially negative action.
+     *   - outline - Gives the button a subtle alternative to the default button
+     *     styling, appropriate for certain backdrops.
+     *   - plain - A text button: normal button box, no fill or outline.
+     *   - link - Hugs its content like an inline link — no button box at all —
+     *     while still supporting icons, badges and the dropdown caret.
+     */
+    type: {
+        type: PropType<ActionTypeType>;
+        default: string;
+    };
+    /**
+     * An Iconify name (`mdi:plus`).
+     * @see [Icon](/#/Components/Icon) for more details.
+     */
+    icon: {
+        type: StringConstructor;
+    };
+    /**
+     * A badge to overlay on the button. Either:
+     *
+     *   - a status — `badge="warning"` — drawn as a small glyph on the icon
+     *   - some text — `badge="3"` — drawn as a pill on the top-right corner,
+     *     coloured by `badgeStatus`
+     *   - an object — `:badge="{ text: '3', status: 'error' }"` — for full
+     *     control, including a custom `icon` or `color`
+     */
+    badge: {
+        type: PropType<string | number | IconBadgeType>;
+    };
+    /**
+     * Colours a text badge. Ignored when `badge` is given as an object.
+     */
+    badgeStatus: {
+        type: PropType<IconBadgeStatusType>;
+    };
+    /**
+     * Disables the button, preventing all interaction.
+     */
+    disabled: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Tooltip to show when hovering the button.
+     */
+    tooltip: {
+        type: StringConstructor;
+    };
+    /**
+     * Tooltip position, "top", "bottom", "right" or "left".
+     */
+    tooltipPosition: {
+        type: PropType<ActionTooltipPositionType>;
+        default: string;
+    };
+    /**
+     * Shortcut to append a dropdown icon to the button.
+     */
+    dropdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Allows the button to grow to the width of its container.
+     */
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Changes the size of the button, giving it more or less paadding.
+     *
+     * Sizes:
+     *
+     *   - small
+     *   - medium
+     *   - large
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If provided the button will be rendered as a link and this value will be
+     * used as the href attribute.
+     */
+    url: {
+        type: StringConstructor;
+    };
+    /**
+     * When used with `url` it forces the link to open in a new tab.
+     */
+    external: {
+        type: BooleanConstructor;
+    };
+    /**
+     * This makes the button such that the color is applied to the text and outline instead of the body of the button.
+     */
+    invert: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The colour role the button draws from, keeping its type's structure:
+     * `type="primary" color="secondary"` is a solid secondary fill,
+     * `type="secondary" color="tertiary"` a tonal tertiary,
+     * `type="outline" color="tertiary"` a tertiary-inked outline, and so on.
+     * TYPE sets the weight, COLOR sets the hue — the two never fight.
+     */
+    color: {
+        type: PropType<ActionColorType>;
+    };
+    /**
+     * Shorthand for `color="error"` — a dangerous or destructive action in
+     * whatever weight the type gives it. `type="destructive"` likewise remains
+     * the shorthand for the solid error fill.
+     */
+    destructive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    size: string;
+    type: ActionTypeType;
+    destructive: boolean;
+    tooltipPosition: ActionTooltipPositionType;
+    external: boolean;
+    dropdown: boolean;
+    fullWidth: boolean;
+    invert: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/Button/ButtonGroup.vue.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Button group displays multiple related actions stacked or in a horizontal row
+ * to help with arrangement and spacing.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Join buttons as segmented group.
+     */
+    segmented: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the background area of the button group to visually connect the
+     * gaps between buttons. To be used in conjunction with the `segmented`
+     * option.
+     */
+    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<{
+    /**
+     * Join buttons as segmented group.
+     */
+    segmented: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the background area of the button group to visually connect the
+     * gaps between buttons. To be used in conjunction with the `segmented`
+     * option.
+     */
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fill: boolean;
+    segmented: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/Button/ButtonGroupItem.vue.d.ts

@@ -0,0 +1,5 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroupItem } from './ButtonGroupItem.vue';

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

@@ -0,0 +1,15 @@
+import { CalendarProps } from './types';
+declare const __VLS_export: import('vue').DefineComponent<CalendarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    close: () => any;
+    "update:modelValue": (v: string) => any;
+}, string, import('vue').PublicProps, Readonly<CalendarProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {
+    type: "datetime" | "date" | "month" | "year";
+    modelFormat: string;
+    minTime: string;
+    maxTime: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,39 @@
+import { Dayjs } from 'dayjs';
+export interface CalendarCellType {
+    value: string;
+    label?: string;
+    isSelected?: boolean;
+    isCurrent?: boolean;
+    isOtherPeriod?: boolean;
+    isDisabled?: boolean;
+}
+export interface CalendarProps {
+    /**
+     * The type of picker:
+     */
+    type?: 'datetime' | 'date' | 'month' | 'year';
+    /**
+     * The model date value formatted according to `modelFormat`. Parts of the
+     * date may be truncated depending on the `type` being used.
+     */
+    modelValue?: string;
+    /**
+     * Format of the underling value.
+     *
+     * @see https://day.js.org/docs/en/display/format
+     */
+    modelFormat?: string;
+    /**
+     * Provide a filter function to disable specific dates. The function is
+     * passed a Dayjs instance.
+     */
+    disableDate?: (d: Dayjs) => boolean;
+    /**
+     * Restricts the minimum time that can be selected.
+     */
+    minTime?: string;
+    /**
+     * Restricts the maximum time that can be selected.
+     */
+    maxTime?: string;
+}

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

@@ -0,0 +1,21 @@
+import { CalendarHeatmapProps, CalendarHeatmapSeries } from './types';
+declare const __VLS_export: import('vue').DefineComponent<CalendarHeatmapProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CalendarHeatmapProps> & Readonly<{}>, {
+    data: import('./types').CalendarHeatmapDataPoint[];
+    tooltip: boolean;
+    series: CalendarHeatmapSeries[];
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    emptyColor: string;
+    cellSize: number;
+    cellGap: number;
+    contiguousHover: boolean;
+    cellRadius: number;
+    dividerColor: string;
+    showMonths: boolean;
+    monthLabels: "all" | "range";
+    monthSeparators: boolean;
+    monthSeparatorColor: string;
+    showWeekdays: boolean;
+    showLegend: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as CalendarHeatmap } from './CalendarHeatmap.vue';
+export { type CalendarHeatmapProps, type CalendarHeatmapSeries, type CalendarHeatmapDataPoint } from './types';

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

@@ -0,0 +1,168 @@
+/**
+ * A single colour ramp / metric shown on the heat map. Up to four series can
+ * share one calendar, with each cell divided by series count: 2 → diagonal
+ * split, 3 → vertical stripes, 4 → 2×2 quadrants.
+ */
+export interface CalendarHeatmapSeries {
+    /**
+     * Key used to look up this series' value in each data point's `values`.
+     */
+    key: string;
+    /**
+     * Human-readable name shown in the legend and tooltip.
+     */
+    label?: string;
+    /**
+     * The colour ramp from lowest to highest intensity, e.g.
+     * `['#c6e48b', '#7bc96f', '#239a3b', '#196127']`.
+     */
+    colors: string[];
+    /**
+     * Bucket boundaries used to map a value to a colour. Should be one shorter
+     * than `colors` — a value `<= thresholds[i]` uses `colors[i]`, anything above
+     * the last threshold uses the last colour. When omitted, thresholds are
+     * derived evenly from the maximum value in the data.
+     */
+    thresholds?: number[];
+}
+/**
+ * One day of data.
+ */
+export interface CalendarHeatmapDataPoint {
+    /**
+     * The day this point represents, as `YYYY-MM-DD`.
+     */
+    date: string;
+    /**
+     * Value per series, keyed by `CalendarHeatmapSeries.key`. Missing or `<= 0` values
+     * render as empty.
+     */
+    values?: Record<string, number>;
+    /**
+     * Convenience shorthand for single-series heat maps — used as the value for
+     * the first series when `values` is not provided.
+     */
+    value?: number;
+}
+export interface CalendarHeatmapProps {
+    /**
+     * Label to display above the heat map.
+     */
+    label?: string | false;
+    /**
+     * Error text to show below the control.
+     */
+    error?: string | false | null;
+    /**
+     * Help text to show below the control.
+     */
+    helpText?: string | false;
+    /**
+     * Renders help text as raw HTML. Use with caution.
+     */
+    helpTextHtml?: string | false;
+    /**
+     * Renders a help icon next to the label which links to an external page.
+     */
+    helpLink?: string | false;
+    /**
+     * The data to plot, one entry per day.
+     *
+     * Defaults to empty, which draws the calendar grid in `emptyColor` — the
+     * right thing to show while a fetch is in flight, and better than an error.
+     */
+    data?: CalendarHeatmapDataPoint[];
+    /**
+     * One to four colour ramps / metrics to display. Each cell is divided by the
+     * number of series: 2 → diagonal split, 3 → vertical stripes, 4 → 2×2
+     * quadrants. Beyond four, the first four are used.
+     *
+     * Defaults to empty, which draws an empty grid.
+     */
+    series?: CalendarHeatmapSeries[];
+    /**
+     * First day to show, as `YYYY-MM-DD`. Defaults to one year before `endDate`.
+     */
+    startDate?: string;
+    /**
+     * Last day to show, as `YYYY-MM-DD`. Defaults to the latest date in `data`,
+     * or today.
+     */
+    endDate?: string;
+    /**
+     * Day the week starts on — `0` Sunday (default) through `6` Saturday.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Colour used for days with no value.
+     */
+    emptyColor?: string;
+    /**
+     * Width / height of each cell in px.
+     */
+    cellSize?: number;
+    /**
+     * Gap between cells in px. Set to `0` for a solid grid with no gaps at all.
+     */
+    cellGap?: number;
+    /**
+     * Whether each cell's hover / tooltip target extends halfway into the
+     * surrounding gap, so the targets tile with no dead space between them.
+     * Defaults to `true`.
+     *
+     * The cells still *look* the same — only the hit area grows. Without this,
+     * dragging the pointer across the calendar makes the tooltip flicker off
+     * every time it crosses a gap, which is the more annoying default.
+     *
+     * Has no effect when `cellGap` is `0`.
+     */
+    contiguousHover?: boolean;
+    /**
+     * Corner radius of each cell in px.
+     */
+    cellRadius?: number;
+    /**
+     * Colour of the thin divider line between the two triangles when two series
+     * are shown.
+     */
+    dividerColor?: string;
+    /**
+     * Show the month labels along the top.
+     */
+    showMonths?: boolean;
+    /**
+     * How the top labels are displayed when `showMonths` is on.
+     *
+     * - `"all"` — a label above each month (default)
+     * - `"range"` — only the start and end month / year, at each end
+     */
+    monthLabels?: 'all' | 'range';
+    /**
+     * Draw a thin vertical separator line between months.
+     */
+    monthSeparators?: boolean;
+    /**
+     * Colour of the month separator lines.
+     */
+    monthSeparatorColor?: string;
+    /**
+     * Show the weekday labels down the left.
+     */
+    showWeekdays?: boolean;
+    /**
+     * Show the legend(s) below the grid.
+     */
+    showLegend?: boolean;
+    /**
+     * Show a tooltip on each cell (via the global `data-ui-tooltip` style).
+     */
+    tooltip?: boolean;
+    /**
+     * Build the tooltip text for a day. Receives the date and the resolved values
+     * for every series.
+     */
+    tooltipFormatter?: (args: {
+        date: string;
+        values: Record<string, number>;
+    }) => string;
+}

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

@@ -0,0 +1,5 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

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

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

@@ -0,0 +1,82 @@
+import { PropType } from 'vue';
+import { ActionType } from '../types';
+/**
+ * Cards are used to group similar concepts and tasks together to make screens
+ * easier for users to scan, read, and get things done.
+ *
+ * @requires ./CardSection.vue
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * The title heading of the card.
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * An array of action objects:
+     *
+     * ```ts
+     * interface Action {
+     *   label: string
+     *   icon: string
+     *   disabled: boolean
+     *   url: string
+     *   external: boolean
+     *   onAction(): void
+     * }
+     * ```
+     */
+    actions: {
+        type: PropType<ActionType[]>;
+    };
+    collapseActions: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the card with a subtle background color.
+     */
+    subdued: {
+        type: BooleanConstructor;
+    };
+}>, () => 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<{
+    /**
+     * The title heading of the card.
+     */
+    title: {
+        type: StringConstructor;
+    };
+    /**
+     * An array of action objects:
+     *
+     * ```ts
+     * interface Action {
+     *   label: string
+     *   icon: string
+     *   disabled: boolean
+     *   url: string
+     *   external: boolean
+     *   onAction(): void
+     * }
+     * ```
+     */
+    actions: {
+        type: PropType<ActionType[]>;
+    };
+    collapseActions: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the card with a subtle background color.
+     */
+    subdued: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    subdued: boolean;
+    collapseActions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;