@webx-ui/module-catalog 0.1.0

package/dist/module.d.ts

@@ -0,0 +1,22 @@
+import { AdminModule } from '@webx-ui/module-admin';
+export interface CatalogOptions {
+    /**
+     * Where the catalogue lives inside the panel. The server's refusal of a taken article number
+     * links to `{path}/products/{id}` under the panel's own path, so a panel that moves it has to
+     * move the server's idea of it too — leave it unless there is a reason.
+     */
+    path?: string;
+}
+/**
+ * The catalogue as a section of the panel (§11): products, their categories as a tree, and
+ * «Deleted».
+ *
+ * One section and not three, because the server registers one module — `catalog` — and the
+ * navigation draws one entry per module. The products are where it opens; the tree and «Deleted»
+ * are reached from their head. The satellites (brands, stock, labels) stand beside it in the
+ * `catalog` group as sections of their own.
+ *
+ * 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.
+ */
+export declare function catalog(options?: CatalogOptions): AdminModule;

package/dist/paths.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The last segment of an address on the site, without slashes: `/laptops/` → `laptops`,
+ * `https://shop.test/en/lamp-12` → `lamp-12`. The panel compares it with the slug being typed;
+ * the language prefix and the host in front of it are not part of what the slug field edits.
+ */
+export declare function lastSegment(url: string | null | undefined): string | null;

package/dist/store.d.ts

@@ -0,0 +1,29 @@
+import { ComputedRef, Ref } from 'vue';
+import { AdminContext } from '@webx-ui/module-admin';
+import { CategoryNode, FacetInfo, FacetRegistryAnswer, SortInfo } from './types';
+export interface CategoryTree {
+    /** `null` until the first answer. */
+    nodes: Ref<CategoryNode[] | null>;
+    load(force?: boolean): Promise<CategoryNode[]>;
+    /** Put in what the server answered with — a move answers with the whole tree. */
+    take(nodes: CategoryNode[]): void;
+    /** Forget it; the next reader asks again. */
+    drop(): void;
+}
+export declare function useCategoryTree(admin: AdminContext): CategoryTree;
+export interface FacetRegistry {
+    facets: ComputedRef<FacetInfo[] | null>;
+    /** The orders the list offers, in the registry's order; empty until the answer. */
+    sorts: ComputedRef<SortInfo[]>;
+    load(): Promise<FacetRegistryAnswer>;
+}
+/**
+ * The facets every category can show (§7.1) and the sorts of the list (§7.2) — one answer, since
+ * the list needs both before it can draw its filter. The kind is lowercased on the way in: a panel
+ * comparing with 'range' should not care how the server cased its enum.
+ */
+export declare function useFacetRegistry(admin: AdminContext): FacetRegistry;
+/** Every node of the tree, depth first, as the server ordered them. */
+export declare function flatten(nodes: CategoryNode[]): CategoryNode[];
+/** A node and the chain of its parents, the node first. Empty when it is not in the tree. */
+export declare function ancestry(nodes: CategoryNode[], id: number): CategoryNode[];

package/dist/style.css

