@octans/ui 1.0.0

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

@@ -0,0 +1,249 @@
+import { ActionWithSubjectType } from '../types';
+interface DataTableFormatContextType {
+    currency: string;
+    locale: string;
+    timezone: string;
+}
+export type DataTableColumnFormatFuncType = (content: any, row: any, forTotal?: boolean) => string | null;
+export interface DataTableColumnType {
+    key: string;
+    type?: string;
+    label?: string;
+    format?: string | DataTableColumnFormatFuncType;
+    formatString?: string;
+    formatFunc?: DataTableColumnFormatFuncType;
+    formatContext?: (row: object, forTotal: boolean) => Partial<DataTableFormatContextType>;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    fixed?: boolean;
+    sortable?: boolean;
+    wrap?: boolean;
+    index?: number;
+    classes?: Array<string | false>;
+}
+/**
+ * An action at the end of a single row. Its `onAction` receives that row.
+ */
+export type DataTableRowActionItemType<R extends Record<string, any>> = ActionWithSubjectType<R>;
+/**
+ * An action shown once rows are selected. Its `onAction` receives every
+ * selected row, as an array.
+ */
+export type DataTableBulkActionType<R extends Record<string, any>> = ActionWithSubjectType<R[]>;
+export type DataTableRowActionType<R extends Record<string, any>> = DataTableRowActionItemType<R>[] | ((row: R, index: number) => DataTableRowActionItemType<R>[]);
+export type DataTableLoadingStateType = {
+    totals: boolean;
+    rows: boolean;
+    footer: boolean;
+};
+export type DataTablePaginationType = {
+    offset: number;
+    updateOffset: (offset: number) => void;
+    limit: number;
+    updateLimit: (limit: number) => void;
+    pageSizes?: number[];
+    total?: number;
+    summary?: string;
+};
+export type DataTableSortType = {
+    column: string;
+    direction: 'asc' | 'desc';
+};
+export type InterPropsType<Row extends Record<string, any> = Record<string, any>> = {
+    /**
+     * An array of Columns.
+     *
+     * ```ts
+     * interface Column {
+     *   key: string
+     *   label: string
+     *   // @See Formatter
+     *   // A function can be provided to format the cell value directly, it is
+     *   // called with (value, row, forTotal) and should return a string.
+     *   format?: FormatType | FormatFunc
+     *   // As above, an alternative to passing a function as `format`.
+     *   // type FormatFunc =
+     *   //   (value: any, row: object, forTotal?: boolean) => string | null
+     *   formatFunc?: FormatFunc
+     *   // Allows overriding the format context for the current cell.
+     *   // @See Formatter
+     *   formatContext?: (row: object, forTotal: boolean) => Partial&lt;FormatContext&gt;
+     *   // Shortcut for setting minWidth and maxWidth to same value.
+     *   width?: number
+     *   // Minimum column width in pixels.
+     *   minWidth?: number
+     *   // Maximum column width in pixels.
+     *   maxWidth?: number
+     *   // Fixes the column in place, only applies to first column.
+     *   fixed?: boolean
+     *   sortable?: boolean
+     *   // Wraps any overflowing content in the column instead of truncating it.
+     *   // Combine with `minWidth` option to prevent column from being made
+     *   // infinitely narrow.
+     *   wrap?: boolean
+     * }
+     * ```
+     */
+    columns: DataTableColumnType[];
+    /**
+     * An array of row data objects to display.
+     *
+     *   - Each row should have a unique `id` property.
+     *   - Data will be displayed in the order provided.
+     *   - If client-side pagination is used, the data table will truncate rows as neccessary.
+     *   - If server-side pagination is used, you are responsible for pagination.
+     */
+    rows: Row[];
+    /**
+     * An array of actions to display at the end of each row.
+     *
+     * A function can be provided that will be called once for each row to
+     * customize the action on a per-row basis.
+     *
+     * When necessary the action colum will collapse into an action list
+     * and stay fixed to the right edge to improve accessibility.
+     *
+     * **`onAction` receives the row it belongs to.**
+     *
+     * ```ts
+     * interface DataTableRowActionItemType<Row> {
+     *   label: string
+     *   // See &lt;Icon&gt; component.
+     *   icon?: string
+     *   disabled?: boolean
+     *   url?: string
+     *   external?: boolean
+     *   onAction?(row: Row): void
+     * }
+     * ```
+     */
+    rowActions?: DataTableRowActionType<Row>;
+    /**
+     * An array of actions to display when the user selects one or more rows.
+     *
+     * **`onAction` receives an array of the selected row data objects.**
+     *
+     * ```ts
+     * interface DataTableBulkActionType<Row> {
+     *   label: string
+     *   // See &lt;Icon&gt; component.
+     *   icon?: string
+     *   disabled?: boolean
+     *   url?: string
+     *   external?: boolean
+     *   onAction?(rows: Row[]): void
+     * }
+     * ```
+     */
+    bulkActions?: DataTableBulkActionType<Row>[];
+    /**
+     * An array containing all the row IDs that are selected.
+     * The `update:selectedIds` event is emitted whenever the user changes the
+     * selection.
+     */
+    selectedIds?: number[];
+    /**
+     * Splits the data in the table into multiple pages if the number of rows
+     * exceeds the page limit.
+     *
+     * ```ts
+     * interface PaginationType {
+     *   offset: number
+     *   // Callback method to invoke with the new offset value when the user
+     *   // changes a page.
+     *   updateOffset(number): void
+     *   // The number of rows to show per page.
+     *   limit: number
+     *   // Callback method to invoke with the new limit value when the user
+     *   // changes the page size.
+     *   updateLimit(number): void
+     *   // An array of page sizes (limits) the user can choose from.
+     *   // See `Pagination` component for defaults and options.
+     *   pageSizes: number[]
+     *   // Defaults to rows.total.
+     *   // If the total provided is greater than the current number of rows
+     *   // then the table will render in "server-side" mode where it shows all
+     *   // rows and leaves handing of the pagination up to you.
+     *   total?: number
+     *   // Localized footer summary, defaults to "Showing {range} of {total}"
+     *   summary?: string
+     * }
+     * ```
+     */
+    pagination?: DataTablePaginationType;
+    /**
+     * If `true` then all numeric columns will be automatically summed.
+     *
+     * If an array is provided then it will use these numbers for the totals.
+     * Use empty strings as placeholders for columns with no total.
+     *
+     * For example the follow array would manually show totals of 50 and 100 for
+     * the second and forth columns and format them based on the column format.
+     *
+     * ```js
+     * ['', 50, '', 100]
+     * ```
+     *
+     * **Note:** The first column can never have a total.
+     */
+    totals?: boolean | number[] | string[];
+    /**
+     * Controls loading states for parts of the table. Accepts an object or boolean.
+     * Passing `true` is the same as using `{rows: true}`.
+     *
+     * ```ts
+     * interface LoadingStates {
+     *   // Shows skeleton text where headers totals should be.
+     *   totals: boolean
+     *   // Shows a spinner centered on the table and dims all content.
+     *   rows: boolean
+     *   // Shows skeleton text in the footer.
+     *   footer: boolean
+     * }
+     * ```
+     */
+    loading?: boolean | DataTableLoadingStateType;
+    /**
+     * Text to show when there are no rows to display.
+     */
+    emptyText?: string;
+    /**
+     * The current column to sort by and its direction.
+     *
+     * ```ts
+     * interface SortType {
+     *   column: string
+     *   direction: string // asc | desc
+     * }
+     * ```
+     */
+    sort?: DataTableSortType;
+    /**
+     * Renders rows in compact form.
+     */
+    compact?: boolean;
+    /**
+     * The minimum width in pixels which the DataTable must be for row actions
+     * to be displayed inline. When the DataTable is smaller than this width the
+     * actions are collapsed into a dropdown menu.
+     */
+    actionCollapseThreshold?: number;
+    /**
+     * The maximum number of actions to display inline before collapsing into a
+     * dropdown menu.
+     * @default 3
+     */
+    maxPersistActions?: number;
+    /**
+     * The maximum width in pixels which the DataTable must be for row actions
+     * to be displayed inline. When the DataTable is smaller than this width the
+     * actions are collapsed into a dropdown menu.
+     */
+    fixedColumnDisableThreshold?: number;
+    /**
+     * Disables the scroll bounce effect.
+     */
+    disableScrollBounce?: boolean;
+};
+export {};

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

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

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

