Merge pull request #176 from TheComputerM/fix/select-issue

fix: select issue

Author: Florian-Schoenherr

packages/docs/src/playground/Alert.svelte

@@ -29,17 +29,17 @@
     visible: true,
     icon: false,
     coloredBorder: false,
-    border: [],
-    color: ['primary'],
+    border: controls.border.items[0],
+    color: controls.color.items[0],
   };
 </script>
 
 <Playground {variants} {controls} bind:values>
   <Alert
-    class="{values.color[0]}-{textColor(values.variants) ? 'text' : 'color'}"
+    class="{values.color}-{textColor(values.variants) ? 'text' : 'color'}"
     dismissible={values.dismissible}
     bind:visible={values.visible}
-    border={values.border[0]}
+    border={values.border}
     coloredBorder={values.coloredBorder}
     {...formatVariant(values.variants)}>
     <span slot="icon">

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

@@ -33,9 +33,7 @@
         } else if (value.length < max) value = [...value, val];
       } else if (value === val) {
         if (!mandatory) value = null;
-      } else if (typeof (val) === 'number') {
-        value = val;
-      } else value = [val];
+      } else value = val;
     },
     register: (setValue) => {
       const u = valueStore.subscribe((val) => {