refactor: rename negative props in components

Author: woothu

src/components/Dropdown/CDropdown.vue

@@ -49,7 +49,10 @@ export default {
     addMenuClasses: [String, Array, Object],
     addTogglerClasses: [String, Array, Object],
     inNav: Boolean,
-    noCaret: Boolean,
+    caret: {
+      type: Boolean,
+      default: true
+    },
     color: String,
     size: {
       type: String,
@@ -69,7 +72,10 @@ export default {
       },
       default: 'bottom-start'
     },
-    noFlip: Boolean,
+    flip: {
+      type: Boolean,
+      default: true
+    },
     popperConfig: Object
   },
   data () {
@@ -131,7 +137,7 @@ export default {
         placement: this.placement,
         modifiers: {
           offset: { offset: this.offset || 0 },
-          flip: { enabled: !this.noFlip }
+          flip: { enabled: this.flip }
         }
       }
     },
@@ -170,7 +176,7 @@ export default {
         this.addTogglerClasses,
         this.inNav ? 'nav-link' : 'btn',
         {
-          'dropdown-toggle': !this.noCaret && !this.split,
+          'dropdown-toggle': this.caret && !this.split,
           [`btn-${this.size}`]: this.size && !this.inNav,
           'disabled' : this.disabled,
           [`${ this.inNav ? 'bg' : 'btn'}-${ this.color }`]: this.color

src/components/Dropdown/tests/CDropdown.spec.js

@@ -30,13 +30,13 @@ const customWrapper = mount(Component, {
     addMenuClasses: 'additional-menu-class',
     addTogglerClasses: 'additional-toggler-class',
     inNav: false,
-    noCaret: true,
+    caret: false,
     color: 'success',
     size: 'lg',
     split: true,
     offset: 20,
     placement: 'right-end',
-    noFlip: true,
+    flip: false,
   },
   slots: {
     default: 'CDropdown subcomponents'
@@ -49,11 +49,11 @@ const navWrapper = mount(Component, {
     addMenuClasses: 'additional-menu-class',
     addTogglerClasses: 'additional-toggler-class',
     inNav: true,
-    noCaret: true,
+    caret: false,
     color: 'success',
     offset: 20,
     placement: 'left',
-    noFlip: true
+    flip: false
   },
   slots: {
     default: 'CDropdown subcomponents'

src/components/Grid/CRow.vue

@@ -3,7 +3,10 @@ import { mergeData } from 'vue-functional-data-merge'
 
 const props = {
   tag: String,
-  noGutters: Boolean,
+  gutters: {
+    type: Boolean,
+    default: true
+  },
   alignVertical: {
     type: String,
     validator: str => ['', 'start', 'end', 'center','baseline', 'stretch'].includes(str)
@@ -24,7 +27,7 @@ export default {
       mergeData(data, {
         staticClass: 'row',
         class: {
-          'no-gutters': props.noGutters,
+          'no-gutters': !props.gutters,
           [`align-items-${props.alignVertical}`]: props.alignVertical,
           [`justify-content-${props.alignHorizontal}`]: props.alignHorizontal,
         }

src/components/Grid/tests/CRow.spec.js

@@ -6,7 +6,7 @@ const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
     tag: 'header',
-    noGutters: true,
+    gutters: false,
     alignVertical: 'center',
     alignHorizontal: 'start'
   },

src/components/Image/CImgLazy.vue

@@ -9,7 +9,10 @@ export default {
       type: Number,
       default: 500
     },
-    noFade: Boolean,
+    fade: {
+      type: Boolean,
+      default: true
+    },
     fadeOffset: {
       type: Number,
       default: -100
@@ -34,7 +37,7 @@ export default {
   },
   computed: {
     animationClasses () {
-      return { 'opacity-0' : !this.noFade && !this.animated }
+      return { 'opacity-0' : this.fade && !this.animated }
     },
     observerArgs () {
       if (this.active) {
@@ -53,7 +56,7 @@ export default {
       entries.forEach(entry => {
         if (entry.intersectionRatio > 0) {
           this.active = true
-          if (!this.noFade) {
+          if (this.fade) {
             this.$nextTick(() => {
               const animateInstantly = this.loadOffset <= this.fadeOffset
               animateInstantly ? this.queueAnimation() : this.defineObserver()

src/components/Image/tests/CImage.spec.js renamed to src/components/Image/tests/CImg.spec.js

@@ -55,11 +55,11 @@ describe(ComponentName, () => {
   it('queueing animation observer on loading watcher properly', () => {
     const spy = jest.spyOn(customWrapper.vm, 'queueAnimation')
 
-    customWrapper.setProps({noFade: true})
+    customWrapper.setProps({fade: false})
     customWrapper.vm.watchForLoading(triggeringEntry)
     expect(spy).not.toBeCalled()
 
-    customWrapper.setProps({noFade: false, fadeOffset: 600})
+    customWrapper.setProps({fade: true, fadeOffset: 600})
     customWrapper.vm.watchForLoading(triggeringEntry)
     customWrapper.vm.$nextTick(() => expect(spy).toBeCalled())
   })

src/components/Image/tests/CImageLazy.spec.js renamed to src/components/Image/tests/CImgLazy.spec.js

@@ -8,9 +8,8 @@
     >
       <div :class="dialogClasses" role="document">
         <div :class="contentClasses">
-          <slot v-if="!noHeader" name="header-wrapper"
-          >
-            <header  class="modal-header">
+          <slot name="header-wrapper">
+            <header class="modal-header">
               <slot name="header">
                 <h5 class="modal-title">
                   {{title}}
@@ -26,12 +25,12 @@
               </slot>
             </header>
           </slot>
-          <slot v-if="!noBody" name="body-wrapper">
+          <slot name="body-wrapper">
             <div class="modal-body">
               <slot></slot>
             </div>
           </slot>
-          <slot v-if="!noFooter" name="footer-wrapper">
+          <slot name="footer-wrapper">
             <footer class="modal-footer">
               <slot name="footer">
                 <button
@@ -55,7 +54,7 @@
       </div>
     </div>
     <div
-      v-if="!noBackdrop && (visible || isTransitioning)"
+      v-if="backdrop && (visible || isTransitioning)"
       :class="backdropClasses"
     >
     </div>
@@ -75,12 +74,18 @@ export default {
     },
     color: String,
     borderColor: String,
-    noFade: Boolean,
-    noBackdrop: Boolean,
-    noCloseOnBackdrop: Boolean,
-    noHeader: Boolean,
-    noBody: Boolean,
-    noFooter: Boolean,
+    fade: {
+      type: Boolean,
+      default: true
+    },
+    backdrop: {
+      type: Boolean,
+      default: true
+    },
+    closeOnBackdrop: {
+      type: Boolean,
+      default: true
+    },
     addModalClasses: [String, Array, Object],
     addDialogClasses: [String, Array, Object],
     addContentClasses: [String, Array, Object]
@@ -96,17 +101,16 @@ export default {
     backdropClasses () {
       return {
         'modal-backdrop': true,
-        'fade': !this.noFade,
-        'show': this.visible || this.noFade
+        'fade': this.fade,
+        'show': this.visible || !this.fade
       }
     },
     modalClasses () {
       return [
         'modal overflow-auto',
         this.addModalClasses,
         {
-          // 'close-modal': !this.noCloseOnBackdrop,
-          'fade': !this.noFade,
+          'fade': this.fade,
           'show': this.visible,
           'd-block': this.visible || this.isTransitioning,
           [`modal-${this.color}`]: Boolean(this.color)
@@ -143,7 +147,7 @@ export default {
   },
   methods: {
     modalClick (e) {
-      if (e.target === this.$el.firstElementChild && !this.noCloseOnBackdrop) {
+      if (e.target === this.$el.firstElementChild && this.closeOnBackdrop) {
         this.hide(e)
       }
     },
@@ -153,7 +157,7 @@ export default {
     },
     toggle (newVal) {
       setTimeout(() => { this.visible = newVal }, 0)
-      if (!this.noFade) {
+      if (this.fade) {
         this.isTransitioning = true
         clearTimeout(this.timeout)
         this.timeout = setTimeout(() => {