feat: updated Text Field for MDC v10

Author: hperrin

README.md

@@ -226,20 +226,20 @@ Update Progress Checklist:
 - [x] Drawers
 - [x] Image List
 - [x] Checkboxes
-- [ ] Floating Label
+- [x] Floating Label
 - [x] Form Fields
-- [ ] Line Ripple
-- [ ] Notched Outline
+- [x] Line Ripple
+- [x] Notched Outline
 - [x] Radio Buttons
 - [ ] Select Menus
   - [ ] Select Helper Text
   - [ ] Select Icon
 - [x] Sliders
 - [x] Switches
-- [ ] Text Field
-  - [ ] Text Field Character Counter
-  - [ ] Text Field Helper Text
-  - [ ] Text Field Icon
+- [x] Text Field
+  - [x] Text Field Character Counter
+  - [x] Text Field Helper Text
+  - [x] Text Field Icon
 - [x] Linear Progress
 - [x] Lists
 - [x] Menu Surface

packages/ripple/Ripple.js

@@ -13,11 +13,16 @@ export default function Ripple(
     unbounded = false,
     disabled = false,
     color = null,
+    active = null,
     addClass = (className) => node.classList.add(className),
     removeClass = (className) => node.classList.remove(className),
     addStyle = (name, value) =>
       (sentinel || node).style.setProperty(name, value),
-    active = null,
+    registerInteractionHandler = (evtType, handler) =>
+      node.addEventListener(evtType, handler, applyPassive()),
+    deregisterInteractionHandler = (evtType, handler) =>
+      node.removeEventListener(evtType, handler, applyPassive()),
+    initPromise = Promise.resolve(),
   } = {}
 ) {
   let instance;
@@ -61,8 +66,7 @@ export default function Ripple(
             handler,
             applyPassive()
           ),
-        deregisterInteractionHandler: (evtType, handler) =>
-          node.removeEventListener(evtType, handler, applyPassive()),
+        deregisterInteractionHandler,
         deregisterResizeHandler: (handler) =>
           window.removeEventListener('resize', handler),
         getWindowPageOffset: () => ({
@@ -79,18 +83,22 @@ export default function Ripple(
             handler,
             applyPassive()
           ),
-        registerInteractionHandler: (evtType, handler) =>
-          node.addEventListener(evtType, handler, applyPassive()),
+        registerInteractionHandler,
         registerResizeHandler: (handler) =>
           window.addEventListener('resize', handler),
         removeClass,
         updateCssVariable: addStyle,
       });
-      instance.init();
-      instance.setUnbounded(unbounded);
+
+      initPromise.then(() => {
+        instance.init();
+        instance.setUnbounded(unbounded);
+      });
     } else if (instance && !ripple) {
-      instance.destroy();
-      instance = null;
+      initPromise.then(() => {
+        instance.destroy();
+        instance = null;
+      });
     }
 
     if (!ripple && unbounded) {
@@ -137,6 +145,10 @@ export default function Ripple(
         active: null,
         ...props,
       });
+      // Note that you can't change
+      // registerInteractionHandler,
+      // deregisterInteractionHandler,
+      // and initPromise
       handleProps();
     },
 

packages/textfield/HelperLine.js

@@ -0,0 +1,14 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Div from '@smui/common/Div.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-text-field-helper-line',
+  component: Div,
+  forwardEvents: [
+    'SMUI:textfield:helper-text:id',
+    'SMUI:textfield:helper-text:mount',
+    'SMUI:textfield:helper-text:unmount',
+    'SMUI:textfield:character-counter:mount',
+    'SMUI:textfield:character-counter:unmount',
+  ],
+});

packages/textfield/Input.svelte

@@ -6,11 +6,12 @@
     [className]: true,
     'mdc-text-field__input': true,
   })}
-  {type}
-  {...valueProp}
   on:change={(e) => (type === 'file' || type === 'range') && valueUpdater(e)}
   on:input={(e) => type !== 'file' && valueUpdater(e)}
   on:change={changeHandler}
+  {type}
+  {...valueProp}
+  {...internalAttrs}
   {...exclude($$props, [
     'use',
     'class',
@@ -49,6 +50,7 @@
   export let updateInvalid = true;
 
   let element;
+  let internalAttrs = {};
   let valueProp = {};
 
   $: if (type === 'file') {
@@ -95,6 +97,28 @@
     }
   }
 
+  export function getAttr(name) {
+    return name in internalAttrs
+      ? internalAttrs[name]
+      : getElement().getAttribute(name);
+  }
+
+  export function addAttr(name, value) {
+    if (internalAttrs[name] !== value) {
+      internalAttrs[name] = value;
+    }
+  }
+
+  export function removeAttr(name) {
+    if (!(name in internalAttrs) || internalAttrs[name] != null) {
+      internalAttrs[name] = undefined;
+    }
+  }
+
+  export function focus() {
+    getElement().focus();
+  }
+
   export function getElement() {
     return element;
   }

packages/textfield/Prefix.js

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Span from '@smui/common/Span.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-text-field__affix mdc-text-field__affix--prefix',
+  component: Span,
+});

packages/textfield/Suffix.js

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Span from '@smui/common/Span.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-text-field__affix mdc-text-field__affix--suffix',
+  component: Span,
+});

packages/textfield/Textarea.svelte

@@ -6,8 +6,9 @@
     [className]: true,
     'mdc-text-field__input': true,
   })}
-  bind:value
   on:change={changeHandler}
+  bind:value
+  {...internalAttrs}
   {...exclude($$props, [
     'use',
     'class',
@@ -42,6 +43,7 @@
   export let updateInvalid = true;
 
   let element;
+  let internalAttrs = {};
 
   onMount(() => {
     if (updateInvalid) {
@@ -56,6 +58,28 @@
     }
   }
 
+  export function getAttr(name) {
+    return name in internalAttrs
+      ? internalAttrs[name]
+      : getElement().getAttribute(name);
+  }
+
+  export function addAttr(name, value) {
+    if (internalAttrs[name] !== value) {
+      internalAttrs[name] = value;
+    }
+  }
+
+  export function removeAttr(name) {
+    if (!(name in internalAttrs) || internalAttrs[name] != null) {
+      internalAttrs[name] = undefined;
+    }
+  }
+
+  export function focus() {
+    getElement().focus();
+  }
+
   export function getElement() {
     return element;
   }