@itfin/components 2.0.100 → 2.0.101

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/icon/new-icons/expense-requests.svg +4 -0
  3. package/src/components/icon/new-icons/plus.svg +3 -3
  4. package/src/components/icon/new-icons/user-settings.svg +1 -1
  5. package/src/components/panels/PanelItemEdit.vue +81 -2
  6. package/src/locales/en.js +5 -0
  7. package/src/locales/uk.js +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "2.0.100",
3
+ "version": "2.0.101",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/icon/new-icons/expense-requests.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="M12.7205 4.00567C12.8205 4.00189 12.9215 4 13.0225 4C15.2378 4 17.2435 4.89535 18.6951 6.34332C19.9542 7.59889 20.797 9.26999 20.9985 11.1321C21.0061 11.2053 20.9848 11.2711 20.9355 11.3259C20.8862 11.3807 20.8226 11.4091 20.7492 11.4091H19.2142C19.0881 11.4091 18.9828 11.3174 18.9657 11.1926C18.7861 9.86374 18.1689 8.6734 17.2634 7.77096C16.1783 6.68888 14.6788 6.01903 13.0225 6.01903C12.9993 6.01903 12.9755 6.0195 12.9523 6.0195C12.8257 6.02139 12.7196 5.93015 12.7011 5.80535L12.4816 4.2912C12.4712 4.2184 12.4901 4.15175 12.5375 4.09549C12.5845 4.03876 12.647 4.00851 12.7205 4.00567ZM20.9985 12.8679C20.797 14.73 19.9542 16.4016 18.6951 17.6567C17.2435 19.1047 15.2378 20 13.0225 20C10.8072 20 8.80147 19.1047 7.3499 17.6567C5.89787 16.2092 5 14.2091 5 12C5 9.84814 5.85188 7.89482 7.23803 6.45725L6.78341 5.94765C6.65494 5.80346 6.6208 5.61201 6.69191 5.43237C6.76255 5.25273 6.91851 5.13597 7.11098 5.11753L10.0885 4.83815C10.2526 4.82255 10.4009 4.88069 10.5104 5.0036C10.62 5.12651 10.6603 5.27968 10.6256 5.44041L9.99894 8.3562C9.95817 8.54529 9.82354 8.68569 9.63629 8.73486C9.44903 8.78402 9.26225 8.72777 9.13378 8.58358L8.58862 7.97235C7.61727 9.03504 7.02518 10.4485 7.02518 12C7.02518 13.6517 7.69644 15.147 8.78156 16.229C9.86668 17.3111 11.3661 17.981 13.0225 17.981C14.6788 17.981 16.1783 17.3111 17.2634 16.229C18.1689 15.3266 18.7861 14.1363 18.9657 12.8074C18.9828 12.6831 19.0881 12.5909 19.2142 12.5909H20.7492C20.8226 12.5909 20.8862 12.6193 20.9355 12.6741C20.9848 12.7289 21.0061 12.7947 20.9985 12.8679Z" fill="currentColor"/>
3
+ <path d="M12.5831 14.2264L16.5474 10.6977C16.6892 10.5707 16.7008 10.352 16.5734 10.2112L15.8793 9.44688C15.7519 9.30614 15.5312 9.29459 15.3893 9.4209L12.0598 12.3845L10.8077 11.0442C10.6774 10.9048 10.4574 10.8962 10.317 11.0254L9.55552 11.7241C9.4151 11.8525 9.40642 12.0712 9.5367 12.2098L11.3679 14.1708L11.7385 14.5671C11.8543 14.6912 12.0504 14.7006 12.1771 14.5873L12.5831 14.2264Z" fill="currentColor"/>
4
+ </svg>
package/src/components/icon/new-icons/plus.svg CHANGED
@@ -1,4 +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.7998 9.59998H14.3998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
3
- <path d="M9.59961 4.79999V14.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 12H18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M12 6V18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
4
4
  </svg>
