@webx-ui/core 0.35.0 → 0.36.0

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

@@ -17,6 +17,9 @@ export declare const builtinIcons: {
     readonly trash: "<path d=\"M4 7h16M10 7V5.5A1.5 1.5 0 0 1 11.5 4h1A1.5 1.5 0 0 1 14 5.5V7M6.5 7l.8 11.6a2 2 0 0 0 2 1.9h5.4a2 2 0 0 0 2-1.9L17.5 7\"/><path d=\"M10 11v5.5M14 11v5.5\"/>";
     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 'zoom-in': "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5M8.5 11h5M11 8.5v5\"/>";
+    readonly 'zoom-out': "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5M8.5 11h5\"/>";
+    readonly play: "<path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.6-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\"/>";
     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=\"M4.5 9.5A8 8 0 1 1 4 13.5\"/><path d=\"M9.5 9.5h-5v-5\"/>";

package/dist/components/Image/Image.d.ts

@@ -12,7 +12,9 @@ declare function __VLS_template(): {
         /** Shown instead of a picture that will not load. */
         error?: () => unknown;
     };
-    refs: {};
+    refs: {
+        root: HTMLDivElement;
+    };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -32,8 +34,12 @@ declare const __VLS_component: import('vue').DefineComponent<ImageProps, {}, {},
     lazy: boolean;
     preview: boolean;
     radius: number | string;
+    previewList: import('..').LightboxSource[];
+    previewStart: number;
     previewLabel: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,3 +1,4 @@
+import { LightboxSource } from '../Lightbox/types';
 export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface ImageProps {
     src?: string;
@@ -15,8 +16,15 @@ export interface ImageProps {
     lazy?: boolean;
     /** A tiny picture — or a colour — shown while the real one arrives. */
     placeholder?: string;
-    /** Opens the picture full size when it is clicked. */
+    /**
+     * Opens the picture full size, in a lightbox, when it is clicked. Inside a `WxImageGroup`
+     * the lightbox is the whole group's.
+     */
     preview?: boolean;
+    /** What the lightbox shows instead of this one picture: the cover of a gallery opens all of it. */
+    previewList?: LightboxSource[];
+    /** The item of `previewList` to open on. Default: the one whose address is `src`, or the first. */
+    previewStart?: number;
     /** Accessible name of the button that opens the preview. */
     previewLabel?: string;
 }

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

@@ -38,6 +38,7 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
     filters: boolean;
     resizable: boolean;
     minSize: number;
+    originalLabel: string;
     saveLabel: string;
     cancelLabel: string;
     ratio: ImageEditorRatio;
@@ -65,7 +66,6 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
     saturationLabel: string;
     monoLabel: string;
     freeLabel: string;
-    originalLabel: string;
     errorText: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     stage: HTMLDivElement;

package/dist/components/ImageGroup/ImageGroup.d.ts

@@ -0,0 +1,20 @@
+import { ImageGroupProps } from './types';
+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<ImageGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ImageGroupProps> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, 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/ImageGroup/index.d.ts

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

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

@@ -0,0 +1,8 @@
+/**
+ * `WxImageGroup`'s own props. Everything else — `loop`, `thumbnails`, the labels — goes to
+ * the lightbox it opens, except `class` and `style`, which stay on the group's element.
+ */
+export interface ImageGroupProps {
+    /** The element the group renders as. */
+    tag?: string;
+}

package/dist/components/Lightbox/Lightbox.d.ts

@@ -0,0 +1,35 @@
+import { LightboxProps } from './types';
+type __VLS_Props = LightboxProps;
+type __VLS_PublicProps = {
+    'open'?: boolean;
+    'index'?: number;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (index: number) => any;
+    "update:open": (value: boolean) => any;
+    "update:index": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((index: number) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:index"?: ((value: number) => any) | undefined;
+}>, {
+    ariaLabel: string;
+    closeLabel: string;
+    loop: boolean;
+    thumbnails: boolean;
+    maxZoom: number;
+    original: boolean;
+    prevLabel: string;
+    nextLabel: string;
+    zoomInLabel: string;
+    zoomOutLabel: string;
+    originalLabel: string;
+    playLabel: string;
+    counterText: string | ((index: number, total: number) => string);
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+    stage: HTMLDivElement;
+    picture: HTMLImageElement;
+    thumbs: HTMLDivElement;
+}, any>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as WxLightbox } from './Lightbox';
+export { youTubeId } from './items';
+export type * from './types';

package/dist/components/Lightbox/items.d.ts

@@ -0,0 +1,22 @@
+import { LightboxSource } from './types';
+/** What the lightbox plays: a file in a `<video>`, or an address in an `<iframe>`. */
+export type ResolvedVideo = {
+    kind: 'file';
+    src: string;
+} | {
+    kind: 'embed';
+    src: string;
+};
+/** An item with every default filled in, so the template asks no questions. */
+export interface ResolvedItem {
+    src: string;
+    alt: string;
+    caption: string;
+    thumb: string;
+    original: string | undefined;
+    video: ResolvedVideo | undefined;
+}
+/** The id of a YouTube video in any form of its address — watch, short link, shorts, embed — or `null`. */
+export declare function youTubeId(address: string): string | null;
+export declare function resolveItem(source: LightboxSource): ResolvedItem;
+export declare function counter(text: string | ((index: number, total: number) => string), index: number, total: number): string;

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

@@ -0,0 +1,60 @@
+/**
+ * A video on a gallery item. The item's own picture is its poster, and nothing is fetched
+ * from the video's host until somebody presses play.
+ */
+export interface LightboxVideo {
+    /** A file the browser plays itself — MP4 or WebM. */
+    src?: string;
+    /** An address for an iframe: a YouTube embed, or anything else that plays in one. Wins over `src`. */
+    embed?: string;
+}
+export interface LightboxItem {
+    /** The picture shown — and, when there is a `video`, its poster. */
+    src?: string;
+    /** Alternative text, and the caption when there is no `caption`. */
+    alt?: string;
+    /** Text under the picture. */
+    caption?: string;
+    /** Where "Open the original" goes: a bigger file than the one shown. Default: `src`. */
+    original?: string;
+    /** A small version, for the strip and for the moment before `src` arrives. Default: `src`. */
+    thumb?: string;
+    /**
+     * Makes the item a video. A string is a YouTube link (any of its forms) or a file;
+     * an object says which it is.
+     */
+    video?: string | LightboxVideo;
+}
+/** An item, or just the address of a picture. */
+export type LightboxSource = string | LightboxItem;
+export interface LightboxProps {
+    items: LightboxSource[];
+    /** Going past the last item comes back to the first. */
+    loop?: boolean;
+    /** A strip of thumbnails along the bottom. Default: on when there is more than one item. */
+    thumbnails?: boolean;
+    /** How far a picture can be enlarged, as a multiple of its size on screen. */
+    maxZoom?: number;
+    /** The "Open the original" link. */
+    original?: boolean;
+    /** Accessible name of the gallery. */
+    ariaLabel?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    closeLabel?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    originalLabel?: string;
+    playLabel?: string;
+    /** `{index}` and `{total}` are replaced; a function is given both. */
+    counterText?: string | ((index: number, total: number) => string);
+}
+export interface LightboxEmits {
+    /** The item on screen changed — by an arrow, a key, a swipe or a thumbnail. */
+    change: [index: number];
+}
+/** What `openLightbox` takes besides the items. */
+export interface OpenLightboxOptions extends Omit<LightboxProps, 'items'> {
+    /** The item to open on. */
+    start?: number;
+}

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

@@ -29,8 +29,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     size: import('../..').ControlSize;
     disabled: boolean;
     ariaLabel: string;
-    paginator: import('..').Paginated<unknown> | null;
     total: number;
+    paginator: import('..').Paginated<unknown> | null;
     lastPage: number;
     siblings: number;
     perPageOptions: number[];

package/dist/components/index.d.ts

@@ -46,10 +46,12 @@ export * from './Icon';
 export * from './IconPicker';
 export * from './Image';
 export * from './ImageEditor';
+export * from './ImageGroup';
 export * from './Indicator';
 export * from './Input';
 export * from './InputNumber';
 export * from './Kanban';
+export * from './Lightbox';
 export * from './Link';
 export * from './Locales';
 export * from './ListDetail';

package/dist/composables/lightbox.d.ts

@@ -0,0 +1,14 @@
+import { ModalOptions, ModalPromise } from './useModal';
+import { LightboxSource, OpenLightboxOptions } from '../components/Lightbox/types';
+/**
+ * Opens a gallery over the page, from anywhere:
+ *
+ * ```ts
+ * openLightbox(product.images, 2)
+ * openLightbox(['/a.jpg', '/b.jpg'], { start: 1, loop: true })
+ * ```
+ *
+ * It answers nothing — the promise settles, with `undefined`, when the lightbox is closed —
+ * and carries `close()` for a gallery that should not outlive something else.
+ */
+export declare function openLightbox(items: LightboxSource[], options?: number | OpenLightboxOptions, modal?: ModalOptions): ModalPromise<void>;

package/dist/composables/useImageGroup.d.ts

@@ -0,0 +1,16 @@
+import { InjectionKey } from 'vue';
+import { LightboxItem } from '../components/Lightbox/types';
+/** One picture in a group: where it is on the page, and what it opens as. */
+export interface ImageGroupEntry {
+    el: () => Element | null;
+    item: () => LightboxItem;
+}
+export interface ImageGroupContext {
+    /** Joins the group; the answer leaves it. */
+    register: (entry: ImageGroupEntry) => () => void;
+    /** Opens the group's lightbox on this picture. */
+    open: (entry: ImageGroupEntry) => void;
+}
+export declare const imageGroupKey: InjectionKey<ImageGroupContext>;
+/** The `WxImageGroup` around this component, if there is one. */
+export declare function useImageGroup(): ImageGroupContext | null;

package/dist/index.d.ts

@@ -11,4 +11,6 @@ export { useToast, toast, toastQueue, dismissToast, removeToast, clearToasts, ty
 export { openModal, createModal, useModal, connectModals, modalKey, type ModalHandle, type ModalOptions, type ModalPromise, } from './composables/useModal';
 export { confirm, type ConfirmOptions } from './composables/confirm';
 export { openImageEditor } from './composables/imageEditor';
+export { openLightbox } from './composables/lightbox';
+export { useImageGroup, imageGroupKey, type ImageGroupContext, type ImageGroupEntry, } from './composables/useImageGroup';
 export { useResponsiveShell, shellLayoutFor, type ResponsiveShell, type ResponsiveShellOptions, type ShellLayout, } from './composables/useResponsiveShell';