Merge pull request #69 from DripEmail/release-0.13.1

Release 0.13.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getdrip/much-select-elm",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "A fancy selector web component written (mostly) in elm.",
   "type": "module",
   "module": "dist/much-select.js",

public/attributes.html

@@ -34,10 +34,6 @@
     <include src="example-partials/add-custom-options.html"></include>
   </div>
 
-  <div class="example">
-    <include src="example-partials/add-custom-options.html"></include>
-  </div>
-
   <div class="example">
     <include src="example-partials/an-initial-value.html"></include>
   </div>
@@ -66,6 +62,11 @@
     <include src="example-partials/switch-between-multi-select-and-single-select.html"></include>
   </div>
 
+  <div class="example">
+    <include src="example-partials/switch-between-datalist-and-custom-html.html"></include>
+    <a href="switch-between-datalist-and-custom-html.html">open example on its own page</a>
+  </div>
+
   <div class="example">
     <include src="example-partials/placeholder.html"></include>
   </div>

public/example-partials/datalist-multi-select-value-changed-event.html

@@ -0,0 +1,36 @@
+<div id="datalist-multi-select-value-changed-event">
+  <h3>Datalist Multi Select - <code>valueChanged</code> Event</h3>
+  <much-select output-style="datalist" multi-select>
+    <select slot="select-input">
+      <option>String Beans</option>
+      <option>Lima Beans</option>
+      <option>White Beans</option>
+      <option>Red Beans</option>
+    </select>
+  </much-select>
+
+  <p>
+    Events:
+  </p>
+  <table id="datalist-multi-select-value-changed-event-log">
+    <thead>
+    <tr>
+      <th>Event</th>
+      <th>Details</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+  <script>
+    window.addEventListener("load", () => {
+      document
+        .querySelector("#datalist-multi-select-value-changed-event much-select")
+        .addEventListener(
+          "valueChanged",
+          // eslint-disable-next-line no-undef
+          makeLogEventHandler("datalist-multi-select-value-changed-event-log")
+        );
+    });
+  </script>
+</div>

public/example-partials/datalist-single-select-value-changed-event.html

@@ -0,0 +1,36 @@
+<div id="datalist-single-select-value-changed-event">
+  <h3>Datalist Single Select - <code>valueChanged</code> Event</h3>
+  <much-select output-style="datalist">
+    <select slot="select-input">
+      <option>String Beans</option>
+      <option>Lima Beans</option>
+      <option>White Beans</option>
+      <option>Red Beans</option>
+    </select>
+  </much-select>
+
+  <p>
+    Events:
+  </p>
+  <table id="datalist-single-select-value-changed-event-log">
+    <thead>
+    <tr>
+      <th>Event</th>
+      <th>Details</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+  <script>
+    window.addEventListener("load", () => {
+      document
+        .querySelector("#datalist-single-select-value-changed-event much-select")
+        .addEventListener(
+          "valueChanged",
+          // eslint-disable-next-line no-undef
+          makeLogEventHandler("datalist-single-select-value-changed-event-log")
+        );
+    });
+  </script>
+</div>

public/example-partials/output-style-datalist-multi-select-with-selected-values-json-value-selected.html

@@ -0,0 +1,54 @@
+<div id="datalist-multi-select-selected-values-toggle-selected-values">
+  <h3>Preselected values in a Datalist with Multi Select</h3>
+  <p>Use the selected-values attribute, and have a JSON encode <code>selected-value=</code> attribute.</p>
+
+  <button class="toggle-select" data-toggle-value="The Lone Ranger">Toggle The Lone Ranger</button>
+
+  <button class="toggle-select" data-toggle-value="Vikings">Toggle Vikings</button>
+
+  <button class="toggle-select" data-toggle-value="Lord Business">Toggle Lord Business</button>
+
+  <much-select output-style="datalist" multi-select selected-value-encoding="json" selected-value="%5B%22Pirates%22%2C%22Ultra%20Agents%22%5D">
+    <select slot="select-input">
+      <option>Bionicle</option>
+      <option>Pirates</option>
+      <option>The Lone Ranger</option>
+      <option>Exo-Force</option>
+      <option>Ultra Agents</option>
+      <option>Vikings</option>
+      <option>Elves</option>
+    </select>
+  </much-select>
+
+  <script>
+    const exampleDiv = document.getElementById(
+      "datalist-multi-select-selected-values-toggle-selected-values"
+    );
+    exampleDiv.querySelectorAll(".toggle-select").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        const muchSelect = exampleDiv.querySelector("much-select");
+
+        const valueToToggle = event.target.dataset.toggleValue;
+
+        const selectedValues = muchSelect.parsedSelectedValue;
+
+        let newSelectedValues = selectedValues;
+
+        if (selectedValues.includes(valueToToggle)) {
+          // deselect the value
+          newSelectedValues = selectedValues.filter((v) => v !== valueToToggle);
+        } else {
+          // select the value
+          newSelectedValues = selectedValues.concat([valueToToggle]);
+        }
+
+        const selectedValueEncodedString = encodeURIComponent(
+          JSON.stringify(newSelectedValues)
+        );
+
+        muchSelect.setAttribute("selected-value", selectedValueEncodedString);
+      });
+    });
+  </script>
+
+</div>

public/example-partials/switch-between-datalist-and-custom-html.html

