fix: all Playground docs Selects + Icon

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

Author: Florian-Schoenherr

packages/docs/src/playground/AppBar.svelte

@@ -17,13 +17,13 @@
   let values = {
     variants: [],
     collapsed: false,
-    color: [],
+    color: controls.color.items[0],
   };
 </script>
 
 <Playground {variants} {controls} bind:values>
   <AppBar
-    class="{values.color[0]}-color"
+    class="{values.color}-color"
     collapsed={values.collapsed}
     {...formatVariant(values.variants)}>
     <span slot="icon">

packages/docs/src/playground/Avatar.svelte

@@ -18,12 +18,12 @@
     size: 48,
     tile: false,
     icon: false,
-    color: ['primary'],
+    color: 'primary',
   };
 </script>
 
 <Playground {controls} bind:values>
-  <Avatar tile={values.tile} size="{values.size}px" class="{values.color[0]}-color">
+  <Avatar tile={values.tile} size="{values.size}px" class="{values.color}-color">
     {#if values.icon}
       <Icon path={mdiHome} />
     {:else}MS{/if}

packages/docs/src/playground/Breadcrumbs.svelte

@@ -13,7 +13,7 @@
 
   let values = {
     large: false,
-    divider: ['/'],
+    divider: '/',
   };
 
   const items = [

packages/docs/src/playground/Chip.svelte

@@ -35,13 +35,13 @@
     active: true,
     avatar: false,
     icon: items[0].value,
-    size: ['default'],
+    size: 'default',
   };
 </script>
 
 <Playground {controls} {variants} bind:values>
   <Chip
-    size={values.size[0]}
+    size={values.size}
     close={values.close}
     bind:active={values.active}
     {...formatVariant(values.variants)}>

packages/docs/src/playground/Icon.svelte

@@ -23,7 +23,7 @@
   let values = {
     size: 24,
     icon: mdiPlus,
-    color: [],
+    color: 'purple',
   };
 </script>
 

packages/docs/src/playground/NavigationDrawer.svelte

@@ -19,7 +19,7 @@
   let values = {
     mini: false,
     right: false,
-    color: ['teal'],
+    color: 'teal',
   };
 </script>
 

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

@@ -14,6 +14,10 @@
   export let path = null;
   export let label = null;
   export let style = null;
+  $: {
+    width = size;
+    height = size;
+  }
 </script>
 
 <style type="scss" src="./Icon.scss" global>

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

@@ -36,6 +36,7 @@
       // } else if (typeof (val) === '???') {
       //   value = [val];
       } else value = val;
+      //old:
       // } else if (typeof (val) === 'number') {
       //   value = val;
       // } else value = [val];