flameresttable 1.0.119 → 1.0.122

package/package.json

@@ -1,49 +1,49 @@
 {
   "name": "flameresttable",
-  "version": "1.0.119",
+  "version": "1.0.122",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/FlameArt/resttable.git"
   },
   "scripts": {
-    "push and publish": "npm --no-git-tag-version version patch && npm publish",
+    "publish": "npm --no-git-tag-version version patch && npm publish",
     "install/update": "npm i && npm update --save",
     "dev": "vite"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^11.0.2",
-    "flamerest": "^1.0.125",
-    "lodash-es": "^4.17.21",
+    "@vuepic/vue-datepicker": "^11.0.3",
+    "flamerest": "file:../REST JS",
+    "lodash-es": "^4.17.23",
     "pinia": "^2.3.1",
     "pug": "github:FlameArt/pug-tailwind-only",
     "pug-lexer": "github:FlameArt/pug-lexer-only",
-    "sass": "^1.89.2",
+    "sass": "^1.97.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.4",
     "vue-select": "^4.0.0-beta.6",
-    "vuetify": "^3.8.12",
-    "vuetify-pro-tiptap": "^2.6.0"
+    "vuetify": "^3.11.8",
+    "vuetify-pro-tiptap": "^2.8.2"
   },
   "devDependencies": {
     "@heroicons/vue": "^2.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^22.16.0",
+    "@types/node": "^22.19.7",
     "@types/vue-select": "^3.16.8",
-    "@typescript-eslint/eslint-plugin": "^8.35.1",
-    "@typescript-eslint/parser": "^8.35.1",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "@volar/vue-language-plugin-pug": "^1.6.5",
     "@vue/compiler-sfc": "^3.5.13",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.2",
     "eslint-plugin-vue": "^9.33.0",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
     "vue-tsc": "^2.2.12",
     "vue-universal-modal": "^1.1.4"
   },

package/src/App.vue

@@ -1,5 +1,20 @@
+<template>
+  <v-app>
+    <v-main>
+      <Table :model="Model" :opts="opts">
+        <template v-slot:RowSubSlot="params">
+          <!-- {{ params.row.name + ' LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  line' }} -->
+          <!-- <SubRow /> -->
+          <div class="flex items-center justify-center w-full mx-auto">AAA</div>
+        </template>
+        <template #otherButtons></template>
+      </Table>
+    </v-main>
+  </v-app>
+</template>
+
 <script setup lang="ts">
-import { onMounted, reactive, defineProps } from '@vue/runtime-core'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+import { onMounted, reactive } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
 import Table from './Table/Table.vue';
 import { ref } from 'vue';
 import Model from '@models/Testtable';
@@ -55,26 +70,10 @@ opts.LoadParams.sort = ['-dt1'];
 
 </script>
 
