hx-tomselect 1.0.0

package/.github/deploy.yml

@@ -0,0 +1,19 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./

package/README.md

@@ -0,0 +1,63 @@
+# hx-tomselect
+
+Provides a hx-ext="tomselect" htmx extention tag
+
+[create a github pr/issue if you see any bugs/feature opportunities]
+
+
+<a href="https://kiwikid.github.io/hx-tomselect/">Full Examples List</a>
+
+### Install
+```html
+<script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"></script>
+```
+
+
+(Include htmx and tom-select before the extention)
+```html
+<script src="https://unpkg.com/htmx.org"></script>
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet"/>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
+<script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"></script>
+```
+
+
+
+### Example Usage:
+```html
+<select hx-ext="tomselect" ts-max-options="20" ts-remove-button-title="Remove this player" multiple>
+ <option value="">N/A</option>
+ <option value="1">Option 1</option>
+ <option value="2">Option 2</option>
+</select>
+```
+
+Config Options are prefixed with a `ts-` and generally match TomSelect config options. If a non-valid key is found on an element a warning will be issued
+
+After processing, one of three attributes will be added to each select box:
+
+- tom-select-success - Tom Select was launch succesfully
+- tom-select-warning - non-breaking error (e.g. tag name is no recognised)
+- tom-select-error - Breaking error - (i.e. invalid TomConfig json in ts-raw-config)
+
+hx-oob swaps works too (and was the main motivation for writing this extention)
+
+Check the code for details how how each attribute works
+
+```html
+<div id="select-oob"> </div>
+```
+
+```html
+<div hx-swap-oob="true" id="select-oob"> 
+ <select hx-ext="tomselect" name="inputName">
+   <option value="">N/A</option>
+   <option value = "1">Option 1</option>
+   <option value = "2">Option 2</option>
+</select>
+</div>
+```
+
+
+
+<a href="https://kiwikid.github.io/hx-tomselect/">Full Examples List</a>

package/another-place.html

@@ -0,0 +1,35 @@
+<div class="mb-10 bg-gray-900">
+    <label>[i came from somewhere else]
+        <select hx-ext="tomselect" ts-clear-after-add="true">
+            <option selected value="1">
+                Remote Option 1
+            </option selected>
+            <option selected value="2">
+                Remote Option 2
+            </option>
+            <option selected value="3">
+                Remote Option 3
+            </option>
+        </select>
+    </label>
+</div>
+<pre class="mb-10 language-html" hx-swap-oob="true" id="source-holder"><code  class="language-html">&lt;select 
+hx-ext="tomselect" 
+max-options="3" 
+remove-button-title="Remove this item" 
+multiple 
+&gt;
+    &lt;option value=""&gt;N/A&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option 3&lt;/option&gt;
+&lt;/select&gt;</code>
+    
+    </pre>
+<pre class="mb-10">
+
+<code>&lt;button 
+        hx-get="another-place.html"
+        hx-trigger="click"
+    &gt;
+                &lt;/button&gt;</code></pre>

package/hx-tom-select.js

