@webx-ui/module-catalog-properties 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 webx-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @webx-ui/module-catalog-properties
+
+Properties of products for the catalogue of the [WebX UI](https://github.com/webx-ui/webx-ui) admin
+panel: reference books (flat or a tree, with colours and pictures), numbers with units, texts and
+yes/no; sets inherited down the categories; the specifications of a product.
+
+The other half is the Composer package `webx-ui/module-catalog-properties`, which owns the
+properties, their values and intervals, the sets, the facets of the filter, the index document and
+the storefront's specifications. The section appears in the panel when both halves are installed,
+beside `@webx-ui/module-catalog`.
+
+## Install
+
+```bash
+npm install @webx-ui/module-catalog-properties
+```
+
+```ts
+import { createAdmin } from '@webx-ui/module-admin'
+import { catalog } from '@webx-ui/module-catalog'
+import { catalogProperties } from '@webx-ui/module-catalog-properties'
+import { media } from '@webx-ui/module-media'
+import '@webx-ui/module-catalog/style.css'
+import '@webx-ui/module-catalog-properties/style.css'
+
+createAdmin({
+  basePath: '/cms',
+  modules: [...catalog(), ...catalogProperties(), media()],
+}).mount()
+```
+
+`catalogProperties()` is one section, «Catalog» → «Dictionaries» → «Properties»:
+
+- the list, in the order of the filter's blocks, with a filter by type and group, the number of
+  products on each line and «Deleted» with a restore;
+- the page of one property — «Main» (only the fields its type has, and a number printed as the
+  site will print it), «Values» (a lazy tree with a search, colours and pictures, merging) and
+  «Intervals» (the steps a number is filtered by);
+- the groups of the card, behind the «Groups» button.
+
+It also draws the two tabs the server patches onto the catalogue's screens: «Properties» of a
+category (its set, inherited from the categories above) and «Specifications» of a product (the set
+of its main category, read again as soon as the category changes). The pictures of values come from
+the library of `@webx-ui/module-media`.
+
+The catalogue's `path` moves this section with it: `catalogProperties({ path: '/shop' })`.

package/dist/CategoryPropertiesField.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/IntervalsField.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/MergeDialog.d.ts

@@ -0,0 +1,7 @@
+import { PropertyValue } from './types';
+type __VLS_Props = {
+    property: number;
+    value: PropertyValue;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/NumberExample.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/ProductPropertiesField.d.ts

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

package/dist/PropertiesPage.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/PropertyCreateDialog.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    field: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/PropertyEditorPage.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    base?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/TypeField.d.ts

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

package/dist/ValueDialog.d.ts

@@ -0,0 +1,18 @@
+import { PropertyValue } from './types';
+type __VLS_Props = {
+    property: number;
+    value?: PropertyValue | null;
+    parent?: number | null;
+    title: string;
+    color?: boolean;
+    image?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: boolean;
+    image: boolean;
+    value: PropertyValue | null;
+    parent: number | null;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    field: HTMLDivElement;
+}, any>;
+export default _default;

package/dist/ValueRow.d.ts

@@ -0,0 +1,7 @@
+import { ValueNode } from './types';
+type __VLS_Props = {
+    node: ValueNode;
+    locale: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/ValueSelect.d.ts

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

package/dist/ValueTreeSelect.d.ts

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

package/dist/ValuesField.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/api.d.ts

@@ -0,0 +1,48 @@
+import { AdminContext } from '@webx-ui/module-admin';
+import { ScreenModel } from '@webx-ui/schema';
+import { CategorySet, EffectiveSet, PropertiesPage, PropertyDetail, PropertyInterval, PropertyQuery, PropertyValue, Words } from './types';
+/** Where the properties answer under the panel's API — `CatalogPropertiesServiceProvider::SOURCE`. */
+export declare const PROPERTIES_API = "catalog/properties";
+/** Where their groups do: the panel's shared category API. */
+export declare const GROUPS_API = "catalog/property-groups";
+/** Where the set in force for a product form is — `catalog/property-sets/{category}`. */
+export declare const SETS_API = "catalog/property-sets";
+/** What a value is written with; a field left out is not touched. */
+export interface ValueInput {
+    title?: Words | string;
+    slug?: Words | string;
+    parent_id?: number | null;
+    color?: string | null;
+    image_id?: number | null;
+}
+export interface CatalogPropertiesApi {
+    list(query?: PropertyQuery): Promise<PropertiesPage>;
+    get(id: number): Promise<PropertyDetail>;
+    /** The values of `catalog.property-form`; a refused field comes back as a 422 under its name. */
+    create(values: ScreenModel): Promise<PropertyDetail>;
+    save(id: number, values: ScreenModel): Promise<PropertyDetail>;
+    reorder(ids: number[]): Promise<void>;
+    remove(id: number): Promise<void>;
+    restore(id: number): Promise<PropertyDetail>;
+    /** All the intervals at once, in order: one without an id is new, one left out is gone. */
+    saveIntervals(id: number, intervals: PropertyInterval[]): Promise<PropertyInterval[]>;
+    /** The children of `parent` (null — the top) in the book's order. */
+    values(id: number, parent?: number | null): Promise<PropertyValue[]>;
+    /** Whatever matches, at any depth — one page. */
+    searchValues(id: number, q: string, perPage?: number): Promise<PropertyValue[]>;
+    /** These values, each with the path down to it. */
+    valuesById(id: number, ids: number[]): Promise<PropertyValue[]>;
+    createValue(id: number, input: ValueInput): Promise<PropertyValue>;
+    saveValue(id: number, value: number, input: ValueInput): Promise<PropertyValue>;
+    /** Under `parent` (null — the top), before `before` (null — last). */
+    moveValue(id: number, value: number, parent: number | null, before: number | null): Promise<PropertyValue>;
+    /** `A → B`: how many products moved, or would move with `dryRun`. */
+    mergeValue(id: number, value: number, into: number, dryRun?: boolean): Promise<number>;
+    /** A 422 with `meta.products` while products hold it. */
+    removeValue(id: number, value: number): Promise<void>;
+    categorySet(category: number): Promise<CategorySet>;
+    saveCategorySet(category: number, ids: number[]): Promise<CategorySet>;
+    effectiveSet(category: number): Promise<EffectiveSet>;
+}
+export declare function propertySearch(query: PropertyQuery): URLSearchParams;
+export declare function createPropertiesApi(admin: AdminContext): CatalogPropertiesApi;

package/dist/editor.d.ts

@@ -0,0 +1,22 @@
+import { InjectionKey, Ref } from 'vue';
+import { ScreenModel } from '@webx-ui/schema';
+import { PropertyInterval, PropertyRow } from './types';
+/**
+ * What the property's editor knows and the nodes of `catalog.property-form` do not: which property
+ * it is — the values and the intervals are records of their own, saved by requests of their own —
+ * and what the form says right now, which the type field and the live example read.
+ */
+export interface PropertyEditorContext {
+    /** The property as the server last answered it, or `null` while the first request is out. */
+    property: Ref<PropertyRow | null>;
+    /** The values of the screen as they are right now, edits included. */
+    values: Ref<ScreenModel>;
+    /** The intervals as the server last answered them; the node keeps its own edits. */
+    intervals: Ref<PropertyInterval[]>;
+    /** Closed for writing: no permission, or a save in flight. */
+    locked: Ref<boolean>;
+}
+export declare const propertyEditorKey: InjectionKey<PropertyEditorContext>;
+export declare function providePropertyEditor(editor: PropertyEditorContext): void;
+/** The editor above this node, or `null` outside one — a demo, a test, a stray screen. */
+export declare function usePropertyEditor(): PropertyEditorContext | null;

package/dist/format.d.ts

@@ -0,0 +1,27 @@
+import { PropertyRow, Words } from './types';
+/**
+ * A map of languages in one of them, the first written one where it is empty. The server sends an
+ * empty map as `[]` — PHP's empty array — which reads as no words at all.
+ */
+export declare function wordsIn(words: Words | string | undefined, locale: string, fallback?: string): string;
+/** What a property is called in the panel: its name, its code, its number — in that order. */
+export declare function propertyName(property: Pick<PropertyRow, 'id' | 'title' | 'code'>, locale: string): string;
+export interface NumberShape {
+    precision?: number | null;
+    prefix?: string | null;
+    suffix?: string | null;
+}
+/**
+ * A number as the site shows it (§3.1): the property's precision, the language's decimal mark,
+ * the prefix and the suffix glued on as written — `M8`, `⌀12 мм`, `1,35 кг`. The same rule as
+ * `Property::formatNumber()` on the server, so the example in the form is what the card will say.
+ */
+export declare function formatNumber(value: number, shape: NumberShape, locale: string): string;
+/** The number a live example shows: twelve, with as many digits as the property keeps. */
+export declare function exampleNumber(precision: number | null | undefined): number;
+/**
+ * The decimals a field of a product keeps: the property's precision, or more when the product
+ * holds more — a number is stored as it is, and a field that rounded `0.85` to `1` would save
+ * the `1`.
+ */
+export declare function fieldDecimals(precision: number, held: number | null): number;

package/dist/i18n.d.ts

@@ -0,0 +1,4 @@
+/** The server's dictionary for this package: `webx-catalog-properties::`. */
+export declare const NAMESPACE = "webx-catalog-properties";
+/** Puts this package's English under the panel's dictionary, once per panel. */
+export declare function useCatalogPropertiesMessages(): void;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { catalogProperties, propertyGroupsOptions, type CatalogPropertiesOptions } from './module';
+export { catalogPropertiesMessages } from './messages';
+export { createPropertiesApi, propertySearch, GROUPS_API, PROPERTIES_API, SETS_API, type CatalogPropertiesApi, type ValueInput, } from './api';
+export { formatNumber, propertyName, wordsIn, type NumberShape } from './format';
+export { propertyEditorKey, providePropertyEditor, usePropertyEditor, type PropertyEditorContext, } from './editor';
+export { default as WxCatalogPropertiesPage } from './PropertiesPage';
+export { default as WxCatalogPropertyEditor } from './PropertyEditorPage';
+export { default as WxCatalogPropertyValues } from './ValuesField';
+export { default as WxCatalogPropertyIntervals } from './IntervalsField';
+export { default as WxCatalogCategoryProperties } from './CategoryPropertiesField';
+export { default as WxCatalogProductProperties } from './ProductPropertiesField';
+export type { CategorySet, EffectiveSet, FilterMode, HeldValue, PropertiesPage, PropertyDetail, PropertyInterval, PropertyQuery, PropertyRow, PropertyType, PropertyValue, ValueNode, ValueOrder, Words, } from './types';