flameresttable 1.0.13 → 1.0.14

package/README.md

@@ -9,5 +9,8 @@
     opts.Popup.beforeEdit = async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
     }
 
+### RowSubSlot
+Это слот для клика по строке таблицы, если включён параметр `opts.onRowClickOpenSlot`
+
 # Licenses
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -20,9 +20,17 @@ onMounted(() => {
 
 const TableComponent = ref<InstanceType<typeof Table>>();
 const opts = new TableOpts;
+
+opts.set('name', { title: 'Название' });
+opts.set('dt1', { title: 'Дата 1' });
+opts.set('dt2', { title: 'Дата 2' });
+opts.set('id', { title: 'Дата 2', Filter: { isShow: false } });
+opts.set('file', { title: 'файл', Filter: { isShow: false } });
 opts.Add.can = true;
 opts.Remove.can = true;
 
+opts.onRowClickOpenSlot = true;
+
 // Загружаем первичные данные
 Model.all({ sort: ['id'] }).then(r =>
   TableComponent.value?.Table.load(r)
@@ -32,6 +40,8 @@ Model.all({ sort: ['id'] }).then(r =>
 
 <template lang="pug">
 Table(:model="Model", :opts="opts")
+  template(v-slot:RowSubSlot="params")
+    | {{ params.row.name }}
 </template>
 
 <style>

package/src/Table/Columns.ts

@@ -246,7 +246,7 @@ export interface IColumn {
     isShow?: boolean,
 
     // Тип фильтра
-    type: "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
+    type?: "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
 
     // Значение
     valueString?: string,

package/src/Table/FlameTable.ts

@@ -4,6 +4,7 @@ import TableOpts from "./TableOpts";
 import { reactive, UnwrapRef } from 'vue';
 import merge from 'lodash-es/merge'
 import ITableLoadParams from './TableLoadParams';
+import TableRowParams from './TableRowParams';
 
 // Подгрузчик типа класса
 type Class<T> = new (...args: any[]) => T
@@ -39,6 +40,11 @@ export default class FlameTable<T> {
    */
   public Rows = reactive({ rows: [] as Array<T> });
 
+  /**
+   * Динамические параметры строк
+   */
+  public RowsParams: { [key: string]: TableRowParams } = reactive({});
+
   /**
    * Параметры паджинации
    */
@@ -110,6 +116,16 @@ export default class FlameTable<T> {
     if (rows.data) {
       this.Rows.rows = (rows.data ?? []) as any;
       Object.keys(this.Pager).forEach((key) => (this.Pager as any)[key] = (rows.pages as any)[key])
+
+      // удаляем чтобы при перезагрузке не сохранялось состояние пред. строк
+      // производительность: если не стирать параметры строк, то при долгом пользовании таблицей и больших её объёмах в памяти накопится куча позиций, это утечка
+      for (const key in this.RowsParams) delete this.RowsParams[key];
+
+      // Заполняем параметры каждой строки
+      this.Rows.rows.forEach(row => {
+        // @ts-expect-error okay
+        this.RowsParams[row[this.model.constructor.primaryKeys[0]]] = new TableRowParams
+      })
     }
 
   }

package/src/Table/Table.vue

@@ -53,25 +53,29 @@
       <!-- СТРОКИ-->
       <div class="table-row-group">
 
-        <div v-for="row in (Table.Rows.rows)" :key="'row_' + (row as any).id"
-          class="table-row cursor-pointer hover:bg-slate-100">
-          <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column"
-            class="table-cell border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
-            @click="column.Table.click(row, column)">
-            <span>{{
-              column.Table.value(row, column) }}</span>
-          </div>
-          <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
-            <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
-              Изменить
-            </button>
+        <template v-for="(row) in (Table.Rows.rows)">
+          <div :key="'row_' + (row as any).id" class="table-row cursor-pointer hover:bg-slate-100" v-if="true">
+            <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column"
+              class="table-cell border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
+              @click="columnClick(row, column)">
+              <span>{{
+                column.Table.value(row, column) }}</span>
+            </div>
+            <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
+              <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
+                Изменить
+              </button>
+            </div>
+            <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
+              <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
+                Удалить
+              </button>
+            </div>
           </div>
-          <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
-            <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
-              Удалить
-            </button>
+          <div :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
+            <slot name="RowSubSlot" :row="row" />
           </div>
-        </div>
+        </template>
       </div>
 
     </div>
@@ -194,7 +198,7 @@ import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; impor
 // Иконки
 import { XCircleIcon } from '@icons/24/solid'
 import { computed } from '@vue/reactivity';
-import { Column } from './Columns';
+import { Column, IColumn } from './Columns';
 import { defineComponent } from 'vue';
 import TableOpts from './TableOpts';
 import FlameTable from './FlameTable';
@@ -322,6 +326,22 @@ export default defineComponent({
       })
     }
 
+    const primaryKey = (Table.model as any).constructor.primaryKeys[0];
+
+    const columnClick = (row: any, column: Column) => {
+      if (Table.opts.onRowClickOpenSlot) {
+        Table.RowsParams[row[primaryKey]].collapsed = !Table.RowsParams[row[primaryKey]].collapsed
+      }
+      else {
+        if (column?.Table?.click !== undefined)
+          column.Table.click(row, column);
+      }
+    }
+    const isRowCollapsed = (row: any) => {
+      return Table.RowsParams[row[primaryKey]].collapsed
+    }
+
+
     return {
       Table,
       FlameTableModal,
@@ -331,7 +351,10 @@ export default defineComponent({
       SaveTable,
       deleteRow,
       fileUpdated,
-      getSelector
+      getSelector,
+      primaryKey,
+      columnClick,
+      isRowCollapsed
     }
 
   },
@@ -368,7 +391,7 @@ export default defineComponent({
           }
         }
       }
-    }
+    },
   },
 
 })

package/src/Table/TableFilters.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="fc flex-wrap">
-    <div v-for="(col) in props.columns" :key="col.name">
-      {{ col.name }}
+    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow">
+
       <!-- ТЕКСТ -->
-      <div v-if="col.Filter.type === 'text'">
-        <input type="text" @keyup="update()" v-model="col.Filter.valueString" />
+      <div class="fc flex-col">
+        <div class="text-xs text-slate-400">{{ col.title.toUpperCase() ?? col.name }}</div>
+        <div v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
+          <input class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
+            type="text" @keyup="update()" v-model="col.Filter.valueString" />
+        </div>
       </div>
 
     </div>

package/src/Table/TableOpts.ts

@@ -21,6 +21,10 @@ export default class TableOpts {
    */
   public LoadParams: ITableLoadParams = {};
 
+  /**
+   * Открывать субслот в таблице при клике
+   */
+  public onRowClickOpenSlot: boolean = false;
 
   public set(ColumnName: string, mergingOpts: IColumn) {
     // TODO: ЕСТЬ ОШИБКА???

package/src/Table/TableRowParams.ts

@@ -0,0 +1,5 @@
+export default class TableRowParams {
+
+   public collapsed: boolean = true;
+
+}