@@ -0,0 +1,328 @@
+(function() {   
+    /** stable build*/
+    const version = '06'
+
+    /**
+     * @typedef {Object} SupportedAttribute
+     * Defines an attribute supported by a configuration modification system.
+     * @property {string} key - The key of the configuration attribute to modify.
+     * @property {ConfigChange} configChange - The modifications to apply to the TomSelect configuration.
+     */
+
+    /**
+     * @typedef {'simple' | 'callback'} AttributeType
+     */
+
+      /**
+     * @typedef {function(HTMLElement, Object):void} CallbackFunction
+     * Description of what the callback does and its parameters.
+     * @param {string} a - The first number parameter.
+     
+     */
+      /**
+     * @typedef {Object} AttributeConfig
+     * Defines an attribute supported by a configuration modification system.
+     * @property {string} key - The key of the configuration attribute to modify.
+     * @property {string} _description
+     * @property {ConfidenceLevel} _isBeta
+     * @property {CallbackFunction|string|null} configChange - The modifications to apply to the TomSelect configuration.
+     * 
+     */
+
+
+
+    /**
+     * @type {SupportedAttribute[]}
+     */
+
+    /**
+     * @typedef {'ts-max-items' | 'ts-max-options' | 'ts-create' | 'ts-sort' | 'ts-sort-direction' | 'ts-allow-empty-option', 'ts-clear-after-add', 'ts-raw-config', 'ts-create-on-blur', 'ts-no-delete'} TomSelectConfigKey
+     * Defines the valid keys for configuration options in TomSelect.
+     * Each key is a string literal corresponding to a specific property that can be configured in TomSelect.
+     */
+
+    /**
+     * @type {Array<AttributeConfig>}
+     */
+    const attributeConfigs = [
+        {
+            key: 'ts-create',
+            configChange: 'create',
+            _description: 'Allow creating new items'
+        },{
+            key: 'ts-create-on-blur',
+            configChange: 'createOnBlur'
+        },{
+            key: 'ts-create-filter',
+            configChange:  (elm, config) => ({
+                createFilter: function(input) {
+                    try {
+                        const filter = elm.getAttribute('ts-create-filter')
+                        const matchEx = filter == "true" ? /^[^,]*$/ : elm.getAttribute('ts-create-filter')
+                        var match = input.match(matchEx); // Example filter: disallow commas in input
+                        if(match) return !this.options.hasOwnProperty(input);
+                        elm.setAttribute('tom-select-warning', JSON.stringify(err));
+                        return false;
+                    } catch (err) {
+                        return false
+                    }
+                }
+            })
+        },{
+            key: 'ts-delimiter',
+            configChange: 'delimiter'
+        },{
+            key: 'ts-highlight',
+            configChange: 'highlight'
+        },{
+            key: 'ts-multiple',
+            configChange: 'multiple'
+        },{
+            key: 'ts-persist',
+            configChange: 'persist'
+        },{
+            key: 'ts-open-on-focus',
+            configChange: 'openOnFocus'
+        },{
+            key: 'ts-max-items',
+            configChange: 'maxItems'
+        },{
+            key: 'ts-hide-selected',
+            configChange: 'hideSelected'
+        },{
+            key: 'tx-close-after-select',
+            configChange: 'closeAfterSelect'
+        },{
+            key: 'tx-duplicates',
+            configChange: 'duplicates'
+        },
+        {
+            key: 'ts-max-options',
+            configChange: 'maxOptions'
+        },{
+            key: 'ts-sort',
+            configChange: (elm, config) => ({
+                sortField: {
+                    field: elm.getAttribute('ts-sort'),
+                },
+            })
+        },{
+            key: 'ts-sort-direction',
+            configChange: (elm, config) => ({
+                sortField: {
+                    direction: elm.getAttribute('ts-sort-direction') ?? 'asc'
+                },
+            })
+        },{
+            key: 'ts-allow-empty-option',
+            type: 'simple',
+            configChange: 'allowEmptyOption'
+        },{
+            key: 'ts-clear-after-add',
+            configChange: {
+                create: true,
+                onItemAdd: function() {
+                    this.setTextboxValue('');
+               //     this.refreshOptions();
+                }
+            }
+        },{
+            key: 'ts-remove-button-title',
+            configChange: (elm, config) => deepAssign(config,{
+                plugins: {
+                    remove_button: {
+                        title: elm.getAttribute('ts-remove-button-title') == 'true' ? 'Remove this item' : elm.getAttribute('ts-remove-button-title')
+                    }
+                },
+            })
+        },{
+            key: 'ts-delete-confirm',
+            configChange: (elm, config) => ({
+                onDelete: function(values) {
+                    if(elm.getAttribute('ts-delete-confirm') == "true"){
+                        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] + '"?');
+                    }else {
+                        return confirm(elm.getAttribute('ts-delete-confirm'));
+                    }
+                    
+                }
+            })
+        },{
+            key: 'ts-add-post-url',
+            configChange: (elm, config) => ({
+                    onOptionAdd: function(value, item) {
+                        this.lock();
+                        const valueKeyName = elm.getAttribute('ts-add-post-url-body-value') ?? 'value'
+                        const body = {}
+                        body[valueKeyName] = value
+                        fetch(elm.getAttribute('ts-add-post-url'), {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify(body),
+                        })
+						.then((res) => {
+							if (!res.ok) {
+								throw new Error(`HTTP status ${res.status}`);
+							}
+							return res.text();
+						})
+                        .then((responseHtml) => htmx.process(elm, responseHtml))
+                        .catch(error => {
+                            console.error('Error adding item', error)
+                            elm.setAttribute('tom-select-warning', `ts-add-post-url - Error processing item: ${JSON.stringify(error)}`);
+                            this.removeItem(value);
+                        })
+                        .finally(() => {
+                            this.unlock();
+                        });
+                }
+            }),
+            _isBeta: true,
+        },{
+            key: 'ts-add-post-url-body-value',
+            configChange: '',
+            _isBeta: true,
+        },
+        {
+            key: 'ts-no-active',
+            configChange: {
+                plugins: ['no_active_items'],
+                persist: false,
+                create: true
+            }
+        },{
+            key: 'ts-remove-selector-on-select',
+            type: 'simple',
+            configChange: null
+        },{
+            key: 'ts-no-delete',
+            configChange: {
+                onDelete: () => { return false},
+            }
+        },{
+            key: 'ts-option-class',
+            configChange: 'optionClass'
+        },{
+            key: 'ts-option-class-ext',
+            configChange: (elm, config) => ({
+                'optionClass': `${elm.getAttribute('ts-option-class-ext')} option`
+            })
+        },{
+            key: 'ts-item-class',
+            configChange: 'itemClass'
+        },{
+            key: 'ts-item-class-ext',
+            configChange:(elm, config) => ({
+                key: 'ts-option-class-ext',
+                configChange: {
+                    'itemClass': `${elm.getAttribute('ts-option-class-ext')} item`
+                }
+            })
+        },
+        {
+            key: 'ts-raw-config',
+            configChange: (elm, config) => elm.getAttribute('ts-raw-config')
+        }
+    ]
+
+    /**
+     * Deeply assigns properties to an object, merging any existing nested properties.
+     * 
+     * @param {Object} target The target object to which properties will be assigned.
+     * @param {Object} updates The updates to apply. This object can contain deeply nested properties.
+     * @returns {Object} The updated target object.
+     */
+    function deepAssign(target, updates) {
+        Object.keys(updates).forEach(key => {
+            if (typeof updates[key] === 'object' && updates[key] !== null && !Array.isArray(updates[key])) {
+                if (!target[key]) target[key] = {};
+                deepAssign(target[key], updates[key]);
+            } else {
+                target[key] = updates[key];
+            }
+        });
+        return target;
+    }
+
+    function attachTomSelect(s){
+        try {
+            if(s.attributes?.length == 0){
+                throw new Error("no attributes on select?")
+            }
+            
+            let config = {
+                maxItems: 999,
+                plugins: {}
+            };
+            const debug = s.getAttribute('hx-ext')?.split(',').map(item => item.trim()).includes('debug');
+            if (debug) { console.log(s.attributes) }
+
+            Array.from(s.attributes).forEach((a) => {
+                const attributeConfig = attributeConfigs.find((ac) => ac.key == a.name)
+                if (attributeConfig != null){
+                    let configChange = {}
+                    if(typeof attributeConfig.configChange == 'string'){
+                        configChange[attributeConfig.configChange] = a.value
+                    }else if(typeof attributeConfig.configChange == 'function'){
+                        configChange = attributeConfig.configChange(s, config)
+                    }else if(typeof attributeConfig.configChange == 'object'){
+                        configChange = attributeConfig.configChange
+                    }else if(a.name.startsWith('ts-')) {
+                        s.setAttribute('tom-select-warning', `Invalid config key found: ${attr.name}`);
+                        console.warn(`Could not find config match:${JSON.stringify(attributeConfig)}`)
+                    }
+                
+                    deepAssign(config, configChange)
+                }else if(a.name.startsWith('ts-')){
+                    console.warn(`Invalid config key found: ${a.name}`);
+                    s.setAttribute(`tom-select-warning_${a.name}`, `Invalid config key found`);
+                }
+            })
+
+        if (debug) {  console.info('hx-tomselect - tom-select-success - config', config) }
+        const ts = new TomSelect(s, config);
+        s.setAttribute('tom-select-success', `success`);
+        s.setAttribute('hx-tom-select-version', `hx-ts-${version}_ts-${ts.version}`);
+
+    } catch (err) {
+        s.setAttribute('tom-select-error', JSON.stringify(err));
+        console.error(`htmx-tomselect - Failed to load hx-tomsselect ${err}`);
+    }
+    }
+
+    htmx.defineExtension('tomselect', {
+        // This is doing all the tom-select attachment at this stage, but relies on this full document scan (would prefer onLoad of speicfic content):
+        onEvent: function (name, evt) {
+            if (name === "htmx:afterProcessNode") {
+                const newSelects = document.querySelectorAll('select[hx-ext*="tomselect"]:not([tom-select-success]):not([tom-select-error])')
+                newSelects.forEach((s) => {
+                    attachTomSelect(s)
+                })
+            }
+        },
+        onLoad: function (content) {
+            console.log('onLoad')
+                    const newSelects = content.querySelectorAll('select[hx-ext*="tomselect"]:not([tom-select-success]):not([tom-select-error])')
+                    newSelects.forEach((s) => {
+                        attachTomSelect(s)
+                    })
+
+            // When the DOM changes, this block ensures TomSelect will reflect the current html state (i.e. new <option selected></option> will be respected)
+            // Still evaulating the need of this
+             /*   const selectors = document.querySelectorAll('select[hx-ext*="tomselect"]')
+            selectors.forEach((s) => {
+                console.log('SYNC RAN')
+                s.tomselect.clear();
+                s.tomselect.clearOptions();
+                s.tomselect.sync(); 
+            })
+        },
+		beforeHistorySave: function(){
+			document.querySelectorAll('select[hx-ext*="tomselect"]')
+            	.forEach(elt => elt.tomselect.destroy())*/
+		}
+    });
+
+})();

