goodteditor-ui 1.0.83 → 1.0.84

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 (3) hide show
  1. package/package.json +3 -2
  2. package/src/components/ui/DatePicker.vue +61 -51
  3. package/src/components/ui/InputDatePicker.vue +26 -26
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "goodteditor-ui",
3
- "version": "1.0.83",
3
+ "version": "1.0.84",
4
4
  "main": "index.js",
5
5
  "homepage": "https://goodt-ui.netlify.app/",
6
6
  "scripts": {
@@ -40,7 +40,8 @@
40
40
  "vue-cli-plugin-styleguidist": "~4.72.4",
41
41
  "vue-styleguidist": "^4.72.4",
42
42
  "vue-template-compiler": "^2.6.12",
43
- "webpack": "^5.91.0"
43
+ "webpack": "^5.91.0",
44
+ "postcss": "^8.1.0"
44
45
  },
45
46
  "peerDependencies": {
46
47
  "vue": "^2.6.12",
package/src/components/ui/DatePicker.vue CHANGED
@@ -34,12 +34,9 @@
34
34
  setToday,
35
35
  month,
36
36
  monthName: monthNames[month],
37
- year,
38
- }"
39
- >
40
- <div
41
- class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3"
42
- >
37
+ year
38
+ }">
39
+ <div class="ui-date-picker-header text-small mar-bot-3 bg-primary color-white pad-3">
43
40
  <div class="flex-shrink nobr">
44
41
  <div class="icon cursor-pointer" @click="prevYear">
45
42
  <i class="mdi mdi-chevron-double-left"></i>
@@ -66,8 +63,7 @@
66
63
  <div
67
64
  class="ui-date-picker-day-cell text-small"
68
65
  v-for="dayIndex of dayNamesIndexes"
69
- :key="`day-${dayIndex}`"
70
- >
66
+ :key="`day-${dayIndex}`">
71
67
  <!--
72
68
  @slot Custom day content
73
69
  @binding {Number} dayIndex day index (0 = sunday)
@@ -79,9 +75,8 @@
79
75
  v-bind="{
80
76
  dayIndex,
81
77
  dayName: dayNames[dayIndex],
82
- isWeekend: isWeekendDay(dayIndex),
83
- }"
84
- >
78
+ isWeekend: isWeekendDay(dayIndex)
79
+ }">
85
80
  <div class="color-grey-dark">
86
81
  {{ dayNames[dayIndex] }}
87
82
  </div>
@@ -90,8 +85,7 @@
90
85
  <div
91
86
  class="ui-date-picker-date-cell text-small"
92
87
  v-for="n in currentMonthDates"
93
- :key="`${n.getMonth()}-${n.getDate()}`"
94
- >
88
+ :key="`${n.getMonth()}-${n.getDate()}`">
95
89
  <!--
96
90
  @slot Custom date content
97
91
  @binding {Date} date date
@@ -125,25 +119,18 @@
125
119
  isSelected: isSelectedDate(n),
126
120
  isToday: isTodayDate(n),
127
121
  isWeekend: isWeekendDate(n),
128
- setDate,
129
- }"
130
- >
122
+ setDate
123
+ }">
131
124
  <div
132
125
  class="btn btn-icon btn-small"
133
126
  :class="{
134
127
  'btn-primary': isSelectedDate(n) || isRangeDate(n),
135
- 'radius-right-none':
136
- isRangeStartDate(n) && !isRangeEndDate(n) && dateEnd,
137
- 'radius-left-none':
138
- !isRangeStartDate(n) && isRangeEndDate(n),
139
- 'radius-none':
140
- isRangeDate(n) &&
141
- !isRangeStartDate(n) &&
142
- !isRangeEndDate(n),
143
- 'disabled radius-none': isDisabledDate(n),
128
+ 'radius-right-none': isRangeStartDate(n) && !isRangeEndDate(n) && dateEnd,
129
+ 'radius-left-none': !isRangeStartDate(n) && isRangeEndDate(n),
130
+ 'radius-none': isRangeDate(n) && !isRangeStartDate(n) && !isRangeEndDate(n),
131
+ 'disabled radius-none': isDisabledDate(n)
144
132
  }"
