@websy/websy-designs 1.2.23 → 1.2.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.
- package/dist/websy-designs-es6.debug.js +17 -10
- package/dist/websy-designs-es6.js +9 -5
- package/dist/websy-designs-es6.min.js +1 -1
- package/dist/websy-designs.debug.js +17 -10
- package/dist/websy-designs.js +9 -5
- package/dist/websy-designs.min.css +1 -1
- package/dist/websy-designs.min.js +1 -1
- package/package.json +1 -1
|
@@ -1100,7 +1100,11 @@ class WebsyDropdown {
|
|
|
1100
1100
|
minSearchCharacters: 2,
|
|
1101
1101
|
showCompleteSelectedList: false,
|
|
1102
1102
|
closeAfterSelection: true,
|
|
1103
|
-
customActions: []
|
|
1103
|
+
customActions: [],
|
|
1104
|
+
searchIcon: `<svg class='search' width="20" height="20" viewBox="0 0 512 512"><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
|
|
1105
|
+
clearIcon: `<svg class='clear' 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>`,
|
|
1106
|
+
arrowIcon: `<svg class='arrow' 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>`,
|
|
1107
|
+
actionsIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">><circle cx="256" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="416" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="96" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>`
|
|
1104
1108
|
}
|
|
1105
1109
|
this.options = Object.assign({}, DEFAULTS, options)
|
|
1106
1110
|
if (this.options.items.length > 0) {
|
|
@@ -1128,16 +1132,16 @@ class WebsyDropdown {
|
|
|
1128
1132
|
let html = `
|
|
1129
1133
|
<div id='${this.elementId}_container' class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''} ${this.options.style} ${this.options.customActions.length > 0 ? 'with-actions' : ''}'>
|
|
1130
1134
|
<div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
|
|
1131
|
-
|
|
1132
|
-
<span
|
|
1133
|
-
|
|
1135
|
+
${this.options.searchIcon}
|
|
1136
|
+
<span>
|
|
1137
|
+
<span class='websy-dropdown-header-value' data-info='${headerLabel}' id='${this.elementId}_selectedItems'>${headerLabel}</span>
|
|
1138
|
+
<span class='websy-dropdown-header-label' id='${this.elementId}_headerLabel'>${this.options.label}</span>
|
|
1139
|
+
</span>
|
|
1134
1140
|
<input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
|
|
1135
|
-
|
|
1141
|
+
${this.options.arrowIcon}
|
|
1136
1142
|
`
|
|
1137
1143
|
if (this.options.allowClear === true) {
|
|
1138
|
-
html +=
|
|
1139
|
-
<svg class='clear' 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>
|
|
1140
|
-
`
|
|
1144
|
+
html += this.options.clearIcon
|
|
1141
1145
|
}
|
|
1142
1146
|
html += `
|
|
1143
1147
|
</div>
|
|
@@ -1147,8 +1151,9 @@ class WebsyDropdown {
|
|
|
1147
1151
|
if (this.options.customActions.length > 0) {
|
|
1148
1152
|
html += `
|
|
1149
1153
|
<div class='websy-dropdown-action-container'>
|
|
1154
|
+
${this.options.actionsTitle || ''}
|
|
1150
1155
|
<button class='websy-dropdown-action-button'>
|
|
1151
|
-
|
|
1156
|
+
${this.options.actionsIcon}
|
|
1152
1157
|
</button>
|
|
1153
1158
|
<ul id='${this.elementId}_actionContainer'>
|
|
1154
1159
|
`
|
|
@@ -1164,7 +1169,9 @@ class WebsyDropdown {
|
|
|
1164
1169
|
}
|
|
1165
1170
|
if (this.options.disableSearch !== true) {
|
|
1166
1171
|
html += `
|
|
1167
|
-
<
|
|
1172
|
+
<div class='websy-dropdown-search-container'>
|
|
1173
|
+
<input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
|
|
1174
|
+
</div>
|
|
1168
1175
|
`
|
|
1169
1176
|
}
|
|
1170
1177
|
html += `
|
|
@@ -1228,7 +1228,11 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1228
1228
|
minSearchCharacters: 2,
|
|
1229
1229
|
showCompleteSelectedList: false,
|
|
1230
1230
|
closeAfterSelection: true,
|
|
1231
|
-
customActions: []
|
|
1231
|
+
customActions: [],
|
|
1232
|
+
searchIcon: "<svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>",
|
|
1233
|
+
clearIcon: "<svg class='clear' 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>",
|
|
1234
|
+
arrowIcon: "<svg class='arrow' 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>",
|
|
1235
|
+
actionsIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\">><circle cx=\"256\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><circle cx=\"416\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><circle cx=\"96\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/></svg>"
|
|
1232
1236
|
};
|
|
1233
1237
|
this.options = _extends({}, DEFAULTS, options);
|
|
1234
1238
|
|
|
@@ -1262,16 +1266,16 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1262
1266
|
var headerValue = this.selectedItems.map(function (s) {
|
|
1263
1267
|
return _this8.options.items[s].value || _this8.options.items[s].label;
|
|
1264
1268
|
}).join(this.options.multiValueDelimiter);
|
|
1265
|
-
var html = "\n <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, " ").concat(this.options.customActions.length > 0 ? 'with-actions' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n
|
|
1269
|
+
var html = "\n <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, " ").concat(this.options.customActions.length > 0 ? 'with-actions' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n ").concat(this.options.searchIcon, "\n <span>\n <span class='websy-dropdown-header-value' data-info='").concat(headerLabel, "' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span> \n <span class='websy-dropdown-header-label' id='").concat(this.elementId, "_headerLabel'>").concat(this.options.label, "</span>\n </span>\n <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n ").concat(this.options.arrowIcon, "\n ");
|
|
1266
1270
|
|
|
1267
1271
|
if (this.options.allowClear === true) {
|
|
1268
|
-
html +=
|
|
1272
|
+
html += this.options.clearIcon;
|
|
1269
1273
|
}
|
|
1270
1274
|
|
|
1271
1275
|
html += " \n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n ");
|
|
1272
1276
|
|
|
1273
1277
|
if (this.options.customActions.length > 0) {
|
|
1274
|
-
html += "\n <div class='websy-dropdown-action-container'>\n <button class='websy-dropdown-action-button'>\n
|
|
1278
|
+
html += "\n <div class='websy-dropdown-action-container'>\n ".concat(this.options.actionsTitle || '', "\n <button class='websy-dropdown-action-button'>\n ").concat(this.options.actionsIcon, "\n </button>\n <ul id='").concat(this.elementId, "_actionContainer'>\n ");
|
|
1275
1279
|
this.options.customActions.forEach(function (a, i) {
|
|
1276
1280
|
html += "\n <li class='websy-dropdown-custom-action' data-index='".concat(i, "'>").concat(a.label, "</li>\n ");
|
|
1277
1281
|
});
|
|
@@ -1279,7 +1283,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1279
1283
|
}
|
|
1280
1284
|
|
|
1281
1285
|
if (this.options.disableSearch !== true) {
|
|
1282
|
-
html += "\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n ");
|
|
1286
|
+
html += "\n <div class='websy-dropdown-search-container'>\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n </div>\n ");
|
|
1283
1287
|
}
|
|
1284
1288
|
|
|
1285
1289
|
html += "\n <div id='".concat(this.elementId, "_itemsContainer' class='websy-dropdown-items'>\n <ul id='").concat(this.elementId, "_items'> \n </ul>\n </div><!--\n --><div class='websy-dropdown-custom'></div>\n </div>\n </div>\n ");
|