@itfin/components 2.0.101 → 2.0.102

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 (21) hide show
  1. package/package.json +1 -1
  2. package/src/components/alert/AlertBanner.vue +70 -14
  3. package/src/components/filter/FilterFacetsList.vue +14 -7
  4. package/src/components/icon/components/nomi-close-alt.vue +6 -0
  5. package/src/components/icon/icons.js +3 -1
  6. package/src/components/icon/new-icons/close-alt.svg +4 -0
  7. package/src/components/icon/new-icons/cog-lightning.svg +4 -0
  8. package/src/components/icon/new-icons/comment-add.svg +4 -0
  9. package/src/components/icon/new-icons/comments.svg +4 -0
  10. package/src/components/icon/new-icons/copy.svg +4 -0
  11. package/src/components/icon/new-icons/light-bulb.svg +3 -0
  12. package/src/components/icon/new-icons/money-alt.svg +3 -0
  13. package/src/components/icon/new-icons/pending.svg +3 -0
  14. package/src/components/icon/new-icons/secure.svg +3 -0
  15. package/src/components/icon/new-icons/stop.svg +3 -0
  16. package/src/components/icon/new-icons/thumbs-down.svg +3 -0
  17. package/src/components/icon/new-icons/thumbs-up.svg +3 -0
  18. package/src/components/panels/Panel.vue +2 -1
  19. package/src/components/panels/PanelItemEdit.vue +10 -8
  20. package/src/components/panels/PanelList.vue +3 -0
  21. package/src/components/text-field/TextField.vue +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "2.0.101",
3
+ "version": "2.0.102",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/alert/AlertBanner.vue CHANGED
@@ -1,16 +1,19 @@
1
1
  <template>
2
- <div class="itf-alert-banner">
2
+ <div class="itf-alert-banner" :class="styleVariant">
3
3
  <div v-if="count" class="itf-alert-banner__counter px-2 bg-danger text-white fw-bold text-smaller text-decoration-none d-block rounded-pill">
4
4
  {{ count > 99 ? '99+' : count }}
5
5
  </div>
6
- <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple rounded-3 border bg-muted-2"></div>
7
- <div class="itf-alert-banner__panel px-3 rounded-3 border bg-muted-2 d-flex gap-3 align-items-start align-items-sm-center flex-sm-row flex-column">
6
+ <div v-if="$listeners.close" class="itf-alert-banner__close position-absolute text-muted cursor-pointer" @click="$emit('close')">
7
+ <itf-icon new name="close-alt" :size="20" />
8
+ </div>
9
+ <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple h-100 position-absolute rounded-3 border bg-muted-2"></div>
10
+ <div class="itf-alert-banner__panel h-100 rounded-3 border bg-muted-2 d-flex gap-2 gap-md-3 align-items-start align-items-md-center">
8
11
  <slot name="icon">
9
12
  <div v-if="icon" class="itf-alert-banner__icon rounded-2 bg-danger flex-shrink-0 d-flex align-items-center justify-content-center">
10
13
  <itf-icon new :name="icon" :size="24" class="text-white" />
11
14
  </div>
12
15
  </slot>
13
- <div class="flex-grow-1">
16
+ <div class="itf-alert-banner__content flex-grow-1 d-flex flex-column">
14
17
  <div class="fw-bold"><slot name="title">{{title}}</slot></div>
15
18
  <div class="small text-muted"><slot></slot></div>
16
19
  </div>
@@ -24,33 +27,85 @@
24
27
  max-width: 420px;
25
28
 
26
29
  &__counter {
27
- top: 0;
28
- right: -4px;
30
+ top: -12px;
31
+ right: -12px;
29
32
  position: absolute;
30
- z-index: 3;
31
- padding-top: 0.375rem;
32
- padding-bottom: 0.375rem;
33
- min-width: 1.75rem;
33
+ z-index: 4;
34
+ padding-top: 3px;
35
+ padding-bottom: 3px;
36
+ min-width: 24px;
34
37
  text-align: center;
38
+ @media (max-width: 768px) {
39
+ right: 0;
40
+ }
41
+ }
42
+ &__close {
43
+ top: 8px;
44
+ right: 8px;
45
+ z-index: 3;
46
+ @media (max-width: 768px) {
47
+ top: 12px;
48
+ right: 12px;
49
+ }
35
50
  }
