Update docs and changelog.

CHANGELOG.md

@@ -4,6 +4,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 
 ## Develop (version not yet known)
 - [#351] - Wrap `KCheckbox` default slot's content in <label>
+- [#355] - Add `KSelect` to KDS
 
 
 ## Version 1.4.x

docs/pages/kselect.vue

@@ -0,0 +1,67 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      <DocsShow>
+        <KSelect
+          v-model="exampleData"
+          :options="options"
+          label="Who are you?"
+          placeholder="Nobody"
+        />
+        <p>Value: {{ exampleData }}</p>
+      </DocsShow>
+      <p>
+        A select dropdown component that allows users to select an item from a range of options.
+      </p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <p>
+        Use a select dropdown for the following:
+      </p>
+      <ul>
+        <li></li>
+      </ul>
+    </DocsPageSection>
+
+    <DocsPageSection title="Specifications" anchor="#specifications">
+      <ul>
+      </ul>
+    </DocsPageSection>
+
+    <DocsPageSection title="Guidelines" anchor="#guidelines">
+      <ul>
+      </ul>
+    </DocsPageSection>
+
+  </DocsPageTemplate>
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        exampleData: null,
+        options: [
+          {
+            label: 'Somebody',
+            value: 'somebody',
+          },
+          {
+            label: 'You used to know me',
+            value: 'usedto',
+          },
+        ],
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped></style>

docs/tableOfContents.js

@@ -231,6 +231,12 @@ export default [
         title: 'KLabeledIcon',
         isCode: true,
       }),
+      new Page({
+        path: '/kselect',
+        title: 'KSelect',
+        isCode: true,
+        keywords: ['field', 'box'],
+      }),
       new Page({
         path: '/kswitch',
         title: 'KSwitch',

lib/KSelect/index.vue

@@ -151,7 +151,7 @@
     data() {
       return {
         // workaround for Keen-ui not displaying floating labels for empty objects
-        selection: Object.keys(this.value).length === 0 ? '' : this.value,
+        selection: Object.keys(this.value || {}).length === 0 ? '' : this.value,
       };
     },
     computed: {