flameresttable 1.0.66 → 1.0.68

package/package.json

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

package/src/App.vue

@@ -45,7 +45,7 @@ opts.addVirtual('date', { title: 'dt', Filter: { isShow: true, type: 'number' },
 opts.Add.can = true;
 opts.Remove.can = true;
 
-opts.onRowClickOpenSlot = true;
+opts.onRowClickOpenSlot = 'rowspace';
 
 opts.LoadParams.sort = ['-dt1'];
 

package/src/Table/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-0 overflow-x-scroll defaultTable">
+  <div class="mt-0  overflow-x-scroll">
 
     <!-- ФИЛЬТРЫ -->
     <TableFilters :columns="Table.columns" :table="Table"></TableFilters>
@@ -18,98 +18,83 @@
     </TableTasksPanel>
 
     <!-- ТАБЛИЦА-->
-    <div class="mt-2 w-full grid-container gap-0" :style="{ '--column-count': columnCount() }">
+    <div class="mt-2 table table-fixed w-full ">
 
       <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
-      <!--<div>-->
-
-      <!-- ЧЕКБОКСЫ -->
-      <div class="max-w-[21px] align-middle col-span-1" :style="'grid-column:' + 1">
-        <label class="checkbox" v-if="Table.opts.rowSelectors">
-          <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
-          <span class='indicator'></span>
-        </label>
-      </div>
-
+      <div class="table-header-group">
+
+        <!-- ЧЕКБОКСЫ -->
+        <div class="table-cell  w-[21px] align-middle">
+          <label class="checkbox" v-if="Table.opts.rowSelectors">
+            <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
+            <span class='indicator'></span>
+          </label>
+        </div>
 
-      <template v-for="(column, index) in columnsArray">
-        <div v-if="column.Table.isShow" :key="'cheader_' + column.name"
+        <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column.name"
           :class="' defaultHeader ' + column.Table.classesHeader"
-          class="  col-span-1 align-middle border-r border-r-slate-100 px-2" :style="'grid-column:' + (index + 2)">
+          class=" table-cell align-middle border-r border-r-slate-100 px-2">
           <span>{{ column.Table.titleCustom !== null ? (column as any).Table.titleCustom(column) : column.Table.title !==
             '' ?
             column.Table.title : column.title !== '' ? column.title :
               column.name }}</span>
         </div>
-      </template>
-      <div v-if="opts.Edit.can" class=" col-span-1 border-r border-r-slate-100 px-2"
-        :style="'grid-column:' + (columnCount() - 1)">
-        <button class=" bg-green-600 invisible">
-
-        </button>
-      </div>
-      <div v-if="opts.Remove.can" class=" col-span-1 border-r border-r-slate-100 px-2"
-        :style="'grid-column:' + (columnCount())">
-        <button class="bg-green-600 invisible">
-
-        </button>
+        <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2">
+          <button class="bg-green-600 invisible">
+            Изменить
+          </button>
+        </div>
+        <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2">
+          <button class="bg-green-600 invisible">
+            Удалить
+          </button>
+        </div>
       </div>
-      <!--</div>-->
 
       <!-- СТРОКИ-->
-      <template v-for="(  row  ) in   (Table.Rows.rows)  ">
-        <template v-if="true">
-
-          <!-- ЧЕКБОКСЫ -->
-          <!-- class="defaultRow cursor-pointer hover:bg-slate-100" -->
-          <div class="col-span-1 align-middle w-[21px] defaultRow" :key="'chkbox_row_' + (row as any).id"
-            :style="'grid-column:' + 1">
-            <label class="checkbox" v-if="Table.opts.rowSelectors">
-              <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
-                @change="CheckboxSelectionChanged($event, false)">
-              <span class='indicator'></span>
-            </label>
-          </div>
+      <div class="table-row-group text-left">
+
+        <template v-for="(row) in (Table.Rows.rows)">
+          <div :key="'row_' + (row as any).id" class="defaultRow table-row cursor-pointer hover:bg-slate-100" v-if="true">
+
+            <!-- ЧЕКБОКСЫ -->
+            <div class="table-cell align-middle w-[21px]">
+              <label class="checkbox" v-if="Table.opts.rowSelectors">
+                <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
+                  @change="CheckboxSelectionChanged($event, false)">
+                <span class='indicator'></span>
+              </label>
+            </div>
 
-          <template v-for="  (column, index)   in   columnsArray  ">
-            <div v-if="column.Table.isShow" :key="'tc_' + column.name + '_row_' + (row as any).id"
+            <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column.name"
               :class="' defaultCell ' + column.Table.classes"
-              class="defaultRow col-span-1 align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
+              class="table-cell align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
               @click="columnClick(row, column)"
-              :style="'grid-column:' + (index + 2) + ';' + (column.Table.width === null ? '' : 'width:' + column.Table.width + 'px;')">
+              :style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
 
               <span v-if="!column.Table.isRawValue">{{
                 column.Table.value(row, column) }}</span>
               <span v-else v-html="column.Table.value(row, column)"></span>
             </div>
-          </template>
-          <div v-if="opts.Edit.can" class="defaultRow col-span-1 border-r border-r-slate-100 px-2 text-center"
-            :style="'grid-column:' + (columnCount() - 1)" :key="'edit_' + 'row_' + (row as any).id">
-            <button class="mobile:hidden px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
-              Изменить
-            </button>
-            <button class="desktop:hidden px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
-              <img src="/src/assets/icons/edit.svg" class="w-4 h-4 fill-white" />
-            </button>
+            <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="defaultRow col-span-1 border-r border-r-slate-100 px-2 text-center"
-            :key="'delete_' + 'row_' + (row as any).id" :style="'grid-column:' + (columnCount())">
-            <button class="mobile:hidden px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
-              Удалить
-            </button>
-            <button class="desktop:hidden px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
-              <img src="/src/assets/icons/remove.svg" class="w-4 h-4 fill-white" />
-            </button>
+          <div class="table-cell text-center relative" :key="'row_slot_' + (row as any).id"
+            v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
+            <div class=" mx-auto  no-wrap-cell mobile:w-full text-center">
+              <slot name="RowSubSlot" :row="row" />
+            </div>
           </div>
         </template>
-        <div class=" text-center relative" :style="'grid-column: span ' + columnCount()"
-          :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
-          <div class=" mx-auto  no-wrap-cell mobile:w-full text-center">
-            <slot name="RowSubSlot" :row="row" />
-          </div>
-        </div>
-      </template>
-
+      </div>
 
     </div>
   </div>
@@ -126,7 +111,7 @@
         <slot name="header" />
 
         <!-- КОЛОНКИ ТАБЛИЦЫ-->
-        <label v-for="  column   in   ColumnNames  " v-show="Table.columns[column].Popup.isShow" :key="'c' + column"
+        <label v-for="column in ColumnNames" v-show="Table.columns[column].Popup.isShow" :key="'c' + column"
           class="flex items-stretch justify-center w-full my-1 ml-2">
 
           <!-- Заголовок -->
@@ -153,7 +138,7 @@
           <div v-if="Table.columns[column].Popup.popupType === 'selector'"
             class="flex-1 mr-5 w-full flex flex-col self-stretch"><select v-model="Table.columns[column].Popup.model"
               class="h-full self-stretch py-1 px-2 w-full outline-none border border-slate-100">
-              <option v-for="(  selectorVal, selectorKey  ) in   Table.columns[column].Popup.Selector.values  "
+              <option v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values"
                 :key="'sel_' + selectorKey"
                 :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]">{{
                   getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
@@ -366,27 +351,24 @@ 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);
+      switch (Table.opts.onRowClickOpenSlot) {
+        case 'rowspace':
+          Table.RowsParams[row[primaryKey]].collapsed = !Table.RowsParams[row[primaryKey]].collapsed
+          break;
+        case 'popup':
+          Table.RowsParams[row[primaryKey]].collapsed = !Table.RowsParams[row[primaryKey]].collapsed
+          break;
+        default:
+          if (column?.Table?.click !== undefined)
+            column.Table.click(row, column);
+          break;
       }
