flameresttable 1.0.54 → 1.0.56

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 +95 -66
  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.54",
3
+ "version": "1.0.56",
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,81 +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.Table.titleCustom(column) : column.Table.title !== '' ?
38
- column.Table.title : column.title !== '' ? column.title :
39
- column.name }}</span>
40
- </div>
41
- <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2">
42
- <button class="bg-green-600 invisible">
43
- Изменить
44
- </button>
45
- </div>
46
- <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2">
47
- <button class="bg-green-600 invisible">
48
- Удалить
49
- </button>
50
- </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>
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>
51
50
  </div>
51
+ <!--</div>-->
52
52
 
53
53
  <!-- СТРОКИ-->
54
- <div class="table-row-group text-left">
55
-
56
- <template v-for="(row) in (Table.Rows.rows)">
57
- <div :key="'row_' + (row as any).id" class="defaultRow table-row cursor-pointer hover:bg-slate-100" v-if="true">
58
-
59
- <!-- ЧЕКБОКСЫ -->
60
- <div class="table-cell align-middle w-[21px]">
61
- <label class="checkbox" v-if="Table.opts.rowSelectors">
62
- <input type='checkbox' v-model="Table.RowsParams[(row as any)[primaryKey]].selected"
63
- @change="CheckboxSelectionChanged($event, false)">
64
- <span class='indicator'></span>
65
- </label>
66
- </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>
67
66
 
68
- <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column.name"
69
- :class="' defaultCell ' + column.Table.classes"
70
- class="table-cell align-middle border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
71
- @click="columnClick(row, column)"
72
- :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')">
73
72
 
74
- <span v-if="!column.Table.isRawValue">{{
75
- column.Table.value(row, column) }}</span>
76
- <span v-else v-html="column.Table.value(row, column)"></span>
77
- </div>
78
- <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
79
- <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
80
- Изменить
81
- </button>
82
- </div>
83
- <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
84
- <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
85
- Удалить
86
- </button>
87
- </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>
88
76
  </div>
89
- <div :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
90
- <div class="table-cell no-wrap-cell">
91
- <slot name="RowSubSlot" :row="row" />
92
- </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>
93
94
  </div>
94
95
  </template>
95
- </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
+
96
104
 
97
105
  </div>
98
106
  </div>
@@ -361,6 +369,15 @@ export default defineComponent({
361
369
  return Table.RowsParams[row[primaryKey]].collapsed
362
370
  }
363
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
+ }
364
381
 
365
382
  return {
366
383
  Table,
@@ -374,7 +391,8 @@ export default defineComponent({
374
391
  getSelector,
375
392
  primaryKey,
376
393
  columnClick,
377
- isRowCollapsed
394
+ isRowCollapsed,
395
+ columnCount
378
396
  }
379
397
 
380
398
  },
@@ -424,13 +442,24 @@ export default defineComponent({
424
442
 
425
443
  })
426
444
 
445
+
446
+
427
447
  </script>
428
448
 
429
449
  <style scoped lang="scss">
450
+ .grid-container {
451
+ display: grid;
452
+ grid-template-columns: repeat(var(--column-count), 1fr);
453
+ }
454
+
430
455
  .no-wrap-cell {
431
456
  white-space: nowrap !important;
432
457
  }
433
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
+ }
462
+
434
463
  .defaultHeader {
435
464
  color: rgba(55, 53, 47, 0.65);
436
465
  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>