flameresttable 1.0.55 → 1.0.57

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 (8) hide show
  1. package/package.json +3 -2
  2. package/src/App.vue +4 -1
  3. package/src/Table/Table.vue +97 -67
  4. package/src/assets/icons/add.svg +0 -0
  5. package/src/assets/icons/edit.svg +3 -0
  6. package/src/assets/icons/remove.svg +3 -0
  7. package/src/main.ts +0 -1
  8. package/src/pages/SubRow.vue +50 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flameresttable",
3
- "version": "1.0.55",
3
+ "version": "1.0.57",
4
4
  "main": "./src/plugin.ts",
5
5
  "repository": {
6
6
  "type": "git",
@@ -8,7 +8,8 @@
8
8
  },
9
9
  "scripts": {
10
10
  "push and publish": "git push && npm --no-git-tag-version version patch && npm publish",
11
- "install/update": "npm i && npm update --save"
11
+ "install/update": "npm i && npm update --save",
12
+ "dev": "vite"
12
13
  },
13
14
  "dependencies": {
14
15
  "@vuepic/vue-datepicker": "^7.2.1",
package/src/App.vue CHANGED
@@ -5,6 +5,7 @@ import { ref } from 'vue';
5
5
  import Model from '@models/Testtable';
6
6
  import TableOpts from './Table/TableOpts';
7
7
  import Relatedtable from '@models/Relatedtable';
8
+ import SubRow from './pages/SubRow.vue';
8
9
 
9
10
  const store = storeFile(), router = useRouter(), route = useRoute();
10
11
 
@@ -53,7 +54,9 @@ opts.LoadParams.sort = ['-dt1'];
53
54
  <template lang="pug">
54
55
  Table(:model="Model", :opts="opts")
55
56
  template(v-slot:RowSubSlot="params")
56
- | {{ params.row.name + ' LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG line' }}
57
+ //| {{ params.row.name + ' LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG LOOOONG line' }}
58
+ //SubRow
59
+ div(class="flex items-center justify-center w-full mx-auto") AAA
57
60
  template(#otherButtons)
58
61
  </template>
59
62
 
package/src/Table/Table.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="mt-0 overflow-x-scroll">
2
+ <div class="mt-0 overflow-x-scroll defaultTable">
3
3
 
4
4
  <!-- ФИЛЬТРЫ -->
5
5
  <TableFilters :columns="Table.columns" :table="Table"></TableFilters>
@@ -18,82 +18,89 @@
18
18
  </TableTasksPanel>
19
19
 
20
20
  <!-- ТАБЛИЦА-->
21
- <div class="mt-2 table table-fixed w-full ">
21
+ <div class="mt-2 w-full grid-container gap-0" :style="{ '--column-count': columnCount() }">
22
22
 
23
23
  <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
24
- <div class="table-header-group">
25
-
26
- <!-- ЧЕКБОКСЫ -->
27
- <div class="table-cell w-[21px] align-middle">
28
- <label class="checkbox" v-if="Table.opts.rowSelectors">
29
- <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
30
- <span class='indicator'></span>
31
- </label>
32
- </div>
24
+ <!--<div>-->
33
25
 
34
- <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column.name"
35
- :class="' defaultHeader ' + column.Table.classesHeader"
36
- class=" table-cell align-middle border-r border-r-slate-100 px-2">
37
- <span>{{ column.Table.titleCustom !== null ? (column as any).Table.titleCustom(column) : column.Table.title !==
38
- '' ?
39
- column.Table.title : column.title !== '' ? column.title :
40
- column.name }}</span>
41
- </div>
42
- <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2">
43
- <button class="bg-green-600 invisible">
44
- Изменить
45
- </button>
46
- </div>
47
- <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2">
48
- <button class="bg-green-600 invisible">
49
- Удалить
50
- </button>
51
- </div>
26
+ <!-- ЧЕКБОКСЫ -->
27
+ <div class="w-[21px] align-middle col-span-1">
28
+ <label class="checkbox" v-if="Table.opts.rowSelectors">
29
+ <input type='checkbox' @change="CheckboxSelectionChanged($event, true)">
30
+ <span class='indicator'></span>
31
+ </label>
32
+ </div>
33
+
34
+ <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column.name"
35
+ :class="' defaultHeader ' + column.Table.classesHeader" class=" align-middle border-r border-r-slate-100 px-2">
36
+ <span>{{ column.Table.titleCustom !== null ? (column as any).Table.titleCustom(column) : column.Table.title !==
37
+ '' ?
38
+ column.Table.title : column.title !== '' ? column.title :
39
+ column.name }}</span>
40
+ </div>
41
+ <div v-if="opts.Edit.can" class=" border-r border-r-slate-100 px-2">
42
+ <button class="bg-green-600 invisible">
43
+
44
+ </button>
52
45
  </div>
46
+ <div v-if="opts.Remove.can" class=" border-r border-r-slate-100 px-2">
47
+ <button class="bg-green-600 invisible">
48
+
49
+ </button>
50
+ </div>
51
+ <!--</div>-->
53
52
 
54
53
  <!-- СТРОКИ-->
55
- <div class="table-row-group text-left">
56
-
57
- <template v-for="(row) in (Table.Rows.rows)">
58
- <div :key="'row_' + (row as any).id" class="defaultRow table-row cursor-pointer hover:bg-slate-100" v-if="true">
59
-
60
- <!-- ЧЕКБОКСЫ -->
61
- <div class="table-cell align-middle w-[21px]">
62
- <label class="checkbox" v-if="Table.opts.rowSelectors">
63
- <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
64
- @change="CheckboxSelectionChanged($event, false)">
65
- <span class='indicator'></span>
66
- </label>
67
- </div>
54
+ <template v-for="(row) in (Table.Rows.rows)">
55
+ <template v-if="true">
56
+
57
+ <!-- ЧЕКБОКСЫ -->
58
+ <!-- class="defaultRow cursor-pointer hover:bg-slate-100" -->
59
+ <div class="col-span-1 align-middle w-[21px]" :key="'chkbox_row_' + (row as any).id">
60
+ <label class="checkbox" v-if="Table.opts.rowSelectors">
61
+ <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
62
+ @change="CheckboxSelectionChanged($event, false)">
63
+ <span class='indicator'></span>
64
+ </label>
65
+ </div>
68
66
 
69
- <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column.name"
70
- :class="' defaultCell ' + column.Table.classes"
71
- class="table-cell align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
72
- @click="columnClick(row, column)"
73
- :style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
67
+ <div v-for="column in Table.columns" v-show="column.Table.isShow"
68
+ :key="'tc_' + column.name + '_row_' + (row as any).id" :class="' defaultCell ' + column.Table.classes"
69
+ class=" align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
70
+ @click="columnClick(row, column)"
71
+ :style="(column.Table.width === null ? '' : 'width:' + column.Table.width + 'px')">
74
72
 
75
- <span v-if="!column.Table.isRawValue">{{
76
- column.Table.value(row, column) }}</span>
77
- <span v-else v-html="column.Table.value(row, column)"></span>
78
- </div>
79
- <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
80
- <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
81
- Изменить
82
- </button>
83
- </div>
84
- <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
85
- <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
86
- Удалить
87
- </button>
88
- </div>
73
+ <span v-if="!column.Table.isRawValue">{{
74
+ column.Table.value(row, column) }}</span>
75
+ <span v-else v-html="column.Table.value(row, column)"></span>
89
76
  </div>
90
- <div :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
91
- <div class="table-cell no-wrap-cell">
92
- <slot name="RowSubSlot" :row="row" />
93
- </div>
77
+ <div v-if="opts.Edit.can" class=" border-r border-r-slate-100 px-2 text-center"
78
+ :key="'edit_' + 'row_' + (row as any).id">
79
+ <button class="mobile:hidden px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
80
+ Изменить
81
+ </button>
82
+ <button class="desktop:hidden px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
83
+ <img src="/src/assets/icons/edit.svg" class="w-4 h-4 fill-white" />
84
+ </button>
85
+ </div>
86
+ <div v-if="opts.Remove.can" class=" border-r border-r-slate-100 px-2 text-center"
87
+ :key="'delete_' + 'row_' + (row as any).id">
88
+ <button class="mobile:hidden px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
89
+ Удалить
90
+ </button>
91
+ <button class="desktop:hidden px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
92
+ <img src="/src/assets/icons/remove.svg" class="w-4 h-4 fill-white" />
93
+ </button>
94
94
  </div>
95
95
  </template>
96
- </div>
96
+ <div class=" text-center relative" :style="'grid-column: span ' + columnCount()"
97
+ :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
98
+ <div class=" mx-auto no-wrap-cell mobile:w-full text-center">
99
+ <slot name="RowSubSlot" :row="row" />
100
+ </div>
101
+ </div>
102
+ </template>
103
+
97
104
 
98
105
  </div>
99
106
  </div>
@@ -362,6 +369,15 @@ export default defineComponent({
362
369
  return Table.RowsParams[row[primaryKey]].collapsed
363
370
  }
364
371
 
372
+ const columnCount = (): number => {
373
+ let cnt = Object.keys(Table.columns).filter(r => Table.columns[r].Table.isShow).length;
374
+ // Добавляем одно поле для чекбоксов
375
+ cnt++;
376
+ // Добавляем поля изменения и удаления
377
+ if (Table.opts.Add.can) cnt++;
378
+ if (Table.opts.Edit.can) cnt++;
379
+ return cnt;
380
+ }
365
381
 
366
382
  return {
367
383
  Table,
@@ -375,7 +391,8 @@ export default defineComponent({
375
391
  getSelector,
376
392
  primaryKey,
377
393
  columnClick,
378
- isRowCollapsed
394
+ isRowCollapsed,
395
+ columnCount
379
396
  }
380
397
 
381
398
  },
@@ -425,13 +442,26 @@ export default defineComponent({
425
442
 
426
443
  })
427
444
 
445
+
446
+
428
447
  </script>
429
448
 
430
449
  <style scoped lang="scss">
450
+ .grid-container {
451
+ display: grid;
452
+ grid-template-columns: repeat(var(--column-count), 1fr);
453
+ }
454
+
431
455
  .no-wrap-cell {
432
456
  white-space: nowrap !important;
433
457
  }
434
458
 
459
+ .defaultTable {
460
+ font-family: "Roboto", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
461
+ font-size: 14px;
462
+ text-align: left;
463
+ }
464
+
435
465
  .defaultHeader {
436
466
  color: rgba(55, 53, 47, 0.65);
437
467
  font-size: 14px;
package/src/assets/icons/add.svg ADDED
File without changes
package/src/assets/icons/edit.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
2
+ <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
3
+ </svg>
package/src/assets/icons/remove.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
2
+ <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
3
+ </svg>
package/src/main.ts CHANGED
@@ -16,6 +16,5 @@ REST.SERVER = 'http://testrest';
16
16
  createApp(App)
17
17
  .use(createPinia())
18
18
  .use(router)
19
- .use(vSelect as any)
20
19
  .use(VueUniversalModal, { teleportTarget: '#my-modals', modalComponent: 'CustomModal' })
21
20
  .mount('#app')
package/src/pages/SubRow.vue ADDED
@@ -0,0 +1,50 @@
1
+ <template lang="pug">
2
+ .fb.my-5.text-left(class="mobile:flex-wrap mobile:justify-between mobile:w-full")
3
+ .bg-green(class="w-[300px] h-[300px]")
4
+ .ml-5(class="mobile:w-full")
5
+ .fb.my-1(class="mobile:flex-wrap mobile:w-full mobile:justify-between")
6
+ div.inline-block.text-3xl NAME
7
+ span.text-sm.inline-block.bg-blue-200.mx-5.py-1.px-2 TYPE
8
+
9
+ div.text-sm.bg-slate-100.text-slate-500.px-2.py-1.inline-block
10
+ span Flex right block
11
+ span.ml-1 block 2
12
+
13
+ div.my-1
14
+ span.text-xl Text: xxxxx
15
+
16
+ div.my-1
17
+ .text-sm.inline-block.bg-yellow-100.mr-2.py-1.px-2 TEST
18
+ div.my-1.text-sm Text: xxxxx
19
+ div.my-1.text-sm Text: xxxxx
20
+ div.my-1.text-sm Text: xxxxx
21
+ div.my-1.text-sm Text: xxxxx
22
+
23
+
24
+ </template>
25
+
26
+ <script setup lang="ts">
27
+ import { onMounted, reactive, ref, defineProps, defineEmits, nextTick } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
28
+
29
+ // Иконки
30
+ import { } from '@icons/24/solid'
31
+
32
+ // Глобальное хранилище и роуты
33
+ const store = storeFile(), router = useRouter(), route = useRoute();
34
+
35
+ // Входящие данные компонента
36
+ const emit = defineEmits(['test'])
37
+
38
+ // Локальное состояние компонента
39
+ const state = reactive({
40
+ data: {},
41
+ calendar: '',
42
+ disabledDates: [] as any[],
43
+ links: [] as any[],
44
+ updatedDT: null as any,
45
+ })
46
+
47
+
48
+ </script>
49
+
50
+ <style scoped lang="scss"></style>