@webx-ui/core 0.0.2 → 0.2.0

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,38 @@
+import { ChoiceValue } from '../../composables/useFormField';
+import { SwitchProps } from './types';
+type __VLS_Props = SwitchProps;
+type __VLS_PublicProps = {
+    modelValue?: ChoiceValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: ChoiceValue) => any;
+    "update:modelValue": (value: ChoiceValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: ChoiceValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ChoiceValue) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    label: string;
+    id: string;
+    ariaLabel: string;
+    activeValue: ChoiceValue;
+    inactiveValue: ChoiceValue;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+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/Switch/index.d.ts

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

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

@@ -0,0 +1,18 @@
+import { ChoiceValue, ControlSize } from '../../composables/useFormField';
+export interface SwitchProps {
+    /** Value written when the switch is on. */
+    activeValue?: ChoiceValue;
+    /** Value written when the switch is off. */
+    inactiveValue?: ChoiceValue;
+    /** Label text shown next to the track. */
+    label?: string;
+    disabled?: boolean;
+    size?: ControlSize;
+    id?: string;
+    name?: string;
+    /** Accessible label used when there is no visible one. */
+    ariaLabel?: string;
+}
+export interface SwitchEmits {
+    change: [value: ChoiceValue];
+}

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/TagsInput/TagsInput.d.ts

