flameresttable 1.0.116 → 1.0.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.116",
+  "version": "1.0.118",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
@@ -12,39 +12,39 @@
     "dev": "vite"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^11.0.1",
-    "flamerest": "^1.0.110",
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "flamerest": "^1.0.125",
     "lodash-es": "^4.17.21",
     "pinia": "^2.3.1",
     "pug": "github:FlameArt/pug-tailwind-only",
     "pug-lexer": "github:FlameArt/pug-lexer-only",
-    "sass": "^1.85.1",
+    "sass": "^1.89.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
+    "vue-router": "^4.5.1",
     "vue-select": "^4.0.0-beta.6",
-    "vuetify": "^3.7.14",
-    "vuetify-pro-tiptap": "^2.5.7"
+    "vuetify": "^3.8.12",
+    "vuetify-pro-tiptap": "^2.6.0"
   },
   "devDependencies": {
     "@heroicons/vue": "^2.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.16.0",
     "@types/vue-select": "^3.16.8",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@volar/vue-language-plugin-pug": "^1.6.5",
     "@vue/compiler-sfc": "^3.5.13",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.21.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "postcss": "^8.5.3",
-    "postcss-import": "^16.1.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.1",
+    "eslint-plugin-vue": "^9.33.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3",
-    "vite": "^6.2.0",
-    "vue-tsc": "^2.2.6",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.12",
     "vue-universal-modal": "^1.1.4"
   },
   "rules": {}

package/src/App.vue

@@ -56,12 +56,14 @@ opts.LoadParams.sort = ['-dt1'];
 </script>
 
 <template lang="pug">
-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)
+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>

package/src/Table/Columns.ts

@@ -310,7 +310,7 @@ export interface IColumn {
   Table?: {
     isShow?: boolean,
     title?: string,
-    value?: (row: any, column: Column) => string,
+    value?: (row: any, column: Column) => any,
     isRawValue?: boolean,
     click?: (row: any, column: Column) => void,
     classes?: string,
@@ -388,6 +388,12 @@ export interface IColumn {
    */
   Selector?: {
 
+    /**
+     * Нужна авто-предзагрузка значений при загрузке страницы
+     * [полная таблица]
+     */
+    preload?: boolean,
+
     /**
      * Загрузчик значений ручной
      * @returns ITableSelectorItem[]
@@ -412,7 +418,7 @@ export interface IColumn {
      * @param col 
      * @returns 
      */
-    value?: (row: any, col: string) => string
+    value?: (row: any, col: string) => any
 
   },
 

package/src/Table/TableFilters.vue

@@ -1,61 +1,71 @@
 <template>
-  <div class="fc flex-wrap">
-    <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="col.Filter.titleClasses" class="text-xs text-slate-400">{{ col.Filter.title ??
-          col.title.toUpperCase() ?? col.name }}</div>
-
-        <!-- ТЕКСТ -->
-        <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'">
-          <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-row dense>
+      <v-col 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" cols="12" md="auto">
+
+        <div class="fc flex-col h-100">
+          <div :class="col.Filter.titleClasses" class="text-xs text-slate-400 mb-1">{{ col.Filter.title ??
+            col.title.toUpperCase() ?? col.name }}</div>
+
+          <!-- ТЕКСТ -->
+          <div class="mobile:w-full"
+            v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
+            <v-text-field density="compact" :label="col.title ?? col.name" type="text"
+              @update:model-value="update()" v-model="col.Filter.valueString" hide-details />
+          </div>
 
-        <!-- ВЕРТИКАЛЬНЫЕ -->
-        <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="mobile:w-full min-w-[150px]" @option:selected="update(col)"
-            @option:deselected="update(col)" />
-        </div>
+          <!-- ЦИФРЫ -->
+          <v-row dense v-if="col.Filter.type === 'number'">
+            <v-col cols="6">
+              <v-text-field density="compact" :label="'От ' + (col.title ?? col.name)" type="number"
+                @update:model-value="update()" v-model="col.Filter.valueRangeNumbers.from" hide-details />
+            </v-col>
+            <v-col cols="6">
+              <v-text-field density="compact" :label="'До ' + (col.title ?? col.name)" type="number"
+                @update:model-value="update()" v-model="col.Filter.valueRangeNumbers.to" hide-details />
+            </v-col>
+          </v-row>
+
+
+          <!-- СЕЛЕКТОРЫ -->
+          <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode !== 'horizontal'" class="mobile:w-full">
+            <!-- Multi-select -->
+            <v-select v-if="col.Filter.selector.multiselect" v-model="col.Filter.valueRange"
+              :label="col.title ?? col.name" :items="col.Selector.values" item-title="title" item-value="id"
+              class="mobile:w-full min-w-[200px]" density="compact" @update:model-value="update()" hide-details multiple
+              chips closable-chips>
+            </v-select>
+            <!-- Single-select -->
+            <v-select v-else v-model="col.Filter.valueString" :label="col.title ?? col.name"
+              :items="col.Selector.values" item-title="title" item-value="id" class="mobile:w-full min-w-[200px]"
+              density="compact" @update:model-value="update()" hide-details>
+            </v-select>
+          </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 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>
 
-        <!-- ДАТА -->
-        <div class="mobile:w-full" v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
-          <Datepicker class="mobile:w-full" 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>
-          <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange"
-            :range="true" :enable-time-picker="false" :auto-apply="true" @update:model-value="update()"
-            :teleport="true">
-          </Datepicker>
+          <!-- ДАТА -->
+          <div class="mobile:w-full" v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
+            <Datepicker class="mobile:w-full" 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>
+            <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange"
+              :range="true" :enable-time-picker="false" :auto-apply="true" @update:model-value="update()"
+              :teleport="true">
+            </Datepicker>
+          </div>
         </div>
-      </div>
 
-    </div>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -69,7 +79,7 @@ import { Column, IColumn } from './Columns';
 //import { TableFilter } from './TableOpts.js';
 import FlameTable from './FlameTable';
 import Datepicker from '@vuepic/vue-datepicker';
-import vSelect from 'vue-select'
+// import vSelect from 'vue-select' // Больше не используется
 import ITableSelectorItem from './TableSelectorItem';
 
 // Глобальное хранилище и роуты
@@ -92,12 +102,16 @@ onMounted(async () => {
 })
 
 
-const update = (col?: Column) => {
+const update = () => {
 
   // селектор преобразуем к v-model
+  /*
+  // Эта логика больше не нужна, т.к. v-select от Vuetify с item-value="id" 
+  // сразу пишет в модель нужные значения (id или массив id)
   if (col && col.Filter?.selector?.multiselect) {
     col.Filter.valueRange = (col.Filter.valueString as any).map((r: ITableSelectorItem) => r.id);
   }
+  */
 
   props.table.update({}, null, 'filters');
 

package/tsconfig.json

@@ -29,7 +29,7 @@
     ],
     "skipLibCheck": true,
     "allowJs": true,
-    "experimentalDecorators": true,
+    "experimentalDecorators": true
   },
   "include": [
     "src/**/*.ts",