flameresttable 1.0.35 → 1.0.37

package/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="description" content="Vite App">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <title>Vite App</title>
 </head>
 

package/package.json

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

package/src/App.vue

@@ -39,7 +39,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.addVirtual('date', { title: 'dt', Filter: { isShow: true, type: 'number' }, Table: { isShow: true, } })
 
 opts.Add.can = true;
 opts.Remove.can = true;

package/src/Table/Columns.ts

@@ -131,6 +131,10 @@ export class Column implements IColumn {
     // Значение
     valueString: "",
     valueRange: [],
+    valueRangeNumbers: {
+      from: '',
+      to: ''
+    },
 
     // Тип фильтра
     type: 'text' as "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
@@ -308,6 +312,10 @@ export interface IColumn {
     // Значение
     valueString?: string,
     valueRange?: Array<string>,
+    valueRangeNumbers?: {
+      from?: string,
+      to?: string
+    },
 
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest?: number,

package/src/Table/FlameTable.ts

@@ -269,8 +269,17 @@ export default class FlameTable<T> {
 
           break;
 
-        // ДИАПАЗОН
+        // ЧИСЛА
         case 'number':
+
+          if (el.valueRangeNumbers.from.length > 0)
+            customFilters.where[key + '_from'] = ['>=', key, el.valueRangeNumbers.from];
+          if (el.valueRangeNumbers.to.length > 0)
+            customFilters.where[key + '_to'] = ['<=', key, el.valueRangeNumbers.to];
+
+          break;
+
+        // ДИАПАЗОН ДАТ
         case 'daterange':
 
           if (el.valueRange.length > 0) {
@@ -280,6 +289,8 @@ export default class FlameTable<T> {
 
           break;
 
+
+
         case 'selector':
 
           if (el.selector.multiselect) {

package/src/Table/Table.vue

@@ -46,7 +46,7 @@
       <div class="table-header-group">
 
         <!-- ЧЕКБОКСЫ -->
-        <div class="table-cell  w-[25px] align-middle">
+        <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>
@@ -78,7 +78,7 @@
           <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-[25px]">
+            <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)">
@@ -478,7 +478,7 @@ $border-radius: 3px;
 
 @mixin checkbox($color) {
   //margin-right: 1rem;
-  //padding-left: 1.75rem;
+  padding-left: 1.75rem;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -488,6 +488,9 @@ $border-radius: 3px;
   input[type="checkbox"] {
     position: absolute;
     opacity: 0;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
 
     &:focus~span {
       border: 2px solid lighten($black, 50%);

package/src/Table/TableFilters.vue

@@ -1,40 +1,49 @@
 <template>
   <div class="fc flex-wrap">
-    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow" class="py-1"
-      :class="col.Filter.classes + (col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal' ? ' w-full ' : '')">
+    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow"
+      :class="(col.Filter.classes + (col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal' ? ' w-full ' : ''))"
+      class="py-1 mobile:w-full mobile:px-2 mobile:block desktop:inline-block desktop:mx-2">
 
-      <div class="fc flex-col">
+      <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"
+        <div class="mobile:w-full"
+          v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
+          <input class="mobile:w-full outline-none border border-slate-500 px-2 py-1" :placeholder="col.title ?? col.name"
             type="text" @keyup="update()" v-model="col.Filter.valueString" />
         </div>
 
+        <!-- ЦИФРЫ -->
+        <div class="fc mobile:w-full px-2" v-if="col.Filter.type === 'number' || col.Filter.type === 'fixed'">
+          <input class="max-w-[100px] flex-1 outline-none border border-slate-500 px-2 py-1"
+            :placeholder="'From ' + col.title ?? col.name" type="text" @keyup="update()"
+            v-model="col.Filter.valueRangeNumbers.from" />
+          <span class="mx-2"> - </span>
+          <input class="max-w-[100px] flex-1 outline-none border border-slate-500 px-2 py-1"
+            :placeholder="'To ' + (col.title ?? col.name)" type="text" @keyup="update()"
+            v-model="col.Filter.valueRangeNumbers.to" />
+        </div>
+
         <!-- СЕЛЕКТОРЫ -->
-        <div v-if="col.Filter.type === 'selector'">
-          <!-- ВЕРТИКАЛЬНЫЕ -->
-          <!--<select v-if="col.Filter.selector.mode === 'vertical'" :multiple="col.Filter.selector.multiselect"
-            class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
-            @change="update(col)" v-model="col.Filter.valueString">
-            <option v-for="item in col.Selector.values" :key="item.id" :value="item.id">
-              {{ item.title }}
-            </option>
-          </select>-->
+
+        <!-- ВЕРТИКАЛЬНЫЕ -->
+        <div v-if="col.Filter.type === 'selector'" class="mobile:w-full">
           <v-select :multiple="col.Filter.selector.multiselect" v-model="col.Filter.valueString"
             :options="col.Selector.values" class="min-w-[150px]" @option:selected="update(col)"
             @option:deselected="update(col)" />
         </div>
+
+        <!-- ГОРИЗОНТАЛЬНЫЕ -->
         <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal'"
           class="w-full text-center">
-          <!-- ГОРИЗОНТАЛЬНЫЕ -->
           <div v-for="item in col.Selector.values" :key="item.id" class="px-2 py-1 mx-1 inline-block rounded-[30px]"
             :style="'background-color:' + (item.color ?? 'rgb(148,163,184)')">
             {{ item.title }}
           </div>
         </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"
             :enable-time-picker="false" @update:model-value="update()" :teleport="true"></Datepicker>