hx-tomselect 1.0.0 → 1.0.2

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 (5) hide show
  1. package/README.md +2 -7
  2. package/another-place.html +2 -2
  3. package/{hx-tom-select.js → hx-tomselect.js} +5 -2
  4. package/index.html +231 -115
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -2,14 +2,11 @@
2
2
 
3
3
  Provides a hx-ext="tomselect" htmx extention tag
4
4
 
5
- [create a github pr/issue if you see any bugs/feature opportunities]
6
-
7
-
8
5
  <a href="https://kiwikid.github.io/hx-tomselect/">Full Examples List</a>
9
6
 
10
7
  ### Install
11
8
  ```html
12
- <script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/gh/KiwiKid/hx-tomselect/hx-tomselect.js"></script>
13
10
  ```
14
11
 
15
12
 
@@ -18,7 +15,7 @@ Provides a hx-ext="tomselect" htmx extention tag
18
15
  <script src="https://unpkg.com/htmx.org"></script>
19
16
  <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet"/>
20
17
  <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
21
- <script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"></script>
18
+ <script src="https://cdn.jsdelivr.net/gh/KiwiKid/hx-tomselect/hx-tomselect.js"></script>
22
19
  ```
23
20
 
24
21
 
@@ -40,8 +37,6 @@ After processing, one of three attributes will be added to each select box:
40
37
  - tom-select-warning - non-breaking error (e.g. tag name is no recognised)
41
38
  - tom-select-error - Breaking error - (i.e. invalid TomConfig json in ts-raw-config)
42
39
 
43
- hx-oob swaps works too (and was the main motivation for writing this extention)
44
-
45
40
  Check the code for details how how each attribute works
46
41
 
47
42
  ```html
package/another-place.html CHANGED
@@ -1,4 +1,4 @@
1
- <div class="mb-10 bg-gray-900">
1
+ <div class="mb-10 bg-gray-900 bg-blue-500">
2
2
  <label>[i came from somewhere else]
3
3
  <select hx-ext="tomselect" ts-clear-after-add="true">
4
4
  <option selected value="1">
@@ -13,7 +13,7 @@
13
13
  </select>
14
14
  </label>
15
15
  </div>
16
- <pre class="mb-10 language-html" hx-swap-oob="true" id="source-holder"><code class="language-html">&lt;select
16
+ <pre class="mb-10 language-html" hx-swap-oob="true" id="source-holder"><code class="language-markup">&lt;select
17
17
  hx-ext="tomselect"
18
18
  max-options="3"
19
19
  remove-button-title="Remove this item"
