@webx-ui/core 0.40.2 → 0.42.0

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

@@ -1,44 +1,27 @@
-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>;
+import { CodeEditorDiagnostic, CodeEditorModelValue, CodeEditorProps } from './types';
+declare const _default: <T extends CodeEditorModelValue = string>(__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 onChange?: ((value: string) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+        readonly onBlur?: (() => any) | undefined;
+        readonly onFocus?: (() => any) | undefined;
+        readonly onLint?: ((diagnostics: CodeEditorDiagnostic[]) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue" | "onFocus" | "onBlur" | "onLint"> & ({
+        modelValue?: T;
+    } & CodeEditorProps) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        view: import('vue').ShallowRef<EditorView | null, EditorView | null>;
+        focus: () => void | undefined;
+        format: () => boolean;
+    }>): void;
+    attrs: any;
+    slots: {};
+    emit: (((evt: "change", value: string) => void) & ((evt: "blur") => void) & ((evt: "focus") => void) & ((evt: "lint", diagnostics: CodeEditorDiagnostic[]) => void)) & ((evt: "update:modelValue", value: T) => 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/CodeEditor/index.d.ts

@@ -1,2 +1,4 @@
 export { default as WxCodeEditor } from './CodeEditor';
 export type * from './types';
+export { mustacheCompletions, mustacheHighlighting, mustacheProblems, scanMustache, } from './mustache';
+export type { MustacheProblems, MustacheTag, MustacheTagKind } from './mustache';

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

@@ -0,0 +1,66 @@
+import { Extension } from '@codemirror/state';
+import { CodeEditorCompleter, MustacheVariable, MustacheWords } from './types';
+/**
+ * Mustache over text or HTML: `{{name}}`, sections `{{#list}}…{{/list}}`, `{{^name}}`, comments.
+ *
+ * Neither CodeMirror nor a maintained package carries Mustache for CodeMirror 6 (the legacy modes
+ * have Jinja and Velocity, not Mustache), and a template of a notification is a dozen lines — so
+ * the tags are found by one scan of the document and painted as marks over whatever language is
+ * underneath. The same scan answers the completion source and the checks a form runs on a
+ * template, so the three never disagree about where a tag begins.
+ */
+/** What a tag is, by its first character. */
+export type MustacheTagKind = 'variable' | 'section' | 'inverted' | 'close' | 'comment'
+/** `{{{name}}}` and `{{&name}}`: printed raw by Mustache itself. */
+ | 'raw'
+/** `{{>partial}}`, `{{=<% %>=}}`, `{{%pragma}}`, `{{$block}}`, `{{<parent}}`. */
+ | 'other'
+/** `{{` with no `}}` after it. */
+ | 'unclosed';
+export interface MustacheTag {
+    kind: MustacheTagKind;
+    /** The name inside, trimmed; empty for a comment and for a tag still being typed. */
+    name: string;
+    /** Offset of the first `{`. */
+    from: number;
+    /** Offset just past the last `}` — the end of the document for an unclosed tag. */
+    to: number;
+}
+/** Every tag of a template, in order. */
+export declare function scanMustache(text: string): MustacheTag[];
+/** The sections open at an offset, the innermost last. */
+export declare function openSections(tags: MustacheTag[], before: number): string[];
+export interface MustacheProblems {
+    /** Sections opened and never closed. */
+    unclosed: string[];
+    /** `{{/name}}` with nothing of that name open. */
+    stray: string[];
+    /** Names no variable and no field of an open list has — only when variables were given. */
+    unknown: string[];
+    /** Tags Mustache would read and a template here may not use: partials, delimiters, pragmas. */
+    refused: string[];
+    /** `{{` that never ends. */
+    broken: boolean;
+}
+/**
+ * What is wrong with a template as it stands, by the same rules the completion knows: the open
+ * list's fields inside its section, the variables everywhere. With no variables the names are not
+ * judged — a template for any event may say anything.
+ */
+export declare function mustacheProblems(text: string, variables?: MustacheVariable[]): MustacheProblems;
+/** The tags painted as marks over the language underneath. */
+export declare function mustacheHighlighting(): Extension;
+/**
+ * Mustache's own suggestions after `{{`: the variables and the fields of the list being looped
+ * over, a list as a whole section, `{{#…}}` / `{{^…}}` for "has a value" / "is empty", and after
+ * `{{/` the section open nearest. With no variables only the syntax is offered — a template for
+ * any event knows no names.
+ *
+ * Every suggestion ends the tag: the `}}` that closing brackets typed is taken over rather than
+ * doubled, and a section is written whole with the caret inside.
+ *
+ * ```ts
+ * <wx-code-editor language="mustache" :completions="mustacheCompletions(variables)" />
+ * ```
+ */
+export declare function mustacheCompletions(variables?: MustacheVariable[], words?: Partial<MustacheWords>): CodeEditorCompleter;

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

@@ -1,8 +1,79 @@
 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';
+import { LocalizedValue } from '../../composables/useLocalized';
+/** The document, or under `localized` one per language. */
+export type CodeEditorModelValue = string | LocalizedValue | null | undefined;
+/**
+ * The languages the editor highlights out of the box. `plain` highlights nothing; `mustache` is
+ * Mustache tags over text, `mustache-html` over HTML.
+ */
+export type CodeEditorLanguage = 'json' | 'javascript' | 'typescript' | 'html' | 'css' | 'markdown' | 'yaml' | 'php' | 'mustache' | 'mustache-html' | 'plain';
+/** One suggestion of the completion list. */
+export interface CodeEditorCompletion {
+    /** What the list shows, and what typing is matched against. */
+    label: string;
+    /**
+     * What goes into the document instead of the label. `${}` marks where the caret lands and
+     * `${name}` a field to type over, as in CodeMirror's snippets.
+     */
+    apply?: string;
+    /** A short word beside the label: a type, an example value. */
+    detail?: string;
+    /** A longer description, shown beside the list for the suggestion in focus. */
+    info?: string;
+    /** CodeMirror's kind of suggestion — `variable`, `keyword`, `property` and the like. */
+    type?: string;
+    /** Higher comes first among equally good matches; -99 … 99. */
+    boost?: number;
+}
+export interface CodeEditorCompletionContext {
+    /** The whole document. */
+    text: string;
+    /** Where the caret is. */
+    pos: number;
+    /** Asked for with Ctrl+Space rather than by typing. */
+    explicit: boolean;
+}
+export interface CodeEditorCompletionResult {
+    /** Where the text the suggestions replace starts. */
+    from: number;
+    /** Where it ends; the caret when left out. */
+    to?: number;
+    options: CodeEditorCompletion[];
+}
+/** Suggestions for a place in the document, or `null` for none there. */
+export type CodeEditorCompleter = (context: CodeEditorCompletionContext) => CodeEditorCompletionResult | null;
+/**
+ * A fixed vocabulary — completed from the word before the caret — or a function that decides
+ * by the document itself, like `mustacheCompletions()`.
+ */
+export type CodeEditorCompletions = CodeEditorCompletion[] | CodeEditorCompleter;
+/** A value a Mustache template may use, for `mustacheCompletions()` and `mustacheProblems()`. */
+export interface MustacheVariable {
+    /** `name`, `field.phone`; `field.*` for a family of names. */
+    name: string;
+    /** What it is, in words. */
+    label?: string;
+    /** A value it may take. */
+    example?: unknown;
+    /** A list: the fields of each of its elements. */
+    fields?: {
+        name: string;
+        label?: string;
+    }[];
+}
+/** The words of the Mustache suggestions — English by default, `:name` filled in. */
+export interface MustacheWords {
+    variable: string;
+    list: string;
+    field: string;
+    section: string;
+    inverted: string;
+    close: string;
+    comment: string;
+    example: string;
+}
 export interface CodeEditorDiagnostic {
     /** Offset of the first character the problem covers. */
     from: number;
@@ -35,6 +106,16 @@ export interface CodeEditorProps {
      * Only JSON ships with one; the flag is ignored elsewhere.
      */
     lint?: boolean;
+    /**
+     * Suggestions while typing, and on Ctrl+Space: a list of words, or a function of the document
+     * and the caret — `mustacheCompletions(variables)` for a Mustache template.
+     */
+    completions?: CodeEditorCompletions;
+    /**
+     * Edits the document in every language the site publishes in, with a selector on the field;
+     * the model is then `{ en: '…', uk: '…' }`.
+     */
+    localized?: boolean;
     /** Extra CodeMirror extensions, for anything this component does not wrap. */
     extensions?: Extension[];
 }

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

@@ -33,9 +33,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    readonly: boolean;
-    format: string;
     locale: string | import('../..').DateFnsLocale;
+    format: string;
+    readonly: boolean;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -32,9 +32,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    readonly: boolean;
-    format: string;
     locale: string | import('../..').DateFnsLocale;
+    format: string;
+    readonly: boolean;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -31,9 +31,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    readonly: boolean;
-    format: string;
     locale: string | import('../..').DateFnsLocale;
+    format: string;
+    readonly: boolean;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;

package/dist/components/FileCard/FileCard.d.ts

@@ -97,10 +97,10 @@ declare function __VLS_template(): {
                 status: import('..').InputStatus;
                 id: string;
                 readonly: boolean;
+                localized: boolean;
                 autocomplete: string;
                 maxlength: number;
                 showCount: boolean;
-                localized: boolean;
                 tokens: import('../..').TokenOption[];
                 tokensTitle: string;
                 tokensLabel: string;
@@ -134,10 +134,10 @@ declare function __VLS_template(): {
             status: import('..').InputStatus;
             id: string;
             readonly: boolean;
+            localized: boolean;
             autocomplete: string;
             maxlength: number;
             showCount: boolean;
-            localized: boolean;
             tokens: import('../..').TokenOption[];
             tokensTitle: string;
             tokensLabel: string;
@@ -150,7 +150,7 @@ declare function __VLS_template(): {
             onClear?: (() => any) | undefined;
             onBlur?: ((event: FocusEvent) => any) | undefined;
             onFocus?: ((event: FocusEvent) => any) | undefined;
-        }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount" | "localized" | "tokens" | "tokensTitle" | "tokensLabel")> & {
+        }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "localized" | "autocomplete" | "maxlength" | "showCount" | "tokens" | "tokensTitle" | "tokensLabel")> & {
             focus: () => void | undefined;
             blur: () => void | undefined;
             select: () => void | undefined;
@@ -286,10 +286,10 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
             status: import('..').InputStatus;
             id: string;
             readonly: boolean;
+            localized: boolean;
             autocomplete: string;
             maxlength: number;
             showCount: boolean;
-            localized: boolean;
             tokens: import('../..').TokenOption[];
             tokensTitle: string;
             tokensLabel: string;
@@ -323,10 +323,10 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
         status: import('..').InputStatus;
         id: string;
         readonly: boolean;
+        localized: boolean;
         autocomplete: string;
         maxlength: number;
         showCount: boolean;
-        localized: boolean;
         tokens: import('../..').TokenOption[];
         tokensTitle: string;
         tokensLabel: string;
@@ -339,7 +339,7 @@ declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {},
         onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-    }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "autocomplete" | "maxlength" | "showCount" | "localized" | "tokens" | "tokensTitle" | "tokensLabel")> & {
+    }>, "input" | "select" | "blur" | "focus" | ("size" | "disabled" | "type" | "placeholder" | "ariaLabel" | "clearable" | "status" | "id" | "readonly" | "localized" | "autocomplete" | "maxlength" | "showCount" | "tokens" | "tokensTitle" | "tokensLabel")> & {
         focus: () => void | undefined;
         blur: () => void | undefined;
         select: () => void | undefined;

package/dist/components/Icon/icons.d.ts

@@ -65,6 +65,7 @@ export declare const builtinIcons: {
     readonly calendar: "<rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2.5\"/><path d=\"M3.5 10h17M8 3.5V7M16 3.5V7\"/>";
     readonly clock: "<circle cx=\"12\" cy=\"12\" r=\"8.5\"/><path d=\"M12 7.5V12l3 2\"/>";
     readonly mail: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2.5\"/><path d=\"m4 7.5 6.9 5a2 2 0 0 0 2.2 0l6.9-5\"/>";
+    readonly send: "<path d=\"M20.5 3.5 3.8 10.4a.6.6 0 0 0 0 1.1l6.3 2.4 2.4 6.3a.6.6 0 0 0 1.1 0Z\"/><path d=\"m10.1 13.9 4.6-4.6\"/>";
     readonly phone: "<path d=\"M7 3.5 9.5 4l1.2 3.4-1.9 1.6a11 11 0 0 0 5.2 5.2l1.6-1.9 3.4 1.2.5 2.5a2 2 0 0 1-2 2.3A15.5 15.5 0 0 1 4.7 5.5a2 2 0 0 1 2.3-2Z\"/>";
     readonly bell: "<path d=\"M7 10a5 5 0 0 1 10 0c0 4 1.5 5.5 1.5 5.5h-13S7 14 7 10Z\"/><path d=\"M10.2 18.5a2 2 0 0 0 3.6 0\"/>";
     readonly 'map-pin': "<path d=\"M12 21s6.5-6 6.5-10.5a6.5 6.5 0 0 0-13 0C5.5 15 12 21 12 21Z\"/><circle cx=\"12\" cy=\"10.3\" r=\"2.4\"/>";

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

@@ -32,8 +32,8 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
     disabled: boolean;
     footer: boolean;
     maxWidth: number;
-    maxHeight: number;
     format: "auto" | "image/jpeg" | "image/png" | "image/webp";
+    maxHeight: number;
     background: string;
     filters: boolean;
     resizable: boolean;

package/dist/components/Input/Input.d.ts

@@ -47,10 +47,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     status: import('./types').InputStatus;
     id: string;
     readonly: boolean;
+    localized: boolean;
     autocomplete: string;
     maxlength: number;
     showCount: boolean;
-    localized: boolean;
     tokens: TokenOption[];
     tokensTitle: string;
     tokensLabel: string;

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

@@ -31,6 +31,12 @@ export interface SortableListProps<T = unknown> {
     size?: SortableListSize;
     /** Drops the frame, for a list that already sits in a card. */
     plain?: boolean;
+    /**
+     * Tints the row under the pointer, and the row that holds the current item (`.is-current` or
+     * `aria-current` inside it), with the rules either side of a tinted row taken away — a tint
+     * cut by a line above and below reads as two rows.
+     */
+    hoverable?: boolean;
     /** Shown when there is nothing in the list. */
     emptyText?: string;
     /** What the grip is called, before the name of the row it holds. */

package/dist/components/Statistic/Statistic.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_component: import('vue').DefineComponent<StatisticProps, {},
     value: number | string;
     align: import('..').TextAlign;
     tone: import('..').TextTone;
-    precision: number;
     locale: string;
+    precision: number;
     grouping: boolean;
     prefix: string;
     suffix: string;

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

@@ -30,9 +30,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     id: string;
     resize: "none" | "vertical" | "both";
     readonly: boolean;
+    localized: boolean;
     maxlength: number;
     showCount: boolean;
-    localized: boolean;
     tokens: TokenOption[];
     tokensTitle: string;
     tokensLabel: string;

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

@@ -31,9 +31,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    readonly: boolean;
-    format: string;
     locale: string | import('../..').DateFnsLocale;
+    format: string;
+    readonly: boolean;
     valueFormat: string;
     minDate: string | Date;
     maxDate: string | Date;