hx-tomselect 1.0.6 → 1.0.12

package/README.md

@@ -2,8 +2,13 @@
 
 Provides a hx-ext="tomselect" htmx extention tag
 
+<a href="https://lassebomh.github.io/htmx-playground/?url=https%253A%252F%252Fraw.githubusercontent.com%252FKiwiKid%252Fhx-tomselect%252Fmain%252Fplayground%252Fbasic.json">Playground</a>
+
+
 <a href="https://kiwikid.github.io/hx-tomselect/">Full Examples List</a>
 
+
+
 ### Install
 ```html
 <script src="https://cdn.jsdelivr.net/npm/hx-tomselect@latest/hx-tomselect.js"></script>

package/hx-tomselect.js

@@ -1,6 +1,6 @@
 (function() {   
     /** stable build*/
-    const version = '10'
+    const version = '11'
 
     /**
      * @typedef {Object} SupportedAttribute
@@ -252,6 +252,7 @@
             
             let config = {
                 maxItems: 999,
+                multiple: true,
                 plugins: {}
             };
 
@@ -286,7 +287,7 @@
             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}`);
+        s.setAttribute('hx-tom-select-version', `hx_ts-${ts.version}`);
 
     } catch (err) {
         s.setAttribute('tom-select-error', JSON.stringify(err));

package/index.html

@@ -21,6 +21,7 @@
 
         gtag('config', 'G-QNEWNK6T05');
     </script>
+    <meta name="google-site-verification" content="sxjVvIPkcjCaInV5YUF01yosZnRtagwGreWlnLQ4MlE" />
 
 </head>
 
@@ -44,17 +45,22 @@
             }
         </style>
         <p class="p-4 text-xl mb-10">
-            <a class="underline" href="https://unpkg.com/hx-tomselect@latest/hx-tomselect.js">hx-tomselect</a> - a <a
+            <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">
+            <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>
+
+        </section>
+
         <section class="mb-20">
             <h1 class="text-xl">Install:</h1>
 
             <pre
                 class="mb-2 code-container"><code class="language-markup wrap">&lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.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"
+            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-container"><code class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -87,7 +93,7 @@
 
         <section class="mb-20">
             <h2 class="text-xl font-semibold mb-3">Input</h2>
-            <p class="p-4">Allow creating new items and selecting multiple items</p>
+            <p class="p-4">allow creating new items and selecting multiple items</p>
 
             <select hx-ext="tomselect" ts-create="true" ts-create-on-blur="true" ts-max-items="10" ts-remove-button-title="true" multiple
                 class="block w-full mb-2">
@@ -102,10 +108,16 @@
   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;option value="3"&gt;Option 3&lt;/option&gt;
+    &lt;option value=""&gt;N/A&lt;/option&gt;
+    &lt;option selected value="1"&gt;Option 1&lt;/option&gt;
+    &lt;option selected value="2"&gt;Option 2&lt;/option&gt;
+    &lt;option selected value="3"&gt;Option 3&lt;/option&gt;
+    &lt;option selected value="4"&gt;Option 4&lt;/option&gt;
+    &lt;option selected value="5"&gt;Option 5&lt;/option&gt;
+    &lt;option value="6"&gt;Option 6&lt;/option&gt;
+    &lt;option value="7"&gt;Option 7&lt;/option&gt;
+    &lt;option value="8"&gt;Option 8&lt;/option&gt;
+    &lt;option value="9"&gt;Option 9&lt;/option&gt;
 &lt;/select&gt;</code></pre>
         </section>
 
@@ -180,7 +192,7 @@
         </section>
         <section class="mb-20">
             <h2 class="text-xl font-semibold mb-3">Create + Regex new item names</h2>
-            <p>Allow creating new items - try typing below - ts-create-filter="true" will prevent commas in the title,
+            <p>allow creating new items - try typing below - 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="^[^,]*$">

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "hx-tomselect",
-  "version": "1.0.6",
+  "version": "1.0.12",
   "description": "Provides a hx-ext=\"tomselect\" htmx extention tag",
   "main": "hx-tomselect.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiwiKid/hx-tomselect.git"