feat: update sys-select for better event handline (#21)

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": {

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(),

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>

src/components/sys-form-select.vue

@@ -23,17 +23,21 @@
     >
       <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'
 
   export default {
     name: 'SysFormSelect',
 
     components: {
+      SysInputError,
       SysSelect,
       SysLabel
     },

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.

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>