From 7cec7228d9a5439ba16c31ad67525716bd78d06e Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Sun, 14 Mar 2021 23:21:22 -0400
Subject: [PATCH 1/9] feat(NumberField): New component

Allows for HTML numeric validations, including min, max, step. Binds value as a number.
---
 .../@types/NumberField.d.ts                   |  63 +++++++
 packages/svelte-materialify/@types/index.d.ts |   1 +
 .../components/NumberField/NumberField.svelte | 162 ++++++++++++++++++
 .../src/components/NumberField/index.js       |   1 +
 packages/svelte-materialify/src/index.js      |   1 +
 5 files changed, 228 insertions(+)
 create mode 100644 packages/svelte-materialify/@types/NumberField.d.ts
 create mode 100644 packages/svelte-materialify/src/components/NumberField/NumberField.svelte
 create mode 100644 packages/svelte-materialify/src/components/NumberField/index.js

diff --git a/packages/svelte-materialify/@types/NumberField.d.ts b/packages/svelte-materialify/@types/NumberField.d.ts
new file mode 100644
index 00000000..90f62e1e
--- /dev/null
+++ b/packages/svelte-materialify/@types/NumberField.d.ts
@@ -0,0 +1,63 @@
+import { SvelteComponent } from './shared';
+
+interface NumberFieldProps {
+  /** Classes to add to text field wrapper. */
+  class?: string;
+  /** Value of the text field. */
+  value?: number;
+  /** Minimum allowed number */
+  min?: number;
+  /** Maximum allowed number */
+  max?: number;
+  /** Amount by which to increment number, also used for validation */
+  step?: number;
+  /** Color class of the text field when active. */
+  color?: string;
+  /** Whether text field is the `filled` material design variant. */
+  filled?: boolean;
+  /** Whether text field is outlined by elevation. */
+  solo?: boolean;
+  /** Whether text field is the `outlined` material design variant. */
+  outlined?: boolean;
+  /** Whether text field do not have elevation. */
+  flat?: boolean;
+  /** Whether text field height is reduced. */
+  dense?: boolean;
+  /** Whether text field has rounded corners. */
+  rounded?: boolean;
+  /** Whether text field has a clear button. */
+  clearable?: boolean;
+  /** Whether text field is read-only. */
+  readonly?: boolean;
+  /** Whether text field is disabled. */
+  disabled?: boolean;
+  /** Placeholder content for text field. */
+  placeholder?: string;
+  /** Hint text. */
+  hint?: string;
+  /** Error messages to display. */
+  messages?: string[];
+  /**
+   * A list of validator functions that take the text field value and return an error
+   * message, or `true` otherwise.
+   */
+  rules?: ((value: string) => string | true)[];
+  /** Number of error messages to display. Defaults to one. */
+  errorCount?: number;
+  /** Whether to delay validation until blur. */
+  validateOnBlur?: boolean;
+  /** Whether text field has error. */
+  error?: boolean;
+  /** Whether text field has `success` class. */
+  success?: boolean;
+  /** Id of the text field. Defaults to a random uid. */
+  id?: string;
+  /** Styles to add to text field wrapper. */
+  style?: string;
+  /** Reference to text field element in the DOM. */
+  inputElement?: Element;
+}
+
+declare class NumberField extends SvelteComponent<NumberFieldProps> {}
+
+export default NumberField;
diff --git a/packages/svelte-materialify/@types/index.d.ts b/packages/svelte-materialify/@types/index.d.ts
index e929400b..2d37aa9a 100644
--- a/packages/svelte-materialify/@types/index.d.ts
+++ b/packages/svelte-materialify/@types/index.d.ts
@@ -32,6 +32,7 @@ export { default as ListItemGroup } from './ListItemGroup';
 export { default as MaterialApp } from './MaterialApp';
 export { default as Menu } from './Menu';
 export { default as NavigationDrawer } from './NavigationDrawer';
+export { default as NumberField } from './NumberField';
 export { default as Overlay } from './Overlay';
 export { default as ProgressCircular } from './ProgressCircular';
 export { default as ProgressLinear } from './ProgressLinear';
