@mcwv/textfield - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

package.json

 {
   "name": "@mcwv/textfield",
   "description": "The Vue Material Adapter for the web textfield component",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
@@ -19,11 +19,11 @@ "main": "dist/mcwv.textfield.min.js",
   "dependencies": {
-    "@material/dom": "^4.0.0",
-    "@material/textfield": "^4.0.0",
-    "@mcwv/base": "^0.14.0",
-    "@mcwv/floating-label": "^0.14.0",
-    "@mcwv/line-ripple": "^0.14.0",
-    "@mcwv/notched-outline": "^0.14.0",
-    "@mcwv/ripple": "^0.14.0"
+    "@material/dom": "^5.1.0",
+    "@material/textfield": "^5.1.0",
+    "@mcwv/base": "^0.15.0",
+    "@mcwv/floating-label": "^0.15.0",
+    "@mcwv/line-ripple": "^0.15.0",
+    "@mcwv/notched-outline": "^0.15.0",
+    "@mcwv/ripple": "^0.15.0"
   },
-  "gitHead": "78fd659b77df5ddf640cacf3c86edd798f679972"
+  "gitHead": "b22bec8a9ecd8b859f8435c2fd5ef3865ba22f64"
 }

textfield.js

@@ -11,2 +11,3 @@ /* eslint-disable quote-props */
 import TextfieldIcon from './textfield-icon.js';
+import { matches } from '@material/dom/ponyfill';
 
@@ -61,3 +62,3 @@ export default {
       text: this.value,
-      rootClasses: {
+      classes: {
         'mdc-textfield': true,
@@ -76,2 +77,3 @@ 'mdc-text-field': true,
       },
+      styles: {},
       inputClasses: {
@@ -133,3 +135,3 @@ 'mdc-text-field__input': true,
     dense() {
-      this.$set(this.rootClasses, 'mdc-text-field--dense', this.dense);
+      this.$set(this.classes, 'mdc-text-field--dense', this.dense);
     },
@@ -149,6 +151,6 @@ value(value) {
           addClass: className => {
-            this.$set(this.rootClasses, className, true);
+            this.$set(this.classes, className, true);
           },
           removeClass: className => {
-            this.$delete(this.rootClasses, className);
+            this.$delete(this.classes, className);
           },
@@ -208,4 +210,22 @@ hasClass: className => {
 
-    if (this.textbox) {
-      this.ripple = new RippleBase(this);
+    const isTextArea = this.$refs.root.classList.contains(
+      'mdc-text-field--textarea',
+    );
+    const isOutlined = this.$refs.root.classList.contains(
+      'mdc-text-field--outlined',
+    );
+
+    if (!isTextArea && !isOutlined) {
+      this.ripple = new RippleBase(this, {
+        isSurfaceActive: () => matches(this.$refs.input, ':active'),
+        registerInteractionHandler: (evtType, handler) => {
+          this.$refs.input.addEventListener(evtType, handler, applyPassive());
+        },
+        deregisterInteractionHandler: (evtType, handler) =>
+          this.$refs.input.removeEventListener(
+            evtType,
+            handler,
+            applyPassive(),
+          ),
+      });
       this.ripple.init();
@@ -330,2 +350,9 @@ }
       rootNodes.push(
+        createElement('span', {
+          class: 'mdc-text-field__ripple',
+
+          ref: 'ripple',
+        }),
+      );
+      rootNodes.push(
         createElement('input', {
@@ -342,2 +369,3 @@ class: this.inputClasses,
             'aria-controls': this.inputAriaControls,
+            'aria-labelledby': `label-${this.vma_uid_}`,
           },
@@ -358,3 +386,3 @@ ref: 'input',
           {
-            attrs: { for: this.vma_uid_ },
+            attrs: { id: `label-${this.vma_uid_}` },
             ref: 'labelEl',
@@ -401,5 +429,6 @@ },
     const rootEl = createElement(
-      'div',
+      'label',
       {
-        class: this.rootClasses,
+        class: this.classes,
+        style: this.styles,
         ref: 'root',
@@ -406,0 +435,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

428599

increased by1.28%

Lines of code

1219

increased by1.92%

Dependency changes

• + Added@material/animation@5.1.0(transitive)

• + Added@material/base@5.1.0(transitive)

• + Added@material/density@5.1.0(transitive)

• + Added@material/dom@5.1.0(transitive)

• + Added@material/feature-targeting@5.1.0(transitive)

• + Added@material/floating-label@5.1.0(transitive)

• + Added@material/line-ripple@5.1.0(transitive)

• + Added@material/notched-outline@5.1.0(transitive)

• + Added@material/ripple@5.1.0(transitive)

• + Added@material/rtl@5.1.0(transitive)

• + Added@material/shape@5.1.0(transitive)

• + Added@material/textfield@5.1.0(transitive)

• + Added@material/theme@5.1.0(transitive)

• + Added@material/typography@5.1.0(transitive)

• + Added@mcwv/base@0.15.0(transitive)

• + Added@mcwv/floating-label@0.15.0(transitive)

• + Added@mcwv/line-ripple@0.15.0(transitive)

• + Added@mcwv/notched-outline@0.15.0(transitive)

• + Added@mcwv/ripple@0.15.0(transitive)

• - Removed@material/animation@4.0.0(transitive)

• - Removed@material/base@4.0.0(transitive)

• - Removed@material/density@4.0.0(transitive)

• - Removed@material/dom@4.0.0(transitive)

• - Removed@material/feature-targeting@4.0.0(transitive)

• - Removed@material/floating-label@4.0.0(transitive)

• - Removed@material/line-ripple@4.0.0(transitive)

• - Removed@material/notched-outline@4.0.0(transitive)

• - Removed@material/ripple@4.0.0(transitive)

• - Removed@material/rtl@4.0.0(transitive)

• - Removed@material/shape@4.0.0(transitive)

• - Removed@material/textfield@4.0.0(transitive)

• - Removed@material/theme@4.0.0(transitive)

• - Removed@material/typography@4.0.0(transitive)

• - Removed@mcwv/base@0.14.0(transitive)

• - Removed@mcwv/floating-label@0.14.0(transitive)

• - Removed@mcwv/line-ripple@0.14.0(transitive)

• - Removed@mcwv/notched-outline@0.14.0(transitive)

• - Removed@mcwv/ripple@0.14.0(transitive)

• Updated@material/dom@^5.1.0

• Updated@material/textfield@^5.1.0

• Updated@mcwv/base@^0.15.0

• Updated@mcwv/floating-label@^0.15.0

• Updated@mcwv/line-ripple@^0.15.0

• Updated@mcwv/notched-outline@^0.15.0

• Updated@mcwv/ripple@^0.15.0