Merge pull request #190 from TheComputerM/feat/show-select-name-and-empty

Feat/show select name and empty

Author: Florian-Schoenherr

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

@@ -11,7 +11,6 @@
     SlideGroup,
     SlideItem,
     Ripple,
-    ListItem,
   } from 'svelte-materialify/src';
   import { mdiInvertColors } from '@mdi/js';
 
@@ -107,15 +106,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/chips.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 chips filled {items}>Filled</Select>
   </Col>
   <Col>
-    <Select chips multiple {items}>Multiple</Select>
-    <Select chips outlined {items}>Outlined</Select>
+    <Select chips multiple items={items}>Multiple</Select>
+    <Select chips multiple outlined items={items2}>Multiple Outlined</Select>
   </Col>
 </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/playground/Chip.svelte

@@ -19,11 +19,12 @@
     icon: {
       type: 'select',
       items,
-      format: (val) => items.find((i) => i.value == val).name, // eslint-disable-line eqeqeq
+      format: (val) => (items.find((i) => i.value == val) ? items.find((i) => i.value == val).name : ''), // eslint-disable-line eqeqeq
     },
     size: {
       type: 'select',
       items: ['x-small', 'small', 'default', 'large', 'x-large'],
+      mandatory: true,
     },
   };
 

packages/docs/src/playground/Icon.svelte

@@ -15,7 +15,7 @@
     icon: {
       type: 'select',
       items,
-      format: (val) => items.find((i) => i.value == val).name, // eslint-disable-line eqeqeq
+      format: (val) => (items.find((i) => i.value == val) ? items.find((i) => i.value == val).name : ''), // eslint-disable-line eqeqeq
     },
     color: { type: 'select', items: ['red', 'green', 'blue', 'indigo', 'purple'] },
   };

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`.

packages/svelte-materialify/src/components/Select/Select.svelte

@@ -25,7 +25,14 @@
   export let chips = false;
   export let disabled = null;
   export let closeOnClick = !multiple;
-  export let format = (val) => (Array.isArray(val) ? val.join(', ') : val);
+  export let emptyString = '';
+  const getSelectString = (v) => {
+    // We could also use `return items[0].value ? find.. : v` or provide a `basic` prop
+    const item = items.find((i) => i.value === v);
+    return item ? (item.name ? item.name : item) : (v || emptyString);
+  };
+  export let format = (val) => (Array.isArray(val) ? val.map((v) => getSelectString(v)).join(', ') : getSelectString(val));
+
   const dispatch = createEventDispatcher();
   $: dispatch('change', value);
 </script>
@@ -50,10 +57,10 @@
 
         <slot />
         <div slot="content">
-          {#if chips}
+          {#if chips && value}
             <span class="s-select__chips">
-              {#each Array.isArray(value) ? value : [value] as v}
-                <Chip>{v}</Chip>
+              {#each Array.isArray(value) ? value.map((v) => getSelectString(v)) : [getSelectString(value)] as val}
+                <Chip>{val}</Chip>
               {/each}
             </span>
           {/if}
@@ -67,13 +74,13 @@
     <ListItemGroup bind:value {mandatory} {multiple} {max}>
       {#each items as item}
         <slot name="item" {item}>
-          <ListItem {dense} value={item.value}>
+          <ListItem {dense} value={item.value ? item.value : item}>
             <span slot="prepend">
               {#if multiple}
-                <Checkbox checked={value.includes(item.value)} />
+                <Checkbox checked={value.includes(item.value ? item.value : item)} />
               {/if}
             </span>
-            {item.name}
+            {item.name ? item.name : item}
           </ListItem>
         </slot>
       {/each}