@@ -0,0 +1,4 @@
+import { DatePickerProps } from './types';
+export { default as DatePicker } from './DatePicker.vue';
+export type { DatePickerProps } from './types';
+export declare function isDatePickerType(type?: string): type is DatePickerProps['type'];

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

@@ -0,0 +1,57 @@
+import { Dayjs } from 'dayjs';
+export interface DatePickerProps {
+    label?: string | false;
+    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;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /**
+     * 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;
+    /**
+     * Shows a button at the end of the date input which allows the value to be
+     * cleared.
+     */
+    clearable?: boolean;
+    /**
+     * If set to `false` will not automatically display the picker.
+     */
+    autoOpen?: boolean;
+}

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

@@ -0,0 +1,20 @@
+import { DividerProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<DividerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DividerProps> & Readonly<{}>, {
+    placement: import('./types').DividerPlacementType;
+    dashed: boolean;
+    vertical: boolean;
+    spacing: import('./types').DividerSpacingType;
+    bleed: boolean | number | string;
+}, {}, {}, {}, 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/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider.vue';
+export type { DividerProps, DividerSpacingType, DividerPlacementType } from './types';

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

@@ -0,0 +1,76 @@
+/**
+ * How much room the divider keeps around itself.
+ *
+ * The scale is `Stack`'s, deliberately — a screen built from both should have
+ * one rhythm, not two that nearly agree. Leaving it unset is the same 16px
+ * `Stack` uses by default.
+ */
+export type DividerSpacingType = 'none' | 'extraTight' | 'tight' | 'loose' | 'extraLoose';
+/**
+ * Where the label sits along the line.
+ *
+ * `left` and `right` keep a short run of line on the near side; `start` and
+ * `end` put the label outside the line entirely, so it begins or ends the
+ * divider.
+ *
+ * ```
+ * start    Label ─────────────────────
+ * left     ──── Label ────────────────
+ * center   ───────── Label ───────────
+ * right    ──────────────── Label ────
+ * end      ───────────────────── Label
+ * ```
+ *
+ * The row follows the writing direction, so under `dir="rtl"` every one of
+ * these mirrors — `left` and `start` sit where reading begins, on the right.
+ */
+export type DividerPlacementType = 'start' | 'left' | 'center' | 'right' | 'end';
+export interface DividerProps {
+    /**
+     * Draws the rule down instead of across, for separating things sitting side
+     * by side. It takes the height of whatever it is stacked against — inside a
+     * `Stack` that is the tallest item — and falls back to one line of text where
+     * there is nothing to stretch to.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Room left on both sides of the line: above and below when horizontal,
+     * left and right when vertical.
+     *
+     * Margins, not padding, so a divider between two elements that already have
+     * their own spacing collapses into it rather than adding to it.
+     *
+     * @default undefined (16px)
+     */
+    spacing?: DividerSpacingType;
+    /**
+     * Where the label sits, when there is one. Ignored without slot content,
+     * since there is nothing to place.
+     *
+     * `'start'` and `'end'` drop the line on the label's near side altogether,
+     * rather than leaving the short run `'left'` and `'right'` keep.
+     *
+     * @default 'center'
+     */
+    placement?: DividerPlacementType;
+    /**
+     * Draws the line dashed. A shortcut for `--Divider-style`, which also takes
+     * `dotted` or anything else `border-style` accepts.
+     *
+     * @default false
+     */
+    dashed?: boolean;
+    /**
+     * Pulls the line out through its container's padding so it meets the edges —
+     * what a divider inside a `CardSection` usually wants, since the card's own
+     * section rules run edge to edge.
+     *
+     * `true` uses 16px, matching `CardSection`'s padding. A number is pixels and
+     * a string is any CSS length, for containers padded differently.
+     *
+     * @default false
+     */
+    bleed?: boolean | number | string;
+}

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

@@ -0,0 +1,18 @@
+export interface EventDelegatorProps {
+    target?: 'window' | 'document';
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<EventDelegatorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<EventDelegatorProps> & Readonly<{}>, {
+    target: "window" | "document";
+}, {}, {}, {}, 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/EventDelegator/index.d.ts

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

package/dist/components/EventDelegator/utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A DOM event handler as it arrives from `$attrs`.
+ *
+ * The delegator only ever invokes these with the event itself, so this is the
+ * whole contract — it is deliberately narrower than the handler a caller may
+ * have written.
+ */
+export type EventHandler = (event: Event) => void;
+export interface Listener {
+    name: string;
+    handler: EventHandler;
+    options: ListenerOptions;
+    remove?: () => void;
+}
+export interface ListenerOptions {
+    capture: boolean;
+    passive: boolean;
+}
+export declare function normalizeEvent(name: string): {
+    once: boolean;
+    capture: boolean;
+    passive: boolean;
+    name: string;
+};
+export declare function createEventListener(name: string, target: EventTarget, handler: EventHandler): Listener;

package/dist/components/FileInput/DropZone.vue.d.ts

@@ -0,0 +1,67 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {
+    isDragging: boolean;
+    error: string | null;
+}, {}, {
+    $t: typeof import('../../utils/translate').translate;
+    onClick(event: MouseEvent): void;
+    onDrop(event: DragEvent): void;
+    onDragEnter(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    multiple: boolean;
+}, {}, {
+    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>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;