From 508de46fb1ed952fb0edcb7d351585a346b88bc1 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 14 Aug 2020 13:31:00 +0400 Subject: [PATCH 01/15] Add template for pagination --- src/components/Pagination/SPagination.vue | 64 +++++++++++++++++++++++ src/components/Pagination/consts.ts | 0 src/components/Pagination/index.ts | 3 ++ src/components/index.ts | 2 + src/index.ts | 3 ++ src/stories/SPagination.stories.ts | 20 +++++++ src/types/components.ts | 1 + 7 files changed, 93 insertions(+) create mode 100644 src/components/Pagination/SPagination.vue create mode 100644 src/components/Pagination/consts.ts create mode 100644 src/components/Pagination/index.ts create mode 100644 src/stories/SPagination.stories.ts diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue new file mode 100644 index 00000000..73c9fc04 --- /dev/null +++ b/src/components/Pagination/SPagination.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/Pagination/consts.ts b/src/components/Pagination/consts.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts new file mode 100644 index 00000000..ae6a4363 --- /dev/null +++ b/src/components/Pagination/index.ts @@ -0,0 +1,3 @@ +import SPagination from './SPagination.vue' + +export { SPagination } diff --git a/src/components/index.ts b/src/components/index.ts index e44872bf..ccf4ec46 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -20,6 +20,7 @@ import { SIcon } from './Icon' import { SInput, SJsonInput } from './Input' import { SMain } from './Layout/Main' import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu' +import { SPagination } from './Pagination' import { SRow } from './Layout/Row' import { SScrollSectionItem, SScrollSections } from './ScrollSections' import { STab, STabs } from './Tab' @@ -54,6 +55,7 @@ export { SMenu, SMenuItem, SMenuItemGroup, + SPagination, SRow, SScrollSectionItem, SScrollSections, diff --git a/src/index.ts b/src/index.ts index 8359691c..8f788c7d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,6 +28,7 @@ import { SMenu, SMenuItem, SMenuItemGroup, + SPagination, SRow, SScrollSectionItem, SScrollSections, @@ -69,6 +70,7 @@ const elements = [ { component: SMenu, name: Components.SMenu }, { component: SMenuItem, name: Components.SMenuItem }, { component: SMenuItemGroup, name: Components.SMenuItemGroup }, + { component: SPagination, name: Components.SPagination }, { component: SRow, name: Components.SRow }, { component: SScrollSectionItem, name: Components.SScrollSectionItem }, { component: SScrollSections, name: Components.SScrollSections }, @@ -122,6 +124,7 @@ export { SMenu, SMenuItem, SMenuItemGroup, + SPagination, SRow, SScrollSectionItem, SScrollSections, diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts new file mode 100644 index 00000000..1572d57e --- /dev/null +++ b/src/stories/SPagination.stories.ts @@ -0,0 +1,20 @@ +import { withKnobs, select } from '@storybook/addon-knobs' + +import { SPagination, SRow } from '../components' + +export default { + component: SPagination, + title: 'Design System/Pagination', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SRow, SPagination }, + template: ` + + + `, + props: { + } +}) diff --git a/src/types/components.ts b/src/types/components.ts index 981a0733..6fad8e98 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -26,6 +26,7 @@ export enum Components { SMenu = 'SMenu', SMenuItem = 'SMenuItem', SMenuItemGroup = 'SMenuItemGroup', + SPagination = 'SPagination', SRow = 'SRow', SScrollSectionItem = 'SScrollSectionItem', SScrollSections = 'SScrollSections', From c3e3db1ab94dc56aa3bcedf6cad3c72788604e4e Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 13:36:48 +0400 Subject: [PATCH 02/15] Add i18n --- package.json | 1 + src/lang/en/index.ts | 7 +++ src/lang/index.ts | 17 +++++++ src/plugins/elementUI.ts | 97 +++------------------------------------- yarn.lock | 5 +++ 5 files changed, 36 insertions(+), 91 deletions(-) create mode 100644 src/lang/en/index.ts create mode 100644 src/lang/index.ts diff --git a/package.json b/package.json index 412e29fe..e51f2170 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "ts-jest": "^26.0.0", "typescript": "~3.8.3", "vue-cli-plugin-storybook": "~1.2.2", + "vue-i18n": "^8.11.2", "vue-router": "^3.3.4", "vue-template-compiler": "^2.6.11" }, diff --git a/src/lang/en/index.ts b/src/lang/en/index.ts new file mode 100644 index 00000000..2ebc2e95 --- /dev/null +++ b/src/lang/en/index.ts @@ -0,0 +1,7 @@ +import elementEnLocale from 'element-ui/lib/locale/lang/en' + +elementEnLocale.el.pagination.pagesize = '' + +export default { + ...elementEnLocale +} diff --git a/src/lang/index.ts b/src/lang/index.ts new file mode 100644 index 00000000..4fa27059 --- /dev/null +++ b/src/lang/index.ts @@ -0,0 +1,17 @@ +import Vue from 'vue' +import VueI18n from 'vue-i18n' + +import en from './en' + +Vue.use(VueI18n) + +const messages = { + en +} + +const i18n = new VueI18n({ + locale: 'en', + messages +}) + +export default i18n diff --git a/src/plugins/elementUI.ts b/src/plugins/elementUI.ts index 36d59aff..0b71c0e0 100644 --- a/src/plugins/elementUI.ts +++ b/src/plugins/elementUI.ts @@ -1,107 +1,22 @@ import Vue from 'vue' -import { - Aside, - Badge, - Breadcrumb, - BreadcrumbItem, - Button, - ButtonGroup, - Card, - Checkbox, - Collapse, - CollapseItem, - Container, - DatePicker, - Dialog, - Divider, - Dropdown, - DropdownItem, - DropdownMenu, - Footer, - Form, - FormItem, - Header, - Input, - InputNumber, +import Element, { Loading, - Main, - Menu, - MenuItem, - MenuItemGroup, Message, MessageBox as MsgBox, - Notification, - Option, - Pagination, - Radio, - RadioGroup, - Select, - Submenu, - Switch, - Table, - TableColumn, - TabPane, - Tabs, - Tag, - Tooltip, - Upload + Notification } from 'element-ui' -// import lang from 'element-ui/lib/locale/lang/en' -// import locale from 'element-ui/lib/locale' -Vue.use(Breadcrumb) -Vue.use(BreadcrumbItem) -Vue.use(Collapse) -Vue.use(CollapseItem) -Vue.use(Dialog) -Vue.use(Divider) -Vue.use(Footer) -Vue.use(Menu) -Vue.use(MenuItem) -Vue.use(MenuItemGroup) -Vue.use(Submenu) -Vue.use(Input) -Vue.use(InputNumber) -Vue.use(Radio) -Vue.use(RadioGroup) -Vue.use(Select) -Vue.use(Option) -Vue.use(Button) -Vue.use(ButtonGroup) -Vue.use(Table) -Vue.use(TableColumn) -Vue.use(DatePicker) -Vue.use(Form) -Vue.use(FormItem) -Vue.use(Tag) -Vue.use(Upload) -Vue.use(Card) -Vue.use(Container) -Vue.use(Header) -Vue.use(Aside) -Vue.use(Main) -Vue.use(Dropdown) -Vue.use(DropdownMenu) -Vue.use(DropdownItem) -Vue.use(Tooltip) -Vue.use(Switch) -Vue.use(Badge) -Vue.use(Pagination) -Vue.use(Tabs) -Vue.use(TabPane) +import i18n from '../lang' + Vue.use(Loading.directive) -Vue.use(Checkbox) +Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) }) const MessageBox = MsgBox -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, diff --git a/yarn.lock b/yarn.lock index 6881c4bb..304dd4bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15623,6 +15623,11 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog== +vue-i18n@^8.11.2: + version "8.21.0" + resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.21.0.tgz#526450525fdbb9c877685b5ba6cb9573b73d3940" + integrity sha512-pKBq6Kg5hNacFHMFgPbpYsFlDIMRu4Ew/tpvTWns14CZoCxt7B3tmSNdrLruGMMivnJu1rhhRqsQqT6YwHkuQQ== + vue-jest@^3.0.5: version "3.0.5" resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.5.tgz#d6f124b542dcbff207bf9296c19413f4c40b70c9" From c800f1ba1fd3e7f9b6416fd22b54dc6044822c43 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 18:05:37 +0400 Subject: [PATCH 03/15] Implement Pagination component --- src/components/Pagination/SPagination.vue | 260 ++++++++++++++++++++-- src/components/Pagination/consts.ts | 0 2 files changed, 236 insertions(+), 24 deletions(-) delete mode 100644 src/components/Pagination/consts.ts diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue index 73c9fc04..c2b755b2 100644 --- a/src/components/Pagination/SPagination.vue +++ b/src/components/Pagination/SPagination.vue @@ -1,51 +1,178 @@ @@ -60,5 +187,90 @@ export default class SPagination extends Vue { button:disabled { color: $color-neutral-inactive; } + .el-pagination__sizes { + .el-select .el-input { + width: 65px; + .el-select__caret, .el-input__inner { + color: $color-basic-black; + font-weight: bold; + } + .el-select__caret { + margin-right: 6px; + } + .el-input__inner { + border-radius: 8px; + padding-right: 20px; + padding-left: 5px; + background-color: $color-neutral-placeholder; + border-color: $color-neutral-placeholder; + } + &.is-disabled { + .el-select__caret, .el-input__inner { + color: $color-neutral-inactive; + } + } + } + } + .el-pagination__editor.el-input { + .el-input__inner { + border-radius: 8px; + background-color: $color-neutral-placeholder; + border-color: $color-neutral-placeholder; + color: $color-basic-black; + } + &.is-disabled .el-input__inner { + color: $color-neutral-inactive; + } + } + .el-pagination__total, .per-page-text, .el-pagination__jump { + color: $color-neutral-secondary; + } + .el-pager li { + color: $color-basic-black; + &.btn-quicknext, &.btn-quickprev { + color: $color-basic-black; + } + &:not(.disabled) { + &:hover, &.active { + color: $color-main-brand; + } + } + &.disabled { + color: $color-neutral-inactive; + } + } + &.is-background { + .el-pager li { + background-color: $color-neutral-placeholder; + &.disabled { + color: $color-neutral-inactive; + } + } + .btn-prev, .btn-next { + background-color: $color-neutral-placeholder; + &:disabled { + color: $color-neutral-inactive; + background-color: $color-neutral-placeholder; + } + &:not(:disabled):hover { + color: $color-main-brand; + } + } + } + &.el-pagination--small { + .el-pagination__editor { + height: 22px; + } + .el-pagination__sizes .el-select .el-input { + .el-input__inner { + height: 22px !important; + font-size: 12px; + } + .el-select__caret { + font-size: 12px; + line-height: 23px; + } + } + } } diff --git a/src/components/Pagination/consts.ts b/src/components/Pagination/consts.ts deleted file mode 100644 index e69de29b..00000000 From c5bd4b946c5794fae4392f07a040972587c7cb78 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 18:05:58 +0400 Subject: [PATCH 04/15] Add story for pagination component --- src/stories/SPagination.stories.ts | 40 +++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts index 1572d57e..7a1f2a0f 100644 --- a/src/stories/SPagination.stories.ts +++ b/src/stories/SPagination.stories.ts @@ -1,4 +1,4 @@ -import { withKnobs, select } from '@storybook/addon-knobs' +import { withKnobs, number, text, boolean } from '@storybook/addon-knobs' import { SPagination, SRow } from '../components' @@ -12,9 +12,47 @@ export const configurable = () => ({ components: { SRow, SPagination }, template: ` `, props: { + layout: { + default: text('Layout', 'total, sizes, pager, prev, next, jumper') + }, + total: { + default: number('Total', 400) + }, + disabled: { + default: boolean('Disabled', false) + }, + small: { + default: boolean('Small', false) + }, + background: { + default: boolean('Background', false) + }, + prevText: { + default: text('Prev text', '') + }, + nextText: { + default: text('Next text', '') + } + }, + methods: { + handleSizeChange: (newSize: number) => console.log(`@size-change=${newSize}`), + handleCurrentChange: (newCurrent: number) => console.log(`@current-change=${newCurrent}`), + handlePrevClick: (newCurrent: number) => console.log(`@prev-click=${newCurrent}`), + handleNextClick: (newCurrent: number) => console.log(`@next-click=${newCurrent}`) } }) From 451771794164fd0e07677108d0bd1e54268a82e8 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 18:55:01 +0400 Subject: [PATCH 05/15] Fix pagination label calculations --- src/components/Pagination/SPagination.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue index c2b755b2..0415b1e2 100644 --- a/src/components/Pagination/SPagination.vue +++ b/src/components/Pagination/SPagination.vue @@ -114,7 +114,8 @@ export default class SPagination extends Vue { private reRenderPaginationItems (): void { if (this.totalItem && this.total) { - this.totalItem.textContent = `1—${this.pageSizeModel} of ${this.total}` + const upperNumber = this.pageSizeModel * this.currentPageModel + this.totalItem.textContent = `${upperNumber - this.pageSizeModel + 1}—${upperNumber > this.total ? this.total : upperNumber} of ${this.total}` } if (this.sizesItem && !this.sizesLabelItem) { const itemsPerPageText = document.createElement('span') From 8bfdb1e8c4fafb8ab5591eca4f9480980118ff38 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 19:16:53 +0400 Subject: [PATCH 06/15] Add additional class props --- src/components/Pagination/SPagination.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue index 0415b1e2..d6506e7a 100644 --- a/src/components/Pagination/SPagination.vue +++ b/src/components/Pagination/SPagination.vue @@ -76,6 +76,14 @@ export default class SPagination extends Vue { * Custom class name for the page size Select's dropdown */ @Prop({ default: '', type: String }) readonly popperClass!: string + /** + * Custom class name for the total element of the pagination component + */ + @Prop({ default: '', type: String }) readonly totalClass!: string + /** + * Custom class name for the sizes element of the pagination component + */ + @Prop({ default: '', type: String }) readonly sizesClass!: string /** * Text of the previous button */ @@ -110,6 +118,12 @@ export default class SPagination extends Vue { const items = Array.from(this.pagination.$el.childNodes) as Array this.totalItem = items.find(item => item.className === 'el-pagination__total') this.sizesItem = items.find(item => item.className === 'el-pagination__sizes') + if (this.totalItem && this.totalClass) { + (this.totalItem as Element).classList.add(this.totalClass) + } + if (this.sizesItem && this.sizesClass) { + (this.sizesItem as Element).classList.add(this.sizesClass) + } } private reRenderPaginationItems (): void { From beccb4e578e9ea157d20a2063603688d24abdd98 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 19:22:19 +0400 Subject: [PATCH 07/15] Add some stories for pagination component --- src/stories/SPagination.stories.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts index 7a1f2a0f..95b908b4 100644 --- a/src/stories/SPagination.stories.ts +++ b/src/stories/SPagination.stories.ts @@ -56,3 +56,26 @@ export const configurable = () => ({ handleNextClick: (newCurrent: number) => console.log(`@next-click=${newCurrent}`) } }) + +export const small = () => ({ + components: { SRow, SPagination }, + template: ` + + ` +}) + +export const withBackground = () => ({ + components: { SRow, SPagination }, + template: ` + + ` +}) + +export const disabled = () => ({ + components: { SRow, SPagination }, + template: ` + + + + ` +}) From 7eff73186bb3d35657044256460ed928027b44fa Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 27 Aug 2020 20:59:59 +0400 Subject: [PATCH 08/15] Fix scoped slots for Table Column component --- src/components/Table/STableColumn.vue | 9 ++------- src/stories/Table/STable.stories.ts | 7 ++++++- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue index 05d89e94..96fb3147 100644 --- a/src/components/Table/STableColumn.vue +++ b/src/components/Table/STableColumn.vue @@ -1,6 +1,5 @@ diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts index daccf7de..23a39ef9 100644 --- a/src/stories/Table/STable.stories.ts +++ b/src/stories/Table/STable.stories.ts @@ -48,7 +48,12 @@ export const configurable = () => ({ - Hello + + + + Expanded! `, data: () => ({ tableData: tableData From 58c79425535e86aff59cd7afebb240c5823f59d0 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Fri, 28 Aug 2020 23:15:34 +0400 Subject: [PATCH 09/15] Fix tertiary button background style --- src/components/Button/SButton.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 37513e00..d595e977 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -223,9 +223,10 @@ export default class SButton extends Vue { .tertiary { color: $color-basic-black; border: none; + background-color: transparent; &:hover, &:active, &:focus { color: $color-main-brand; - background-color: $color-basic-white; + background-color: transparent; } &:disabled, &:disabled:hover { color: $color-neutral-inactive; From a0ac936aa9a67ddcd767507356d59facdb9891f4 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sat, 29 Aug 2020 00:14:29 +0400 Subject: [PATCH 10/15] Add numeric directive --- src/directives/index.ts | 3 +++ src/directives/numeric.ts | 32 ++++++++++++++++++++++++++++++++ src/index.ts | 11 +++++++++-- src/types/directives.ts | 3 +++ src/utils/KeyValues.ts | 7 +++++++ 5 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 src/directives/index.ts create mode 100644 src/directives/numeric.ts create mode 100644 src/types/directives.ts create mode 100644 src/utils/KeyValues.ts diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 00000000..a93851d3 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1,3 @@ +import { Numeric } from './numeric' + +export { Numeric } diff --git a/src/directives/numeric.ts b/src/directives/numeric.ts new file mode 100644 index 00000000..dcb8c82c --- /dev/null +++ b/src/directives/numeric.ts @@ -0,0 +1,32 @@ +import { DirectiveOptions } from 'vue' + +import { KeyValues } from '../utils/KeyValues' + +const onKeyPress = (e: any) => { + if (!KeyValues.isDigit(e.key)) { + e.preventDefault() + } else { + return true + } +} + +export const Numeric = { + bind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.addEventListener( + 'keypress', + onKeyPress + ) + } + }, + unbind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.removeEventListener( + 'keypress', + onKeyPress + ) + } + } +} as DirectiveOptions diff --git a/src/index.ts b/src/index.ts index 8f788c7d..79644ccb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,10 +39,12 @@ import { STableColumn, STooltip } from './components' +import { Numeric } from './directives' import { Components } from './types/components' +import { Directives } from './types/directives' import { Loading, Message, MessageBox, Notification } from './plugins/elementUI' -const elements = [ +const components = [ { component: SApp, name: Components.SApp }, { component: SAside, name: Components.SAside }, { component: SBreadcrumb, name: Components.SBreadcrumb }, @@ -82,9 +84,14 @@ const elements = [ { component: STooltip, name: Components.STooltip } ] +const directives = [ + { directive: Numeric, name: Directives.Numeric } +] + const SoramitsuElements = { install (vue: typeof Vue): void { - elements.forEach(el => vue.component(el.name, el.component)) + components.forEach(el => vue.component(el.name, el.component)) + directives.forEach(item => vue.directive(item.name, item.directive)) } } diff --git a/src/types/directives.ts b/src/types/directives.ts new file mode 100644 index 00000000..bb3ece0c --- /dev/null +++ b/src/types/directives.ts @@ -0,0 +1,3 @@ +export enum Directives { + Numeric = 'Numeric' +} diff --git a/src/utils/KeyValues.ts b/src/utils/KeyValues.ts new file mode 100644 index 00000000..984fd578 --- /dev/null +++ b/src/utils/KeyValues.ts @@ -0,0 +1,7 @@ +export class KeyValues { + private static readonly digits = /[0-9]/ + + public static isDigit (digit: string): boolean { + return this.digits.test(digit) + } +} From 0b3614864b5d6ce1b5578457dfb8e395da17bf34 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sat, 29 Aug 2020 12:06:05 +0400 Subject: [PATCH 11/15] Fix alert default styles --- src/styles/common.scss | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/styles/common.scss b/src/styles/common.scss index 4af8f59b..dd3796c6 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -66,3 +66,31 @@ button > span { } } } + +.el-message-box { + .el-message-box__header { + .el-message-box__title { + color: $color-basic-black; + font-size: 16px; + } + } + .el-message-box__btns { + button.el-button.el-button--default.el-button--small { + height: $size-medium; + font-size: 14px; + border-radius: 4px; + &:hover, &:active, &:focus { + color: $color-main-brand; + background-color: $color-basic-white; + border-color: $color-main-brand; + } + &.el-button--primary { + &:hover, &:active, &:focus { + color: $color-basic-white; + background-color: $color-main-hover; + border-color: $color-main-hover; + } + } + } + } +} From c6c1e507b9784c215c4e8ef4540d118b486464d0 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sat, 29 Aug 2020 12:12:09 +0400 Subject: [PATCH 12/15] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e51f2170..211112ee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.2.8", + "version": "0.3.0", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" From 66072847d435668aeaa977da3214ea9ca3c791df Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Sat, 29 Aug 2020 12:57:48 +0400 Subject: [PATCH 13/15] Add tabindex for buttons --- src/components/Button/SButton.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index d595e977..f8763a34 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -33,7 +33,6 @@ import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts' }) export default class SButton extends Vue { readonly ButtonTypes = ButtonTypes - /** * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`. * @@ -82,6 +81,10 @@ export default class SButton extends Vue { * By default it's set to "button" */ @Prop({ default: ButtonNativeTypes.BUTTON, type: String }) readonly nativeType!: string + /** + * Button tabindex + */ + @Prop({ default: '0', type: String }) readonly tabindex!: string @Inject({ default: '', from: 'elForm' }) elForm!: ElForm @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem @@ -155,6 +158,7 @@ export default class SButton extends Vue { } mounted (): void { + this.$el.setAttribute('tabindex', this.tabindex) this.$watch('loading', (value) => { if (!value) { return From a54e6e672760ec410ac1d1ddf850e1e025b92ee6 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 31 Aug 2020 11:51:16 +0400 Subject: [PATCH 14/15] Fix issues --- src/components/Pagination/SPagination.vue | 6 +-- src/directives/index.ts | 4 +- src/directives/number.ts | 61 +++++++++++++++++++++++ src/directives/numeric.ts | 32 ------------ src/index.ts | 5 +- src/types/directives.ts | 3 +- src/utils/KeyValues.ts | 5 ++ 7 files changed, 76 insertions(+), 40 deletions(-) create mode 100644 src/directives/number.ts delete mode 100644 src/directives/numeric.ts diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue index d6506e7a..f05fc612 100644 --- a/src/components/Pagination/SPagination.vue +++ b/src/components/Pagination/SPagination.vue @@ -126,7 +126,7 @@ export default class SPagination extends Vue { } } - private reRenderPaginationItems (): void { + private renderPaginationItems (): void { if (this.totalItem && this.total) { const upperNumber = this.pageSizeModel * this.currentPageModel this.totalItem.textContent = `${upperNumber - this.pageSizeModel + 1}—${upperNumber > this.total ? this.total : upperNumber} of ${this.total}` @@ -165,13 +165,13 @@ export default class SPagination extends Vue { mounted (): void { this.initPaginationItems() - this.reRenderPaginationItems() + this.renderPaginationItems() this.sizesLabelItem = (Array.from(this.pagination.$el.childNodes) as Array) .find(item => item.className === 'per-page-text') } updated (): void { - this.reRenderPaginationItems() + this.renderPaginationItems() } handleSizeChange (newSize: number): void { diff --git a/src/directives/index.ts b/src/directives/index.ts index a93851d3..4800c0dd 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -1,3 +1,3 @@ -import { Numeric } from './numeric' +import { Float, Integer } from './number' -export { Numeric } +export { Float, Integer } diff --git a/src/directives/number.ts b/src/directives/number.ts new file mode 100644 index 00000000..167d6fdc --- /dev/null +++ b/src/directives/number.ts @@ -0,0 +1,61 @@ +import { DirectiveOptions } from 'vue' + +import { KeyValues } from '../utils/KeyValues' + +const onDigitKeyPress = (e: any) => { + if (!KeyValues.isDigit(e.key)) { + e.preventDefault() + } else { + return true + } +} + +const onNumberKeyPress = (e: any) => { + if (!KeyValues.isNumber(e.key)) { + e.preventDefault() + } else { + return true + } +} + +export const Integer = { + bind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.addEventListener( + 'keypress', + onDigitKeyPress + ) + } + }, + unbind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.removeEventListener( + 'keypress', + onDigitKeyPress + ) + } + } +} as DirectiveOptions + +export const Float = { + bind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.addEventListener( + 'keypress', + onNumberKeyPress + ) + } + }, + unbind (el, binding, vnode) { + const input = el.querySelector('input[type="text"]') as HTMLInputElement + if (input) { + input.removeEventListener( + 'keypress', + onNumberKeyPress + ) + } + } +} as DirectiveOptions diff --git a/src/directives/numeric.ts b/src/directives/numeric.ts deleted file mode 100644 index dcb8c82c..00000000 --- a/src/directives/numeric.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { DirectiveOptions } from 'vue' - -import { KeyValues } from '../utils/KeyValues' - -const onKeyPress = (e: any) => { - if (!KeyValues.isDigit(e.key)) { - e.preventDefault() - } else { - return true - } -} - -export const Numeric = { - bind (el, binding, vnode) { - const input = el.querySelector('input[type="text"]') as HTMLInputElement - if (input) { - input.addEventListener( - 'keypress', - onKeyPress - ) - } - }, - unbind (el, binding, vnode) { - const input = el.querySelector('input[type="text"]') as HTMLInputElement - if (input) { - input.removeEventListener( - 'keypress', - onKeyPress - ) - } - } -} as DirectiveOptions diff --git a/src/index.ts b/src/index.ts index 79644ccb..84fef4dc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,7 +39,7 @@ import { STableColumn, STooltip } from './components' -import { Numeric } from './directives' +import { Float, Integer } from './directives' import { Components } from './types/components' import { Directives } from './types/directives' import { Loading, Message, MessageBox, Notification } from './plugins/elementUI' @@ -85,7 +85,8 @@ const components = [ ] const directives = [ - { directive: Numeric, name: Directives.Numeric } + { directive: Float, name: Directives.Float }, + { directive: Integer, name: Directives.Integer } ] const SoramitsuElements = { diff --git a/src/types/directives.ts b/src/types/directives.ts index bb3ece0c..b1b8a4bd 100644 --- a/src/types/directives.ts +++ b/src/types/directives.ts @@ -1,3 +1,4 @@ export enum Directives { - Numeric = 'Numeric' + Float = 'Float', + Integer = 'Integer' } diff --git a/src/utils/KeyValues.ts b/src/utils/KeyValues.ts index 984fd578..1ae08493 100644 --- a/src/utils/KeyValues.ts +++ b/src/utils/KeyValues.ts @@ -1,7 +1,12 @@ export class KeyValues { private static readonly digits = /[0-9]/ + private static readonly numbers = /[0-9.]/ public static isDigit (digit: string): boolean { return this.digits.test(digit) } + + public static isNumber (number: string): boolean { + return this.numbers.test(number) + } } From 23e3970695ca87d3858c338a13f44230f870e5be Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 31 Aug 2020 12:12:04 +0400 Subject: [PATCH 15/15] Fix float directive --- src/directives/number.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directives/number.ts b/src/directives/number.ts index 167d6fdc..4fbf1122 100644 --- a/src/directives/number.ts +++ b/src/directives/number.ts @@ -11,7 +11,7 @@ const onDigitKeyPress = (e: any) => { } const onNumberKeyPress = (e: any) => { - if (!KeyValues.isNumber(e.key)) { + if (!KeyValues.isNumber(e.key) || (!KeyValues.isDigit(e.key) && e.target.value.includes('.'))) { e.preventDefault() } else { return true