145
- @click="setDate(n)"
146
- >
133
+ @click="setDate(n)">
147
134
  <template v-if="isSelectedDate(n) || isRangeDate(n)">
148
135
  <div>{{ n.getDate() }}</div>
149
136
  </template>
@@ -160,6 +147,33 @@
160
147
  </slot>
161
148
  </div>
162
149
  </div>
150
+ <!--
151
+ @slot Custom footer content
152
+ @binding {Function} prevYear select previous year
153
+ @binding {Function} prevMonth select previous month
154
+ @binding {Function} nextYear select next year
155
+ @binding {Function} nextMonth select next month
156
+ @binding {Function} setMonth set month by index (0 = january)
157
+ @binding {Function} setYear set year (4-digit)
158
+ @binding {Function} setToday set today's date
159
+ @binding {Number} month current month index (0 = january)
160
+ @binding {String} monthName current month name
161
+ @binding {Number} year current year (4-digit)
162
+ -->
163
+ <slot
164
+ name="footer"
165
+ v-bind="{
166
+ prevYear,
167
+ prevMonth,
168
+ nextYear,
169
+ nextMonth,
170
+ setMonth,
171
+ setYear,
172
+ setToday,
173
+ month,
174
+ monthName: monthNames[month],
175
+ year
176
+ }"></slot>
163
177
  </div>
164
178
  <div class="col col-auto" v-if="$scopedSlots.right">
165
179
  <!--
@@ -234,39 +248,39 @@ export default {
234
248
  default: null,
235
249
  validation(val) {
236
250
  if (Array.isArray(val)) {
237
- return val.find(el => !this.isValid(el)) == null;
251
+ return val.find((el) => !this.isValid(el)) == null;
238
252
  } else {
239
253
  return this.isValid(val);
240
254
  }
241
- },
255
+ }
242
256
  },
243
257
  /**
244
258
  * Min date (inclusive)
245
259
  */
246
260
  min: {
247
261
  type: Date,
248
- default: null,
262
+ default: null
249
263
  },
250
264
  /**
251
265
  * Max date (inclusive)
252
266
  */
253
267
  max: {
254
268
  type: Date,
255
- default: null,
269
+ default: null
256
270
  },
257
271
  /**
258
272
  * Allowed date filter function(date:Date):Boolean
259
273
  */
260
274
  allowed: {
261
275
  type: Function,
262
- default: () => true,
276
+ default: () => true
263
277
  },
264
278
  /**
265
279
  * Range mode
266
280
  */
267
281
  range: {
268
282
  type: Boolean,
269
- default: false,
283
+ default: false
270
284
  },
