Style(naming): enforce naming convention by following vue style guide

* Add global filters support
* Update routes mock file

Author: Armour

mock/role/routes.ts

@@ -13,7 +13,7 @@ import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
 @Component
-export default class Keyboard extends mixins(ResizeMixin) {
+export default class BarChart extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/assets/401_images/401.gif renamed to src/assets/401-images/401.gif

@@ -13,7 +13,7 @@ import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
 @Component
-export default class LineMarker extends mixins(ResizeMixin) {
+export default class LineChart extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/assets/404_images/404_cloud.png renamed to src/assets/404-images/404-cloud.png

@@ -13,7 +13,7 @@ import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
 @Component
-export default class MixChart extends mixins(ResizeMixin) {
+export default class MixedChart extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/assets/404_images/404.png renamed to src/assets/404-images/404.png

@@ -76,7 +76,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { ErrorLogModule } from '@/store/modules/errorLog'
+import { ErrorLogModule } from '@/store/modules/error-log'
 
 @Component
 export default class ErrorLog extends Vue {

src/components/Charts/Keyboard.vue renamed to src/components/Charts/BarChart.vue

@@ -27,7 +27,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
-import { TagsViewModule } from '@/store/modules/tagsView'
+import { TagsViewModule } from '@/store/modules/tags-view'
 
 @Component
 export default class SizeSelect extends Vue {

src/components/Charts/LineMarker.vue renamed to src/components/Charts/LineChart.vue

@@ -1,2 +1,12 @@
-// set function parseTime to filter
+// Set utils function parseTime to filter
 export { parseTime } from '@/utils'
+
+// Filter for article status
+export const articleStatusFilter = (status: string) => {
+  const statusMap: { [key: string]: string } = {
+    published: 'success',
+    draft: 'info',
+    deleted: 'danger'
+  }
+  return statusMap[status]
+}

src/components/Charts/MixChart.vue renamed to src/components/Charts/MixedChart.vue

@@ -3,7 +3,7 @@
 // @ts-ignore
 import icon from 'vue-svgicon'
 icon.register({
-  'guide 2': {
+  'guide-2': {
     width: 1000,
     height: 1000,
     viewBox: '0 0 1000 1000',

src/components/DraggableSelect/index.vue

@@ -17,7 +17,7 @@ import './eye-off'
 import './eye-on'
 import './form'
 import './fullscreen'
-import './guide 2'
+import './guide-2'
 import './guide'
 import './hamburger'
 import './icon'

src/components/ErrorLog/index.vue

@@ -12,21 +12,21 @@ export default {
     tinymce: 'Tinymce',
     markdown: 'Markdown',
     jsonEditor: 'JSON Editor',
-    dndList: 'Dnd List',
     splitPane: 'SplitPane',
     avatarUpload: 'Avatar Upload',
     dropzone: 'Dropzone',
     sticky: 'Sticky',
     countTo: 'Count To',
     componentMixin: 'Mixin',
     backToTop: 'Back To Top',
+    draggableList: 'Draggable List',
     draggableDialog: 'Draggable Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag Kanban',
+    draggableSelect: 'Draggable Select',
+    draggableKanban: 'Draggable Kanban',
     charts: 'Charts',
-    keyboardChart: 'Keyboard Chart',
+    barChart: 'Bar Chart',
     lineChart: 'Line Chart',
-    mixChart: 'Mix Chart',
+    mixedChart: 'Mixed Chart',
     example: 'Example',
     nested: 'Nested Routes',
     menu1: 'Menu 1',
@@ -38,7 +38,7 @@ export default {
     menu2: 'Menu 2',
     table: 'Table',
     dynamicTable: 'Dynamic Table',
-    dragTable: 'Drag Table',
+    draggableTable: 'Draggable Table',
     inlineEditTable: 'Inline Edit',
     complexTable: 'Complex Table',
     tab: 'Tab',

src/components/SizeSelect/index.vue

@@ -12,21 +12,21 @@ export default {
     tinymce: 'Tinymce',
     markdown: 'Markdown',
     jsonEditor: 'Editor JSON',
-    dndList: 'Lista Dnd',
     splitPane: 'Panel dividido',
     avatarUpload: 'Subir avatar',
     dropzone: 'Subir ficheros',
     sticky: 'Sticky',
     countTo: 'Count To',
     componentMixin: 'Mixin',
     backToTop: 'Ir arriba',
+    draggableList: 'Draggable List',
     draggableDialog: 'Draggable Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag Kanban',
+    draggableSelect: 'Draggable Select',
+    draggableKanban: 'Draggable Kanban',
     charts: 'Gráficos',
-    keyboardChart: 'Keyboard Chart',
+    barChart: 'Bar Chart',
     lineChart: 'Gráfico de líneas',
-    mixChart: 'Mix Chart',
+    mixedChart: 'Mixed Chart',
     example: 'Ejemplo',
     nested: 'Rutas anidadass',
     menu1: 'Menu 1',
@@ -38,7 +38,7 @@ export default {
     menu2: 'Menu 2',
     table: 'Tabla',
     dynamicTable: 'Tabla dinámica',
-    dragTable: 'Arrastrar tabla',
+    draggableTable: 'Arrastrar tabla',
     inlineEditTable: 'Editor',
     complexTable: 'Complex Table',
     tab: 'Pestaña',

src/filters/index.ts

@@ -12,21 +12,21 @@ export default {
     tinymce: 'TinyMCE',
     markdown: 'Markdown',
     jsonEditor: 'JSON Editor',
-    dndList: 'Drag-And-Drop',
     splitPane: 'パネル',
     avatarUpload: 'アバターアップロード',
     dropzone: 'Dropzone',
     sticky: 'Sticky',
     countTo: 'Count To',
     componentMixin: 'コンポーネントMixin',
     backToTop: 'Back To Top',
+    draggableList: 'Draggable List',
     draggableDialog: 'Draggable Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag 看板',
+    draggableSelect: 'Draggable Select',
+    draggableKanban: 'Draggable 看板',
     charts: 'チャート',
-    keyboardChart: 'Keyboardチャート',
+    barChart: 'Barチャート',
     lineChart: 'Lineチャート',
-    mixChart: 'Mixチャート',
+    mixedChart: 'Mixedチャート',
     example: 'Example',
     nested: 'Nested Routes',
     menu1: 'メニュー１',
@@ -38,7 +38,7 @@ export default {
     menu2: 'メニュー 2',
     table: 'Table',
     dynamicTable: '可変 Table',
-    dragTable: 'Drag Table',
+    draggableTable: 'Draggable Table',
     inlineEditTable: 'Inline Edit Table',
     complexTable: 'Complex Table',
     tab: 'Tab',

src/icons/components/guide 2.ts renamed to src/icons/components/guide-2.ts

@@ -12,21 +12,21 @@ export default {
     tinymce: '富文本编辑器',
     markdown: 'Markdown',
     jsonEditor: 'JSON 编辑器',
-    dndList: '列表拖拽',
     splitPane: 'Splitpane',
     avatarUpload: '头像上传',
     dropzone: 'Dropzone',
     sticky: 'Sticky',
     countTo: 'Count To',
     componentMixin: '小组件',
     backToTop: '返回顶部',
-    draggableDialog: '可拖拽 Dialog',
-    dragSelect: '拖拽 Select',
-    dragKanban: '可拖拽看板',
+    draggableDialog: '可拖拽对话框',
+    draggableList: '可拖拽列表',
+    draggableSelect: '可拖拽选择',
+    draggableKanban: '可拖拽看板',
     charts: '图表',
-    keyboardChart: '键盘图表',
+    barChart: '柱状图表',
     lineChart: '折线图',
-    mixChart: '混合图表',
+    mixedChart: '混合图表',
     example: '综合实例',
     nested: '路由嵌套',
     menu1: '菜单 1',
@@ -38,7 +38,7 @@ export default {
     menu2: '菜单 2',
     table: '表格',
     dynamicTable: '动态表格',
-    dragTable: '拖拽表格',
+    draggableTable: '可拖拽表格',
     inlineEditTable: '表格内编辑',
     complexTable: '综合表格',
     tab: '分栏',

src/icons/components/index.ts

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { TagsViewModule } from '@/store/modules/tagsView'
+import { TagsViewModule } from '@/store/modules/tags-view'
 
 @Component
 export default class AppMain extends Vue {

src/icons/svg/guide 2.svg renamed to src/icons/svg/guide-2.svg

@@ -4,7 +4,7 @@
     :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
   >
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
-      <app-link
+      <sidebar-item-link
         v-if="theOnlyOneChild.meta"
         :to="resolvePath(theOnlyOneChild.path)"
       >
@@ -21,7 +21,7 @@
             slot="title"
           >{{ $t('route.' + theOnlyOneChild.meta.title) }}</span>
         </el-menu-item>
-      </app-link>
+      </sidebar-item-link>
     </template>
     <el-submenu
       v-else
@@ -56,14 +56,14 @@ import path from 'path'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Route, RouteConfig } from 'vue-router'
 import { isExternal } from '@/utils/validate'
-import AppLink from './Link.vue'
+import SidebarItemLink from './SidebarItemLink.vue'
 
 @Component({
   // Set 'name' here to prevent uglifyjs from causing recursive component not work
   // See https://medium.com/haiiro-io/element-component-name-with-vue-class-component-f3b435656561 for detail
   name: 'SidebarItem',
   components: {
-    AppLink
+    SidebarItemLink
   }
 })
 export default class SidebarItem extends Vue {

src/lang/en.ts

@@ -24,7 +24,7 @@ import { isExternal } from '@/utils/validate'
     isExternal
   }
 })
-export default class Link extends Vue {
+export default class SidebarItemLink extends Vue {
   @Prop({ required: true }) private to!: string
 }
 </script>

src/lang/es.ts

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'has-logo': showLogo}">
-    <logo
+    <sidebar-logo
       v-if="showLogo"
       :collapse="isCollapse"
     />
@@ -32,14 +32,14 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { PermissionModule } from '@/store/modules/permission'
 import { SettingsModule } from '@/store/modules/settings'
-import Logo from './Logo.vue'
 import SidebarItem from './SidebarItem.vue'
+import SidebarLogo from './SidebarLogo.vue'
 import variables from '@/styles/_variables.scss'
 
 @Component({
   components: {
-    Logo,
-    SidebarItem
+    SidebarItem,
+    SidebarLogo
   }
 })
 export default class SideBar extends Vue {

src/lang/ja.ts

@@ -57,7 +57,7 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import VueRouter, { Route, RouteRecord, RouteConfig } from 'vue-router'
 import { ElBreadcrumbItem } from 'element-ui/types/breadcrumb-item'
 import { PermissionModule } from '@/store/modules/permission'
-import { TagsViewModule, ITagView } from '@/store/modules/tagsView'
+import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
 import ScrollPane from './ScrollPane.vue'
 
 @Component({

src/lang/zh.ts

@@ -41,7 +41,6 @@ export default class ResizeMixin extends Vue {
     return rect.width - 1 < WIDTH
   }
 
-  // eslint-disable-next-line camelcase
   private resizeHandler() {
     if (!document.hidden) {
       const isMobile = this.isMobile()

src/layout/components/AppMain.vue

@@ -12,14 +12,15 @@ import router from '@/router'
 import i18n from '@/lang' // Internationalization
 import '@/icons/components'
 import '@/permission'
-import '@/utils/error-log' // Error log
+import '@/utils/error-log'
 import '@/registerServiceWorker'
+import * as filters from '@/filters'
 
 import { mockXHR } from '../mock'
 mockXHR()
 
 Vue.use(ElementUI, {
-  size: AppModule.size, // set element-ui default size
+  size: AppModule.size, // Set element-ui default size
   i18n: (key: string, value: string) => i18n.t(key, value)
 })
 
@@ -29,6 +30,11 @@ Vue.use(SvgIcon, {
   defaultHeight: '1em'
 })
 
+// Register global filter functions
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, (filters as { [key: string ]: Function })[key])
+})
+
 Vue.config.productionTip = false
 
 new Vue({