package/index.html

@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>hx-tomselect</title>
+    <script src="https://unpkg.com/htmx.org"></script>
+    <link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
+    <script defer src="./hx-tom-select.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css" />
+    <link href="./prism-holi-theme.css" rel="stylesheet" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-S2BDGEP73W"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-S2BDGEP73W');
+    </script>
+
+</head>
+
+<body class="bg-gray-900 text-white  p-10">
+    <div class=" max-w-4xl mx-auto">
+
+        <p class="p-4 text-xl mb-10">
+            <a class="underline" href="https://github.com/kiwiKid/hx-tomselect">hx-tomselect</a> - a <a
+                class="underline" href="https://v1.htmx.org/docs/#extensions" target="_">htmx extention</a> for <a
+                class="underline" href="https://tom-select.js.org/">tom-select.js</a>
+        </p>
+        <section class="mb-20">
+            <h1 class="text-xl">Install:</h1>
+            <pre
+                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>
+
+            This extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
+                href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
+            <pre class="mb-2"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;script src="https://unpkg.com/htmx.org@1.9.12"&gt;
+        &lt;link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet" /&gt;
+        &lt;script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"&gt;
+        &lt;script src="https://kiwikid.github.io/hx-tomselect/hx-tom-select.js"/&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;select hx-ext="tomselect"&gt;
+            &lt;option value=""&gt;Select an option&lt;/option&gt;
+            &lt;option value="1"&gt;Option 1&lt;/option&gt;
+            &lt;option value="2"&gt;Option 2&lt;/option&gt;
+            &lt;option value="3"&gt;Option 3&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
+                    </code></pre>
+        </section>
+        <h1 class="mb-2 text-xl">Demo:</h1>
+        <section class="mb-20">
+            <select hx-ext="tomselect,debug" class="block w-full mb-2">
+                <option value="">Select</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+        </section>
+        <p>(Not really interested in publishing on npm, can on request)</p>
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Input</h2>
+            <p class="p-4">Allow creating new items</p>
+
+            <select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10"
+                class="block w-full mb-2">
+                <option value="">Brilliant</option>
+                <option value="1">Excellent</option>
+                <option value="2">Top Notch</option>
+                <option value="3">Awesome</option>
+            </select>
+            <pre class="mb-2"><code class="language-html">&lt;select hx-ext="tomselect" ts-create="true"&gt;
+    &lt;option value=""&gt;Select an option&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option 3&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+        </section>
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Select</h2>
+            <p class="p-4">Allow selecting multiple items</p>
+
+            <select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" class="block w-full mb-2">
+                <option value="">Brilliant</option>
+                <option value="1">Excellent</option>
+                <option value="2">Top Notch</option>
+                <option value="3">Awesome</option>
+            </select>
+            <pre class="mb-2"><code class="language-html">&lt;select hx-ext="tomselect" multiple&gt;
+    &lt;option value=""&gt;Select an option&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option 3&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+        </section>
+
+
+
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Delete</h2>
+            <p class="p-4">(ts-remove-button-title also takes an custom string message)</p>
+            <select hx-ext="tomselect" ts-max-items="3" ts-remove-button-title="true" multiple>
+                <option value="">N/A</option>
+                <option selected value="1">Option 1</option>
+                <option selected value="2">Option 2</option>
+                <option selected value="3">Option 3</option>
+                <option selected value="4">Option 4</option>
+                <option selected value="5">Option 5</option>
+                <option value="6">Option 6</option>
+                <option value="7">Option 7</option>
+                <option value="8">Option 8</option>
+                <option value="9">Option 9</option>
+            </select>
+            <pre class="mb-2"><code class="language-html">&lt;select
+    hx-ext="tomselect" 
+    ts-max-items="3"
+    ts-remove-button-title="true"
+    multiple
+&gt;
+    &lt;option value=""&gt;Select an option&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    ...
+&lt;/select&gt;</code></pre>
+        </section>
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3 text-2xl">Customisable</h2>
+            <select class="text-3xl" hx-ext="tomselect" ts-item-class="text-3xl  py-3"
+                ts-option-class="text-3xl w-full py-3 bg-green-100" multiple>
+                <option value="">N/A</option>
+                <option selected value="1">Option 1</option>
+                <option selected value="2">Option 2</option>
+                <option selected value="3">Option 3</option>
+                <option selected value="4">Option 4</option>
+                <option selected value="5">Option 5</option>
+                <option value="6">Option 6</option>
+                <option value="7">Option 7</option>
+                <option value="8">Option 8</option>
+                <option value="9">Option 9</option>
+            </select>
+            <pre class="mb-2 text-md"><code class="language-html">&lt;select
+    hx-ext="tomselect" 
+    ts-item-class="text-3xl py-3"
+    ts-option-class="text-3xl w-full py-3 bg-red-100"
+    ts-item-class="text-3xl py-3"
+    multiple
+&gt;
+    &lt;option value=""&gt;Select an option&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    ...
+&lt;/select&gt;</code></pre>
+        </section>
+
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Configure:</h2>
+            <p class="p-4">Config Options are prefixed with a `ts-` and generally match <a
+                    href="https://tom-select.js.org/docs/" class="underline">TomSelect config options:</a>
+                <script>
+                    document.addEventListener('DOMContentLoaded', function () {
+                        var attributeConfigs = window.hxTomSelectAttributeConfigOptions;
+                        var configString = '', betaConfigString = '';
+
+                        if (attributeConfigs && Array.isArray(attributeConfigs)) {
+                            attributeConfigs.filter((ac) => !ac?._isBeta).forEach(function (config) {
+                                var strToAdd = ""
+
+                                switch (typeof config.configChange) {
+                                    case 'string': {
+                                        strToAdd = `${config.key} - "${config.configChange}"\n${config?._description ? `${config?._description}\n` : ''} ` + '\n\n';
+                                        break
+                                    }
+                                    case 'function': /*{
+                                        configString += `${config.key}\n${config?._description ? `${config?._description}\n` : ''}[custom-js-function]:\n\t\t${config.configChange} ` + '\n\n';
+                                        break
+                                    }*/
+                                    default:
+                                    case 'object': {
+                                        strToAdd = `${config.key}\n${config?._description ? `${config?._description}\n` : ''}${JSON.stringify(config, null, 2)}` + '\n\n';
+                                        break
+                                    }
+                                }
+                                if (config._isBeta) {
+                                    betaConfigString += strToAdd
+                                } else {
+                                    configString += strToAdd
+                                }
+
+                            });
+
+                            configString = configString += "\n"
+
+                            document.getElementById('attributeConfigsOutput').textContent = configString;
+                            document.getElementById('betaAttributeConfigsOutput').textContent = betaConfigString;
+                        }
+                    });
+                </script>
+            <pre><code class="language-html" id="attributeConfigsOutput">
+               
+                </code></pre>
+
+            <pre><code class="language-html" id="betaAttributeConfigsOutput">
+               
+                </code></pre>
+            </p>
+            <p class="p-4">If a non-valid key
+                is
+                found on an element a warning will be logged to the console and a `tom-select-warning` attribute
+                added
+                to
+                the &lt;select&gt; tag
+            </p>
+            <p class="p-4">After processing, one of three attributes will be added to each select box:</p>
+            OLD
+            <pre><code>
+                &lt;select ts-create="true"&gt; - allow item create&lt;/select&gt;
+                
+                &lt;select ts-max-items="10"&gt; - (default 1) only allow selection of this many options&lt;/select&gt;
+                &lt;!-- (ensure the select tag has the 'multiple' attribute) --&gt
+                
+                &lt;select ts-max-options="3"&gt; - the max number of options to display&lt;/select&gt;
+                
+                &lt;select ts-remove-button-title="Remove this"&gt; - add a remove button with this hover text&lt;/select&gt;
+                
+                &lt;select ts-delete-confirm="Are you sure?"&gt; - after deleting item confirm with a message ('true' or message to confirm)&lt;/select&gt;
+                
+                &lt;select ts-create-filter="true"&gt; - add a regex on the add items (or 'true' for no commas)&lt;/select&gt;
+                
+                &lt;select ts-allow-empty-options="true"&gt;&lt;/select&gt;
+                
+                &lt;select ts-sort="field"&gt; - sets config.sortField.field &lt;/select&gt;
+                
+                &lt;select ts-sort-direction="asc"&gt; - sets config.sortField.direction &lt;/select&gt;
+                
+                &lt;select ts-raw-config="{JsonConfig}"&gt; - use raw tom-select config&lt;/select&gt;
+                
+                &lt;!--  Non-standard config options --&gt;
+                &lt;select ts-debug="true"&gt; - (wip) debug logging (may remove)&gt;&lt;/select&gt;
+                
+                &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;
+                &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;
+                
+                The request will similar to:
+                POST [ts-add-post-url]
+                {
+                    [ts-add-post-url-body-value]: value
+                }
+                
+                &lt;select ts-clear-after-add="true"&gt; - clear the search input after adding an item&lt;/select&gt;
+                </code></pre>
+            <pre><code class="language-html">- &lt;select tom-select-success="true"&gt;
+- &lt;select tom-select-warning="[warning details]"&gt; - non-breaking error (e.g. tag name is not recognised)
+- &lt;select tom-select-error="[error details]"&gt; - Breaking error</code></pre>
+
+
+
+
+        </section>
+
+        <section class="mb-20">
+
+            <p class="p-4">hx-oob swaps works too (and was the main motivation for writing this extention)</code></p>
+            <button type="button" hx-get="another-place.html" hx-trigger="click" hx-swap="outerHTML"
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+                (Click to dynamically load options)
+            </button>
+            <div id="holder"></div>
+            <div id="source-holder">
+                <pre class="mb-2"><code class="language-html">&lt;button 
+    hx-get="another-place.html"
+    hx-trigger="click"
+&gt;(Click to dynamically load options)&lt;/button&gt;</code></pre>
+            </div>
+        </section>
+
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Configuring Item Deletion Confirmation</h2>
+            <p class="p-4">Supports a custom message or `true` for default text</p>
+            <select hx-ext="tomselect" ts-remove-button-title="This DELETES THE ITEM!!"
+                ts-delete-confirm="ARE YOU SURE!?!" multiple>
+                <option value="1" selected>Item 1</option>
+                <option value="2" selected>Item 2</option>
+                <option value="3" selected>Item 3</option>
+            </select>
+            <pre><code class="language-html">&lt;select 
+    hx-ext="tomselect" 
+    ts-remove-button-title="This DELETES THE ITEM!!"
+    ts-delete-confirm="ARE YOU SURE!?!"
+    multiple
+&gt;
+    &lt;option value="1"&gt;Item 1&lt;/option&gt;
+    &lt;option value="2"&gt;Item 2&lt;/option&gt;
+    &lt;option value="3"&gt;Item 3&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+        </section>
+
+
+
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
+            <p>Allow creating new items + ts-create-filter="true" will prevent commas in the title, any other string
+                will be used as a regex match</p>
+            <select hx-ext="tomselect" ts-create="true" ts-max-items="10" ts-create-filter="^[^,]*$">
+                <option value="">Select</option>
+                <option value="1">ValidOption</option>
+            </select>
+            <pre><code class="language-html-dark">&lt;select 
+    hx-ext="tomselect"
+    ts-max-items="10"
+    ts-create-filter="^[^,]*$"
+&gt;
+    &lt;option value=""&gt;Select an option&lt;/option&gt;
+    &lt;option value="1"&gt;ValidOption&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+        </section>
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Create + POST request</h2>
+            <p>(type to add a new option and see the network tab)</p>
+            <select id="select-fine" hx-ext="tomselect" ts-create="true" ts-create-filter="true"
+                ts-add-post-url="/this-could-be-your-new-thing-api" ts-persist="true" multiple
+                placeholder="Add options(s)..." class="border border-gray-300 rounded-md text-gray-700 flex-grow mb-2">
+                <option value="">Select</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+            <pre><code class="language-html">&lt;select
+    hx-ext="tomselect"
+    ts-create-filter="true"
+    ts-no-active="true"
+    ts-add-post-url="/this-could-be-your-new-thing-api"
+    ts-persist="true"
+    multiple
+&gt;
+    &lt;option value=""&gt;Select&lt;/option&gt;
+    &lt;option value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option 3&lt;/option&gt;
+&lt;/select&gt;
+</code></pre>
+        </section>
+
+        <section class="mb-20">
+            <h2 class="text-xl font-semibold mb-3">Advanced Configuration with Raw Config</h2>
+            <select hx-ext="tomselect"
+                ts-raw-config='{"create": true, "maxOptions":10, "plugins": {"dropdown_input": {}}}'>
+                <option value="">Select</option>
+                <option value="1">Option 1</option>
+                <option value="2">Option 2</option>
+                <option value="3">Option 3</option>
+            </select>
+        </section>
+
+
+
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "hx-tomselect",
+  "version": "1.0.0",
+  "description": "Provides a hx-ext=\"tomselect\" htmx extention tag",
+  "main": "hx-tom-select.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KiwiKid/hx-tomselect.git"
+  },
+  "keywords": [
+    "htmx",
+    "tom-select"
+  ],
+  "author": "Greg C.",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/KiwiKid/hx-tomselect/issues"
+  },
+  "homepage": "https://github.com/KiwiKid/hx-tomselect#readme"
+}

package/prism-holi-theme.css

@@ -0,0 +1,119 @@
+/**
+ * MIT License
+ * Copyright (c) 2021 Ayush Saini
+ * Holi Theme for prism.js
+ * @author Ayush Saini <@AyushCodes on Twitter>
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #d6e7ff;
+	background: #030314;
+	text-shadow: none;
+	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	letter-spacing: .2px;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	text-align: left;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+	color: inherit;
+	background: #1d3b54;
+	text-shadow: none;
+}
+
+pre[class*='language-'] {
+	border: 1px solid #2a4555;
+	border-radius: 5px;
+	padding: 1.5em 1em;
+	margin: 1em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*='language-'] {
+	color: #f0f6f6;
+	background: #2a4555;
+	padding: 0.2em 0.3em;
+	border-radius: 0.2em;
+	box-decoration-break: clone;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #446e69;
+}
+
+.token.punctuation {
+	color: #d6b007;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #d6e7ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.builtin,
+.token.inserted {
+	color: #e60067;
+}
+
+.token.string,
+.token.char {
+	color: #49c6ec;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #ec8e01;
+	background: transparent;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #0fe468;
+}
+
+.token.function,
+.token.class-name {
+	color: #78f3e9;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #d6e7ff;
+}