@webx-ui/core 0.11.0 → 0.13.0

package/dist/components/Actions/Actions.d.ts

@@ -1,10 +1,14 @@
 import { ActionsProps } from './types';
+type __VLS_Props = ActionsProps;
 /**
  * The row is measured against the space its container gives it. When it collapses
  * the row is not unmounted, only taken out of the flow — it keeps its natural width,
  * which is the only way to know when there is room for it again.
  */
 declare function measure(): void;
+type __VLS_PublicProps = {
+    'menuOpen'?: boolean;
+} & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -20,13 +24,15 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ActionsProps, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
     collapsed: import('vue').Ref<boolean, boolean>;
     measure: typeof measure;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     collapse: (collapsed: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<ActionsProps> & Readonly<{
+    "update:menuOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onCollapse?: ((collapsed: boolean) => any) | undefined;
+    "onUpdate:menuOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     size: import('..').ActionSize;
     align: import('./types').ActionsAlign;

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

@@ -0,0 +1,322 @@
+import { nextTick } from 'vue';
+import { FileCardProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The whole preview box — a video still, a player, whatever the file really needs. */
+        preview?: (props: {
+            picture: boolean;
+        }) => unknown;
+        /** Actions of your own, after the ones the card offers. */
+        actions?: () => unknown;
+        /** Under the name: a size, a date, dimensions. */
+        meta?: () => unknown;
+    }> & {
+        /** The whole preview box — a video still, a player, whatever the file really needs. */
+        preview?: (props: {
+            picture: boolean;
+        }) => unknown;
+        /** Actions of your own, after the ones the card offers. */
+        actions?: () => unknown;
+        /** Under the name: a size, a date, dimensions. */
+        meta?: () => unknown;
+    };
+    refs: {
+        field: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly modelValue?: import('..').InputModelValue;
+                readonly id?: string | undefined;
+                readonly type?: import('..').InputNativeType | undefined;
+                readonly size?: import('..').InputSize | undefined;
+                readonly status?: import('..').InputStatus | undefined;
+                readonly placeholder?: string | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly readonly?: boolean | undefined;
+                readonly clearable?: boolean | undefined;
+                readonly maxlength?: number | undefined;
+                readonly showCount?: boolean | undefined;
+                readonly autocomplete?: string | undefined;
+                readonly ariaLabel?: string | undefined;
+                readonly onChange?: ((value: string) => any) | undefined;
+                readonly "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+                readonly onInput?: ((value: string) => any) | undefined;
+                readonly onClear?: (() => any) | undefined;
+                readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+                readonly onFocus?: ((event: FocusEvent) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                inputRef: HTMLInputElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "change", value: string) => void) & ((event: "update:modelValue", value: import('..').InputModelValue) => void) & ((event: "input", value: string) => void) & ((event: "clear") => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "focus", event: FocusEvent) => void);
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                modelValue?: import('..').InputModelValue;
+            } & import('..').InputProps> & Readonly<{
+                onChange?: ((value: string) => any) | undefined;
+                "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+                onInput?: ((value: string) => any) | undefined;
+                onClear?: (() => any) | undefined;
+                onBlur?: ((event: FocusEvent) => any) | undefined;
+                onFocus?: ((event: FocusEvent) => any) | undefined;
+            }>, {
+                focus: () => void | undefined;
+                blur: () => void | undefined;
+                select: () => void | undefined;
+                input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                change: (value: string) => any;
+                "update:modelValue": (value: import('..').InputModelValue) => any;
+                input: (value: string) => any;
+                clear: () => any;
+                blur: (event: FocusEvent) => any;
+                focus: (event: FocusEvent) => any;
+            }, string, {
+                size: import('..').InputSize;
+                disabled: boolean;
+                type: import('..').InputNativeType;
+                placeholder: string;
+                ariaLabel: string;
+                clearable: boolean;
+                status: import('..').InputStatus;
+                id: string;
+                readonly: boolean;
+                autocomplete: string;
+                maxlength: number;
+                showCount: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            size: import('..').InputSize;
+            disabled: boolean;
+            type: import('..').InputNativeType;
+            placeholder: string;
+            ariaLabel: string;
+            clearable: boolean;
+            status: import('..').InputStatus;
+            id: string;
+            readonly: boolean;
+            autocomplete: string;
+            maxlength: number;
+            showCount: boolean;
+        }> & Omit<Readonly<{
+            modelValue?: import('..').InputModelValue;
+        } & import('..').InputProps> & Readonly<{
+            onChange?: ((value: string) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+            onInput?: ((value: string) => any) | undefined;
+            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")> & {
+            focus: () => void | undefined;
+            blur: () => void | undefined;
+            select: () => void | undefined;
+            input: HTMLInputElement | null;
+        } & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                prefix?(_: {}): any;
+                suffix?(_: {}): any;
+            };
+        }) | null;
+        label: HTMLSpanElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FileCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    edit: () => any;
+    copy: (url: string) => any;
+    remove: () => any;
+    rename: (name: string) => any;
+    "copy-error": (error: unknown) => any;
+}, string, import('vue').PublicProps, Readonly<FileCardProps> & Readonly<{
+    onEdit?: (() => any) | undefined;
+    onCopy?: ((url: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onRename?: ((name: string) => any) | undefined;
+    "onCopy-error"?: ((error: unknown) => any) | undefined;
+}>, {
+    size: import('./types').FileCardSize;
+    disabled: boolean;
+    type: string;
+    icon: import('..').IconName;
+    url: string;
+    selected: boolean;
+    thumbnail: string;
+    renamable: boolean;
+    editable: boolean;
+    removable: boolean;
+    confirmRemove: boolean;
+    copyable: boolean;
+    renameLabel: string;
+    saveLabel: string;
+    cancelLabel: string;
+    editLabel: string;
+    removeLabel: string;
+    removeConfirmText: string;
+    copyLabel: string;
+    copiedLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    field: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly modelValue?: import('..').InputModelValue;
+            readonly id?: string | undefined;
+            readonly type?: import('..').InputNativeType | undefined;
+            readonly size?: import('..').InputSize | undefined;
+            readonly status?: import('..').InputStatus | undefined;
+            readonly placeholder?: string | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly readonly?: boolean | undefined;
+            readonly clearable?: boolean | undefined;
+            readonly maxlength?: number | undefined;
+            readonly showCount?: boolean | undefined;
+            readonly autocomplete?: string | undefined;
+            readonly ariaLabel?: string | undefined;
+            readonly onChange?: ((value: string) => any) | undefined;
+            readonly "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+            readonly onInput?: ((value: string) => any) | undefined;
+            readonly onClear?: (() => any) | undefined;
+            readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+            readonly onFocus?: ((event: FocusEvent) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            inputRef: HTMLInputElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "change", value: string) => void) & ((event: "update:modelValue", value: import('..').InputModelValue) => void) & ((event: "input", value: string) => void) & ((event: "clear") => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "focus", event: FocusEvent) => void);
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            modelValue?: import('..').InputModelValue;
+        } & import('..').InputProps> & Readonly<{
+            onChange?: ((value: string) => any) | undefined;
+            "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+            onInput?: ((value: string) => any) | undefined;
+            onClear?: (() => any) | undefined;
+            onBlur?: ((event: FocusEvent) => any) | undefined;
+            onFocus?: ((event: FocusEvent) => any) | undefined;
+        }>, {
+            focus: () => void | undefined;
+            blur: () => void | undefined;
+            select: () => void | undefined;
+            input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            change: (value: string) => any;
+            "update:modelValue": (value: import('..').InputModelValue) => any;
+            input: (value: string) => any;
+            clear: () => any;
+            blur: (event: FocusEvent) => any;
+            focus: (event: FocusEvent) => any;
+        }, string, {
+            size: import('..').InputSize;
+            disabled: boolean;
+            type: import('..').InputNativeType;
+            placeholder: string;
+            ariaLabel: string;
+            clearable: boolean;
+            status: import('..').InputStatus;
+            id: string;
+            readonly: boolean;
+            autocomplete: string;
+            maxlength: number;
+            showCount: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        size: import('..').InputSize;
+        disabled: boolean;
+        type: import('..').InputNativeType;
+        placeholder: string;
+        ariaLabel: string;
+        clearable: boolean;
+        status: import('..').InputStatus;
+        id: string;
+        readonly: boolean;
+        autocomplete: string;
+        maxlength: number;
+        showCount: boolean;
+    }> & Omit<Readonly<{
+        modelValue?: import('..').InputModelValue;
+    } & import('..').InputProps> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import('..').InputModelValue) => any) | undefined;
+        onInput?: ((value: string) => any) | undefined;
+        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")> & {
+        focus: () => void | undefined;
+        blur: () => void | undefined;
+        select: () => void | undefined;
+        input: HTMLInputElement | null;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            prefix?(_: {}): any;
+            suffix?(_: {}): any;
+        };
+    }) | null;
+    label: HTMLSpanElement;
+}, HTMLDivElement>;
+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/FileCard/files.d.ts

