flamerest 1.0.119 → 1.0.120

package/.vscode/tasks.json

@@ -0,0 +1,11 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "publish REST JS",
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "publishx"]
+    }
+  ]
+}

package/REST.ts

@@ -0,0 +1,837 @@
+import { createHmac } from 'crypto';
+
+/**
+ * Базовый ответ от сервера
+ */
+export type BaseResponse<T> = {
+    type: string,
+    status: number,
+    ok: boolean,
+    data?: T,
+    errors: object | undefined,
+    message: string | undefined,
+}
+
+/**
+ * Часть ответа с пагинацией
+ */
+export type Paginated = {
+    pages: {
+        page: number,
+        perPage: number,
+        count: number,
+        total: number,
+    }
+}
+
+/**
+ * Стандартный ответ от Request с несколькими строками
+ */
+export type Rows<T> = BaseResponse<Array<T>> & Paginated;
+
+export type Row<T> = BaseResponse<T> & Paginated;
+
+export type CustomRequest<T> = BaseResponse<T>;
+
+export type CustomAnyRequest = BaseResponse<any>;
+
+
+/**
+ * Стандартный ответ от Request с изменённой строкой
+ */
+export type SavedObject<T> = BaseResponse<T>;
+
+/**
+ * Результат авторизации
+ */
+export type Authorized = {
+    isAuthorized: boolean;
+    User: {
+        avatar: string,
+        country: string,
+        id: number,
+        lang: string,
+        name: string,
+        role: string,
+        user_hash?: string
+    };
+    errors: { [key: string]: any };
+    token: string;
+}
+
+export class FLAMEREST {
+
+    /**
+     * Адрес серва
+     */
+    public SERVER: string;
+
+    /**
+     * Стандартное число запросов на страницу
+     */
+    public perPageDefault: number = 20;
+
+    /**
+     * Будет вызван, если любой из запросов вернут требование авторизоваться
+     */
+    public unauthorized_callback: (() => void) | undefined;
+
+    /**
+     * Токен приложения конкретного клиента для отправки пуш уведомлений именно ему
+     */
+    public pushNotificationToken: string | null = null;
+
+    /**
+     * Версия api
+     */
+    public version: string;
+
+    /**
+     * Если авторизация по токену, то он сюда подставляется
+     */
+    public isAuthByJWTQuery: boolean = true;
+
+    /**
+     * Режим авторизации: Bearer|Link
+     */
+    public authMode: "Bearer" | "Link" = "Bearer";
+
+    public token: string | null = null;
+
+
+    constructor(server_address?: string, localhost_endpoint?: string, unauthorized_callback?: () => void, version?: string) {
+        if (typeof window === 'undefined') {
+            // SSR: используем предоставленный адрес или дефолтный
+            this.SERVER = server_address ?? "http://localhost/";
+        } else {
+            // Client: определяем адрес по window.location или из параметра
+            if (server_address === undefined) {
+                this.SERVER = window.location.protocol + "//" + window.location.host;
+            } else {
+                this.SERVER = server_address;
+            }
+
+            if (window.location.hostname === 'localhost' && localhost_endpoint !== undefined) {
+                this.SERVER = localhost_endpoint;
+            }
+        }
+
+        // Убираем слэш в конце, если он есть
+        this.SERVER = this.SERVER.endsWith('/') ? this.SERVER.substring(0, this.SERVER.length - 1) : this.SERVER;
+
+        this.unauthorized_callback = unauthorized_callback;
+        this.version = version ?? 'v1';
+    }
+
+    /**
+     * Установка плагина для Vue
+     * @param Vue 
+     * @param options 
+     */
+    install(Vue: any, options: any) {
+        if (typeof window !== 'undefined') {
+            (window as any).REST = this;
+        }
+    }
+
+    /**
+     *
+     * @param {string} url Адрес
+     * @param {object|string|FormData} params Параметры, которые надо передать, могут быть в виде объекта или строки
+     * @param {string} type Тип
+     * @param {string} responseType Тип ответа: json или blob
+     * @param {boolean} isNeedToken нужен ли токен для запроса
+     * @param {Object} customHeaders объект с доп заголовками, которые надо включить в запрос
+     */
+    request(url: string, params: object | string | FormData, type: 'GET' | 'POST' | 'PUT' | 'DELETE' = 'GET', responseType: 'json' | 'blob' = 'json', isNeedToken = true, customHeaders: Record<string, string> = {}): Promise<BaseResponse<any> & Partial<Paginated>> {
+
+        // Нормализуем параметры, если они есть
+        if (typeof params === "object" && params !== null) {
+            if (!(params instanceof FormData)) {
+                params = JSON.stringify(params);
+            }
+
+            if (type === 'GET') {
+                type = 'POST';
+            }
+            responseType = 'json';
+        }
+
+        // Подставляем сервер автоматом в запрос начинающийся с /
+        if (url[0] === '/' && url[1] !== '/') {
+            url = this.SERVER + url;
+        }
+
+        const that = this;
+
+        // Фетч поддерживается - получаем через него, это быстрее
+        if (typeof fetch === "function") {
+            return new Promise(async (resolve, reject) => {
+                try {
+                    // Авторизация
+                    if (this.isAuthByJWTQuery && isNeedToken === true && this.token !== null && this.token !== undefined && this.token !== 'undefined') {
+                        switch (this.authMode) {
+                            case 'Link':
+                                url = url + (url.indexOf("?") === -1 ? "?" : "&") + "access-token=" + this.token;
+                                break;
+                            default:
+                                Object.assign(customHeaders, { 'Authorization': 'Bearer ' + this.token });
+                                break;
+                        }
+                    }
+
+                    // Уникальный user_hash (только на клиенте)
+                    let user_hash: string | null = null;
+                    if (typeof window !== 'undefined' && window.localStorage) {
+                        user_hash = window.localStorage.getItem('user_hash');
+                        if (user_hash) {
+                            Object.assign(customHeaders, { udata: user_hash });
+                        }
+                    }
+
+                    // Тело запроса
+                    const headers: Record<string, string> = { ...customHeaders };
+                    if (!(params instanceof FormData)) {
+                        headers['Content-type'] = 'application/json; charset=utf-8';
+                    }
+
+                    const requestBody: RequestInit = {
+                        method: type,
+                        mode: 'cors',
+                        headers: headers
+                    };
+
+                    if (type !== 'GET') {
+                        // Принимает и formData тоже и чистую json строку
+                        requestBody.body = params;
+                    }
+
+                    // Создаём подпись каждого запроса
+                    let SIGN = "empty";
+                    try {
+                        // Используем user_hash для подписи, если он есть
+                        SIGN = await this.hmac_sha256(requestBody.body, user_hash ?? "");
+                    } catch (ex) {
+                        // console.error('Can`t create a request sign');
+                    }
+                    (requestBody.headers as any)['sign'] = SIGN;
+
+                    // Делаем запрос
+                    const response = await fetch(url, requestBody);
+
+                    // Тело ответа формируется в два этапа: сперва заголовки, затем ответ
+                    const ResolveBody: any = {
+                        status: response.status,
+                        ok: response.ok
+                    };
+
+                    // Ответ с ошибкой
+                    if (!response.ok) {
+                        // Тело ошибки
+                        ResolveBody.message = response.statusText;
+                        try {
+                            ResolveBody.errors = await response.json();
+                            // Ошибки
+                            switch (ResolveBody.status) {
+                                // Ошибка валидации: Собираем все ошибки полей
+                                case 422:
+                                    const Errs: { [key: string]: string } = {};
+                                    for (const err of ResolveBody.errors) {
+                                        Errs[err['field']] = Errs[err['field']] === undefined ? err['message'] : Errs[err['field']] + ". " + err['message']
+                                    }
+                                    ResolveBody.errors = Errs;
+                                    break;
+                                case 401:
+                                    if (typeof this.unauthorized_callback === 'function') {
+                                        this.unauthorized_callback();
+                                    }
+                                    break;
+                            }
+                        } catch (exjson) {
+                            ResolveBody.errors = await response.text();
+                        }
+
+                        // Рапортуем об ошибке
+                        console.error('Ошибка загрузки [' + response.status + '] ' + url + ": " + response.statusText, ResolveBody, ResolveBody.errors);
+                        resolve(ResolveBody);
+                        return;
+                    }
+
+                    // Загрузка успешна
+                    // Если в заголовках указана паджинация
+                    let pages: Paginated['pages'] | undefined = undefined;
+                    if (response.headers.get('X-Pagination-Current-Page') !== null) {
+                        pages = {
+                            page: parseInt(response.headers.get('X-Pagination-Current-Page')!),
+                            perPage: parseInt(response.headers.get('X-Pagination-Per-Page')!),
+                            count: parseInt(response.headers.get('X-Pagination-Page-Count')!),
+                            total: parseInt(response.headers.get('X-Pagination-Total-Count')!),
+                        }
+                    }
+
+                    // Заполняем тело ответа заголовками
+                    ResolveBody.type = "json";
+                    ResolveBody.data = {};
+                    ResolveBody.pages = pages;
+
+                    // Получаем тело ответа
+                    switch (responseType) {
+                        case 'json': ResolveBody.data = await response.text(); break;
+                        case 'blob': {
+                            // Записываем имя файла и mime-тип
+                            ResolveBody.filename = 'file'; // TODO: response.headers.get('content-disposition').split('filename=')[1];
+                            ResolveBody.MimeType = response.headers.get('content-Type');
+                            ResolveBody.data = await response.blob();
+
+                            // Если ответ в виде блоба, сразу его отдаём без декодировки
+                            resolve(ResolveBody);
+                            return;
+                        }
+                    }
+
+                    // Декодируем тело ответа, если оно есть
+                    if (ResolveBody.data === undefined) {
+                        ResolveBody.errors = ["Принятый ответ пуст"];
+                        console.error("Принятый ответ пуст", ResolveBody);
+                        resolve(ResolveBody);
+                        return;
+                    };
+
+                    // Пустой ответ конвертируем в валидный пустой объект
+                    if (ResolveBody.data === "") ResolveBody.data = "{}";
+
+                    // Декодируем
+                    try {
+                        ResolveBody.data = JSON.parse(ResolveBody.data);
+                    } catch (ex) {
+                        ResolveBody.errors = ["Ошибка декодирования"];
+                        console.error("Ошибка декодирования", ResolveBody);
+                        reject(ResolveBody);
+                        return;
+                    }
+
+                    // Если пришёл ответ: неавторизовано, и указан коллбек авторизации - запускаем его
+                    if ((ResolveBody.data as any).Auth === false) {
+                        if (that.unauthorized_callback !== undefined) { that.unauthorized_callback(); resolve(ResolveBody); return; }
+                    }
+
+                    // Возвращаем успешную загрузку
+                    resolve(ResolveBody);
+
+                } catch (err: any) {
+                    // Ошибка загрузки любого типа
+                    // TODO: на этом этапе стоит сделать, чтобы он пробовал повторить запрос, если это GET
+                    if (typeof err !== 'object' || err.message === undefined) {
+                        err = {
+                            status: 0,
+                            message: '',
+                        };
+                    }
+
+                    if (typeof err.body === 'object') {
+                        err.body = await err.body;
+                    }
+                    console.error('Ошибка загрузки [' + 0 + '] ' + url + ": " + err.message);
+                    reject(err);
+                }
+            });
+        }
+        else {
+            // Фетч не поддерживается (старые браузеры или окружения) - возвращаем промисифицированный XHR
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open(type, url, true);
+                xhr.responseType = 'json';
+                xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
+                xhr.withCredentials = false;
+                xhr.send(params as any);
+
+                xhr.onload = function () {
+                    if (xhr.status !== 200) {
+                        console.error('Ошибка загрузки [' + xhr.status + '] ' + url + ": " + xhr.statusText);
+                        return reject({
+                            status: xhr.status,
+                            message: xhr.statusText
+                        });
+                    }
+
+                    let pages: Paginated['pages'] | undefined = undefined;
+                    if (xhr.getResponseHeader('X-Pagination-Current-Page') !== null) {
+                        pages = {
+                            page: parseInt(xhr.getResponseHeader('X-Pagination-Current-Page')!),
+                            perPage: parseInt(xhr.getResponseHeader('X-Pagination-Per-Page')!),
+                            count: parseInt(xhr.getResponseHeader('X-Pagination-Page-Count')!),
+                            total: parseInt(xhr.getResponseHeader('X-Pagination-Total-Count')!),
+                        }
+                    }
+
+                    return resolve({
+                        status: xhr.status,
+                        type: xhr.responseType,
+                        data: xhr.response,
+                        pages: pages,
+                        ok: true,
+                        errors: undefined,
+                        message: ''
+                    });
+                };
+
+                xhr.onerror = function () {
+                    console.error('Ошибка загрузки [' + 0 + '] ' + url + ": Нет соединения с сервером");
+                    return reject({
+                        status: 0,
+                        message: "Нет соединения с сервером"
+                    });
+                };
+            });
+        }
+    }
+
+
+    /**
+     * Получить выборку из таблицы через REST
+     * @param {string} table
+     * @param {object | string | null} where Позволяет делать выборку из связанных таблиц, надо только их указать через название таблицы sites.id=5, и указать колонку в expand
+     * @param {object | Array<string> | null} extfields
+     * @param {object | Array<string> | string | null} fields
+     * @param {object | Array<string> | string | null} sortfields
+     * @param {number | undefined} page
+     * @param {number | undefined} perPage
+     * @param {boolean | undefined} RemoveDuplicates
+     * @param {any} titles Это чтобы мы могли контроллить какие названия полей мы будет загружать при экспорте, чтобы они были как в таблице
+     * @param {any} tree дерево
+     * @param {any} params Доп параметры для кастомизации запроса на беке
+     * @param {any} exportData имя файла для экспорта
+     * @return Promise<Rows<T>>
+     */
+    get<T>(table: string, where?: object | string | null, extfields?: object | Array<string> | null, fields?: object | Array<string> | string | null, sortfields?: object | Array<string> | string | null, page?: number, perPage?: number, RemoveDuplicates?: boolean, format?: any, titles?: any, tree?: any, params?: any, exportData?: any): Promise<Rows<T>> {
+        // Нормализуем имена таблиц
+        table = table.replace(/_/g, "");
+        let responseType: 'json' | 'blob' = "json";
+        // Генерим запрос
+        const query = this.SERVER + '/api/' + this.version + '/' + table;
+        const json: any = {};
+        // Генерим условия
+        if (where !== undefined && where !== null) json.where = where;
+        if (tree !== undefined && tree !== null) json.tree = tree;
+        if (fields !== undefined && fields !== null) json.fields = fields;
+        if (sortfields !== undefined && sortfields !== null) json.sort = sortfields;
+        if (extfields !== undefined && extfields !== null) json.extfields = extfields;
+        if (params !== undefined && params !== null) json.params = params;
+        if (RemoveDuplicates !== undefined && RemoveDuplicates !== null) json.RemoveDuplicates = true;
+        if (titles !== undefined && titles !== null) json.titles = titles;
+        // экспорт
+        if (exportData !== undefined && exportData !== null) {
+            json.export = {
+                format: exportData.format ?? 'xlsx',
+                titles: exportData.titles ?? [],
+                filename: exportData.filename ?? 'export_' + Date.now() + ".xlsx",
+            };
+            responseType = "blob";
+        }
+        // Страницы
+        json['per-page'] = perPage === undefined ? this.perPageDefault : perPage;
+        json['page'] = page === undefined ? 1 : page;
+        return this.request(query, JSON.stringify(json), 'POST', responseType) as Promise<Rows<T>>;
+    }
+
+
+    /**
+     * Получить все записи по запросу [постранично]
+     * @param {string} table
+     * @param {object} params
+     * @returns {Promise<Rows<T>>}
+     */
+    all<T>(table: string, params?: {
+        where?: object,
+        extfields?: object | Array<string>,
+        fields?: object | Array<string>,
+        sort?: Array<string>,
+        page?: number,
+        perPage?: number,
+        tree?: number,
+        params?: any,
+        export?: {
+            format?: 'xlsx' | 'csv',
+            titles?: Array<string>,
+            filename?: string,
+        }
+    }): Promise<Rows<T>> {
+        return this.get(table, params?.where, params?.extfields, params?.fields, params?.sort, params?.page, params?.perPage, undefined, undefined, undefined, params?.tree, params?.params, params?.export);
+    }
+
+    /**
+       * Получить одну запись по ID или по условию выборки [первая запись]
+       * @param {string} table
+       * @param {number|string|object} IDOrWhere
+       * @param {object|Array} extfields
+       * @param {object|Array} fields
+       * @param {string} primaryKeyName если указан ID, то указать название первичного ключа, если от id он отличается
+     */
+    async one<T>(table: string, IDOrWhere: number | string | object, extfields: object | Array<string> | null = null, fields: object | Array<string> | null = null, primaryKeyName: string = 'id'): Promise<T | null> {
+        let where: object = {};
+        if (typeof IDOrWhere === 'string' || typeof IDOrWhere === 'number') where = { [primaryKeyName]: IDOrWhere };
+        else if (typeof IDOrWhere === 'object') where = IDOrWhere;
+        else throw new Error("Нужно передавать ID или объект");
+
+        const resp = await this.get<T>(table, where, extfields, fields, null, 1, 1);
+        if (resp.errors) return Promise.reject(resp);
+        if (!resp.data || resp.data.length === 0) return null;
+
+        return resp.data[0];
+    }
+
+    /**
+     * Создать новую запись
+     * @param {string} table
+     * @param {object} values
+     * @param {number|string|null} appendTo
+     * @param {number|string|null} insertAfter
+     * @param {boolean|null} insertFirst
+     */
+    async create<T>(table: string, values: object, appendTo: number | string | null = null, insertAfter: number | string | null = null, insertFirst: boolean | null = null): Promise<SavedObject<T>> {
+        // Нормализуем имена таблиц
+        table = table.replace(/_/g, "");
+        // Подготовить значения
+        if (!(values instanceof FormData)) {
+            await this.prepare(values);
+        }
+
+        return this.request(this.SERVER + '/api/' + this.version + '/' + table + '/create?'
+            + (appendTo !== null ? '&appendTo=' + appendTo : '')
+            + (insertAfter !== null ? '&insertAfter=' + insertAfter : '')
+            + (insertFirst !== null ? '&insertFirst=' + insertFirst : '')
+            , (values instanceof FormData ? values : JSON.stringify(values)), 'POST') as Promise<SavedObject<T>>;
+    }
+
+    /**
+     * Удалить запись
+     * @param {string} table
+     * @param {number|string} id
+     * @param {object|null} byFields Если указан, удаляет по этим параметрам
+     */
+    async remove(table: string, id: number | string = 0, byFields: object | null = null): Promise<boolean | any> {
+        // Нормализуем имена таблиц
+        table = table.replace(/_/g, "");
+        let params = {};
+        if (byFields instanceof Object) params = byFields;
+        const resp = await this.request(this.SERVER + '/api/' + this.version + '/' + table + '/delete?id=' + id, JSON.stringify(params), 'DELETE');
+        if (resp.status === 204) return true;
+        return resp;
+    }
+
+    /**
+     * Редактировать значения
+     * @param {string} table
+     * @param {number|string} ID
+     * @param {object} values
+     * @param {number|string|null} appendTo
+     * @param {number|string|null} insertAfter
+     * @param {boolean|null} insertFirst
+     */
+    async edit<T>(table: string, ID: number | string, values: object, appendTo: number | string | null = null, insertAfter: number | string | null = null, insertFirst: boolean | null = null): Promise<SavedObject<T>> {
+        // Нормализуем имена таблиц
+        table = table.replace(/_/g, "");
+        // Подготовить значения
+        if (!(values instanceof FormData)) {
+            await this.prepare(values);
+        }
+        return this.request(this.SERVER + '/api/' + this.version + '/' + table + '/update?id=' + ID
+            + (appendTo !== null ? '&appendTo=' + appendTo : '')
+            + (insertAfter !== null ? '&insertAfter=' + insertAfter : '')
+            + (insertFirst !== null ? '&insertFirst=' + insertFirst : '')
+            , (values instanceof FormData ? values : JSON.stringify(values)), 'POST') as Promise<SavedObject<T>>;
+    }
+
+    /**
+     * Получить схемы всех таблиц
+     */
+    getCRUDInfo(): Promise<object> {
+        if (typeof window !== 'undefined' && window.sessionStorage) {
+            const cachedSchema = window.sessionStorage.getItem("crudschema");
+            if (cachedSchema) {
+                return new Promise((resolve) => { resolve(JSON.parse(cachedSchema)) });
+            }
+        }
+        return this.request(this.SERVER + '/site/crudschema', {}, 'GET')
+            .then(res => {
+                if (typeof window !== 'undefined' && window.sessionStorage) {
+                    // Кешируем схему в браузере на время текущей сессии (в пределах ОДНОЙ вкладки)
+                    window.sessionStorage.setItem("crudschema", JSON.stringify(res));
+                }
+                return res;
+            });
+    }
+
+    /**
+     * Авторизоваться
+     * @param {string|undefined} username 
+     * @param {string|undefined} password 
+     * @param {object|string|null} pushNotificationToken
+     */
+    async auth(username?: string, password?: string, pushNotificationToken?: object | string | null): Promise<Authorized> {
+        let resp: BaseResponse<Authorized>;
+        if (this.token && !username) {
+            resp = await this.request(this.SERVER + '/auth/auth', JSON.stringify({}), 'POST', 'json', true);
+        } else {
+            resp = await this.request(this.SERVER + '/auth/auth', JSON.stringify({ login: username, password: password, pushNotificationToken: (pushNotificationToken ?? this.pushNotificationToken ?? null) }), 'POST', 'json', false);
+        }
+
+        if (resp.errors || !resp.data) {
+            return Promise.reject(resp.errors ?? new Error("No data received"));
+        }
+
+        // после успешной авторизации устанавливаем токен
+        if (typeof resp.data.token === 'string') this.token = resp.data.token;
+
+        // Сохраняем хеш юзера автоматически (только на клиенте)
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const user_hash = window.localStorage.getItem('user_hash');
+            if (resp?.data?.User?.user_hash && resp.data.User.user_hash !== user_hash) {
+                window.localStorage.setItem('user_hash', resp.data.User.user_hash);
+            }
+        }
+        return resp.data;
+    }
+
+    /**
+     * Зарегистрироваться с этим логином и паролем
+     * @param {string|null} email 
+     * @param {string|null} username 
+     * @param {string} password 
+     * @param {string|null} name 
+     * @param {object|string|null} pushNotificationToken
+     * @param {any} data
+     */
+    async signup(email: string | null, username: string | null, password: string, name: string | null = null, pushNotificationToken: object | string | null = null, data: any = null): Promise<Authorized> {
+        const resp = await this.request(this.SERVER + '/auth/signup', JSON.stringify({
+            login: username, email: email, password: password,
+            name: name, data: data, pushNotificationToken: (pushNotificationToken ?? this.pushNotificationToken ?? null)
+        }), 'POST', 'json', false);
+
+        if (resp.errors || !resp.data) {
+            return Promise.reject(resp.errors ?? new Error("No data received"));
+        }
+
+        // после успешной авторизации устанавливаем токен
+        if (typeof resp.data.token === 'string') this.token = resp.data.token;
+
+        return resp.data;
+    }
+
+    /**
+     * Выйти из системы
+     */
+    logout(): Promise<object> {
+        return this.request(this.SERVER + '/auth/logout', '{}', 'POST');
+    }
+
+    /**
+     * Восстановление пароля
+     * Запрос на восстановление пароля
+     * @param {*} email
+     * @returns
+     */
+    async ResetPasswordRequest(email: string): Promise<any> {
+        const resp = await this.request(this.SERVER + '/auth/resetpasswordrequest', JSON.stringify({ email: email }), 'POST', 'json', false);
+        if (resp.errors || !resp.data) return Promise.reject(resp.errors ?? new Error("No data received"));
+        return resp.data;
+    }
+
+    /**
+     * Восстановление пароля
+     * Проверка токена восстановления
+     * @param {*} token токен подтверждения
+     * @returns
+     */
+    async ResetPasswordTokenCheck(token: string): Promise<any> {
+        const resp = await this.request(this.SERVER + '/auth/resettokencheck', JSON.stringify({ token: token }), 'POST', 'json', false);
+        if (resp.errors || !resp.data) return Promise.reject(resp.errors ?? new Error("No data received"));
+        return resp.data;
+    }
+
+    /**
+     * Восстановление пароля
+     * Сохранение нового пароля
+     * @param {*} token
+     * @param {*} password
+     * @returns
+     */
+    async ResetPasswordSaveNewPassword(token: string, password: string): Promise<any> {
+        const resp = await this.request(this.SERVER + '/auth/resetconfirm', JSON.stringify({ token: token, password: password }), 'POST', 'json', false);
+        if (resp.errors || !resp.data) return Promise.reject(resp.errors ?? new Error("No data received"));
+        return resp.data;
+    }
+
+    /**
+     * Подготовить объект под загрузку: загрузить данные из элементов Input [type=file] / Clipboard / DataTransfer [Drag&Drop/Clipboard]
+     * @param {object} values
+     */
+    async prepare(values: { [key: string]: any }, asFormData = false): Promise<any> {
+
+        // В SSR этот метод не будет обрабатывать файлы, т.к. DOM и File API недоступны.
+        if (typeof window === 'undefined') {
+            return values;
+        }
+
+        // Если в один из параметров передан FileList или input[type=file], т.е. нужно загрузить файлы
+        const formData = new FormData();
+
+        for (let val in values) {
+            // Пустые значения нам не нужны
+            if (values[val] === undefined || values[val] === null) continue;
+
+            // Любой вариант захода делаем массивом
+            let valuesArr: any[] = Array.isArray(values[val]) ? values[val] : [values[val]];
+
+            // Идём по каждому значению в массиве
+            for (let valueKey in valuesArr) {
+                let value = valuesArr[valueKey];
+                // Преобразуем
+                let isRef = false;
+                if (value instanceof Object
+                    && value.hasOwnProperty('_value')
+                    && (
+                        value._value instanceof Event ||
+                        value._value instanceof HTMLInputElement ||
+                        value._value instanceof ClipboardEvent ||
+                        value._value instanceof DataTransfer ||
+                        value._value instanceof FileList
+                    )
+                ) { value = value.value; isRef = true }
+
+                if (value instanceof Event && value.target instanceof HTMLInputElement && value.target.type === 'file') value = value.target.files;
+                if (value instanceof HTMLInputElement && value.type === 'file') value = value.files;
+                if (value instanceof ClipboardEvent) value = value.clipboardData?.files;
+                if (value instanceof DataTransfer) value = value.files;
+
+                if (value instanceof FileList) {
+                    const newValues: any[] = [];
+                    const files = Array.from(value);
+                    for (let index = 0; index < files.length; index++) {
+                        formData.append(val + "[]", files[index]);
+                        newValues.push({
+                            'name': files[index].name,
+                            'data': asFormData ? null : await this.readFileAsync(files[index]),
+                            'number': index,
+                            'id': this.generateID(32)
+                        });
+                    }
+
+                    if (Array.isArray(values[val])) {
+                        values[val].splice(parseInt(valueKey), 1, ...newValues);
+                    } else {
+                        values[val] = newValues;
+                    }
+                }
+            }
+        }
+        formData.append("json", JSON.stringify(values));
+        return asFormData ? formData : values;
+    }
+
+
+    /**
+     * Прочесть файл асинхронно
+     * @param {File} file
+     * @param {'data' | 'text'} readAs
+     * @returns {Promise<string>}
+     */
+    readFileAsync(file: File, readAs: 'data' | 'text' = 'data'): Promise<string | ArrayBuffer | null> {
+        return new Promise((resolve, reject) => {
+            let reader = new FileReader();
+            reader.onloadend = () => { resolve(reader.result); };
+            reader.onerror = reject;
+
+            if (readAs === 'data') reader.readAsDataURL(file);
+            if (readAs === 'text') reader.readAsText(file);
+        });
+    }
+
+    /**
+     * Заполнить существующий объект пришедшими из БД данными
+     * сохраняя при этом оригинальные классы и функции
+     * @param {*} object
+     * @param {*} values
+     */
+    fillObject<T extends object>(object: T, values: any): T {
+        for (let prop in object) {
+            if (!values.hasOwnProperty(prop)) continue;
+            if (typeof values[prop] === 'object' && typeof (object as any)[prop] === 'object' && values[prop] !== null && (object as any)[prop] !== null) {
+                this.fillObject((object as any)[prop], values[prop]);
+                continue;
+            }
+            (object as any)[prop] = values[prop];
+        }
+        return object;
+    }
+
+    generateID(length: number): string {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        let counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
+        }
+        return result;
+    }
+
+    /**
+     *
+     * @param {string} data
+     * @param {string} key
+     * @returns
+     */
+    async hmac_sha256(message: BodyInit | null | undefined, secret_key: string): Promise<string> {
+
+        if (message === null || message === undefined) message = "";
+        if (typeof message !== 'string') message = JSON.stringify(message);
+
+        const enc = new TextEncoder();
+        const encodedKey = enc.encode(secret_key);
+        const encodedMessage = enc.encode(message);
+
+        const data = encodedMessage;
+        const key = encodedKey;
+
+        if (typeof window === 'undefined') {
+            const hash = createHmac('sha256', key).update(data).digest('hex');
+            return Promise.resolve(hash);
+        } else {
+
+            if (typeof window.crypto?.subtle === 'undefined') throw new Error("Can`t create hash");
+
+            return window.crypto.subtle
+                .importKey(
+                    'raw',
+                    key,
+                    { name: 'HMAC', hash: { name: 'SHA-256' } },
+                    false,
+                    ['sign', 'verify']
+                )
+                .then(key => window.crypto.subtle.sign('HMAC', key, data))
+                .then(signature => {
+                    const signatureArray = new Uint8Array(signature);
+                    return Array.from(signatureArray)
+                        .map(byte => byte.toString(16).padStart(2, '0'))
+                        .join('');
+                });
+        }
+    }
+}
+
+
+/**
+ * Экземпляр-синглтон класса FLAMEREST.
+ * Используйте его для всех запросов в приложении.
+ * `import REST from './REST.ts';`
+ */
+const REST = new FLAMEREST();
+
+if (typeof window !== 'undefined') {
+    (window as any).REST = REST;
+}
+
+export default REST; 

