[Typed] Use stimulus values api to set default values

Author: nexxome

src/Typed/Resources/assets/dist/controller.js

@@ -4,24 +4,24 @@ import Typed from 'typed.js';
 class default_1 extends Controller {
     connect() {
         const options = {
-            strings: this.stringsValue || null,
-            typeSpeed: this.typeSpeedValue || 30,
-            smartBackspace: this.smartBackspaceValue || true,
-            startDelay: this.startDelayValue || 0,
-            backSpeed: this.backSpeedValue || 0,
-            shuffle: this.shuffleValue || false,
-            backDelay: this.backDelayValue || 700,
-            fadeOut: this.fadeOutValue || false,
-            fadeOutClass: this.fadeOutClassValue || 'typed-fade-out',
-            fadeOutDelay: this.fadeOutDelayValue || 500,
-            loop: this.loopValue || false,
-            loopCount: this.loopCountValue || Infinity,
-            showCursor: this.showCursorValue || true,
-            cursorChar: this.cursorCharValue || '.',
-            autoInsertCss: this.autoInsertCssValue || true,
-            attr: this.attrValue || null,
-            bindInputFocusEvents: this.bindInputFocusEventsValue || false,
-            contentType: this.contentTypeValue || 'html',
+            strings: this.stringsValue,
+            typeSpeed: this.typeSpeedValue,
+            smartBackspace: this.smartBackspaceValue,
+            startDelay: this.startDelayValue,
+            backSpeed: this.backSpeedValue,
+            shuffle: this.shuffleValue,
+            backDelay: this.backDelayValue,
+            fadeOut: this.fadeOutValue,
+            fadeOutClass: this.fadeOutClassValue,
+            fadeOutDelay: this.fadeOutDelayValue,
+            loop: this.loopValue,
+            loopCount: this.loopCountValue,
+            showCursor: this.showCursorValue,
+            cursorChar: this.cursorCharValue,
+            autoInsertCss: this.autoInsertCssValue,
+            attr: this.attrValue,
+            bindInputFocusEvents: this.bindInputFocusEventsValue,
+            contentType: this.contentTypeValue,
         };
         this._dispatchEvent('typed:pre-connect', { options });
         const typed = new Typed(this.element, options);
@@ -33,23 +33,23 @@ class default_1 extends Controller {
 }
 default_1.values = {
     strings: Array,
-    typeSpeed: Number,
-    smartBackspace: Boolean,
+    typeSpeed: { type: Number, default: 30 },
+    smartBackspace: { type: Boolean, default: true },
     startDelay: Number,
     backSpeed: Number,
     shuffle: Boolean,
-    backDelay: Number,
+    backDelay: { type: Number, default: 700 },
     fadeOut: Boolean,
-    fadeOutClass: String,
-    fadeOutDelay: Number,
+    fadeOutClass: { type: String, default: 'typed-fade-out' },
+    fadeOutDelay: { type: Number, default: 500 },
     loop: Boolean,
-    loopCount: Number,
-    showCursor: Boolean,
-    cursorChar: String,
-    autoInsertCss: Boolean,
+    loopCount: { type: Number, default: Infinity },
+    showCursor: { type: Boolean, default: true },
+    cursorChar: { type: String, default: '.' },
+    autoInsertCss: { type: Boolean, default: true },
     attr: String,
     bindInputFocusEvents: Boolean,
-    contentType: String,
+    contentType: { type: String, default: 'html' },
 };
 
 export { default_1 as default };

src/Typed/Resources/assets/src/controller.ts

@@ -15,45 +15,45 @@ import Typed from 'typed.js';
 export default class extends Controller {
     static values = {
         strings: Array,
-        typeSpeed: Number,
-        smartBackspace: Boolean,
+        typeSpeed: { type: Number, default: 30 },
+        smartBackspace: { type: Boolean, default: true },
         startDelay: Number,
         backSpeed: Number,
         shuffle: Boolean,
-        backDelay: Number,
+        backDelay: { type: Number, default: 700 },
         fadeOut: Boolean,
-        fadeOutClass: String,
-        fadeOutDelay: Number,
+        fadeOutClass: { type: String, default: 'typed-fade-out' },
+        fadeOutDelay: { type: Number, default: 500 },
         loop: Boolean,
-        loopCount: Number,
-        showCursor: Boolean,
-        cursorChar: String,
-        autoInsertCss: Boolean,
+        loopCount: { type: Number, default: Infinity },
+        showCursor: { type: Boolean, default: true },
+        cursorChar: { type: String, default: '.' },
+        autoInsertCss: { type: Boolean, default: true },
         attr: String,
         bindInputFocusEvents: Boolean,
-        contentType: String,
+        contentType: { type: String, default: 'html' },
     };
 
     connect() {
         const options = {
-            strings: this.stringsValue || null,
-            typeSpeed: this.typeSpeedValue || 30,
-            smartBackspace: this.smartBackspaceValue || true,
-            startDelay: this.startDelayValue || 0,
-            backSpeed: this.backSpeedValue || 0,
-            shuffle: this.shuffleValue || false,
-            backDelay: this.backDelayValue || 700,
-            fadeOut: this.fadeOutValue || false,
-            fadeOutClass: this.fadeOutClassValue || 'typed-fade-out',
-            fadeOutDelay: this.fadeOutDelayValue || 500,
-            loop: this.loopValue || false,
-            loopCount: this.loopCountValue || Infinity,
-            showCursor: this.showCursorValue || true,
-            cursorChar: this.cursorCharValue || '.',
-            autoInsertCss: this.autoInsertCssValue || true,
-            attr: this.attrValue || null,
-            bindInputFocusEvents: this.bindInputFocusEventsValue || false,
-            contentType: this.contentTypeValue || 'html',
+            strings: this.stringsValue,
+            typeSpeed: this.typeSpeedValue,
+            smartBackspace: this.smartBackspaceValue,
+            startDelay: this.startDelayValue,
+            backSpeed: this.backSpeedValue,
+            shuffle: this.shuffleValue,
+            backDelay: this.backDelayValue,
+            fadeOut: this.fadeOutValue,
+            fadeOutClass: this.fadeOutClassValue,
+            fadeOutDelay: this.fadeOutDelayValue,
+            loop: this.loopValue,
+            loopCount: this.loopCountValue,
+            showCursor: this.showCursorValue,
+            cursorChar: this.cursorCharValue,
+            autoInsertCss: this.autoInsertCssValue,
+            attr: this.attrValue,
+            bindInputFocusEvents: this.bindInputFocusEventsValue,
+            contentType: this.contentTypeValue,
         };
 
         this._dispatchEvent('typed:pre-connect', { options });