From b3577e907155ff791736ed0374fa052a30c667db Mon Sep 17 00:00:00 2001 From: Vlad Shusterman Date: Fri, 9 Nov 2018 16:01:39 +0300 Subject: [PATCH 001/240] fix (Card): remove bootstrap --- .../vuestic-card/VuesticCard.vue | 39 +++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue b/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue index 669c715f6..5f1ebe1a5 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-card/VuesticCard.vue @@ -1,23 +1,23 @@ @@ -50,7 +50,7 @@ export default { height: $auth-wallpaper-ivuestic-h; width: 100%; } - .vuestic-icon-vuestic { + .va-icon-vuestic { height: $auth-wallpaper-ivuestic-h; width: 100%; } @@ -72,7 +72,7 @@ export default { justify-content: center; height: $top-mobile-nav-height; background-color: $top-nav-bg; - .vuestic-icon-vuestic { + .va-icon-vuestic { height: $auth-mobile-nav-ivuestic-h; width: 100%; } diff --git a/src/components/auth/login/Login.vue b/src/components/auth/login/Login.vue index 166d355be..ff3325fc6 100644 --- a/src/components/auth/login/Login.vue +++ b/src/components/auth/login/Login.vue @@ -20,13 +20,14 @@ -
- - + + {{ $t('auth.createAccount') }} - +
@@ -40,7 +41,6 @@ export default { diff --git a/src/components/ui/modals/Modals.vue b/src/components/ui/modals/Modals.vue index 9427b3afe..3a56023c5 100644 --- a/src/components/ui/modals/Modals.vue +++ b/src/components/ui/modals/Modals.vue @@ -4,27 +4,25 @@
- - - - + + {{ $t('modal.small') }} + + + {{ $t('modal.medium') }} + + + {{ $t('modal.large') }} + + + {{ $t('modal.static') }} +
+ :okText="'modal.confirm' | translate">
{{'modal.smallTitle' | translate}}
There are three species of zebras: the plains zebra, the mountain zebra @@ -69,7 +67,6 @@
{{'modal.staticTitle' | translate}}
@@ -82,7 +79,6 @@ diff --git a/src/components/ui/tree-view/TreeViewEditablePreview.vue b/src/components/ui/tree-view/TreeViewEditablePreview.vue index 07726499c..1e39596a5 100644 --- a/src/components/ui/tree-view/TreeViewEditablePreview.vue +++ b/src/components/ui/tree-view/TreeViewEditablePreview.vue @@ -25,11 +25,9 @@
- + diff --git a/src/i18n/en.json b/src/i18n/en.json index 82c07daa0..390adb3b2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -15,16 +15,30 @@ "home": "Home" }, "buttons": { - "advanced": "Icons, Groups, Dropdowns", + "advanced": "Buttons With Icons", + "size": "Button Sizes", + "tags": "Button Tags", "button": "BUTTON", - "colors": "Colors", + "a-link": "A-LINK", + "router-link": "ROUTER-LINK", + "colors": "Button Colors", "disabled": "DISABLED", "dropdown": "DROPDOWN", "hover": "HOVER", - "main": "Primary & Secondary Buttons", - "micro": "MICRO", + "types": "Button Types", "pressed": "PRESSED", - "small": "SMALL" + "default": "DEFAULT", + "outline": "OUTLINE", + "flat": "FLAT", + "large": "LARGE", + "small": "SMALL", + "normal": "NORMAL", + "success": "SUCCESS", + "info": "INFO", + "danger": "DANGER", + "warning": "WARNING", + "gray": "GRAY", + "dark": "DARK" }, "charts": { "horizontalBarChart": "Horizontal Bar Chart", diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue b/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue new file mode 100644 index 000000000..bf9c29973 --- /dev/null +++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue @@ -0,0 +1,278 @@ + diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js b/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js new file mode 100644 index 000000000..cb091df13 --- /dev/null +++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js @@ -0,0 +1,177 @@ +import { shallowMount } from '@vue/test-utils' +import VaButton from './VaButton' + +describe('VaButton', () => { + /* 1. Button types */ + + it('button without defined props', () => { + const wrapper = shallowMount(VaButton) + + expect(wrapper.find(VaButton).classes()).toContain('va-button--default') + }) + + it('outline button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { outline: true } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--outline') + expect(wrapper.html()).toMatchSnapshot() + }) + + it('flat button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { flat: true } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--flat') + expect(wrapper.html()).toMatchSnapshot() + }) + + /* 2. Button sizes */ + + it('normal button', () => { + const wrapper = shallowMount(VaButton) + + expect(wrapper.find(VaButton).classes()).toContain('va-button--normal') + }) + + it('large button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { large: true } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--large') + expect(wrapper.html()).toMatchSnapshot() + }) + + it('small button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { small: true } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--small') + expect(wrapper.html()).toMatchSnapshot() + }) + + /* 3. Button colors */ + + it('info button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { color: 'info' } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--info') + expect(wrapper.html()).toMatchSnapshot() + }) + + it('danger button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { color: 'danger' } + }) + + expect(wrapper.find(VaButton).classes()).toContain('va-button--danger') + expect(wrapper.html()).toMatchSnapshot() + }) + + it('warning button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { color: 'warning' } + }) + + expect(wrapper.find(VaButton).classes()).toContain('va-button--warning') + expect(wrapper.html()).toMatchSnapshot() + }) + + /* 4. Button tags */ + + it('default button', () => { + const wrapper = shallowMount(VaButton) + + expect(wrapper.is('button')).toBe(true) + }) + + it('a button with defined href', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + href: 'http://epic-spinners.epicmax.co/' + } + }) + expect(wrapper.is('a')).toBe(true) + }) + + it('a button with defined target', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + target: '_blank' + } + }) + expect(wrapper.is('a')).toBe(true) + }) + + it('a button with defined href and target', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + href: 'http://epic-spinners.epicmax.co/', + target: '_blank' + } + }) + expect(wrapper.html()).toMatchSnapshot() + }) + + it('router-link button with defined to property', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + to: { name: 'charts' } + } + }) + expect(wrapper.is('router-link')).toBe(true) + }) + + it('router-link button with defined to and active class properties', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + to: { name: 'charts' }, + activeClass: 'va-button--active' + } + }) + expect(wrapper.is('router-link')).toBe(true) + expect(wrapper.html()).toMatchSnapshot() + }) + + /* 5. Disabled buttons */ + + it('disabled button', () => { + const wrapper = shallowMount(VaButton, { + propsData: { disabled: true } + }) + + expect(wrapper.find(VaButton).classes()).toContain('va-button--disabled') + expect(wrapper.html()).toMatchSnapshot() + }) + + /* 6. Buttons with icons */ + + it('button with left icon', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + icon: 'brandico brandico-facebook' + } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--with-left-icon') + }) + + it('button with right icon', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + iconRight: 'iconicstroke iconicstroke-info' + } + }) + expect(wrapper.find(VaButton).classes()).toContain('va-button--with-right-icon') + }) + + it('button with both icons', () => { + const wrapper = shallowMount(VaButton, { + propsData: { + icon: 'brandico brandico-facebook', + iconRight: 'iconicstroke iconicstroke-info' + } + }) + expect(wrapper.html()).toMatchSnapshot() + }) +}) diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.vue b/src/vuestic-theme/vuestic-components/va-button/VaButton.vue new file mode 100644 index 000000000..8bf61cb13 --- /dev/null +++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.vue @@ -0,0 +1,376 @@ + + + + + diff --git a/src/vuestic-theme/vuestic-components/va-button/__snapshots__/VaButton.spec.js.snap b/src/vuestic-theme/vuestic-components/va-button/__snapshots__/VaButton.spec.js.snap new file mode 100644 index 000000000..51f9ad877 --- /dev/null +++ b/src/vuestic-theme/vuestic-components/va-button/__snapshots__/VaButton.spec.js.snap @@ -0,0 +1,111 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VaButton a button with defined href and target 1`] = ` + +
+ + + +
+ +`; + +exports[`VaButton button with both icons 1`] = ` + +`; + +exports[`VaButton danger button 1`] = ` + +`; + +exports[`VaButton disabled button 1`] = ` + +`; + +exports[`VaButton flat button 1`] = ` + +`; + +exports[`VaButton info button 1`] = ` + +`; + +exports[`VaButton large button 1`] = ` + +`; + +exports[`VaButton outline button 1`] = ` + +`; + +exports[`VaButton router-link button with defined to and active class properties 1`] = ` + +
+ + + +
+ +`; + +exports[`VaButton small button 1`] = ` + +`; + +exports[`VaButton warning button 1`] = ` + +`; diff --git a/src/vuestic-theme/vuestic-components/va-icon/VaIcon.vue b/src/vuestic-theme/vuestic-components/va-icon/VaIcon.vue index 8ad1edb06..1d34aaee1 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/VaIcon.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/VaIcon.vue @@ -52,7 +52,7 @@ export default { transform: 'rotate(' + this.rotation + 'deg)', fontSize: typeof this.size === 'number' ? this.size + 'px' : this.size } - }, + } } } diff --git a/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue b/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue index 7e5cbc0db..b40ccdab5 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-breadcrumbs/VuesticBreadcrumbs.vue @@ -18,13 +18,13 @@
- - - +
diff --git a/src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.demo.vue index 265af2c8b..bb667f3fd 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.demo.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-chart/VuesticChart.demo.vue @@ -5,7 +5,9 @@ :options="chartTypes" v-model="chartType" /> - + + refreshData + diff --git a/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue b/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue index e82e1ecb6..e7899416b 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue @@ -19,7 +19,9 @@ required title=""/> -
Send
+ + Send + diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue index 7e205ed83..8604b46fc 100755 --- a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue @@ -19,7 +19,7 @@ @keypress="toggleSelection()" :disabled="disabled" /> -