Divider implementation

src/components/Button/consts.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum ButtonTypes {
   PRIMARY = 'primary',

src/components/Checkbox/consts.ts

@@ -1,3 +1,3 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export const CheckboxSize = Size

src/components/Collapse/SCollapse.vue

@@ -2,14 +2,15 @@
   <el-collapse
     :value="value"
     :accordion="accordion"
+    :style="computedStyles"
     @change="handleChange"
   >
     <slot></slot>
   </el-collapse>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 
 @Component
 export default class SCollapse extends Vue {
@@ -23,6 +24,22 @@ export default class SCollapse extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly accordion!: boolean
+  /**
+   * Will borders be shown.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly borders!: boolean
+
+  @Provide('sCollapse') sCollapse = this
+
+  get computedStyles (): object {
+    const styles = {} as any
+    if (!this.borders) {
+      styles.border = 'none'
+    }
+    return styles
+  }
 
   handleChange (activeNames: string | number | Array<string | number>): void {
     this.$emit('change', activeNames)
@@ -34,7 +51,7 @@ export default class SCollapse extends Vue {
 @import "../../styles/variables.scss";
 
 .el-collapse {
-  border-top-color: $color-neutral-hover;
-  border-bottom-color: $color-neutral-hover;
+  border-top-color: #F5F5F5;
+  border-bottom-color: #F5F5F5;
 }
 </style>

src/components/Collapse/SCollapseItem.vue

@@ -3,14 +3,15 @@
     :title="title"
     :name="name"
     :disabled="disabled"
+    :class="computedClasses"
   >
     <slot slot="title" name="title"></slot>
     <slot></slot>
   </el-collapse-item>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
 @Component
 export default class SCollapseItem extends Vue {
@@ -28,20 +29,48 @@ export default class SCollapseItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+  /**
+   * Will bottom padding be hidden.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withoutPadding!: boolean
+
+  @Inject({ default: '', from: 'sCollapse' }) sCollapse
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (!(this.sCollapse || {}).borders) {
+      cssClasses.push('without-border')
+    }
+    if (this.withoutPadding) {
+      cssClasses.push('without-padding')
+    }
+    return cssClasses
+  }
 }
 </script>
 
 <style lang="scss">
 @import "../../styles/variables.scss";
 // @import "../../styles/icons.scss";
 
+.without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
+    border: none;
+  }
+}
+.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
 .el-collapse-item__ {
   &wrap {
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
   }
   &header {
     color: $color-basic-black;
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: #F5F5F5;
     &.is-active {
       border-bottom-color: transparent;
     }

src/components/Dialog/SDialog.vue

@@ -168,5 +168,8 @@ export default class SDialog extends Vue {
     font-size: 16px;
     color: $color-basic-black;
   }
+  > * {
+    word-break: break-word;
+  }
 }
 </style>

src/components/Divider/SDivider.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-divider :direction="direction" :content-position="contentPosition">
+    <slot></slot>
+  </el-divider>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { DividerDirection, ContentPosition } from './consts'
+
+@Component
+export default class SDivider extends Vue {
+  /**
+   * Divider direction property. Can be `"horizontal"` or `"vertical"`.
+   *
+   * By default it's set to `"horizontal"`
+   */
+  @Prop({ default: DividerDirection.HORIZONTAL, type: String }) readonly direction!: string
+  /**
+   * Position of the content. Can be `"left"`, `"right"` or `"center"`.
+   *
+   * By default it's set to `"center"`
+   */
+  @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+
+.el-divider {
+  background-color: #F5F5F5;
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
+</style>

src/components/Divider/consts.ts

@@ -0,0 +1,9 @@
+import { Direction } from '../../types'
+
+export enum ContentPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center'
+}
+
+export const DividerDirection = Direction

src/components/Divider/index.ts

@@ -0,0 +1,3 @@
+import SDivider from './SDivider.vue'
+
+export { SDivider }

src/components/Dropdown/consts.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum DropdownType {
   DEFAULT = 'default',

src/components/Form/consts.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 
 export enum LabelPosition {
   LEFT = 'left',

src/components/Layout/Container/consts.ts

@@ -1,4 +1,3 @@
-export enum ContainerDirection {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal'
-}
+import { Direction } from '../../../types'
+
+export const ContainerDirection = Direction

src/components/Layout/Header/SHeader.vue

@@ -24,5 +24,6 @@ export default class SHeader extends Vue {
   padding: 12px;
   box-shadow: 0px 0px 8px rgba(45, 41, 38, 0.2);
   font-size: 18px;
+  z-index: 1;
 }
 </style>

src/components/ScrollSections/SScrollSectionItem.vue

@@ -3,13 +3,18 @@
     <span v-if="title" class="title">{{ title }}</span>
     <slot v-if="this.$slots.title && !title" name="title"></slot>
     <slot></slot>
+    <s-divider v-if="withDivider" style="margin: 20px 0 0 0;"></s-divider>
   </section>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
-@Component
+import { SDivider } from '../Divider'
+
+@Component({
+  components: { SDivider }
+})
 export default class SScrollSectionItem extends Vue {
   /**
    * Required section property of scroll section item. It should be unique.
@@ -28,6 +33,12 @@ export default class SScrollSectionItem extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  @Inject({ default: '', from: 'sScrollSections' }) sScrollSections
+
+  get withDivider (): boolean {
+    return !!(this.sScrollSections || {}).withDivider
+  }
 }
 </script>
 
@@ -39,6 +50,9 @@ export default class SScrollSectionItem extends Vue {
   }
   &:last-child {
     margin-bottom: 10px;
+    .el-divider.el-divider--horizontal {
+      height: 0;
+    }
   }
   .title {
     font-weight: bold;

src/components/ScrollSections/SScrollSections.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
 import VueRouter from 'vue-router'
 
 @Component
@@ -75,7 +75,15 @@ export default class SScrollSections extends Vue {
    *
    * `{ menu: 1, sections: 2 }` by default
    */
-  @Prop({ type: Object, default: { menu: 1, sections: 2 } }) readonly flexSize!: any
+  @Prop({ type: Object, default: () => ({ menu: 1, sections: 2 }) }) readonly flexSize!: any
+  /**
+   * Will dividers be displayed.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly withDivider!: boolean
+
+  @Provide('sScrollSections') sScrollSections = this
 
   menuItems: Vue[] = []
   activeSection = ''
@@ -229,5 +237,9 @@ export default class SScrollSections extends Vue {
 }
 .s-scroll-content {
   padding-bottom: 90%;
+  color: $color-basic-black;
+  .title {
+    font-size: 16px;
+  }
 }
 </style>

src/components/Table/consts.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../types/size'
+import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {

src/components/index.ts

@@ -11,6 +11,7 @@ import { SCol } from './Layout/Col'
 import { SCollapse, SCollapseItem } from './Collapse'
 import { SContainer } from './Layout/Container'
 import { SDialog } from './Dialog'
+import { SDivider } from './Divider'
 import { SDropdown, SDropdownItem } from './Dropdown'
 import { SFooter } from './Layout/Footer'
 import { SForm, SFormItem } from './Form'
@@ -37,6 +38,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,

src/index.ts

@@ -14,6 +14,7 @@ import {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,
@@ -51,6 +52,7 @@ const elements = [
   { component: SCollapseItem, name: Components.SCollapseItem },
   { component: SContainer, name: Components.SContainer },
   { component: SDialog, name: Components.SDialog },
+  { component: SDivider, name: Components.SDivider },
   { component: SDropdown, name: Components.SDropdown },
   { component: SDropdownItem, name: Components.SDropdownItem },
   { component: SFooter, name: Components.SFooter },
@@ -99,6 +101,7 @@ export {
   SCollapseItem,
   SContainer,
   SDialog,
+  SDivider,
   SDropdown,
   SDropdownItem,
   SFooter,

src/plugins/elementUI.ts

@@ -13,6 +13,7 @@ import {
   Container,
   DatePicker,
   Dialog,
+  Divider,
   Dropdown,
   DropdownItem,
   DropdownMenu,
@@ -53,6 +54,7 @@ Vue.use(BreadcrumbItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Dialog)
+Vue.use(Divider)
 Vue.use(Footer)
 Vue.use(Menu)
 Vue.use(MenuItem)

src/stories/Collapse/SCollapse.stories.ts

@@ -10,7 +10,7 @@ export default {
 
 export const configurable = () => ({
   components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" @change="handleChange" style="flex: 1;">
+  template: `<s-collapse :accordion="accordion" :borders="borders" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -32,6 +32,9 @@ export const configurable = () => ({
   props: {
     accordion: {
       default: boolean('Accordion', false)
+    },
+    borders: {
+      default: boolean('Borders', true)
     }
   },
   methods: {