Switch Component Addition

src/components/Switch/SSwitch.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="s-switch">
+    <el-switch
+      ref="el-switch"
+      v-model="model"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-icon-class="activeIconСlass"
+      :inactive-icon-class="inactiveIconСlass"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :name="name"
+      :width="width"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { ElSwitch } from 'element-ui/types/switch'
+
+@Component
+export default class SSwitch extends Vue {
+  /**
+   * Value of switch
+   */
+  @Prop({ default: false }) readonly value!: boolean | string | number
+  /**
+   * Background color when in on state
+   */
+  @Prop({ default: '#d0021b', type: String }) readonly activeColor!: string
+  /**
+   * Background color when in off state
+   */
+  @Prop({ default: '#f6ccd1', type: String }) readonly inactiveColor!: string
+  /**
+   * Class name of the icon displayed when in on state, overrides active-text
+   */
+  @Prop({ default: '', type: String }) readonly activeIconСlass!: string
+  /**
+   * Class name of the icon displayed when in off state, overrides inactive-text
+   */
+  @Prop({ default: '', type: String }) readonly inactiveIconСlass!: string
+  /**
+   * Text displayed when in on state
+   */
+  @Prop({ default: '', type: String }) readonly activeText!: string
+  /**
+   * Text displayed when in off state
+   */
+  @Prop({ default: '', type: String }) readonly inactiveText!: string
+  /**
+   * Switch value when in on state
+   */
+  @Prop({ default: true }) readonly activeValue!: boolean | string | number
+  /**
+   * Switch value when in off state
+   */
+  @Prop({ default: false }) readonly inactiveValue!: boolean | string | number
+  /**
+   * Input name of switch
+   */
+  @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Width of switch
+   */
+  @Prop({ default: 40, type: Number }) readonly width!: number
+  /**
+   * Whether switch is disabled
+   */
+  @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
+
+  model = this.value
+
+  @Watch('value')
+  private handlePropChange (value: boolean | string | number): void {
+    this.model = value
+  }
+
+  @Watch('model')
+  private handleValueChange (value: boolean | string | number): void {
+    this.$emit('input', value)
+  }
+
+  handleChange (value: boolean | string | number): void {
+    this.$emit('change', value)
+  }
+}
+</script>

src/components/Switch/index.ts

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

src/components/index.ts

@@ -23,6 +23,7 @@ import { SInput, SJsonInput } from './Input'
 import { SMain } from './Layout/Main'
 import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu'
 import { SPagination } from './Pagination'
+import { SSwitch } from './Switch'
 import { SRadio } from './Radio'
 import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
@@ -69,6 +70,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,

src/index.ts

@@ -38,6 +38,7 @@ import {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,
@@ -87,6 +88,7 @@ const components = [
   { component: SScrollSections, name: Components.SScrollSections },
   { component: SSelect, name: Components.SSelect },
   { component: SSubmenu, name: Components.SSubmenu },
+  { component: SSwitch, name: Components.SSwitch },
   { component: STab, name: Components.STab },
   { component: STabs, name: Components.STabs },
   { component: STable, name: Components.STable },
@@ -152,6 +154,7 @@ export {
   SScrollSections,
   SSelect,
   SSubmenu,
+  SSwitch,
   STab,
   STabs,
   STable,

src/stories/SSwitch.stories.ts

@@ -0,0 +1,61 @@
+import { color, text, number, boolean, withKnobs } from '@storybook/addon-knobs'
+
+import { SSwitch } from '../components/Switch'
+
+export default {
+  component: SSwitch,
+  title: 'Design System/Components/Switch',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const configurable = () => ({
+  components: { SSwitch },
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+              <s-switch
+                v-model="modelValue"
+                :active-color="activeColor"
+                :inactive-color="inactiveColor"
+                :active-text="activeText"
+                :inactive-text="inactiveText"
+                :active-value="activeValue"
+                :inactive-value="inactiveValue"
+                :width="width"
+                :disabled="disabled"
+                @change="(value) => changeValue = value"
+              />
+              <span style="margin-top: 20px;">
+                v-model="{{ modelValue }}", @change="{{ changeValue }}"
+              </span>
+            </div>`,
+  data: () => ({
+    modelValue: true,
+    changeValue: true
+  }),
+  props: {
+    activeColor: {
+      default: color('Active Background Color', 'rgb(208, 2, 27)')
+    },
+    inactiveColor: {
+      default: color('Inactive Background Color', 'rgb(246, 204, 209)')
+    },
+    activeText: {
+      default: text('Active Text', '')
+    },
+    inactiveText: {
+      default: text('Inactive Text', '')
+    },
+    activeValue: {
+      default: text('Active Value', 'Active Value')
+    },
+    inactiveValue: {
+      default: text('Inactive Value', 'Inactive Value')
+    },
+    width: {
+      default: number('Width', 40)
+    },
+    disabled: {
+      default: boolean('Disabled', false)
+    }
+  }
+})

src/styles/index.scss

@@ -18,6 +18,7 @@
 @import "./radio";
 @import "./scroll-sections";
 @import "./select";
+@import "./switch";
 @import "./tabs";
 @import "./table";
 @import "./tooltip";

src/styles/switch.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+
+.s-switch {
+  .el-switch__label {
+    color: var(--s-color-basic-black);
+    &.is-active {
+      color: var(--s-color-main-brand);
+    }
+  }
+}

src/types/components.ts

@@ -36,6 +36,7 @@ export enum Components {
   SScrollSections = 'SScrollSections',
   SSelect = 'SSelect',
   SSubmenu = 'SSubmenu',
+  SSwitch = 'SSwitch',
   STab = 'STab',
   STabs = 'STabs',
   STable = 'STable',