@itfin/components 1.3.22 → 1.3.24

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.
@@ -150,7 +150,7 @@
150
150
  display: flex;
151
151
  width: fit-content;
152
152
  //margin-top: 20px;
153
- margin-bottom: 20px ;
153
+ //margin-bottom: 20px ;
154
154
 
155
155
  .preline {
156
156
  display: flex;
@@ -298,7 +298,7 @@ class itfTableGroup extends Vue {
298
298
  get visibleColumns() {
299
299
  let list = this.columns;
300
300
  list = sortBy(list, (column) => column.pinned ? 0 : 1);
301
- let left = 47;
301
+ let left = 57; // sum of first 2 cells
302
302
  const pinned = list.filter((column) => column.pinned && column.visible !== false);
303
303
  list = list.map((column, index) => {
304
304
  const item = {...column};
@@ -36,39 +36,37 @@
36
36
  </span>
37
37
  </template>
38
38
 
39
- <ul class="dropdown-menu show ps-0" aria-labelledby="dropdownMenuOffset">
40
- <li v-if="column.sortable">
41
- <a class="dropdown-item d-flex align-items-center" href="javascript:;">
42
- <itf-icon name="arrow_up" :size="16" class="me-1" />
43
- Sort By Asc
44
- </a>
45
- </li>
46
- <li v-if="column.sortable">
47
- <a class="dropdown-item d-flex align-items-center" href="javascript:;">
48
- <itf-icon name="arrow_down" :size="16" class="me-1" />
49
- Sort By Desc
50
- </a>
51
- </li>
52
- <li v-if="column.groupable">
53
- <a class="dropdown-item d-flex align-items-center" href="javascript:;">
54
- <itf-icon name="episodes" :size="16" class="me-1" />
55
- Group By
56
- </a>
57
- </li>
58
- <li>
59
- <a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="togglePinned(n)">
60
- <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
61
- <span v-if="column.pinned">Unpin Column</span>
62
- <span v-else>Pin Column</span>
63
- </a>
64
- </li>
65
- <li>
66
- <a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="hideColumn(n)">
67
- <itf-icon name="eye_no" :size="16" class="me-1" />
68
- Hide
69
- </a>
70
- </li>
71
- </ul>
39
+ <div v-if="column.sortable">
40
+ <a class="dropdown-item d-flex align-items-center" href="javascript:;">
41
+ <itf-icon name="arrow_up" :size="16" class="me-1" />
42
+ Sort By Asc
43
+ </a>
44
+ </div>
45
+ <div v-if="column.sortable">
46
+ <a class="dropdown-item d-flex align-items-center" href="javascript:;">
47
+ <itf-icon name="arrow_down" :size="16" class="me-1" />
48
+ Sort By Desc
49
+ </a>
50
+ </div>
51
+ <div v-if="column.groupable">
52
+ <a class="dropdown-item d-flex align-items-center" href="javascript:;">
53
+ <itf-icon name="episodes" :size="16" class="me-1" />
54
+ Group By
55
+ </a>
56
+ </div>
57
+ <div>
58
+ <a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="togglePinned(n)">
59
+ <itf-icon :name="column.pinned ? 'checkbox_checked' : 'checkbox_empty'" :size="16" class="me-1" />
60
+ <span v-if="column.pinned">Unpin Column</span>
61
+ <span v-else>Pin Column</span>
62
+ </a>
63
+ </div>
64
+ <div>
65
+ <a class="dropdown-item d-flex align-items-center" href="javascript:;" @click="hideColumn(n)">
66
+ <itf-icon name="eye_no" :size="16" class="me-1" />
67
+ Hide
68
+ </a>
69
+ </div>
72
70
  </itf-dropdown>
73
71
  </div>
74
72
  <div v-if="n === sortedColumns.length - 1"