From 10a585b50907fc5b7380ed7d7819fb2c7602b819 Mon Sep 17 00:00:00 2001
From: Blake Kostner <btkostner@gmail.com>
Date: Mon, 11 May 2020 12:32:05 -0600
Subject: [PATCH] feat: update sys-select for better event handline (#21)

---
 package-lock.json                          | 59 ++++++++++++++--
 package.json                               |  1 +
 rollup.config.js                           |  2 +-
 src/components/sys-form-select.stories.mdx | 28 ++++++++
 src/components/sys-form-select.vue         |  4 ++
 src/components/sys-select.stories.mdx      | 26 +++++++
 src/components/sys-select.vue              | 82 ++++++++++++++++++----
 7 files changed, 182 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b23f3a7..43cb7d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4120,6 +4120,16 @@
         "eslint-plugin-vue": "^6.1.2"
       }
     },
+    "@system76/markdown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@system76/markdown/-/markdown-1.0.0.tgz",
+      "integrity": "sha512-LdFud2w4giW2xCFAW1mEis8XPny/lq5MOQXZMR7ymwjUMDxwatWX66ixshn+xTRy/MAQw7idXe0Ts1dvyD1Afg==",
+      "requires": {
+        "markdown-it": "^10.0.0",
+        "markdown-it-kbd": "^2.0.0",
+        "markdown-it-link-attributes": "^3.0.0"
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -5117,7 +5127,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -15735,6 +15744,14 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "linux-platform-info": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/linux-platform-info/-/linux-platform-info-0.0.3.tgz",
@@ -16071,6 +16088,35 @@
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
       "dev": true
     },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
+          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+        }
+      }
+    },
+    "markdown-it-kbd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-kbd/-/markdown-it-kbd-2.0.0.tgz",
+      "integrity": "sha512-wMEFAF6WIcitSLt2uGuqXjOB6EfmpML7FN6KI8WdhI2A5l1SsgtmaFPR1ss7BjIqUrtjSk4tNhSl0azt3quwEA=="
+    },
+    "markdown-it-link-attributes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-link-attributes/-/markdown-it-link-attributes-3.0.0.tgz",
+      "integrity": "sha512-B34ySxVeo6MuEGSPCWyIYryuXINOvngNZL87Mp7YYfKIf6DcD837+lXA8mo6EBbauKsnGz22ZH0zsbOiQRWTNg=="
+    },
     "markdown-to-jsx": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.0.tgz",
