@webx-ui/core 0.15.0 → 0.17.0

package/dist/components/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,44 @@
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { CodeEditorDiagnostic, CodeEditorProps } from './types';
+type __VLS_Props = CodeEditorProps;
+declare function format(): boolean;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    view: import('vue').ShallowRef<EditorView | null, EditorView | null>;
+    focus: () => void | undefined;
+    format: typeof format;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    blur: () => any;
+    focus: () => any;
+    lint: (diagnostics: CodeEditorDiagnostic[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onLint?: ((diagnostics: CodeEditorDiagnostic[]) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    placeholder: string;
+    ariaLabel: string;
+    status: import('../..').ControlStatus;
+    id: string;
+    language: import('./types').CodeEditorLanguage;
+    readonly: boolean;
+    minHeight: string;
+    maxHeight: string;
+    lineNumbers: boolean;
+    lineWrapping: boolean;
+    tabSize: number;
+    lint: boolean;
+    extensions: Extension[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    host: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/components/CodeEditor/highlight.d.ts

@@ -0,0 +1,7 @@
+import { HighlightStyle } from '@codemirror/language';
+/**
+ * Syntax colours come from the semantic tokens, so both themes are covered by the
+ * same style and a project that re-tints its primary colour re-tints its code too.
+ * The palette is deliberately small: five roles, not a rainbow.
+ */
+export declare const highlightStyle: HighlightStyle;

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

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

package/dist/components/CodeEditor/languages.d.ts

@@ -0,0 +1,14 @@
+import { Extension } from '@codemirror/state';
+import { LintSource } from '@codemirror/lint';
+import { CodeEditorLanguage } from './types';
+interface LanguageSupport {
+    extension: () => Extension;
+    /** Only JSON has a parser cheap enough to run on every keystroke. */
+    linter?: () => LintSource;
+}
+/**
+ * Each entry is a factory rather than an instance: language support carries
+ * state fields, and CodeMirror expects a fresh one per editor.
+ */
+export declare const LANGUAGES: Record<CodeEditorLanguage, LanguageSupport>;
+export {};

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

@@ -0,0 +1,56 @@
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+/** The languages the editor highlights out of the box. `plain` highlights nothing. */
+export type CodeEditorLanguage = 'json' | 'javascript' | 'typescript' | 'html' | 'css' | 'markdown' | 'yaml' | 'php' | 'plain';
+export interface CodeEditorDiagnostic {
+    /** Offset of the first character the problem covers. */
+    from: number;
+    /** Offset just past the last character it covers. */
+    to: number;
+    severity: 'error' | 'warning' | 'info' | 'hint';
+    message: string;
+}
+export interface CodeEditorProps {
+    language?: CodeEditorLanguage;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    /** Accessible label used when there is no visible `<label>`. */
+    ariaLabel?: string;
+    /** Height of the editing area before it starts growing. */
+    minHeight?: string;
+    /** Height at which the editor stops growing and scrolls instead. */
+    maxHeight?: string;
+    lineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling horizontally. */
+    lineWrapping?: boolean;
+    /** Width of one indentation step, in spaces; Tab inserts this many. */
+    tabSize?: number;
+    /**
+     * Check the document with the language's own linter and underline what it finds.
+     * Only JSON ships with one; the flag is ignored elsewhere.
+     */
+    lint?: boolean;
+    /** Extra CodeMirror extensions, for anything this component does not wrap. */
+    extensions?: Extension[];
+}
+export interface CodeEditorEmits {
+    change: [value: string];
+    focus: [];
+    blur: [];
+    /** The linter ran; an empty list means the document is valid. */
+    lint: [diagnostics: CodeEditorDiagnostic[]];
+}
+export interface CodeEditorExposed {
+    view: EditorView | null;
+    focus: () => void;
+    /**
+     * Re-indents a JSON document with `tabSize` spaces. Returns `false` and leaves the
+     * text alone when it does not parse or the language is not JSON.
+     */
+    format: () => boolean;
+}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    presets: string[];
     readonly: boolean;
+    presets: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/Countdown/Countdown.d.ts

@@ -28,9 +28,9 @@ declare const __VLS_component: import('vue').DefineComponent<CountdownProps, {
     title: string;
     tone: import('..').TextTone;
     align: import('..').TextAlign;
+    format: string;
     prefix: string;
     suffix: string;
-    format: string;
     interval: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/Dialog/Dialog.d.ts

@@ -82,10 +82,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     closeLabel: string;
     width: number | string;
     scroll: import('./types').DialogScroll;
+    minHeight: number;
     height: number | string;
     stickyFooter: boolean;
     minWidth: number;
-    minHeight: number;
     sidebarWidth: number | string;
     closeOnOverlay: boolean;
     closeOnEscape: boolean;

package/dist/components/ImageEditor/ImageEditor.d.ts

@@ -31,8 +31,9 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
 }>, {
     disabled: boolean;
     footer: boolean;
-    background: string;
+    maxHeight: number;
     format: "auto" | "image/jpeg" | "image/png" | "image/webp";
+    background: string;
     filters: boolean;
     resizable: boolean;
     minSize: number;
@@ -45,7 +46,6 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
     ratios: (ImageEditorRatio | ImageEditorRatioOption)[];
     rotatable: boolean;
     flippable: boolean;
-    maxHeight: number;
     quality: number;
     crossOrigin: "anonymous" | "use-credentials" | "";
     resetLabel: string;

package/dist/components/InputNumber/InputNumber.d.ts

@@ -29,8 +29,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     id: string;
     max: number;
     wheel: boolean;
-    min: number;
     readonly: boolean;
+    min: number;
     step: number;
     precision: number;
     controls: boolean;

package/dist/components/Scrollbar/Scrollbar.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_component: import('vue').DefineComponent<ScrollbarProps, {
 }>, {
     size: import('./types').ScrollbarSize;
     always: boolean;
-    height: number | string;
     maxHeight: number | string;
+    height: number | string;
     axis: import('./types').ScrollbarAxis;
     chainScroll: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

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

@@ -47,6 +47,11 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
             row: T;
             index: number;
         }) => unknown;
+        /** Buttons along the top of a card, where a row has no room for a column of them. */
+        'card-actions'?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
     }> & {
         [key: `header-${string}`]: ((props: {
             column: TableColumn<T>;
@@ -70,6 +75,11 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
             row: T;
             index: number;
         }) => unknown;
+        /** Buttons along the top of a card, where a row has no room for a column of them. */
+        'card-actions'?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
     };
     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: "node-drop", event: import('./types').TableNodeDropEvent<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 & {

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

@@ -50,6 +50,21 @@ export interface TableColumn<T = TableRow> {
     cellClass?: string;
     /** Leaves the column out without changing the array. */
     hidden?: boolean;
+    /**
+     * Drops the column while the table is narrower than this.
+     *
+     * The alternative is a horizontal scrollbar, and a column somebody has to drag sideways to
+     * read is a column they will not read. Say it about the ones that can go — a date, a count —
+     * and the ones that identify the row stay whatever the width.
+     */
+    hideBelow?: number;
+    /**
+     * Leaves the column out of a card, where space is the scarce thing.
+     *
+     * A date somebody scans down a column is worth a line of its own on a wide screen and is the
+     * first thing to go on a narrow one.
+     */
+    hideOnCards?: boolean;
 }
 /**
  * One line of the summary under the table. `label` occupies every column ahead of the
@@ -158,6 +173,21 @@ export interface TableProps<T = TableRow> {
     expandableIf?: (row: T) => boolean;
     /** Lines under the table: totals, discounts, whatever the figures are. */
     summary?: TableSummaryRow[];
+    /**
+     * Below this width — of the table, not the window — each row is drawn as a card instead.
+     *
+     * A table narrower than about forty characters is a row of columns nobody can read, and on a
+     * phone that is every table. `0` turns it off and keeps the columns at any width.
+     */
+    cardsBelow?: number;
+    /**
+     * Drops the table's own margins around the header and the cards.
+     *
+     * On its own the table is a surface, and its search field and cards keep clear of its rounded
+     * edge. Inside a card the card keeps the margins already, and a second set puts the search
+     * field a step in from whatever the card has above it.
+     */
+    flush?: boolean;
     /**
      * 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.

package/dist/components/Text/Text.d.ts

@@ -13,10 +13,10 @@ declare const __VLS_component: import('vue').DefineComponent<TextProps, {}, {},
     as: string;
     tone: import('./types').TextTone;
     align: import('./types').TextAlign;
+    italic: boolean;
     truncate: boolean | number;
     mono: boolean;
     weight: import('./types').TextWeight;
-    italic: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -31,8 +31,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     align: import('./types').TooltipAlign;
     offset: number;
     teleport: boolean;
-    arrow: boolean;
     delay: number;
+    arrow: boolean;
     maxWidth: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/Upload/Upload.d.ts

@@ -54,12 +54,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     multiple: boolean;
     disabled: boolean;
     max: number;
+    hint: string;
     removable: boolean;
     accept: string;
     maxSize: number;
     buttonOnly: boolean;
     buttonText: string;
-    hint: string;
     gallery: boolean;
     beforeAdd: (file: File) => boolean | Promise<boolean>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from './ButtonGroup';
 export * from './Card';
 export * from './Cascader';
 export * from './Checkbox';
+export * from './CodeEditor';
 export * from './CheckboxGroup';
 export * from './Col';
 export * from './ColorPicker';