feat(Input): added disabled and readonly

TheComputerM · Aug 27, 2020 · 1531349 · 1531349
1 parent 0df6d8b
commit 1531349
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 11 deletions.
diff --git a/packages/docs/src/examples/components/textField/disabled.svelte b/packages/docs/src/examples/components/textField/disabled.svelte
@@ -0,0 +1,25 @@
+<script>
+  import TextField from "svelte-materialify/src/components/TextField";
+  import { Row, Col } from "svelte-materialify/src/components/Grid";
+</script>
+
+<Row>
+  <Col>
+    <TextField disabled value="Hello">Regular</TextField>
+    <br />
+    <TextField disabled filled value="Hello">Filled</TextField>
+    <br />
+    <TextField disabled outlined value="Hello">Outlined</TextField>
+    <br />
+    <TextField disabled solo value="Hello" />
+  </Col>
+  <Col>
+    <TextField readonly value="Hello">Regular</TextField>
+    <br />
+    <TextField readonly filled value="Hello">Filled</TextField>
+    <br />
+    <TextField readonly outlined value="Hello">Outlined</TextField>
+    <br />
+    <TextField readonly solo value="Hello" />
+  </Col>
+</Row>
diff --git a/packages/docs/src/routes/components/text-field.svx b/packages/docs/src/routes/components/text-field.svx
@@ -34,10 +34,16 @@ Text fields components are used for collecting user provided information.
 <Example code={examples.dense} component={Examples.dense} />
 
 
+### Disabled and Readonly
+
+<Example code={examples.disabled} component={Examples.disabled} />
+
+
 ### Icons
 
 <Example code={examples.icons} component={Examples.icons} />
 
+
 ### Clearable
 
 <Example code={examples.clearable} component={Examples.clearable} />
diff --git a/packages/svelte-materialify/src/components/Input/Input.scss b/packages/svelte-materialify/src/components/Input/Input.scss
@@ -105,6 +105,14 @@
       textarea {
         color: var(--theme-text-disabled);
       }
+
+      .s-icon {
+        color: var(--theme-icons-inactive);
+      }
+
+      label {
+        color: var(--theme-text-disabled);
+      }
     }
   }
 

diff --git a/packages/svelte-materialify/src/components/Input/Input.svelte b/packages/svelte-materialify/src/components/Input/Input.svelte
@@ -1,7 +1,8 @@
 <script>
-  let classes = '';
+  let classes = "";
   export { classes as class };
   export let color = null;
+  export let readonly = false;
   export let disabled = false;
   export let messages = [];
 </script>
@@ -10,7 +11,11 @@
 
 </style>
 
-<div class="s-input {classes}" class:disabled style="--input-active-color:{color}">
+<div
+  class="s-input {classes}"
+  class:readonly
+  class:disabled
+  style="--input-active-color:{color}">
   <slot name="prepend" />
   <div class="s-input__control">
     <slot />

diff --git a/packages/svelte-materialify/src/components/TextField/TextField.svelte b/packages/svelte-materialify/src/components/TextField/TextField.svelte
@@ -1,13 +1,15 @@
 <script context="module">
-  import uid from 'uid';
-  const clearIcon = 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z';
+  import uid from "uid";
+
+  const clearIcon =
+    "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 </script>
 
 <script>
-  import Input from '../Input';
-  import Icon from '../Icon';
+  import Input from "../Input";
+  import Icon from "../Icon";
 
-  export let value = '';
+  export let value = "";
   export let color = null;
   export let filled = false;
   export let solo = false;
@@ -16,8 +18,8 @@
   export let dense = false;
   export let rounded = false;
   export let clearable = false;
-  // export let disabled = false;
-  // export let readonly = false;
+  export let readonly = false;
+  export let disabled = false;
   export let placeholder = null;
   // export let helper = "";
   export let id = null;
@@ -34,7 +36,7 @@
   }
 
   function clear() {
-    value = '';
+    value = "";
     if (!placeholder) labelActive = false;
   }
 </script>
@@ -43,7 +45,7 @@
 
 </style>
 
-<Input class="s-text-field" {color}>
+<Input class="s-text-field" {color} {readonly} {disabled}>
   <div slot="prepend">
     <slot name="prepend-outer" />
   </div>
@@ -65,6 +67,7 @@
         bind:value
         {placeholder}
         {id}
+        {disabled}
         on:focus={onFocus}
         on:blur={onBlur} />
     </div>