docs: improve select keys example

Author: hperrin

packages/site/src/routes/demo/select/_Keys.svelte

@@ -4,17 +4,18 @@
       Note: you need to provide a function as `key` that returns a unique string
       for each option.
 
-      It *must* be a string. (Hence the `${(fruit && fruit.id) || ''}` part.
-      That returns a string for the numberic `id` field and the `null` and
-      `undefined` values even.) If the string is empty (""), the label will stop
-      floating when that option is selected and the component is unfocused.
-      Therefore, the option for that value shouldn't have any text, or the
-      floating label will overlap it.
+      It *must* be a string. (Hence `${fruit ? fruit.id : ''}` in this
+      example. That returns a string for the numberic `id` field and `null` and
+      `undefined` values even.)
+      
+      If the string is empty (""), the label will stop floating when that option
+      is selected and the component is unfocused. Therefore, the option for that
+      value shouldn't have any text, or the floating label will overlap it.
     -->
     <Select
-      key={(fruit) => `${(fruit && fruit.id) || ''}`}
+      key={(fruit) => `${fruit ? fruit.id : ''}`}
       bind:value={valueA}
-      label="Standard"
+      label="Objects"
     >
       <Option value={null} />
       {#each fruits as fruit (fruit.label)}
@@ -28,39 +29,28 @@
   </div>
 
   <div>
-    <Select
-      variant="filled"
-      key={(fruit) => `${(fruit && fruit.id) || ''}`}
-      bind:value={valueB}
-      label="Filled"
-    >
-      <Option value={null} />
-      {#each fruits as fruit (fruit.label)}
-        <Option value={fruit}>{fruit.label}</Option>
+    <Select key={(bool) => `${bool}`} bind:value={valueB} label="Booleans">
+      {#each [true, false] as value}
+        <Option {value}>{value ? 'Yes' : 'No'}</Option>
       {/each}
     </Select>
 
-    <pre class="status">Selected: {valueB
-        ? valueB.label
-        : 'None'}, Price: {valueB ? valueB.price : '-'}¢</pre>
+    <pre class="status">Selected: {JSON.stringify(valueB)}</pre>
   </div>
 
   <div>
     <Select
-      variant="outlined"
-      key={(fruit) => `${(fruit && fruit.id) || ''}`}
+      key={(value) => `${value == null ? '' : value}`}
       bind:value={valueC}
-      label="Outlined"
+      label="Integers"
     >
-      <Option value={undefined} />
-      {#each fruits as fruit (fruit.label)}
-        <Option value={fruit}>{fruit.label}</Option>
+      <Option value={null} />
+      {#each [0, 1, 2, 3, 4] as value}
+        <Option {value}>{value}</Option>
       {/each}
     </Select>
 
-    <pre class="status">Selected: {valueC
-        ? valueC.label
-        : 'None'}, Price: {valueC ? valueC.price : '-'}¢</pre>
+    <pre class="status">Selected: {JSON.stringify(valueC)}</pre>
   </div>
 </div>
 
@@ -75,7 +65,7 @@
     { id: 4, label: 'Mango', price: 25 },
   ];
 
-  let valueA: Fruit | undefined = undefined;
-  let valueB: Fruit | undefined = undefined;
-  let valueC: Fruit | undefined = undefined;
+  let valueA: Fruit | null = null;
+  let valueB: boolean = true;
+  let valueC: number | null = null;
 </script>