chore: change folder names and js files casing to kebab-case

Author: woothu

dist/coreui-vue.common.js

@@ -8,7 +8,7 @@
 
 <script>
 import CProgressBar from './CProgressBar'
-import props from './progressProps'
+import props from './progress-props'
 
 export default {
   name:'CProgress',

dist/coreui-vue.common.js.map

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import props from './progressProps'
+import props from './progress-props'
 export default {
   name: 'CProgressBar',
   props,

dist/coreui-vue.esm.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
-import CSidebarNav from '../../Sidebar/CSidebarNav'
-import CSidebar from '../../Sidebar/CSidebar'
+import CSidebarNav from '../../sidebar/CSidebarNav'
+import CSidebar from '../../sidebar/CSidebar'
 import Component from '../CScrollbar'
 import Vue from 'vue'
 

dist/coreui-vue.umd.js

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import CLink from '../Link/CLink'
+import CLink from '../link/CLink'
 export default {
   name: 'CSidebarBrand',
   components: {

dist/coreui-vue.umd.js.map

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import CButtonClose from '../Button/CButtonClose'
+import CButtonClose from '../button/CButtonClose'
 export default {
   name: 'CSidebarClose',
   components: {

dist/coreui-vue.umd.min.js

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import CScrollbar from '../Scrollbar/CScrollbar'
+import CScrollbar from '../scrollbar/CScrollbar'
 
 export default {
   name: 'CSidebarNav',

dist/coreui-vue.umd.min.js.map

@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import CLink, { props as linkProps } from '../Link/CLink'
-import CBadge from '../Badge/CBadge'
+import CLink, { props as linkProps } from '../link/CLink'
+import CBadge from '../badge/CBadge'
 // import CIcon from '@coreui/icons/vue'
 
 const props = Object.assign(linkProps, {

src/components/Progress/CProgress.vue

@@ -219,8 +219,8 @@
 </template>
 
 <script>
-import CSpinner from '../Spinner/CSpinner'
-import CPagination from '../Pagination/CPagination'
+import CSpinner from '../spinner/CSpinner'
+import CPagination from '../pagination/CPagination'
 import { CIcon as CIconRaw} from '@coreui/icons/vue'
 import { arrowTop, ban } from '@coreui/icons'
 const CIcon = Object.assign({}, CIconRaw, { icons : { arrowTop, ban }})

src/components/Progress/CProgressBar.vue

@@ -1,5 +1,5 @@
 <script>
-import CLink, { propsFactory as linkPropsFactory } from '../Link/CLink'
+import CLink, { propsFactory as linkPropsFactory } from '../link/CLink'
 
 export default {
   name: 'CTabNav',

src/components/Scrollbar/tests/CScrollbar.spec.js

@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import toastMixin from './toastMixin'
-import CButtonClose from '../Button/CButtonClose'
+import toastMixin from './toast-mixin'
+import CButtonClose from '../button/CButtonClose'
 
 export default {
   name: 'CToast',

src/components/Sidebar/CSidebarBrand.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import toastMixin from './toastMixin'
+import toastMixin from './toast-mixin'
 
 export default {
   name: 'CToaster',

src/components/Sidebar/CSidebarClose.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import CProgress from '../Progress/CProgress'
+import CProgress from '../progress/CProgress'
 export default {
   name: 'CWidgetProgress',
   components: {

src/components/Sidebar/CSidebarNav.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import CProgress from '../Progress/CProgress'
+import CProgress from '../progress/CProgress'
 export default {
   name: 'CWidgetProgressIcon',
   components: {

src/components/Sidebar/CSidebarNavLink.vue

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import Component from '../CWidgetProgress'
-import CProgress from '../../Progress/CProgress'
+import CProgress from '../../progress/CProgress'
 import Vue from 'vue'
 
 Vue.component('CProgress', CProgress)

src/components/Table/CTable.vue

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import Component from '../CWidgetProgressIcon'
-import CProgress from '../../Progress/CProgress'
+import CProgress from '../../progress/CProgress'
 import Vue from 'vue'
 
 Vue.component('CProgress', CProgress)

src/components/Tabs/CTabNav.vue

@@ -0,0 +1,94 @@
+<template>
+  <transition :name="fade ? 'fade' : null" :appear="true">
+    <div
+      v-if="state"
+      :class="alertClasses"
+      role="alert"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <CButtonClose
+        v-if="closeButton"
+        @click="dismiss()"
+      />
+      <slot></slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import CButtonClose from '../button/CButtonClose'
+export default {
+  name: 'CAlert',
+  components: { CButtonClose },
+  props: {
+    color: String,
+    closeButton: Boolean,
+    show: {
+      type: [Boolean, Number],
+      default: true
+    },
+    fade: Boolean,
+  },
+  data () {
+    return {
+      countdownTimeout: null,
+      state: this.show
+    }
+  },
+  computed: {
+    alertClasses () {
+      return [
+        'alert',
+        {
+          'alert-dismissible': this.closeButton,
+          [`alert-${this.color}`]: this.color
+        }
+      ]
+    }
+  },
+  watch: {
+    show (val) {
+      this.state = val
+    },
+    state: {
+      immediate: true,
+      handler (val, oldVal) {
+        this.clearCounter()
+        if (!val && oldVal) {
+          this.$emit('update:show', val)
+        } else if (typeof val === 'number' && val) {
+          this.countdownTimeout = setTimeout(() => {
+            const isWatched = this.$listeners['update:show']
+            isWatched ? this.$emit('update:show', this.state - 1) : this.state--
+          }, 1000)
+        }
+      }
+    }
+  },
+  destroyed () {
+    this.clearCounter()
+  },
+  methods: {
+    dismiss () {
+      this.state = false
+    },
+    clearCounter () {
+      if (this.countdownTimeout) {
+        clearTimeout(this.countdownTimeout)
+        this.countdownTimeout = null
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+
+</style>

src/components/Toast/CToast.vue

@@ -0,0 +1,5 @@
+import CAlert from './CAlert'
+
+export {
+  CAlert
+}

src/components/Toast/CToaster.vue

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CAlert'
+import CButtonClose from '../../button/CButtonClose'
+import Vue from 'vue'
+
+Vue.component('CButtonClose', CButtonClose)
+
+const ComponentName = 'CAlert'
+const defaultWrapper = mount(Component, {
+  propsData: {
+    show: true,
+    closeButton: true
+  },
+  slots: {
+    default: 'Dismissible Alert!'
+  }
+})
+
+const customWrapper = mount(Component, {
+  propsData: {
+    show: true,
+    fade: true,
+    closeButton: true,
+    color: 'success'
+  },
+  slots: {
+    default: 'Dismissible Alert!'
+  },
+  listeners: {
+    'update:show': () => {}
+  }
+})
+
+describe(ComponentName, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(defaultWrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly', () => {
+    expect(customWrapper.element).toMatchSnapshot()
+  })
+  it('changes state corectly', () => {
+    expect(customWrapper.vm.state).toBe(true)
+    customWrapper.setProps({ show: false })
+    expect(customWrapper.vm.state).toBe(false)
+  })
+  it('closes alert after given number of seconds', () => {
+    jest.useFakeTimers()
+    defaultWrapper.setProps({ show: 10 })
+    expect(defaultWrapper.vm.state).toBe(10)
+    setTimeout(() => expect(defaultWrapper.vm.state).toBe(0), 10001)
+    jest.runAllTimers()
+  })
+  it('closes alert after click on dismiss button', () => {
+    customWrapper.setProps({ show: true })
+    const button = customWrapper.find('button')
+    button.trigger('click')
+    expect(customWrapper.vm.state).toBe(false)
+  })
+
+  it('emmits correct update:show events when listener is set', () => {
+    jest.useFakeTimers()
+    customWrapper.setProps({ show: 10 })
+    setTimeout(() => {
+      expect(customWrapper.emitted()['update:show'].slice(-1)[0]).toEqual([9])
+    }, 1000)
+    jest.runAllTimers()
+  })
+  it('properly destroys alert', () => {
+    customWrapper.destroy()
+    expect(customWrapper.vm.countdownTimeout).toBe(null)
+  })
+})

src/components/Widgets/CWidgetProgress.vue

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CAlert renders correctly 1`] = `
+<div
+  appear="true"
+  aria-atomic="true"
+  aria-live="polite"
+  class="alert alert-dismissible"
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    class="close"
+    type="button"
+  >
+    ×
+  </button>
+   Dismissible Alert!
+</div>
+`;
+
+exports[`CAlert renders correctly 2`] = `
+<div
+  appear="true"
+  aria-atomic="true"
+  aria-live="polite"
+  class="alert alert-dismissible alert-success"
+  name="fade"
+  role="alert"
+>
+  <button
+    aria-label="Close"
+    class="close"
+    type="button"
+  >
+    ×
+  </button>
+   Dismissible Alert!
+</div>
+`;

src/components/Widgets/CWidgetProgressIcon.vue

@@ -0,0 +1,33 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+import CLink, { props as linkProps } from '../link/CLink'
+
+const props = Object.assign(linkProps, {
+  tag: {
+    type: String,
+    default: 'span'
+  },
+  color: String,
+  pill: Boolean
+})
+
+export default {
+  functional: true,
+  name:'CBadge',
+  props,
+  render (h, { props, data, children }) {
+    const tag = !props.href && !props.to ? props.tag : CLink
+    const componentData = {
+      staticClass: 'badge',
+      class: {
+        [`badge-${props.color}`]: props.color,
+        'badge-pill': props.pill,
+        'active': props.active,
+        'disabled': props.disabled
+      },
+      props
+    }
+    return h(tag, mergeData(data, componentData), children)
+  }
+}
+</script>

src/components/Widgets/tests/CWidgetProgress.spec.js

@@ -0,0 +1,5 @@
+import CBadge from './CBadge'
+
+export {
+  CBadge
+}