flameresttable 1.0.21 → 1.0.23

package/.eslintrc

@@ -16,7 +16,14 @@
     "vue/no-multiple-template-root": "off",
     "vue/no-duplicate-attributes": "off",
     "linebreak-style": "off",
-    "vue/multiline-html-element-content-newline": "off"
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/attributes-order": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/html-self-closing": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/first-attribute-linebreak": "off",
+    "vue/html-indent": "off",
+    "vue/no-v-html": "off"
   },
   "plugins": [
     "@typescript-eslint"

package/package.json

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

package/src/App.vue

@@ -38,6 +38,7 @@ opts.set("name", {
 
 
 opts.addVirtual('test', { title: 'test title', Table: { isShow: true, } })
+opts.addVirtual('date', { title: 'dt', Filter: { isShow: true, type: 'daterange' }, Table: { isShow: true, } })
 
 opts.Add.can = true;
 opts.Remove.can = true;
@@ -51,7 +52,7 @@ opts.LoadParams.sort = ['-dt1'];
 <template lang="pug">
 Table(:model="Model", :opts="opts")
   template(v-slot:RowSubSlot="params")
-    | {{ params.row.name }}
+    | {{ params.row.name + ' LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  line' }}
 </template>
 
 <style>

package/src/Table/Columns.ts

@@ -33,6 +33,11 @@ export class Column implements IColumn {
      */
     title: "",
 
+    /**
+     * Выделена ли строка чекбоксом
+     */
+    isSelected: false,
+
     /**
      * Возможность преобразовать вывод из любой колонки
      * @param row строка
@@ -57,7 +62,22 @@ export class Column implements IColumn {
      * @param column 
      * @returns 
      */
-    click: (row: any, column: Column) => { }
+    click: (row: any, column: Column) => { },
+
+    /**
+     * CSS-классы колонки в таблице
+     */
+    classes: '',
+
+    /**
+     * CSS-классы заголовка таблице
+     */
+    classesHeader: '',
+
+    /**
+     * Ширина таблицы
+     */
+    width: null,
 
   }
 
@@ -102,7 +122,7 @@ export class Column implements IColumn {
 
     // Значение
     valueString: "",
-    valueRange: { from: '', to: '' },
+    valueRange: [],
 
     // Тип фильтра
     type: 'text' as "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
@@ -117,7 +137,12 @@ export class Column implements IColumn {
 
     // Позиция фильтра по порядку
     filterRow: 0,
-    filterColumn: 0
+    filterColumn: 0,
+
+    /**
+     * CSS-классы, 
+     */
+    classes: '',
 
   }
 
@@ -251,7 +276,11 @@ export interface IColumn {
     title?: string,
     value?: (row: any, column: Column) => string,
     isRawValue?: boolean,
-    click?: (row: any, column: Column) => void
+    click?: (row: any, column: Column) => void,
+    classes?: string,
+    classesHeader?: string,
+    width?: number | null,
+    isSelected?: boolean,
   },
 
   /**
@@ -267,7 +296,7 @@ export interface IColumn {
 
     // Значение
     valueString?: string,
-    valueRange?: { from: string, to: string },
+    valueRange?: Array<string>,
 
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest?: number,

package/src/Table/FlameTable.ts

@@ -60,6 +60,11 @@ export default class FlameTable<T> {
    */
   public OpenedRow: any = null;
 
+  /**
+   * Выделенные галочками чекбоксы
+   */
+  public RowsSelected: Array<T> = [];
+
   /**
    * Проинициализировать модели
    */
@@ -192,10 +197,10 @@ export default class FlameTable<T> {
         case 'number':
         case 'daterange':
 
-          if (el.valueRange.from.trim() !== '')
-            customFilters.where[key] = ['>=', key, el.valueRange.from];
-          if (el.valueRange.to.trim() !== '')
-            customFilters.where[key] = ['<=', key, el.valueRange.to];
+          if (el.valueRange.length > 0) {
+            customFilters.where[key] = ['>=', key, el.valueRange[0]];
+            customFilters.where[key] = ['<=', key, el.valueRange[1]];
+          }
 
           break;
 
@@ -278,6 +283,14 @@ export default class FlameTable<T> {
     return res;
   }
 
-
+  public getSelectedRows() {
+    const result: Array<T> = [];
+    this.Rows.rows.forEach((r: any) => {
+      const param = this.RowsParams[r[(this.model as any).constructor.primaryKeys[0]]]
+      if (param.selected)
+        result.push(r)
+    })
+    return result;
+  }
 
 }

package/src/Table/Table.vue

@@ -8,7 +8,7 @@
     <div class="flex items-center justify-between">
       <slot name="defaultButtons">
         <div v-show="$props.opts?.Add.can"
-          class="flex cursor-pointer justify-center items-center text-white block bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
+          class="flex cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
           @click="add()">
           <div class="text-xl">
             +
@@ -30,12 +30,22 @@
     </div>
 
     <!-- ТАБЛИЦА-->
-    <div class="mt-2 table w-full ">
+    <div class="mt-2 table table-fixed w-full ">
 
       <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
       <div class="table-header-group">
-        <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column"
-          class="table-cell border-r border-r-slate-100 px-2">
+
+        <!-- ЧЕКБОКСЫ -->
+        <div class="table-cell w-[65px] align-middle">
+          <label class="checkbox" v-if="Table.opts.rowSelectors">
+            <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
+            <span class='indicator'></span>
+          </label>
+        </div>
+
+        <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column.name"
+          :class="' defaultHeader ' + column.Table.classesHeader"
+          class=" table-cell align-middle border-r border-r-slate-100 px-2">
           <span>{{ column.title !== '' ? column.title :
             column.name }}</span>
         </div>
@@ -55,10 +65,23 @@
       <div class="table-row-group">
 
         <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)">
+          <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">
+              <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 v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column.name"
+              :class="' defaultCell ' + column.Table.classes"
+              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="(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>
@@ -75,7 +98,9 @@
             </div>
           </div>
           <div :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
-            <slot name="RowSubSlot" :row="row" />
+            <div class="table-cell no-wrap-cell">
+              <slot name="RowSubSlot" :row="row" />
+            </div>
           </div>
         </template>
       </div>
@@ -179,12 +204,12 @@
         <!-- КНОПКИ СОХРАНЕНИЯ-->
         <div class="flex w-full mt-3 mb-2 justify-between items-center">
           <div v-show="$props.opts?.Add.can"
-            class="cursor-pointer ml-2 text-lg py-2 text-white block bg-gray-400 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+            class="cursor-pointer ml-2 text-lg py-2 text-white block bg-gray-400 font-medium rounded px-4 text-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             @click="Table.OpenedRow = null; FlameTableModal?.close()">
             Отмена
           </div>
           <div
-            class="cursor-pointer ml-2 text-lg py-2 mr-3 text-white block bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+            class="cursor-pointer ml-2 text-lg py-2 mr-3 text-white block bg-blue-600 font-medium rounded px-4 text-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             @click=" SaveTable()">
             {{ Table.mode === 'add' ? 'Добавить' : 'Сохранить' }}
           </div>
@@ -396,10 +421,106 @@ export default defineComponent({
         }
       }
     },
+
+    CheckboxSelectionChanged(event: any, all: boolean = false) {
+      this.Table.getSelectedRows();
+      if (all === true)
+        for (const key in this.Table.RowsParams) {
+          this.Table.RowsParams[key].selected = event.target.checked
+        }
+    }
   },
 
 })
 
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.no-wrap-cell {
+  white-space: nowrap !important;
+}
+
+.defaultHeader {
+  color: rgba(55, 53, 47, 0.65);
+  font-size: 14px;
+  line-height: 16.8px;
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.defaultRow {
+  color: rgb(55, 53, 47);
+  font-size: 14px;
+  line-height: 16.8px;
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+  border: 1px solid rgb(233, 233, 231);
+}
+
+// ЧЕКБОКСЫ
+$black: #2D3137;
+$blue: #3785BC;
+$green: #329E78;
+$grey: #D6D6D6;
+$red: #DD3C3A;
+$white: #FFFFFF;
+
+$border-radius: 3px;
+
+@mixin checkbox($color) {
+  margin-right: 1rem;
+  padding-left: 1.75rem;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+
+    &:focus~span {
+      border: 2px solid lighten($black, 50%);
+    }
+
+    &:focus:checked~span {
+      border: 2px solid darken($color, 15%);
+    }
+
+    &:checked~span {
+      color: $white;
+      background: $color url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;
+      border: 2px solid $color;
+    }
+
+  }
+
+  span {
+    border-radius: $border-radius;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 1.09rem;
+    height: 1.09rem;
+    background-color: lighten($black, 65%);
+    border: 1px solid lighten($black, 65%);
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+}
+
+label.checkbox {
+  @include checkbox($green);
+
+  &.blue {
+    @include checkbox($blue);
+  }
+
+  &.red {
+    @include checkbox($red);
+  }
+}
+</style>

package/src/Table/TableFilters.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fc flex-wrap">
-    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow">
+    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow" :class="col.Filter.classes">
 
       <!-- ТЕКСТ -->
       <div class="fc flex-col">
@@ -12,11 +12,17 @@
         <div v-if="col.Filter.type === 'selector'">
           <select class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
             @change="update()" v-model="col.Filter.valueString">
-            <option v-for="item in col.Selector.values" :key="item[0]">
-              
+            <option v-for="item in col.Selector.values" :key="item[0]" value="">
+              {{ item[1] }}
             </option>
           </select>
         </div>
+        <div v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
+          <Datepicker v-if="col.Filter.type === 'date'" v-model="col.Filter.valueString" :auto-apply="true"
+            @update:model-value="update()" :teleport="true"></Datepicker>
+          <Datepicker v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange" :range="true"
+            :auto-apply="true" @update:model-value="update()" :teleport="true" style="z-index: 99999;"></Datepicker>
+        </div>
       </div>
 
     </div>
@@ -32,6 +38,7 @@ import TableOpts from './TableOpts';
 import { Column } from './Columns';
 //import { TableFilter } from './TableOpts.js';
 import FlameTable from './FlameTable';
+import Datepicker from '@vuepic/vue-datepicker';
 
 // Глобальное хранилище и роуты
 const store = storeFile(), router = useRouter(), route = useRoute();

package/src/Table/TableFiltersSelector.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- Это селектор c мультивыбором -->
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+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 { XCircleIcon } from '@icons/24/solid'
+import TableOpts from './TableOpts';
+import { Column } from './Columns';
+//import { TableFilter } from './TableOpts.js';
+import FlameTable from './FlameTable';
+import Datepicker from '@vuepic/vue-datepicker';
+
+// Глобальное хранилище и роуты
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Локальное состояние компонента
+const state = reactive({
+  data: {}
+})
+
+// Входящие данные компонента
+const props = defineProps<{
+  columns: { [key: string]: Column; },
+  table: FlameTable<any>,
+}>()
+
+// Примонтировано
+onMounted(async () => {
+
+})
+
+
+const update = () => {
+
+  props.table.update();
+
+}
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/Table/TableOpts.ts

@@ -11,6 +11,11 @@ export default class TableOpts {
    */
   public autoload: boolean = true;
 
+  /**
+   * Добавить колонку выбора записей галочками
+   */
+  public rowSelectors: boolean = true;
+
   /**
    * Колонки
    */

package/src/Table/TableRowParams.ts

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