-<template lang="pug">
-v-app
-  v-main
-    Table(:model="Model", :opts="opts")
-      template(v-slot:RowSubSlot="params")
-        //| {{ params.row.name + ' LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  line' }}
-        //SubRow
-        div(class="flex items-center justify-center w-full mx-auto") AAA
-      template(#otherButtons)
-</template>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-/* Цвет стандартного фона модального окна */
-.vue-universal-modal {
-  background-color: rgba(0, 0, 0, 0.15) !important;
-}
 </style>

package/src/Table/Columns.ts

@@ -30,6 +30,11 @@ export class Column implements IColumn {
      */
     isShow: true,
 
+    /**
+     * Позиция колонки для сортировки
+     */
+    position: 999,
+
     /**
      * Заголовок столбца в таблице
      */
@@ -119,22 +124,22 @@ export class Column implements IColumn {
     values: [] as ITableSelectorItem[],
 
     /**
-     * Кастомизация вывода отдельного элемента
-     * @param row 
-     * @param col 
-     * @returns 
+     * Разрешить выбирать пустое значение (null)
      */
-    value: (row: any, col: string) => row[col],
+    allowNull: true,
 
     /**
-     * Добавить в начало списка
+     * Заголовок для пустого значения
      */
-    prepend: [] as ITableSelectorItem[],
+    nullTitle: "—",
 
     /**
-     * Добавить в конец списка
+     * Кастомизация вывода отдельного элемента
+     * @param row 
+     * @param col 
+     * @returns 
      */
-    append: [] as ITableSelectorItem[]
+    value: (row: any, col: string) => row[col],
 
   };
 
@@ -168,9 +173,15 @@ export class Column implements IColumn {
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest: 0,
 
-    // Позиция фильтра по порядку
-    filterRow: 0,
-    filterColumn: 0,
+    /**
+     * Позиция фильтра в общей очереди
+     */
+    position: 999,
+
+    /**
+     * Ширина фильтра в пикселях
+     */
+    width: null as number | null,
 
     /**
      * CSS-классы, 
@@ -192,7 +203,7 @@ export class Column implements IColumn {
   public Popup = {
 
     // Тут привязка к реальным данным
-    model: "",
+    model: "" as any,
 
     // Тут модель для файлов
     fileModel: null as any,
@@ -235,20 +246,20 @@ export class Column implements IColumn {
     Selector: {
 
       // Значения селектора - готовые
-      values: [],
-
-      // Загрузчик значений - используется всегда и перекрывает values
-      loader: (column: Column) => null,
+      values: [] as ITableSelectorItem[],
 
       /**
-       * Добавить в начало списка
+       * Разрешить выбирать пустое значение (null)
        */
-      prepend: [] as ITableSelectorItem[],
-  
+      allowNull: false,
+
       /**
-       * Добавить в конец списка
+       * Заголовок для пустого значения
        */
-      append: [] as ITableSelectorItem[]
+      nullTitle: "—",
+
+      // Загрузчик значений - используется всегда и перекрывает values
+      loader: (column: Column) => null as ITableSelectorItem[] | null,
 
     },
 
@@ -338,6 +349,11 @@ export interface IColumn {
     width?: number | null,
     isSelected?: boolean,
 
+    /**
+     * Позиция колонки для сортировки
+     */
+    position?: number,
+
     /**
      * Кастомный заголовок
      * @param row 
@@ -370,9 +386,15 @@ export interface IColumn {
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest?: number,
 
-    // Позиция фильтра по порядку
-    filterRow?: number,
-    filterColumn?: number,
+    /**
+     * Позиция фильтра в общей очереди
+     */
+    position?: number,
+
+    /**
+     * Ширина фильтра в пикселях
+     */
+    width?: number | null,
 
     /**
      * Список значений под выбор
@@ -425,6 +447,16 @@ export interface IColumn {
      */
     values?: ITableSelectorItem[],
 
+    /**
+     * Разрешить выбирать пустое значение (null)
+     */
+    allowNull?: boolean,
+
+    /**
+     * Заголовок для пустого значения
+     */
+    nullTitle?: string,
+
 
     /**
      * Модель, с которой выгружать значения
@@ -440,16 +472,6 @@ export interface IColumn {
      */
     value?: (row: any, col: string) => any,
 
-    /**
-     * Добавить в начало списка
-     */
-    prepend?: ITableSelectorItem[],
-    
-    /**
-     * Добавить в конец списка
-     */
-    append?: ITableSelectorItem[]
-
   },
 
 
@@ -500,20 +522,20 @@ export interface IColumn {
     Selector?: {
 
       // Значения селектора - готовые
-      values?: Array<any>,
+      values?: ITableSelectorItem[],
 
-      // Загрузчик значений - используется всегда и перекрывает values
-      loader?: (column: Column) => Array<any> | null,
-      
       /**
-       * Добавить в начало списка
+       * Разрешить выбирать пустое значение (null)
        */
-      prepend?: ITableSelectorItem[],
-  
+      allowNull?: boolean,
+
       /**
-       * Добавить в конец списка
+       * Заголовок для пустого значения
        */
-      append?: ITableSelectorItem[]
+      nullTitle?: string,
+
+      // Загрузчик значений - используется всегда и перекрывает values
+      loader?: (column: Column) => ITableSelectorItem[] | null,
 
     },
 

package/src/Table/FlameTable.ts

@@ -94,11 +94,12 @@ export default class FlameTable<T> {
     // удалим так же дубликаты
     // TODO: as any
     const allColumns = [...Object.keys(this.model as any), ...Object.keys(opts.columnsOpts)].filter((value, index, self) => self.indexOf(value) === index)
+    const tempColumns: Column[] = [];
 
     // генерим полноценные колонки из описания модели
     for (const key of allColumns) {
       const newCol = new Column;
-      this.columns[key] = newCol;
+      //this.columns[key] = newCol;
 
       // Выключаем из редактирования все праймари ключи
       if ((this.model as any).constructor['primaryKeys'].includes(key))
@@ -113,15 +114,26 @@ export default class FlameTable<T> {
       // Загружаем селекторы один раз за страницу
       if (newCol.Popup.popupType === 'selector' && newCol.Popup.Selector.loader !== null) {
         newCol.Popup.Selector.values = reactive(newCol.Popup.Selector.loader(newCol) ?? newCol.Popup.Selector.values)
-        if (newCol.Popup.Selector.prepend.length > 0) (newCol.Popup.Selector.values as any[]).unshift(...newCol.Popup.Selector.prepend);
-        if (newCol.Popup.Selector.append.length > 0) (newCol.Popup.Selector.values as any[]).push(...newCol.Popup.Selector.append);
       }
 
+      tempColumns.push(newCol);
+
+    }
+
+    // Сортируем колонки по их позиции
+    tempColumns.sort((a, b) => (a.Table.position ?? 999) - (b.Table.position ?? 999));
+
+    // Заполняем итоговый объект в правильном порядке
+    for (const col of tempColumns) {
+      this.columns[col.name] = col;
     }
 
     // Мержим параметры с базовой версией
     merge(this.opts, opts);
 
+    // Устанавливаем ссылку на таблицу для обратного вызова
+    (this.opts as any)._tableInstance = this;
+
     // TODO: Сортируем колонки, если указан порядок
     //this.columns
 
@@ -130,7 +142,8 @@ export default class FlameTable<T> {
     // Предзагружаем колонки
     this.preloadRelated()
 
-
+    // Инициализируем null-элементы для селекторов
+    this.initSelectorNulls()
 
   }
 
@@ -199,6 +212,7 @@ export default class FlameTable<T> {
             col.Selector.values.push(...col.Selector.loader(r.data))
           }
 
+
           // Преобразования не найдено, попытка автоматически определить параметры
           if (col.Selector.loader === null) {
             const rows = r.data;
@@ -228,13 +242,59 @@ export default class FlameTable<T> {
     // Начинаем процесс предзагрузки
     await Promise.allSettled(allPreloadPromises);
 
-    // Добавляем prepend/append
+  }
+
+  /**
+   * Переинициализирует селекторы для указанной колонки
+   */
+  public reinitSelectorForColumn(columnName: string) {
+    if (!this.columns[columnName]) return
+
+    const col = this.columns[columnName]
+
+    // Для popup selector
+    if (col.Popup.popupType === 'selector') {
+      // Удаляем существующий null-элемент если есть
+      col.Popup.Selector.values = col.Popup.Selector.values.filter(v => v.id !== null)
+
+      // Добавляем null только если allowNull = true
+      if (col.Popup.Selector.allowNull) {
+        col.Popup.Selector.values.unshift({
+          id: null,
+          title: col.Popup.Selector.nullTitle,
+          label: col.Popup.Selector.nullTitle,
+        })
+      }
+    }
+
+    // Для обычного селектора (фильтры)
+    if (col.Selector.allowNull) {
+      // Удаляем существующий null-элемент если есть
+      col.Selector.values = col.Selector.values.filter(v => v.id !== null)
+
+      col.Selector.values.unshift({
+        id: null,
+        title: col.Selector.nullTitle,
+        label: col.Selector.nullTitle,
+        position: -1
+      })
+    }
+  }
+
+  /**
+   * Инициализирует null-элементы для всех селекторов, где allowNull = true
+   */
+  private initSelectorNulls() {
     for (const key in this.columns) {
-      const col = this.columns[key];
-      if (col.Selector.prepend.length > 0) col.Selector.values.unshift(...col.Selector.prepend);
-      if (col.Selector.append.length > 0) col.Selector.values.push(...col.Selector.append);
+      this.reinitSelectorForColumn(key)
     }
+  }
 
+  /**
+   * Переинициализирует все селекторы (можно вызывать после изменения данных в лоадерах)
+   */
+  public reinitSelectors() {
+    this.initSelectorNulls()
   }
 
   /**
@@ -244,6 +304,17 @@ export default class FlameTable<T> {
    */
   public async update(CustomLoadParams: ITableLoadParams = {}, exportFilename: string | null = null, from: 'pager' | 'filters' = 'pager') {
 
+    if (from !== 'pager') {
+      this.Pager.page = 1;
+
+      // Сбрасываем выделенные строки
+      for (const key in this.RowsParams) {
+        this.RowsParams[key].selected = false;
+      }
+      this.RowsSelected.splice(0);
+
+    }
+
     // Дополняем загрузочные параметры фильтрами
     const filters = merge(this.applyFiltersParams(), CustomLoadParams);
 
@@ -345,7 +416,7 @@ export default class FlameTable<T> {
         // Частичное совпадение
         case 'text':
 
-          if (el.valueString.trim() === '') continue;
+          if (el.valueString === null || el.valueString.trim() === '') continue;
           customFilters.where[key] = ['LIKE', key, el.valueString];
 
           break;
@@ -353,7 +424,7 @@ export default class FlameTable<T> {
         // Фуллтекстовый поиск
         case 'fulltext':
 
-          if (el.valueString.trim() === '') continue;
+          if (el.valueString === null || el.valueString.trim() === '') continue;
           customFilters.where[key] = ['FULLTEXT', key, el.valueString];
           break;
 
@@ -361,7 +432,7 @@ export default class FlameTable<T> {
         case 'fixed':
         case 'date':
 
-          if (el.valueString.trim() === '') continue;
+          if (el.valueString === null || el.valueString.trim() === '') continue;
           customFilters.where[key] = el.valueString;
 
           break;
@@ -394,8 +465,10 @@ export default class FlameTable<T> {
             if (el.valueRange.length > 0)
               customFilters.where[key] = ['IN', key, el.valueRange];
           }
-          else
-            customFilters.where[key] = el.valueString;
+          else {
+            if (el.valueString !== "")
+              customFilters.where[key] = el.valueString;
+          }
 
           break;
 
@@ -411,7 +484,7 @@ export default class FlameTable<T> {
 
     // Сперва предобработка
     // TODO: убрать пустой массив т.к. при добавлении он не нужен или прикрепить реактивную модель?
-    if (await this.opts.Popup.beforeAdd({}, this) === false) { return null; }
+    if (await this.opts.Popup.beforeAdd({}, this as any) === false) { return null; }
 
     const cols = await (window as any).REST.prepare(this.getColumnsForUpdate('add'), true);
     const res: SavedObject<T> = await Object.getPrototypeOf(this.model).constructor.create(cols);
@@ -433,7 +506,7 @@ export default class FlameTable<T> {
     const indexKey = tClass.primaryKeys[0];
 
     // Сперва предобработка
-    if (await this.opts.Popup.beforeEdit(columns, this) === false) { return null; }
+    if (await this.opts.Popup.beforeEdit(columns, this as any) === false) { return null; }
 
     // Убираем поля, которые не требуют изменения
     const cleanedCols = this.RemoveUnchagedFields(columns);
@@ -466,7 +539,7 @@ export default class FlameTable<T> {
 
   }
 
-  private RemoveUnchagedFields(row: { [key: string]: any }) {
+  public RemoveUnchagedFields(row: { [key: string]: any }) {
 
     // primarykey
     const pk = (this.model as any).constructor.primaryKeys[0];
@@ -517,7 +590,7 @@ export default class FlameTable<T> {
 
   }
 
-  private getColumnsForUpdate(mode: "add" | "edit") {
+  public getColumnsForUpdate(mode: "add" | "edit") {
     const res: { [key: string]: string } = {};
     for (const key in this.columns) {
 

package/src/Table/Paginator.vue

@@ -1,25 +1,43 @@
-<template lang="pug">
-nav.relative.z-0.w-full.fc.flex-wrap.rounded-md.-space-x-px(aria-label='Pagination' @click="")
-  a.relative.inline-flex.items-center.px-2.py-2.rounded-l-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(@click="goPage(props.table.Pager.page-1)" :class="props.table.Pager.page === 1 ? 'opacity-30' : 'cursor-pointer'" class='hover:bg-gray-50')
-    span.sr-only Previous
-    // Heroicon name: solid/chevron-left
-    svg.h-5.w-5(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 20 20' fill='currentColor' aria-hidden='true')
-      path(fill-rule='evenodd' d='M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z' clip-rule='evenodd')
-  // Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
-  a.cursor-pointer.bg-white.border-gray-300.text-gray-500.relative.inline-flex.items-center.px-4.py-2.border.text-sm.font-medium(v-for="page in props.table.Pager.count" class="hover:bg-gray-50" :class="props.table.Pager.page === page ? 'selectedPage' : ''" @click="goPage(page)")
-    | {{ page }}
-  //span.relative.inline-flex.items-center.px-4.py-2.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-700  ... 
-  a.relative.inline-flex.items-center.px-2.py-2.rounded-r-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(@click="goPage(props.table.Pager.page+1)" :class="props.table.Pager.page >= props.table.Pager.count ? 'opacity-30' : 'cursor-pointer'" class='hover:bg-gray-50')
-    span.sr-only Next
-    // Heroicon name: solid/chevron-right
-    svg.h-5.w-5(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 20 20' fill='currentColor' aria-hidden='true')
-      path(fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd')
-
-
+<template>
+  <nav class="relative z-0 w-full fc flex-wrap rounded-md -space-x-px" aria-label="Pagination" @click="">
+    <a
+      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+      @click="goPage(props.table.Pager.page - 1)"
+      :class="props.table.Pager.page === 1 ? 'opacity-30' : 'cursor-pointer'"
+    >
+      <span class="sr-only">Previous</span>
+      <!-- Heroicon name: solid/chevron-left -->
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+      </svg>
+    </a>
+    <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
+    <a
+      class="cursor-pointer bg-white border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 border text-sm font-medium hover:bg-gray-50"
+      v-for="page in props.table.Pager.count"
+      :key="page"
+      :class="props.table.Pager.page === page ? 'selectedPage' : ''"
+      @click="goPage(page)"
+    >
+      {{ page }}
+    </a>
+    <!-- <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span> -->
+    <a
+      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+      @click="goPage(props.table.Pager.page + 1)"
+      :class="props.table.Pager.page >= props.table.Pager.count ? 'opacity-30' : 'cursor-pointer'"
+    >
+      <span class="sr-only">Next</span>
+      <!-- Heroicon name: solid/chevron-right -->
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+      </svg>
+    </a>
+  </nav>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+import { onMounted, reactive, ref } from 'vue'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
 
 // Иконки
 import { XCircleIcon } from '@icons/24/solid'