BREAKING CHANGE: refactor: make all options camelCase

pulsardev · Mar 28, 2021 · 9041d2f · 9041d2f
1 parent 4a2297b
commit 9041d2f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/src/components/VStep.vue b/src/components/VStep.vue
@@ -148,33 +148,33 @@ export default {
     },
     createHighlight () {
       if (this.isHighlightEnabled()) {
-        document.body.classList.add(HIGHLIGHT.CLASSES.ACTIVE)
+        document.body.classList.add(HIGHLIGHT.classes.active)
         const transitionValue = window.getComputedStyle(this.targetElement).getPropertyValue('transition')
 
         // Make sure our background doesn't flick on transitions
         if (transitionValue !== 'all 0s ease 0s') {
-          this.targetElement.style.transition = `${transitionValue}, ${HIGHLIGHT.TRANSITION}`
+          this.targetElement.style.transition = `${transitionValue}, ${HIGHLIGHT.transition}`
         }
 
-        this.targetElement.classList.add(HIGHLIGHT.CLASSES.TARGET_HIGHLIGHTED)
+        this.targetElement.classList.add(HIGHLIGHT.classes.targetHighlighted)
         // The element must have a position, if it doesn't have one, add a relative position class
         if (!this.targetElement.style.position) {
-          this.targetElement.classList.add(HIGHLIGHT.CLASSES.TARGET_RELATIVE)
+          this.targetElement.classList.add(HIGHLIGHT.classes.targetRelative)
         }
       } else {
-        document.body.classList.remove(HIGHLIGHT.CLASSES.ACTIVE)
+        document.body.classList.remove(HIGHLIGHT.classes.active)
       }
     },
     removeHighlight () {
       if (this.isHighlightEnabled()) {
         const target = this.targetElement
         const currentTransition = this.targetElement.style.transition
-        this.targetElement.classList.remove(HIGHLIGHT.CLASSES.TARGET_HIGHLIGHTED)
-        this.targetElement.classList.remove(HIGHLIGHT.CLASSES.TARGET_RELATIVE)
+        this.targetElement.classList.remove(HIGHLIGHT.classes.targetHighlighted)
+        this.targetElement.classList.remove(HIGHLIGHT.classes.targetRelative)
         // Remove our transition when step is finished.
-        if (currentTransition.includes(HIGHLIGHT.TRANSITION)) {
+        if (currentTransition.includes(HIGHLIGHT.transition)) {
           setTimeout(() => {
-            target.style.transition = currentTransition.replace(`, ${HIGHLIGHT.TRANSITION}`, '')
+            target.style.transition = currentTransition.replace(`, ${HIGHLIGHT.transition}`, '')
           }, 0)
         }
       }

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -205,13 +205,13 @@ export default {
       }
       switch (e.keyCode) {
         case KEYS.ARROW_RIGHT:
-          this.isKeyEnabled('ARROW_RIGHT') && this.nextStep()
+          this.isKeyEnabled('arrowRight') && this.nextStep()
           break
         case KEYS.ARROW_LEFT:
-          this.isKeyEnabled('ARROW_LEFT') && this.previousStep()
+          this.isKeyEnabled('arrowLeft') && this.previousStep()
           break
         case KEYS.ESCAPE:
-          this.isKeyEnabled('ESCAPE') && this.stop()
+          this.isKeyEnabled('escape') && this.stop()
           break
       }
     },

diff --git a/src/shared/constants.js b/src/shared/constants.js
@@ -22,25 +22,23 @@ export const DEFAULT_OPTIONS = {
     buttonStop: true
   },
   startTimeout: 0,
+  stopOnTargetNotFound: true,
   useKeyboardNavigation: true,
   enabledNavigationKeys: {
-    ESCAPE: true,
-    ARROW_RIGHT: true,
-    ARROW_LEFT: true
+    escape: true,
+    arrowRight: true,
+    arrowLeft: true
   },
   debug: false
 }
 
 export const HIGHLIGHT = {
-  CLASSES: {
-    ACTIVE: 'v-tour--active',
-    TARGET_HIGHLIGHTED: 'v-tour__target--highlighted',
-    TARGET_RELATIVE: 'v-tour__target--relative'
+  classes: {
+    active: 'v-tour--active',
+    targetHighlighted: 'v-tour__target--highlighted',
+    targetRelative: 'v-tour__target--relative'
   },
-  TRANSITION: 'box-shadow 0s ease-in-out 0s',
-  useKeyboardNavigation: true,
-  startTimeout: 0,
-  stopOnTargetNotFound: true
+  transition: 'box-shadow 0s ease-in-out 0s'
 }
 
 export const DEFAULT_STEP_OPTIONS = {