flameresttable 1.0.116 → 1.0.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +19 -19
  2. package/src/App.vue +8 -6
  3. package/src/Table/TableFilters.vue +67 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flameresttable",
3
- "version": "1.0.116",
3
+ "version": "1.0.117",
4
4
  "main": "./src/plugin.ts",
5
5
  "repository": {
6
6
  "type": "git",
@@ -12,39 +12,39 @@
12
12
  "dev": "vite"
13
13
  },
14
14
  "dependencies": {
15
- "@vuepic/vue-datepicker": "^11.0.1",
16
- "flamerest": "^1.0.110",
15
+ "@vuepic/vue-datepicker": "^11.0.2",
16
+ "flamerest": "^1.0.125",
17
17
  "lodash-es": "^4.17.21",
18
18
  "pinia": "^2.3.1",
19
19
  "pug": "github:FlameArt/pug-tailwind-only",
20
20
  "pug-lexer": "github:FlameArt/pug-lexer-only",
21
- "sass": "^1.85.1",
21
+ "sass": "^1.89.2",
22
22
  "vue": "^3.5.13",
23
- "vue-router": "^4.5.0",
23
+ "vue-router": "^4.5.1",
24
24
  "vue-select": "^4.0.0-beta.6",
25
- "vuetify": "^3.7.14",
26
- "vuetify-pro-tiptap": "^2.5.7"
25
+ "vuetify": "^3.8.12",
26
+ "vuetify-pro-tiptap": "^2.6.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@heroicons/vue": "^2.2.0",
30
30
  "@types/lodash-es": "^4.17.12",
31
31
  "@types/lodash.merge": "^4.6.9",
32
- "@types/node": "^22.10.5",
32
+ "@types/node": "^22.16.0",
33
33
  "@types/vue-select": "^3.16.8",
34
- "@typescript-eslint/eslint-plugin": "^8.25.0",
35
- "@typescript-eslint/parser": "^8.25.0",
36
- "@vitejs/plugin-vue": "^5.2.1",
34
+ "@typescript-eslint/eslint-plugin": "^8.35.1",
35
+ "@typescript-eslint/parser": "^8.35.1",
36
+ "@vitejs/plugin-vue": "^5.2.4",
37
37
  "@volar/vue-language-plugin-pug": "^1.6.5",
38
38
  "@vue/compiler-sfc": "^3.5.13",
39
- "autoprefixer": "^10.4.20",
40
- "eslint": "^9.21.0",
41
- "eslint-plugin-vue": "^9.32.0",
42
- "postcss": "^8.5.3",
43
- "postcss-import": "^16.1.0",
39
+ "autoprefixer": "^10.4.21",
40
+ "eslint": "^9.30.1",
41
+ "eslint-plugin-vue": "^9.33.0",
42
+ "postcss": "^8.5.6",
43
+ "postcss-import": "^16.1.1",
44
44
  "tailwindcss": "^3.4.17",
45
- "typescript": "^5.7.3",
46
- "vite": "^6.2.0",
47
- "vue-tsc": "^2.2.6",
45
+ "typescript": "^5.8.3",
46
+ "vite": "^6.3.5",
47
+ "vue-tsc": "^2.2.12",
48
48
  "vue-universal-modal": "^1.1.4"
49
49
  },
50
50
  "rules": {}
package/src/App.vue CHANGED
@@ -56,12 +56,14 @@ opts.LoadParams.sort = ['-dt1'];
56
56
  </script>
57
57
 
58
58
  <template lang="pug">
