TheComputerM · gristow · Mar 15, 2021 · Mar 24, 2021 · Mar 24, 2021 · Mar 24, 2021
diff --git a/packages/docs/src/examples/NumberField/clearable.svelte 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,14 @@
+<script>
+  import { Row, Col, NumberField } from 'svelte-materialify/src';
+</script>
+
+<Row>
+  <Col>
+    <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 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>
diff --git a/packages/docs/src/examples/NumberField/variants.svelte 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
@@ -0,0 +1,81 @@
+---
+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.
+
+<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
+
+### 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
+
+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" />
+
+
diff --git 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/' },

diff --git a/packages/svelte-materialify/@types/NumberField.d.ts 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;