hx-tomselect 1.0.4 → 1.0.6
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/README.md +5 -5
- package/hx-tomselect.js +1 -1
- package/index.html +42 -280
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,16 +6,16 @@ Provides a hx-ext="tomselect" htmx extention tag
|
|
|
6
6
|
|
|
7
7
|
### Install
|
|
8
8
|
```html
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/hx-tomselect@latest/hx-tomselect.js"></script>
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
(Include htmx and tom-select before the extention)
|
|
14
14
|
```html
|
|
15
|
-
<script src="https://unpkg.com/htmx.org"></script>
|
|
16
|
-
<link href="https://cdn.jsdelivr.net/npm/tom-select@
|
|
17
|
-
<script src="https://cdn.jsdelivr.net/npm/tom-select@
|
|
18
|
-
<script src="https://cdn.jsdelivr.net/
|
|
15
|
+
<script src="https://unpkg.com/htmx.org@latest"></script>
|
|
16
|
+
<link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet"/>
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/hx-tomselect/hx-tomselect.js"></script>
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
|
package/hx-tomselect.js
CHANGED
package/index.html
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>hx-tomselect</title>
|
|
8
8
|
<script defer src="./hx-tomselect.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/htmx.org@latest"></script>
|
|
10
|
+
<link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet"/>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
|
|
9
12
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
|
|
10
13
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css" />
|
|
11
14
|
<link href="./prism-holi-theme.css" rel="stylesheet" />
|
|
@@ -47,18 +50,19 @@
|
|
|
47
50
|
</p>
|
|
48
51
|
<section class="mb-20">
|
|
49
52
|
<h1 class="text-xl">Install:</h1>
|
|
53
|
+
|
|
50
54
|
<pre
|
|
51
|
-
class="mb-2 code-container"><code class="language-markup wrap"><script src="https://
|
|
55
|
+
class="mb-2 code-container"><code class="language-markup wrap"><script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"></script></code></pre>
|
|
52
56
|
|
|
53
57
|
This extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
|
|
54
58
|
href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
|
|
55
59
|
<pre class="mb-2 code-container"><code class="language-markup"><!DOCTYPE html>
|
|
56
60
|
<html>
|
|
57
61
|
<head>
|
|
58
|
-
<script src="https://unpkg.com/htmx.org@
|
|
59
|
-
<link href="https://
|
|
60
|
-
<script src="https://
|
|
61
|
-
<script src="https://
|
|
62
|
+
<script src="https://unpkg.com/htmx.org@latest">
|
|
63
|
+
<link href="https://unpkg.com/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" />
|
|
64
|
+
<script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js">
|
|
65
|
+
<script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"/>
|
|
62
66
|
</head>
|
|
63
67
|
<body>
|
|
64
68
|
<select hx-ext="tomselect">
|
|
@@ -80,73 +84,28 @@
|
|
|
80
84
|
<option value="3">Option 3</option>
|
|
81
85
|
</select>
|
|
82
86
|
</section>
|
|
83
|
-
<p>(Not really interested in publishing on npm, can on request)</p>
|
|
84
87
|
|
|
85
88
|
<section class="mb-20">
|
|
86
89
|
<h2 class="text-xl font-semibold mb-3">Input</h2>
|
|
87
|
-
<p class="p-4">Allow creating new items</p>
|
|
90
|
+
<p class="p-4">Allow creating new items and selecting multiple items</p>
|
|
88
91
|
|
|
89
|
-
<select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10"
|
|
92
|
+
<select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10" ts-remove-button-title="true" multiple
|
|
90
93
|
class="block w-full mb-2">
|
|
91
94
|
<option value="">Brilliant</option>
|
|
92
95
|
<option value="1">Excellent</option>
|
|
93
96
|
<option value="2">Top Notch</option>
|
|
94
97
|
<option value="3">Awesome</option>
|
|
95
98
|
</select>
|
|
96
|
-
<pre class="mb-2"><code class="language-markup"><select
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
</select></code></pre>
|
|
102
|
-
</section>
|
|
103
|
-
|
|
104
|
-
<section class="mb-20">
|
|
105
|
-
<h2 class="text-xl font-semibold mb-3">Select</h2>
|
|
106
|
-
<p class="p-4">Allow selecting multiple items</p>
|
|
107
|
-
|
|
108
|
-
<select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" class="block w-full mb-2">
|
|
109
|
-
<option value="">Brilliant</option>
|
|
110
|
-
<option value="1">Excellent</option>
|
|
111
|
-
<option value="2">Top Notch</option>
|
|
112
|
-
<option value="3">Awesome</option>
|
|
113
|
-
</select>
|
|
114
|
-
<pre class="mb-2"><code class="language-markup"><select hx-ext="tomselect" multiple>
|
|
115
|
-
<option value="">Select an option</option>
|
|
116
|
-
<option value="1">Option 1</option>
|
|
117
|
-
<option value="2">Option 2</option>
|
|
118
|
-
<option value="3">Option 3</option>
|
|
119
|
-
</select></code></pre>
|
|
120
|
-
</section>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<section class="mb-20">
|
|
126
|
-
<h2 class="text-xl font-semibold mb-3">Delete</h2>
|
|
127
|
-
<p class="p-4">(max 3 selections, takes an custom string message)</p>
|
|
128
|
-
<select hx-ext="tomselect" ts-max-items="3" ts-remove-button-title="true" multiple>
|
|
129
|
-
<option value="">N/A</option>
|
|
130
|
-
<option selected value="1">Option 1</option>
|
|
131
|
-
<option selected value="2">Option 2</option>
|
|
132
|
-
<option value="3">Option 3</option>
|
|
133
|
-
<option value="4">Option 4</option>
|
|
134
|
-
<option value="5">Option 5</option>
|
|
135
|
-
<option value="6">Option 6</option>
|
|
136
|
-
<option value="7">Option 7</option>
|
|
137
|
-
<option value="8">Option 8</option>
|
|
138
|
-
<option value="9">Option 9</option>
|
|
139
|
-
</select>
|
|
140
|
-
<pre class="mb-2"><code class="language-markup"><select
|
|
141
|
-
hx-ext="tomselect"
|
|
142
|
-
ts-max-items="3"
|
|
143
|
-
ts-remove-button-title="true"
|
|
144
|
-
multiple
|
|
99
|
+
<pre class="mb-2"><code class="language-markup"><select
|
|
100
|
+
hx-ext="tomselect"
|
|
101
|
+
ts-create="true"
|
|
102
|
+
ts-remove-button-title="true"
|
|
103
|
+
multiple
|
|
145
104
|
>
|
|
146
105
|
<option value="">Select an option</option>
|
|
147
106
|
<option value="1">Option 1</option>
|
|
148
107
|
<option value="2">Option 2</option>
|
|
149
|
-
|
|
108
|
+
<option value="3">Option 3</option>
|
|
150
109
|
</select></code></pre>
|
|
151
110
|
</section>
|
|
152
111
|
|
|
@@ -184,205 +143,9 @@
|
|
|
184
143
|
<h2 class="text-xl font-semibold mb-3">Configure:</h2>
|
|
185
144
|
<p class="p-4">Config Options are prefixed with a `ts-` and generally match <a
|
|
186
145
|
href="https://tom-select.js.org/docs/" class="underline">TomSelect config options</a>
|
|
187
|
-
The full list is
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
<script>
|
|
192
|
-
const attributeConfigs = [
|
|
193
|
-
{
|
|
194
|
-
key: 'ts-create',
|
|
195
|
-
configChange: 'create',
|
|
196
|
-
_description: 'Allow creating new items'
|
|
197
|
-
}, {
|
|
198
|
-
key: 'ts-create-on-blur',
|
|
199
|
-
configChange: 'createOnBlur'
|
|
200
|
-
}, {
|
|
201
|
-
key: 'ts-create-filter',
|
|
202
|
-
configChange: (elm, config) => ({
|
|
203
|
-
createFilter: function (input) {
|
|
204
|
-
try {
|
|
205
|
-
const filter = elm.getAttribute('ts-create-filter')
|
|
206
|
-
const matchEx = filter == "true" ? /^[^,]*$/ : elm.getAttribute('ts-create-filter')
|
|
207
|
-
var match = input.match(matchEx); // Example filter: disallow commas in input
|
|
208
|
-
if (match) return !this.options.hasOwnProperty(input);
|
|
209
|
-
elm.setAttribute('tom-select-warning', JSON.stringify(err));
|
|
210
|
-
return false;
|
|
211
|
-
} catch (err) {
|
|
212
|
-
return false
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
})
|
|
216
|
-
}, {
|
|
217
|
-
key: 'ts-delimiter',
|
|
218
|
-
configChange: 'delimiter'
|
|
219
|
-
}, {
|
|
220
|
-
key: 'ts-highlight',
|
|
221
|
-
configChange: 'highlight'
|
|
222
|
-
}, {
|
|
223
|
-
key: 'ts-multiple',
|
|
224
|
-
configChange: 'multiple'
|
|
225
|
-
}, {
|
|
226
|
-
key: 'ts-persist',
|
|
227
|
-
configChange: 'persist'
|
|
228
|
-
}, {
|
|
229
|
-
key: 'ts-open-on-focus',
|
|
230
|
-
configChange: 'openOnFocus'
|
|
231
|
-
}, {
|
|
232
|
-
key: 'ts-max-items',
|
|
233
|
-
configChange: 'maxItems'
|
|
234
|
-
}, {
|
|
235
|
-
key: 'ts-hide-selected',
|
|
236
|
-
configChange: 'hideSelected'
|
|
237
|
-
}, {
|
|
238
|
-
key: 'tx-close-after-select',
|
|
239
|
-
configChange: 'closeAfterSelect'
|
|
240
|
-
}, {
|
|
241
|
-
key: 'tx-duplicates',
|
|
242
|
-
configChange: 'duplicates'
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
key: 'ts-max-options',
|
|
246
|
-
configChange: 'maxOptions'
|
|
247
|
-
}, {
|
|
248
|
-
key: 'ts-sort',
|
|
249
|
-
configChange: (elm, config) => ({
|
|
250
|
-
sortField: {
|
|
251
|
-
field: elm.getAttribute('ts-sort'),
|
|
252
|
-
},
|
|
253
|
-
})
|
|
254
|
-
}, {
|
|
255
|
-
key: 'ts-sort-direction',
|
|
256
|
-
configChange: (elm, config) => ({
|
|
257
|
-
sortField: {
|
|
258
|
-
direction: elm.getAttribute('ts-sort-direction') ?? 'asc'
|
|
259
|
-
},
|
|
260
|
-
})
|
|
261
|
-
}, {
|
|
262
|
-
key: 'ts-allow-empty-option',
|
|
263
|
-
type: 'simple',
|
|
264
|
-
configChange: 'allowEmptyOption'
|
|
265
|
-
}, {
|
|
266
|
-
key: 'ts-clear-after-add',
|
|
267
|
-
configChange: {
|
|
268
|
-
create: true,
|
|
269
|
-
onItemAdd: function () {
|
|
270
|
-
this.setTextboxValue('');
|
|
271
|
-
// this.refreshOptions();
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
}, {
|
|
275
|
-
key: 'ts-remove-button-title',
|
|
276
|
-
configChange: (elm, config) => deepAssign(config, {
|
|
277
|
-
plugins: {
|
|
278
|
-
remove_button: {
|
|
279
|
-
title: elm.getAttribute('ts-remove-button-title') == 'true' ? 'Remove this item' : elm.getAttribute('ts-remove-button-title')
|
|
280
|
-
}
|
|
281
|
-
},
|
|
282
|
-
})
|
|
283
|
-
}, {
|
|
284
|
-
key: 'ts-delete-confirm',
|
|
285
|
-
configChange: (elm, config) => ({
|
|
286
|
-
onDelete: function (values) {
|
|
287
|
-
if (elm.getAttribute('ts-delete-confirm') == "true") {
|
|
288
|
-
return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
|
|
289
|
-
} else {
|
|
290
|
-
return confirm(elm.getAttribute('ts-delete-confirm'));
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
}
|
|
294
|
-
})
|
|
295
|
-
}, {
|
|
296
|
-
key: 'ts-add-post-url',
|
|
297
|
-
configChange: (elm, config) => ({
|
|
298
|
-
onOptionAdd: function (value, item) {
|
|
299
|
-
this.lock();
|
|
300
|
-
const valueKeyName = elm.getAttribute('ts-add-post-url-body-value') ?? 'value'
|
|
301
|
-
const body = {}
|
|
302
|
-
body[valueKeyName] = value
|
|
303
|
-
fetch(elm.getAttribute('ts-add-post-url'), {
|
|
304
|
-
method: 'POST',
|
|
305
|
-
headers: {
|
|
306
|
-
'Content-Type': 'application/json',
|
|
307
|
-
},
|
|
308
|
-
body: JSON.stringify(body),
|
|
309
|
-
})
|
|
310
|
-
.then((res) => {
|
|
311
|
-
if (!res.ok) {
|
|
312
|
-
throw new Error(`HTTP status ${res.status}`);
|
|
313
|
-
}
|
|
314
|
-
return res.text();
|
|
315
|
-
})
|
|
316
|
-
.then((responseHtml) => htmx.process(elm, responseHtml))
|
|
317
|
-
.catch(error => {
|
|
318
|
-
console.error('Error adding item', error)
|
|
319
|
-
elm.setAttribute('tom-select-warning', `ts-add-post-url - Error processing item: ${JSON.stringify(error)}`);
|
|
320
|
-
this.removeItem(value);
|
|
321
|
-
})
|
|
322
|
-
.finally(() => {
|
|
323
|
-
this.unlock();
|
|
324
|
-
});
|
|
325
|
-
}
|
|
326
|
-
}),
|
|
327
|
-
_isBeta: true,
|
|
328
|
-
}, {
|
|
329
|
-
key: 'ts-add-post-url-body-value',
|
|
330
|
-
configChange: '',
|
|
331
|
-
_isBeta: true,
|
|
332
|
-
},
|
|
333
|
-
{
|
|
334
|
-
key: 'ts-no-active',
|
|
335
|
-
configChange: {
|
|
336
|
-
plugins: ['no_active_items'],
|
|
337
|
-
persist: false,
|
|
338
|
-
create: true
|
|
339
|
-
}
|
|
340
|
-
}, {
|
|
341
|
-
key: 'ts-remove-selector-on-select',
|
|
342
|
-
type: 'simple',
|
|
343
|
-
configChange: null
|
|
344
|
-
}, {
|
|
345
|
-
key: 'ts-no-delete',
|
|
346
|
-
configChange: {
|
|
347
|
-
onDelete: () => { return false },
|
|
348
|
-
}
|
|
349
|
-
}, {
|
|
350
|
-
key: 'ts-option-class',
|
|
351
|
-
configChange: 'optionClass'
|
|
352
|
-
}, {
|
|
353
|
-
key: 'ts-option-class-ext',
|
|
354
|
-
configChange: (elm, config) => ({
|
|
355
|
-
'optionClass': `${elm.getAttribute('ts-option-class-ext')} option`
|
|
356
|
-
})
|
|
357
|
-
}, {
|
|
358
|
-
key: 'ts-item-class',
|
|
359
|
-
configChange: 'itemClass'
|
|
360
|
-
}, {
|
|
361
|
-
key: 'ts-item-class-ext',
|
|
362
|
-
configChange: (elm, config) => ({
|
|
363
|
-
key: 'ts-option-class-ext',
|
|
364
|
-
configChange: {
|
|
365
|
-
'itemClass': `${elm.getAttribute('ts-option-class-ext')} item`
|
|
366
|
-
}
|
|
367
|
-
})
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
key: 'ts-raw-config',
|
|
371
|
-
configChange: (elm, config) => elm.getAttribute('ts-raw-config')
|
|
372
|
-
}
|
|
373
|
-
]
|
|
374
|
-
document.addEventListener('DOMContentLoaded', function () {
|
|
375
|
-
var configString = ""
|
|
376
|
-
var betaConfigString = ""
|
|
377
|
-
if (attributeConfigs && Array.isArray(attributeConfigs)) {
|
|
378
|
-
// document.getElementById('attributeConfigsOutput').textContent = JSON.stringify(attributeConfigs, null, 4);
|
|
379
|
-
}
|
|
380
|
-
});
|
|
381
|
-
</script>
|
|
382
|
-
<!-- <pre><code class="language-markdown" id="attributeConfigsOutput">
|
|
383
|
-
|
|
384
|
-
</code></pre>-->
|
|
385
|
-
|
|
146
|
+
The <a href="https://github.com/KiwiKid/hx-tomselect/blob/main/hx-tomselect.js#L45-L226">full list</a> of currently support attributes is:
|
|
147
|
+
<div class="item-center">(can expand to other options request):</div>
|
|
148
|
+
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2FKiwiKid%2Fhx-tomselect%2Fblob%2Fmain%2Fhx-tomselect.js%23L45-L226&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on"></script>
|
|
386
149
|
</p>
|
|
387
150
|
<p class="p-4">If a non-valid key
|
|
388
151
|
is
|
|
@@ -391,10 +154,9 @@
|
|
|
391
154
|
to
|
|
392
155
|
the <select> tag
|
|
393
156
|
</p>
|
|
394
|
-
<p class="p-4">After processing, one of three attributes will be added to each select box:</p
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
- <select tom-select-error="TomSelect was not found"> - Breaking error</span></code></pre>
|
|
157
|
+
<p class="p-4">After processing, one of three attributes will be added to each select box:</p><pre><code class="language-markup"><span class="text-sm"><select tom-select-success="true">
|
|
158
|
+
<select tom-select-warning="could not find tag 'example'"> - non-breaking error (e.g. tag name is not recognized)
|
|
159
|
+
<select tom-select-error="TomSelect was not found"> - Breaking error</span></code></pre>
|
|
398
160
|
|
|
399
161
|
|
|
400
162
|
|
|
@@ -416,7 +178,24 @@
|
|
|
416
178
|
>(Click to dynamically load options)</button></code></pre>
|
|
417
179
|
</div>
|
|
418
180
|
</section>
|
|
419
|
-
|
|
181
|
+
<section class="mb-20">
|
|
182
|
+
<h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
|
|
183
|
+
<p>Allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title,
|
|
184
|
+
any other string
|
|
185
|
+
will be used as a regex match</p>
|
|
186
|
+
<select hx-ext="tomselect" ts-create="true" ts-max-items="10" ts-create-filter="^[^,]*$">
|
|
187
|
+
<option value="">Select</option>
|
|
188
|
+
<option value="1">ValidOption</option>
|
|
189
|
+
</select>
|
|
190
|
+
<pre><code class="language-html-dark"><select
|
|
191
|
+
hx-ext="tomselect"
|
|
192
|
+
ts-max-items="10"
|
|
193
|
+
ts-create-filter="^[^,]*$"
|
|
194
|
+
>
|
|
195
|
+
<option value="">Select an option</option>
|
|
196
|
+
<option value="1">ValidOption</option>
|
|
197
|
+
</select></code></pre>
|
|
198
|
+
</section>
|
|
420
199
|
|
|
421
200
|
<section class="mb-20">
|
|
422
201
|
<h2 class="text-xl font-semibold mb-3">Configuring Item Deletion Confirmation</h2>
|
|
@@ -442,24 +221,7 @@
|
|
|
442
221
|
|
|
443
222
|
|
|
444
223
|
|
|
445
|
-
|
|
446
|
-
<h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
|
|
447
|
-
<p>Allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title,
|
|
448
|
-
any other string
|
|
449
|
-
will be used as a regex match</p>
|
|
450
|
-
<select hx-ext="tomselect" ts-create="true" ts-max-items="10" ts-create-filter="^[^,]*$">
|
|
451
|
-
<option value="">Select</option>
|
|
452
|
-
<option value="1">ValidOption</option>
|
|
453
|
-
</select>
|
|
454
|
-
<pre><code class="language-html-dark"><select
|
|
455
|
-
hx-ext="tomselect"
|
|
456
|
-
ts-max-items="10"
|
|
457
|
-
ts-create-filter="^[^,]*$"
|
|
458
|
-
>
|
|
459
|
-
<option value="">Select an option</option>
|
|
460
|
-
<option value="1">ValidOption</option>
|
|
461
|
-
</select></code></pre>
|
|
462
|
-
</section>
|
|
224
|
+
|
|
463
225
|
|
|
464
226
|
<section class="mb-20">
|
|
465
227
|
<h2 class="text-xl font-semibold mb-3">Create + POST request</h2>
|