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(() => {

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

@@ -11,10 +11,9 @@ const customWrapper = mount(Component, {
     size: 'lg',
     color: 'success',
     borderColor: 'success',
-    noFade: false,
-    noBackdrop: false,
-    noCloseOnBackdrop: true,
-    noFooter: true,
+    fade: true,
+    backdrop: true,
+    closeOnBackdrop: false,
     addModalClasses: 'additional-modal-class',
     addDialogClasses: 'additional-dialog-class',
     addContentClasses: 'additional-content-class'
@@ -34,17 +33,17 @@ describe(ComponentName, () => {
   it('renders correctly', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
-  it('hides on backdrop click', () => {
+  it('hides on backdrop click when closeOnBackdrop prop is true', () => {
     const click = () => customWrapper.find('.modal').trigger('click')
     click()
     expect(customWrapper.emitted().hide).not.toBeTruthy()
 
-    customWrapper.setProps({ noCloseOnBackdrop: false })
+    customWrapper.setProps({ closeOnBackdrop: true })
     click()
     expect(customWrapper.emitted().hide).toBeTruthy()
   })
-  it('doesnt animate when noFade prop is set', () => {
-    defaultWrapper.setProps({ noFade: true })
+  it('doesnt animate when fade prop is set to false', () => {
+    defaultWrapper.setProps({ fade: false })
     defaultWrapper.vm.toggle(true)
     expect(defaultWrapper.vm.isTransitioning).toBe(false)
   })

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

@@ -111,7 +111,27 @@ exports[`CModal renders correctly 2`] = `
           CModal body
         </div>
          
-        <!---->
+        <footer
+          class="modal-footer"
+        >
+          <button
+            class="btn btn-secondary"
+            type="button"
+          >
+            
+                Cancel
+              
+          </button>
+           
+          <button
+            class="btn btn-success"
+            type="button"
+          >
+            
+                OK
+              
+          </button>
+        </footer>
       </div>
     </div>
   </div>

src/components/Modal/CModal.vue

@@ -1,7 +1,7 @@
 <template>
   <nav aria-label="pagination">
     <ul :class="computedClasses">
-      <li v-if="!hideDoubleArrows" :class="backArrowsClasses">
+      <li v-if="doubleArrows" :class="backArrowsClasses">
         <CLink
           class="page-link"
           @click="setPage(1)"
@@ -12,7 +12,7 @@
           <span v-html="firstButtonHtml"></span>
         </CLink>
       </li>
-      <li v-if="!hideArrows" :class="backArrowsClasses">
+      <li v-if="arrows" :class="backArrowsClasses">
         <CLink
           class="page-link"
           @click="setPage(activePage - 1)"
@@ -53,7 +53,7 @@
         <span class="page-link">…</span>
       </li>
       <li
-        v-if="!hideArrows"
+        v-if="arrows"
         :class="nextArrowsClasses"
       >
         <CLink
@@ -66,7 +66,7 @@
           <span v-html="nextButtonHtml"></span>
         </CLink>
       </li>
-      <li v-if="!hideDoubleArrows" :class="nextArrowsClasses">
+      <li v-if="doubleArrows" :class="nextArrowsClasses">
         <CLink
           class="page-link"
           @click="setPage(pages)"
@@ -113,9 +113,18 @@
         type: Number,
         default: 5
       },
-      hideDots: Boolean,
-      hideArrows: Boolean,
-      hideDoubleArrows: Boolean,
+      dots: {
+        type: Boolean,
+        default: true
+      },
+      arrows: {
+        type: Boolean,
+        default: true
+      },
+      doubleArrows: {
+        type: Boolean,
+        default: true
+      },
       firstButtonHtml: {
         type: String,
         default: '&laquo;'
@@ -169,7 +178,7 @@
         return `pagination pagination-${this.dims} justify-content-${this.align}`
       },
       showDots () {
-        return !this.hideDots && this.limit > 4 && this.limit < this.pages
+        return this.dots && this.limit > 4 && this.limit < this.pages
       },
       maxPrevItems () {
         return Math.floor((this.limit - 1) / 2)

src/components/Modal/tests/CModal.spec.js

@@ -10,9 +10,9 @@ const customWrapper = mount(Component, {
     size: 'lg',
     align: 'center',
     limit: 7,
-    hideDots: true,
-    hideArrows: true,
-    hideDoubleArrows: true,
+    dots: false,
+    arrows: false,
+    doubleArrows: false,
     responsive: true
   }
 })