@websy/websy-designs 1.2.24 → 1.2.26
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.
- package/dist/websy-designs-es6.debug.js +14 -10
- package/dist/websy-designs-es6.js +12 -7
- package/dist/websy-designs-es6.min.js +1 -1
- package/dist/websy-designs.debug.js +14 -10
- package/dist/websy-designs.js +12 -7
- package/dist/websy-designs.min.css +1 -1
- package/dist/websy-designs.min.js +1 -1
- package/package.json +1 -1
|
@@ -213,6 +213,9 @@ class WebsyDatePicker {
|
|
|
213
213
|
dateFormat: '%_m/%_d/%Y',
|
|
214
214
|
allowClear: true,
|
|
215
215
|
hideRanges: false,
|
|
216
|
+
arrowIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>`,
|
|
217
|
+
clearIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
|
|
218
|
+
confirmIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><polyline points="416 128 192 384 96 288" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
|
|
216
219
|
minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
|
|
217
220
|
maxAllowedDate: this.floorDate(new Date((new Date()))),
|
|
218
221
|
minAllowedYear: 1970,
|
|
@@ -288,7 +291,7 @@ class WebsyDatePicker {
|
|
|
288
291
|
],
|
|
289
292
|
monthyear: [
|
|
290
293
|
{
|
|
291
|
-
label: 'All',
|
|
294
|
+
label: 'All Month Years',
|
|
292
295
|
range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
|
|
293
296
|
},
|
|
294
297
|
{
|
|
@@ -306,7 +309,7 @@ class WebsyDatePicker {
|
|
|
306
309
|
],
|
|
307
310
|
hour: [
|
|
308
311
|
{
|
|
309
|
-
label: 'All',
|
|
312
|
+
label: 'All Hours',
|
|
310
313
|
range: ['00:00', '23:00']
|
|
311
314
|
}
|
|
312
315
|
]
|
|
@@ -335,12 +338,10 @@ class WebsyDatePicker {
|
|
|
335
338
|
<span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
|
|
336
339
|
<div id="${this.elementId}_header" class='websy-date-picker-header ${this.options.allowClear === true ? 'allow-clear' : ''}'>
|
|
337
340
|
<span id='${this.elementId}_selectedRange'>${this.options.ranges[this.options.mode][this.selectedRange].label}</span>
|
|
338
|
-
|
|
341
|
+
${this.options.arrowIcon}
|
|
339
342
|
`
|
|
340
343
|
if (this.options.allowClear === true) {
|
|
341
|
-
html +=
|
|
342
|
-
<svg class='clear-selection' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
|
|
343
|
-
`
|
|
344
|
+
html += `<div class='clear-selection'>${this.options.clearIcon}</div>`
|
|
344
345
|
}
|
|
345
346
|
html += `
|
|
346
347
|
</div>
|
|
@@ -355,10 +356,10 @@ class WebsyDatePicker {
|
|
|
355
356
|
<div class='websy-dp-button-container'>
|
|
356
357
|
<span class="dp-footnote">Click and drag or hold Shift and click to select a range of values</span>
|
|
357
358
|
<button class='${this.options.cancelBtnClasses || ''} websy-btn websy-dp-cancel'>
|
|
358
|
-
|
|
359
|
+
${this.options.clearIcon}
|
|
359
360
|
</button>
|
|
360
361
|
<button class='${this.options.confirmBtnClasses || ''} websy-btn websy-dp-confirm'>
|
|
361
|
-
|
|
362
|
+
${this.options.confirmIcon}
|
|
362
363
|
</button>
|
|
363
364
|
</div>
|
|
364
365
|
</div>
|
|
@@ -975,6 +976,7 @@ class WebsyDatePicker {
|
|
|
975
976
|
})
|
|
976
977
|
if (rangeInput.length > 2 && isContinuousRange === true) {
|
|
977
978
|
this.selectedRangeDates = [rangeInput[0], rangeInput[rangeInput.length - 1]]
|
|
979
|
+
this.customRangeSelected = true
|
|
978
980
|
}
|
|
979
981
|
if (isContinuousRange === false) {
|
|
980
982
|
this.currentselection = []
|
|
@@ -4418,9 +4420,10 @@ class WebsyTable2 {
|
|
|
4418
4420
|
}
|
|
4419
4421
|
if (event.target.classList.contains('sortable-column')) {
|
|
4420
4422
|
const colIndex = +event.target.getAttribute('data-index')
|
|
4423
|
+
const sortIndex = +event.target.getAttribute('data-sort-index')
|
|
4421
4424
|
const column = this.options.columns[colIndex]
|
|
4422
4425
|
if (this.options.onSort) {
|
|
4423
|
-
this.options.onSort(event, column, colIndex)
|
|
4426
|
+
this.options.onSort(event, column, colIndex, sortIndex)
|
|
4424
4427
|
}
|
|
4425
4428
|
else {
|
|
4426
4429
|
this.internalSort(column, colIndex)
|
|
@@ -4632,7 +4635,8 @@ class WebsyTable2 {
|
|
|
4632
4635
|
<div class="leftSection">
|
|
4633
4636
|
<div
|
|
4634
4637
|
class="tableHeaderField ${['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : ''}"
|
|
4635
|
-
data-index="${i}"
|
|
4638
|
+
data-sort-index="${c.sortIndex || i}"
|
|
4639
|
+
data-index="${i}"
|
|
4636
4640
|
data-sort="${c.sort}"
|
|
4637
4641
|
>
|
|
4638
4642
|
${c.name}
|
|
@@ -286,6 +286,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
286
286
|
dateFormat: '%_m/%_d/%Y',
|
|
287
287
|
allowClear: true,
|
|
288
288
|
hideRanges: false,
|
|
289
|
+
arrowIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>",
|
|
290
|
+
clearIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
|
|
291
|
+
confirmIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
|
|
289
292
|
minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
|
|
290
293
|
maxAllowedDate: this.floorDate(new Date(new Date())),
|
|
291
294
|
minAllowedYear: 1970,
|
|
@@ -352,7 +355,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
352
355
|
range: [new Date().getFullYear() - 9, DEFAULTS.maxAllowedYear]
|
|
353
356
|
}],
|
|
354
357
|
monthyear: [{
|
|
355
|
-
label: 'All',
|
|
358
|
+
label: 'All Month Years',
|
|
356
359
|
range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
|
|
357
360
|
}, {
|
|
358
361
|
label: 'Last 12 Months',
|
|
@@ -365,7 +368,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
365
368
|
range: [this.floorDate(new Date(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 24))), this.floorDate(new Date(new Date().setDate(1)))]
|
|
366
369
|
}],
|
|
367
370
|
hour: [{
|
|
368
|
-
label: 'All',
|
|
371
|
+
label: 'All Hours',
|
|
369
372
|
range: ['00:00', '23:00']
|
|
370
373
|
}]
|
|
371
374
|
};
|
|
@@ -391,13 +394,13 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
391
394
|
el.addEventListener('mouseup', this.handleMouseUp.bind(this));
|
|
392
395
|
document.addEventListener('keydown', this.handleKeyDown.bind(this));
|
|
393
396
|
document.addEventListener('keyup', this.handleKeyUp.bind(this));
|
|
394
|
-
var html = "\n <div class='websy-date-picker-container ".concat(this.options.mode, "'>\n <span class='websy-dropdown-header-label'>").concat(this.options.label || 'Date', "</span>\n <div id=\"").concat(this.elementId, "_header\" class='websy-date-picker-header ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n
|
|
397
|
+
var html = "\n <div class='websy-date-picker-container ".concat(this.options.mode, "'>\n <span class='websy-dropdown-header-label'>").concat(this.options.label || 'Date', "</span>\n <div id=\"").concat(this.elementId, "_header\" class='websy-date-picker-header ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n ").concat(this.options.arrowIcon, "\n ");
|
|
395
398
|
|
|
396
399
|
if (this.options.allowClear === true) {
|
|
397
|
-
html += "
|
|
400
|
+
html += "<div class='clear-selection'>".concat(this.options.clearIcon, "</div>");
|
|
398
401
|
}
|
|
399
402
|
|
|
400
|
-
html += "\n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-date-picker-content ").concat(this.options.hideRanges === true ? 'hide-ranges' : '', "'>\n <div class='websy-date-picker-ranges' >\n <ul id='").concat(this.elementId, "_rangelist'>\n ").concat(this.renderRanges(), "\n </ul>\n </div><!--\n --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n <div class='websy-dp-button-container'>\n <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n
|
|
403
|
+
html += "\n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-date-picker-content ").concat(this.options.hideRanges === true ? 'hide-ranges' : '', "'>\n <div class='websy-date-picker-ranges' >\n <ul id='").concat(this.elementId, "_rangelist'>\n ").concat(this.renderRanges(), "\n </ul>\n </div><!--\n --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n <div class='websy-dp-button-container'>\n <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n ").concat(this.options.clearIcon, "\n </button>\n <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n ").concat(this.options.confirmIcon, "\n </button>\n </div>\n </div> \n </div>\n ");
|
|
401
404
|
el.innerHTML = html;
|
|
402
405
|
this.render();
|
|
403
406
|
} else {
|
|
@@ -1083,6 +1086,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
1083
1086
|
|
|
1084
1087
|
if (rangeInput.length > 2 && isContinuousRange === true) {
|
|
1085
1088
|
this.selectedRangeDates = [rangeInput[0], rangeInput[rangeInput.length - 1]];
|
|
1089
|
+
this.customRangeSelected = true;
|
|
1086
1090
|
}
|
|
1087
1091
|
|
|
1088
1092
|
if (isContinuousRange === false) {
|
|
@@ -4878,10 +4882,11 @@ var WebsyTable2 = /*#__PURE__*/function () {
|
|
|
4878
4882
|
|
|
4879
4883
|
if (event.target.classList.contains('sortable-column')) {
|
|
4880
4884
|
var colIndex = +event.target.getAttribute('data-index');
|
|
4885
|
+
var sortIndex = +event.target.getAttribute('data-sort-index');
|
|
4881
4886
|
var column = this.options.columns[colIndex];
|
|
4882
4887
|
|
|
4883
4888
|
if (this.options.onSort) {
|
|
4884
|
-
this.options.onSort(event, column, colIndex);
|
|
4889
|
+
this.options.onSort(event, column, colIndex, sortIndex);
|
|
4885
4890
|
} else {
|
|
4886
4891
|
this.internalSort(column, colIndex);
|
|
4887
4892
|
} // const colIndex = +event.target.getAttribute('data-index')
|
|
@@ -5128,7 +5133,7 @@ var WebsyTable2 = /*#__PURE__*/function () {
|
|
|
5128
5133
|
style += "width: ".concat(c.width || 'auto', "; ");
|
|
5129
5134
|
}
|
|
5130
5135
|
|
|
5131
|
-
return "\n <th style=\"".concat(style, "\">\n <div class =\"tableHeader\">\n <div class=\"leftSection\">\n <div\n class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n data-index=\"").concat(i, "\" \n data-sort=\"").concat(c.sort, "\" \n >\n ").concat(c.name, "\n </div>\n </div>\n <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n ").concat(c.searchable === true ? _this33.buildSearchIcon(i) : '', "\n </div>\n </th>\n ");
|
|
5136
|
+
return "\n <th style=\"".concat(style, "\">\n <div class =\"tableHeader\">\n <div class=\"leftSection\">\n <div\n class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n data-sort-index=\"").concat(c.sortIndex || i, "\"\n data-index=\"").concat(i, "\"\n data-sort=\"").concat(c.sort, "\" \n >\n ").concat(c.name, "\n </div>\n </div>\n <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n ").concat(c.searchable === true ? _this33.buildSearchIcon(i) : '', "\n </div>\n </th>\n ");
|
|
5132
5137
|
}
|
|
5133
5138
|
}).join('') + '</tr>';
|
|
5134
5139
|
var headEl = document.getElementById("".concat(this.elementId, "_head"));
|