36
51
  &__panel {
37
52
  position: relative;
38
53
  padding-top: 0.75rem;
39
54
  padding-bottom: 0.75rem;
40
- top: 4px;
55
+ padding-left: 1rem;
56
+ padding-right: 1rem;
41
57
  z-index: 2;
58
+ @media (max-width: 768px) {
59
+ flex-direction: column;
60
+ padding-left: 0.75rem;
61
+ padding-right: 0.75rem;
62
+ }
42
63
  }
43
64
  &__icon {
44
65
  width: 48px;
45
66
  height: 48px;
67
+ @media (max-width: 768px) {
68
+ width: 32px;
69
+ height: 32px;
70
+ }
71
+
72
+ ::v-deep .itf-icon {
73
+
74
+ svg {
75
+ @media (max-width: 768px) {
76
+ width: 16px!important;
77
+ height: 16px!important;
78
+ }
79
+ }
80
+ }
81
+ }
82
+ &__content {
83
+ @media (max-width: 768px) {
84
+ gap: 0.25rem;
85
+ }
46
86
  }
47
87
  &__multiple {
48
- position: absolute;
49
- top: 0;
88
+ top: -4px;
50
89
  right: -4px;
51
90
  z-index: 1;
52
- height: 100%;
53
91
  width: 100%;
92
+ @media (max-width: 768px) {
93
+ width: calc(100% - 8px);
94
+ right: 4px;
95
+ }
96
+ }
97
+
98
+ &.mobile-content-row {
99
+
100
+ @media (max-width: 768px) {
101
+ .itf-alert-banner__panel {
102
+ flex-direction: row;
103
+ padding-right: 2.5rem;
104
+ }
105
+ .itf-alert-banner__content {
106
+ gap: 0;
107
+ }
108
+ }
54
109
  }
55
110
  }
56
111
  </style>
@@ -71,5 +126,6 @@ class AlertBanner extends Vue {
71
126
  @Prop(String) icon;
72
127
  @Prop() count;
73
128
  @Prop(Boolean) multiple;
129
+ @Prop({ type: String, default: '' }) styleVariant;
74
130
  }
75
131
  </script>
package/src/components/filter/FilterFacetsList.vue CHANGED
@@ -22,9 +22,9 @@
22
22
  <div class="facets-list">
23
23
  <div v-for="(group, g) of groupedList">
24
24
  <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
25
- :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
25
+ :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.group)">
26
26
  <span class="facet-name text-dark d-flex align-items-center">
27
- <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
27
+ <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.group)" class="m-0" />
28
28
  <div class="w-100 text-truncate">{{ group.group }}</div>
29
29
  </span>
30
30
  </div>
@@ -166,21 +166,28 @@ class FilterFacetsList extends Vue {
166
166
  return groups.length > 1
167
167
  }
168
168
 