@@ -0,0 +1,22 @@
+import { IconName } from '../Icon/types';
+/**
+ * The extension of a file name, lower case and without the dot. A URL is accepted too:
+ * the query and the fragment are cut off first, because `photo.jpg?v=2` is a JPEG.
+ */
+export declare function extensionOf(name: string): string;
+/**
+ * Whether the file is a picture, and so has a preview rather than a glyph.
+ *
+ * The MIME type is asked first because it is the one that knows: an extension is a
+ * guess a file name makes about itself. `image/*` minus the formats no browser draws —
+ * a TIFF is an image and still renders as a broken picture.
+ */
+export declare function isPicture(name: string, type?: string): boolean;
+/**
+ * The icon for a file, by extension.
+ *
+ * The registry is what answers, not a list kept here, so `registerIcons({ 'file-dwg': … })`
+ * in an application is all it takes for a `.dwg` to have its own drawing — no release of
+ * this library, and nothing to pass per card.
+ */
+export declare function fileIconName(name: string): IconName;

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

@@ -0,0 +1,3 @@
+export { default as WxFileCard } from './FileCard';
+export { extensionOf, fileIconName, isPicture } from './files';
+export type * from './types';

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

@@ -0,0 +1,64 @@
+import { IconName } from '../Icon/types';
+export type FileCardSize = 'sm' | 'md' | 'lg';
+export interface FileCardProps {
+    /** The file name, extension and all. It is what the card shows and what it renames. */
+    name: string;
+    /**
+     * Where the file is. The copy action puts this on the clipboard, and a picture with
+     * no `thumbnail` of its own is drawn from it.
+     */
+    url?: string;
+    /** A smaller picture to draw instead of `url` — the one the backend already made. */
+    thumbnail?: string;
+    /**
+     * MIME type. It decides picture or glyph; without it the extension decides, which is
+     * right often enough and wrong for a `.bin` that happens to be a JPEG.
+     */
+    type?: string;
+    /** Icon to draw instead of the one the extension picks. */
+    icon?: IconName;
+    /** Draws the card as chosen. The choosing itself belongs to whatever holds the cards. */
+    selected?: boolean;
+    size?: FileCardSize;
+    /** Nothing can be done to the file: every action goes, and the name cannot be edited. */
+    disabled?: boolean;
+    /** Offers renaming. The card edits the name in place and reports the new one. */
+    renamable?: boolean;
+    /**
+     * Offers the edit action, which says "open this picture in an editor" and nothing
+     * more — the editing itself is somebody else's component. Pictures only: there is
+     * nothing to open for a `.zip`.
+     */
+    editable?: boolean;
+    removable?: boolean;
+    /**
+     * Asks before deleting. On, because a file deleted from a grid of thumbnails is a file
+     * deleted by a misplaced click. Off where the screen asks its own question, or where
+     * the deletion is undoable.
+     */
+    confirmRemove?: boolean;
+    /** Offers copying `url` to the clipboard. */
+    copyable?: boolean;
+    renameLabel?: string;
+    /** The two buttons under the field renaming opens. */
+    saveLabel?: string;
+    cancelLabel?: string;
+    editLabel?: string;
+    removeLabel?: string;
+    /** The question `confirmRemove` asks. The file name is worth putting in it. */
+    removeConfirmText?: string;
+    copyLabel?: string;
+    /** Shown on the copy action for a moment after it worked. */
+    copiedLabel?: string;
+}
+export interface FileCardEmits {
+    /** A new name was committed. The file is not renamed until the caller says so. */
+    rename: [name: string];
+    /** Open this picture in an editor. */
+    edit: [];
+    remove: [];
+    /** The URL reached the clipboard. */
+    copy: [url: string];
+    /** It did not — no clipboard, or permission refused. */
+    'copy-error': [error: unknown];
+}

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

