chore: add kebab-case folders again

Author: woothu

src/components/progress/CProgress.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="progress" :style="{ height }">
+    <slot>
+      <CProgressBar :value="value"/>
+    </slot>
+  </div>
+</template>
+
+<script>
+import CProgressBar from './CProgressBar'
+import props from './progress-props'
+
+export default {
+  name:'CProgress',
+  components: { CProgressBar },
+  props,
+  provide () {
+    const progress = {}
+    Object.defineProperty(progress, 'props', {
+      get: () => this._props
+    })
+    return { progress }
+  }
+}
+</script>

src/components/progress/CProgressBar.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    :class="progressBarClasses"
+    :style="progressBarStyles"
+    role="progressbar"
+    aria-valuemin="0"
+    :aria-valuemax="props.max.toString()"
+    :aria-valuenow="computedValue"
+  >
+    <slot>{{ text }}</slot>
+  </div>
+</template>
+
+<script>
+import props from './progress-props'
+export default {
+  name: 'CProgressBar',
+  props,
+  inject: {
+    progress: {
+      default: undefined
+    }
+  },
+  computed: {
+    directlyDeclaredProps () {
+      return Object.keys(this.$options.propsData)
+    },
+    injectedProps () {
+      return this.progress && this.progress.props ? this.progress.props : {}
+    },
+    props () {
+      return Object.keys(props).reduce((computedProps, key) => {
+        const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
+        const parentPropExists = this.injectedProps[key] !== undefined
+        const propIsInherited = parentPropExists && !propIsDirectlyDeclared
+        computedProps[key] = propIsInherited ? this.injectedProps[key] : this[key]
+        return computedProps
+      }, {})
+    },
+    progressBarClasses () {
+      return [
+        'progress-bar',
+        {
+          [`bg-${this.props.color}`]: this.props.color,
+          'progress-bar-striped': this.props.striped || this.props.animated,
+          'progress-bar-animated': this.props.animated
+        }
+      ]
+    },
+
+    progressBarStyles () {
+      return { width: `${(100 * (this.props.value / this.props.max))}%` }
+    },
+    progressValue () {
+      const p = Math.pow(10, this.props.precision)
+      return Math.round((100 * p * this.props.value) / this.props.max) / p
+    },
+    computedValue () {
+      return this.props.value.toFixed(props.precision)
+    },
+    text () {
+      if (this.props.showPercentage) {
+        return this.progressValue + '%'
+      } else if (this.props.showValue) {
+        return this.computedValue
+      }  
+    }
+  }
+}
+</script>

src/components/progress/index.js

@@ -0,0 +1,7 @@
+import CProgress from './CProgress'
+import CProgressBar from './CProgressBar'
+
+export {
+  CProgress,
+  CProgressBar
+}

src/components/progress/progress-props.js

@@ -0,0 +1,21 @@
+export default {
+  height: String,
+  // These props can be inherited via the child CProgressBar(s)
+  color: String,
+  striped: Boolean,
+  animated: Boolean,
+  precision: {
+    type: Number,
+    default: 0
+  },
+  showPercentage: Boolean,
+  showValue: Boolean,
+  max: {
+    type: Number,
+    default: 100
+  },
+  value: {
+    type: Number,
+    default: 0
+  }
+}

src/components/progress/tests/CProgress.spec.js

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CProgress'
+
+const ComponentName = 'CProgress'
+const defaultWrapper = mount(Component)
+const customWrapper = mount(Component, {
+  propsData: {
+    color: 'black',
+    value: 20
+  },
+  attrs: {
+    class: 'test'
+  }
+})
+
+
+
+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()
+  })
+})

src/components/progress/tests/CProgressBar.spec.js

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CProgressBar'
+
+const ComponentName = 'CProgressBar'
+const defaultWrapper = mount(Component)
+
+const customWrapper = mount(Component,{
+  propsData: {
+    color: 'success',
+    value: 50,
+    striped: true,
+    showValue: true,
+    max: 200
+  },
+  slots: {
+    default: '234'
+  }
+})
+
+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('renders progress correctly', () => {
+    expect(customWrapper.vm.text).toBe('50')
+    customWrapper.setProps({ showPercentage: true })
+    expect(customWrapper.vm.text).toBe('25%')
+  })
+})

src/components/progress/tests/__snapshots__/CProgress.spec.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgress renders correctly 1`] = `
+<div
+  class="progress"
+>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="progress-bar"
+    role="progressbar"
+    style="width: 0%;"
+  >
+    
+  </div>
+</div>
+`;
+
+exports[`CProgress renders correctly 2`] = `
+<div
+  class="test"
+>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="20"
+    class="progress-bar bg-black"
+    role="progressbar"
+    style="width: 20%;"
+  >
+    
+  </div>
+</div>
+`;

src/components/progress/tests/__snapshots__/CProgressBar.spec.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CProgressBar renders correctly 1`] = `
+<div
+  aria-valuemax="100"
+  aria-valuemin="0"
+  aria-valuenow="0"
+  class="progress-bar"
+  role="progressbar"
+  style="width: 0%;"
+>
+  
+</div>
+`;
+
+exports[`CProgressBar renders correctly 2`] = `
+<div
+  aria-valuemax="200"
+  aria-valuemin="0"
+  aria-valuenow="50"
+  class="progress-bar bg-success progress-bar-striped"
+  role="progressbar"
+  style="width: 25%;"
+>
+  234
+</div>
+`;

src/components/scrollbar/CScrollbar.vue

@@ -0,0 +1,82 @@
+<script>
+// this component is a refector of vue-perfect-scrollbar component https://github.com/lecion/vue-perfect-scrollbar
+import PerfectScrollbar from 'perfect-scrollbar'
+
+export default {
+  name: 'CScrollbar',
+  props: {
+    settings: {
+      type: Object,
+      default () {
+        return {}
+      },
+    },
+    switcher: {
+      type: Boolean,
+      default: true,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    }
+  },
+
+  watch: {
+    switcher (val) {
+      if (!val) {
+        this.__uninit()
+      } else {
+        this.__init()
+      }
+    }
+  },
+
+  mounted () {
+    if (!this.$isServer && this.switcher) {
+      this.__init()
+    }
+  },
+
+  updated () {
+    this.$nextTick(this.__update)
+  },
+
+  beforeDestroy () {
+    this.__uninit()
+  },
+
+  methods: {
+    __init() {
+      if (!this._ps_bar) {
+        this.__createPerfectScrollbar()
+      }
+    },
+
+    __createPerfectScrollbar() {
+      this._ps_bar = new PerfectScrollbar(this.$el, this.settings)
+    },
+    
+    __uninit() {
+      if (this._ps_bar) {
+        this._ps_bar.destroy()
+        this._ps_bar = null
+      }
+    },
+    __update() {
+      if (this._ps_bar) {
+        this._ps_bar.update()
+      }
+    }
+  },
+
+  render (h) {
+    return h(
+      this.tag,
+      { style: 'position: relative' },
+      this.$slots.default
+    )
+  }
+}
+</script>
+
+<style src="perfect-scrollbar/css/perfect-scrollbar.css"></style>

src/components/scrollbar/index.js

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