From 64e25aa535b54d2df3c97f69cb3f0dd3cc2a3d2c Mon Sep 17 00:00:00 2001
From: Amphiluke <amphiluke@gmail.com>
Date: Sun, 24 Dec 2023 16:35:25 +0700
Subject: [PATCH] Replace the attribute selector with a datalist

---
 package-lock.json                   |   4 +-
 package.json                        |   2 +-
 src/assets/icons.svg                |   2 +-
 src/components/PanelAttributes.vue  | 152 ++++++++++------------------
 src/components/PanelCollections.vue |   4 +-
 src/components/PanelSettings.vue    |   4 +-
 src/components/TheSidebar.vue       |   4 +-
 src/styles/interface.module.css     |  17 ++--
 8 files changed, 67 insertions(+), 122 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c5b32be..e9edf02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lindsvg-pwa",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lindsvg-pwa",
-      "version": "2.3.3",
+      "version": "2.3.4",
       "dependencies": {
         "@vueuse/core": "^10.7.0",
         "lindsvg": "^1.3.3",
diff --git a/package.json b/package.json
index 669fbaa..eec6863 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.3.3",
+  "version": "2.3.4",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",
diff --git a/src/assets/icons.svg b/src/assets/icons.svg
index 239b81d..bb729a4 100644
--- a/src/assets/icons.svg
+++ b/src/assets/icons.svg
@@ -1 +1 @@
-<svg width="225" height="25" viewBox="0 0 225 25" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><path d="M39 5.66c-.38-1.56-2.6-1.56-2.98 0a1.53 1.53 0 0 1-2.29.95c-1.37-.84-2.94.73-2.1 2.1.54.9.06 2.05-.95 2.3-1.56.37-1.56 2.6 0 2.97a1.53 1.53 0 0 1 .95 2.29c-.84 1.37.73 2.94 2.1 2.1a1.53 1.53 0 0 1 2.3.95c.37 1.56 2.6 1.56 2.97 0a1.53 1.53 0 0 1 2.29-.95c1.37.84 2.94-.73 2.1-2.1a1.53 1.53 0 0 1 .95-2.29c1.56-.38 1.56-2.6 0-2.98a1.53 1.53 0 0 1-.95-2.28c.84-1.38-.73-2.95-2.1-2.1A1.53 1.53 0 0 1 39 5.65zm-1.49 9.83a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12.5 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M2.96 12.5a10 10 0 0 1 19.08 0 10 10 0 0 1-19.08 0zm13.54 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm70-8a1 1 0 0 0-.9.55l-.72 1.44H81.5a1 1 0 0 0 0 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-10a1 1 0 0 0 0-2h-3.38l-.73-1.44a1 1 0 0 0-.9-.56zm-2 6a1 1 0 0 1 2 0v6a1 1 0 0 1-2 0zm5-1a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1zm-27 11a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM61.22 9.77a1 1 0 1 0-1.4 1.42l1.28 1.3-1.29 1.28a1 1 0 1 0 1.41 1.42l1.3-1.3 1.3 1.3a1 1 0 1 0 1.4-1.42l-1.29-1.29 1.3-1.3a1 1 0 1 0-1.42-1.4l-1.3 1.29zM112.5 5.5a1 1 0 0 1 .7.3l3 3a1 1 0 1 1-1.4 1.41l-2.3-2.29-2.3 2.3a1 1 0 1 1-1.4-1.42l3-3a1 1 0 0 1 .7-.3zm-3.7 9.3a1 1 0 0 1 1.4 0l2.3 2.3 2.3-2.3a1 1 0 1 1 1.4 1.41l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 0-1.41zm21.7-9.3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-.3.7l-4.7 4.71v3.59a1 1 0 0 1-.3.7l-2 2a1 1 0 0 1-1.7-.7v-5.59l-4.7-4.7a1 1 0 0 1-.3-.71z"/><circle cx="156.5" cy="12.5" r="2"/><circle cx="162.5" cy="12.5" r="2"/><circle cx="168.5" cy="12.5" r="2"/><path d="M180.05 2.05a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3zm.5 2h2.5v17h-2.5a1.5 1.5 0 0 1-1.5-1.5v-14c0-.84.66-1.5 1.5-1.5zm4.5 0h9.5c.82 0 1.5.66 1.5 1.5v14c0 .82-.68 1.5-1.5 1.5h-9.5z"/><path d="m186.55 12.35 6.58-3.8v7.6l-3.3-1.9z"/></g><path d="M215.44 4.5h.36c.55-.01 1.15.1 1.67.3a4.75 4.75 0 0 1 2.1 7.25c-.32.41-.69.76-1.05 1.13-.25.24-.44.48-.77.6a1.07 1.07 0 0 1-1.38-.6c-.04-.13-.04-.27-.04-.41.02-.74.87-1.3 1.32-1.82.78-.86.9-2.08.32-3.06-.12-.22-.26-.36-.42-.54a2.53 2.53 0 0 0-3.4-.14c-.4.33-1.07 1.14-1.46 1.34a1.19 1.19 0 0 1-.44.11c-1.04.05-1.46-1.1-.8-1.83l.56-.57A5.52 5.52 0 0 1 214 4.83c.54-.22.9-.25 1.45-.33zm-1.01 4.73c.7-.1 1.28.26 1.33 1 .05.66-.57 1.11-1 1.52l-3.48 3.48c-.36.36-.5.54-1.05.52-.56 0-.96-.45-1-1-.06-.66.57-1.12 1-1.53l2.82-2.84c.2-.19.88-.9 1.06-1.01.12-.07.2-.1.32-.14zm-6.95 1.9c.87-.1 1.43.73 1.07 1.52-.28.62-1.2 1.12-1.62 1.98a2.93 2.93 0 0 0-.29 1.16c0 .96.61 1.88 1.45 2.3.46.24.79.26 1.3.25.88 0 1.48-.59 2.05-1.16.39-.39.7-.84 1.3-.87.63-.02 1.15.46 1.11 1.11a1.2 1.2 0 0 1-.36.76c-.41.47-1.13 1.17-1.64 1.52a4.9 4.9 0 0 1-4.37.47 4.76 4.76 0 0 1-1.87-7.48l.82-.84c.36-.38.53-.62 1.05-.72z"/></svg>
\ No newline at end of file
+<svg width="175" height="25" viewBox="0 0 175 25" xmlns="http://www.w3.org/2000/svg"><g fill="#000" fill-rule="evenodd"><path d="M13.99 5.66c-.38-1.56-2.6-1.56-2.98 0a1.53 1.53 0 0 1-2.29.95c-1.37-.84-2.94.73-2.1 2.1.54.9.06 2.05-.95 2.3-1.56.37-1.56 2.6 0 2.97 1.01.24 1.5 1.4.95 2.29-.84 1.37.73 2.94 2.1 2.1a1.53 1.53 0 0 1 2.3.95c.37 1.56 2.6 1.56 2.97 0a1.53 1.53 0 0 1 2.29-.95c1.37.84 2.94-.73 2.1-2.1a1.53 1.53 0 0 1 .95-2.29c1.56-.38 1.56-2.6 0-2.98-1-.24-1.49-1.4-.95-2.28.84-1.38-.73-2.95-2.1-2.1-.9.55-2.06.05-2.29-.97zm-1.49 9.83c4 0 4-6 0-6s-4 6 0 6zM61.49 4.5a1 1 0 0 0-.9.55l-.72 1.44h-3.38c-1.33 0-1.33 2 0 2v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2v-10c1.33 0 1.33-2 0-2h-3.38l-.73-1.44a1 1 0 0 0-.9-.56zm-2 6c0-1.33 2-1.33 2 0v6c0 1.33-2 1.33-2 0zm5-1a1 1 0 0 0-1 1v6c0 1.33 2 1.33 2 0v-6a1 1 0 0 0-1-1zm-27 11a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM36.21 9.77c-.94-1.09-2.5.5-1.4 1.42l1.28 1.3-1.29 1.28c-.95.94.46 2.36 1.41 1.42l1.3-1.3 1.3 1.3c.94 1.09 2.5-.5 1.4-1.42l-1.29-1.29 1.3-1.3c1.09-.94-.5-2.5-1.42-1.4l-1.3 1.29zM87.49 5.5a1 1 0 0 1 .7.3l3 3c1.17.93-.47 2.58-1.4 1.41l-2.3-2.29-2.3 2.3c-.94 1.09-2.5-.5-1.4-1.42l3-3a1 1 0 0 1 .7-.3zm-3.7 9.3a1 1 0 0 1 1.4 0l2.3 2.3 2.3-2.3c.93-1.17 2.57.48 1.4 1.41l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 0-1.41zm21.7-9.3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-.3.7l-4.7 4.71v3.59a1 1 0 0 1-.3.7l-2 2a1 1 0 0 1-1.7-.7v-5.59l-4.7-4.7a1 1 0 0 1-.3-.71zM155.04 2.05a3 3 0 0 0-3 3v15a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-15a3 3 0 0 0-3-3zm.5 2h2.5v17h-2.5a1.5 1.5 0 0 1-1.5-1.5v-14c0-.84.66-1.5 1.5-1.5zm4.5 0h9.5c.82 0 1.5.66 1.5 1.5v14c0 .82-.68 1.5-1.5 1.5h-9.5z"/><path d="m161.54 12.35 6.58-3.8v7.6l-3.3-1.9z"/></g><path d="M140.45 4.5h.36c.55-.01 1.15.1 1.67.3a4.75 4.75 0 0 1 2.1 7.25c-.32.41-.69.76-1.05 1.13-.25.24-.44.48-.77.6a1.07 1.07 0 0 1-1.38-.6c-.04-.13-.04-.27-.04-.41.02-.74.87-1.3 1.32-1.82.78-.86.9-2.08.32-3.06-.12-.22-.26-.36-.42-.54a2.53 2.53 0 0 0-3.4-.14c-.4.33-1.07 1.14-1.46 1.34a1.19 1.19 0 0 1-.44.11c-1.04.05-1.46-1.1-.8-1.83l.56-.57a5.52 5.52 0 0 1 1.99-1.43c.54-.22.9-.25 1.45-.33zm-1.01 4.73c.7-.1 1.28.26 1.33 1 .05.66-.57 1.11-1 1.52l-3.48 3.48c-.36.36-.5.54-1.05.52-.56 0-.96-.45-1-1-.06-.66.57-1.12 1-1.53l2.82-2.84c.2-.19.88-.9 1.06-1.01.12-.07.2-.1.32-.14zm-6.95 1.9c.87-.1 1.43.73 1.07 1.52-.28.62-1.2 1.12-1.62 1.98a2.93 2.93 0 0 0-.29 1.16c0 .96.61 1.88 1.45 2.3.46.24.79.26 1.3.25.88 0 1.48-.59 2.05-1.16.39-.39.7-.84 1.3-.87.63-.02 1.15.46 1.11 1.11a1.2 1.2 0 0 1-.36.76c-.41.47-1.13 1.17-1.64 1.52a4.9 4.9 0 0 1-4.37.47 4.76 4.76 0 0 1-1.87-7.48l.82-.84c.36-.38.53-.62 1.05-.72z"/></svg>
\ No newline at end of file
diff --git a/src/components/PanelAttributes.vue b/src/components/PanelAttributes.vue
index 83c0dc9..ee12330 100644
--- a/src/components/PanelAttributes.vue
+++ b/src/components/PanelAttributes.vue
@@ -10,54 +10,48 @@ let interfaceStore = useInterfaceStore();
 
 let newAttributeName = ref("");
 let newAttributeValue = ref("");
-let attributes = {
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation
-  "Presentation Attributes": [
-    "clip-path",
-    "clip-rule",
-    "color",
-    "color-interpolation",
-    "cursor",
-    "display",
-    "fill",
-    "fill-opacity",
-    "fill-rule",
-    "filter",
-    "marker-end",
-    "marker-mid",
-    "marker-start",
-    "mask",
-    "opacity",
-    "overflow",
-    "paint-order",
-    "pathLength",
-    "pointer-events",
-    "shape-rendering",
-    "stroke",
-    "stroke-dasharray",
-    "stroke-dashoffset",
-    "stroke-linecap",
-    "stroke-linejoin",
-    "stroke-miterlimit",
-    "stroke-opacity",
-    "stroke-width",
-    "transform",
-    "vector-effect",
-    "visibility",
-  ],
-
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core
-  "Core Attributes": [
-    "id",
-    "tabindex",
-  ],
-
-  // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling
-  "Styling Attributes": [
-    "class",
-    "style",
-  ],
-};
+let attributes = [
+  // Presentation Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+  "clip-path",
+  "clip-rule",
+  "color",
+  "color-interpolation",
+  "cursor",
+  "display",
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "filter",
+  "marker-end",
+  "marker-mid",
+  "marker-start",
+  "mask",
+  "opacity",
+  "overflow",
+  "paint-order",
+  "pathLength",
+  "pointer-events",
+  "shape-rendering",
+  "stroke",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-miterlimit",
+  "stroke-opacity",
+  "stroke-width",
+  "transform",
+  "vector-effect",
+  "visibility",
+
+  // Core Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Core)
+  "id",
+  "tabindex",
+
+  // Styling Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Styling)
+  "class",
+  "style",
+];
 
 function setAttribute(name, value) {
   value = value.trim().split(/\r?\n/);
@@ -120,36 +114,23 @@ function plot() {
         <h3>Add a new attribute</h3>
         <div :class="$style.attributeItem">
           <div :class="$style.newAttributeName">
-            <label :class="$style.attributeListCtrl">
-              <select
-                :class="$style.attributeList"
-                title="Select attribute"
-                @change="newAttributeName = $event.target.value"
-              >
-                <optgroup
-                  v-for="(attributeList, group) in attributes"
-                  :key="group"
-                  :label="group"
-                >
-                  <option
-                    v-for="attribute in attributeList"
-                    :key="attribute"
-                    :value="attribute"
-                    :disabled="Object.hasOwn(lSystemStore.attributes, attribute)"
-                  >
-                    {{ attribute }}
-                  </option>
-                </optgroup>
-              </select>
-            </label>
             <label :class="[interfaceStyles.labeledField, $style.labeledField]">
               <input
                 v-model="newAttributeName"
+                list="svg-attributes"
                 autocapitalize="off"
                 type="text"
                 placeholder="Enter attribute name…"
               >
             </label>
+            <datalist id="svg-attributes">
+              <option
+                v-for="(attribute, index) of attributes"
+                :key="index"
+                :value="attribute"
+                :disabled="Object.hasOwn(lSystemStore.attributes, attribute)"
+              />
+            </datalist>
             <button
               type="button"
               :class="[$style.addAttributeButton, interfaceStyles.iconButton, interfaceStyles.iconButtonAdd]"
@@ -245,37 +226,6 @@ function plot() {
     }
   }
   
-  .attributeListCtrl {
-    display: flex;
-    flex-shrink: 0;
-    position: relative;
-
-    &::before {
-      background-color: var(--color-accent);
-      content: "";
-      height: 25px;
-      left: 50%;
-      -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat;
-      mask: url(../assets/icons.svg) -150px 0 no-repeat;
-      opacity: 0.5;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 25px;
-    }
-
-    &:hover::before,
-    &:focus-within::before {
-      opacity: 1;
-    }
-  }
-
-  .attributeList {
-    cursor: pointer;
-    opacity: 0.01;
-    width: 32px;
-  }
-
   .addAttributeButton {
     flex-shrink: 0;
 
diff --git a/src/components/PanelCollections.vue b/src/components/PanelCollections.vue
index 2d18dac..7452add 100644
--- a/src/components/PanelCollections.vue
+++ b/src/components/PanelCollections.vue
@@ -154,8 +154,8 @@ function copyPermalink(cid, lid) {
       content: "";
       flex-shrink: 0;
       height: 25px;
-      -webkit-mask: url(../assets/icons.svg) -125px 0 no-repeat;
-      mask: url(../assets/icons.svg) -125px 0 no-repeat;
+      -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat;
+      mask: url(../assets/icons.svg) -100px 0 no-repeat;
       width: 25px;
     }
 
diff --git a/src/components/PanelSettings.vue b/src/components/PanelSettings.vue
index 2c23529..4b02774 100644
--- a/src/components/PanelSettings.vue
+++ b/src/components/PanelSettings.vue
@@ -231,8 +231,8 @@ function plot() {
       content: "";
       height: 25px;
       left: 20px;
-      -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat;
-      mask: url(../assets/icons.svg) -100px 0 no-repeat;
+      -webkit-mask: url(../assets/icons.svg) -75px 0 no-repeat;
+      mask: url(../assets/icons.svg) -75px 0 no-repeat;
       pointer-events: none;
       position: absolute;
       top: 50%;
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 7e6d144..20c986c 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -53,8 +53,8 @@ let interfaceStore = useInterfaceStore();
   background-color: var(--color-accent);
   border: none;
   height: 25px;
-  -webkit-mask: url(../assets/icons.svg) -175px 0 no-repeat;
-  mask: url(../assets/icons.svg) -175px 0 no-repeat;
+  -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat;
+  mask: url(../assets/icons.svg) -150px 0 no-repeat;
   padding: 0;
   position: absolute;
   right: 10px;
diff --git a/src/styles/interface.module.css b/src/styles/interface.module.css
index 0f6f3fb..464899f 100644
--- a/src/styles/interface.module.css
+++ b/src/styles/interface.module.css
@@ -81,30 +81,25 @@
   }
 }
 
-.iconButtonView::before {
+.iconButtonConfig::before {
   -webkit-mask-position: 0 0;
   mask-position: 0 0;
 }
 
-.iconButtonConfig::before {
+.iconButtonErase::before,
+.iconButtonAdd::before {
   -webkit-mask-position: -25px 0;
   mask-position: -25px 0;
 }
 
-.iconButtonErase::before,
-.iconButtonAdd::before {
+.iconButtonDelete::before {
   -webkit-mask-position: -50px 0;
   mask-position: -50px 0;
 }
 
-.iconButtonDelete::before {
-  -webkit-mask-position: -75px 0;
-  mask-position: -75px 0;
-}
-
 .iconButtonLink::before {
-  -webkit-mask-position: -200px 0;
-  mask-position: -200px 0;
+  -webkit-mask-position: -125px 0;
+  mask-position: -125px 0;
 }
 
 @keyframes add-breath {