@webx-ui/module-media 0.5.0 → 0.6.0

package/README.md

@@ -56,6 +56,23 @@ file** — one picture used by two articles needs two captions. The address is w
 `path` when the page is drawn, so the library can move to another disk without touching a single
 article.
 
+Four fields in all, which are also the four types a [described screen](https://webx-ui.github.io/webx-ui/guide/screens)
+may use — the server half registers the same names for storing them:
+
+| Export           | Screen type  | Value                | What it draws                    |
+| ---------------- | ------------ | -------------------- | -------------------------------- |
+| `WxMediaField`   | `wx-media`   | `MediaValue \| null` | one picture in a frame           |
+| `WxGalleryField` | `wx-gallery` | `MediaValue[]`       | a grid of thumbnails, in order   |
+| `WxFileField`    | `wx-file`    | `MediaValue \| null` | one file card: glyph, name, size |
+| `WxFilesField`   | `wx-files`   | `MediaValue[]`       | those cards a line each          |
+
+Three names rather than `wx-media` with `multiple`, because the type is what an author picks from
+a list: nobody picks "media with `multiple: true` and `accept: document`", they pick "Files".
+Underneath there is one component and one set of rules.
+
+`openMediaFiles({ accept: 'image', max: 10 })` is the dialog those lists open — the same library
+with multiple selection on, resolving with `MediaFile[]`.
+
 ## What it draws
 
 `WxMediaManager` is the section itself: a folder tree, a grid of cards with rubber-band

package/dist/FileField.d.ts

@@ -0,0 +1,10 @@
+import { MediaValue } from './types';
+type __VLS_PublicProps = {
+    modelValue?: MediaValue | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaValue | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaValue | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/FilesField.d.ts

@@ -0,0 +1,10 @@
+import { MediaValue } from './types';
+type __VLS_PublicProps = {
+    modelValue?: MediaValue[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaValue[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/GalleryField.d.ts

@@ -0,0 +1,10 @@
+import { MediaValue } from './types';
+type __VLS_PublicProps = {
+    modelValue?: MediaValue[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaValue[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/MediaList.d.ts

@@ -0,0 +1,51 @@
+import { MediaAspect, MediaKind, MediaValue } from './types';
+/**
+ * Several files on a form, in an order somebody chose.
+ *
+ * One component under `wx-gallery`, `wx-file` and `wx-files`: what differs between them is a
+ * layout and a limit, and everything else — picking, ordering, captions, the card of a file
+ * that is no longer there — is the same work. The three names exist for the person choosing a
+ * field type, not for the code.
+ *
+ * What is stored is `{ path, alt?, title? }` per item and the order they are in. Everything
+ * else on screen — the preview, the name, the size — is asked of the library on every read,
+ * because the address of a file is not a thing worth writing into a thousand records.
+ */
+type __VLS_Props = {
+    label?: string;
+    /** Cards side by side for pictures, a line each for documents. */
+    layout?: 'grid' | 'rows';
+    /** Narrow what the library offers. The server checks the same thing on the way in. */
+    accept?: MediaKind | null;
+    /** Off where a caption is noise — a row of logos, a set of downloads. */
+    captions?: boolean;
+    max?: number | null;
+    min?: number | null;
+    /** A fixed number of columns instead of as many as fit. */
+    columns?: number | null;
+    /** Shape of a thumbnail in the grid: a preset, or anything CSS reads as a ratio. */
+    aspect?: MediaAspect | null;
+    /** One file, kept as a list of one — what `wx-file` is. */
+    single?: boolean;
+    disabled?: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: MediaValue[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaValue[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: MediaValue[]) => any) | undefined;
+}>, {
+    label: string;
+    single: boolean;
+    disabled: boolean;
+    captions: boolean;
+    accept: MediaKind | null;
+    max: number | null;
+    layout: "grid" | "rows";
+    min: number | null;
+    columns: number | null;
+    aspect: MediaAspect | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/MediaManager.d.ts

@@ -14,14 +14,28 @@ type __VLS_Props = {
     picking?: boolean;
     /** Only these kinds can be chosen, when picking. */
     accept?: MediaKind | null;
+    /**
+     * A picker that takes several files at once.
+     *
+     * What this switches on is the selection the manager already has for its batch operations:
+     * the rubber band, the tap that toggles, the run held with shift. A picker with a way of
+     * marking files of its own would be a second thing to learn for the very same job.
+     */
+    multiple?: boolean;
+    /** The most that may be held at once, when picking several. */
+    max?: number | null;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     pick: (file: MediaFile) => any;
+    selection: (files: MediaFile[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onPick?: ((file: MediaFile) => any) | undefined;
+    onSelection?: ((files: MediaFile[]) => any) | undefined;
 }>, {
-    picking: boolean;
+    multiple: boolean;
     accept: MediaKind | null;
+    picking: boolean;
+    max: number | null;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: HTMLDivElement;
     picker: HTMLInputElement;

package/dist/MediaPicker.d.ts

@@ -10,10 +10,16 @@ type __VLS_Props = {
     title?: string;
     /** Opened to manage the library rather than to choose from it. */
     manage?: boolean;
+    /** Several files at once, handed back as a list. */
+    multiple?: boolean;
+    /** The most that may be chosen, when choosing several. */
+    max?: number | null;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     title: string;
+    multiple: boolean;
     accept: MediaKind | null;
+    max: number | null;
     manage: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/format.d.ts

@@ -0,0 +1,4 @@
+/** Bytes as somebody would say them: 32 MB, not 33 554 432. */
+export declare function readable(bytes: number): string;
+/** The file name out of a stored key, for a file the library can no longer be asked about. */
+export declare function nameFromPath(path: string): string;

package/dist/index.d.ts

@@ -14,9 +14,12 @@ export interface MediaOptions {
 export declare function media(options?: MediaOptions): AdminModule;
 export { mediaMessages };
 export { createMediaApi, type MediaApi } from './api';
-export { openMediaLibrary, openMediaPicker, type MediaPickerOptions } from './openMediaPicker';
+export { openMediaFiles, openMediaLibrary, openMediaPicker, type MediaFilesOptions, type MediaPickerOptions, } from './openMediaPicker';
 export { default as WxMediaManager } from './MediaManager';
 export { default as WxMediaPage } from './MediaPage';
 export { default as WxMediaPicker } from './MediaPicker';
 export { default as WxMediaField } from './MediaField';
+export { default as WxGalleryField } from './GalleryField';
+export { default as WxFileField } from './FileField';
+export { default as WxFilesField } from './FilesField';
 export type { DirectoryNotEmpty, EditOperations, FileQuery, MediaDirectory, MediaFile, MediaAspect, MediaKind, MediaPage, MediaValue, } from './types';