fix: add disabled prop in autocomplete

Author: hperrin

packages/autocomplete/src/Autocomplete.svelte

@@ -23,6 +23,7 @@
     <slot>
       <Textfield
         {label}
+        {disabled}
         bind:value={text}
         {...prefixFilter($$restProps, 'textfield$')}
       />
@@ -116,6 +117,7 @@
     option == null ? '' : `${option}`;
   export let text = getOptionLabel(value);
   export let label: string | undefined = undefined;
+  export let disabled = false;
   export let toggle = false;
   export let combobox = false;
   export let clearOnBlur = !combobox;

packages/autocomplete/src/Autocomplete.types.ts

@@ -20,6 +20,7 @@ export declare class AutocompleteComponentDev extends Component {
     | 'getOptionLabel'
     | 'text'
     | 'label'
+    | 'disabled'
     | 'toggle'
     | 'combobox'
     | 'clearOnBlur'

packages/site/src/routes/demo/autocomplete/_Simple.svelte

@@ -1,43 +1,74 @@
 <div class="columns margins">
   <div>
-    Standard:<br />
     <Autocomplete
       options={fruits}
       bind:value={valueStandard}
-      label="Fruit"
+      label="Standard"
       class="demo-autocomplete-width"
     />
 
     <pre class="status">Selected: {valueStandard || ''}</pre>
   </div>
 
   <div>
-    Filled:<br />
     <Autocomplete
       options={fruits}
       textfield$variant="filled"
       bind:value={valueFilled}
-      label="Fruit"
+      label="Filled"
       class="demo-autocomplete-width"
     />
 
     <pre class="status">Selected: {valueFilled || ''}</pre>
   </div>
 
   <div>
-    Outlined:<br />
     <Autocomplete
       options={fruits}
       textfield$variant="outlined"
       bind:value={valueOutlined}
-      label="Fruit"
+      label="Outlined"
       class="demo-autocomplete-width"
     />
 
     <pre class="status">Selected: {valueOutlined || ''}</pre>
   </div>
 </div>
 
+<div>
+  Disabled:
+  <div class="columns margins">
+    <div>
+      <Autocomplete
+        options={fruits}
+        disabled
+        label="Standard"
+        class="demo-autocomplete-width"
+      />
+    </div>
+
+    <div>
+      <Autocomplete
+        options={fruits}
+        textfield$variant="filled"
+        disabled
+        label="Filled"
+        class="demo-autocomplete-width"
+      />
+    </div>
+
+    <div>
+      <Autocomplete
+        options={fruits}
+        textfield$variant="outlined"
+        disabled
+        label="Outlined"
+        class="demo-autocomplete-width"
+      />
+    </div>
+  </div>
+</div>
+
 <script lang="ts">
   import Autocomplete from '@smui-extra/autocomplete';
 

packages/site/src/routes/demo/autocomplete/index.svelte

@@ -3,7 +3,7 @@
 </svelte:head>
 
 <section>
-  <h2>Autocomplete</h2>
+  <h2>Auto<wbr />complete</h2>
 
   <h5>Installation</h5>