package/src/components/icon/new-icons/user-settings.svg CHANGED
@@ -1,4 +1,4 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 12C12.9193 12 13.8295 12.1814 14.6788 12.5332C15.3163 12.7973 15.9101 13.1536 16.4415 13.5898L15.0001 14.4229C14.421 14.7574 14.0495 15.358 14.005 16.0205L14.0001 16.1543V18.4639C14.0001 18.6476 14.0263 18.8276 14.0743 19H6.00008C5.44783 19 4.99274 18.5496 5.07137 18.0029C5.15431 17.4266 5.30946 16.8616 5.53328 16.3213C5.88507 15.472 6.40086 14.6998 7.05086 14.0498C7.70074 13.4 8.47234 12.8849 9.32137 12.5332C10.1706 12.1814 11.0809 12 12.0001 12ZM12.0001 4C13.6569 4 15.0001 5.34315 15.0001 7C15.0001 8.65685 13.6569 10 12.0001 10C10.3433 9.99995 9.00008 8.65683 9.00008 7C9.00008 5.34317 10.3433 4.00005 12.0001 4Z" fill="currentColor"/>
2
+ <path d="M12.0001 12C12.9193 12 13.8295 12.1814 14.6788 12.5332C15.3163 12.7973 15.9101 13.1536 16.4415 13.5898L15.0001 14.4229C14.421 14.7574 14.0495 15.358 14.005 16.0205L14.0001 16.1543V18.4639C14.0001 18.6476 14.0263 18.8276 14.0743 19H6.00008C5.44783 19 4.99274 18.5496 5.07137 18.0029C5.15431 17.4266 5.30946 16.8616 5.53328 16.3213C5.88507 15.472 6.40086 14.6998 7.05086 14.0498C7.70074 13.4 8.47234 12.8849 9.32137 12.5332C10.1706 12.1814 11.0809 12 12.0001 12ZM12.0001 4C13.6569 4 15.0001 5.34315 15.0001 7C15.0001 8.65685 13.6569 10 12.0001 10C10.3433 9.99995 9.00008 8.65683 9.00008 7C9.00008 5.34317 10.3433 4.00005 12.0001 4Z" fill="currentColor"/>
3
3
  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 14.1339C17.8094 13.9554 18.1906 13.9554 18.5 14.1339L20.5 15.2892C20.8092 15.4678 20.9999 15.7974 21 16.1544V18.464C21 18.8213 20.8094 19.1516 20.5 19.3302L18.5 20.4845C18.1906 20.6631 17.8094 20.6631 17.5 20.4845L15.5 19.3302C15.1906 19.1516 15 18.8213 15 18.464V16.1544C15.0001 15.7974 15.1908 15.4678 15.5 15.2892L17.5 14.1339ZM18 16.3097C17.4477 16.3097 17 16.7574 17 17.3097C17.0001 17.8619 17.4478 18.3097 18 18.3097C18.5522 18.3097 18.9999 17.8619 19 17.3097C19 16.7574 18.5523 16.3097 18 16.3097Z" fill="currentColor"/>
4
4
  </svg>
package/src/components/panels/PanelItemEdit.vue CHANGED
@@ -1,8 +1,14 @@
1
1
  <template>
2
- <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column itf-append-context">
2
+ <div
3
+ v-loading="loading"
4
+ @dragover.prevent="onDragOver"
5
+ @dragleave="onDragLeave"
6
+ @drop.prevent="onDrop"
7
+ :class="{ 'is-drag-over': isDragOver }"
8
+ class="px-3 pt-2 h-100 d-flex flex-column itf-append-context">
3
9
  <itf-form
4
10
  ref="editForm"
5
- class="d-flex flex-column justify-content-between flex-grow-1"
11
+ class="d-flex flex-column justify-content-between flex-grow-1 b-append-context__form"
6
12
  @keydown.native.shift.enter.stop.prevent="onSaveClick"
7
13
  @keydown.native.esc.stop.prevent="$emit('cancel')"
8
14
  >
@@ -18,6 +24,9 @@
18
24
  </div>
19
25
  </div>
20
26
  </itf-form>
27
+ <div class="b-drag-overlay">
28
+ <span>{{ $t('components.dropzoneText') }}</span>
29
+ </div>
21
30
  </div>
22
31
  </template>
23
32
  <style lang="scss" scoped>
@@ -28,6 +37,37 @@
28
37
  z-index: 999;
29
38
  background-color: var(--bs-body-bg);
30
39
  }
