@octans/ui 1.0.0

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

@@ -0,0 +1,64 @@
+export type ScrollPaneDirectionType = 'vertical' | 'horizontal' | 'both';
+export interface ScrollPaneProps {
+    /**
+     * Which way the content scrolls.
+     *
+     * - `"vertical"` — up and down (default)
+     * - `"horizontal"` — left and right
+     * - `"both"` — either
+     *
+     * The overflow indicators follow: a horizontal pane fades its left and right
+     * edges rather than its top and bottom.
+     */
+    direction?: ScrollPaneDirectionType;
+    /**
+     * Stops the scroll from continuing onto the page once this pane reaches its
+     * end (`overscroll-behavior: contain`). Also suppresses the rubber-band
+     * bounce and pull-to-refresh inside the pane.
+     *
+     * Off by default, because chaining to the page is the browser's own
+     * behaviour and is often what you want for a pane sitting in normal page
+     * flow. Turn it on for panes inside a modal, sheet or dropdown, where
+     * scrolling the page underneath is never intended.
+     */
+    contain?: boolean;
+    /**
+     * Fades the edges where there is more content off screen.
+     *
+     * On by default. Turn it off for panes where the fade fights the design —
+     * over an image, or where a border already says where the content stops.
+     *
+     * A `disabled` pane never shows them regardless: it cannot be scrolled, so
+     * an indicator would be pointing at content the user has no way to reach.
+     *
+     * The fade colour is `--octans-shadow-overflow`, overridable per pane with
+     * `--ScrollPane-indicatorColor`.
+     */
+    indicators?: boolean;
+    /**
+     * Applies CSS padding to the scrollable container.
+     */
+    padding?: string;
+    /**
+     * Set to a reactive value to refresh the overflow indicators whenever it
+     * changes.
+     *
+     * Rarely needed: the pane observes its own size and its content's, so
+     * content that grows or shrinks is picked up automatically. This is for
+     * changes that move the scroll extent without changing either box.
+     */
+    watch?: unknown;
+    /**
+     * Disables scrolling by setting the CSS `overflow` of the content to
+     * `hidden`.
+     */
+    disabled?: boolean;
+    /**
+     * Applies a class name to the scrollable container.
+     */
+    containerClass?: string;
+    /**
+     * Applies styles to the scrollable container.
+     */
+    containerStyle?: Record<string, string>;
+}

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

@@ -0,0 +1,39 @@
+import { SegmentedControlProps, SegmentedOptionType } from './types';
+declare var __VLS_8: {
+    option: SegmentedOptionType;
+    index: number;
+    selected: boolean;
+};
+type __VLS_Slots = {} & {
+    option?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SegmentedControlProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: any, option: SegmentedOptionType) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import('vue').PublicProps, Readonly<SegmentedControlProps> & Readonly<{
+    onChange?: ((value: any, option: SegmentedOptionType) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import('./types').SegmentedControlSizeType;
+    label: string | false | null;
+    name: string;
+    error: string | false | null;
+    tooltipPosition: import('../types').ActionTooltipPositionType;
+    helpText: string | false | null;
+    fullWidth: boolean;
+    helpLink: string;
+    modelValue: any;
+    readonly: boolean;
+    vertical: boolean;
+    ariaLabel: string;
+    options: SegmentedOptionType[];
+}, {}, {}, {}, 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/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from './SegmentedControl.vue';
+export type { SegmentedControlProps, SegmentedControlSizeType, SegmentedOptionType } from './types';

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

@@ -0,0 +1,119 @@
+import { ActionTooltipPositionType } from '../types';
+/**
+ * Visual size of the control, on `Button`'s scale — a segmented control sitting
+ * next to a button in a toolbar should be the same height as it, and the only
+ * way to promise that is to share the numbers.
+ */
+export type SegmentedControlSizeType = 'small' | 'medium' | 'large';
+/**
+ * One segment.
+ *
+ * `label` and `icon` are both optional, but a segment with neither is a blank
+ * box — give it at least one. An icon on its own says nothing to a screen
+ * reader, so pair it with `tooltip`, which is used as the segment's accessible
+ * name when there is no label.
+ */
+export interface SegmentedOptionType {
+    /**
+     * What the control emits when this segment is picked. Compared with the model
+     * by `===`, so objects must be the same reference, not an equal one.
+     */
+    value: any;
+    label?: string;
+    /**
+     * An Iconify name (`mdi:calendar-today`), drawn before the label.
+     */
+    icon?: string;
+    disabled?: boolean;
+    /**
+     * Shown on hover. Also becomes the segment's accessible name when there is no
+     * `label`, which is what makes an icon-only control usable.
+     */
+    tooltip?: string;
+}
+export interface SegmentedControlProps {
+    /**
+     * The segments to render.
+     *
+     * Defaulted rather than required: options usually arrive from a fetch, and
+     * the first render should be an empty control, not a crash.
+     */
+    options?: SegmentedOptionType[];
+    /**
+     * The selected value / `v-model`. A value matching no option leaves every
+     * segment unselected, which is a legitimate empty state rather than an error.
+     */
+    modelValue?: any;
+    /**
+     * @default 'medium'
+     */
+    size?: SegmentedControlSizeType;
+    /**
+     * Stretches the control to its container and gives every segment an equal
+     * share of it. Without this each segment is as wide as its own content.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Stacks the segments instead of running them across. Worth it for four or
+     * more long labels, where a row would either wrap or truncate.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Disables every segment. Individual segments have their own `disabled`.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the selection but refuses to change it. Unlike `disabled` the control
+     * keeps its normal colour and stays focusable, so the value can still be read
+     * out — which is the point.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * The `name` shared by the underlying radio inputs. Generated when unset,
+     * which is what makes the segments a real radio group: one tab stop, arrow
+     * keys between them, and "2 of 4" announced.
+     *
+     * Only worth setting to submit the value with a plain HTML form — the
+     * control is still driven by `modelValue`, not by the form.
+     */
+    name?: string;
+    /**
+     * Which side of a segment its `tooltip` opens on. `top` by default, which
+     * keeps it clear of the row rather than covering the segment it describes and
+     * its neighbours.
+     *
+     * @default 'top'
+     */
+    tooltipPosition?: ActionTooltipPositionType;
+    /**
+     * The group's accessible name when there is no visible `label` — a view
+     * switcher in a toolbar being the usual case. Ignored when `label` is a
+     * string, which is used instead.
+     */
+    ariaLabel?: string;
+    /**
+     * A visible label above the control, making it a form field. Leave it unset
+     * for a toolbar control and name the group with `ariaLabel` instead.
+     */
+    label?: string | false | null;
+    /**
+     * An error message shown beneath the control.
+     */
+    error?: string | false | null;
+    /**
+     * Secondary text beneath the control.
+     */
+    helpText?: string | false | null;
+    /**
+     * Renders a help icon next to the label which links to an external page.
+     */
+    helpLink?: string;
+}