@@ -0,0 +1,27 @@
+<div id="switch-between-datalist-and-custom-html">
+  <h3>Switch between datalist and custom html Output Style</h3>
+  <much-select multi-select="" selected-value="Safari,Firefox" output-style="datalist">
+    <select slot="select-input">
+      <option>Firefox</option>
+      <option>Chrome</option>
+      <option>Safari</option>
+      <option>Edge</option>
+    </select>
+  </much-select>
+
+  <button>Click me to toggle between datalist and custom-html</button>
+  <script>
+    document
+      .querySelector("#switch-between-datalist-and-custom-html button")
+      .addEventListener("click", () => {
+        const muchSelect = document.querySelector(
+          "#switch-between-datalist-and-custom-html much-select"
+        );
+        if (muchSelect.getAttribute("output-style") === "datalist") {
+          muchSelect.setAttribute("output-style", "custom-html");
+        } else {
+          muchSelect.setAttribute("output-style", "datalist");
+        }
+      });
+  </script>
+</div>

public/index.html

@@ -35,6 +35,7 @@
 
   <div class="example">
     <include src="example-partials/option-groups.html"></include>
+    <a href="opion-groups.html">open example on its own page</a>
   </div>
 
   <div class="example">
@@ -71,6 +72,7 @@
 
   <div class="example">
     <include src="example-partials/remote-api-example.html"></include>
+    <a href="remote-api-example.html">open example on its own page</a>
   </div>
 
   <div class="example">

public/opion-groups.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--suppress HtmlFormInputWithoutLabel -->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--suppress HtmlUnknownTarget -->
+  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+  <title>Much Select - Option Groups</title>
+  <link href="demo-styles.css" rel="stylesheet">
+  <script src="./styles.js"></script>
+</head>
+
+<body>
+
+<include src="header.html">
+  {
+  "pageName": "Option Groups"
+  }
+</include>
+
+<include src="nav.html"></include>
+
+<div class="container">
+  <div class="example">
+    <include src="example-partials/option-groups.html"></include>
+  </div>
+</div>
+
+<script src="./index.js" type="module"></script>
+</body>
+</html>

public/output-style-datalist-multi-select-with-selected-values-json-value-selected.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--suppress HtmlFormInputWithoutLabel -->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--suppress HtmlUnknownTarget -->
+  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+  <title>Much Select - Datalist Multi Select with JSON encoding</title>
+  <link href="demo-styles.css" rel="stylesheet">
+  <script src="./styles.js"></script>
+</head>
+
+<body>
+
+<include src="header.html">
+  {
+  "pageName": "Datalist Multi Select with JSON encoding"
+  }
+</include>
+
+<include src="nav.html"></include>
+
+<div class="container">
+  <div class="example">
+    <include src="example-partials/output-style-datalist-multi-select-with-selected-values-json-value-selected.html"></include>
+  </div>
+</div>
+
+<script src="./index.js" type="module"></script>
+</body>
+</html>

public/output-style-datalist.html

@@ -33,6 +33,23 @@
     <include src="example-partials/output-style-datalist-multi-select-with-selected-values.html"></include>
   </div>
 
+  <div class="example">
+    <include src="example-partials/output-style-datalist-multi-select-with-selected-values-json-value-selected.html"></include>
+    <a href="output-style-datalist-multi-select-with-selected-values-json-value-selected.html">open example on it's own page</a>
+  </div>
+
+  <div class="example">
+    <include src="example-partials/switch-between-datalist-and-custom-html.html"></include>
+  </div>
+
+  <div class="example">
+    <include src="example-partials/datalist-single-select-value-changed-event.html"></include>
+  </div>
+
+  <div class="example">
+    <include src="example-partials/datalist-multi-select-value-changed-event.html"></include>
+  </div>
+
 </div>
 
 <script src="./index.js" type="module"></script>

public/remote-api-example.html

@@ -1,10 +1,33 @@
 <!DOCTYPE html>
+<!--suppress HtmlFormInputWithoutLabel -->
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--suppress HtmlUnknownTarget -->
+  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+  <title>Much Select - Remote API Example</title>
+  <link href="demo-styles.css" rel="stylesheet">
+  <script src="./styles.js"></script>
 </head>
+
 <body>
-$END$
+
+<include src="header.html">
+  {
+  "pageName": "Remote API Example"
+  }
+</include>
+
+<include src="nav.html"></include>
+
+<div class="container">
+  <div class="example">
+    <include src="example-partials/remote-api-example.html"></include>
+  </div>
+</div>
+
+<script src="./index.js" type="module"></script>
 </body>
 </html>

public/switch-between-datalist-and-custom-html.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--suppress HtmlFormInputWithoutLabel -->
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--suppress HtmlUnknownTarget -->
+  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+  <title>Much Select - Output Style Switching</title>
+  <link href="demo-styles.css" rel="stylesheet">
+  <script src="./styles.js"></script>
+</head>
+
+<body>
+
+<include src="header.html">
+  {
+  "pageName": "Output Style Switching"
+  }
+</include>
+
+<include src="nav.html"></include>
+
+<div class="container">
+  <div class="example">
+    <include src="example-partials/switch-between-datalist-and-custom-html.html"></include>
+  </div>
+
+</div>
+
+<script src="./index.js" type="module"></script>
+</body>
+</html>