zabi-components 8.0.0 → 9.0.0

package/dist/molecules/PhotoGrid.svelte.d.ts

@@ -0,0 +1,73 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type Photo, type PhotoGridSelectDetail, type PhotoGridStrings, type PhotoKey } from "../util/photo.js";
+/**
+ * A grid of square photo thumbnails. A press on one tells you which, so
+ * you can open it in a `PhotoViewer`:
+ *
+ * ```svelte
+ * <PhotoGrid {photos} max={9} onopen={(at) => { index = at; open = true; }} onadd={pickFiles} />
+ * <PhotoViewer {photos} bind:index bind:isOpen={open} />
+ * ```
+ *
+ * With `selectable` a press selects instead, for choosing a cover photo
+ * (`single`) or photos to delete (`multiple`); each tile then has a small
+ * button of its own that opens it. In `single` a press on the selected
+ * photo changes nothing: the selection is never cleared by pressing it
+ * again.
+ *
+ * The grid is one Tab stop; the arrow keys move between the tiles.
+ *
+ * Other attributes (`id`, `data-*`, ...) land on the host `<div>`; the
+ * two ARIA names go to the list.
+ */
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "aria-label" | "aria-labelledby" | "onselect"> & {
+    photos: Photo[];
+    /**
+     * How many columns. Left out, it follows the width of the grid: 3
+     * under 480px, 4 from there and 5 from 768px.
+     */
+    columns?: number;
+    /**
+     * Shows no more than this many photos. The last tile then says how
+     * many more there are ("+12") and opens the viewer at its photo.
+     */
+    max?: number;
+    /** Called with the photo's place in `photos` when one is opened. */
+    onopen?: (index: number) => void;
+    /**
+     * Makes a press select: `single` for one photo, `multiple` for any
+     * number, with a check mark on each selected tile.
+     */
+    selectable?: "single" | "multiple";
+    /** Key of the selected photo, or `null`; supports `bind:selected`. Used with `selectable="single"`. */
+    selected?: PhotoKey | null;
+    /** Keys of the selected photos; supports `bind:selectedKeys`. Used with `selectable="multiple"`. */
+    selectedKeys?: PhotoKey[];
+    /** Called when a photo is selected or, in `multiple`, its selection is cleared. */
+    onselect?: (detail: PhotoGridSelectDetail) => void;
+    /**
+     * Puts an "Add photo" tile first and is called when it is pressed.
+     * Open your own file picker or an ImageUpload from it.
+     */
+    onadd?: () => void;
+    /**
+     * Called once when a thumbnail cannot be loaded, so the page can answer
+     * with a new address (a signed one that has run out). A new `thumbSrc`
+     * or `src` for the same photo is tried at once.
+     */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /**
+     * Puts a "Try again" button on each photo whose `status` is `error`
+     * and is called when it is pressed.
+     */
+    onretry?: (photo: Photo, index: number) => void;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<PhotoGridStrings>;
+    /** Extra classes for the host element. */
+    class?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+declare const PhotoGrid: import("svelte").Component<Props, {}, "selected" | "selectedKeys">;
+type PhotoGrid = ReturnType<typeof PhotoGrid>;
+export default PhotoGrid;