271
285
  /**
272
286
  * Day names starting from 'Sunday'
@@ -275,7 +289,7 @@ export default {
275
289
  type: Array,
276
290
  default() {
277
291
  return ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
278
- },
292
+ }
279
293
  },
280
294
  /**
281
295
  * Weekend day indexes (0 = Sunday; 6 = Saturday)
@@ -284,7 +298,7 @@ export default {
284
298
  type: Array,
285
299
  default() {
286
300
  return [0, 6];
287
- },
301
+ }
288
302
  },
289
303
  /**
290
304
  * Month names starting from 'January'
@@ -304,9 +318,9 @@ export default {
304
318
  'Сентябрь',
305
319
  'Октябрь',
306
320
  'Ноябрь',
307
- 'Декабрь',
321
+ 'Декабрь'
308
322
  ];
309
- },
323
+ }
310
324
  },
311
325
  /**
312
326
  * Which day is the first day of the week (0 = Sunday; 6 = Saturday)
@@ -316,8 +330,8 @@ export default {
316
330
  default: 1,
317
331
  validation(val) {
318
332
  return val >= 0 && val < 7;
319
- },
320
- },
333
+ }
334
+ }
321
335
  },
322
336
  data() {
323
337
  return {
@@ -326,7 +340,7 @@ export default {
326
340
  dateEnd: null,
327
341
  month: null,
328
342
  year: null,
329
- syncMonthYear: true,
343
+ syncMonthYear: true
330
344
  };
331
345
  },
332
346
  computed: {
@@ -349,22 +363,18 @@ export default {
349
363
  return new Date(this.year, this.month + 1, 0).getDate();
350
364
  },
351
365
  currentMonthDates() {
352
- let dates = [...new Array(this.daysInMonth)].map(
353
- (v, i) => new Date(this.year, this.month, i + 1)
354
- );
366
+ let dates = [...new Array(this.daysInMonth)].map((v, i) => new Date(this.year, this.month, i + 1));
355
367
  return [...this.prevMonthDates, ...dates, ...this.nextMonthDates];
356
368
  },
357
369
  prevMonthDates() {
358
370
  let n = this.firstDayOfMonth;
359
371
  let pmd = new Date(this.year, this.month, 0).getDate();
360
- return [...new Array(n)]
361
- .map((v, i) => new Date(this.year, this.month - 1, pmd - i))
362
- .reverse();
372
+ return [...new Array(n)].map((v, i) => new Date(this.year, this.month - 1, pmd - i)).reverse();
363
373
  },
364
374
  nextMonthDates() {
365
375
  let n = 6 - this.lastDayOfMonth;
366
376
  return [...new Array(n)].map((v, i) => new Date(this.year, this.month + 1, i + 1));
367
- },
377
+ }
368
378
  },
369
379
  watch: {
370
380
  value: {
@@ -385,14 +395,14 @@ export default {
385
395
  }
386
396
  this.syncMonthYear = true;
387
397
  },
388
- immediate: true,
398
+ immediate: true
389
399
  },
390
400
  range() {
391
401
  this.date = null;
392
402
  this.dateStart = null;
393
403
  this.dateEnd = null;
394
404
  this._triggerChange();
395
- },
405
+ }
396
406
  },
397
407
  methods: {
398
408
  isValid(date) {
@@ -521,7 +531,7 @@ export default {
521
531
  * @property {Date} date
522
532
  */
523
533
  this.$emit('change', val);
524
- },
525
- },
534
+ }
535
+ }
526
536
  };
527
537
  </script>
package/src/components/ui/InputDatePicker.vue CHANGED
@@ -4,8 +4,7 @@
4
4
  :class="cssClass"
5
5
  @focus="onRootFocus"
6
6
  tabindex="0"
7
- :data-popover="popoverTargetId"
8
- >
7
+ :data-popover="popoverTargetId">
9
8
  <div class="ui-input-date-picker-wrapper d-flex flex-v-center w-100">
10
9
  <div style="flex: 1 0 0">
11
10
  <!--
@@ -16,18 +15,14 @@
16
15
  @binding {Object} inputBinds input props (use v-bind)
17
16
  @binding {Object} inputEvents input events (use v-on)
18
17
  -->
19
- <slot
20
- name="input"
21
- v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
22
- >
18
+ <slot name="input" v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }">
23
19
  <input
24
20
  :id="inputId"
25
21
  class="ui-input-date-picker-input w-100"
26
22
  type="text"
27
23
  :value="valueLabel"
28
24
  v-bind="inputBinds"
29
- v-on="inputEvents"
30
- />
25
+ v-on="inputEvents" />
31
26
  </slot>
32
27
  </div>
33
28
  <!--
@@ -54,8 +49,7 @@
54
49
  class="ui-input-date-picker-dp pull-left"
55
50
  @change="onDpChange"
56
51
  @set-date="onDpSetDate"
57
- v-bind="{ value: date, ...datepicker }"
58
- >
52
+ v-bind="{ value: date, ...datepicker }">
59
53
  <template #header="scope">
60
54
  <!--
