From 5cce4e583c1ecc8e4ca6c51e38fb8df2ea5274e7 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Tue, 11 Aug 2020 14:13:03 +0400 Subject: [PATCH 01/28] Add divider component --- src/components/Button/consts.ts | 2 +- src/components/Checkbox/consts.ts | 2 +- src/components/Divider/SDivider.vue | 38 +++++++++++++++++++++++ src/components/Divider/consts.ts | 9 ++++++ src/components/Divider/index.ts | 3 ++ src/components/Dropdown/consts.ts | 2 +- src/components/Form/consts.ts | 2 +- src/components/Layout/Container/consts.ts | 7 ++--- src/components/Table/consts.ts | 2 +- src/components/index.ts | 2 ++ src/index.ts | 3 ++ src/plugins/elementUI.ts | 2 ++ src/types/components.ts | 1 + src/types/index.ts | 10 ++++++ src/types/size.ts | 5 --- 15 files changed, 76 insertions(+), 14 deletions(-) create mode 100644 src/components/Divider/SDivider.vue create mode 100644 src/components/Divider/consts.ts create mode 100644 src/components/Divider/index.ts create mode 100644 src/types/index.ts delete mode 100644 src/types/size.ts diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts index 6105f843..78f1e9da 100644 --- a/src/components/Button/consts.ts +++ b/src/components/Button/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum ButtonTypes { PRIMARY = 'primary', diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts index 96554de5..f7d55fd0 100644 --- a/src/components/Checkbox/consts.ts +++ b/src/components/Checkbox/consts.ts @@ -1,3 +1,3 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export const CheckboxSize = Size diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue new file mode 100644 index 00000000..6517e44c --- /dev/null +++ b/src/components/Divider/SDivider.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts new file mode 100644 index 00000000..10f7624d --- /dev/null +++ b/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 diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts new file mode 100644 index 00000000..7426c29d --- /dev/null +++ b/src/components/Divider/index.ts @@ -0,0 +1,3 @@ +import SDivider from './SDivider.vue' + +export { SDivider } diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts index c6d7fb5f..8fd34a23 100644 --- a/src/components/Dropdown/consts.ts +++ b/src/components/Dropdown/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum DropdownType { DEFAULT = 'default', diff --git a/src/components/Form/consts.ts b/src/components/Form/consts.ts index 722d430f..0b7baf42 100644 --- a/src/components/Form/consts.ts +++ b/src/components/Form/consts.ts @@ -1,4 +1,4 @@ -import { Size } from '../../types/size' +import { Size } from '../../types' export enum LabelPosition { LEFT = 'left', diff --git a/src/components/Layout/Container/consts.ts b/src/components/Layout/Container/consts.ts index 1865dc9b..fc6aae38 100644 --- a/src/components/Layout/Container/consts.ts +++ b/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 diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts index ec3b1914..bb5ff572 100644 --- a/src/components/Table/consts.ts +++ b/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 { diff --git a/src/components/index.ts b/src/components/index.ts index 16e8ad4e..4180e66b 100644 --- a/src/components/index.ts +++ b/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, diff --git a/src/index.ts b/src/index.ts index 12c29690..e5f97622 100644 --- a/src/index.ts +++ b/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, diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts index 8ffc0b74..aa090194 100644 --- a/src/plugins/elementUI.ts +++ b/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) diff --git a/src/types/components.ts b/src/types/components.ts index ed91efee..91d0df47 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -12,6 +12,7 @@ export enum Components { SCollapseItem = 'SCollapseItem', SContainer = 'SContainer', SDialog = 'SDialog', + SDivider = 'SDivider', SDropdown = 'SDropdown', SDropdownItem = 'SDropdownItem', SFooter = 'SFooter', diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 00000000..70855221 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,10 @@ +export enum Size { + BIG = 'big', + MEDIUM = 'medium', + SMALL = 'small' +} + +export enum Direction { + HORIZONTAL = 'horizontal', + VERTICAL = 'vertical' +} diff --git a/src/types/size.ts b/src/types/size.ts deleted file mode 100644 index 4c1784de..00000000 --- a/src/types/size.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum Size { - BIG = 'big', - MEDIUM = 'medium', - SMALL = 'small' -} From b116354e20cdd21a3a4b8020ad212514907cc15b Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Tue, 11 Aug 2020 14:13:32 +0400 Subject: [PATCH 02/28] Add story for divider component --- src/stories/SDivider.stories.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/stories/SDivider.stories.ts diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts new file mode 100644 index 00000000..1c43f88a --- /dev/null +++ b/src/stories/SDivider.stories.ts @@ -0,0 +1,33 @@ +import { withKnobs, select } from '@storybook/addon-knobs' + +import { SDivider, SRow } from '../components' +import { DividerDirection, ContentPosition } from '../components/Divider/consts' + +export default { + component: SDivider, + title: 'Design System/Divider', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SRow, SDivider }, + template: ` + First text paragraph + + Content between divider + + Second text paragraph + `, + props: { + direction: { + default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL) + }, + contentPosition: { + default: select('Content position', Object.values(ContentPosition), ContentPosition.CENTER) + } + } +}) From 55ac70748dc202540d3a25ed94e4f3f227816830 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 14 Aug 2020 13:35:08 +0400 Subject: [PATCH 03/28] Fix breaking rule for words in dialog component --- src/components/Dialog/SDialog.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue index 4c933ba3..a40d0c01 100644 --- a/src/components/Dialog/SDialog.vue +++ b/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; + } } From a17826f4fea5812162a713ea5c47ca0606a87ef3 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 14 Aug 2020 14:26:57 +0400 Subject: [PATCH 04/28] Add divider prop for scroll section component --- .../ScrollSections/SScrollSectionItem.vue | 18 ++++++++++++++++-- .../ScrollSections/SScrollSections.vue | 12 ++++++++++-- .../SScrollSectionItem.stories.ts | 1 + .../ScrollSections/SScrollSections.stories.ts | 13 ++++++++++--- 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue index 43406972..68c9dceb 100644 --- a/src/components/ScrollSections/SScrollSectionItem.vue +++ b/src/components/ScrollSections/SScrollSectionItem.vue @@ -3,13 +3,18 @@ {{ title }} + @@ -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; diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue index 18ec3e78..b8422df1 100644 --- a/src/components/ScrollSections/SScrollSections.vue +++ b/src/components/ScrollSections/SScrollSections.vue @@ -24,7 +24,7 @@ From 0b819f6530da77f12fea020f4c7c64f16ad0a2a3 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 14 Aug 2020 15:12:39 +0400 Subject: [PATCH 06/28] Add borders prop for Collapse component --- src/components/Collapse/SCollapse.vue | 19 ++++++++++++++++++- src/components/Collapse/SCollapseItem.vue | 18 +++++++++++++++++- src/stories/Collapse/SCollapse.stories.ts | 5 ++++- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue index d1feb8db..296779b9 100644 --- a/src/components/Collapse/SCollapse.vue +++ b/src/components/Collapse/SCollapse.vue @@ -2,6 +2,7 @@ @@ -9,7 +10,7 @@ @@ -35,6 +46,11 @@ export default class SCollapseItem extends Vue { @import "../../styles/variables.scss"; // @import "../../styles/icons.scss"; +.without-border .el-collapse-item__ { + &wrap, &header { + border: none; + } +} .el-collapse-item__ { &wrap { border-bottom-color: $color-neutral-hover; diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts index fdc90126..d7506470 100644 --- a/src/stories/Collapse/SCollapse.stories.ts +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -10,7 +10,7 @@ export default { export const configurable = () => ({ components: { SCollapse, SCollapseItem }, - template: ` + template: `
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;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
@@ -32,6 +32,9 @@ export const configurable = () => ({ props: { accordion: { default: boolean('Accordion', false) + }, + withBorders: { + default: boolean('With Borders', true) } }, methods: { From a2d3abfd38edfcc77aeaf72cb45293936cc6468a Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 14 Aug 2020 16:02:59 +0400 Subject: [PATCH 07/28] Fix border color for collapse component --- src/components/Collapse/SCollapse.vue | 4 ++-- src/components/Collapse/SCollapseItem.vue | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue index 296779b9..08f6f736 100644 --- a/src/components/Collapse/SCollapse.vue +++ b/src/components/Collapse/SCollapse.vue @@ -51,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; } diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue index c53efa32..1864efd4 100644 --- a/src/components/Collapse/SCollapseItem.vue +++ b/src/components/Collapse/SCollapseItem.vue @@ -46,18 +46,19 @@ export default class SCollapseItem extends Vue { @import "../../styles/variables.scss"; // @import "../../styles/icons.scss"; -.without-border .el-collapse-item__ { - &wrap, &header { +.without-border { + > div > .el-collapse-item__header, + > .el-collapse-item__wrap { border: none; } } .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; } From 34766735cab316d511cdc1d78571481520d9ba77 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 17 Aug 2020 10:52:02 +0400 Subject: [PATCH 08/28] Add without padding property for Collapse component --- src/components/Collapse/SCollapseItem.vue | 12 ++++++++++++ src/components/Layout/Header/SHeader.vue | 1 + src/components/ScrollSections/SScrollSections.vue | 4 ++++ 3 files changed, 17 insertions(+) diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue index 1864efd4..bd66155f 100644 --- a/src/components/Collapse/SCollapseItem.vue +++ b/src/components/Collapse/SCollapseItem.vue @@ -29,6 +29,12 @@ 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 @@ -37,6 +43,9 @@ export default class SCollapseItem extends Vue { if (!(this.sCollapse || {}).withBorders) { cssClasses.push('without-border') } + if (this.withoutPadding) { + cssClasses.push('without-padding') + } return cssClasses } } @@ -52,6 +61,9 @@ export default class SCollapseItem extends Vue { border: none; } } +.without-padding > .el-collapse-item__wrap > .el-collapse-item__content { + padding-bottom: 0; +} .el-collapse-item__ { &wrap { border-bottom-color: #F5F5F5; diff --git a/src/components/Layout/Header/SHeader.vue b/src/components/Layout/Header/SHeader.vue index 2715d822..8fb34577 100644 --- a/src/components/Layout/Header/SHeader.vue +++ b/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; } diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue index b8422df1..fe3bc35f 100644 --- a/src/components/ScrollSections/SScrollSections.vue +++ b/src/components/ScrollSections/SScrollSections.vue @@ -237,5 +237,9 @@ export default class SScrollSections extends Vue { } .s-scroll-content { padding-bottom: 90%; + color: $color-basic-black; + .title { + font-size: 16px; + } } From beca01885d0616f667b18d2c870646833b416fd7 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Tue, 18 Aug 2020 14:01:58 +0400 Subject: [PATCH 09/28] Rename withBorders -> borders --- src/components/Collapse/SCollapse.vue | 4 ++-- src/components/Collapse/SCollapseItem.vue | 2 +- src/stories/Collapse/SCollapse.stories.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue index 08f6f736..7d16c283 100644 --- a/src/components/Collapse/SCollapse.vue +++ b/src/components/Collapse/SCollapse.vue @@ -29,13 +29,13 @@ export default class SCollapse extends Vue { * * `false` by default */ - @Prop({ default: false, type: Boolean }) readonly withBorders!: boolean + @Prop({ default: false, type: Boolean }) readonly borders!: boolean @Provide('sCollapse') sCollapse = this get computedStyles (): object { const styles = {} as any - if (!this.withBorders) { + if (!this.borders) { styles.border = 'none' } return styles diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue index bd66155f..bc1ad26f 100644 --- a/src/components/Collapse/SCollapseItem.vue +++ b/src/components/Collapse/SCollapseItem.vue @@ -40,7 +40,7 @@ export default class SCollapseItem extends Vue { get computedClasses (): Array { const cssClasses: Array = [] - if (!(this.sCollapse || {}).withBorders) { + if (!(this.sCollapse || {}).borders) { cssClasses.push('without-border') } if (this.withoutPadding) { diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts index d7506470..fb86361b 100644 --- a/src/stories/Collapse/SCollapse.stories.ts +++ b/src/stories/Collapse/SCollapse.stories.ts @@ -10,7 +10,7 @@ export default { export const configurable = () => ({ components: { SCollapse, SCollapseItem }, - template: ` + template: `
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;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
@@ -33,8 +33,8 @@ export const configurable = () => ({ accordion: { default: boolean('Accordion', false) }, - withBorders: { - default: boolean('With Borders', true) + borders: { + default: boolean('Borders', true) } }, methods: { From 6f247b13d168eaa32602d0018827bfe45bfdcf4c Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 17 Aug 2020 21:08:38 +0400 Subject: [PATCH 10/28] Add font-icons --- src/assets/fonts/soramitsu-icons.woff | Bin 0 -> 27180 bytes src/styles/icons.scss | 1023 ++++++++++++++++++++++--- src/styles/variables.scss | 7 + 3 files changed, 909 insertions(+), 121 deletions(-) create mode 100644 src/assets/fonts/soramitsu-icons.woff diff --git a/src/assets/fonts/soramitsu-icons.woff b/src/assets/fonts/soramitsu-icons.woff new file mode 100644 index 0000000000000000000000000000000000000000..fb0d92402d77ecde3bf804218417a2d7a2bec904 GIT binary patch literal 27180 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 aiy*#!a~sZUITF^RB$dV29e~B(`}@DZ Date: Mon, 17 Aug 2020 21:38:54 +0400 Subject: [PATCH 11/28] Modify icons usage for Menu components --- src/components/Menu/SMenu.vue | 17 +++++++++++++++-- src/components/Menu/SMenuItem.vue | 20 ++++++++------------ src/components/Menu/SSubmenu.vue | 24 ++++++++---------------- 3 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue index 802a8e64..fa76ffaf 100644 --- a/src/components/Menu/SMenu.vue +++ b/src/components/Menu/SMenu.vue @@ -2,6 +2,7 @@ @@ -78,10 +63,17 @@ export default class SSubmenu extends Vue { border-radius: 6px; [class^=s-icon-] { margin-right: 12px; + font-size: 20px; + } + i { + color: var(--s-menu-text-color); } .is-active > & { border-bottom-color: transparent !important; background-color: var(--s-menu-color-hover) !important; + i { + color: var(--s-menu-text-color-active); + } } &:not(.is-disabled):hover { background-color: var(--s-menu-color-hover) !important; From 39b82cb5789f172ee7e04e8eab15ba109f50dbbc Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 17 Aug 2020 22:52:58 +0400 Subject: [PATCH 12/28] Modify icons usage for Button component --- src/components/Button/SButton.vue | 35 ++++++++++++++++++++++++++++--- src/stories/SButton.stories.ts | 33 ++++++++++++++++++++++++++++- 2 files changed, 64 insertions(+), 4 deletions(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 5622b21b..e1949740 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -235,31 +235,60 @@ export default class SButton extends Vue { .action { &.big { width: $size-big; + i { + font-size: 20px; + } } &.medium { width: $size-medium; + i { + font-size: 18px; + } } &.small { width: $size-small; + i { + font-size: 16px; + margin-left: -2px; + margin-top: -2px; + } } + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-hover; border-color: $color-neutral-hover; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } &.alternative { background-color: $color-basic-white; border-color: $color-neutral-border; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } } } -button > span > i { - top: -10px; - left: -10px; +button { + > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + display: inline-block; + color: inherit; + } + } + &:not(.action) > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + margin-right: 6px; + } + } } diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 602a0e6f..c491af8c 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,6 +1,6 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' import { ButtonSize, ButtonTypes } from '../components/Button' export default { @@ -142,6 +142,37 @@ export const loading = () => ({ } }) +export const withIcon = () => ({ + components: { SButton, SRow, SCol, SMain }, + template: ` + + + + {{ item.label }} + + + + + {{ item.label }} + + + + + {{ item.label }} + + + + `, + props: { + differentSizeData: { + default: () => differentSizeData + }, + differentTypesData: { + default: () => differentTypesData + } + } +}) + export const buttonGroup = () => ({ components: { SButton, SButtonGroup, SRow }, template: ` From 0f1fe00f72315c0333bef0fee558a9bbbfe53e00 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 17 Aug 2020 23:02:06 +0400 Subject: [PATCH 13/28] Modify icons usage for Form Item component --- src/components/Form/SFormItem.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue index 1c286c97..7fc292a5 100644 --- a/src/components/Form/SFormItem.vue +++ b/src/components/Form/SFormItem.vue @@ -179,9 +179,10 @@ export default class SFormItem extends Vue { } .s-icon-error { position: absolute; - width: 21px; - height: 21px; - background-position: 4px bottom; + bottom: 0; + left: 4px; + font-size: 16px; + color: $color-error; } } } From 12e7d9fadda5c8d855b09232884557458daf9343 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 17 Aug 2020 23:21:19 +0400 Subject: [PATCH 14/28] Modify icons usage for Collapse Item component --- src/components/Collapse/SCollapseItem.vue | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue index bc1ad26f..d6d2d96a 100644 --- a/src/components/Collapse/SCollapseItem.vue +++ b/src/components/Collapse/SCollapseItem.vue @@ -53,7 +53,7 @@ export default class SCollapseItem extends Vue { From 5fd906b34fdb883f33facf7d585f4f414360c8dc Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sun, 23 Aug 2020 11:41:10 +0400 Subject: [PATCH 24/28] Add loading directive and service --- src/index.ts | 3 ++- src/plugins/elementUI.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 9acebb02..6cf4a529 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,7 +37,7 @@ import { STooltip } from './components' import { Components } from './types/components' -import { Message, MessageBox, Notification } from './plugins/elementUI' +import { Loading, Message, MessageBox, Notification } from './plugins/elementUI' const elements = [ { component: SApp, name: Components.SApp }, @@ -87,6 +87,7 @@ if (typeof window !== 'undefined' && window.Vue) { } export { + Loading, Message, MessageBox, Notification, diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts index aa090194..36d59aff 100644 --- a/src/plugins/elementUI.ts +++ b/src/plugins/elementUI.ts @@ -96,12 +96,14 @@ MsgBox.setDefaults({ cancelButtonText: 'Cancel', confirmButtonText: 'OK' }) +Vue.prototype.$loading = Loading.service Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$alert = MessageBox.alert Vue.prototype.$message = Message Vue.prototype.$notify = Notification // locale.use(lang) // TODO: it will be used later export { + Loading, MessageBox, Message, Notification From f6094d464a8e324812a7a94bc415a6d678905d41 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sun, 23 Aug 2020 14:45:31 +0400 Subject: [PATCH 25/28] Fix browser autofill --- src/components/Input/SInput.vue | 45 ++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index aa0ba0a3..5f8a87fc 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -121,8 +121,21 @@ export default class SInput extends Vue { @Inject({ default: '', from: 'elForm' }) elForm!: ElForm focused = false + autofill = false model = this.value + mounted (): void { + this.$el.addEventListener('animationstart', this.changeAutofillValue) + } + + destroyed (): void { + this.$el.removeEventListener('animationstart', this.changeAutofillValue) + } + + private changeAutofillValue (e: any): void { + this.autofill = e.animationName === 'onAutoFillStart' + } + @Watch('value') private handlePropChange (value: string | number): void { this.model = value @@ -153,6 +166,9 @@ export default class SInput extends Vue { if (this.type === InputType.TEXT_FILE) { cssClasses.push('text-file') } + if (this.autofill) { + cssClasses.push('autofill') + } return cssClasses } @@ -298,6 +314,26 @@ export default class SInput extends Vue { border-color: $color-neutral-border; } } + &.autofill { + .placeholder { + background-color: transparent !important; + } + } + .el-input > input { + &:-webkit-autofill { + color: $color-basic-black !important; + animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown + } + &:not(:-webkit-autofill) { + animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel + } + &:-internal-autofill-selected { + animation-name: onAutoFillStart; + } + &:not(:-internal-autofill-selected) { + animation-name: onAutoFillCancel; + } + } .placeholder + .el-input { > input { padding-top: 12px; @@ -332,5 +368,12 @@ export default class SInput extends Vue { } } } - +@keyframes onAutoFillStart { + from {/**/} + to {/**/} +} +@keyframes onAutoFillCancel { + from {/**/} + to {/**/} +} From 35b31efe80f1a4abc79d3b7f54ed9561d98b208b Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 24 Aug 2020 18:55:10 +0400 Subject: [PATCH 26/28] Add tabs components --- src/components/Tab/STabs.vue | 204 +++++++++++++++++++++++++++++++++++ src/components/Tab/consts.ts | 12 +++ src/components/Tab/index.ts | 9 ++ src/components/index.ts | 3 + src/index.ts | 6 ++ src/types/components.ts | 2 + 6 files changed, 236 insertions(+) create mode 100644 src/components/Tab/STabs.vue create mode 100644 src/components/Tab/consts.ts create mode 100644 src/components/Tab/index.ts diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue new file mode 100644 index 00000000..b2ef4019 --- /dev/null +++ b/src/components/Tab/STabs.vue @@ -0,0 +1,204 @@ + + + + + diff --git a/src/components/Tab/consts.ts b/src/components/Tab/consts.ts new file mode 100644 index 00000000..5ae902a9 --- /dev/null +++ b/src/components/Tab/consts.ts @@ -0,0 +1,12 @@ +export enum TabsType { + ROUNDED = 'rounded', + CARD = 'card', + BORDER_CARD = 'border-card' +} + +export enum TabsPosition { + TOP = 'top', + BOTTOM = 'bottom', + RIGHT = 'right', + LEFT = 'left' +} diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts new file mode 100644 index 00000000..7381c960 --- /dev/null +++ b/src/components/Tab/index.ts @@ -0,0 +1,9 @@ +import Vue from 'vue' +import { TabPane } from 'element-ui' + +import STabs from './STabs.vue' +import { TabsType, TabsPosition } from './consts' + +const STab = Vue.component('STab', TabPane) + +export { STab, STabs, TabsType, TabsPosition } diff --git a/src/components/index.ts b/src/components/index.ts index 8daef1e2..e44872bf 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -22,6 +22,7 @@ import { SMain } from './Layout/Main' import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu' import { SRow } from './Layout/Row' import { SScrollSectionItem, SScrollSections } from './ScrollSections' +import { STab, STabs } from './Tab' import { STable, STableColumn } from './Table' import { STooltip } from './Tooltip' @@ -57,6 +58,8 @@ export { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip diff --git a/src/index.ts b/src/index.ts index 6cf4a529..8359691c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,6 +32,8 @@ import { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip @@ -71,6 +73,8 @@ const elements = [ { component: SScrollSectionItem, name: Components.SScrollSectionItem }, { component: SScrollSections, name: Components.SScrollSections }, { component: SSubmenu, name: Components.SSubmenu }, + { component: STab, name: Components.STab }, + { component: STabs, name: Components.STabs }, { component: STable, name: Components.STable }, { component: STableColumn, name: Components.STableColumn }, { component: STooltip, name: Components.STooltip } @@ -122,6 +126,8 @@ export { SScrollSectionItem, SScrollSections, SSubmenu, + STab, + STabs, STable, STableColumn, STooltip diff --git a/src/types/components.ts b/src/types/components.ts index 1480241e..981a0733 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -30,6 +30,8 @@ export enum Components { SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', SSubmenu = 'SSubmenu', + STab = 'STab', + STabs = 'STabs', STable = 'STable', STableColumn = 'STableColumn', STooltip = 'STooltip' From 40c0a944f65be0cc29b3c749abc6a49b2d77bced Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 24 Aug 2020 18:56:52 +0400 Subject: [PATCH 27/28] Add story for tabs component --- src/stories/Tab/STabs.stories.ts | 46 ++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/stories/Tab/STabs.stories.ts diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts new file mode 100644 index 00000000..12a66950 --- /dev/null +++ b/src/stories/Tab/STabs.stories.ts @@ -0,0 +1,46 @@ +import { boolean, select, withKnobs } from '@storybook/addon-knobs' + +import { STabs, STab } from '../../components' +import { TabsPosition, TabsType } from '../../components/Tab' + +export default { + component: STabs, + title: 'Design System/Tabs', + decorators: [withKnobs] +} + +export const defaultUsage = () => ({ + components: { STabs, STab }, + template: ` + First + Second + Third + `, + data: () => ({ + activeName: 'first' + }), + props: { + type: { + default: select('Type', [...Object.values(TabsType), '––'], '––') + }, + position: { + default: select('Position', Object.values(TabsPosition), TabsPosition.TOP) + }, + closable: { + default: boolean('Closable', false) + }, + addable: { + default: boolean('Addable', false) + }, + editable: { + default: boolean('Editable', false) + } + } +}) From 4f06fa0663ce0d94924daf9fc2383c3d87f88589 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 24 Aug 2020 19:00:28 +0400 Subject: [PATCH 28/28] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e9721d3..412e29fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.2.7", + "version": "0.2.8", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"