@webx-ui/module-catalog 0.3.0 → 0.4.0

package/dist/module.d.ts

@@ -16,7 +16,8 @@ export interface CatalogOptions {
  * group, beside the satellites (brands, stock, labels). «Deleted» is reached from the head of the
  * products: it holds categories too, but it is visited rarely, and by whoever may delete.
  *
- * The three node types are what only this module can draw on its two screens: a category picker
- * that knows the tree, the «Filters» tab of a category (§6.2), and the gallery.
+ * The node types are what only this module can draw: a category picker that knows the tree, the
+ * «Filters» tab of a category (§6.2), the gallery, and the tone of a reference book's record —
+ * the satellites' screens use it, and the six tones are the core's (`Dictionary`).
  */
 export declare function catalog(options?: CatalogOptions): AdminModule[];

package/dist/style.css

@@ -1 +1 @@
-.wx-catalog-categories[data-v-5385c84c]{min-width:0}.wx-catalog-categories__name[data-v-5385c84c]{font-weight:var(--wx-font-weight-medium)}.wx-catalog-categories__name.is-hidden[data-v-5385c84c]{color:var(--wx-text-muted)}.wx-catalog-categories__count[data-v-5385c84c]{color:var(--wx-color-primary);font-variant-numeric:tabular-nums;text-decoration:none}.wx-catalog-categories__count[data-v-5385c84c]:hover{text-decoration:underline}.wx-catalog-category-editor[data-v-45d5817b]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-catalog-category-editor__ghost[data-v-45d5817b]{max-width:420px}.wx-catalog-deleted[data-v-1fad643b]{min-width:0}.wx-catalog-deleted__name[data-v-1fad643b]{display:flex;flex-direction:column;min-width:0}.wx-catalog-deleted__title[data-v-1fad643b]{font-weight:var(--wx-font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-deleted__code[data-v-1fad643b]{font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm);color:var(--wx-text-muted)}.wx-catalog-deleted__ref[data-v-1fad643b]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-4) var(--wx-space-8);min-width:0}.wx-catalog-facets[data-v-4ca00a4d]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-catalog-facets__own[data-v-4ca00a4d],.wx-catalog-facets__inherited[data-v-4ca00a4d]{display:flex;flex-direction:column;gap:var(--wx-space-4)}.wx-catalog-facets[data-v-4ca00a4d] .wx-sortable-list__content{display:flex;align-items:center;gap:var(--wx-space-8);min-width:0}.wx-catalog-facets__name[data-v-4ca00a4d]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-facets__name.is-off[data-v-4ca00a4d]{color:var(--wx-text-muted)}.wx-catalog-video-progress[data-v-09fd14bf]{display:flex;flex-direction:column;gap:var(--wx-space-4);min-width:0}.wx-catalog-video-progress__line[data-v-09fd14bf]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--wx-space-4) var(--wx-space-8);min-width:0}.wx-catalog-video-progress__figures[data-v-09fd14bf]{font-variant-numeric:tabular-nums;min-width:0}.wx-catalog-video-progress__figure[data-v-09fd14bf]{white-space:nowrap}.wx-catalog-video-progress__buttons[data-v-09fd14bf]{display:flex;gap:var(--wx-space-4);margin-inline-start:auto}.wx-catalog-video-progress.is-failed[data-v-09fd14bf]{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--wx-space-4) var(--wx-space-8)}.wx-catalog-gallery[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-16);container-type:inline-size}.wx-catalog-gallery[data-v-fdb59e51] .wx-sortable-list__content{min-width:0}.wx-catalog-gallery__item[data-v-fdb59e51]{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--wx-space-12);align-items:center}.wx-catalog-gallery__thumb[data-v-fdb59e51]{position:relative;display:block;width:72px;aspect-ratio:1;overflow:clip;border-radius:var(--wx-radius-sm);background:var(--wx-bg-subtle);border:1px solid var(--wx-border-default)}.wx-catalog-gallery__thumb img[data-v-fdb59e51]{width:100%;height:100%;min-width:0;object-fit:contain;display:block}.wx-catalog-gallery__main[data-v-fdb59e51]{position:absolute;inset-inline-start:var(--wx-space-2);inset-block-start:var(--wx-space-2)}.wx-catalog-gallery__size[data-v-fdb59e51],.wx-catalog-gallery__play[data-v-fdb59e51]{position:absolute;background:var(--wx-bg-overlay);color:var(--wx-color-white);font-size:var(--wx-font-size-xs);line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}.wx-catalog-gallery__size[data-v-fdb59e51]{inset-inline:0;inset-block-end:0;padding-block:var(--wx-space-2);text-align:center}.wx-catalog-gallery__play[data-v-fdb59e51]{inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;padding:var(--wx-space-2) var(--wx-space-4);border-radius:var(--wx-radius-xs)}.wx-catalog-gallery__body[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-8);min-width:0}.wx-catalog-gallery__words[data-v-fdb59e51]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wx-space-8)}@container (min-width: 640px){.wx-catalog-gallery__words[data-v-fdb59e51]{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 420px){.wx-catalog-gallery__item[data-v-fdb59e51]{grid-template-columns:minmax(0,1fr)}}.wx-catalog-gallery__pending[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-8);margin:0;padding:var(--wx-space-8) var(--wx-space-12);list-style:none;border:1px dashed var(--wx-border-default);border-radius:var(--wx-radius-md)}.wx-catalog-gallery__name[data-v-fdb59e51]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-gallery__picker[data-v-fdb59e51]{display:none}.wx-catalog-gallery__address[data-v-fdb59e51]{display:flex;gap:var(--wx-space-8);align-items:center;max-width:560px}.wx-catalog-gallery__address[data-v-fdb59e51]>:first-child{flex:1;min-width:0}.wx-catalog-gallery__address-hint[data-v-fdb59e51]{display:block;margin-block-start:var(--wx-space-8)}.wx-catalog-product[data-v-923c09f7]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-catalog-product__ghost[data-v-923c09f7]{max-width:420px}.wx-catalog-bulk-params__field[data-v-b83c3fb0]{margin-top:var(--wx-space-16)}.wx-catalog-bulk[data-v-94557c14]{display:contents}.wx-catalog-bulk__progress[data-v-94557c14]{display:grid;gap:var(--wx-space-4);flex:1 1 240px;min-width:0}.wx-catalog-bulk__refused[data-v-94557c14]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--wx-space-8);flex-basis:100%;min-width:0}.wx-catalog-bulk__errors[data-v-94557c14]{flex-basis:100%;font-size:var(--wx-font-size-sm)}.wx-catalog-bulk__errors summary[data-v-94557c14]{cursor:pointer;color:var(--wx-text-muted)}.wx-catalog-bulk__errors ul[data-v-94557c14]{margin:var(--wx-space-8) 0 0;padding-inline-start:var(--wx-space-18);max-height:200px;overflow:auto}.wx-catalog-products[data-v-44965ffc]{min-width:0}.wx-catalog-products__selection[data-v-44965ffc]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-12);padding:var(--wx-space-8) var(--wx-space-16);border-bottom:1px solid var(--wx-border-default);background:var(--wx-bg-subtle)}.wx-catalog-products__image[data-v-44965ffc]{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--wx-radius-sm);overflow:clip;background:var(--wx-bg-subtle);color:var(--wx-text-muted);vertical-align:middle}.wx-catalog-products__image img[data-v-44965ffc]{width:100%;height:100%;min-width:0;object-fit:cover}.wx-catalog-products__name[data-v-44965ffc]{display:flex;flex-direction:column;min-width:0}.wx-catalog-products__title[data-v-44965ffc]{font-weight:var(--wx-font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-products__sku[data-v-44965ffc]{font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm);color:var(--wx-text-muted);min-height:1em}.wx-catalog-products__price[data-v-44965ffc]{display:inline-flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}.wx-catalog-products__price[data-v-44965ffc]>*{white-space:nowrap}.wx-catalog-products__price small[data-v-44965ffc],.wx-catalog-products__price s[data-v-44965ffc]{font-size:var(--wx-font-size-sm);color:var(--wx-text-muted)}.wx-catalog-products__range[data-v-44965ffc]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wx-space-8)}
+.wx-catalog-categories[data-v-5385c84c]{min-width:0}.wx-catalog-categories__name[data-v-5385c84c]{font-weight:var(--wx-font-weight-medium)}.wx-catalog-categories__name.is-hidden[data-v-5385c84c]{color:var(--wx-text-muted)}.wx-catalog-categories__count[data-v-5385c84c]{color:var(--wx-color-primary);font-variant-numeric:tabular-nums;text-decoration:none}.wx-catalog-categories__count[data-v-5385c84c]:hover{text-decoration:underline}.wx-catalog-category-editor[data-v-45d5817b]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-catalog-category-editor__ghost[data-v-45d5817b]{max-width:420px}.wx-catalog-deleted[data-v-1fad643b]{min-width:0}.wx-catalog-deleted__name[data-v-1fad643b]{display:flex;flex-direction:column;min-width:0}.wx-catalog-deleted__title[data-v-1fad643b]{font-weight:var(--wx-font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-deleted__code[data-v-1fad643b]{font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm);color:var(--wx-text-muted)}.wx-catalog-deleted__ref[data-v-1fad643b]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-4) var(--wx-space-8);min-width:0}.wx-catalog-facets[data-v-4ca00a4d]{display:flex;flex-direction:column;gap:var(--wx-space-12)}.wx-catalog-facets__own[data-v-4ca00a4d],.wx-catalog-facets__inherited[data-v-4ca00a4d]{display:flex;flex-direction:column;gap:var(--wx-space-4)}.wx-catalog-facets[data-v-4ca00a4d] .wx-sortable-list__content{display:flex;align-items:center;gap:var(--wx-space-8);min-width:0}.wx-catalog-facets__name[data-v-4ca00a4d]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-facets__name.is-off[data-v-4ca00a4d]{color:var(--wx-text-muted)}.wx-catalog-video-progress[data-v-09fd14bf]{display:flex;flex-direction:column;gap:var(--wx-space-4);min-width:0}.wx-catalog-video-progress__line[data-v-09fd14bf]{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--wx-space-4) var(--wx-space-8);min-width:0}.wx-catalog-video-progress__figures[data-v-09fd14bf]{font-variant-numeric:tabular-nums;min-width:0}.wx-catalog-video-progress__figure[data-v-09fd14bf]{white-space:nowrap}.wx-catalog-video-progress__buttons[data-v-09fd14bf]{display:flex;gap:var(--wx-space-4);margin-inline-start:auto}.wx-catalog-video-progress.is-failed[data-v-09fd14bf]{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--wx-space-4) var(--wx-space-8)}.wx-catalog-gallery[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-16);container-type:inline-size}.wx-catalog-gallery[data-v-fdb59e51] .wx-sortable-list__content{min-width:0}.wx-catalog-gallery__item[data-v-fdb59e51]{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--wx-space-12);align-items:center}.wx-catalog-gallery__thumb[data-v-fdb59e51]{position:relative;display:block;width:72px;aspect-ratio:1;overflow:clip;border-radius:var(--wx-radius-sm);background:var(--wx-bg-subtle);border:1px solid var(--wx-border-default)}.wx-catalog-gallery__thumb img[data-v-fdb59e51]{width:100%;height:100%;min-width:0;object-fit:contain;display:block}.wx-catalog-gallery__main[data-v-fdb59e51]{position:absolute;inset-inline-start:var(--wx-space-2);inset-block-start:var(--wx-space-2)}.wx-catalog-gallery__size[data-v-fdb59e51],.wx-catalog-gallery__play[data-v-fdb59e51]{position:absolute;background:var(--wx-bg-overlay);color:var(--wx-color-white);font-size:var(--wx-font-size-xs);line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}.wx-catalog-gallery__size[data-v-fdb59e51]{inset-inline:0;inset-block-end:0;padding-block:var(--wx-space-2);text-align:center}.wx-catalog-gallery__play[data-v-fdb59e51]{inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;padding:var(--wx-space-2) var(--wx-space-4);border-radius:var(--wx-radius-xs)}.wx-catalog-gallery__body[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-8);min-width:0}.wx-catalog-gallery__words[data-v-fdb59e51]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wx-space-8)}@container (min-width: 640px){.wx-catalog-gallery__words[data-v-fdb59e51]{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 420px){.wx-catalog-gallery__item[data-v-fdb59e51]{grid-template-columns:minmax(0,1fr)}}.wx-catalog-gallery__pending[data-v-fdb59e51]{display:flex;flex-direction:column;gap:var(--wx-space-8);margin:0;padding:var(--wx-space-8) var(--wx-space-12);list-style:none;border:1px dashed var(--wx-border-default);border-radius:var(--wx-radius-md)}.wx-catalog-gallery__name[data-v-fdb59e51]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-gallery__picker[data-v-fdb59e51]{display:none}.wx-catalog-gallery__address[data-v-fdb59e51]{display:flex;gap:var(--wx-space-8);align-items:center;max-width:560px}.wx-catalog-gallery__address[data-v-fdb59e51]>:first-child{flex:1;min-width:0}.wx-catalog-gallery__address-hint[data-v-fdb59e51]{display:block;margin-block-start:var(--wx-space-8)}.wx-catalog-product[data-v-923c09f7]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-catalog-product__ghost[data-v-923c09f7]{max-width:420px}.wx-catalog-bulk-params__field[data-v-0c68389e]{margin-top:var(--wx-space-16)}.wx-catalog-bulk[data-v-94557c14]{display:contents}.wx-catalog-bulk__progress[data-v-94557c14]{display:grid;gap:var(--wx-space-4);flex:1 1 240px;min-width:0}.wx-catalog-bulk__refused[data-v-94557c14]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--wx-space-8);flex-basis:100%;min-width:0}.wx-catalog-bulk__errors[data-v-94557c14]{flex-basis:100%;font-size:var(--wx-font-size-sm)}.wx-catalog-bulk__errors summary[data-v-94557c14]{cursor:pointer;color:var(--wx-text-muted)}.wx-catalog-bulk__errors ul[data-v-94557c14]{margin:var(--wx-space-8) 0 0;padding-inline-start:var(--wx-space-18);max-height:200px;overflow:auto}.wx-catalog-column-value[data-v-2389d2f9]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-4);min-width:0;max-width:100%}.wx-catalog-column-value.is-empty[data-v-2389d2f9]{color:var(--wx-text-muted)}.wx-catalog-products[data-v-790ab4c0]{min-width:0}.wx-catalog-products__selection[data-v-790ab4c0]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-12);padding:var(--wx-space-8) var(--wx-space-16);border-bottom:1px solid var(--wx-border-default);background:var(--wx-bg-subtle)}.wx-catalog-products__image[data-v-790ab4c0]{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--wx-radius-sm);overflow:clip;background:var(--wx-bg-subtle);color:var(--wx-text-muted);vertical-align:middle}.wx-catalog-products__image img[data-v-790ab4c0]{width:100%;height:100%;min-width:0;object-fit:cover}.wx-catalog-products__name[data-v-790ab4c0]{display:flex;flex-direction:column;min-width:0}.wx-catalog-products__title[data-v-790ab4c0]{font-weight:var(--wx-font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-products__sku[data-v-790ab4c0]{font-family:var(--wx-font-family-mono);font-size:var(--wx-font-size-sm);color:var(--wx-text-muted);min-height:1em}.wx-catalog-products__price[data-v-790ab4c0]{display:inline-flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}.wx-catalog-products__price[data-v-790ab4c0]>*{white-space:nowrap}.wx-catalog-products__price small[data-v-790ab4c0],.wx-catalog-products__price s[data-v-790ab4c0]{font-size:var(--wx-font-size-sm);color:var(--wx-text-muted)}.wx-catalog-products__range[data-v-790ab4c0]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wx-space-8)}.wx-catalog-tone[data-v-2b8d13bb]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wx-space-12)}.wx-catalog-tone__choices[data-v-2b8d13bb]{display:flex;flex-wrap:wrap;gap:var(--wx-space-6)}.wx-catalog-tone__choice[data-v-2b8d13bb]{display:inline-flex;padding:0;border:0;border-radius:var(--wx-radius-full);background:none;font:inherit;cursor:pointer}.wx-catalog-tone__choice[data-v-2b8d13bb]:disabled{cursor:not-allowed;opacity:.6}.wx-catalog-tone__choice[data-v-2b8d13bb]:focus-visible{outline:2px solid var(--wx-border-focus);outline-offset:2px}.wx-catalog-tone__sample[data-v-2b8d13bb]{display:inline-flex;padding-left:var(--wx-space-12);border-left:1px solid var(--wx-border-default)}