package/docs/docs.html

@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Документация по компоненту FlameRestTable</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; }
+        h1, h2, h3 { color: #2c3e50; border-bottom: 2px solid #eaecef; padding-bottom: 0.3em; }
+        h1 { font-size: 2.5em; }
+        h2 { font-size: 2em; }
+        h3 { font-size: 1.5em; }
+        code { background-color: #e8e8e8; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 3px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
+        pre { background-color: #f6f8fa; border: 1px solid #ddd; border-radius: 3px; padding: 16px; overflow: auto; }
+        pre code { padding: 0; margin: 0; background-color: transparent; border: none; }
+        .prop-name { font-weight: bold; font-family: monospace; }
+        .prop-type { font-style: italic; color: #e96900; }
+        .prop-default { color: #999; }
+        .prop-desc { margin-top: 5px; margin-left: 20px;}
+        .prop-block { margin-bottom: 20px; border-left: 3px solid #ccc; padding-left: 15px; }
+        table { border-collapse: collapse; width: 100%; margin-bottom: 1em;}
+        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; }
+        .required { color: #d04437; font-weight: bold; }
+        .note { background-color: #fff9e6; border-left: 4px solid #ffc107; padding: 10px 15px; margin: 1em 0; }
+    </style>
+</head>
+<body>
+
+    <h1>Документация по компоненту FlameRestTable</h1>
+
+    <p>Этот документ описывает, как использовать Vue-компонент <code>FlameRestTable</code> для создания мощных и настраиваемых таблиц с поддержкой REST API на базе библиотеки <code>flamerest</code>.</p>
+
+    <h2>Содержание</h2>
+    <ul>
+        <li><a href="#setup">Установка и настройка</a></li>
+        <li><a href="#basic-usage">Базовое использование</a></li>
+        <li><a href="#props">Props компонента</a></li>
+        <li><a href="#table-opts">Конфигурация (TableOpts)</a></li>
+        <li><a href="#column-opts">Конфигурация колонок (IColumn)</a></li>
+        <li><a href="#slots">Слоты</a></li>
+        <li><a href="#methods">Методы</a></li>
+        <li><a href="#example">Полный пример</a></li>
+    </ul>
+
+    <h2 id="setup">Установка и настройка</h2>
+    <p>Для использования компонента, сперва установите его из npm:</p>
+    <pre><code>npm install flameresttable flamerest</code></pre>
+    <p>Затем импортируйте компонент <code>FlameRestTable</code> и класс опций <code>TableOpts</code> в вашем Vue-компоненте.</p>
+    <pre><code class="language-vue">&lt;template&gt;
+  &lt;div&gt;
+    &lt;FlameRestTable
+      :model="UserModel"
+      :opts="tableOpts"
+      ref="flameTable"
+    /&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script setup&gt;
+import { ref } from 'vue';
+import { FlameRestTable, TableOpts } from 'flameresttable';
+import UserModel from './models/User'; // Пример пути до вашей REST-модели, она должна быть унаследована от REST.Model из flamerest
+
+const flameTable = ref(null); // Ref для доступа к экземпляру таблицы
+
+const tableOpts = new TableOpts();
+// ... настройка tableOpts
+&lt;/script&gt;</code></pre>
+
+    <h2 id="basic-usage">Базовое использование</h2>
+    <p>Для отображения таблицы достаточно передать модель данных и, при необходимости, объект с опциями.</p>
+    <pre><code class="language-javascript">// UserModel.ts - Пример модели
+// Модель должна быть унаследована от REST.Model из библиотеки `flamerest`.
+import REST from 'flamerest'; 
+
+export default class User extends REST.Model {
+    static resourceName = 'users';
+    static primaryKeys = ['id'];
+}
+
+// ParentComponent.vue
+import { FlameRestTable, TableOpts } from 'flameresttable';
+import User from './models/User';
+
+const tableOpts = new TableOpts();
+tableOpts.set('id', { title: 'ID' });
+tableOpts.set('username', { title: 'Имя пользователя' });
+tableOpts.set('email', { title: 'Email' });
+</code></pre>
+    <p>В шаблоне:</p>
+    <pre><code class="language-vue">&lt;FlameRestTable :model="User" :opts="tableOpts" /&gt;</code></pre>
+    <p>Этого достаточно, чтобы отрендерить таблицу с данными из модели <code>User</code>, которая автоматически сделает запрос на бэкенд.</p>
+
+    <h2 id="props">Props компонента</h2>
+    <div class="prop-block">
+        <div class="prop-name">model <span class="required">*</span></div>
+        <div class="prop-type">Function (Class)</div>
+        <div class="prop-desc">Класс модели данных, который будет использоваться для запросов к REST API. Модель должна быть унаследована от <code>REST.Model</code> из пакета <code>flamerest</code>.</div>
+    </div>
+    <div class="prop-block">
+        <div class="prop-name">opts</div>
+        <div class="prop-type">TableOpts</div>
+        <div class="prop-default">new TableOpts()</div>
+        <div class="prop-desc">Объект с настройками таблицы. Создается как экземпляр класса <code>TableOpts</code>, импортированного из <code>flameresttable</code>.</div>
+    </div>
+     <div class="prop-block">
+        <div class="prop-name">rows</div>
+        <div class="prop-type">Array</div>
+        <div class="prop-default">[]</div>
+        <div class="prop-desc">Используется для первоначальной инициализации, но в основном компонент сам загружает данные через модель.</div>
+    </div>
+
+    <h2 id="table-opts">Конфигурация (TableOpts)</h2>
+    <p>Класс <code>TableOpts</code> предоставляет широкие возможности для настройки поведения и внешнего вида таблицы.</p>
+    
+    <h3>Основные опции</h3>
+    <ul>
+        <li><span class="prop-name">autoload</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Загружать ли данные автоматически при монтировании компонента.</li>
+        <li><span class="prop-name">rowSelectors</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Показывать ли чекбоксы для выбора строк.</li>
+        <li><span class="prop-name">displayMode</span>: <span class="prop-type">'table' | 'custom'</span> (default: <code>'table'</code>) - Режим отображения. <code>'table'</code> для стандартной таблицы, <code>'custom'</code> для кастомного рендеринга через слот <code>CustomRow</code>.</li>
+        <li><span class="prop-name">onRowClickOpenSlot</span>: <span class="prop-type">'popup' | 'rowspace' | 'none'</span> (default: <code>'rowspace'</code>) - Что делать при клике на строку. <code>'rowspace'</code> открывает под-пространство (слот <code>RowSubSlot</code>), <code>'popup'</code> открывает модальное окно редактирования, <code>'none'</code> ничего не делает.</li>
+        <li><span class="prop-name">lang</span>: <span class="prop-type">'ru' | 'en'</span> (default: <code>'ru'</code>) - Язык для встроенных текстовых элементов.</li>
+        <li><span class="prop-name">LoadParams</span>: <span class="prop-type">ITableLoadParams</span> (default: <code>{}</code>) - Стандартные параметры для запроса данных (например, <code>{ expand: ['profile'] }</code>).</li>
+    </ul>
+
+    <h3>Кнопки и действия</h3>
+    <ul>
+        <li><span class="prop-name">Add</span>: <span class="prop-type">object</span> - Настройки кнопки "Добавить".
+            <ul>
+                <li><code>can</code>: <span class="prop-type">boolean</span> (default: <code>true</code>)</li>
+                <li><code>buttonTitle</code>: <span class="prop-type">string</span> (default: <code>'Добавить'</code>)</li>
+            </ul>
+        </li>
+        <li><span class="prop-name">Edit</span>: <span class="prop-type">object</span> - Настройки кнопки "Изменить".
+            <ul><li><code>can</code>: <span class="prop-type">boolean</span> (default: <code>true</code>)</li></ul>
+        </li>
+        <li><span class="prop-name">Remove</span>: <span class="prop-type">object</span> - Настройки кнопки "Удалить".
+            <ul><li><code>can</code>: <span class="prop-type">boolean</span> (default: <code>true</code>)</li></ul>
+        </li>
+        <li><span class="prop-name">Export</span>: <span class="prop-type">object</span> - Настройки экспорта.
+            <ul>
+                <li><code>isShow</code>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Показать выпадающий список с действиями экспорта.</li>
+                <li><code>CSV.can</code>: <span class="prop-type">boolean</span> (default: <code>false</code>) - Показать отдельную кнопку экспорта в CSV.</li>
+            </ul>
+        </li>
+    </ul>
+
+    <h3>Пагинация</h3>
+    <ul>
+       <li><span class="prop-name">Pagination.type</span>: <span class="prop-type">'scrollable' | 'pages'</span> (default: <code>'pages'</code>) - Тип пагинации. <code>'pages'</code> - классическая, <code>'scrollable'</code> - бесконечная прокрутка.</li>
+    </ul>
+
+     <h3>Обработчики событий (Callbacks)</h3>
+    <ul>
+        <li><span class="prop-name">onBeforeUpdate</span>: <span class="prop-type">(filters: object, isExport: boolean) => boolean</span> - Функция, вызываемая перед каждым запросом данных. Если вернет <code>false</code>, запрос будет отменен.</li>
+        <li><span class="prop-name">customDownloadHandler</span>: <span class="prop-type">(data: Blob, filename: string, mime: string) => void</span> - Кастомный обработчик для скачивания файлов экспорта.</li>
+        <li><span class="prop-name">Popup.load</span>: <span class="prop-type">async (row, table) => void</span> - Вызывается при открытии попапа редактирования, для дополнительной загрузки данных.</li>
+        <li><span class="prop-name">Popup.beforeEdit</span>: <span class="prop-type">async (row, table) => boolean</span> - Вызывается перед сохранением изменений. Если вернет <code>false</code>, сохранение будет отменено.</li>
+        <li><span class="prop-name">Popup.beforeAdd</span>: <span class="prop-type">async (row, table) => boolean</span> - Аналогично для добавления новой записи.</li>
+    </ul>
+
+    <h3>Методы для конфигурации колонок</h3>
+    <ul>
+        <li><span class="prop-name">set(name, opts)</span>: Устанавливает опции для колонки.</li>
+        <li><span class="prop-name">delete(name | names)</span>: Скрывает колонку(и) из всех представлений (таблица, фильтры, попап).</li>
+        <li><span class="prop-name">addVirtual(name, opts)</span>: Добавляет "виртуальную" колонку, которая не существует в модели, но может использоваться для кастомных фильтров или отображения.</li>
+    </ul>
+
+    <h2 id="column-opts">Конфигурация колонок (IColumn)</h2>
+    <p>Опции для каждой колонки задаются через метод <code>opts.set('columnName', { ... })</code>. Каждая колонка может иметь множество настроек, сгруппированных по областям применения.</p>
+
+    <h3>Общие</h3>
+    <ul>
+        <li><span class="prop-name">title</span>: <span class="prop-type">string</span> - Глобальный заголовок для колонки.</li>
+    </ul>
+
+    <h3><code>Table</code> - Отображение в таблице</h3>
+    <ul>
+        <li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Показывать ли колонку в таблице.</li>
+        <li><span class="prop-name">title</span>: <span class="prop-type">string</span> - Заголовок колонки в таблице (переопределяет общий <code>title</code>).</li>
+        <li><span class="prop-name">value</span>: <span class="prop-type">(row, column) => string</span> - Функция для форматирования значения в ячейке.</li>
+        <li><span class="prop-name">isRawValue</span>: <span class="prop-type">boolean</span> (default: <code>false</code>) - Если <code>true</code>, результат функции <code>value</code> будет вставлен как HTML (осторожно, XSS!).</li>
+        <li><span class="prop-name">click</span>: <span class="prop-type">(row, column) => void</span> - Обработчик клика по ячейке.</li>
+        <li><span class="prop-name">classes</span> / <span class="prop-name">classesHeader</span>: <span class="prop-type">string</span> - CSS классы для ячеек и заголовка.</li>
+        <li><span class="prop-name">width</span>: <span class="prop-type">number</span> - Ширина колонки в пикселях.</li>
+    </ul>
+
+    <h3><code>Filter</code> - Фильтрация</h3>
+    <ul>
+        <li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Показывать ли фильтр для этой колонки.</li>
+        <li><span class="prop-name">type</span>: <span class="prop-type">"text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector"</span> - Тип фильтра.</li>
+        <li><span class="prop-name">selector.multiselect</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Для типа <code>selector</code>, разрешить ли множественный выбор.</li>
+        <li><span class="prop-name">selector.mode</span>: <span class="prop-type">'vertical' | 'horizontal'</span> (default: <code>'vertical'</code>) - Режим отображения селектора.</li>
+    </ul>
+
+    <h3><code>Popup</code> - Попап добавления/редактирования</h3>
+    <ul>
+        <li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Показывать ли поле в попапе.</li>
+        <li><span class="prop-name">isEnabled</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Доступно ли поле для редактирования.</li>
+        <li><span class="prop-name">title</span> / <span class="prop-name">desc</span> / <span class="prop-name">placeholder</span>: <span class="prop-type">string</span> - Заголовки и подсказки.</li>
+        <li><span class="prop-name">popupType</span>: <span class="prop-type">"string" | "text" | "button" | "date" | "selector" | "image" | "file"</span> - Тип поля в форме.</li>
+        <li><span class="prop-name">isSendFromAdd</span> / <span class="prop-name">isSendFromEdit</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Отправлять ли значение поля при создании/редактировании.</li>
+    </ul>
+    
+    <h3><code>Selector</code> - Для связанных данных</h3>
+    <p>Эта секция используется для всех селекторов: в фильтрах, в попапах и для замены ID на читаемые значения в таблице.</p>
+    <ul>
+        <li><span class="prop-name">model</span>: <span class="prop-type">Class</span> - Модель, из которой будут автоматически загружаться значения для селектора.</li>
+        <li><span class="prop-name">loader</span>: <span class="prop-type">(rows?) => ITableSelectorItem[]</span> - Альтернатива `model`, функция для ручной загрузки значений.</li>
+        <li><span class="prop-name">values</span>: <span class="prop-type">ITableSelectorItem[]</span> - Жестко заданный список значений.</li>
+        <li><span class="prop-name">preload</span>: <span class="prop-type">boolean</span> (default: <code>true</code>) - Предзагружать ли значения селектора при инициализации таблицы.</li>
+    </ul>
+
+    <h2 id="slots">Слоты</h2>
+    <p>Компонент предоставляет несколько слотов для кастомизации.</p>
+    <table border="1" cellpadding="5" cellspacing="0">
+        <thead>
+            <tr>
+                <th>Имя слота</th>
+                <th>Параметры</th>
+                <th>Описание</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><code>defaultButtons</code></td>
+                <td>-</td>
+                <td>Для добавления кнопок слева от стандартных (Добавить, Экспорт) на панели задач.</td>
+            </tr>
+            <tr>
+                <td><code>otherButtons</code></td>
+                <td>-</td>
+                <td>Для добавления кнопок на панели задач после стандартных.</td>
+            </tr>
+            <tr>
+                <td><code>TableHeaders</code></td>
+                <td><code>columns</code></td>
+                <td>Позволяет полностью переопределить заголовок таблицы.</td>
+            </tr>
+            <tr>
+                <td><code>Row</code></td>
+                <td><code>row</code></td>
+                <td>Позволяет полностью переопределить рендеринг строки таблицы.</td>
+            </tr>
+            <tr>
+                <td><code>RowSubSlot</code></td>
+                <td><code>row</code></td>
+                <td>Содержимое, которое отображается в под-пространстве при клике на строку (если <code>onRowClickOpenSlot: 'rowspace'</code>).</td>
+            </tr>
+            <tr>
+                <td><code>CustomRow</code></td>
+                <td><code>row, edit, remove, table</code></td>
+                <td>Используется для рендеринга каждой "строки", когда <code>displayMode: 'custom'</code>. Предоставляет функции для редактирования и удаления.</td>
+            </tr>
+            <tr>
+                <td><code>header</code></td>
+                <td>-</td>
+                <td>Для кастомизации заголовка модального окна добавления/редактирования.</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <h2 id="methods">Методы</h2>
+    <p>Для вызова методов необходимо получить доступ к экземпляру компонента через <code>ref</code>.</p>
+    <pre><code class="language-vue">&lt;FlameRestTable ref="flameTable" ... /&gt;
+
+&lt;script setup&gt;
+import { ref } from 'vue';
+const flameTable = ref(null);
+
+function someAction() {
+  // Экземпляр FlameTable доступен через flameTable.value.Table
+  flameTable.value.Table.update(); // Обновить данные в таблице
+}
+&lt;/script&gt;</code></pre>
+
+    <p>Основные доступные методы в <code>flameTable.value.Table</code>:</p>
+    <ul>
+        <li><span class="prop-name">update(params?, exportFilename?, from?)</span> - Запросить данные с сервера и обновить таблицу.</li>
+        <li><span class="prop-name">add()</span> - Программно открыть окно добавления новой записи.</li>
+        <li><span class="prop-name">save()</span> - Программно сохранить изменения в открытом окне редактирования.</li>
+        <li><span class="prop-name">remove(row)</span> - Удалить указанную строку.</li>
+        <li><span class="prop-name">getSelectedRows()</span> - Получить массив выбранных строк.</li>
+        <li><span class="prop-name">exportToXLS(onlySelected?)</span> - Экспортировать данные в XLSX.</li>
+        <li><span class="prop-name">exportToCSV(filename?, arr?)</span> - Экспортировать данные в CSV.</li>
+    </ul>
+
+    <h2 id="example">Полный пример</h2>
+    <p>Пример с настройкой нескольких колонок, фильтров, селекторов и использованием слота.</p>
+
+    <pre><code class="language-javascript">// component.vue
+import { FlameRestTable, TableOpts } from 'flameresttable';
+import User from '@/models/User';
+import Role from '@/models/Role'; // Предположим, есть модель ролей
+
+const tableOpts = new TableOpts();
+
+// Скрываем ненужные колонки
+tableOpts.delete(['auth_key', 'password_hash', 'password_reset_token']);
+
+// Настраиваем колонку ID
+tableOpts.set('id', { 
+    title: 'ID', 
+    Table: { width: 80 },
+    Filter: { type: 'number' } 
+});
+
+// Настраиваем имя
+tableOpts.set('username', {
+    title: 'Пользователь',
+    Table: {
+        isRawValue: true,
+        value: (row) => `&lt;b&gt;${row.username}&lt;/b&gt;` // Пример с HTML
+    },
+    Filter: { type: 'text' }
+});
+
+// Настраиваем email
+tableOpts.set('email', {
+    title: 'Email',
+    Filter: { isShow: false } // Скрываем фильтр для email
+});
+
+// Настраиваем статус
+tableOpts.set('status', {
+    title: 'Статус',
+    Filter: {
+        type: 'selector',
+        selector: { multiselect: false } // одиночный выбор
+    },
+    Selector: {
+        values: [ // Жестко заданные значения
+            { id: 10, title: 'Активен' },
+            { id: 9, title: 'Неактивен' },
+        ]
+    }
+});
+
+// Настраиваем связанную колонку ролей
+tableOpts.set('role_id', {
+    title: 'Роль',
+    Filter: { type: 'selector' },
+    Selector: {
+        model: Role // Автозагрузка из модели Role
+    }
+});
+
+// Добавляем виртуальную колонку для фильтра по дате
+tableOpts.addVirtual('date_range', {
+    title: 'Период регистрации',
+    Filter: {
+        type: 'daterange'
+    }
+});
+</code></pre>
+
+    <pre><code class="language-vue">&lt;!-- template --&gt;
+&lt;FlameRestTable :model="User" :opts="tableOpts"&gt;
+  &lt;template #otherButtons&gt;
+    &lt;button class="custom-button" @click="showSelected"&gt;Показать выбранных&lt;/button&gt;
+  &lt;/template&gt;
+&lt;/FlameRestTable&gt;
+</code></pre>
+
+</body>
+</html> 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flamerest",
-  "version": "1.0.119",
+  "version": "1.0.120",
   "description": "",
   "main": "REST.js",
   "typings": "./REST.d.ts",

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "REST.ts"
+  ]
+}