Feat/autocomplete

docs/src/routes/components/autocomplete.svelte

@@ -0,0 +1,64 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/autocomplete.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Autocomplete, Field } from 'svelma'
+  import Codeview from '../../components/Code.svelte'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  let value
+  let data = []
+  let selected = ''
+
+  const options = [
+    'Angular',
+    'Angular 2',
+    'Aurelia',
+    'Backbone',
+    'Ember',
+    'jQuery',
+    'Meteor',
+    'Node.js',
+    'Polymer',
+    'React',
+    'RxJS',
+    'Vue.js'
+  ]
+
+  $: {
+    data = options.map(o => o.toLowerCase()).filter(o => value && o.indexOf(value.toLowerCase() >= 0))
+    console.log('data', value,data)
+  }
+</script>
+
+<DocHeader title="Autocomplete" subtitle="autocomplete" />
+
+<br>
+
+<Example code={`<script>
+  import { Input } from 'svelma'
+</script>
+
+<Input type="text" placeholder="Text input" />
+`}>
+  <div slot="preview">
+    <strong>Selected:</strong> {selected}
+    <br>
+    <br>
+    <Field label="Search for a JS framework">
+      <Autocomplete bind:value {data} on:select={option => selected = option} />
+    </Field>
+  </div>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/jsdocs.json

@@ -1,4 +1,64 @@
 {
+  "Autocomplete": [
+    {
+      "meta": {
+        "filename": "Autocomplete.svelte",
+        "lineno": 8,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Binding value",
+      "type": [
+        "String",
+        "Number"
+      ],
+      "name": "value",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String",
+            "Number"
+          ]
+        },
+        "name": "value"
+      },
+      "kind": "prop",
+      "longname": "module:Autocomplete~value",
+      "scope": "inner",
+      "memberof": "module:Autocomplete",
+      "___s": true,
+      "values": ""
+    },
+    {
+      "meta": {
+        "filename": "Autocomplete.svelte",
+        "lineno": 13,
+        "columnno": 2,
+        "path": "src/components"
+      },
+      "description": "Options to show in dropdown",
+      "type": [
+        "Array"
+      ],
+      "name": "data",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "Array"
+          ]
+        },
+        "name": "data"
+      },
+      "kind": "prop",
+      "longname": "module:Autocomplete~data",
+      "scope": "inner",
+      "memberof": "module:Autocomplete",
+      "___s": true,
+      "values": ""
+    }
+  ],
   "Button": [
     {
       "meta": {