package/{hx-tom-select.js → hx-tomselect.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  (function() {
2
2
  /** stable build*/
3
- const version = '06'
3
+ const version = '07'
4
4
 
5
5
  /**
6
6
  * @typedef {Object} SupportedAttribute
@@ -257,6 +257,7 @@
257
257
  plugins: {}
258
258
  };
259
259
  const debug = s.getAttribute('hx-ext')?.split(',').map(item => item.trim()).includes('debug');
260
+ if (debug) { console.log(`\n\nattachTomSelect\n\n ${version}`) }
260
261
  if (debug) { console.log(s.attributes) }
261
262
 
262
263
  Array.from(s.attributes).forEach((a) => {
@@ -281,7 +282,7 @@
281
282
  }
282
283
  })
283
284
 
284
- if (debug) { console.info('hx-tomselect - tom-select-success - config', config) }
285
+ if (debug) { console.info('hx-tomselect - tom-select-success - config', config) }
285
286
  const ts = new TomSelect(s, config);
286
287
  s.setAttribute('tom-select-success', `success`);
287
288
  s.setAttribute('hx-tom-select-version', `hx-ts-${version}_ts-${ts.version}`);
@@ -298,6 +299,7 @@
298
299
  if (name === "htmx:afterProcessNode") {
299
300
  const newSelects = document.querySelectorAll('select[hx-ext*="tomselect"]:not([tom-select-success]):not([tom-select-error])')
300
301
  newSelects.forEach((s) => {
302
+ if(debug){ console.log('onEvent/htmx:afterProcessNode - newSelects', s)}
301
303
  attachTomSelect(s)
302
304
  })
303
305
  }
@@ -306,6 +308,7 @@
306
308
  console.log('onLoad')
307
309
  const newSelects = content.querySelectorAll('select[hx-ext*="tomselect"]:not([tom-select-success]):not([tom-select-error])')
308
310
  newSelects.forEach((s) => {
311
+ if(debug){ console.log('onLoad - newSelects', s)}
309
312
  attachTomSelect(s)
310
313
  })
311
314
 
package/index.html CHANGED
@@ -5,10 +5,7 @@
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <title>hx-tomselect</title>
8
- <script src="https://unpkg.com/htmx.org"></script>
9
- <link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" />
10
- <script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
11
- <script defer src="./hx-tom-select.js"></script>
8
+ <script defer src="./hx-tomselect.js"></script>
12
9
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
13
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css" />
14
11
  <link href="./prism-holi-theme.css" rel="stylesheet" />
@@ -19,33 +16,49 @@
19
16
  function gtag() { dataLayer.push(arguments); }
20
17
  gtag('js', new Date());
21
18
 
22
- gtag('config', 'G-S2BDGEP73W');
19
+ gtag('config', 'G-QNEWNK6T05');
23
20
  </script>
24
21
 
25
22
  </head>
26
23
 
27
24
  <body class="bg-gray-900 text-white p-10">
28
25
  <div class=" max-w-4xl mx-auto">
29
-
26
+ <style>
27
+ code[class*="language-markup"] {
28
+ font-size: calc(0.8rem + 0.5vw);
29
+ /* Light grey background for code */
30
+ padding: 0.5rem;
31
+ /* Padding around text */
32
+ border-radius: 5px;
33
+ /* Optional: rounded corners */
34
+ overflow-wrap: break-word;
35
+ /* Ensures long lines wrap */
36
+ }
37
+
38
+ .ts-dropdown-content {
39
+ font-size: calc(1.2rem + 0.5vw);
40
+ padding: 1px
41
+ }
42
+ </style>
30
43
  <p class="p-4 text-xl mb-10">
31
- <a class="underline" href="https://github.com/kiwiKid/hx-tomselect">hx-tomselect</a> - a <a
44
+ <a class="underline" href="https://unpkg.com/hx-tomselect@latest/hx-tomselect.js">hx-tomselect</a> - a <a
32
45
  class="underline" href="https://v1.htmx.org/docs/#extensions" target="_">htmx extention</a> for <a
33
46
  class="underline" href="https://tom-select.js.org/">tom-select.js</a>
34
47
  </p>
35
48
  <section class="mb-20">
36
49
  <h1 class="text-xl">Install:</h1>
37
50
  <pre
38
- class="mb-2"><code class="language-html">&lt;script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"&gt;&lt;/script&gt;</code></pre>
51
+ class="mb-2 code-container"><code class="language-markup wrap">&lt;script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"&gt;&lt;/script&gt;</code></pre>
39
52
 
40
53
  This extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
41
54
  href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
42
- <pre class="mb-2"><code class="language-html">&lt;!DOCTYPE html&gt;
55
+ <pre class="mb-2 code-container"><code class="language-markup">&lt;!DOCTYPE html&gt;
43
56
  &lt;html&gt;
44
57
  &lt;head&gt;
45
58
  &lt;script src="https://unpkg.com/htmx.org@1.9.12"&gt;
46
59
  &lt;link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet" /&gt;
47
60
  &lt;script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"&gt;
48
- &lt;script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"/&gt;
61
+ &lt;script src="https://cdn.jsdelivr.net/gh/KiwiKid/hx-tomselect/hx-tomselect.js"/&gt;
49
62
  &lt;/head&gt;
50
63
  &lt;body&gt;
51
64
  &lt;select hx-ext="tomselect"&gt;
@@ -80,7 +93,7 @@
80
93
  <option value="2">Top Notch</option>
81
94
  <option value="3">Awesome</option>
82
95
  </select>
83
- <pre class="mb-2"><code class="language-html">&lt;select hx-ext="tomselect" ts-create="true"&gt;
96
+ <pre class="mb-2"><code class="language-markup">&lt;select hx-ext="tomselect" ts-create="true"&gt;
84
97
  &lt;option value=""&gt;Select an option&lt;/option&gt;
85
98
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
86
99
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
@@ -98,7 +111,7 @@
98
111
  <option value="2">Top Notch</option>
99
112
  <option value="3">Awesome</option>
100
113
  </select>
101
- <pre class="mb-2"><code class="language-html">&lt;select hx-ext="tomselect" multiple&gt;
114
+ <pre class="mb-2"><code class="language-markup">&lt;select hx-ext="tomselect" multiple&gt;
102
115
  &lt;option value=""&gt;Select an option&lt;/option&gt;
103
116
  &lt;option value="1"&gt;Option 1&lt;/option&gt;
104
117
  &lt;option value="2"&gt;Option 2&lt;/option&gt;
@@ -111,20 +124,20 @@
111
124
 
112
125
  <section class="mb-20">
113
126
  <h2 class="text-xl font-semibold mb-3">Delete</h2>
114
- <p class="p-4">(ts-remove-button-title also takes an custom string message)</p>
127
+ <p class="p-4">(max 3 selections, takes an custom string message)</p>
115
128
  <select hx-ext="tomselect" ts-max-items="3" ts-remove-button-title="true" multiple>
116
129
  <option value="">N/A</option>
117
130
  <option selected value="1">Option 1</option>
118
131
  <option selected value="2">Option 2</option>
119
- <option selected value="3">Option 3</option>
120
- <option selected value="4">Option 4</option>
121
- <option selected value="5">Option 5</option>
132
+ <option value="3">Option 3</option>
133
+ <option value="4">Option 4</option>
134
+ <option value="5">Option 5</option>
122
135
  <option value="6">Option 6</option>
123
136
  <option value="7">Option 7</option>
124
137
  <option value="8">Option 8</option>
125
138
  <option value="9">Option 9</option>
126
139
  </select>
127
- <pre class="mb-2"><code class="language-html">&lt;select
140
+ <pre class="mb-2"><code class="language-markup">&lt;select
128
141
  hx-ext="tomselect"
129
142
  ts-max-items="3"
130
143
  ts-remove-button-title="true"
@@ -152,7 +165,7 @@
152
165
  <option value="8">Option 8</option>
153
166
  <option value="9">Option 9</option>
154
167
  </select>
155
- <pre class="mb-2 text-md"><code class="language-html">&lt;select
168
+ <pre class="mb-2 text-md"><code class="language-markup">&lt;select
156
169
  hx-ext="tomselect"
157
170
  ts-item-class="text-3xl py-3"
158
171
  ts-option-class="text-3xl w-full py-3 bg-red-100"
@@ -170,53 +183,206 @@
170
183
  <section class="mb-20">
171
184
  <h2 class="text-xl font-semibold mb-3">Configure:</h2>
172
185
  <p class="p-4">Config Options are prefixed with a `ts-` and generally match <a
173
- href="https://tom-select.js.org/docs/" class="underline">TomSelect config options:</a>
174
- <script>
175
- document.addEventListener('DOMContentLoaded', function () {
176
- var attributeConfigs = window.hxTomSelectAttributeConfigOptions;
177
- var configString = '', betaConfigString = '';
178
-
179
- if (attributeConfigs && Array.isArray(attributeConfigs)) {
180
- attributeConfigs.filter((ac) => !ac?._isBeta).forEach(function (config) {
181
- var strToAdd = ""
186
+ href="https://tom-select.js.org/docs/" class="underline">TomSelect config options</a>
187
+ The full list is
188
+ <a href="https://github.com/KiwiKid/hx-tomselect/blob/5e4f884966f13184ac2908bba0c6a97d8d279f95/hx-tomselect.js#L47"
189
+ class="underline">here</a>
182
190
 
183
- switch (typeof config.configChange) {
184
- case 'string': {
185
- strToAdd = `${config.key} - "${config.configChange}"\n${config?._description ? `${config?._description}\n` : ''} ` + '\n\n';
186
- break
187
- }
188
- case 'function': /*{
189
- configString += `${config.key}\n${config?._description ? `${config?._description}\n` : ''}[custom-js-function]:\n\t\t${config.configChange} ` + '\n\n';
190
- break
191
- }*/
192
- default:
193
- case 'object': {
194
- strToAdd = `${config.key}\n${config?._description ? `${config?._description}\n` : ''}${JSON.stringify(config, null, 2)}` + '\n\n';
195
- break
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
196
213
  }
197
214
  }
198
- if (config._isBeta) {
199
- betaConfigString += strToAdd
200
- } else {
201
- configString += strToAdd
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();
202
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
+ }
203
292
 
204
- });
205
-
206
- configString = configString += "\n"
207
-
208
- document.getElementById('attributeConfigsOutput').textContent = configString;
209
- document.getElementById('betaAttributeConfigsOutput').textContent = betaConfigString;
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);
210
379
  }
211
380
  });
212
381
  </script>
213
- <pre><code class="language-html" id="attributeConfigsOutput">
382
+ <!-- <pre><code class="language-markdown" id="attributeConfigsOutput">
214
383
 
215
- </code></pre>
384
+ </code></pre>-->
216
385
 
217
- <pre><code class="language-html" id="betaAttributeConfigsOutput">
218
-
219
- </code></pre>
220
386
  </p>
221
387
  <p class="p-4">If a non-valid key
222
388
  is
@@ -226,46 +392,9 @@
226
392
  the &lt;select&gt; tag
227
393
  </p>
228
394
  <p class="p-4">After processing, one of three attributes will be added to each select box:</p>
229
- OLD
230
- <pre><code>
231
- &lt;select ts-create="true"&gt; - allow item create&lt;/select&gt;
232
-
233
- &lt;select ts-max-items="10"&gt; - (default 1) only allow selection of this many options&lt;/select&gt;
234
- &lt;!-- (ensure the select tag has the 'multiple' attribute) --&gt
235
-
236
- &lt;select ts-max-options="3"&gt; - the max number of options to display&lt;/select&gt;
237
-
238
- &lt;select ts-remove-button-title="Remove this"&gt; - add a remove button with this hover text&lt;/select&gt;
239
-
240
- &lt;select ts-delete-confirm="Are you sure?"&gt; - after deleting item confirm with a message ('true' or message to confirm)&lt;/select&gt;
241
-
242
- &lt;select ts-create-filter="true"&gt; - add a regex on the add items (or 'true' for no commas)&lt;/select&gt;
243
-
244
- &lt;select ts-allow-empty-options="true"&gt;&lt;/select&gt;
245
-
246
- &lt;select ts-sort="field"&gt; - sets config.sortField.field &lt;/select&gt;
247
-
248
- &lt;select ts-sort-direction="asc"&gt; - sets config.sortField.direction &lt;/select&gt;
249
-
250
- &lt;select ts-raw-config="{JsonConfig}"&gt; - use raw tom-select config&lt;/select&gt;
251
-
252
- &lt;!-- Non-standard config options --&gt;
253
- &lt;select ts-debug="true"&gt; - (wip) debug logging (may remove)&gt;&lt;/select&gt;
254
-
255
- &lt;select ts-add-post-url="[ts-add-post-url]"&gt; - after input of a new item, make a POST request to this url&lt;/select&gt;
256
- &lt;select ts-add-post-url-body-value="[name-in-body]"&gt; - when making a POST request, use this [body-value] as the name in the body of the request&lt;/select&gt;
257
-
258
- The request will similar to:
259
- POST [ts-add-post-url]
260
- {
261
- [ts-add-post-url-body-value]: value
262
- }
263
-
264
- &lt;select ts-clear-after-add="true"&gt; - clear the search input after adding an item&lt;/select&gt;
265
- </code></pre>
266
- <pre><code class="language-html">- &lt;select tom-select-success="true"&gt;
267
- - &lt;select tom-select-warning="[warning details]"&gt; - non-breaking error (e.g. tag name is not recognised)
268
- - &lt;select tom-select-error="[error details]"&gt; - Breaking error</code></pre>
395
+ <pre><code class="language-markup"><span class="text-sm">- &lt;select tom-select-success="true"&gt;
396
+ - &lt;select tom-select-warning="could not find tag 'example'"&gt; - non-breaking error (e.g. tag name is not recognised)
397
+ - &lt;select tom-select-error="TomSelect was not found"&gt; - Breaking error</span></code></pre>
269
398
 
270
399
 
271
400
 
@@ -274,14 +403,14 @@
274
403
 
275
404
  <section class="mb-20">
276
405
 
277
- <p class="p-4">hx-oob swaps works too (and was the main motivation for writing this extention)</code></p>
406
+ <p class="p-4">hx-oob swaps works too</code></p>
278
407
  <button type="button" hx-get="another-place.html" hx-trigger="click" hx-swap="outerHTML"
279
408
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
280
409
  (Click to dynamically load options)
281
410
  </button>
282
411
  <div id="holder"></div>
283
412
  <div id="source-holder">
284
- <pre class="mb-2"><code class="language-html">&lt;button
413
+ <pre class="mb-2"><code class="language-markup">&lt;button
285
414
  hx-get="another-place.html"
286
415
  hx-trigger="click"
287
416
  &gt;(Click to dynamically load options)&lt;/button&gt;</code></pre>
@@ -298,7 +427,7 @@
298
427
  <option value="2" selected>Item 2</option>
299
428
  <option value="3" selected>Item 3</option>
300
429
  </select>
301
- <pre><code class="language-html">&lt;select
430
+ <pre><code class="language-markup">&lt;select
302
431
  hx-ext="tomselect"
303
432
  ts-remove-button-title="This DELETES THE ITEM!!"
304
433
  ts-delete-confirm="ARE YOU SURE!?!"
@@ -315,7 +444,8 @@
315
444
 
316
445
  <section class="mb-20">
317
446
  <h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
318
- <p>Allow creating new items + ts-create-filter="true" will prevent commas in the title, any other string
447
+ <p>Allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title,
448
+ any other string
319
449
  will be used as a regex match</p>
320
450
  <select hx-ext="tomselect" ts-create="true" ts-max-items="10" ts-create-filter="^[^,]*$">
321
451
  <option value="">Select</option>
@@ -333,7 +463,7 @@
333
463
 
334
464
  <section class="mb-20">
335
465
  <h2 class="text-xl font-semibold mb-3">Create + POST request</h2>
336
- <p>(type to add a new option and see the network tab)</p>
466
+ <p>type to add a new option > Click 'Add [New Item]' > see the network tab for POST request</p>
337
467
  <select id="select-fine" hx-ext="tomselect" ts-create="true" ts-create-filter="true"
338
468
  ts-add-post-url="/this-could-be-your-new-thing-api" ts-persist="true" multiple
339
469
  placeholder="Add options(s)..." class="border border-gray-300 rounded-md text-gray-700 flex-grow mb-2">
@@ -342,7 +472,7 @@
342
472
  <option value="2">Option 2</option>
343
473
  <option value="3">Option 3</option>
344
474
  </select>
345
- <pre><code class="language-html">&lt;select
475
+ <pre><code class="language-markup">&lt;select
346
476
  hx-ext="tomselect"
347
477
  ts-create-filter="true"
348
478
  ts-no-active="true"
@@ -357,20 +487,6 @@
357
487
  &lt;/select&gt;
358
488
  </code></pre>
359
489
  </section>
360
-
361
- <section class="mb-20">
362
- <h2 class="text-xl font-semibold mb-3">Advanced Configuration with Raw Config</h2>
363
- <select hx-ext="tomselect"
364
- ts-raw-config='{"create": true, "maxOptions":10, "plugins": {"dropdown_input": {}}}'>
365
- <option value="">Select</option>
366
- <option value="1">Option 1</option>
367
- <option value="2">Option 2</option>
368
- <option value="3">Option 3</option>
369
- </select>
370
- </section>
371
-
372
-
373
-
374
490
  </div>
375
491
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
376
492
  </body>
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "hx-tomselect",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Provides a hx-ext=\"tomselect\" htmx extention tag",
5
- "main": "hx-tom-select.js",
5
+ "main": "hx-tomselect.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
8
8
  },