Merge pull request #97 from DripEmail/release-0.18.0

Release 0.18.0

.gitignore

@@ -1,6 +1,9 @@
 # Hot files
 /build
 
+# Sit
+/dist/site
+
 # npm
 /node_modules/
 /npm-debug.log

.tool-versions

@@ -1 +1 @@
-nodejs 16.20.0
+nodejs 18.16.1

dist/much-select-debug.js

@@ -1,13 +1,32 @@
 // noinspection JSFileReferences
 
 // eslint-disable-next-line import/no-unresolved
-import { Elm } from "./much-select-elm-debug.js";
+import { Elm } from "./much-select-elm.js";
 
 // eslint-disable-next-line import/no-unresolved
 import getMuchSelectTemplate from "./much-select-template.js";
 
 import asciiFold from "./ascii-fold.js";
 
+/**
+ * Dasherize a string.
+ * @param str
+ * @returns {string}
+ */
+function dasherize(str) {
+  // Convert CamelCase to spaces
+  const spaced = str.replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  // Replace spaces, underscores, and illegal characters with dashes
+  return spaced.replace(/[^a-zA-Z0-9]+/g, "-").toLowerCase();
+}
+
+/**
+ * Take a select element, and parse the data out of it into an array of objects.
+ *
+ * @param selectElement {Element}
+ * @returns {object[]}
+ */
 const buildOptionsFromSelectElement = (selectElement) => {
   const options = [];
   const optionElements = selectElement.querySelectorAll("option");
@@ -19,8 +38,13 @@ const buildOptionsFromSelectElement = (selectElement) => {
       value = optionElement.innerText;
     }
     const option = { value };
+    if (optionElement.hasAttribute("id")) {
+      option.part = optionElement.getAttribute("id").trim();
+    } else {
+      option.part = dasherize(option.value.trim());
+    }
     option.label = optionElement.innerText.trim();
-    option.labelClean = asciiFold(optionElement.innerText);
+    option.labelClean = asciiFold(optionElement.innerText).trim();
     option.index = optionIndex;
     if (optionElement.hasAttribute("selected")) {
       const optionSelectedValue = optionElement.getAttribute("selected");
@@ -39,6 +63,23 @@ const buildOptionsFromSelectElement = (selectElement) => {
   return options;
 };
 
+/**
+ *
+ * @param optionElements {NodeListOf<Element>}
+ * @returns {object[]}
+ */
+const buildOptionsFromMuchSelectOptionElements = (optionElements) => {
+  const options = [];
+  optionElements.forEach((optionElement, optionIndex) => {
+    const option = {};
+    option.value = optionElement.getAttribute("option-value");
+    option.slot = optionElement.getAttribute("slot");
+    option.index = optionIndex;
+    options.push(option);
+  });
+  return options;
+};
+
 const notNullOrUndefined = (thing) => thing !== null && thing !== undefined;
 
 const stringToOptionObject = (str) => ({
@@ -210,12 +251,6 @@ class MuchSelect extends HTMLElement {
      */
     this._filterWorkerPromise = null;
 
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this._connected = false;
-
     /**
      * Once we see a value change come through, set this to true, then
      * when the much-select blurs, emmit the event and set it to false.
@@ -702,8 +737,6 @@ class MuchSelect extends HTMLElement {
     this.startCustomValidationSlotObserver();
 
     this.startTransformationValidationSlotObserver();
-
-    this._connected = true;
   }
 
   startMuchSelectObserver() {
@@ -867,6 +900,15 @@ class MuchSelect extends HTMLElement {
     if (selectElement) {
       const optionsJson = buildOptionsFromSelectElement(selectElement);
       this._callOptionChanged(optionsJson);
+    } else {
+      const muchSelectOptionElements =
+        this.querySelectorAll("much-select-option");
+      if (muchSelectOptionElements) {
+        const optionsJson = buildOptionsFromMuchSelectOptionElements(
+          muchSelectOptionElements
+        );
+        this._callOptionChanged(optionsJson);
+      }
     }
   }
 
@@ -880,8 +922,6 @@ class MuchSelect extends HTMLElement {
     this.stopCustomValidationSlotObserver();
 
     this.stopTransformationValidationSlotObserver();
-
-    this._connected = false;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -1017,6 +1057,15 @@ class MuchSelect extends HTMLElement {
     }
 
     const selectElement = this.querySelector("select[slot='select-input']");
+    const muchSelectOptionElements =
+      this.querySelectorAll("much-select-option");
+
+    if (selectElement && muchSelectOptionElements.length > 0) {
+      throw new Error(
+        "Much Select does not support mixing the select-input slot and much-select-option elements. To define the options you need to pick one or the other."
+      );
+    }
+
     if (this.hasAttribute("selected-value")) {
       if (selectElement && selectElement.querySelector("option[selected]")) {
         throw new Error(
@@ -1034,6 +1083,10 @@ class MuchSelect extends HTMLElement {
       flags.optionsJson = JSON.stringify(
         buildOptionsFromSelectElement(selectElement)
       );
+    } else if (muchSelectOptionElements) {
+      flags.optionsJson = JSON.stringify(
+        buildOptionsFromMuchSelectOptionElements(muchSelectOptionElements)
+      );
     } else {
       flags.optionsJson = JSON.stringify([]);
     }
@@ -1302,7 +1355,7 @@ class MuchSelect extends HTMLElement {
   }
 
   /**
-   * Set the maxium number of items to try to render in the dropdown.
+   * Set the maximum number of items to try to render in the dropdown.
    *
    * @param value {string}
    */
@@ -1571,14 +1624,8 @@ class MuchSelect extends HTMLElement {
    * Do not allow this value to be anything but:
    *  - json
    *  - comma (default)
-   *
-   * In addition to actually changing the private property, it also (re)encodes
-   *  the current selected value, but ONLY IF the web component is connected,
-   *  meaning the connected callback has been called, if that has not been called
-   *  we are still initializing.
    * */
   set selectedValueEncoding(value) {
-    const currentValue = this.parsedSelectedValue;
     let selectedValueEncoding;
     if (value === "json") {
       selectedValueEncoding = "json";
@@ -1587,10 +1634,6 @@ class MuchSelect extends HTMLElement {
     } else {
       throw new Error(`Invalid selected value encoding: ${value}`);
     }
-    if (this._connected) {
-      this.parsedSelectedValue = currentValue;
-    }
-
     // noinspection JSUnresolvedVariable
     this.appPromise.then((app) =>
       app.ports.selectedValueEncodingChangeReceiver.send(selectedValueEncoding)
@@ -1745,7 +1788,7 @@ class MuchSelect extends HTMLElement {
       }
 
       .optgroup {
-        background-color: gray;
+        background-color: rgb(128,128,128);
       }
 
       .option {
@@ -1763,7 +1806,7 @@ class MuchSelect extends HTMLElement {
 
       .option.disabled {
         cursor: default;
-        color: gray;
+        color: rgb(128,128,128);
       }
 
       .description {