@@ -16200,8 +16246,7 @@
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
-      "dev": true
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
     },
     "media-typer": {
       "version": "0.3.0",
@@ -22399,8 +22444,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -24727,6 +24771,11 @@
       "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
diff --git a/package.json b/package.json
index 8e0df1b..9b320ca 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@system76/design": "^4.0.0 || ^5.0.0",
+    "@system76/markdown": "^1.0.0",
     "vee-validate": "^3.2.5"
   },
   "devDependencies": {
diff --git a/rollup.config.js b/rollup.config.js
index 3570bdb..b23a8f8 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -11,7 +11,7 @@ import vue from 'rollup-plugin-vue'
 
 const DEFAULT_CONFIG = {
   input: 'src/entry.js',
-  external: ['vue'],
+  external: ['@system76/markdown', 'vue'],
   plugins: {
     preVue: [
       resolve(),
diff --git a/src/components/sys-form-select.stories.mdx b/src/components/sys-form-select.stories.mdx
index cfff6f1..6b584a3 100644
--- a/src/components/sys-form-select.stories.mdx
+++ b/src/components/sys-form-select.stories.mdx
@@ -48,3 +48,31 @@ This is how the input will look when it's disabled.
     }}
   </Story>
 </Preview>
+
+### With Options
+
+Instead of using html to template your options, you can specify them with the
+`options` and `value` prop.
+
+<Preview>
+  <Story height="200px" name="Options">
+    {{
+      data: () => ({
+        options: [
+          ['CA', 'Canada'],
+          ['MX', 'Mexico'],
+          ['US', 'United States']
+        ],
+        value: 'US'
+      }),
+      template: `
+        <sys-form-select
+          v-model="value"
+          id="options"
+          label="Options"
+          :options="options"
+        />
+      `
+    }}
+  </Story>
+</Preview>
diff --git a/src/components/sys-form-select.vue b/src/components/sys-form-select.vue
index 27441a1..1114d67 100644
--- a/src/components/sys-form-select.vue
+++ b/src/components/sys-form-select.vue
@@ -23,10 +23,13 @@
     >
       <slot />
     </sys-select>
+
+    <sys-input-error />
   </div>
 </template>
 
 <script>
+  import SysInputError from './sys-input-error.vue'
   import SysLabel from './sys-label.vue'
   import SysSelect from './sys-select.vue'
 
@@ -34,6 +37,7 @@
     name: 'SysFormSelect',
 
     components: {
+      SysInputError,
       SysSelect,
       SysLabel
     },
diff --git a/src/components/sys-select.stories.mdx b/src/components/sys-select.stories.mdx
index 843143a..0bcc6a8 100644
--- a/src/components/sys-select.stories.mdx
+++ b/src/components/sys-select.stories.mdx
@@ -32,6 +32,32 @@ This is how the select component looks without any given props or data.
   </Story>
 </Preview>
 
+### With Options
+
+Instead of using html to template your options, you can specify them with the
+`options` and `value` prop.
+
+<Preview>
+  <Story height="100px" name="Options">
+    {{
+      data: () => ({
+        options: [
+          ['CA', 'Canada'],
+          ['MX', 'Mexico'],
+          ['US', 'United States']
+        ],
+        value: 'US'
+      }),
+      template: `
+        <sys-select
+          v-model="value"
+          :options="options"
+        />
+      `
+    }}
+  </Story>
+</Preview>
+
 ### Disabled
 
 This is how the input will look when it's disabled.
diff --git a/src/components/sys-select.vue b/src/components/sys-select.vue
index 772020f..86c8228 100644
--- a/src/components/sys-select.vue
+++ b/src/components/sys-select.vue
@@ -8,17 +8,38 @@
     v-bind="$attrs"
     :disabled="disabled"
     :class="$style.input"
-    v-on="$listeners"
+    @blur="onBlur"
+    @change="onChange"
+    @focus="onFocus"
+    @input="onInput"
   >
     <!-- @slot The Inner HTML for `option` tags -->
-    <slot />
+    <slot>
+      <option
+        v-for="([k, v]) in options"
+        :key="k"
+        v-markdown="v"
+        :selected="(k === value)"
+        :value="k"
+      />
+    </slot>
   </select>
 </template>
 
 <script>
+  import { directive as markdownDirective } from '@system76/markdown'
+
   export default {
     name: 'SysSelect',
 
+    directives: {
+      markdown: markdownDirective
+    },
+
+    model: {
+      event: 'value'
+    },
+
     props: {
       /** If this input is disabled and should not take input */
       disabled: {
@@ -27,12 +48,27 @@
       },
 
       /**
-       * If this input is invalid and requires changes. You can give an error
-       * string to set the html invalid text.
-       */
+        * Options to pass to the select. You can override this by using the
+        * `default` slot to pass custom HTML code
+        */
+      options: {
+        type: Array,
+        default: () => []
+      },
+
+      /** Invalid text to set the input to */
       invalid: {
-        type: [Boolean, String],
-        default: false
+        type: String,
+        default: ''
+      },
+
+      /**
+       * The selected option. This only works if you specify the `options` as
+       * well
+       */
+      value: {
+        type: String,
+        default: ''
       }
     },
 
@@ -43,13 +79,7 @@
         },
 
         set (value) {
-          if (typeof value === 'string') {
-            this.$el.setCustomValidity(value)
-          } else if (value === true) {
-            this.$el.setCustomValidity('invalid')
-          } else {
-            this.$el.setCustomValidity('')
-          }
+          this.$el.setCustomValidity(value)
         }
       }
     },
@@ -62,6 +92,30 @@
 
     mounted () {
       this.validity = this.invalid
+    },
+
+    methods: {
+      onBlur (e) {
+        /** Proxy to the html blur event */
+        this.$emit('blur', e)
+      },
+
+      onChange (e) {
+        /** Proxy to the html change event */
+        this.$emit('change', e)
+      },
+
+      onFocus (e) {
+        /** Proxy to the html focus event */
+        this.$emit('focus', e)
+      },
+
+      onInput (e) {
+        /** Proxy to the html input event */
+        this.$emit('input', e)
+        /** Proxy to the html input event, but only sends the input value */
+        this.$emit('value', e.target.value)
+      }
     }
   }
 </script>