169
- isGroupSelected(items) {
170
- return items.every(item => item.isSelected);
169
+ isGroupSelected(groupName) {
170
+ const allGroupItems = this.items.filter(item => item.group === groupName);
171
+ const selectedValues = this.multiple
172
+ ? (Array.isArray(this.value) ? this.value.map(String) : [])
173
+ : [`${this.value}`];
174
+
175
+ return allGroupItems.every(item => selectedValues.includes(`${item.value}`));
171
176
  }
172
177
 
173
- groupSelected(value, items) {
178
+ groupSelected(value, groupName) {
179
+ const allGroupItems = this.items.filter(item => item.group === groupName);
180
+
174
181
  let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
175
182
  if (value) {
176
- items.forEach((item) => {
183
+ allGroupItems.forEach((item) => {
177
184
  const itemValue = `${item.value}`;
178
185
  if (!newVal.includes(itemValue)) {
179
186
  newVal.push(itemValue);
180
187
  }
181
188
  });
182
189
  } else {
183
- items.forEach((item) => {
190
+ allGroupItems.forEach((item) => {
184
191
  const itemValue = `${item.value}`;
185
192
  newVal = newVal.filter(val => val !== itemValue);
186
193
  });
package/src/components/icon/components/nomi-close-alt.vue ADDED
@@ -0,0 +1,6 @@
1
+ <template>
2
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M4.11914 15.8824L15.8839 4.11773" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M4.11914 4.11765L15.8839 15.8823" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
5
+ </svg>
6
+ </template>
package/src/components/icon/icons.js CHANGED
@@ -491,6 +491,8 @@ export default {
491
491
  'nomi-chart-line': () => import('./components/nomi-chart-line.vue'),
492
492
  'nomi-chart-funnel': () => import('./components/nomi-chart-funnel.vue'),
493
493
  'nomi-chevron-left': () => import('./components/nomi-chevron-left.vue'),
494
+ 'nomi-close': () => import('./components/nomi-close.vue'),
495
+ 'nomi-close-alt': () => import('./components/nomi-close-alt.vue'),
494
496
  'nomi-chevron-right': () => import('./components/nomi-chevron-right.vue'),
495
497
  'nomi-check-alt': () => import('./components/nomi-check-alt.vue'),
496
498
  'nomi-control-panel': () => import('./components/nomi-control-panel.vue'),
@@ -595,4 +597,4 @@ export default {
595
597
  'nomi-warning_triangle': () => import('./components/nomi-warning_triangle.vue'),
596
598
  'nomi-types': () => import('./components/nomi-types.vue'),
597
599
  'nomi-warning_triangle_filled': () => import('./components/nomi-warning_triangle_filled.vue'),
598
- }
600
+ }
package/src/components/icon/new-icons/close-alt.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M4.11914 15.8824L15.8839 4.11773" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M4.11914 4.11765L15.8839 15.8823" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/src/components/icon/new-icons/cog-lightning.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18.7862 10.9463C19.1758 10.4469 19.9568 10.82 19.8348 11.4473L19.1582 14.918C19.1404 15.0089 19.2085 15.0938 19.2989 15.0938H20.2545C20.8783 15.0938 21.2252 15.8345 20.8358 16.3344L17.379 20.7681C16.9894 21.2679 16.2081 20.8946 16.3303 20.2671L17.007 16.7965C17.0245 16.7056 16.9566 16.6207 16.8663 16.6207H15.9106C15.3487 16.6207 15.0119 16.0204 15.2352 15.5358C15.2382 15.529 15.2417 15.5224 15.245 15.5157C15.254 15.4975 15.2637 15.4795 15.2743 15.4617C15.2907 15.4341 15.3088 15.4065 15.3294 15.3801L18.7862 10.9463Z" fill="currentColor"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M8.73397 3.31435C9.44916 2.89522 10.3339 2.89522 11.0491 3.31435L15.6439 6.0065C16.3493 6.42014 16.7829 7.17978 16.7831 8.0005V11.1635L14.2122 14.4622C13.7278 15.0836 13.635 15.8314 13.8255 16.4863L11.0491 18.1149C10.3339 18.5341 9.44919 18.5341 8.73397 18.1149L4.13921 15.4215C3.4338 15.0078 3 14.2483 3 13.4275V8.0005C3.00013 7.17978 3.43374 6.42014 4.13921 6.0065L8.73397 3.31435ZM9.89153 8.20141C8.50767 8.20141 7.38579 9.35299 7.38552 10.773C7.38581 12.193 8.50768 13.3446 9.89153 13.3446C11.2754 13.3446 12.3973 12.193 12.3975 10.773C12.3973 9.35299 11.2754 8.20141 9.89153 8.20141Z" fill="currentColor"/>
4
+ </svg>
package/src/components/icon/new-icons/comment-add.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18 11C20.2091 11 22 12.7909 22 15C22 17.2091 20.2091 19 18 19C15.7909 19 14 17.2091 14 15C14 12.7909 15.7909 11 18 11ZM17.9873 12.7275C17.6088 12.7345 17.3078 13.0464 17.3145 13.4248L17.3301 14.3271L16.4287 14.3438C16.0503 14.3507 15.7492 14.6626 15.7559 15.041C15.7628 15.4195 16.0747 15.7205 16.4531 15.7139L17.3555 15.6973L17.3721 16.5996C17.379 16.978 17.691 17.2791 18.0693 17.2725C18.4478 17.2655 18.7489 16.9536 18.7422 16.5752L18.7256 15.6719L19.6279 15.6562C20.0063 15.6492 20.3075 15.3374 20.3008 14.959C20.2939 14.5805 19.982 14.2795 19.6035 14.2861L18.7002 14.3018L18.6846 13.4004C18.6775 13.022 18.3657 12.7209 17.9873 12.7275Z" fill="currentColor"/>
3
+ <path d="M16.125 5C17.1591 5 18 5.84092 18 6.875V10C15.2386 10 13 12.2386 13 15C13 15.4316 13.0544 15.8505 13.1572 16.25H11.5322L6.75 20.0762V16.25H4.875C3.84095 16.25 3.00002 15.409 3 14.375V6.875C3 5.84093 3.84093 5.00002 4.875 5H16.125Z" fill="currentColor"/>
4
+ </svg>
package/src/components/icon/new-icons/comments.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M5.6 16.8H7.2V20.0648L11.2808 16.8H15.2C16.0824 16.8 16.8 16.0824 16.8 15.2V8.80001C16.8 7.91761 16.0824 7.20001 15.2 7.20001H5.6C4.7176 7.20001 4 7.91761 4 8.80001V15.2C4 16.0824 4.7176 16.8 5.6 16.8Z" fill="currentColor"/>
3
+ <path d="M18.4002 4H8.8002C7.9178 4 7.2002 4.7176 7.2002 5.6H16.8002C17.6826 5.6 18.4002 6.3176 18.4002 7.2V13.6C19.2826 13.6 20.0002 12.8824 20.0002 12V5.6C20.0002 4.7176 19.2826 4 18.4002 4Z" fill="currentColor"/>
4
+ </svg>
package/src/components/icon/new-icons/copy.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M17.3335 9.33337H10.6668C9.93045 9.33337 9.3335 9.93033 9.3335 10.6667V17.3334C9.3335 18.0698 9.93045 18.6667 10.6668 18.6667H17.3335C18.0699 18.6667 18.6668 18.0698 18.6668 17.3334V10.6667C18.6668 9.93033 18.0699 9.33337 17.3335 9.33337Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M6.66683 14.6667C5.9335 14.6667 5.3335 14.0667 5.3335 13.3334V6.66671C5.3335 5.93337 5.9335 5.33337 6.66683 5.33337H13.3335C14.0668 5.33337 14.6668 5.93337 14.6668 6.66671" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ </svg>
package/src/components/icon/new-icons/light-bulb.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.0607 17.75C14.0607 17.9158 13.9948 18.0747 13.8776 18.1919C13.7604 18.3092 13.6014 18.375 13.4357 18.375H9.68568C9.51992 18.375 9.36095 18.3092 9.24374 18.1919C9.12653 18.0747 9.06068 17.9158 9.06068 17.75C9.06068 17.5842 9.12653 17.4253 9.24374 17.3081C9.36095 17.1908 9.51992 17.125 9.68568 17.125H13.4357C13.6014 17.125 13.7604 17.1908 13.8776 17.3081C13.9948 17.4253 14.0607 17.5842 14.0607 17.75ZM12.1857 19H10.9357C10.7699 19 10.611 19.0658 10.4937 19.1831C10.3765 19.3003 10.3107 19.4592 10.3107 19.625C10.3107 19.7908 10.3765 19.9497 10.4937 20.0669C10.611 20.1842 10.7699 20.25 10.9357 20.25H12.1857C12.3514 20.25 12.5104 20.1842 12.6276 20.0669C12.7448 19.9497 12.8107 19.7908 12.8107 19.625C12.8107 19.4592 12.7448 19.3003 12.6276 19.1831C12.5104 19.0658 12.3514 19 12.1857 19ZM17.1857 9.625C17.2 10.5783 16.9682 11.5191 16.5128 12.3566C16.0573 13.1942 15.3936 13.9001 14.5857 14.4062L14.0607 16.075C14.0172 16.2044 13.9326 16.3159 13.8197 16.3927C13.7068 16.4694 13.572 16.5071 13.4357 16.5H9.68568C9.55466 16.5003 9.42684 16.4595 9.32029 16.3832C9.21374 16.307 9.13386 16.1991 9.09193 16.075L8.53568 14.4062C7.72776 13.9001 7.06402 13.1942 6.60857 12.3566C6.15313 11.5191 5.92137 10.5783 5.93568 9.625C5.93568 8.13316 6.52832 6.70242 7.58321 5.64752C8.6381 4.59263 10.0688 4 11.5607 4C13.0525 4 14.4833 4.59263 15.5382 5.64752C16.5931 6.70242 17.1857 8.13316 17.1857 9.625Z" fill="currentColor"/>
3
+ </svg>
package/src/components/icon/new-icons/money-alt.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7.2 11.7H6C6 13.254 7.452 14.172 9 14.364V15.6H10.2V14.358C11.55 14.178 13.2 13.404 13.2 11.7C13.2 9.99598 11.55 9.22198 10.2 9.04198V6.05998C10.998 6.20398 12 6.62398 12 7.49998H13.2C13.2 5.79598 11.55 5.02198 10.2 4.84198V3.59998H9V4.84198C7.65 5.02198 6 5.79598 6 7.49998C6 9.20398 7.602 9.96598 9 10.158V13.14C8.13 12.99 7.2 12.528 7.2 11.7ZM12 11.7C12 12.576 10.998 12.996 10.2 13.14V10.26C10.998 10.404 12 10.824 12 11.7ZM7.2 7.49998C7.2 6.62398 8.202 6.20398 9 6.05998V8.93998C8.178 8.78998 7.2 8.33998 7.2 7.49998Z" fill="currentColor"/>
3
+ </svg>
package/src/components/icon/new-icons/pending.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10 2.5C11.4551 2.49973 12.8789 2.92276 14.0978 3.71752C15.3167 4.51228 16.2781 5.64445 16.8648 6.97605C17.4515 8.30764 17.6382 9.78115 17.402 11.217C17.1659 12.6528 16.5173 13.9889 15.5351 15.0626M10 5.50001V10L13 11.5M2.875 7.65627C2.63601 8.38277 2.50955 9.14155 2.5 9.90628M3.1225 13C3.54363 13.9689 4.16469 14.8379 4.94501 15.5501M4.47701 4.92626C4.68629 4.69843 4.90947 4.48377 5.14526 4.28351M7.48302 17.0651C9.3533 17.7313 11.4115 17.6289 13.2063 16.7801" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/src/components/icon/new-icons/secure.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.5455 4L5 6.90909V11.2727C5 15.3091 7.79273 19.0836 11.5455 20C15.2982 19.0836 18.0909 15.3091 18.0909 11.2727V6.90909L11.5455 4ZM11.5455 8.36364C12.5636 8.36364 13.5818 9.16364 13.5818 10.1818V11.2727C14.0182 11.2727 14.4545 11.7091 14.4545 12.2182V14.7636C14.4545 15.2 14.0182 15.6364 13.5091 15.6364H9.50909C9.07273 15.6364 8.63636 15.2 8.63636 14.6909V12.1455C8.63636 11.7091 9.07273 11.2727 9.50909 11.2727V10.1818C9.50909 9.16364 10.5273 8.36364 11.5455 8.36364ZM11.5455 9.23636C10.9636 9.23636 10.4545 9.6 10.4545 10.1818V11.2727H12.6364V10.1818C12.6364 9.6 12.1273 9.23636 11.5455 9.23636Z" fill="currentColor"/>
3
+ </svg>
package/src/components/icon/new-icons/stop.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="12" height="12" rx="2" fill="currentColor"/>
3
+ </svg>
package/src/components/icon/new-icons/thumbs-down.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M15.2197 13.3334V5.33337M9.88634 16.08L10.553 13.3334H6.66634C6.45935 13.3334 6.2552 13.2852 6.07006 13.1926C5.88492 13.1 5.72387 12.9656 5.59967 12.8C5.47548 12.6344 5.39154 12.4422 5.35451 12.2386C5.31749 12.0349 5.32838 11.8254 5.38634 11.6267L6.93967 6.29337C7.02045 6.01642 7.18888 5.77314 7.41967 5.60004C7.65047 5.42694 7.93118 5.33337 8.21967 5.33337H17.2197C17.5733 5.33337 17.9124 5.47385 18.1625 5.7239C18.4125 5.97395 18.553 6.31309 18.553 6.66671V12C18.553 12.3537 18.4125 12.6928 18.1625 12.9428C17.9124 13.1929 17.5733 13.3334 17.2197 13.3334H15.3797C15.1316 13.3335 14.8885 13.4028 14.6777 13.5336C14.4669 13.6643 14.2967 13.8512 14.1863 14.0734L11.8863 18.6667C11.572 18.6628 11.2625 18.5879 10.9811 18.4476C10.6998 18.3074 10.4537 18.1053 10.2614 17.8566C10.0691 17.6078 9.93546 17.3189 9.87052 17.0112C9.80557 16.7036 9.81098 16.3853 9.88634 16.08Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/src/components/icon/new-icons/thumbs-up.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.66634 10.6667V18.6667M13.9997 7.92004L13.333 10.6667H17.2197C17.4267 10.6667 17.6308 10.7149 17.816 10.8075C18.0011 10.9 18.1621 11.0344 18.2863 11.2C18.4105 11.3656 18.4945 11.5579 18.5315 11.7615C18.5685 11.9652 18.5576 12.1747 18.4997 12.3734L16.9463 17.7067C16.8656 17.9837 16.6971 18.2269 16.4663 18.4C16.2355 18.5731 15.9548 18.6667 15.6663 18.6667H6.66634C6.31272 18.6667 5.97358 18.5262 5.72353 18.2762C5.47348 18.0261 5.33301 17.687 5.33301 17.3334V12C5.33301 11.6464 5.47348 11.3073 5.72353 11.0572C5.97358 10.8072 6.31272 10.6667 6.66634 10.6667H8.50634C8.7544 10.6666 8.9975 10.5972 9.20831 10.4665C9.41912 10.3358 9.58929 10.1488 9.69968 9.92671L11.9997 5.33337C12.3141 5.33727 12.6235 5.41215 12.9049 5.55244C13.1863 5.69272 13.4323 5.89478 13.6246 6.14351C13.8169 6.39224 13.9506 6.68121 14.0155 6.98884C14.0804 7.29647 14.075 7.6148 13.9997 7.92004Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ </svg>
package/src/components/panels/Panel.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div tabindex="-1" :class="{'b-panel': !nocard, 'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
2
+ <div tabindex="-1" :class="{'b-panel': !nocard, 'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed, [cssClass]: cssClass}">
3
3
  <slot name="before-header"></slot>
4
4
  <div v-if="collapsed && !nocard" class="b-panel__expand" @click.stop.prevent="expandPanel">
5
5
  <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
@@ -204,6 +204,7 @@ class Panel extends Vue {
204
204
  @Prop() icon;
205
205
  @Prop() payload;
206
206
  @Prop() panel;
207
+ @Prop(String) cssClass;
207
208
  @Prop(Boolean) collapsed;
208
209
  @Prop(Boolean) closeable;
209
210
  @Prop(Boolean) isFullSize;
package/src/components/panels/PanelItemEdit.vue CHANGED
@@ -14,14 +14,16 @@
14
14
  >
15
15
  <slot></slot>
16
16
  <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
17
- <div v-if="!hideFooter">
18
- <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
19
- <span>{{ cancelBtnText }}</span>
20
- </itf-button>
21
- <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
22
- <span>{{ saveBtnText }}</span>
23
- </itf-button>
24
- </div>
17
+ <slot name="footer">
18
+ <div v-if="!hideFooter">
19
+ <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
20
+ <span>{{ cancelBtnText }}</span>
21
+ </itf-button>
22
+ <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
23
+ <span>{{ saveBtnText }}</span>
24
+ </itf-button>
25
+ </div>
26
+ </slot>
25
27
  </div>
26
28
  </itf-form>
27
29
  <div class="b-drag-overlay">
package/src/components/panels/PanelList.vue CHANGED
@@ -16,6 +16,7 @@
16
16
  :title="panel.title"
17
17
  :nocard="panel.nocard"
18
18
  :icon="panel.icon"
19
+ :css-class="panel.cssClass"
19
20
  :payload="panel.payload"
20
21
  :expandable="panelsStack.length > 1"
21
22
  :isFullSize="isFullSize"
@@ -184,6 +185,7 @@ export interface IPanel {
184
185
  type: string;
185
186
  payload: any;
186
187
  nocard?: boolean;
188
+ cssClass?: string;
187
189
  isCollapsed: boolean;
188
190
  isExpanded: boolean;
189
191
  isCloseable: boolean;
@@ -312,6 +314,7 @@ export default class PanelList extends Vue {
312
314
  const newPanel:any = {
313
315
  id: this.nextId++,
314
316
  nocard: panel.nocard,
317
+ cssClass: panel.cssClass,
315
318
  title: panel.caption(this.$t.bind(this), payload),
316
319
  icon: panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
317
320
  components: {
package/src/components/text-field/TextField.vue CHANGED
@@ -24,6 +24,7 @@
24
24
  @keypress="$emit('keypress', $event)"
25
25
  @blur="$emit('blur', $event)"
26
26
  @focus="$emit('focus', $event)"
27
+ @wheel="onWheel"
27
28
  @change="$emit('change', $event.target.value)"
28
29
  :maxlength="maxlength"
29
30
  :min="min"
@@ -109,5 +110,12 @@ class itfTextField extends Vue {
109
110
  blur() {
110
111
  this.$refs.input.blur();
111
112
  }
113
+
114
+ onWheel(event) {
115
+ // prevent value change on scroll
116
+ if (this.type === 'number' && document.activeElement === this.$refs.input) {
117
+ event.preventDefault();
118
+ }
119
+ }
112
120
  }
113
121
  </script>