@@ -0,0 +1,32 @@
+import { TagsInputProps } from './types';
+type __VLS_Props = TagsInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: (term: string) => any;
+    change: (value: string[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((term: string) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    max: number;
+    placeholder: string;
+    status: import('../..').ControlStatus;
+    emptyText: string;
+    suggestions: string[];
+    duplicates: boolean;
+    allowCreate: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,26 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface TagsInputProps {
+    /** Options offered while typing. Refresh them from the `search` event for a backend. */
+    suggestions?: string[];
+    placeholder?: string;
+    /** Shown when nothing matches and new tags are not allowed. */
+    emptyText?: string;
+    /** Largest number of tags the user may end up with. */
+    max?: number;
+    /** Allow the same tag twice. */
+    duplicates?: boolean;
+    /** Let Enter add a tag that is not in the suggestions. */
+    allowCreate?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when there is no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface TagsInputEmits {
+    change: [value: string[]];
+    /** What the user typed, on every keystroke — use it to fetch suggestions. */
+    search: [term: string];
+}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,39 @@
+import { TextareaModelValue, TextareaProps } from './types';
+type __VLS_Props = TextareaProps;
+type __VLS_PublicProps = {
+    modelValue?: TextareaModelValue;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    select: () => void | undefined;
+    textarea: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: string) => any;
+    change: (value: string) => any;
+    "update:modelValue": (value: TextareaModelValue) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onInput?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TextareaModelValue) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    placeholder: string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    maxlength: number;
+    showCount: boolean;
+    resize: "none" | "vertical" | "both";
+    rows: number;
+    autosize: boolean | import('./types').AutosizeOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    textareaRef: HTMLTextAreaElement;
+}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,31 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface AutosizeOptions {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TextareaProps {
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** Visible rows when autosize is off. */
+    rows?: number;
+    /** Grows with the content. Pass an object to bound the growth. */
+    autosize?: boolean | AutosizeOptions;
+    maxlength?: number;
+    /** Renders a `current / max` counter (requires `maxlength`). */
+    showCount?: boolean;
+    /** Which way the user may resize the field by hand. */
+    resize?: 'none' | 'vertical' | 'both';
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export type TextareaModelValue = string | undefined;
+export interface TextareaEmits {
+    input: [value: string];
+    change: [value: string];
+    focus: [event: FocusEvent];
+    blur: [event: FocusEvent];
+}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,52 @@
+import { DatePickerModelValue, DatePickerProps } from '../DatePicker/types';
+/**
+ * Every prop defaults to `undefined` on purpose. Vue casts an absent boolean prop
+ * to `false`, and this preset forwards its whole prop object — without these the
+ * preset would hand `WxDatePicker` an explicit `false` for `is24`, `clearable`,
+ * `autoApply` and `teleport`, overriding that component's own defaults. Passing
+ * `undefined` lets each default apply as if the prop had never been written.
+ */
+type __VLS_Props = Omit<DatePickerProps, 'type'>;
+type __VLS_PublicProps = {
+    modelValue?: DatePickerModelValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: any;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DatePickerModelValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePickerModelValue) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean | string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    valueFormat: string;
+    format: string;
+    minDate: string | Date;
+    maxDate: string | Date;
+    seconds: boolean;
+    minutesIncrement: number;
+    is24: boolean;
+    weekStart: number;
+    autoApply: boolean;
+    textInput: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+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/TimePicker/index.d.ts

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

package/dist/components/index.d.ts

@@ -1,3 +1,24 @@
 export * from './Button';
-export * from './Input';
 export * from './Card';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './ColorPicker';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './DateTimePicker';
+export * from './Form';
+export * from './FormItem';
+export * from './Input';
+export * from './InputNumber';
+export * from './Pagination';
+export * from './Radio';
+export * from './RadioGroup';
+export * from './Rate';
+export * from './RichText';
+export * from './Select';
+export * from './Slider';
+export * from './Switch';
+export * from './Table';
+export * from './TagsInput';
+export * from './Textarea';
+export * from './TimePicker';

package/dist/composables/useFormField.d.ts

@@ -0,0 +1,64 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+export type ControlSize = 'sm' | 'md' | 'lg';
+export type ControlStatus = 'default' | 'success' | 'warning' | 'error';
+/** Field name -> messages, the shape Laravel returns on a 422. */
+export type ValidationErrors = Record<string, string[]>;
+export interface FormContext {
+    /** Server-side errors, keyed by field name. */
+    errors: Ref<ValidationErrors>;
+    disabled: Ref<boolean>;
+    size: Ref<ControlSize>;
+    labelPosition: Ref<'top' | 'left'>;
+    labelWidth: Ref<string | undefined>;
+}
+export interface FormItemContext {
+    /** Id given to the control, so the label's `for` matches. */
+    id: ComputedRef<string>;
+    /** Ids of the help and error nodes, for `aria-describedby`. */
+    describedBy: ComputedRef<string | undefined>;
+    status: ComputedRef<ControlStatus>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize | undefined>;
+    /** Set by grouped controls so the label points at the group, not one input. */
+    registerLabelTarget: (id: string | undefined) => void;
+}
+export declare const formContextKey: InjectionKey<FormContext>;
+export declare const formItemContextKey: InjectionKey<FormItemContext>;
+export declare function useId(prefix?: string): string;
+export interface FormFieldProps {
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+}
+/**
+ * Resolves what a control should render as, given its own props, the enclosing
+ * `WxFormItem` and the enclosing `WxForm`. The control's own prop always wins;
+ * `WxFormItem` beats `WxForm`.
+ */
+export declare function useFormField(props: FormFieldProps): {
+    id: ComputedRef<string>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize>;
+    status: ComputedRef<ControlStatus>;
+    describedBy: ComputedRef<string | undefined>;
+    form: FormContext | null;
+    item: FormItemContext | null;
+};
+/**
+ * What a checkbox, radio or switch may carry. Deliberately narrower than `unknown`:
+ * a `v-model` that hands back `unknown` is useless to the caller, and object values
+ * would need identity comparison rather than `===`.
+ */
+export type ChoiceValue = string | number | boolean | null;
+/** Used by `WxCheckboxGroup` / `WxRadioGroup` to share state with their children. */
+export interface ChoiceGroupContext<T> {
+    name: ComputedRef<string | undefined>;
+    modelValue: Ref<T>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize>;
+    toggle: (value: ChoiceValue, checked: boolean) => void;
+}
+export declare const checkboxGroupKey: InjectionKey<ChoiceGroupContext<ChoiceValue[]>>;
+export declare const radioGroupKey: InjectionKey<ChoiceGroupContext<ChoiceValue | undefined>>;
+export declare function provideFormItem(context: FormItemContext): void;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export { WebxUI, type WebxUiOptions } from './plugin';
+export type { ControlSize, ControlStatus, ValidationErrors } from './composables/useFormField';