package/dist/tones.d.ts

@@ -0,0 +1,10 @@
+import { BadgeType } from '@webx-ui/core';
+/**
+ * The six tones a record of a reference book is painted in (labels, stock statuses) — the
+ * server's `Dictionary::TONES`. A tone and not a colour: the site puts it into a class, the panel
+ * into a tag of the same tone, and nobody writes a hex anywhere.
+ */
+export declare const TONES: readonly ["neutral", "primary", "success", "warning", "danger", "info"];
+export type Tone = (typeof TONES)[number];
+/** The tag the panel draws a tone as. `neutral` is the core's `default`; the rest match by name. */
+export declare function toneBadge(tone: unknown): BadgeType;

package/dist/types.d.ts

@@ -45,10 +45,24 @@ export interface ProductRow {
     updated_at: string | null;
     deleted_at: string | null;
     /** The satellites' columns (`ProductColumns`), by key. Absent while none is installed. */
-    columns?: Record<string, string | number | boolean | null>;
+    columns?: Record<string, ColumnValue>;
     /** A row of `WxTable`, which reads cells by key. */
     [key: string]: unknown;
 }
+/**
+ * What a satellite's column holds for one product: words, or a record by name — with a tone
+ * (`{ name, color }`, a stock status), or taken off the site (`{ name, visible: false }`, a brand) —
+ * or a list of those (labels). `ColumnValue.vue` draws each by its shape.
+ */
+export type ColumnValue = string | number | boolean | null | ColumnRecord | ColumnRecord[];
+export interface ColumnRecord {
+    id?: number | string;
+    name: string;
+    /** One of the six tones (`tones.ts`). */
+    color?: string | null;
+    visible?: boolean;
+    [key: string]: unknown;
+}
 /** A column a satellite adds to the list (§7.4). The values ride on each row under its key. */
 export interface ProductColumnInfo {
     key: string;
@@ -249,6 +263,8 @@ export interface BulkParam {
         value: string | number;
         label: string;
     }> | string;
+    /** Where the panel asks for the values instead: a reference book's path (`catalog/labels`). */
+    source?: string;
 }
 /** One bulk action the server offers this administrator (§11.4): the core's or a satellite's. */
 export interface BulkActionInfo {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webx-ui/module-catalog",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The catalogue of the WebX UI admin panel: products with a gallery, a tree of categories with their filters, and the deleted ones waiting to come back.",
   "license": "MIT",
   "type": "module",
@@ -44,8 +44,8 @@
     "vue-router": "^4.5.0"
   },
   "dependencies": {
-    "@webx-ui/core": "^0.34.1",
-    "@webx-ui/module-admin": "^0.20.0",
+    "@webx-ui/core": "^0.34.2",
+    "@webx-ui/module-admin": "^0.21.0",
     "@webx-ui/schema": "^0.6.4"
   },
   "devDependencies": {