@@ -0,0 +1 @@
+.wx-catalog-categories[data-v-b896daca]{min-width:0}.wx-catalog-categories__name[data-v-b896daca]{font-weight:var(--wx-font-weight-medium)}.wx-catalog-categories__name.is-hidden[data-v-b896daca]{color:var(--wx-text-muted)}.wx-catalog-categories__count[data-v-b896daca]{color:var(--wx-color-primary);font-variant-numeric:tabular-nums;text-decoration:none}.wx-catalog-categories__count[data-v-b896daca]: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-gallery[data-v-9479a729]{display:flex;flex-direction:column;gap:var(--wx-space-16);container-type:inline-size}.wx-catalog-gallery[data-v-9479a729] .wx-sortable-list__content{min-width:0}.wx-catalog-gallery__item[data-v-9479a729]{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--wx-space-16);align-items:start;padding-block:var(--wx-space-8)}.wx-catalog-gallery__thumb[data-v-9479a729]{position:relative;display:block;width:96px;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-9479a729]{width:100%;height:100%;min-width:0;object-fit:contain;display:block}.wx-catalog-gallery__main[data-v-9479a729]{position:absolute;inset-inline-start:var(--wx-space-4);inset-block-start:var(--wx-space-4)}.wx-catalog-gallery__words[data-v-9479a729]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--wx-space-8)}@container (min-width: 640px){.wx-catalog-gallery__words[data-v-9479a729]{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-catalog-gallery__words>.wx-text[data-v-9479a729]{grid-column:1 / -1}}@container (max-width: 420px){.wx-catalog-gallery__item[data-v-9479a729]{grid-template-columns:minmax(0,1fr)}}.wx-catalog-gallery__address[data-v-9479a729]{display:flex;gap:var(--wx-space-8);align-items:center;max-width:560px}.wx-catalog-gallery__address[data-v-9479a729]>:first-child{flex:1;min-width:0}.wx-catalog-product[data-v-837dd378]{display:flex;flex-direction:column;gap:var(--wx-gap, var(--wx-space-16));container-type:inline-size}.wx-catalog-product__ghost[data-v-837dd378]{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-541fe844]{min-width:0}.wx-catalog-products__selection[data-v-541fe844]{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-541fe844]{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-541fe844]{width:100%;height:100%;min-width:0;object-fit:cover}.wx-catalog-products__name[data-v-541fe844]{display:flex;flex-direction:column;min-width:0}.wx-catalog-products__title[data-v-541fe844]{font-weight:var(--wx-font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wx-catalog-products__sku[data-v-541fe844]{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-541fe844]{display:inline-flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}.wx-catalog-products__price[data-v-541fe844]>*{white-space:nowrap}.wx-catalog-products__price small[data-v-541fe844],.wx-catalog-products__price s[data-v-541fe844]{font-size:var(--wx-font-size-sm);color:var(--wx-text-muted)}.wx-catalog-products__range[data-v-541fe844]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wx-space-8)}

package/dist/types.d.ts

@@ -0,0 +1,270 @@
+import { LocalizedValue, Paginated } from '@webx-ui/core';
+import { ScreenModel } from '@webx-ui/schema';
+/**
+ * Published · taken off the site · in «Deleted» (§5). "Published" is what was asked for, not what
+ * a visitor sees: a published product in no visible category answers like an unpublished one,
+ * and `visible` on the row is the one that says so.
+ */
+export type ProductState = 'published' | 'unpublished' | 'deleted';
+/** A category as a product names it — possibly one in the bin, which a restore cannot bring along. */
+export interface CategoryRef {
+    id: number;
+    name: string;
+    deleted: boolean;
+}
+/**
+ * One product as a row of the list and as the head of its editor (§11.2).
+ *
+ * `price`, `old_price` and `barcode` are absent — not null — when the site has them switched off,
+ * so the panel cannot show a column the site does not have.
+ */
+export interface ProductRow {
+    id: number;
+    /** In the panel's language, with the usual fallback. */
+    name: string;
+    sku: string | null;
+    barcode?: string | null;
+    price?: number | null;
+    old_price?: number | null;
+    unit: string | null;
+    priority: number;
+    is_published: boolean;
+    state: ProductState;
+    /** Published and in at least one visible category (§5). */
+    visible: boolean;
+    /** The main one — `null` is decision 3's "no category". */
+    category: CategoryRef | null;
+    image: {
+        id: number;
+        url: string;
+        thumb: string | null;
+    } | null;
+    /** On the site; an unpublished one's too, which is the trimmed page. `null` once deleted. */
+    url: string | null;
+    created_at: string | null;
+    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>;
+    /** A row of `WxTable`, which reads cells by key. */
+    [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;
+    label: string;
+    /** The key of the `Sorts` registry that orders by it, or `null`. */
+    sort?: string | null;
+}
+/**
+ * What one facet counts for the list as it is filtered, its own choice aside: the values of a
+ * terms or tree facet with their words and counts, the bounds of a range, the products a toggle
+ * would leave.
+ */
+export interface FacetCount {
+    key: string;
+    kind: FacetKind;
+    values?: {
+        value: string;
+        label: string;
+        count: number;
+    }[];
+    min?: number | null;
+    max?: number | null;
+    count?: number;
+}
+/**
+ * The list: Laravel's paginator as it is, with the number of products nobody filed (decision 3),
+ * the facets' counts and the satellites' columns.
+ */
+export interface ProductsPage extends Paginated<ProductRow> {
+    counts: {
+        no_category: number;
+    };
+    facets?: Record<string, FacetCount>;
+    columns?: ProductColumnInfo[];
+}
+/** A key of the `Sorts` registry: `default`, `new`, `popular`, `price_asc` — whatever it holds. */
+export type ProductSort = string;
+/** One way to order the list, as the registry names it. */
+export interface SortInfo {
+    key: string;
+    label: string;
+}
+/** One facet's choice in the list's filter: values, a range, or on. */
+export type FacetChoice = Array<string | number> | {
+    min?: number | null;
+    max?: number | null;
+} | true;
+export interface ProductQuery {
+    q?: string;
+    state?: 'published' | 'unpublished' | 'no-category' | '';
+    sort?: ProductSort | null;
+    page?: number;
+    per_page?: number;
+    /** Facet key → what is chosen. Sent as `facets[key][]=…`, `facets[key][min]=…`; on is `facets[key][]=1`. */
+    facets?: Record<string, FacetChoice>;
+}
+/** One picture of the gallery; `alt` and `title` in every language at once (§11.1). */
+export interface ProductImage {
+    id: number;
+    path: string;
+    url: string;
+    thumb: string | null;
+    alt: LocalizedValue;
+    title: LocalizedValue;
+    width: number | null;
+    height: number | null;
+    size: number | null;
+    position: number;
+}
+/** One product as its editor opens it. */
+export interface ProductDetail {
+    product: ProductRow;
+    values: ScreenModel;
+    images: ProductImage[];
+}
+/** The 422 of a taken article number: who holds it and where to open them. */
+export interface SkuHolder {
+    id: number;
+    name: string;
+    url: string;
+    deleted: boolean;
+}
+/**
+ * What the tree and the editor both say about a category. `products_count` is live products in it
+ * and everything under it, main and additional alike, each product once.
+ */
+interface CategoryFields {
+    id: number;
+    parent_id: number | null;
+    name: string;
+    slug: string | null;
+    depth: number;
+    is_published: boolean;
+    /** Published, and so is every category above it (§6.3). */
+    visible: boolean;
+    products_count: number;
+    url: string | null;
+}
+/** One category of the tree (§6.1). */
+export interface CategoryNode extends CategoryFields {
+    children: CategoryNode[];
+    /** A row of `WxTable` and a node of `WxTreeSelect`, both of which read by key. */
+    [key: string]: unknown;
+}
+/** One category as the head of its editor. */
+export interface CategoryRow extends CategoryFields {
+    created_at: string | null;
+    updated_at: string | null;
+    deleted_at: string | null;
+}
+export interface CategoryDetail {
+    category: CategoryRow;
+    values: ScreenModel;
+    /**
+     * Whose facet setting it shows while it has none of its own: the nearest ancestor with one.
+     * `null` when it has its own, and when nobody above it has — every facet by default (§6.2).
+     */
+    facets_from?: {
+        id: number;
+        name: string;
+    } | null;
+}
+/** A category's own facet setting: the facets in its order, each shown or not (§6.2). */
+export interface FacetSetting {
+    key: string;
+    visible: boolean;
+}
+export type FacetKind = 'terms' | 'range' | 'toggle' | 'tree';
+/**
+ * One facet of the registry. Its values are not here: the list counts them for what it shows
+ * (`ProductsPage.facets`), and the tree facet (the categories) is chosen from the tree itself.
+ */
+export interface FacetInfo {
+    key: string;
+    code: string;
+    kind: FacetKind;
+    label: string;
+    /** Whether its first level may be an open page of the storefront (§8.1 of the architecture). */
+    indexable?: boolean;
+}
+/** `GET /facets`: the registry of facets, and the sorts the list can be ordered by. */
+export interface FacetRegistryAnswer {
+    facets: FacetInfo[];
+    sorts: SortInfo[];
+}
+/** A row of «Deleted» — products. */
+export interface DeletedProduct {
+    id: number;
+    name: string;
+    sku: string | null;
+    category: CategoryRef | null;
+    deleted_at: string | null;
+    [key: string]: unknown;
+}
+/** A row of «Deleted» — categories. */
+export interface DeletedCategory {
+    id: number;
+    name: string;
+    slug: string | null;
+    parent: CategoryRef | null;
+    deleted_at: string | null;
+    [key: string]: unknown;
+}
+export type DeletedKind = 'products' | 'categories';
+/** What a bulk action asks for before it runs (`PartField` on the server). */
+export interface BulkParam {
+    name: string;
+    /** `category` draws the tree; anything else with `values` a list; the rest a text field. */
+    type: string;
+    label: string;
+    rules?: string[];
+    /** The allowed values, or the tool that lists them — which the panel does not follow. */
+    values?: Array<string | number | {
+        value: string | number;
+        label: string;
+    }> | string;
+}
+/** One bulk action the server offers this administrator (§11.4): the core's or a satellite's. */
+export interface BulkActionInfo {
+    key: string;
+    label: string;
+    permission: string;
+    /** It acts on the products in «Deleted» — a restore. */
+    trashed: boolean;
+    params: BulkParam[];
+}
+/** Rows ticked, or everything the list's query finds — turned into ids when the run starts. */
+export type BulkSelection = {
+    ids: number[];
+} | {
+    query: {
+        q?: string;
+        state?: string;
+        facets?: Record<string, Array<string | number> | {
+            min?: number | null;
+            max?: number | null;
+        }>;
+    };
+};
+export interface BulkRunError {
+    id: number;
+    name: string;
+    message: string;
+}
+/** A run: done inside the request (`id` null) or queued, polled until it is `done` or `failed`. */
+export interface BulkRun {
+    id: number | null;
+    action: string;
+    label: string;
+    status: 'queued' | 'running' | 'done' | 'failed';
+    total: number;
+    done: number;
+    failed: number;
+    errors: BulkRunError[];
+    history_id: number | null;
+    created_at: string | null;
+    finished_at: string | null;
+}
+export {};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@webx-ui/module-catalog",
+  "version": "0.1.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",
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "webx-ui",
+    "vue",
+    "admin",
+    "cms",
+    "catalog",
+    "e-commerce"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webx-ui/webx-ui.git",
+    "directory": "packages/module-catalog"
+  },
+  "homepage": "https://github.com/webx-ui/webx-ui/tree/main/packages/module-catalog",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "dependencies": {
+    "@webx-ui/core": "^0.34.1",
+    "@webx-ui/module-admin": "^0.19.0",
+    "@webx-ui/schema": "^0.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.14",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.24",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^3.1.3"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit"
+  }
+}