61
55
  @slot @see [DatePicker.slots.header](#datepicker)
@@ -86,6 +80,12 @@
86
80
  -->
87
81
  <slot name="dp-right"></slot>
88
82
  </template>
83
+ <template #footer="scope">
84
+ <!--
85
+ @slot @see [DatePicker.slots.footer](#datepicker)
86
+ -->
87
+ <slot name="dp-footer" v-bind="scope"></slot>
88
+ </template>
89
89
  </date-picker>
90
90
  </ui-popover>
91
91
  </div>
@@ -111,7 +111,7 @@ import FormComponent from './utils/FormComponent';
111
111
  import WithPopover from './utils/WithPopover';
112
112
  import { isDateValid } from './utils/Helpers';
113
113
 
114
- let lz = n => (n < 10 ? `0${n}` : `${n}`);
114
+ let lz = (n) => (n < 10 ? `0${n}` : `${n}`);
115
115
  export default {
116
116
  mixins: [FormComponent, WithPopover],
117
117
  components: { DatePicker, UiPopover },
@@ -121,21 +121,21 @@ export default {
121
121
  */
122
122
  value: {
123
123
  type: [String, Array],
124
- default: '',
124
+ default: ''
125
125
  },
126
126
  /**
127
127
  * Whether the input is editable
128
128
  */
129
129
  editable: {
130
130
  type: Boolean,
131
- default: true,
131
+ default: true
132
132
  },
133
133
  /**
134
134
  * Allow clearing the date
135
135
  */
136
136
  allowClear: {
137
137
  type: Boolean,
138
- default: true,
138
+ default: true
139
139
  },
140
140
  /**
141
141
  * Datepicker options
@@ -145,14 +145,14 @@ export default {
145
145
  type: Object,
146
146
  default() {
147
147
  return {};
148
- },
148
+ }
149
149
  },
150
150
  /**
151
151
  * Date range delimiter (only if datepicker.range = true)
152
152
  */
153
153
  delimiter: {
154
154
  type: String,
155
- default: ' – ',
155
+ default: ' – '
156
156
  },
157
157
  /**
158
158
  * Function which parses date String -> Date
@@ -167,13 +167,13 @@ export default {
167
167
  let mt = str.match(/^(\d{1,}).(\d{1,}).(\d{1,})$/);
168
168
  if (mt) {
169
169
  mt.shift();
170
- let [d, m, y] = mt.map(v => parseInt(v));
170
+ let [d, m, y] = mt.map((v) => parseInt(v));
171
171
  if (d > 0 && m > 0 && y >= 0) {
172
172
  return new Date(y, m - 1, d);
173
173
  }
174
174
  }
175
175
  return null;
176
- },
176
+ }
177
177
  },
178
178
  /**
179
179
  * Function which formats date Date -> String
@@ -186,8 +186,8 @@ export default {
186
186
  return '';
187
187
  }
188
188
  return `${lz(date.getDate())}.${lz(date.getMonth() + 1)}.${lz(date.getFullYear())}`;
189
- },
190
- },
189
+ }
190
+ }
191
191
  },
192
192
  data() {
193
193
  return {
@@ -196,10 +196,10 @@ export default {
196
196
  input: this.onInputInput,
197
197
  change: this.onInputChange,
198
198
  focus: this.onInputFocus,
199
- blur: this.onInputBlur,
199
+ blur: this.onInputBlur
200
200
  },
201
201
  inputValue: '',
202
- inputValueRaw: '',
202
+ inputValueRaw: ''
203
203
  };
204
204
  },
205
205
  computed: {
@@ -214,7 +214,7 @@ export default {
214
214
  return {
215
215
  placeholder,
216
216
  readonly: readonly || !editable
217
- }
217
+ };
218
218
  }
219
219
  },
220
220
  watch: {
@@ -235,7 +235,7 @@ export default {
235
235
  this.date = isDateValid(d) ? d : null;
236
236
  }
237
237
  },
238
- immediate: true,
238
+ immediate: true
239
239
  },
240
240
  isRange(val) {
241
241
  /**
@@ -320,7 +320,7 @@ export default {
320
320
  * @property {String|Array} value
321
321
  */
322
322
  this.$emit('change', model);
323
- },
324
- },
323
+ }
324
+ }
325
325
  };
326
326
  </script>