docs(Select): add basic usage and explanation

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/docs/src/components/doc/Playground.svelte

@@ -107,15 +107,6 @@
                   val.join(', ') :
                   val)}>
               {label}
-              <div slot="item" let:item>
-                {#if controls[label].format}
-                  <ListItem value={item.value}>
-                    {item.name}
-                  </ListItem>
-                {:else}
-                  <ListItem value={item}>{item}</ListItem>
-                {/if}
-              </div>
             </Select>
           {:else if controls[label].type === 'text'}
             <TextField bind:value={values[label]} class="mt-4">{label}</TextField>

packages/docs/src/examples/Select/basic.svelte

@@ -1,12 +1,7 @@
 <script>
   import { Row, Col, Select } from 'svelte-materialify/src';
 
-  const items = [
-    { name: 'Foo', value: 'foo' },
-    { name: 'Bar', value: 'bar' },
-    { name: 'Fizz', value: 'fizz' },
-    { name: 'Buzz', value: 'buzz' },
-  ];
+  const items = ['foo', 'bar', 'fizz', 'buzz'];
 </script>
 
 <Row>

packages/docs/src/examples/Select/multiple.svelte

@@ -7,6 +7,7 @@
     { name: 'Fizz', value: 'fizz' },
     { name: 'Buzz', value: 'buzz' },
   ];
+  const items2 = ['foo', 'bar', 'fizz', 'buzz'];
 </script>
 
 <Row>
@@ -15,7 +16,7 @@
     <Select multiple filled {items}>Filled</Select>
   </Col>
   <Col>
-    <Select multiple solo {items} placeholder="Solo" />
-    <Select multiple outlined {items}>Outlined</Select>
+    <Select multiple solo items={items2} placeholder="Solo" />
+    <Select multiple outlined items={items2}>Outlined</Select>
   </Col>
 </Row>

packages/docs/src/examples/Select/namevalue.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { Row, Select } from 'svelte-materialify/src';
+
+  const items = [
+    { name: 'Foo!', value: 'foo' },
+    { name: 'Bar!', value: 'bar' },
+    { name: 'Fizz!', value: 'fizz' },
+    { name: 'Buzz!', value: 'buzz' },
+  ];
+  let value;
+</script>
+
+<Row noGutters class="mt-2">
+  <Select {items} bind:value>Regular</Select>
+  <p>chosen value: {value}</p>
+</Row>

packages/docs/src/routes/components/selects.md

@@ -24,6 +24,18 @@ Below is a collection of simple to complex examples.
 This is a basic example on how to use `Select`.
 <Components.Example file="Select/basic" />
 
+### Name-Value
+
+If you want the `name` that the user sees to differ from the `value` in code, your items should be defined like this:
+```js
+const items = [
+    { name: 'Foo!', value: 'foo' },
+    { name: 'Bar!', value: 'bar' }
+]
+```
+as an example:
+<Components.Example file="Select/namevalue" />
+
 ### Disabled
 
 You cannot use disabled `Select`.