@@ -18,6 +18,11 @@ export declare const builtinIcons: {
     readonly copy: "<rect x=\"8.5\" y=\"8.5\" width=\"11\" height=\"11\" rx=\"2.2\"/><path d=\"M15.5 8.5v-2a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2\"/>";
     readonly search: "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/>";
     readonly filter: "<path d=\"M4 5.5h16l-6.2 7.2v5.1l-3.6 2v-7.1z\"/>";
+    readonly crop: "<path d=\"M6.5 2.5v13a2 2 0 0 0 2 2h13\"/><path d=\"M2.5 6.5h13a2 2 0 0 1 2 2v13\"/>";
+    readonly 'rotate-left': "<path d=\"M19.4 13.8A7.5 7.5 0 1 0 12 5\"/><path d=\"M14.3 2.9 12 5l2.3 2.1\"/>";
+    readonly 'rotate-right': "<path d=\"M4.6 13.8A7.5 7.5 0 1 1 12 5\"/><path d=\"M9.7 2.9 12 5l-2.3 2.1\"/>";
+    readonly 'flip-horizontal': "<path d=\"M12 3v18\" stroke-dasharray=\"3 3\"/><path d=\"M9.2 7.2v9.6L3.6 12z\"/><path d=\"M14.8 7.2v9.6L20.4 12z\"/>";
+    readonly 'flip-vertical': "<path d=\"M3 12h18\" stroke-dasharray=\"3 3\"/><path d=\"M7.2 9.2h9.6L12 3.6z\"/><path d=\"M7.2 14.8h9.6L12 20.4z\"/>";
     readonly refresh: "<path d=\"M4 12a8 8 0 0 1 13.7-5.6L20 8.5\"/><path d=\"M20 4.5v4h-4\"/><path d=\"M20 12a8 8 0 0 1-13.7 5.6L4 15.5\"/><path d=\"M4 19.5v-4h4\"/>";
     readonly upload: "<path d=\"M12 16V4m0 0-4.5 4.5M12 4l4.5 4.5\"/><path d=\"M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15\"/>";
     readonly download: "<path d=\"M12 4v12m0 0-4.5-4.5M12 16l4.5-4.5\"/><path d=\"M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15\"/>";
@@ -66,6 +71,81 @@ export declare const builtinIcons: {
     readonly warning: "<path d=\"M10.3 4.9a2 2 0 0 1 3.4 0l7 12.1a2 2 0 0 1-1.7 3H5a2 2 0 0 1-1.7-3z\"/><path d=\"M12 9.5v4\"/><circle cx=\"12\" cy=\"16.6\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>";
     readonly question: "<circle cx=\"12\" cy=\"12\" r=\"8.5\"/><path d=\"M9.6 9.4a2.5 2.5 0 0 1 4.9.6c0 1.7-2.5 2-2.5 3.5\"/><circle cx=\"12\" cy=\"16.6\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>";
     readonly loader: "<path d=\"M12 3.5v4M12 16.5v4M3.5 12h4M16.5 12h4M6 6l2.8 2.8M15.2 15.2 18 18M18 6l-2.8 2.8M8.8 15.2 6 18\"/>";
+    readonly 'file-generic': "<path d=\"M13.5 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9zm0 0V9H19\"/>";
+    readonly 'file-txt': string;
+    readonly 'file-md': string;
+    readonly 'file-rtf': string;
+    readonly 'file-doc': string;
+    readonly 'file-docx': string;
+    readonly 'file-odt': string;
+    readonly 'file-pages': string;
+    readonly 'file-csv': string;
+    readonly 'file-xls': string;
+    readonly 'file-xlsx': string;
+    readonly 'file-ods': string;
+    readonly 'file-numbers': string;
+    readonly 'file-ppt': string;
+    readonly 'file-pptx': string;
+    readonly 'file-odp': string;
+    readonly 'file-key': string;
+    readonly 'file-pdf': string;
+    readonly 'file-zip': string;
+    readonly 'file-rar': string;
+    readonly 'file-7z': string;
+    readonly 'file-tar': string;
+    readonly 'file-gz': string;
+    readonly 'file-bz2': string;
+    readonly 'file-mp3': string;
+    readonly 'file-wav': string;
+    readonly 'file-ogg': string;
+    readonly 'file-flac': string;
+    readonly 'file-aac': string;
+    readonly 'file-m4a': string;
+    readonly 'file-mp4': string;
+    readonly 'file-mov': string;
+    readonly 'file-avi': string;
+    readonly 'file-webm': string;
+    readonly 'file-mkv': string;
+    readonly 'file-m4v': string;
+    readonly 'file-jpg': string;
+    readonly 'file-jpeg': string;
+    readonly 'file-png': string;
+    readonly 'file-gif': string;
+    readonly 'file-webp': string;
+    readonly 'file-avif': string;
+    readonly 'file-bmp': string;
+    readonly 'file-tiff': string;
+    readonly 'file-ico': string;
+    readonly 'file-svg': string;
+    readonly 'file-ai': string;
+    readonly 'file-eps': string;
+    readonly 'file-psd': string;
+    readonly 'file-xcf': string;
+    readonly 'file-fig': string;
+    readonly 'file-sketch': string;
+    readonly 'file-js': string;
+    readonly 'file-ts': string;
+    readonly 'file-jsx': string;
+    readonly 'file-tsx': string;
+    readonly 'file-vue': string;
+    readonly 'file-json': string;
+    readonly 'file-xml': string;
+    readonly 'file-yml': string;
+    readonly 'file-yaml': string;
+    readonly 'file-html': string;
+    readonly 'file-css': string;
+    readonly 'file-scss': string;
+    readonly 'file-php': string;
+    readonly 'file-py': string;
+    readonly 'file-rb': string;
+    readonly 'file-go': string;
+    readonly 'file-java': string;
+    readonly 'file-sh': string;
+    readonly 'file-sql': string;
+    readonly 'file-ttf': string;
+    readonly 'file-otf': string;
+    readonly 'file-woff': string;
+    readonly 'file-woff2': string;
 };
 /** Every name the library ships with. */
 export type BuiltinIconName = keyof typeof builtinIcons;

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

@@ -0,0 +1,67 @@
+import { ImageEditorCrop, ImageEditorProps, ImageEditorRatio, ImageEditorRatioOption, ImageEditorResult } from './types';
+/**
+ * Draws the result and hands it over. Exposed, so a page with a footer of its own can
+ * ask for it without the editor carrying one.
+ */
+declare function apply(): Promise<ImageEditorResult | undefined>;
+declare const _default: import('vue').DefineComponent<ImageEditorProps, {
+    /** Draws the result, emits `save` and answers with it. */
+    apply: typeof apply;
+    /** Back to the whole picture, the right way up. */
+    reset: () => void;
+    crop: import('vue').ComputedRef<ImageEditorCrop>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    crop: (crop: ImageEditorCrop) => any;
+    error: (error: unknown) => any;
+    cancel: () => any;
+    load: (size: {
+        width: number;
+        height: number;
+    }) => any;
+    save: (result: ImageEditorResult) => any;
+}, string, import('vue').PublicProps, Readonly<ImageEditorProps> & Readonly<{
+    onCrop?: ((crop: ImageEditorCrop) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onLoad?: ((size: {
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    onSave?: ((result: ImageEditorResult) => any) | undefined;
+}>, {
+    disabled: boolean;
+    footer: boolean;
+    background: string;
+    format: "auto" | "image/jpeg" | "image/png" | "image/webp";
+    resizable: boolean;
+    minSize: number;
+    maxWidth: number;
+    saveLabel: string;
+    cancelLabel: string;
+    ratio: ImageEditorRatio;
+    fileName: string;
+    aspect: number;
+    ratios: (ImageEditorRatio | ImageEditorRatioOption)[];
+    rotatable: boolean;
+    flippable: boolean;
+    maxHeight: number;
+    quality: number;
+    crossOrigin: "anonymous" | "use-credentials" | "";
+    resetLabel: string;
+    rotateLeftLabel: string;
+    rotateRightLabel: string;
+    flipHorizontalLabel: string;
+    flipVerticalLabel: string;
+    ratioLabel: string;
+    cropLabel: string;
+    widthLabel: string;
+    freeLabel: string;
+    originalLabel: string;
+    errorText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    stage: HTMLDivElement;
+    frame: HTMLDivElement;
+    image: HTMLImageElement;
+    cropBox: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,46 @@
+import { ImageEditorCrop } from './types';
+/** The eight grips, named after the compass the way every editor names them. */
+export type CropHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
+export interface CropBounds {
+    width: number;
+    height: number;
+}
+export declare function clamp(value: number, min: number, max: number): number;
+/** `1.7778` → `16:9`. Falls back to a decimal for a ratio that is nobody's convention. */
+export declare function ratioLabelFor(value: number): string;
+/** The whole picture, or the largest rectangle of `ratio` in the middle of it. */
+export declare function fullCrop(bounds: CropBounds, ratio?: number): ImageEditorCrop;
+/**
+ * The largest rectangle of `ratio` that fits inside `crop`, kept where `crop` was — used
+ * when the ratio changes and when a turn leaves the old crop the wrong shape.
+ */
+export declare function fitRatio(crop: ImageEditorCrop, ratio: number, bounds: CropBounds): ImageEditorCrop;
+/** Dragged from inside: the crop slides, and stops at the edges of the picture. */
+export declare function moveCrop(start: ImageEditorCrop, dx: number, dy: number, bounds: CropBounds): ImageEditorCrop;
+/**
+ * Dragged by a grip.
+ *
+ * The opposite corner — or the opposite edge, for the four in the middle — is the anchor
+ * and does not move; everything else follows the pointer. With a ratio the rectangle is
+ * brought back to that ratio before it is fitted inside the picture, so a locked crop
+ * cannot be nudged out of shape by dragging it into a corner.
+ */
+export declare function resizeCrop(handle: CropHandle, point: {
+    x: number;
+    y: number;
+}, start: ImageEditorCrop, bounds: CropBounds, { ratio, min }?: {
+    ratio?: number;
+    min?: number;
+}): ImageEditorCrop;
+/**
+ * The crop follows the picture through a quarter turn, so what was framed stays framed.
+ * `bounds` is the space *before* the turn; the space after it has its sides swapped.
+ */
+export declare function turnCrop(crop: ImageEditorCrop, bounds: CropBounds, direction: 1 | -1): ImageEditorCrop;
+/** The same, for a mirroring. */
+export declare function mirrorCrop(crop: ImageEditorCrop, bounds: CropBounds, axis: 'x' | 'y'): ImageEditorCrop;
+/** The largest whole-pixel size of the same shape that fits within the caps. */
+export declare function fitInside(width: number, height: number, maxWidth?: number, maxHeight?: number): {
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,3 @@
+export { default as WxImageEditor } from './ImageEditor';
+export { ratioLabelFor } from './crop';
+export type * from './types';