@webx-ui/core 0.1.0 → 0.2.0

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,45 @@
+import { PaginationProps } from './types';
+type __VLS_Props = PaginationProps;
+type __VLS_PublicProps = {
+    'page'?: number | undefined;
+    'perPage'?: number | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        total?(_: {
+            from: number | null;
+            to: number | null;
+            total: number;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: import('./types').PaginationChange) => any;
+    "update:page": (value: number | undefined) => any;
+    "update:perPage": (value: number | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: import('./types').PaginationChange) => any) | undefined;
+    "onUpdate:page"?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:perPage"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    ariaLabel: string;
+    paginator: import('..').Paginated<unknown> | null;
+    total: number;
+    lastPage: number;
+    siblings: number;
+    perPageOptions: number[];
+    showTotal: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as WxPagination } from './Pagination';
+export type * from './types';

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

@@ -0,0 +1,29 @@
+import { ControlSize } from '../../composables/useFormField';
+import { Paginated } from '../Table/types';
+export interface PaginationProps {
+    /**
+     * A page as `->paginate()` serialises it. The current page, the page size and the
+     * totals are all read from it, so the usual case needs no other prop.
+     */
+    paginator?: Paginated<unknown> | null;
+    /** Rows in total. Only needed without a paginator. */
+    total?: number;
+    /** Last page number. Worked out from `total` and the page size when missing. */
+    lastPage?: number;
+    /** Page buttons kept either side of the current one. */
+    siblings?: number;
+    /** Offers a page-size control. Empty leaves it out. */
+    perPageOptions?: number[];
+    /** Shows the "1–15 of 128" line. */
+    showTotal?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    ariaLabel?: string;
+}
+export interface PaginationChange {
+    page: number;
+    perPage: number;
+}
+export interface PaginationEmits {
+    change: [value: PaginationChange];
+}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,34 @@
+import { RowKey, TableProps, TableRow, TableSort, TableState } from './types';
+declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSearch?: ((term: string) => any) | undefined;
+        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:perPage"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:selected"?: ((value: RowKey[]) => any) | undefined;
+        readonly "onUpdate:expanded"?: ((value: RowKey[]) => any) | undefined;
+        readonly "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
+        readonly "onUpdate:search"?: ((value: string) => any) | undefined;
+        readonly "onRow-click"?: ((row: T, index: number, event: MouseEvent) => any) | undefined;
+        readonly "onSort-change"?: ((sort: TableSort | null) => any) | undefined;
+        readonly "onSelection-change"?: ((keys: RowKey[], rows: T[]) => any) | undefined;
+        readonly "onExpand-change"?: ((keys: RowKey[], rows: T[]) => any) | undefined;
+        readonly "onState-change"?: ((state: TableState) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:page" | "onUpdate:perPage" | "onSearch" | "onUpdate:selected" | "onUpdate:expanded" | "onUpdate:sort" | "onUpdate:search" | "onRow-click" | "onSort-change" | "onSelection-change" | "onExpand-change" | "onState-change"> & ({
+        selected?: RowKey[];
+        expanded?: RowKey[];
+        sort?: TableSort | null;
+        search?: string;
+        page?: number;
+        perPage?: number;
+    } & TableProps<T>) & any> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: any;
+    emit: (((evt: "search", term: string) => void) & ((evt: "row-click", row: T, index: number, event: MouseEvent) => void) & ((evt: "sort-change", sort: TableSort | null) => void) & ((evt: "selection-change", keys: RowKey[], rows: T[]) => void) & ((evt: "expand-change", keys: RowKey[], rows: T[]) => void) & ((evt: "state-change", state: TableState) => void)) & (((evt: "update:page", value: number) => void) & ((evt: "update:perPage", value: number) => void) & ((evt: "update:selected", value: RowKey[]) => void) & ((evt: "update:expanded", value: RowKey[]) => void) & ((evt: "update:sort", value: TableSort | null) => void) & ((evt: "update:search", value: string) => void));
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,2 @@
+export { default as WxTable } from './Table';
+export type * from './types';

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

