hx-tomselect 1.0.5 → 1.0.12
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 +10 -5
- package/hx-tomselect.js +3 -2
- package/index.html +59 -285
- package/package.json +1 -4
package/README.md
CHANGED
|
@@ -2,20 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
Provides a hx-ext="tomselect" htmx extention tag
|
|
4
4
|
|
|
5
|
+
<a href="https://lassebomh.github.io/htmx-playground/?url=https%253A%252F%252Fraw.githubusercontent.com%252FKiwiKid%252Fhx-tomselect%252Fmain%252Fplayground%252Fbasic.json">Playground</a>
|
|
6
|
+
|
|
7
|
+
|
|
5
8
|
<a href="https://kiwikid.github.io/hx-tomselect/">Full Examples List</a>
|
|
6
9
|
|
|
10
|
+
|
|
11
|
+
|
|
7
12
|
### Install
|
|
8
13
|
```html
|
|
9
|
-
<script src="https://cdn.jsdelivr.net/
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/hx-tomselect@latest/hx-tomselect.js"></script>
|
|
10
15
|
```
|
|
11
16
|
|
|
12
17
|
|
|
13
18
|
(Include htmx and tom-select before the extention)
|
|
14
19
|
```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/
|
|
20
|
+
<script src="https://unpkg.com/htmx.org@latest"></script>
|
|
21
|
+
<link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet"/>
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/hx-tomselect/hx-tomselect.js"></script>
|
|
19
24
|
```
|
|
20
25
|
|
|
21
26
|
|
package/hx-tomselect.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
(function() {
|
|
2
2
|
/** stable build*/
|
|
3
|
-
const version = '
|
|
3
|
+
const version = '11'
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @typedef {Object} SupportedAttribute
|
|
@@ -252,6 +252,7 @@
|
|
|
252
252
|
|
|
253
253
|
let config = {
|
|
254
254
|
maxItems: 999,
|
|
255
|
+
multiple: true,
|
|
255
256
|
plugins: {}
|
|
256
257
|
};
|
|
257
258
|
|
|
@@ -286,7 +287,7 @@
|
|
|
286
287
|
if (debug) { console.info('hx-tomselect - tom-select-success - config', config) }
|
|
287
288
|
const ts = new TomSelect(s, config);
|
|
288
289
|
s.setAttribute('tom-select-success', `success`);
|
|
289
|
-
s.setAttribute('hx-tom-select-version', `
|
|
290
|
+
s.setAttribute('hx-tom-select-version', `hx_ts-${ts.version}`);
|
|
290
291
|
|
|
291
292
|
} catch (err) {
|
|
292
293
|
s.setAttribute('tom-select-error', JSON.stringify(err));
|
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" />
|
|
@@ -18,6 +21,7 @@
|
|
|
18
21
|
|
|
19
22
|
gtag('config', 'G-QNEWNK6T05');
|
|
20
23
|
</script>
|
|
24
|
+
<meta name="google-site-verification" content="sxjVvIPkcjCaInV5YUF01yosZnRtagwGreWlnLQ4MlE" />
|
|
21
25
|
|
|
22
26
|
</head>
|
|
23
27
|
|
|
@@ -41,24 +45,30 @@
|
|
|
41
45
|
}
|
|
42
46
|
</style>
|
|
43
47
|
<p class="p-4 text-xl mb-10">
|
|
44
|
-
<a class="underline" href="https://
|
|
48
|
+
<a class="underline" href="https://github.com/KiwiKid/hx-tomselect">hx-tomselect</a> - a <a
|
|
45
49
|
class="underline" href="https://v1.htmx.org/docs/#extensions" target="_">htmx extention</a> for <a
|
|
46
50
|
class="underline" href="https://tom-select.js.org/">tom-select.js</a>
|
|
47
51
|
</p>
|
|
52
|
+
<section class="mb-20">
|
|
53
|
+
<a href="https://lassebomh.github.io/htmx-playground/?url=https%253A%252F%252Fraw.githubusercontent.com%252FKiwiKid%252Fhx-tomselect%252Fmain%252Fplayground%252Fbasic.json" class="underline">playground</a> / <a class="underline" href="https://github.com/KiwiKid/hx-tomselect">github</a>
|
|
54
|
+
|
|
55
|
+
</section>
|
|
56
|
+
|
|
48
57
|
<section class="mb-20">
|
|
49
58
|
<h1 class="text-xl">Install:</h1>
|
|
59
|
+
|
|
50
60
|
<pre
|
|
51
|
-
class="mb-2 code-container"><code class="language-markup wrap"><script src="https://
|
|
61
|
+
class="mb-2 code-container"><code class="language-markup wrap"><script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"></script></code></pre>
|
|
52
62
|
|
|
53
|
-
|
|
63
|
+
this extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
|
|
54
64
|
href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
|
|
55
65
|
<pre class="mb-2 code-container"><code class="language-markup"><!DOCTYPE html>
|
|
56
66
|
<html>
|
|
57
67
|
<head>
|
|
58
|
-
<script src="https://unpkg.com/htmx.org@
|
|
59
|
-
<link href="https://
|
|
60
|
-
<script src="https://
|
|
61
|
-
<script src="https://
|
|
68
|
+
<script src="https://unpkg.com/htmx.org@latest">
|
|
69
|
+
<link href="https://unpkg.com/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" />
|
|
70
|
+
<script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js">
|
|
71
|
+
<script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"/>
|
|
62
72
|
</head>
|
|
63
73
|
<body>
|
|
64
74
|
<select hx-ext="tomselect">
|
|
@@ -80,73 +90,34 @@
|
|
|
80
90
|
<option value="3">Option 3</option>
|
|
81
91
|
</select>
|
|
82
92
|
</section>
|
|
83
|
-
<p>(Not really interested in publishing on npm, can on request)</p>
|
|
84
93
|
|
|
85
94
|
<section class="mb-20">
|
|
86
95
|
<h2 class="text-xl font-semibold mb-3">Input</h2>
|
|
87
|
-
<p class="p-4">
|
|
96
|
+
<p class="p-4">allow creating new items and selecting multiple items</p>
|
|
88
97
|
|
|
89
|
-
<select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10"
|
|
98
|
+
<select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10" ts-remove-button-title="true" multiple
|
|
90
99
|
class="block w-full mb-2">
|
|
91
100
|
<option value="">Brilliant</option>
|
|
92
101
|
<option value="1">Excellent</option>
|
|
93
102
|
<option value="2">Top Notch</option>
|
|
94
103
|
<option value="3">Awesome</option>
|
|
95
104
|
</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
|
|
105
|
+
<pre class="mb-2"><code class="language-markup"><select
|
|
106
|
+
hx-ext="tomselect"
|
|
107
|
+
ts-create="true"
|
|
108
|
+
ts-remove-button-title="true"
|
|
109
|
+
multiple
|
|
145
110
|
>
|
|
146
|
-
<option value="">
|
|
147
|
-
<option value="1">Option 1</option>
|
|
148
|
-
<option value="2">Option 2</option>
|
|
149
|
-
|
|
111
|
+
<option value="">N/A</option>
|
|
112
|
+
<option selected value="1">Option 1</option>
|
|
113
|
+
<option selected value="2">Option 2</option>
|
|
114
|
+
<option selected value="3">Option 3</option>
|
|
115
|
+
<option selected value="4">Option 4</option>
|
|
116
|
+
<option selected value="5">Option 5</option>
|
|
117
|
+
<option value="6">Option 6</option>
|
|
118
|
+
<option value="7">Option 7</option>
|
|
119
|
+
<option value="8">Option 8</option>
|
|
120
|
+
<option value="9">Option 9</option>
|
|
150
121
|
</select></code></pre>
|
|
151
122
|
</section>
|
|
152
123
|
|
|
@@ -184,205 +155,9 @@
|
|
|
184
155
|
<h2 class="text-xl font-semibold mb-3">Configure:</h2>
|
|
185
156
|
<p class="p-4">Config Options are prefixed with a `ts-` and generally match <a
|
|
186
157
|
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
|
-
|
|
158
|
+
The <a href="https://github.com/KiwiKid/hx-tomselect/blob/main/hx-tomselect.js#L45-L226">full list</a> of currently support attributes is:
|
|
159
|
+
<div class="item-center">(can expand to other options request):</div>
|
|
160
|
+
<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
161
|
</p>
|
|
387
162
|
<p class="p-4">If a non-valid key
|
|
388
163
|
is
|
|
@@ -391,10 +166,9 @@
|
|
|
391
166
|
to
|
|
392
167
|
the <select> tag
|
|
393
168
|
</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>
|
|
169
|
+
<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">
|
|
170
|
+
<select tom-select-warning="could not find tag 'example'"> - non-breaking error (e.g. tag name is not recognized)
|
|
171
|
+
<select tom-select-error="TomSelect was not found"> - Breaking error</span></code></pre>
|
|
398
172
|
|
|
399
173
|
|
|
400
174
|
|
|
@@ -416,7 +190,24 @@
|
|
|
416
190
|
>(Click to dynamically load options)</button></code></pre>
|
|
417
191
|
</div>
|
|
418
192
|
</section>
|
|
419
|
-
|
|
193
|
+
<section class="mb-20">
|
|
194
|
+
<h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
|
|
195
|
+
<p>allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title,
|
|
196
|
+
any other string
|
|
197
|
+
will be used as a regex match</p>
|
|
198
|
+
<select hx-ext="tomselect" ts-create="true" ts-max-items="10" ts-create-filter="^[^,]*$">
|
|
199
|
+
<option value="">Select</option>
|
|
200
|
+
<option value="1">ValidOption</option>
|
|
201
|
+
</select>
|
|
202
|
+
<pre><code class="language-html-dark"><select
|
|
203
|
+
hx-ext="tomselect"
|
|
204
|
+
ts-max-items="10"
|
|
205
|
+
ts-create-filter="^[^,]*$"
|
|
206
|
+
>
|
|
207
|
+
<option value="">Select an option</option>
|
|
208
|
+
<option value="1">ValidOption</option>
|
|
209
|
+
</select></code></pre>
|
|
210
|
+
</section>
|
|
420
211
|
|
|
421
212
|
<section class="mb-20">
|
|
422
213
|
<h2 class="text-xl font-semibold mb-3">Configuring Item Deletion Confirmation</h2>
|
|
@@ -442,24 +233,7 @@
|
|
|
442
233
|
|
|
443
234
|
|
|
444
235
|
|
|
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>
|
|
236
|
+
|
|
463
237
|
|
|
464
238
|
<section class="mb-20">
|
|
465
239
|
<h2 class="text-xl font-semibold mb-3">Create + POST request</h2>
|
package/package.json
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hx-tomselect",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "Provides a hx-ext=\"tomselect\" htmx extention tag",
|
|
5
5
|
"main": "hx-tomselect.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
-
},
|
|
9
6
|
"repository": {
|
|
10
7
|
"type": "git",
|
|
11
8
|
"url": "git+https://github.com/KiwiKid/hx-tomselect.git"
|