+
     }
     const isRowCollapsed = (row: any) => {
       return Table.RowsParams[row[primaryKey]].collapsed
     }
 
-    const columnCount = (): number => {
-      let cnt = Object.keys(Table.columns).filter(r => Table.columns[r].Table.isShow).length;
-      // Добавляем одно поле для чекбоксов
-      cnt++;
-      // Добавляем поля изменения и удаления
-      if (Table.opts.Add.can) cnt++;
-      if (Table.opts.Edit.can) cnt++;
-      return cnt;
-    }
 
     return {
       Table,
@@ -400,20 +382,10 @@ export default defineComponent({
       getSelector,
       primaryKey,
       columnClick,
-      isRowCollapsed,
-      columnCount
+      isRowCollapsed
     }
 
   },
-
-  computed: {
-
-    columnsArray: function () {
-      return Object.keys(this.Table.columns).filter(r => this.Table.columns[r].Table.isShow).map(key => this.Table.columns[key])
-    }
-
-  },
-
   methods: {
     fileGetData(thisArr: any, getSource: boolean = true) {
 
@@ -455,32 +427,18 @@ export default defineComponent({
         for (const key in this.Table.RowsParams) {
           this.Table.RowsParams[key].selected = event.target.checked
         }
-    },
-
-
+    }
   },
 
 })
 
-
-
 </script>
 
 <style scoped lang="scss">
-.grid-container {
-  display: grid;
-}
-
 .no-wrap-cell {
   white-space: nowrap !important;
 }
 
-.defaultTable {
-  font-family: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 14px;
-  text-align: left;
-}
-
 .defaultHeader {
   color: rgba(55, 53, 47, 0.65);
   font-size: 14px;
@@ -496,11 +454,6 @@ export default defineComponent({
   border: 1px solid rgb(233, 233, 231);
 }
 
-.defaultRow:hover {
-  cursor: pointer;
-  @apply bg-slate-100;
-}
-
 // ЧЕКБОКСЫ
 $black: #2D3137;
 $blue: #3785BC;

package/src/Table/TableOpts.ts

@@ -29,7 +29,14 @@ export default class TableOpts {
   /**
    * Открывать субслот в таблице при клике
    */
-  public onRowClickOpenSlot: boolean = false;
+  public onRowClickOpenSlot: 'popup' | 'rowspace' | 'none' = 'rowspace';
+
+  /**
+   * Клик по строке
+   * @param row 
+   * @returns 
+   */
+  public rowClick = (row: Array<{ [key: string]: IColumn }>) => null
 
   /**
    * Язык