59
- Table(:model="Model", :opts="opts")
60
- template(v-slot:RowSubSlot="params")
61
- //| {{ params.row.name + ' LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG line' }}
62
- //SubRow
63
- div(class="flex items-center justify-center w-full mx-auto") AAA
64
- template(#otherButtons)
59
+ v-app
60
+ v-main
61
+ Table(:model="Model", :opts="opts")
62
+ template(v-slot:RowSubSlot="params")
63
+ //| {{ params.row.name + ' LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG line' }}
64
+ //SubRow
65
+ div(class="flex items-center justify-center w-full mx-auto") AAA
66
+ template(#otherButtons)
65
67
  </template>
66
68
 
67
69
  <style>
package/src/Table/TableFilters.vue CHANGED
@@ -1,61 +1,71 @@
1
1
  <template>
2
- <div class="fc flex-wrap">
3
- <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow"
4
- :class="(col.Filter.classes + (col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal' ? ' w-full ' : ''))"
5
- class="py-1 mobile:w-full mobile:px-2 mobile:block desktop:inline-block desktop:mx-2">
6
-
7
- <div class="fc flex-col ">
8
- <div :class="col.Filter.titleClasses" class="text-xs text-slate-400">{{ col.Filter.title ??
9
- col.title.toUpperCase() ?? col.name }}</div>
10
-
11
- <!-- ТЕКСТ -->
12
- <div class="mobile:w-full"
13
- v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
14
- <input class="mobile:w-full outline-none border border-slate-500 px-2 py-1"
15
- :placeholder="col.title ?? col.name" type="text" @keyup="update()" v-model="col.Filter.valueString" />
16
- </div>
17
-
18
- <!-- ЦИФРЫ -->
19
- <div class="fc mobile:w-full px-2" v-if="col.Filter.type === 'number'">
20
- <input class="max-w-[100px] flex-1 outline-none border border-slate-500 px-2 py-1"
21
- :placeholder="'From ' + (col.title ?? col.name)" type="text" @keyup="update()"
22
- v-model="col.Filter.valueRangeNumbers.from" />
23
- <span class="mx-2"> - </span>
24
- <input class="max-w-[100px] flex-1 outline-none border border-slate-500 px-2 py-1"
25
- :placeholder="'To ' + (col.title ?? col.name)" type="text" @keyup="update()"
26
- v-model="col.Filter.valueRangeNumbers.to" />
27
- </div>
28
-
29
- <!-- СЕЛЕКТОРЫ -->
2
+ <div>
3
+ <v-row dense>
4
+ <v-col v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow"
5
+ :class="(col.Filter.classes + (col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal' ? ' w-full ' : ''))"
6
+ class="py-1" cols="12" md="auto">
7
+
8
+ <div class="fc flex-col h-100">
9
+ <div :class="col.Filter.titleClasses" class="text-xs text-slate-400 mb-1">{{ col.Filter.title ??
10
+ col.title.toUpperCase() ?? col.name }}</div>
11
+
12
+ <!-- ТЕКСТ -->
13
+ <div class="mobile:w-full"
14
+ v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
15
+ <v-text-field density="compact" :label="col.title ?? col.name" type="text"
16
+ @update:model-value="update()" v-model="col.Filter.valueString" hide-details />
17
+ </div>
30
18
 
31
- <!-- ВЕРТИКАЛЬНЫЕ -->
32
- <div v-if="col.Filter.type === 'selector'" class="mobile:w-full">
33
- <v-select :multiple="col.Filter.selector.multiselect" v-model="col.Filter.valueString"
34
- :options="col.Selector.values" class="mobile:w-full min-w-[150px]" @option:selected="update(col)"
35
- @option:deselected="update(col)" />
36
- </div>
19
+ <!-- ЦИФРЫ -->
20
+ <v-row dense v-if="col.Filter.type === 'number'">
21
+ <v-col cols="6">
22
+ <v-text-field density="compact" :label="'От ' + (col.title ?? col.name)" type="number"
23
+ @update:model-value="update()" v-model="col.Filter.valueRangeNumbers.from" hide-details />
24
+ </v-col>
25
+ <v-col cols="6">
26
+ <v-text-field density="compact" :label="'До ' + (col.title ?? col.name)" type="number"
27
+ @update:model-value="update()" v-model="col.Filter.valueRangeNumbers.to" hide-details />
28
+ </v-col>
29
+ </v-row>
30
+
31
+
32
+ <!-- СЕЛЕКТОРЫ -->
33
+ <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode !== 'horizontal'" class="mobile:w-full">
34
+ <!-- Multi-select -->
35
+ <v-select v-if="col.Filter.selector.multiselect" v-model="col.Filter.valueRange"
36
+ :label="col.title ?? col.name" :items="col.Selector.values" item-title="title" item-value="id"
37
+ class="mobile:w-full min-w-[200px]" density="compact" @update:model-value="update()" hide-details multiple
38
+ chips closable-chips>
39
+ </v-select>
40
+ <!-- Single-select -->
41
+ <v-select v-else v-model="col.Filter.valueString" :label="col.title ?? col.name"
42
+ :items="col.Selector.values" item-title="title" item-value="id" class="mobile:w-full min-w-[200px]"
43
+ density="compact" @update:model-value="update()" hide-details>
44
+ </v-select>
45
+ </div>
37
46
 
38
- <!-- ГОРИЗОНТАЛЬНЫЕ -->
39
- <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal'"
40
- class="w-full text-center">
41
- <div v-for="item in col.Selector.values" :key="item.id" class="px-2 py-1 mx-1 inline-block rounded-[30px]"
42
- :style="'background-color:' + (item.color ?? 'rgb(148,163,184)')">
43
- {{ item.title }}
47
+ <!-- ГОРИЗОНТАЛЬНЫЕ -->
48
+ <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal'"
49
+ class="w-full text-center">
50
+ <div v-for="item in col.Selector.values" :key="item.id" class="px-2 py-1 mx-1 inline-block rounded-[30px]"
51
+ :style="'background-color:' + (item.color ?? 'rgb(148,163,184)')">
52
+ {{ item.title }}
53
+ </div>
44
54
  </div>
45
- </div>
46
55
 
47
- <!-- ДАТА -->
48
- <div class="mobile:w-full" v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
49
- <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'date'" v-model="col.Filter.valueString"
50
- :auto-apply="true" :enable-time-picker="false" @update:model-value="update()" :teleport="true"></Datepicker>
51
- <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange"
52
- :range="true" :enable-time-picker="false" :auto-apply="true" @update:model-value="update()"
53
- :teleport="true">
54
- </Datepicker>
56
+ <!-- ДАТА -->
57
+ <div class="mobile:w-full" v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
58
+ <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'date'" v-model="col.Filter.valueString"
59
+ :auto-apply="true" :enable-time-picker="false" @update:model-value="update()" :teleport="true"></Datepicker>
60
+ <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange"
61
+ :range="true" :enable-time-picker="false" :auto-apply="true" @update:model-value="update()"
62
+ :teleport="true">
63
+ </Datepicker>
64
+ </div>
55
65
  </div>
56
- </div>
57
66
 
58
- </div>
67
+ </v-col>
68
+ </v-row>
59
69
  </div>
60
70
  </template>
61
71
 
@@ -69,7 +79,7 @@ import { Column, IColumn } from './Columns';
69
79
  //import { TableFilter } from './TableOpts.js';
70
80
  import FlameTable from './FlameTable';
71
81
  import Datepicker from '@vuepic/vue-datepicker';
72
- import vSelect from 'vue-select'
82
+ // import vSelect from 'vue-select' // Больше не используется
73
83
  import ITableSelectorItem from './TableSelectorItem';
74
84
 
75
85
  // Глобальное хранилище и роуты
@@ -92,12 +102,16 @@ onMounted(async () => {
92
102
  })
93
103
 
94
104
 
95
- const update = (col?: Column) => {
105
+ const update = () => {
96
106
 
97
107
  // селектор преобразуем к v-model
108
+ /*
109
+ // Эта логика больше не нужна, т.к. v-select от Vuetify с item-value="id"
110
+ // сразу пишет в модель нужные значения (id или массив id)
98
111
  if (col && col.Filter?.selector?.multiselect) {
99
112
  col.Filter.valueRange = (col.Filter.valueString as any).map((r: ITableSelectorItem) => r.id);
100
113
  }
114
+ */
101
115
 
102
116
  props.table.update({}, null, 'filters');
103
117