eservices-core 1.0.491 → 1.0.493

package/dist/classes/new/List.d.ts

@@ -1,4 +1,5 @@
 import EventEmitter from "jenesius-event-emitter";
+import { IFilters } from "../../utils/Filter";
 declare const LIST_ROW_KEY = "_______LIST_______ROW_______INDEX________NAME_______";
 export declare class List<T = {}> extends EventEmitter {
     #private;
@@ -8,6 +9,7 @@ export declare class List<T = {}> extends EventEmitter {
     static readonly EVENT_DATA = "list-data: update";
     static readonly EVENT_CONFIG_UPDATE = "list-config:update";
     static readonly EVENT_ORDER_UPDATE = "list-order:update";
+    static readonly EVENT_FILTERS_UPDATE = "list-filters:update";
     /**
      * @description Используется для идентификации ячейки таблицы. В случае для new/updated используется, как уникальный
      * идентификатор записей.
@@ -23,6 +25,7 @@ export declare class List<T = {}> extends EventEmitter {
     private emitUpdateConfig;
     get order(): IListOrder;
     set order(newOrder: IListOrder);
+    get filters(): IFilters;
     constructor(params: IListParams);
     set wait(v: boolean);
     /**
@@ -139,6 +142,10 @@ export declare function useListConfig(list: List): Partial<IListCell>[];
  * @description Возвращает реактивный экземпляр сортировки списка
  * */
 export declare function useListOrder(list: List): IListOrder;
+/**
+ * @description Возвращает реактивный массив фильтров для списка
+ * */
+export declare function useListFilter(list: List): IFilters;
 export declare type ListCellType = 'date' | 'dateWithTime' | 'toggle' | 'select';
 export interface IDefaultListData {
     [LIST_ROW_KEY]: number;
@@ -174,4 +181,8 @@ export interface IReadParams {
     limit: number;
     offset: number;
 }
+export interface IListFilter {
+    label: string;
+    name: string;
+}
 export {};

package/dist/index.d.ts

@@ -60,12 +60,12 @@ import useFormMetadata from "./hooks/use-form-metadata";
 import useFormAction from "./hooks/use-form-action";
 import useFormLabel from "./hooks/use-form-label";
 import useFormRequestData from "./hooks/use-form-request-data";
-import { useListFilter, useListState } from "./classes/List";
+import { useListState } from "./classes/List";
 import useCustomerState from "./hooks/use-customer-state";
 import { useTableRequest, useTableState } from "./classes/table/Table";
 import { useCommunication } from "./classes/Communication";
 import useFormRequest from "./hooks/use-form-request";
-import { useProvideList, useListConfig, useListOrder } from "./classes/new/List";
+import { useProvideList, useListConfig, useListOrder, useListFilter } from "./classes/new/List";
 import { SYMBOL_ROW } from "./classes/table/Table";
 export { 
 /**

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  * eservices-core v1.0.491
+  * eservices-core v1.0.493
   * (c) 2023 ESERVICES
   */
 'use strict';
@@ -2574,13 +2574,6 @@ function useListState$1(list) {
         array,
         state
     };
-}
-function useListFilter(defaultFilter, onFilter) {
-    const filters = vue.ref(defaultFilter);
-    vue.watch(() => filters.value, (v) => onFilter());
-    return {
-        filters
-    };
 }
 
 const SYMBOL_ROW = Symbol("__ROW_INDEX__");
@@ -2741,7 +2734,7 @@ function useTableRequest(table, options) {
 var css_248z$j = "*{\r\n    --extra-fast    :0.1s;\r\n    --fast          :0.2s;\r\n    --medium        :0.3s;\r\n\r\n    box-sizing: border-box;\r\n    --primary: #3949ab\r\n}\r\nhtml, body, #app{\r\n    height: 100%;\r\n}\r\nbody{\r\n    margin: 0;\r\n}\r\nul{\r\n    text-align: left;\r\n}\r\n.flex{\r\n    display: flex;\r\n}\r\n.flex_column{\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n.flex_center{\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.flex_full{\r\n    flex-grow: 1;\r\n}\r\n.grid{\r\n    display: grid;\r\n}\r\n.link{\r\n    text-decoration: var(--link-decoration);\r\n    color: var(--link-color);\r\n}\r\n.link_hover-underline:hover,\r\n.link_hover_underline:hover{\r\n    text-decoration: underline;\r\n}\r\n.link_full{\r\n    position: absolute;\r\n    height: 100%;\r\n    width: 100%;\r\n    left: 0;\r\n    top:0;\r\n}\r\n.text_sm{\r\n    font-weight: 400;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n}\r\n.text_md{\r\n    font-size: 14px;\r\n    line-height: 20px;\r\n}\r\n.text_lg{\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n}\r\n.text_size_xxl{\r\n    font-size: 18px;\r\n    line-height: 25px;\r\n}\r\n.text_center{\r\n    text-align: center;\r\n}\r\n.text_bold{\r\n    font-weight: 600;\r\n}\r\n.text_nowrap{\r\n    white-space: nowrap;\r\n}\r\n.text_right{\r\n    text-align: right;\r\n}\r\n.text_center{\r\n    text-align: center;\r\n}\r\n.text_size_sm{\r\n    font-size: 12px;\r\n    line-height: 130%;\r\n}\r\n.text_size_md{\r\n    font-size: 14px;\r\n    line-height: 140%;\r\n}\r\n.text_error{\r\n    color: red;\r\n}\r\n.title_sm{\r\n    font-weight: 600;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n}\r\n.title_md{\r\n    font-weight: 600;\r\n    font-size: 24px;\r\n    line-height: 32px;\r\n}\r\n.title_lg{\r\n    font-weight: bold;\r\n    font-size: 32px;\r\n    line-height: 48px;\r\n}\r\n.title_xxl{\r\n    font-weight: bold;\r\n    font-size: 48px;\r\n    line-height: 64px;\r\n}\r\n.cursor_pointer{\r\n    cursor: pointer;\r\n}\r\n.cursor_default{\r\n    cursor: default;\r\n}\r\nbutton{\r\n    outline: none;\r\n    user-select: none;\r\n\r\n    transition: background-color 0.2s;\r\n}\r\n.button{\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    outline: none;\r\n}\r\n.button_main{\r\n    background-color: var(--button-background);\r\n    color: var(--button-color);\r\n}\r\n.button_main:focus{\r\n    background-color: var(--button-background-active);\r\n}\r\n.button_main:active{\r\n    background-color: var(--button-background-active);\r\n}\r\n.button_white{\r\n    background-color: var(--white);\r\n    color: var(--main);\r\n}\r\n.button_sm{\r\n    height: 30px;\r\n    width: 130px;\r\n}\r\n.button_shadow{\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);\r\n}\r\n.button_lg{\r\n    font-weight: 600;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n\r\n    padding: 12px 0;\r\n    height: 50px;\r\n    width: 200px;\r\n}\r\n.button_disabled{\r\n    background-color: var(--gray-1);\r\n}\r\n.button_resolve{\r\n    background-color: var(--main);\r\n    color: var(--white);\r\n    border-radius: 2px;\r\n}\r\n.button_reject{\r\n    border: 1px solid var(--color-dark);\r\n    border-radius: 2px;\r\n}\r\n.button_md{\r\n    height: 30px;\r\n    padding: 0 10px;\r\n\r\n    min-width: 80px;\r\n}\r\n.button_disabled{\r\n    background-color: var(--button-disabled-background-color);\r\n    cursor: pointer !important;\r\n}\r\n*{\r\n\r\n\r\n\r\n}\r\n.color_main,\r\n.color__text_main{\r\n    color: var(--main);\r\n}\r\n.color__text_black{\r\n    color: var(--black-1);\r\n}\r\n.color__text_gray{\r\n    color: var(--text-gray);\r\n}\r\n.color__text_red,\r\n.color_red{\r\n    color: var(--red);\r\n}\r\n.color__text_white{\r\n    color: var(--white);\r\n}\r\n.background_orange{\r\n    background-color: var(--orange)\r\n}\r\n.background_red{\r\n    background-color: var(--red)\r\n}\r\n.color_dark{\r\n    color: var(--dark);\r\n}\r\n.color_light{\r\n    color: var(--light);\r\n}\r\n.move-vertical-enter-active,\r\n.move-vertical-leave-active {\r\n    transition: transform 0.5s ease;\r\n}\r\n.move-vertical-enter-from,\r\n.move-vertical-leave-to {\r\n   transform: translateY(-10px);\r\n}\r\n.move-horizontal-enter-active,\r\n.move-horizontal-leave-active {\r\n    transition: transform 0.5s;\r\n}\r\n.move-horizontal-enter-from,\r\n.move-horizontal-leave-to {\r\n    transform: translateX(-40px);\r\n}\r\n.modal-vertical-enter-active , .modal-vertical-leave-active, .modal-default {\r\n    transition: transform var(--medium);\r\n}\r\n.modal-vertical-enter-active .modal-default, .modal-vertical-leave-active .modal-default{\r\n    transform: translateY(-100px);\r\n}\r\n.move-vertical-fast-enter-active,\r\n.move-vertical-fast-leave-active {\r\n    transition: transform var(--fast) ease;\r\n}\r\n.move-vertical-fast-enter-from,\r\n.move-vertical-fast-leave-to {\r\n    transform: translateY(-20px);\r\n}\r\n.slide-up-enter-active,\r\n.slide-up-leave-active {\r\n    transition: transform var(--fast) ease, opacity var(--fast);\r\n\r\n}\r\n.slide-up-enter-from,\r\n.slide-up-leave-to {\r\n    transform: translateY(20px);\r\n    opacity: 0;\r\n}\r\n.opacity-enter-active,\r\n.opacity-leave-active {\r\n    transition: opacity var(--fast) ease;\r\n}\r\n.opacity-enter-from,\r\n.opacity-leave-to {\r\n    opacity: 0;\r\n}\r\n.modal-default{\r\n    background-color: var(--white);\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    width: auto;\r\n\r\n    background: var(--white);\r\n    border-radius: var(--border-radius);\r\n\r\n\r\n}\r\n.modal-default__head{\r\n    background-color: var(--black-1);\r\n    text-align: center;\r\n    padding: 5px 0;\r\n    border-radius: 6px 6px 0 0;\r\n}\r\n.modal-default__body{\r\n    gap: 20px;\r\n    padding: 0 15px;\r\n}\r\n.modal-default__foot{\r\n    padding: 30px 0;\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n.tooltip-help-elem{}\r\n.hint-tooltip{\r\n    display: block;\r\n\r\n    z-index: 222;\r\n    margin: auto;\r\n    pointer-events: none;\r\n\r\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);\r\n}\r\n.tooltip-help-circle-in,\r\n.tooltip-help-circle-out{\r\n    border-radius: 50%;\r\n}\r\n.tooltip-help-undefined{\r\n    border-radius: 50px;\r\n}\r\n.tooltip-card{\r\n    position: fixed;\r\n    z-index: 315;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    width: 480px;\r\n    height: fit-content;\r\n\r\n    margin: auto;\r\n\r\n    border-radius: 10px;\r\n    background-color: var(--hint-background);\r\n\r\n    cursor: default;\r\n}\r\n.tooltip-card__foot{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    background-color: var(--hint-background-navigation);\r\n    border-radius: 10px;\r\n\r\n    padding: 20px ;\r\n}\r\n.tooltip-card__foot-current{\r\n    font-weight: 600;\r\n    font-size: 20px;\r\n    line-height: 24px;\r\n\r\n    color: var(--white);\r\n}\r\n.tooltip-card__body{\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    gap: 8px;\r\n\r\n    padding: 20px 20px 10px 20px;\r\n}\r\n.tooltip-card__body-title{\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    line-height: 24px;\r\n\r\n    color: var(--white);\r\n}\r\n.tooltip-card__body-text{\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n\r\n    color: var(--white);\r\n}\r\n.tooltip-card__foot-button_back{\r\n    background-color: var(--main-1);\r\n}\r\n.tooltip-card__foot-button_next{\r\n    background-color: var(--hint);\r\n}\r\n.tooltip-card__body-close{\r\n    position: absolute;\r\n    right: 22px;\r\n    top: 12px;\r\n    width: 20px;\r\n    height: 16px;\r\n    opacity: 0.3;\r\n\r\n    cursor: pointer;\r\n}\r\n.tooltip-card__body-close:hover {\r\n    opacity: 1;\r\n}\r\n.tooltip-card__body-close:before,\r\n.tooltip-card__body-close:after {\r\n    position: absolute;\r\n    left: 15px;\r\n    content: ' ';\r\n    height: 21px;\r\n    width: 2px;\r\n    background-color: white;\r\n}\r\n.tooltip-card__body-close:before {\r\n    transform: rotate(45deg);\r\n}\r\n.tooltip-card__body-close:after {\r\n    transform: rotate(-45deg);\r\n}\r\n.tooltip-card-container-wrap{\r\n    pointer-events: none;\r\n    position: absolute;\r\n    left: 0;\r\n    top:0;\r\n\r\n    z-index: 123132;\r\n\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n.tooltip-card-container-wrap>div{\r\n\r\n    height: 100%;\r\n    width: 100%;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n.tester-box-tooltip{\r\n    pointer-events: all;\r\n}\r\n.position_relative{\r\n    position: relative;\r\n}\r\n.position_absolute{\r\n    position: absolute;\r\n}\r\n.gap_5{\r\n    gap: 5px;\r\n}\r\n.gap_10{\r\n    gap: 10px;\r\n}\r\n.gap_20{\r\n    gap: 20px;\r\n}\r\n.margin-0{\r\n    margin: 0;\r\n}\r\n.widget-input{\r\n\tbackground-color: var(--input-background);\r\n\tborder: var(--input-border);\r\n\tborder-radius: var(--input-border-radius);\r\n\tcolor: var(--input-color);\r\n}\r\n.widget-input:disabled{\r\n\tbackground-color: var(--input-background-disabled);\r\n\tborder: var(--input-border-disabled);\r\n}\r\n.widget-input[error=\"true\"] {\r\n\tborder: var(--input-border-error);\r\n}\r\n.widget-input::placeholder{\r\n\tcolor: var(--input-placeholder-color);\r\n}\r\n.widget-input:disabled::placeholder{\r\n\tcolor: var(--input-placeholder-color-disabled);\r\n}\r\n.input_error{\r\n\tborder: 1px solid red !important;\r\n}\r\n.input_size_md{\r\n\theight: var(--input-height);\r\n}\r\n.input-title{\r\n\tfont-size: 12px;\r\n\tline-height: 16px;\r\n\tcolor: #667085;\r\n\r\n\tmargin: 4px 0;\r\n}\r\n.widget-table{\r\n    border-collapse: collapse;\r\n}\r\n.widget-table_mini{\r\n\r\n}\r\n.widget-table_mini p{\r\n    margin: 0;\r\n}\r\n.widget-table_mini{\r\n\r\n}\r\n.list-cell-link>a{\r\n    position: absolute;\r\n    left: 0;\r\n    top:0;\r\n    z-index: 1;\r\n    height: 100%;\r\n    width: 100%;\r\n\r\n    cursor: pointer;\r\n}\r\n.list-cell-link>p{\r\n    font-weight: 500;\r\n}\r\n.widget-table__cell{\r\n    padding: 0 20px;\r\n    font-weight: 400;\r\n    font-size: 14px;\r\n    line-height: 19px;\r\n\r\n    color: #4F4F4F;\r\n}\r\n.widget-table-cell_use{\r\n    cursor: pointer;\r\n}\r\n.widget-table-cell_select{\r\n    width: min-content  ;\r\n}\r\n.table-cell-toggle{\r\n    --border-color: black;\r\n    position: relative;\r\n    display: grid;\r\n    place-content: center;\r\n    border: 1px solid var(--border-color);\r\n    height: 15px;\r\n    aspect-ratio: 1 / 1;\r\n    border-radius: 50%;\r\n}\r\n.table-cell-toggle_active:after {\r\n    content: \"\";\r\n    border-radius: 50%;\r\n    background-color: var(--border-color);\r\n    height: 9px;\r\n    aspect-ratio: 1/1;\r\n}\r\n.widget-list-cell-text {\r\n\r\n}\r\n";
 styleInject(css_248z$j);
 
-var _primaryKeys, _config, _order, _wait, _readData, _saveData;
+var _primaryKeys, _config, _order, _filters, _wait, _readData, _saveData;
 const LIST_ROW_KEY = '_______LIST_______ROW_______INDEX________NAME_______';
 class List$1 extends EventEmitter {
     constructor(params) {
@@ -2762,6 +2755,18 @@ class List$1 extends EventEmitter {
          * */
         _config.set(this, []);
         _order.set(this, []);
+        _filters.set(this, new Proxy({}, {
+            set: (target, p, value, receiver) => {
+                target[p] = value;
+                this.emit(List$1.EVENT_FILTERS_UPDATE, target);
+                return true;
+            },
+            deleteProperty: (target, p) => {
+                delete target[p];
+                this.emit(List$1.EVENT_FILTERS_UPDATE, target);
+                return true;
+            }
+        }));
         _wait.set(this, false);
         _readData.set(this, (...args) => Promise);
         _saveData.set(this, () => { });
@@ -2787,6 +2792,9 @@ class List$1 extends EventEmitter {
         __classPrivateFieldSet(this, _order, newOrder);
         this.emit(List$1.EVENT_ORDER_UPDATE, this.order);
     }
+    get filters() {
+        return __classPrivateFieldGet(this, _filters);
+    }
     set wait(v) {
         __classPrivateFieldSet(this, _wait, v);
         this.emit(jenesiusVueForm.Form.EVENT_WAIT, __classPrivateFieldGet(this, _wait));
@@ -2959,13 +2967,14 @@ class List$1 extends EventEmitter {
         };
     }
 }
-_primaryKeys = new WeakMap(), _config = new WeakMap(), _order = new WeakMap(), _wait = new WeakMap(), _readData = new WeakMap(), _saveData = new WeakMap();
+_primaryKeys = new WeakMap(), _config = new WeakMap(), _order = new WeakMap(), _filters = new WeakMap(), _wait = new WeakMap(), _readData = new WeakMap(), _saveData = new WeakMap();
 /**
  * @description Event triggers when array was updated, set new or pushed new, or updated, or deleted.
  * */
 List$1.EVENT_DATA = 'list-data: update';
 List$1.EVENT_CONFIG_UPDATE = 'list-config:update';
 List$1.EVENT_ORDER_UPDATE = 'list-order:update';
+List$1.EVENT_FILTERS_UPDATE = 'list-filters:update';
 /**
  * @description Хук используется для того, чтобы подключить считывание данных с листу.
  * Т.к. Filter или order могут меняться readParams может выступать не только как объект, но и фнкция, которая будет возв
@@ -3092,6 +3101,17 @@ function useListOrder(list) {
         list.read();
     });
     return order;
+}
+/**
+ * @description Возвращает реактивный массив фильтров для списка
+ * */
+function useListFilter(list) {
+    const filters = vue.reactive(list.filters);
+    list.on(List$1.EVENT_FILTERS_UPDATE, arr => {
+        jenesiusVueForm.utils.softReplaceObject(list.filters, arr);
+        list.read();
+    });
+    return filters;
 }
 
 class Table extends List$1 {

package/dist/utils/Filter.d.ts

@@ -1,4 +1,4 @@
-interface IFilters {
+export interface IFilters {
     [filterName: string]: IFilterDate | IFilterString | IFilterEnum | number;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eservices-core",
-  "version": "1.0.491",
+  "version": "1.0.493",
   "description": "Core library",
   "author": "",
   "scripts": {
@@ -51,7 +51,7 @@
   },
   "peerDependencies": {
     "date-and-time": "^2.0.1",
-    "jenesius-vue-form": "^2.2.5",
+    "jenesius-vue-form": "^2.2.7",
     "jenesius-vue-modal": "^1.5.0",
     "socket.io-client": "^4.5.2",
     "vue": "^3.0.0",