@@ -0,0 +1,142 @@
+import { ControlSize } from '../../composables/useFormField';
+/**
+ * A page as Laravel's `->paginate()` serialises it. Taken as it arrives, with the
+ * snake_case keys intact — renaming them in every controller is work the table can
+ * spare the caller.
+ */
+export interface Paginated<T = TableRow> {
+    data: T[];
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    from: number | null;
+    to: number | null;
+}
+export type TableRow = Record<string, unknown>;
+export type SortOrder = 'asc' | 'desc';
+export interface TableSort {
+    /** Column key. Sent to the backend as it is. */
+    key: string;
+    order: SortOrder;
+}
+export type RowKey = string | number;
+export type TableAlign = 'left' | 'center' | 'right';
+export interface TableColumn<T = TableRow> {
+    /**
+     * Identifies the column and reads the value out of the row. A dotted path walks
+     * into nested objects, so an eager-loaded relation works: `user.name`.
+     */
+    key: string;
+    /** Heading text. Use the `header-<key>` slot for anything richer. */
+    label?: string;
+    width?: string | number;
+    minWidth?: string | number;
+    align?: TableAlign;
+    /** Adds a sort control to the heading. The table reports, it does not reorder. */
+    sortable?: boolean;
+    /**
+     * Pins the column to an edge while the rest scrolls sideways. A pinned column needs
+     * a `width`: the offsets of the ones behind it are worked out from the declared
+     * widths, and a column of unknown width cannot say where the next one starts.
+     */
+    fixed?: 'left' | 'right';
+    /** Turns the raw value into the text of the cell. */
+    formatter?: (value: unknown, row: T, index: number) => string;
+    headerClass?: string;
+    cellClass?: string;
+    /** Leaves the column out without changing the array. */
+    hidden?: boolean;
+}
+/**
+ * One line of the summary under the table. `label` occupies every column ahead of the
+ * first one carrying a value, which is what a total wants: a caption on the left and a
+ * figure under its column.
+ */
+export interface TableSummaryRow {
+    /** Caption on the left. */
+    label?: string;
+    /** Values by column key. */
+    cells?: Record<string, unknown>;
+    /** Draws the line as the one that matters — the total rather than its parts. */
+    strong?: boolean;
+    class?: string;
+}
+/** Everything the table asks the backend for, in one object. */
+export interface TableState {
+    page: number;
+    perPage: number;
+    sort: TableSort | null;
+    search: string;
+}
+export interface TableProps<T = TableRow> {
+    /** Rows, or a whole paginator — the table reads `data` out of it. */
+    data?: T[] | Paginated<T> | null;
+    columns: TableColumn<T>[];
+    /**
+     * Where a stable row id comes from. A missing key falls back to the row's position,
+     * which is enough to render but too weak to survive a reorder — name one when rows
+     * can be selected or expanded.
+     */
+    rowKey?: string | ((row: T, index: number) => RowKey);
+    /** Heading above the table. */
+    title?: string;
+    /** Adds the search field to the header. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** How long typing settles before `search` fires. Zero reports every keystroke. */
+    searchDebounce?: number;
+    loading?: boolean;
+    /** Shown in place of the rows when there are none. */
+    emptyText?: string;
+    stripe?: boolean;
+    bordered?: boolean;
+    /** Highlight the row under the pointer. */
+    hover?: boolean;
+    size?: ControlSize;
+    /** Adds the checkbox column. */
+    selectable?: boolean;
+    /** Rows this returns `false` for cannot be selected. */
+    selectableIf?: (row: T) => boolean;
+    /** Adds the disclosure column and renders the `expanded` slot underneath a row. */
+    expandable?: boolean;
+    /** Rows this returns `false` for have nothing to open. */
+    expandableIf?: (row: T) => boolean;
+    /** Lines under the table: totals, discounts, whatever the figures are. */
+    summary?: TableSummaryRow[];
+    /**
+     * Puts the pagination in the footer. On by default as soon as `data` is a paginator,
+     * since a paginated response is a promise that there are more pages to reach.
+     */
+    pagination?: boolean;
+    /** Page sizes offered by the built-in pagination. Empty leaves the control out. */
+    perPageOptions?: number[];
+    /**
+     * Remembers the page, the sort, the page size and the search term under this key, so
+     * a reload lands where the user left off. One key per table per application.
+     */
+    persist?: string;
+    /**
+     * Caps the height and scrolls the rows between a stuck header and a stuck footer.
+     * A number is pixels; a string is any CSS length, so `60vh` follows the window.
+     */
+    maxHeight?: string | number;
+    /** Extra class per row, for status colouring and the like. */
+    rowClass?: (row: T, index: number) => string | undefined;
+    /** Fixes the column widths instead of letting the content decide. */
+    layout?: 'auto' | 'fixed';
+    ariaLabel?: string;
+}
+export interface TableEmits<T = TableRow> {
+    'row-click': [row: T, index: number, event: MouseEvent];
+    'sort-change': [sort: TableSort | null];
+    'selection-change': [keys: RowKey[], rows: T[]];
+    'expand-change': [keys: RowKey[], rows: T[]];
+    search: [term: string];
+    /**
+     * Everything the backend needs, together. Fires once on mount — with whatever
+     * `persist` restored — and again whenever any part of it changes, which makes it the
+     * single place to hang the fetch on.
+     */
+    'state-change': [state: TableState];
+}

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './Form';
 export * from './FormItem';
 export * from './Input';
 export * from './InputNumber';
+export * from './Pagination';
 export * from './Radio';
 export * from './RadioGroup';
 export * from './Rate';
@@ -17,6 +18,7 @@ export * from './RichText';
 export * from './Select';
 export * from './Slider';
 export * from './Switch';
+export * from './Table';
 export * from './TagsInput';
 export * from './Textarea';
 export * from './TimePicker';