40
+ .is-drag-over .b-append-context__form {
41
+ pointer-events: none;
42
+ user-select: none;
43
+ filter: blur(2px);
44
+ }
45
+ .b-drag-overlay {
46
+ display: none;
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ right: 0;
51
+ bottom: 0;
52
+ pointer-events: none;
53
+ user-select: none;
54
+ z-index: 1000;
55
+
56
+ .is-drag-over & {
57
+ margin: 1rem;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ border-radius: 8px;
62
+ border: 3px dashed var(--bs-border-color);
63
+ background-color: rgba(255, 255, 255, 0.6);
64
+ }
65
+ span {
66
+ font-size: 1.25rem;
67
+ font-weight: 500;
68
+ color: var(--bs-secondary-color);
69
+ }
70
+ }
31
71
  </style>
32
72
  <script>
33
73
  import { Vue, Component, Prop } from 'vue-property-decorator';
@@ -35,6 +75,7 @@ import tooltip from '../../directives/tooltip';
35
75
  import loading from '../../directives/loading';
36
76
  import itfForm from '../form/Form.vue';
37
77
  import itfButton from '../button/Button.vue';
78
+ import debounce from 'lodash/debounce';
38
79
 
39
80
  @Component({
40
81
  components: {
@@ -51,14 +92,52 @@ import itfButton from '../button/Button.vue';
51
92
  export default class PanelItemEdit extends Vue {
52
93
  @Prop(Boolean) loading;
53
94
  @Prop(Boolean) hideFooter;
95
+ @Prop(Boolean) dropzone;
96
+ @Prop() droptarget;
54
97
  @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
55
98
  @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;
56
99
 
100
+ isDragOver = false;
101
+ handleDragLeaveDebounced = null;
102
+
103
+ created() {
104
+ this.handleDragLeaveDebounced = debounce(() => {
105
+ this.isDragOver = false;
106
+ }, 200);
107
+ }
108
+
57
109
  onSaveClick() {
58
110
  if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {
59
111
  return;
60
112
  }
61
113
  this.$emit('save');
62
114
  }
115
+
116
+ onDragOver(e) {
117
+ if (!this.dropzone) {
118
+ return;
119
+ }
120
+ this.isDragOver = true;
121
+
122
+ // якщо знову зайшли — відміняємо leave
123
+ this.handleDragLeaveDebounced.cancel();
124
+ }
125
+
126
+ onDragLeave(e) {
127
+ if (!this.dropzone) {
128
+ return;
129
+ }
130
+ this.handleDragLeaveDebounced();
131
+ }
132
+
133
+ onDrop(e) {
134
+ if (!this.dropzone) {
135
+ return;
136
+ }
137
+ this.isDragOver = false;
138
+ if (this.droptarget) {
139
+ this.droptarget.onFileChange(e)
140
+ }
141
+ }
63
142
  }
64
143
  </script>
package/src/locales/en.js CHANGED
@@ -56,6 +56,11 @@ module.exports = {
56
56
  addMore: 'Add more',
57
57
  close: 'Close',
58
58
  wholeYear: 'Whole year',
59
+ atLeastOneUppercaseLetterRequired: 'At least one uppercase letter is required',
60
+ atLeastOneLowercaseLetterRequired: 'At least one lowercase letter is required',
61
+ atLeastOneNumberRequired: 'At least one number is required',
62
+ atLeastOneSpecialCharacterRequired: 'At least one special character is required (e.g. @,$,!,%,*,?,&)',
63
+ dropzoneText: 'Click or drag file to upload',
59
64
 
60
65
  select: {
61
66
  loading: 'Loading...',
package/src/locales/uk.js CHANGED
@@ -57,6 +57,11 @@ module.exports = {
57
57
  addMore: 'Додати ще',
58
58
  close: 'Закрити',
59
59
  wholeYear: 'Весь рік',
60
+ atLeastOneUppercaseLetterRequired: 'Має бути принаймні одна велика літера',
61
+ atLeastOneLowercaseLetterRequired: 'Має бути принаймні одна мала літера',
62
+ atLeastOneNumberRequired: 'Має бути принаймні одна цифра',
63
+ atLeastOneSpecialCharacterRequired: 'Має бути принаймні один спеціальний символ (@,$,!,%,*,?,&)',
64
+ dropzoneText: 'Натисніть або перетягніть файл для завантаження',
60
65
 
61
66
  select: {
62
67
  loading: 'Завантаження...',