@snabcentr/vue-ui-lib 4.19.14 → 4.21.0

package/dist/src/components/orders/index.d.ts

@@ -1,5 +1,6 @@
 export * from './simple';
 export * from './blocks';
 export { default as ScOrdersList } from './orders-list.vue';
+export { default as ScOrderHighlightSettings } from './order-highlight-settings.vue';
 export { default as ScOrderInfo } from './order-info.vue';
 export { default as ScShortTextOrderInfo } from './short-text-order-info.vue';

package/dist/src/components/orders/order-highlight-settings.vue.d.ts

@@ -0,0 +1,31 @@
+import { IOrderHighlightSettings } from '../../orders/interfaces/i-order-highlight-settings';
+import { IOrderStatus } from '@snabcentr/common-lib';
+/**
+ * Компонент настройки выделения заказов цветом.
+ */
+declare const _default: import('vue').DefineComponent<{
+    /**
+     * Текущие настройки выделения.
+     */
+    settings: IOrderHighlightSettings;
+    /**
+     * Список статусов заказа для настройки. По умолчанию - справочник статусов.
+     */
+    statuses?: IOrderStatus[];
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:settings": (value: IOrderHighlightSettings) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * Текущие настройки выделения.
+     */
+    settings: IOrderHighlightSettings;
+    /**
+     * Список статусов заказа для настройки. По умолчанию - справочник статусов.
+     */
+    statuses?: IOrderStatus[];
+}> & Readonly<{
+    "onUpdate:settings"?: ((value: IOrderHighlightSettings) => any) | undefined;
+}>, {
+    statuses: IOrderStatus[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/components/orders/orders-list.vue.d.ts

@@ -1,5 +1,6 @@
 import { IFilterGroup, IOrderInfo, IPagination, ISortRequestParams } from '@snabcentr/common-lib';
 import { IOrdersTableFields } from '../../properties/interfaces/i-orders-table-fields';
+import { IOrderHighlightSettings } from '../../orders/interfaces/i-order-highlight-settings';
 /**
  * Компонент представления списка заказов.
  */
@@ -28,8 +29,15 @@ declare const _default: import('vue').DefineComponent<{
     pagination?: IPagination;
     /**
      * Признак, определяющий, использовать ли индикацию в стилях ячеек таблицы заказов.
+     * Без `highlightSettings` включает выделение всех маркеров заказа (статусы не выделяются).
      */
     useCellIndication?: boolean;
+    /**
+     * Настройки выделения заказов цветом: какие статусы и маркеры подсвечивать.
+     * Цвета берутся из единой палитры (`getOrderStatusColors`, `getOrderMarkerColors`).
+     * При наличии настроек `useCellIndication` не учитывается.
+     */
+    highlightSettings?: IOrderHighlightSettings;
     /**
      * Признак, определяющий, включена ли сортировка по заголовкам столбцов таблицы.
      */
@@ -53,7 +61,25 @@ declare const _default: import('vue').DefineComponent<{
      * выбора не отображается (например, заказ с информацией об оплате). По умолчанию выбор доступен.
      */
     isRowSelectable?: (row: IOrderInfo) => boolean;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}, {
+    /**
+     * Перезагружает список заказов с индикатором загрузки, сохраняя текущие фильтры, сортировку и страницу
+     * (например, когда виджет счётчиков сообщил об изменении количества заказов).
+     */
+    reload: () => void;
+    /**
+     * Проверяет в фоне, изменился ли список; при изменениях откладывает новую страницу до `applyPendingUpdate`.
+     */
+    checkForUpdates: () => Promise<boolean>;
+    /**
+     * Применяет отложенное обновление списка.
+     */
+    applyPendingUpdate: () => boolean;
+    /**
+     * Отбрасывает отложенное обновление списка.
+     */
+    discardPendingUpdate: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:checkedRowKeys": (value: (string | number)[]) => any;
 } & {
     "click:client-name": (client: import('@snabcentr/common-lib').IClientShortInfo, event: any) => any;
@@ -85,8 +111,15 @@ declare const _default: import('vue').DefineComponent<{
     pagination?: IPagination;
     /**
      * Признак, определяющий, использовать ли индикацию в стилях ячеек таблицы заказов.
+     * Без `highlightSettings` включает выделение всех маркеров заказа (статусы не выделяются).
      */
     useCellIndication?: boolean;
+    /**
+     * Настройки выделения заказов цветом: какие статусы и маркеры подсвечивать.
+     * Цвета берутся из единой палитры (`getOrderStatusColors`, `getOrderMarkerColors`).
+     * При наличии настроек `useCellIndication` не учитывается.
+     */
+    highlightSettings?: IOrderHighlightSettings;
     /**
      * Признак, определяющий, включена ли сортировка по заголовкам столбцов таблицы.
      */
@@ -120,6 +153,7 @@ declare const _default: import('vue').DefineComponent<{
     sort: ISortRequestParams[];
     filters: IFilterGroup;
     showAttachedUserColumn: boolean;
+    highlightSettings: IOrderHighlightSettings;
     selectable: boolean;
     tableMinWidth: number;
     pagination: IPagination;

package/dist/src/components/orders/simple/index.d.ts

@@ -4,3 +4,5 @@ export { default as ScOrderDeliveryLabel } from './order-delivery-label.vue';
 export { default as ScOrderPayment } from './order-payment.vue';
 export { default as ScOrderProductInfo } from './order-product-info.vue';
 export { default as ScCreatorUserTypeTag } from './creator-user-type-tag.vue';
+export { default as ScOrderStatusTag } from './order-status-tag.vue';
+export { default as ScOrderColorSwatch } from './order-color-swatch.vue';

package/dist/src/components/orders/simple/order-color-swatch.vue.d.ts

@@ -0,0 +1,16 @@
+import { IOrderStatusColors } from '../../../orders/interfaces/i-order-status-colors';
+/**
+ * Компонент цветной плашки-образца статуса или маркера заказа.
+ */
+declare const _default: import('vue').DefineComponent<{
+    /**
+     * Цвета статуса или маркера заказа.
+     */
+    colors: IOrderStatusColors;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * Цвета статуса или маркера заказа.
+     */
+    colors: IOrderStatusColors;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/src/components/orders/simple/order-common-info.vue.d.ts

@@ -1,5 +1,6 @@
 import { IOrderInfoProperty } from '../../../properties/interfaces/i-order-info-property';
 import { IOrdersTableFields } from '../../../properties/interfaces/i-orders-table-fields';
+import { IOrderHighlightSettings } from '../../../orders/interfaces/i-order-highlight-settings';
 /**
  * Компонент общего представления данных о заказе.
  */
@@ -8,10 +9,18 @@ declare const _default: import('vue').DefineComponent<IOrderInfoProperty & IOrde
      * URL страницы заказов. В качестве указания идентификатора заказа необходимо использовать значение `:id`.
      */
     orderUrl: string;
+    /**
+     * Настройки выделения: какие статусы и маркеры подсвечивать цветом из единой палитры.
+     */
+    highlightSettings?: IOrderHighlightSettings;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IOrderInfoProperty & IOrdersTableFields & {
     /**
      * URL страницы заказов. В качестве указания идентификатора заказа необходимо использовать значение `:id`.
      */
     orderUrl: string;
+    /**
+     * Настройки выделения: какие статусы и маркеры подсвечивать цветом из единой палитры.
+     */
+    highlightSettings?: IOrderHighlightSettings;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/src/components/orders/simple/order-status-tag.vue.d.ts

@@ -0,0 +1,53 @@
+import { IReference } from '@snabcentr/common-lib';
+/**
+ * Компонент отображения статуса заказа в едином цветовом оформлении.
+ */
+declare const _default: import('vue').DefineComponent<{
+    /**
+     * Статус заказа.
+     */
+    status: IReference;
+    /**
+     * Детализирующий статус (подстатус) заказа. При наличии выводится в скобках после статуса.
+     */
+    statusDetail?: IReference | null;
+    /**
+     * Вариант оформления: `filled` - тег с мягкой заливкой, `text` - только цветной текст.
+     */
+    variant?: "filled" | "text";
+    /**
+     * Размер тега (для варианта `filled`).
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Признак отображения цветной точки перед названием статуса.
+     */
+    showDot?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    /**
+     * Статус заказа.
+     */
+    status: IReference;
+    /**
+     * Детализирующий статус (подстатус) заказа. При наличии выводится в скобках после статуса.
+     */
+    statusDetail?: IReference | null;
+    /**
+     * Вариант оформления: `filled` - тег с мягкой заливкой, `text` - только цветной текст.
+     */
+    variant?: "filled" | "text";
+    /**
+     * Размер тега (для варианта `filled`).
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Признак отображения цветной точки перед названием статуса.
+     */
+    showDot?: boolean;
+}> & Readonly<{}>, {
+    size: "small" | "medium" | "large";
+    variant: "filled" | "text";
+    statusDetail: IReference | null;
+    showDot: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/src/enums/index.d.ts

@@ -1,2 +1,3 @@
+export * from './order-marker-enum';
 export * from './orders-table-fields';
 export * from './window-resolution-enum';

package/dist/src/enums/order-marker-enum.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Перечисление маркеров заказа, которые выделяются цветом в таблице заказов помимо статуса.
+ */
+export declare enum OrderMarkerEnum {
+    /**
+     * Заказ с товарами, которых нет в наличии.
+     */
+    NotInStock = "not_in_stock",
+    /**
+     * Заказ с товарами «под заказ».
+     */
+    OnOrder = "on_order",
+    /**
+     * Крупный заказ.
+     */
+    LargeOrder = "large_order",
+    /**
+     * Доставка на завтра.
+     */
+    NextDayDelivery = "next_day_delivery"
+}

package/dist/src/orders/index.d.ts

@@ -1 +1,3 @@
-export * from './interfaces/events';
+export * from './interfaces';
+export * from './order-marker-colors';
+export * from './order-status-colors';

package/dist/src/orders/interfaces/i-order-highlight-settings.d.ts

@@ -0,0 +1,15 @@
+import { OrderMarkerEnum } from '../../enums/order-marker-enum';
+/**
+ * Настройки выделения заказов цветом в таблице заказов: какие статусы и маркеры подсвечивать.
+ * Сами цвета не настраиваются и берутся из единой палитры.
+ */
+export interface IOrderHighlightSettings {
+    /**
+     * Слаги статусов заказа, которые выделяются цветом.
+     */
+    statuses: string[];
+    /**
+     * Маркеры заказа, которые выделяются цветом.
+     */
+    markers: OrderMarkerEnum[];
+}

package/dist/src/orders/interfaces/i-order-row-properties.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Атрибуты строки таблицы заказов: классы индикации и CSS-переменные с цветами статуса.
+ */
+export interface IOrderRowProperties {
+    /**
+     * CSS-классы строки.
+     */
+    class?: string;
+    /**
+     * Инлайновые стили строки (CSS-переменные цветов статуса при выделении статусов).
+     */
+    style?: Record<string, string>;
+    /**
+     * Обработчик двойного клика по строке.
+     */
+    onDblclick?: () => void;
+}

package/dist/src/orders/interfaces/i-order-status-colors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Набор цветов статуса заказа для разных вариантов отображения.
+ *
+ * Все три цвета принадлежат одному оттенку, поэтому статус узнаётся одинаково
+ * и там, где цвет выражен только текстом (таймлайн, мобильная строка),
+ * и там, где он выражен заливкой (ячейка таблицы, тег).
+ */
+export interface IOrderStatusColors {
+    /**
+     * Основной насыщенный цвет статуса: текст на светлом фоне, точка таймлайна, рамка.
+     */
+    color: string;
+    /**
+     * Цвет мягкой заливки: фон ячейки таблицы или тега.
+     */
+    backgroundColor: string;
+    /**
+     * Цвет текста поверх мягкой заливки.
+     */
+    textOnBackgroundColor: string;
+}

package/dist/src/orders/interfaces/i-order-status-tag-color.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Цвета статуса заказа в формате свойства `color` компонента `n-tag` NaiveUI.
+ */
+export interface IOrderStatusTagColor {
+    /**
+     * Цвет заливки тега.
+     */
+    color: string;
+    /**
+     * Цвет текста тега.
+     */
+    textColor: string;
+    /**
+     * Цвет рамки тега.
+     */
+    borderColor: string;
+}

package/dist/src/orders/interfaces/index.d.ts

@@ -0,0 +1,5 @@
+export * from './events';
+export * from './i-order-highlight-settings';
+export * from './i-order-row-properties';
+export * from './i-order-status-colors';
+export * from './i-order-status-tag-color';

package/dist/src/orders/order-marker-colors.d.ts

@@ -0,0 +1,39 @@
+import { OrderMarkerEnum } from '../enums/order-marker-enum';
+import { IOrderStatusColors } from './interfaces/i-order-status-colors';
+import { IOrderInfo } from '@snabcentr/common-lib';
+/**
+ * Единый источник правды для цветов маркеров заказа (помимо статуса).
+ *
+ * Цвета сохранены прежними, чтобы сотрудники продолжали узнавать «жёлтенькие» и «красные» заказы:
+ * «нет в наличии» и «под заказ» - жёлтая заливка с красным текстом, крупный заказ и доставка на завтра - красная заливка с белым текстом.
+ */
+export declare const ORDER_MARKER_COLORS: ReadonlyMap<OrderMarkerEnum, IOrderStatusColors>;
+/**
+ * Названия маркеров заказа для отображения пользователю.
+ */
+export declare const ORDER_MARKER_NAMES: ReadonlyMap<OrderMarkerEnum, string>;
+/**
+ * Список всех маркеров заказа в порядке отображения.
+ */
+export declare const ALL_ORDER_MARKERS: readonly OrderMarkerEnum[];
+/**
+ * Возвращает набор цветов маркера заказа.
+ *
+ * @param marker Маркер заказа.
+ * @returns Цвета маркера.
+ */
+export declare const getOrderMarkerColors: (marker: OrderMarkerEnum) => IOrderStatusColors;
+/**
+ * Возвращает название маркера заказа.
+ *
+ * @param marker Маркер заказа.
+ * @returns Название маркера.
+ */
+export declare const getOrderMarkerName: (marker: OrderMarkerEnum) => string;
+/**
+ * Определяет, какие маркеры есть у заказа.
+ *
+ * @param order Данные заказа.
+ * @returns Список маркеров заказа.
+ */
+export declare const getOrderMarkers: (order: IOrderInfo) => OrderMarkerEnum[];

package/dist/src/orders/order-status-colors.d.ts

@@ -0,0 +1,42 @@
+import { IOrderStatusColors } from './interfaces/i-order-status-colors';
+import { IOrderStatusTagColor } from './interfaces/i-order-status-tag-color';
+import { OrderStatusEnum } from '@snabcentr/common-lib';
+/**
+ * Слаг статуса заказа: значение перечисления или произвольная строка (например, из данных API), может отсутствовать.
+ */
+export type OrderStatusSlugType = OrderStatusEnum | string | null | undefined;
+/**
+ * Цвета статуса заказа, слаг которого неизвестен или отсутствует (нейтральный серый).
+ */
+export declare const DEFAULT_ORDER_STATUS_COLORS: IOrderStatusColors;
+/**
+ * Единый источник правды для цветов статусов заказа.
+ *
+ * Используется таблицей заказов, тегом статуса на странице заказа, таймлайном истории статусов
+ * и мобильным представлением строки заказа. Цвета согласованы с постановкой: «ожидает поставки» - жёлтый,
+ * «принят в работу» - оранжевый, «выставлен счёт» - синий; остальные подобраны так, чтобы не пересекаться
+ * по оттенку. Оттенки взяты из палитры Tailwind (заливка 200, текст 700/800).
+ */
+export declare const ORDER_STATUS_COLORS: ReadonlyMap<OrderStatusEnum, IOrderStatusColors>;
+/**
+ * Возвращает набор цветов для статуса заказа по его слагу.
+ *
+ * @param slug Слаг статуса заказа.
+ * @returns Цвета статуса; для неизвестного или пустого слага - {@link DEFAULT_ORDER_STATUS_COLORS}.
+ */
+export declare const getOrderStatusColors: (slug?: OrderStatusSlugType) => IOrderStatusColors;
+/**
+ * Возвращает цвета статуса заказа в формате свойства `color` компонента `n-tag` NaiveUI.
+ *
+ * @param slug Слаг статуса заказа.
+ * @returns Цвет заливки, текста и рамки тега.
+ */
+export declare const getOrderStatusTagColor: (slug?: OrderStatusSlugType) => IOrderStatusTagColor;
+/**
+ * Возвращает цвета статуса заказа в виде CSS-переменных для инлайновых стилей элемента.
+ * Переменные: `--sc-order-status-color`, `--sc-order-status-bg`, `--sc-order-status-text`.
+ *
+ * @param slug Слаг статуса заказа.
+ * @returns Объект стилей с CSS-переменными.
+ */
+export declare const getOrderStatusCssVariables: (slug?: OrderStatusSlugType) => Record<string, string>;

package/package.json

@@ -4,7 +4,7 @@
     "keywords": [],
     "author": "Sergey S. Smirnov <dev@snabcentr.com>",
     "type": "module",
-    "version": "4.19.14",
+    "version": "4.21.0",
     "license": "ISC",
     "scripts": {
         "dev": "vite",