diff --git a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
new file mode 100644
index 00000000..237bef5b
--- /dev/null
+++ b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
@@ -0,0 +1,162 @@
+<script>
+  import Input from '../Input';
+  import Icon from '../Icon';
+  import uid from '../../internal/uid';
+  import clearIcon from '../../internal/Icons/close';
+
+  let klass = '';
+  export { klass as class };
+  export let value = null;
+  export let color = 'primary';
+  export let filled = false;
+  export let solo = false;
+  export let outlined = false;
+  export let flat = false;
+  export let dense = false;
+  export let rounded = false;
+  export let clearable = false;
+  export let readonly = false;
+  export let disabled = false;
+  export let placeholder = null;
+  export let hint = '';
+  export let messages = [];
+  export let rules = [];
+  export let errorCount = 1;
+  export let validateOnBlur = false;
+  export let error = false;
+  export let success = false;
+  export let id = `s-input-${uid(5)}`;
+  export let style = null;
+  export let inputElement = null;
+  export let min = null;
+  export let max = null;
+  export let step = null;
+
+  let focused = false;
+  $: labelActive = !!placeholder || (inputElement && inputElement.value !== null) || focused;
+  let errorMessages = [];
+
+  export function validate() {
+    errorMessages = rules.map((r) => r(value)).filter((r) => typeof r === 'string');
+    if (!inputElement.checkValidity()) {
+      if (inputElement.badInput) {
+        errorMessages.push(`Please enter a number.`);
+      };
+      if(inputElement.validity.rangeUnderflow) {
+        errorMessages.push(`Must be ${min} or greater.`);
+      }
+      if(inputElement.validity.rangeOverflow) {
+        errorMessages.push(`Must be ${max} or less.`);
+      }
+      if(inputElement.validity.stepMismatch) {
+        errorMessages.push(`Must be an increment of ${step}`);
+      }
+      if(inputElement.validity.tooLong) {
+        errorMessages.push('Too long.');
+      }
+      if(inputElement.validity.tooShort) {
+        errorMessages.push('Too short.');
+      }
+    }
+    if (errorMessages.length) error = true;
+    else {
+      error = false;
+    }
+    return error;
+  }
+
+
+
+  function onFocus() {
+    focused = true;
+  }
+
+  function onBlur() {
+    focused = false;
+    if (validateOnBlur) validate();
+  }
+
+  function clear() {
+    value = null;
+  }
+
+  function onInput(e) {
+    if (!validateOnBlur) validate();
+  }
+</script>
+
+<Input
+  class="s-text-field {klass}"
+  {color}
+  {dense}
+  {readonly}
+  {disabled}
+  {error}
+  {success}
+  {style}>
+  <!-- Slot for prepend outside the input. -->
+  <slot slot="prepend-outer" name="prepend-outer" />
+  <div
+    class="s-text-field__wrapper"
+    class:filled
+    class:solo
+    class:outlined
+    class:flat
+    class:rounded>
+    <!-- Slot for prepend inside the input. -->
+    <slot name="prepend" />
+
+    <div class="s-text-field__input">
+      <label for={id} class:active={labelActive}>
+        <slot />
+      </label>
+      <slot name="content" />
+      <!-- keypress Event is deprecated. Use keydown or keyup instead -->
+      <input
+        type=number
+        bind:this={inputElement}
+        bind:value
+        {placeholder}
+        {id}
+        {readonly}
+        {disabled}
+        {min}
+        {max}
+        {step}
+        on:focus={onFocus}
+        on:blur={onBlur}
+        on:input={onInput}
+        on:focus
+        on:blur
+        on:input
+        on:change
+        on:keypress
+        on:keydown
+        on:keyup
+        {...$$restProps} />
+    </div>
+
+    {#if clearable && value !== ''}
+      <div on:click={clear} style="cursor:pointer">
+        <!-- Slot for the icon when `clearable` is true. -->
+        <slot name="clear-icon">
+          <Icon path={clearIcon} />
+        </slot>
+      </div>
+    {/if}
+
+    <!-- Slot for append inside the input. -->
+    <slot name="append" />
+  </div>
+
+  <div slot="messages">
+    <div>
+      <span>{hint}</span>
+      {#each messages as message}<span>{message}</span>{/each}
+      {#each errorMessages.slice(0, errorCount) as message}<span>{message}</span>{/each}
+    </div>
+  </div>
+
+  <!-- Slot for append outside the input. -->
+  <slot slot="append-outer" name="append-outer" />
+</Input>
\ No newline at end of file
diff --git a/packages/svelte-materialify/src/components/NumberField/index.js b/packages/svelte-materialify/src/components/NumberField/index.js
new file mode 100644
index 00000000..54978d09
--- /dev/null
+++ b/packages/svelte-materialify/src/components/NumberField/index.js
@@ -0,0 +1 @@
+export { default } from './NumberField.svelte';
diff --git a/packages/svelte-materialify/src/index.js b/packages/svelte-materialify/src/index.js
index 2fd105b5..974c8e9d 100644
--- a/packages/svelte-materialify/src/index.js
+++ b/packages/svelte-materialify/src/index.js
@@ -10,6 +10,7 @@ export { default as Button } from './components/Button';
 export { default as ButtonGroup, ButtonGroupItem } from './components/ButtonGroup';
 export { default as Input } from './components/Input';
 export { default as TextField } from './components/TextField';
+export { default as NumberField } from './components/NumberField';
 export { default as Textarea } from './components/Textarea';
 export { default as Slider } from './components/Slider';
 export { default as Select } from './components/Select';

From 2d8fa0570a4375bc8b5f92c59518f33bce80520d Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 22:41:56 -0400
Subject: [PATCH 2/9] feat(docs): Documentation for NumberField component

---
 .../src/examples/NumberField/clearable.svelte |  18 +++
 .../NumberField/customValidation.svelte       |  16 +++
 .../src/examples/NumberField/dense.svelte     |  20 +++
 .../src/examples/NumberField/disabled.svelte  |  18 +++
 .../src/examples/NumberField/icons.svelte     | 117 ++++++++++++++++++
 .../src/examples/NumberField/label.svelte     |   5 +
 .../examples/NumberField/validation.svelte    |  14 +++
 .../src/examples/NumberField/variants.svelte  |  18 +++
 .../src/routes/components/number-field.md     |  76 ++++++++++++
 9 files changed, 302 insertions(+)
 create mode 100644 packages/docs/src/examples/NumberField/clearable.svelte
 create mode 100644 packages/docs/src/examples/NumberField/customValidation.svelte
 create mode 100644 packages/docs/src/examples/NumberField/dense.svelte
 create mode 100644 packages/docs/src/examples/NumberField/disabled.svelte
 create mode 100644 packages/docs/src/examples/NumberField/icons.svelte
 create mode 100644 packages/docs/src/examples/NumberField/label.svelte
 create mode 100644 packages/docs/src/examples/NumberField/validation.svelte
 create mode 100644 packages/docs/src/examples/NumberField/variants.svelte
 create mode 100644 packages/docs/src/routes/components/number-field.md

diff --git a/packages/docs/src/examples/NumberField/clearable.svelte b/packages/docs/src/examples/NumberField/clearable.svelte
new file mode 100644
index 00000000..8d8a2b7f
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/clearable.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { NumberField, Row, Col } from 'svelte-materialify/src';
+
+  const value = 42;
+</script>
+
+<Row>
+  <Col>
+    <NumberField clearable {value}>Regular</NumberField>
+    <br />
+    <NumberField clearable filled {value}>Filled</NumberField>
+  </Col>
+  <Col>
+    <NumberField clearable outlined {value}>Outlined</NumberField>
+    <br />
+    <NumberField clearable solo {value} />
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/customValidation.svelte b/packages/docs/src/examples/NumberField/customValidation.svelte
new file mode 100644
index 00000000..50d4dd78
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/customValidation.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Row, Col, NumberField } from 'svelte-materialify/src';
+
+  const rules = [
+    (value) => {
+      if (value !== 42) return "That's not the meaning of life!";
+      return true;
+    },
+  ];
+</script>
+
+<Row>
+  <Col>
+    <NumberField {rules} filled>Custom Rules</NumberField>
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/dense.svelte b/packages/docs/src/examples/NumberField/dense.svelte
new file mode 100644
index 00000000..5ce717ae
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/dense.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { NumberField, Row, Col } from 'svelte-materialify/src';
+</script>
+
+<Row>
+  <Col>
+    <NumberField dense filled>Filled</NumberField>
+    <br />
+    <NumberField dense>Regular</NumberField>
+    <br />
+    <NumberField dense rounded filled>Filled</NumberField>
+  </Col>
+  <Col>
+    <NumberField dense outlined>Outlined</NumberField>
+    <br />
+    <NumberField dense solo placeholder="Solo" />
+    <br />
+    <NumberField dense rounded outlined>Outlined</NumberField>
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/disabled.svelte b/packages/docs/src/examples/NumberField/disabled.svelte
new file mode 100644
index 00000000..39935d35
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/disabled.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { NumberField, Row, Col } from 'svelte-materialify/src';
+</script>
+
+<Row>
+  <Col>
+    <NumberField disabled value="Hello">Regular</NumberField>
+    <NumberField disabled filled value="Hello">Filled</NumberField>
+    <NumberField disabled outlined value="Hello">Outlined</NumberField>
+    <NumberField disabled solo value="Hello" />
+  </Col>
+  <Col>
+    <NumberField readonly value="Hello">Regular</NumberField>
+    <NumberField readonly filled value="Hello">Filled</NumberField>
+    <NumberField readonly outlined value="Hello">Outlined</NumberField>
+    <NumberField readonly solo value="Hello" />
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/icons.svelte b/packages/docs/src/examples/NumberField/icons.svelte
new file mode 100644
index 00000000..2f1e7648
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/icons.svelte
@@ -0,0 +1,117 @@
+<script>
+  import { NumberField, Row, Col, Icon } from 'svelte-materialify/src';
+  import { mdiHome } from '@mdi/js';
+</script>
+
+<Row>
+  <Col>
+    <NumberField>
+      <div slot="prepend-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend Outer
+    </NumberField>
+    <br />
+    <NumberField>
+      <div slot="prepend">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend
+    </NumberField>
+    <br />
+    <NumberField>
+      <div slot="append-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Append Outer
+    </NumberField>
+    <br />
+    <NumberField>
+      <div slot="append">
+        <Icon path={mdiHome} />
+      </div>
+      Append
+    </NumberField>
+    <br />
+    <NumberField filled>
+      <div slot="prepend-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend Outer
+    </NumberField>
+    <br />
+    <NumberField filled>
+      <div slot="prepend">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend
+    </NumberField>
+    <br />
+    <NumberField filled>
+      <div slot="append-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Append Outer
+    </NumberField>
+    <br />
+    <NumberField filled>
+      <div slot="append">
+        <Icon path={mdiHome} />
+      </div>
+      Append
+    </NumberField>
+  </Col>
+  <Col>
+    <NumberField solo placeholder="Prepend Outer">
+      <div slot="prepend-outer">
+        <Icon path={mdiHome} />
+      </div>
+    </NumberField>
+    <br />
+    <NumberField solo placeholder="Prepend">
+      <div slot="prepend">
+        <Icon path={mdiHome} />
+      </div>
+    </NumberField>
+    <br />
+    <NumberField solo placeholder="Append Outer">
+      <div slot="append-outer">
+        <Icon path={mdiHome} />
+      </div>
+    </NumberField>
+    <br />
+    <NumberField solo placeholder="Append">
+      <div slot="append">
+        <Icon path={mdiHome} />
+      </div>
+    </NumberField>
+    <br />
+    <NumberField outlined>
+      <div slot="prepend-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend Outer
+    </NumberField>
+    <br />
+    <NumberField outlined>
+      <div slot="prepend">
+        <Icon path={mdiHome} />
+      </div>
+      Prepend
+    </NumberField>
+    <br />
+    <NumberField outlined>
+      <div slot="append-outer">
+        <Icon path={mdiHome} />
+      </div>
+      Append Outer
+    </NumberField>
+    <br />
+    <NumberField outlined>
+      <div slot="append">
+        <Icon path={mdiHome} />
+      </div>
+      Append
+    </NumberField>
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/label.svelte b/packages/docs/src/examples/NumberField/label.svelte
new file mode 100644
index 00000000..9244626b
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/label.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { NumberField } from 'svelte-materialify/src';
+</script>
+
+<NumberField hint="This is a hint">This is the <b>bold</b> label.</NumberField>
diff --git a/packages/docs/src/examples/NumberField/validation.svelte b/packages/docs/src/examples/NumberField/validation.svelte
new file mode 100644
index 00000000..f1e722c3
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/validation.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { Row, Col, NumberField } from 'svelte-materialify/src';
+</script>
+
+<Row>
+  <Col>
+    <NumberField min={3} value={3}>min=3</NumberField>
+    <NumberField max={3} value={3}>max=3</NumberField>
+  </Col>
+  <Col>
+    <NumberField step={10}>step=10</NumberField>
+    <NumberField step={10} value={3}>step=1.5 min=3 max=6</NumberField>
+  </Col>
+</Row>
diff --git a/packages/docs/src/examples/NumberField/variants.svelte b/packages/docs/src/examples/NumberField/variants.svelte
new file mode 100644
index 00000000..15136496
--- /dev/null
+++ b/packages/docs/src/examples/NumberField/variants.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { Row, Col, NumberField } from 'svelte-materialify/src';
+</script>
+
+<Row>
+  <Col>
+    <NumberField>Regular</NumberField>
+    <NumberField filled>Filled</NumberField>
+    <NumberField outlined>Outlined</NumberField>
+    <NumberField solo placeholder="Solo" />
+  </Col>
+  <Col>
+    <NumberField placeholder="Placeholder">Regular</NumberField>
+    <NumberField placeholder="Placeholder" filled>Filled</NumberField>
+    <NumberField placeholder="Placeholder" outlined>Outlined</NumberField>
+    <NumberField placeholder="Placeholder" solo />
+  </Col>
+</Row>
diff --git a/packages/docs/src/routes/components/number-field.md b/packages/docs/src/routes/components/number-field.md
new file mode 100644
index 00000000..e286ac2e
--- /dev/null
+++ b/packages/docs/src/routes/components/number-field.md
@@ -0,0 +1,76 @@
+---
+title: Number Field Component
+description: The number field component accepts numeric input from users.
+keywords: number fields, svelte materialify number field, svelte number field component, svelte number input component
+related:
+  - components/selects
+  - components/sliders
+  - api/NumberField
+---
+
+# Number Fields
+
+Number fields components are used for collecting numerical input from users.
+
+The `value` property on a `NumberField` is a number, not a string. (This is unlike HTML `<input type="number" />`, but is like Svelte's normal [numeric binding](https://svelte.dev/tutorial/numeric-inputs).)
+
+<Components.Alert type='info'>
+Any property which is not in the API list will be directly forwarded to the input element.
+</Components.Alert>
+
+## API
+
+- [NumberField](/api/NumberField/)
+
+## Usage
+
+<Components.Example file="NumberField/variants" />
+
+## Examples
+
+### Built-In Validation
+
+Number fields accept the html `min`, `max`, and `step` properties and show validation hints as needed.
+<Components.Example file="NumberField/validation" />
+
+### Custom Validation
+
+In addition to the `min`, `max`, and `step` props, `NumberField` exposes validation through the `rules` prop. The prop accepts a array of callbacks with the input value as an arguement. The callback should return a string message if validation fails, or `false` if it passes. By default this runs a check whenever the user types something, to delay the validation till the input loses focus use `validateOnBlur`.
+
+```js
+const rules = [
+  (value) => {
+    if (condition) return 'Error Message';
+    return false;
+  },
+];
+```
+
+<Components.Example file="NumberField/customValidation" />
+
+### Dense
+
+You can reduces the number field height with `dense` prop.
+<Components.Example file="NumberField/dense" />
+
+### Disabled and Readonly
+
+Number fields can be `disabled` or `readonly`.
+<Components.Example file="NumberField/disabled" />
+
+### Icons
+
+You can add icons to the number field with `prepend`, `append`, `prepend-outer` and `append-outer` slots.
+<Components.Example file="NumberField/icons" />
+
+### Clearable
+
+When `clearable`, you can customize the clear icon with clear-icon.
+<Components.Example file="NumberField/clearable" />
+
+### Label
+
+Number field label can be defined in the default slot.
+<Components.Example file="NumberField/label" />
+
+

From 1af2a163372b428c5edc119be6555e0e5d7c1619 Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 22:42:13 -0400
Subject: [PATCH 3/9] lint(NumberField): Fix linting errors

---
 .../components/NumberField/NumberField.svelte  | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
index 237bef5b..2118cf63 100644
--- a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
+++ b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
@@ -40,21 +40,21 @@
     errorMessages = rules.map((r) => r(value)).filter((r) => typeof r === 'string');
     if (!inputElement.checkValidity()) {
       if (inputElement.badInput) {
-        errorMessages.push(`Please enter a number.`);
-      };
-      if(inputElement.validity.rangeUnderflow) {
+        errorMessages.push('Please enter a number.');
+      }
+      if (inputElement.validity.rangeUnderflow) {
         errorMessages.push(`Must be ${min} or greater.`);
       }
-      if(inputElement.validity.rangeOverflow) {
+      if (inputElement.validity.rangeOverflow) {
         errorMessages.push(`Must be ${max} or less.`);
       }
-      if(inputElement.validity.stepMismatch) {
+      if (inputElement.validity.stepMismatch) {
         errorMessages.push(`Must be an increment of ${step}`);
       }
-      if(inputElement.validity.tooLong) {
+      if (inputElement.validity.tooLong) {
         errorMessages.push('Too long.');
       }
-      if(inputElement.validity.tooShort) {
+      if (inputElement.validity.tooShort) {
         errorMessages.push('Too short.');
       }
     }
@@ -65,8 +65,6 @@
     return error;
   }
 
-
-
   function onFocus() {
     focused = true;
   }
@@ -80,7 +78,7 @@
     value = null;
   }
 
-  function onInput(e) {
+  function onInput() {
     if (!validateOnBlur) validate();
   }
 </script>

From 5d2c7dc8684c0f24a556c04f0cfc0a193a211ff8 Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 23:52:51 -0400
Subject: [PATCH 4/9] fix(docs): Include NumberField in doc routes

---
 packages/docs/src/util/routes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/docs/src/util/routes.js b/packages/docs/src/util/routes.js
index 7d4471e3..64f1ee12 100644
--- a/packages/docs/src/util/routes.js
+++ b/packages/docs/src/util/routes.js
@@ -63,6 +63,7 @@ export default [
         text: 'Forms',
         items: [
           { text: 'Text Field', href: '/components/text-field/' },
+          { text: 'Number Field', href: '/components/number-field/' },
           { text: 'Textarea', href: '/components/textarea/' },
           { text: 'Selects', href: '/components/selects/' },
           { text: 'Sliders', href: '/components/sliders/' },

From ca2824eb847828118f9f1cb12a9a3e21cdb5183b Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 23:53:17 -0400
Subject: [PATCH 5/9] style(docs): Improve NumberField validation example
 layout

---
 packages/docs/src/examples/NumberField/validation.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/examples/NumberField/validation.svelte b/packages/docs/src/examples/NumberField/validation.svelte
index f1e722c3..dbaeeb9e 100644
--- a/packages/docs/src/examples/NumberField/validation.svelte
+++ b/packages/docs/src/examples/NumberField/validation.svelte
@@ -4,11 +4,11 @@
 
 <Row>
   <Col>
-    <NumberField min={3} value={3}>min=3</NumberField>
-    <NumberField max={3} value={3}>max=3</NumberField>
+    <NumberField class="mb-6" min={3} value={3}>min=3</NumberField>
+    <NumberField class="mb-6" max={3} value={3}>max=3</NumberField>
   </Col>
   <Col>
-    <NumberField step={10}>step=10</NumberField>
-    <NumberField step={10} value={3}>step=1.5 min=3 max=6</NumberField>
+    <NumberField class="mb-6" step={10}>step=10</NumberField>
+    <NumberField class="mb-6" step={10} value={3}>step=1.5 min=3 max=6</NumberField>
   </Col>
 </Row>

From e6af23e3b3cc239e0e7161a0f5a43a92f8c47035 Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 23:53:49 -0400
Subject: [PATCH 6/9] feat(docs/NumberField): Move value to subheading of usage

---
 packages/docs/src/routes/components/number-field.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/routes/components/number-field.md b/packages/docs/src/routes/components/number-field.md
index e286ac2e..1efabc1e 100644
--- a/packages/docs/src/routes/components/number-field.md
+++ b/packages/docs/src/routes/components/number-field.md
@@ -12,8 +12,6 @@ related:
 
 Number fields components are used for collecting numerical input from users.
 
-The `value` property on a `NumberField` is a number, not a string. (This is unlike HTML `<input type="number" />`, but is like Svelte's normal [numeric binding](https://svelte.dev/tutorial/numeric-inputs).)
-
 <Components.Alert type='info'>
 Any property which is not in the API list will be directly forwarded to the input element.
 </Components.Alert>
@@ -24,8 +22,15 @@ Any property which is not in the API list will be directly forwarded to the inpu
 
 ## Usage
 
+### Value
+
+The `value` property on a `NumberField` is a number, not a string. (This is unlike HTML `<input type="number" />`, but is like Svelte's normal [numeric binding](https://svelte.dev/tutorial/numeric-inputs).)
+
+### Basic Use
+
 <Components.Example file="NumberField/variants" />
 
+
 ## Examples
 
 ### Built-In Validation

From efe80d4046c0f5aea0841d822327491aa910dc30 Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Tue, 23 Mar 2021 23:54:08 -0400
Subject: [PATCH 7/9] feat(NumberField): Add sveltedoc annotations to improve
 API refs

---
 .../components/NumberField/NumberField.svelte | 111 +++++++++++++++++-
 1 file changed, 105 insertions(+), 6 deletions(-)

diff --git a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
index 2118cf63..2a92ecf8 100644
--- a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
+++ b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
@@ -1,39 +1,138 @@
 <script>
-  import Input from '../Input';
+  /**
+   * A numeric input field.
+   * 
+   * @component NumberField
+   */
+
+import Input from '../Input';
   import Icon from '../Icon';
   import uid from '../../internal/uid';
   import clearIcon from '../../internal/Icons/close';
 
   let klass = '';
+  /**
+   * Class name(s) to add to the Input element
+   * @type {string}
+   */
   export { klass as class };
+  /**
+   * The value of the NumberField
+   * @type {number}
+   */
   export let value = null;
+  /**
+   * The lowest allowed number.
+   * @type {number}
+   */
+  export let min = null;
+  /**
+   * The highest allowed number.
+   * @type {number}
+   */
+  export let max = null;
+  /**
+   * The number by which to increment the value.
+   * @type {number}
+   */
+  export let step = null;
   export let color = 'primary';
+  /**
+   * Whether the background is filled or not
+   * @type {boolean}
+   */
   export let filled = false;
+  /**
+   * Whether to display only the value, and not the label, if a value is present
+   * @type {boolean}
+   */
   export let solo = false;
+  /**
+   * Whether to outline the input area with a stroke.
+   * @type {boolean}
+   */
   export let outlined = false;
+  /**
+   * Use a flat/2-d display
+   * @type {boolean}
+   */
   export let flat = false;
+  /**
+   * Use a tighter (denser) layout
+   * @type {boolean}
+   */
   export let dense = false;
+  /**
+   * Round the edges
+   * @type {boolean}
+   */
   export let rounded = false;
+  /**
+   * Include an "x" to click and clear the input
+   * @type {boolean}
+   */
   export let clearable = false;
+  /**
+   * Restrict the field from user editing
+   * @type {boolean}
+   */
   export let readonly = false;
   export let disabled = false;
+  /**
+   * Placeholder value until input occurs
+   * @type {string}
+   */
   export let placeholder = null;
+  /**
+   * Hints just below the input
+   * @type {string}
+   */
   export let hint = '';
+  /**
+   * Additional messages to display just below the input
+   * @type {string[]}
+   */
   export let messages = [];
+  /**
+   * Array of callbacks used to validate the input; return a string to show error
+   * rules = [ (value) => errorMessage || false ]
+   * @type {function}
+   */
   export let rules = [];
+  /**
+   * The maximum number of error messages to show at any given time.
+   * @type {number}
+   */
   export let errorCount = 1;
+  /**
+   * When true, wait until blur to check validation.
+   * When false, validate on input
+   * @type {boolean}
+   */
   export let validateOnBlur = false;
+  /**
+   * Whether validation has failed/whether to apply error class
+   * @readonly
+   * @type {error}
+   */
   export let error = false;
+  /**
+   * Whether to apply the success clas
+   * @type {boolean}
+   */
   export let success = false;
   export let id = `s-input-${uid(5)}`;
+  /**
+   * @type {string}
+   */
   export let style = null;
+  /**
+   * @type {HTMLInputElement}
+   */
   export let inputElement = null;
-  export let min = null;
-  export let max = null;
-  export let step = null;
 
   let focused = false;
-  $: labelActive = !!placeholder || (inputElement && inputElement.value !== null) || focused;
+  $: labelActive = !!placeholder || value !== null || focused;
   let errorMessages = [];
 
   export function validate() {
@@ -134,7 +233,7 @@
         {...$$restProps} />
     </div>
 
-    {#if clearable && value !== ''}
+    {#if clearable && value !== null}
       <div on:click={clear} style="cursor:pointer">
         <!-- Slot for the icon when `clearable` is true. -->
         <slot name="clear-icon">

From 57768cc142e48db8c7e0aecb1b35effcee02eeb5 Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Wed, 24 Mar 2021 00:01:20 -0400
Subject: [PATCH 8/9] lint(NumberField): Remove trailing space

---
 .../src/components/NumberField/NumberField.svelte               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
index 2a92ecf8..f154272e 100644
--- a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
+++ b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * A numeric input field.
-   * 
+   *
    * @component NumberField
    */
 

From 8cf5175cb2af31519acc22f14067b84c4692b80c Mon Sep 17 00:00:00 2001
From: Greg Ristow <gristow@utheory.com>
Date: Fri, 26 Mar 2021 00:41:37 -0400
Subject: [PATCH 9/9] fix(types/select.d.ts): Value can be single value or
 array

When `multiple` prop is false, the value of a `<Select />` is a single value. Updated .d.ts to reflect this.
---
 packages/svelte-materialify/@types/Select.d.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/svelte-materialify/@types/Select.d.ts b/packages/svelte-materialify/@types/Select.d.ts
index c13458db..cc8b4180 100644
--- a/packages/svelte-materialify/@types/Select.d.ts
+++ b/packages/svelte-materialify/@types/Select.d.ts
@@ -5,8 +5,11 @@ interface SelectProps {
   class?: string;
   /** Whether select is opened. */
   active?: boolean;
-  /** Value of the select. */
-  value?: number[] | string[];
+  /**
+   * Value of the select. 
+   * If multiple is true, this will be an array; otherwise a single value.
+   */
+  value?: (number[] | string[]) | number | string;
   /** List of items to select from. */
   items?: { name: string | number, value: string | number }[];
   /** Whether select is the `filled` material design variant. */