{
function FileSass(name) {
return `@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-${name.toLowerCase()}-content
diff --git a/packages/vuesax/src/components/vsAlert/Base/style.sass b/packages/vuesax/src/components/vsAlert/Base/style.sass
index 098a7c3e..57f4e7f3 100644
--- a/packages/vuesax/src/components/vsAlert/Base/style.sass
+++ b/packages/vuesax/src/components/vsAlert/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-alert
diff --git a/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts b/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
index 5995acf6..78e8c933 100644
--- a/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
+++ b/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
@@ -218,6 +218,9 @@ export default class VsAlert extends VsComponent {
const render = h('div', {
staticClass: 'vs-alert',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
{ [`vs-alert--solid`] : !!this.solid },
{ [`vs-alert--border`] : !!this.border },
@@ -226,6 +229,13 @@ export default class VsAlert extends VsComponent {
{ [`vs-alert--flat`] : !!this.flat },
{ [`vs-alert--relief`] : !!this.relief },
{ [`vs-alert--pages`] : this.getPages.length > 0 },
+
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
],
}, [
this.$slots.icon && icon,
diff --git a/packages/vuesax/src/components/vsAvatar/Base/style.sass b/packages/vuesax/src/components/vsAvatar/Base/style.sass
index 5a2a61f9..3de56a86 100644
--- a/packages/vuesax/src/components/vsAvatar/Base/style.sass
+++ b/packages/vuesax/src/components/vsAvatar/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-avatar-content
@@ -69,7 +68,7 @@
background-color: #FFE53B
z-index: -1
background: -color('color')
- &.vs-change-color
+ &.vs-component--is-color
.vs-avatar
color: -color('background')
.vs-avatar__points
diff --git a/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts b/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
index c76464f2..8a76bf77 100644
--- a/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
+++ b/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
@@ -153,9 +153,10 @@ export default class VsAvatar extends VsComponent {
style: {
width: `${this.size}px`,
height: `${this.size}px`,
- cursor: this.pointer && 'pointer'
+ cursor: this.pointer && 'pointer',
+ ['--vs-color']: this.color ? this.getColor : ''
},
- class: {
+ class: [{
'history': this.history,
'history--gradient': this.historyGradient,
'vs-avatar-content--circle': this.circle,
@@ -164,7 +165,15 @@ export default class VsAvatar extends VsComponent {
'vs-avatar-content--latest': this.isLatest,
'vs-avatar-content--hasIcons': this.$slots.icons,
[`vs-avatar-content--size`]: this.size,
- }
+ },
+ // colors
+ { [`vs-component--primary`] : !!this.primary },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ { [`vs-component--is-color`] : !!this.isColor },
+ ]
}, [
this.loading && loading,
avatar,
diff --git a/packages/vuesax/src/components/vsButton/Base/VsButton.ts b/packages/vuesax/src/components/vsButton/Base/VsButton.ts
index 70978d19..e93533ff 100644
--- a/packages/vuesax/src/components/vsButton/Base/VsButton.ts
+++ b/packages/vuesax/src/components/vsButton/Base/VsButton.ts
@@ -71,6 +71,9 @@ export default class VsButton extends VsComponent {
const btn = h('button', {
staticClass: 'vs-button',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
// `vs-button--${this.color.replace('#', '')}`,
`vs-button--${this.componentColor}`,
@@ -88,6 +91,13 @@ export default class VsButton extends VsComponent {
{ [`vs-button--animate-${this.animationType}`] : !!this.animationType },
{ [`vs-button--animate-inactive`] : !!this.animateInactive },
+ // colors
+ { [`vs-button--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-button--danger`] : !!this.danger },
+ { [`vs-button--warn`] : !!this.warn },
+ { [`vs-button--success`] : !!this.success },
+ { [`vs-button--dark`] : !!this.dark },
+
{ [`vs-button--default`] :
!this.flat &&
!this.border &&
@@ -122,8 +132,7 @@ export default class VsButton extends VsComponent {
evt,
(this.componentColor || this.color || 'primary') &&
!this.active &&
- document.activeElement !== this.$el ?
- this.componentColor || this.color :
+ document.activeElement !== this.$el ? 'inherit' :
null,
this.flat && !this.active && document.activeElement !== this.$el
)
diff --git a/packages/vuesax/src/components/vsButton/Base/_root.sass b/packages/vuesax/src/components/vsButton/Base/_root.sass
index 806a176e..04c924b2 100644
--- a/packages/vuesax/src/components/vsButton/Base/_root.sass
+++ b/packages/vuesax/src/components/vsButton/Base/_root.sass
@@ -1,5 +1,5 @@
.vs-button
- --vs-color: var(--vs-primary)
+ --vs-color: ''
--vs-color-rotate: var(--vs-primary)
--vs-color-darken: var(--vs-primary)
diff --git a/packages/vuesax/src/components/vsButton/Base/style.sass b/packages/vuesax/src/components/vsButton/Base/style.sass
index a8147078..793d742d 100644
--- a/packages/vuesax/src/components/vsButton/Base/style.sass
+++ b/packages/vuesax/src/components/vsButton/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-button
diff --git a/packages/vuesax/src/components/vsButton/group/style.sass b/packages/vuesax/src/components/vsButton/group/style.sass
index 63be0a89..5888d419 100644
--- a/packages/vuesax/src/components/vsButton/group/style.sass
+++ b/packages/vuesax/src/components/vsButton/group/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
.vs-button-group
display: flex
diff --git a/packages/vuesax/src/components/vsCard/Base/style.sass b/packages/vuesax/src/components/vsCard/Base/style.sass
index 6c798aca..c2853d5b 100644
--- a/packages/vuesax/src/components/vsCard/Base/style.sass
+++ b/packages/vuesax/src/components/vsCard/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-card-content
diff --git a/packages/vuesax/src/components/vsCard/Group/style.sass b/packages/vuesax/src/components/vsCard/Group/style.sass
index fc28e777..bda8c547 100644
--- a/packages/vuesax/src/components/vsCard/Group/style.sass
+++ b/packages/vuesax/src/components/vsCard/Group/style.sass
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins'
+// @import '../../../styles/mixins'
.vs-card__group
width: 100%
display: flex
@@ -34,6 +34,7 @@
align-items: center
justify-content: center
background: transparent
+ border: 0px
.vs-icon-arrow
width: 15px
height: 15px
@@ -44,6 +45,7 @@
&:after
height: 2px
.vs-card__group-next
+ border: 0px
z-index: 2
position: relative
left: 0px
diff --git a/packages/vuesax/src/components/vsCheckbox/Base/style.sass b/packages/vuesax/src/components/vsCheckbox/Base/style.sass
index 947ea776..fa7fd501 100644
--- a/packages/vuesax/src/components/vsCheckbox/Base/style.sass
+++ b/packages/vuesax/src/components/vsCheckbox/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-checkbox-content
diff --git a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
index 709a4c7a..0f0045e1 100644
--- a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
+++ b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
@@ -162,11 +162,21 @@ export default class VsCheckbox extends VsComponent {
return h('div', {
staticClass: 'vs-checkbox-content',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
{ 'vs-checkbox--checked': this.isChecked },
{ 'vs-checkbox--disabled': this.$attrs.hasOwnProperty('disabled') },
{ 'vs-checkbox--loading': this.loading },
{ 'vs-checkbox--label-before': this.labelBefore },
+
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
]
},
[
diff --git a/packages/vuesax/src/components/vsDialog/Base/style.sass b/packages/vuesax/src/components/vsDialog/Base/style.sass
index 6b0bf07f..7b288a69 100644
--- a/packages/vuesax/src/components/vsDialog/Base/style.sass
+++ b/packages/vuesax/src/components/vsDialog/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-dialog-enter-active
@@ -175,6 +174,7 @@
box-shadow: 0px 5px 20px 0px rgba(0,0,0, -var('shadow-opacity'))
transition: all .25s ease
z-index: 200
+ border: 0px
i
width: 34px
height: 34px
diff --git a/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts b/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
index b77a4b8d..17eaab7c 100644
--- a/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
+++ b/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
@@ -39,6 +39,7 @@ export default class VsDialog extends VsComponent {
esc(evt: any) {
if (evt.which == 27 && !this.preventClose) {
this.$emit('input', false)
+ this.$emit('close')
}
}
@@ -102,6 +103,7 @@ export default class VsDialog extends VsComponent {
on: {
click: (evt: any) => {
this.$emit('input', !this.value)
+ this.$emit('close')
}
}
}, [
@@ -154,6 +156,7 @@ export default class VsDialog extends VsComponent {
click: (evt: any) => {
if (!evt.target.closest('.vs-dialog') && !this.preventClose) {
this.$emit('input', !this.value)
+ this.$emit('close')
}
if (this.preventClose && !evt.target.closest('.vs-dialog')) {
diff --git a/packages/vuesax/src/components/vsInput/Base/style.sass b/packages/vuesax/src/components/vsInput/Base/style.sass
index 70e31236..7f1f6774 100644
--- a/packages/vuesax/src/components/vsInput/Base/style.sass
+++ b/packages/vuesax/src/components/vsInput/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
@mixin state($color)
diff --git a/packages/vuesax/src/components/vsInput/Base/vsInput.ts b/packages/vuesax/src/components/vsInput/Base/vsInput.ts
index e765f26c..8252ad0a 100644
--- a/packages/vuesax/src/components/vsInput/Base/vsInput.ts
+++ b/packages/vuesax/src/components/vsInput/Base/vsInput.ts
@@ -193,6 +193,9 @@ export default class VsInput extends VsComponent {
return h('div', {
staticClass: 'vs-input-parent',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
`vs-input-parent--state-${this.state}`,
{ 'vs-input-parent--border': !!this.border },
@@ -201,7 +204,15 @@ export default class VsInput extends VsComponent {
{ block: this.block },
{ transparent: this.transparent },
{ textWhite: this.textWhite },
- { square: this.square }
+ { square: this.square },
+
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ { [`vs-component--is-color`] : !!this.isColor },
]
}, [
inputContent,
diff --git a/packages/vuesax/src/components/vsNavbar/Base/style.sass b/packages/vuesax/src/components/vsNavbar/Base/style.sass
index 2b6da01e..260777a8 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-navbar-content
diff --git a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
index ce24a8ea..54d7c87e 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
+++ b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
@@ -186,7 +186,10 @@ export default class VsNavbar extends VsComponent {
return h('div', {
staticClass: 'vs-navbar-content',
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
fixed: this.fixed,
shadow: this.shadow,
hidden: this.hidden,
@@ -195,7 +198,15 @@ export default class VsNavbar extends VsComponent {
paddingScroll: this.paddingScroll,
paddingScrollActive: this.paddingScrollActive,
vsNavbarSquare: this.square,
- }
+ },
+ // colors
+ { [`vs-component--primary`] : !!this.primary },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ { [`vs-component--is-color`] : !!this.isColor },
+ ]
}, [
navbar,
!this.notLine && line
diff --git a/packages/vuesax/src/components/vsNavbar/Group/style.sass b/packages/vuesax/src/components/vsNavbar/Group/style.sass
index ad35368f..065fa6a4 100644
--- a/packages/vuesax/src/components/vsNavbar/Group/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Group/style.sass
@@ -15,6 +15,7 @@
font-weight: bold
transition: all .25s ease, color 0s
opacity: .7
+ border: 0px
&__items
position: absolute
bottom: 0px
diff --git a/packages/vuesax/src/components/vsPagination/Base/style.sass b/packages/vuesax/src/components/vsPagination/Base/style.sass
index a19c18fd..ba2c68b5 100644
--- a/packages/vuesax/src/components/vsPagination/Base/style.sass
+++ b/packages/vuesax/src/components/vsPagination/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-pagination-content
@@ -114,6 +113,7 @@
margin: 0px 2px
background: -color('gray-3')
transition: all .25s ease
+ border: 0px
&:disabled
opacity: .4
pointer-events: none
@@ -230,6 +230,7 @@
transition: all .25s ease
color: -color('text')
position: relative
+ border: 0px
&.loading
border-radius: 50%
opacity: .5
diff --git a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
index a3d8bbda..34feb25d 100644
--- a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
+++ b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
@@ -306,6 +306,9 @@ export default class VsPagination extends VsComponent {
return h('div', {
staticClass: 'vs-pagination-content',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
{
buttonsDotted: this.buttonsDotted,
@@ -313,7 +316,14 @@ export default class VsPagination extends VsComponent {
square: this.square,
disabled: this.disabled,
notMargin: this.notMargin
- }
+ },
+
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
]
}, [
(!this.onlyArrows && !this.$slots.default) && active,
diff --git a/packages/vuesax/src/components/vsRadio/Base/style.sass b/packages/vuesax/src/components/vsRadio/Base/style.sass
index 183d0587..1d302e4f 100644
--- a/packages/vuesax/src/components/vsRadio/Base/style.sass
+++ b/packages/vuesax/src/components/vsRadio/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-radio-content
@@ -81,6 +80,8 @@
.vs-radio
width: 20px
height: 20px
+ min-width: 20px
+ min-height: 20px
margin: 0px
padding: 0px
border-radius: 50%
diff --git a/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts b/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
index fde66849..6718b6a5 100644
--- a/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
+++ b/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
@@ -70,11 +70,21 @@ export default class VsRadio extends VsComponent {
])
return h('div', {
staticClass: 'vs-radio-content',
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
disabled: this.disabled,
loading: this.loading,
active: this.isChecked
- }
+ },
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ ]
}, [
this.labelBefore && label,
radio,
diff --git a/packages/vuesax/src/components/vsSelect/Base/style.sass b/packages/vuesax/src/components/vsSelect/Base/style.sass
index 5147b001..3491b9d6 100644
--- a/packages/vuesax/src/components/vsSelect/Base/style.sass
+++ b/packages/vuesax/src/components/vsSelect/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
@mixin state($color)
@@ -121,7 +120,7 @@
box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity))
transform: translate(0, -4px)
transition: all .25s ease, height 0s
- // border: 2px solid transparent !important
+ border: 2px solid transparent
color: -color('text',1)
.vs-select__chips
border-radius: 12px 12px 0px 0px
@@ -144,7 +143,7 @@
opacity: 1
background: transparent
padding: 7px 13px
- // border: 2px solid transparent
+ border: 2px solid transparent
border-radius: 12px
cursor: pointer
transition: all .25s ease, height 0s
@@ -220,7 +219,7 @@
max-width: 100%
position: relative
min-width: 0px
- // border: 2px solid transparent
+ border: 0px solid transparent
background: transparent
margin: 2px 3px
min-width: 30px
@@ -331,13 +330,12 @@
user-select: none
pointer-events: none
width: 100%
- // height: 100%
display: flex
align-items: center
justify-content: flex-start
opacity: .4
z-index: 500
- top: 10px
+ // top: 10px
&--hidden
opacity: 0
visibility: hidden
diff --git a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
index ded9795f..b3ceb4a8 100644
--- a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
+++ b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
@@ -125,11 +125,13 @@ export default class VsSelect extends VsComponent {
get getValueLabel() {
const valueLabel = this.valueLabel
- const labels: any[] = []
- if (valueLabel) {
+ let labels: any[] = []
+ if (Array.isArray(valueLabel)) {
valueLabel.forEach((item: any) => {
labels.push(item.label)
})
+ } else {
+ labels = valueLabel
}
return labels
@@ -195,7 +197,7 @@ export default class VsSelect extends VsComponent {
}
let chips: any[] = []
- if (this.valueLabel) {
+ if (Array.isArray(this.valueLabel)) {
this.valueLabel.forEach((item: any) => {
chips.push(chip(item, false))
})
@@ -233,27 +235,29 @@ export default class VsSelect extends VsComponent {
}, index);
}
if (evt.code == 'ArrowDown') {
- event.preventDefault()
+ evt.preventDefault()
if (this.hoverOption < this.childOptions.length - 1) {
this.hoverOption++
} else {
this.hoverOption = 0
}
} else if (evt.code == 'ArrowUp') {
- event.preventDefault()
+ evt.preventDefault()
if (this.hoverOption > 0) {
this.hoverOption--
} else {
this.hoverOption = this.childOptions.length - 1
}
} else if (evt.code == 'Enter') {
- event.preventDefault()
- if (!this.childOptions[this.hoverOption].disabled) {
- this.clickOption(this.childOptions[this.hoverOption].value, this.childOptions[this.hoverOption].label)
- if (!this.multiple) {
- this.handleBlur();
- (this.$refs.input as HTMLElement).blur()
- }
+ evt.preventDefault()
+ if (this.hoverOption !== -1) {
+ if (!this.childOptions[this.hoverOption].disabled) {
+ this.clickOption(this.childOptions[this.hoverOption].value, this.childOptions[this.hoverOption].label)
+ if (!this.multiple) {
+ this.handleBlur();
+ (this.$refs.input as HTMLElement).blur()
+ }
+ }
}
}
@@ -432,9 +436,19 @@ export default class VsSelect extends VsComponent {
}, [ this.activeOptions && h('div', {
staticClass: 'vs-select__options',
ref: 'options',
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
isColorDark: this.isColorDark
},
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ ],
on: {
mouseleave: () => {
this.targetSelect = false
@@ -619,9 +633,19 @@ export default class VsSelect extends VsComponent {
return h('div', {
staticClass: 'vs-select-content',
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
block: this.block
- }
+ },
+ // colors
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ ]
}, [
selectContent,
messageSuccess,
diff --git a/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts b/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
index ebb59996..39ca91d7 100644
--- a/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
+++ b/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
@@ -85,6 +85,7 @@ export default class VsSelectOption extends VsComponent {
on: {
...this.$listeners,
mousedown: () => {
+ console.log(this.value);
(this.$parent as any).clickOption(this.value, this.label)
},
blur: () => {
diff --git a/packages/vuesax/src/components/vsSidebar/Base/style.sass b/packages/vuesax/src/components/vsSidebar/Base/style.sass
index 29d5e27b..ec4f1265 100644
--- a/packages/vuesax/src/components/vsSidebar/Base/style.sass
+++ b/packages/vuesax/src/components/vsSidebar/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
@keyframes delayOpacity
@@ -27,6 +26,19 @@
background: -color('background')
transition: all .25s ease
transform: translate(-110%)
+ &.right
+ left: auto
+ right: 0px
+ transform: translate(110%)
+ &.open
+ transform: translate(0)
+ &.reduce
+ .vs-sidebar__item
+ &:hover
+ .vs-sidebar__item__text-tooltip
+ opacity: 1
+ left: auto !important
+ right: 60px !important
&.absolute
position: absolute !important
z-index: 9001
diff --git a/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts b/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
index a65176bf..394acb4d 100644
--- a/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
+++ b/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
@@ -16,6 +16,7 @@ export default class VsSidebar extends VsComponent {
@Prop({ default: false, type: Boolean }) notShadow: boolean
@Prop({ default: false, type: Boolean }) relative: boolean
@Prop({ default: false, type: Boolean }) absolute: boolean
+ @Prop({ default: false, type: Boolean }) right: boolean
@Prop({ default: 'background', type: String }) background: string
staticWidth: number = 260
@@ -112,7 +113,10 @@ export default class VsSidebar extends VsComponent {
return h('div', {
staticClass: 'vs-sidebar-content',
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
reduce: this.reduceInternal,
open: this.open,
notLineActive: this.notLineActive,
@@ -120,8 +124,17 @@ export default class VsSidebar extends VsComponent {
notShadow: this.notShadow,
textWhite: this.textWhite,
relative: this.relative,
- absolute: this.absolute
+ absolute: this.absolute,
+ right: this.right
},
+ // colors
+ { [`vs-component--primary`] : !!this.primary },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ { [`vs-component--is-color`] : !!this.isColor },
+ ],
on: {
mouseenter: () => {
if (this.hoverExpand) {
diff --git a/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts b/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
index 134ad3c7..7ce6f73f 100644
--- a/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
+++ b/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
@@ -1,12 +1,14 @@
import { VNode } from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
import VsComponent from '../../../mixins/component'
@Component
export default class VsSidebarGroup extends VsComponent {
group: boolean = true
- open: boolean = false
+ openState: boolean = false
+
+ @Prop({type: Boolean}) open: boolean
@Watch('open')
handleOpen(val: boolean) {
@@ -47,12 +49,18 @@ export default class VsSidebarGroup extends VsComponent {
el.style.height = '0px'
}
+ mounted() {
+ if (this.$el.querySelector('.active') || this.open) {
+ this.openState = true
+ }
+ }
+
public render(h: any): VNode {
const header = h('div', {
staticClass: 'vs-sidebar__group__header',
on: {
click: () => {
- this.open = !this.open
+ this.openState = !this.openState
}
}
}, [
@@ -65,7 +73,7 @@ export default class VsSidebarGroup extends VsComponent {
directives: [
{
name: 'show',
- value: this.open
+ value: this.openState
}
]
}, [
@@ -83,7 +91,7 @@ export default class VsSidebarGroup extends VsComponent {
return h('div', {
staticClass: 'vs-sidebar__group',
class: {
- open: this.open
+ open: this.openState
}
}, [
header,
diff --git a/packages/vuesax/src/components/vsSidebar/Item/style.sass b/packages/vuesax/src/components/vsSidebar/Item/style.sass
index 586952f4..56489d77 100644
--- a/packages/vuesax/src/components/vsSidebar/Item/style.sass
+++ b/packages/vuesax/src/components/vsSidebar/Item/style.sass
@@ -14,8 +14,7 @@
justify-content: flex-start
position: relative
color: -color('text')
- // background: -color('background')
- // min-width: 260px
+ border: 0px
&.hasIcon
padding: 0px
&.active
diff --git a/packages/vuesax/src/components/vsSwitch/Base/style.sass b/packages/vuesax/src/components/vsSwitch/Base/style.sass
index 8d2875db..205e2df8 100644
--- a/packages/vuesax/src/components/vsSwitch/Base/style.sass
+++ b/packages/vuesax/src/components/vsSwitch/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
@keyframes rotateSwitch
diff --git a/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts b/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
index b7261866..4c5304a2 100644
--- a/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
+++ b/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
@@ -127,12 +127,21 @@ export default class VsSwitch extends VsComponent {
attrs: {
type: 'checkbox',
},
- class: {
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
+ class: [{
'vs-switch--loading': this.loading,
'vs-switch--square': this.square,
'vs-switch--indeterminate': this.indeterminate,
'vs-switch--icon': this.icon,
},
+ { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
+ ],
}, [
input,
circle,
diff --git a/packages/vuesax/src/components/vsTable/Base/style.sass b/packages/vuesax/src/components/vsTable/Base/style.sass
index f33b113d..1d9915f3 100644
--- a/packages/vuesax/src/components/vsTable/Base/style.sass
+++ b/packages/vuesax/src/components/vsTable/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-table-content
@@ -16,6 +15,7 @@
border-collapse: collapse
width: 100%
min-width: 500px
+ border: 0px
&.striped
.vs-table__tr
&:nth-child(2n)
diff --git a/packages/vuesax/src/components/vsTable/Td/style.sass b/packages/vuesax/src/components/vsTable/Td/style.sass
index 0404a027..94e24ca5 100644
--- a/packages/vuesax/src/components/vsTable/Td/style.sass
+++ b/packages/vuesax/src/components/vsTable/Td/style.sass
@@ -3,6 +3,7 @@
padding: 10px 12px
transition: all .25s ease
font-size: .8rem
+ border: 0px
&:last-child
border-radius: 0px 15px 15px 0px
&:first-child
diff --git a/packages/vuesax/src/components/vsTable/Th/style.sass b/packages/vuesax/src/components/vsTable/Th/style.sass
index bebe1650..87132fab 100644
--- a/packages/vuesax/src/components/vsTable/Th/style.sass
+++ b/packages/vuesax/src/components/vsTable/Th/style.sass
@@ -4,6 +4,7 @@
text-align: left
transition: all .25s ease
font-size: .8rem
+ border: 0px
&.sort
.vs-table__th__content
pointer-events: none
diff --git a/packages/vuesax/src/components/vsTable/Tr/style.sass b/packages/vuesax/src/components/vsTable/Tr/style.sass
index bb08431d..827f37a0 100644
--- a/packages/vuesax/src/components/vsTable/Tr/style.sass
+++ b/packages/vuesax/src/components/vsTable/Tr/style.sass
@@ -5,6 +5,7 @@
border-radius: 0px !important
.vs-table__tr
padding: 5px
+ border: 0px
&.expand
cursor: pointer
&.vs-change-color
@@ -50,10 +51,12 @@
.vs-table__tr__expand
transition: all .25s ease
+ border: 0px
td
transition: all .25s ease
padding: 0px
background: -color('gray-1') !important
+ border: 0px
.vs-table__expand__td__content
overflow: hidden
display: block
diff --git a/packages/vuesax/src/components/vsTooltip/Base/style.sass b/packages/vuesax/src/components/vsTooltip/Base/style.sass
index db4bc187..5be5d201 100644
--- a/packages/vuesax/src/components/vsTooltip/Base/style.sass
+++ b/packages/vuesax/src/components/vsTooltip/Base/style.sass
@@ -1,5 +1,4 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
@import 'root'
.vs-tooltip-enter-active, .vs-tooltip-leave-active
diff --git a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
index 0182e1b0..f68654c4 100644
--- a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
+++ b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
@@ -52,9 +52,6 @@ export default class VsTooltip extends VsComponent {
}
setCordsPosition(tooltip, this.$refs.content, position)
- this.$nextTick(() => {
- this.changeColor()
- })
}
handlerMouseEnter() {
@@ -117,6 +114,13 @@ export default class VsTooltip extends VsComponent {
}
mounted() {
+ window.addEventListener('popstate', (event) => {
+ const tooltips = document.querySelectorAll('.vs-tooltip')
+ tooltips.forEach((tooltip) => {
+ tooltip.remove()
+ })
+ })
+
window.addEventListener('resize', this.handleResize)
if (this.notHover) {
window.addEventListener('mousedown', this.handleMouseDownNotHover)
@@ -139,6 +143,9 @@ export default class VsTooltip extends VsComponent {
const tooltip = h('div', {
staticClass: 'vs-tooltip',
ref: 'tooltip',
+ style: {
+ ['--vs-color']: this.color ? this.getColor : ''
+ },
class: [
{
top: !this.bottom && !this.left && !this.right,
@@ -152,7 +159,13 @@ export default class VsTooltip extends VsComponent {
border: this.border,
borderThick: this.borderThick,
loading: this.loading
- }
+ },
+ // colors
+ { [`vs-component--primary`] : !!this.primary },
+ { [`vs-component--danger`] : !!this.danger },
+ { [`vs-component--warn`] : !!this.warn },
+ { [`vs-component--success`] : !!this.success },
+ { [`vs-component--dark`] : !!this.dark },
],
on: {
mouseenter: () => {
diff --git a/packages/vuesax/src/functions/vsLoading/Base/style.sass b/packages/vuesax/src/functions/vsLoading/Base/style.sass
index eb598dc8..c702601b 100644
--- a/packages/vuesax/src/functions/vsLoading/Base/style.sass
+++ b/packages/vuesax/src/functions/vsLoading/Base/style.sass
@@ -1,5 +1,5 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
+// @import '../../../styles/colors'
.loading-enter-active, .loading-leave-active
transition: opacity .5s
diff --git a/packages/vuesax/src/functions/vsNotification/Base/style.sass b/packages/vuesax/src/functions/vsNotification/Base/style.sass
index cac3c762..8beffaaa 100644
--- a/packages/vuesax/src/functions/vsNotification/Base/style.sass
+++ b/packages/vuesax/src/functions/vsNotification/Base/style.sass
@@ -1,5 +1,5 @@
@import '../../../styles/mixins'
-@import '../../../styles/colors'
+// @import '../../../styles/colors'
.notification-enter-active
transition: all .3s ease .05s, transform .3s ease, margin .25s ease, clip-path 8s ease .8s
diff --git a/packages/vuesax/src/icons/icons.sass b/packages/vuesax/src/icons/icons.sass
index 0f1c9728..ba536efd 100644
--- a/packages/vuesax/src/icons/icons.sass
+++ b/packages/vuesax/src/icons/icons.sass
@@ -1,5 +1,5 @@
@import '../styles/mixins'
-@import '../styles/colors'
+// @import '../styles/colors'
.vs-icon-close
width: 30px
height: 30px
diff --git a/packages/vuesax/src/index.ts b/packages/vuesax/src/index.ts
index f2d92b7e..e436ccba 100644
--- a/packages/vuesax/src/index.ts
+++ b/packages/vuesax/src/index.ts
@@ -9,7 +9,6 @@ const install = (Vue: any, options?: VuesaxOptions) => {
Object.values(vsComponents).forEach((vsComponent) => {
Vue.use(vsComponent)
})
-
// layout
Object.values(vsLayouts).forEach((vsLayout) => {
Vue.use(vsLayout)
diff --git a/packages/vuesax/src/layout/grid/style.sass b/packages/vuesax/src/layout/grid/style.sass
index 4c0c9ebe..ec3a2b31 100644
--- a/packages/vuesax/src/layout/grid/style.sass
+++ b/packages/vuesax/src/layout/grid/style.sass
@@ -1,5 +1,5 @@
@import '../../styles/mixins'
-@import '../../styles/colors'
+// @import '../../styles/colors'
.vs-row
width: 100%
diff --git a/packages/vuesax/src/mixins/component.ts b/packages/vuesax/src/mixins/component.ts
index 2a32c9db..90922517 100644
--- a/packages/vuesax/src/mixins/component.ts
+++ b/packages/vuesax/src/mixins/component.ts
@@ -1,6 +1,6 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
-import { setColor } from '../util/index'
+import { getColor } from '../util/index'
@Component
export default class VsComponent extends Vue {
static install: (vue: any) => void
@@ -8,6 +8,7 @@ export default class VsComponent extends Vue {
static use: (vue: any) => any
componentColor: string = null
+ getColor: any = null
@Prop({ type: String, default: null }) color!: string
@@ -23,76 +24,19 @@ export default class VsComponent extends Vue {
@Prop({ type: Boolean, default: false }) active!: boolean
+ // get getColor() {
+ // return getColor(this.color)
+ // }
+
get isColorDark() {
return this.color === 'dark' || this.dark || this.componentColor === 'dark'
}
- changeColor() {
- if (!this.$el || this.$el.nodeName == '#comment') { return }
- this.componentColor = (this.danger && 'danger') ||
- (this.success && 'success') ||
- (this.warn && 'warn') ||
- (this.dark && 'dark') ||
- (this.primary && 'primary')
- if (this.color || this.componentColor) {
- setColor('color', this.componentColor || this.color || 'primary', this.$el, true)
-
- if (this.$refs.options) {
- setColor('color', this.componentColor || this.color || 'primary', this.$refs.options, true)
- }
-
- if (this.$refs.tooltip) {
- setColor('color', this.componentColor || this.color || 'primary', this.$refs.tooltip, true)
- }
- }
- if (this.componentColor == 'dark' || this.color == 'dark') {
- this.$el.classList.add('vs-component-dark')
- } else {
- this.$el.classList.remove('vs-component-dark')
- }
-
- if (this.componentColor == 'white') {
- this.$el.classList.add('vs-component-white')
- } else {
- this.$el.classList.remove('vs-component-white')
- }
- }
-
- @Watch('color')
- handleWatchColor() {
- this.changeColor()
- }
-
- @Watch('primary')
- handleWatchPrimary() {
- this.changeColor()
- }
-
- @Watch('danger')
- handleWatchDanger() {
- this.changeColor()
- }
-
- @Watch('success')
- handleWatchSuccess() {
- this.changeColor()
- }
-
- @Watch('warn')
- handleWatchWarn() {
- this.changeColor()
- }
-
- @Watch('dark')
- handleWatchDark() {
- this.changeColor()
- }
-
- updated() {
- this.changeColor()
+ get isColor() {
+ return !!this.color || !!this.primary || !!this.success || !!this.warn || !!this.danger || !!this.dark
}
mounted() {
- this.changeColor()
+ this.getColor = getColor(this.color)
}
}
diff --git a/packages/vuesax/src/styles/_colors.sass b/packages/vuesax/src/styles/_colors.sass
index 77b00538..63e8a44f 100644
--- a/packages/vuesax/src/styles/_colors.sass
+++ b/packages/vuesax/src/styles/_colors.sass
@@ -41,3 +41,15 @@
--vs-gray-3: 240, 243, 244
--vs-gray-4: 230, 233, 234
+[class*="--primary"]
+ --vs-color: var(--vs-primary)
+[class*="--default"]
+ --vs-color: var(--vs-primary)
+[class*="--danger"]
+ --vs-color: var(--vs-danger)
+[class*="--success"]
+ --vs-color: var(--vs-success)
+[class*="--dark"]
+ --vs-color: var(--vs-dark)
+[class*="--warn"]
+ --vs-color: var(--vs-warn)
diff --git a/packages/vuesax/src/styles/_reset.sass b/packages/vuesax/src/styles/_reset.sass
index 7ab106be..6dd9e164 100644
--- a/packages/vuesax/src/styles/_reset.sass
+++ b/packages/vuesax/src/styles/_reset.sass
@@ -14,7 +14,6 @@ input,textarea,button,select,a
[class*="vs-"]
- border: 0px
box-sizing: border-box
outline: none
list-style: none
diff --git a/packages/vuesax/src/styles/index.ts b/packages/vuesax/src/styles/index.ts
new file mode 100644
index 00000000..7d18375b
--- /dev/null
+++ b/packages/vuesax/src/styles/index.ts
@@ -0,0 +1 @@
+import './vuesax.sass'
diff --git a/packages/vuesax/src/util/defineVuesaxOptions.ts b/packages/vuesax/src/util/defineVuesaxOptions.ts
index a61bfcb9..c08fe504 100644
--- a/packages/vuesax/src/util/defineVuesaxOptions.ts
+++ b/packages/vuesax/src/util/defineVuesaxOptions.ts
@@ -15,7 +15,9 @@ export interface VuesaxColors {
const defineColors = (colors: VuesaxColors) => {
Object.keys(colors).forEach((item) => {
- setColor(item, colors[item], document.body)
+ if (document.body) {
+ setColor(item, colors[item], document.body)
+ }
})
}
diff --git a/packages/vuesax/src/util/index.ts b/packages/vuesax/src/util/index.ts
index ecc71a1a..cb9f394c 100644
--- a/packages/vuesax/src/util/index.ts
+++ b/packages/vuesax/src/util/index.ts
@@ -82,7 +82,7 @@ const setColor = (colorName: string, color: string, el: any, addClass?: boolean)
el.classList.add('vs-change-color')
}
} else if (isColor(color)) {
- const style = getComputedStyle(document.body)
+ const style = window.getComputedStyle(document.body)
newColor = style.getPropertyValue('--vs-' + color)
setVar(colorName, newColor, el)
if (addClass) {
@@ -108,6 +108,42 @@ const setColor = (colorName: string, color: string, el: any, addClass?: boolean)
}
}
+const getColor = (color: string) => {
+ function hexToRgb(hex: string) {
+ const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+ hex = hex.replace(shorthandRegex, (m: any, r: string, g: string, b: string) => {
+ return r + r + g + g + b + b
+ })
+
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+ return result ? {
+ r: parseInt(result[1], 16),
+ // tslint:disable-next-line:object-literal-sort-keys
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null
+ }
+
+ const isRGB = /^(rgb|rgba)/.test(color)
+ const isRGBNumbers = /^(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)$/.test(color)
+ const isHEX = /^(#)/.test(color)
+ let newColor
+
+ if (isRGB) {
+ const arrayColor = color.replace(/[rgba()]/g, '').split(',')
+ newColor = `${arrayColor[0]},${arrayColor[1]},${arrayColor[2]}`
+ } else if (isHEX) {
+ const rgb = hexToRgb(color)
+ newColor = `${rgb!.r},${rgb!.g},${rgb!.b}`
+ } else if (isColor(color)) {
+ const style = window.getComputedStyle(document.body)
+ newColor = style.getPropertyValue('--vs-' + color)
+ } else if (isRGBNumbers) {
+ newColor = color
+ }
+ return newColor
+}
+
const insertBody = (element: HTMLElement, parent: any) => {
const target = parent ? parent : document.body
target.insertBefore(element, target.lastChild)
@@ -212,6 +248,7 @@ const setCordsPosition = (element: any, parent: any, position: string) => {
export {
setColor,
+ getColor,
setVar,
isColor,
insertBody,
diff --git a/packages/vuesax/src/util/ripple/index.ts b/packages/vuesax/src/util/ripple/index.ts
index 4dff186a..2ab1daa5 100644
--- a/packages/vuesax/src/util/ripple/index.ts
+++ b/packages/vuesax/src/util/ripple/index.ts
@@ -18,12 +18,14 @@ const ripple = (evt: any, color: any = '', solid: boolean = false) => {
effectContent.className = 'vs-ripple-content'
const effect = document.createElement('div')
- setColor('color', color, effectContent)
+ if (!color) {
+ setColor('color', '#fff', effectContent)
+ }
effect.className = 'vs-ripple'
if (solid) {
effect.classList.add('vs-ripple--solid')
- setColor('color', color || 'primary', effectContent)
+ // setColor('color', color || 'primary', effectContent)
}
effect.style.transition = `all ${time}s ease`
diff --git a/packages/vuesax/src/util/ripple/style.sass b/packages/vuesax/src/util/ripple/style.sass
index f0971447..440863d8 100644
--- a/packages/vuesax/src/util/ripple/style.sass
+++ b/packages/vuesax/src/util/ripple/style.sass
@@ -1,8 +1,8 @@
@import '../../styles/mixins'
-@import '../../styles/colors'
+// @import '../../styles/colors'
.vs-ripple-content
- --vs-color: var(--vs-background)
+ --vs-color: inherit
width: 100px
height: 100px
position: absolute
+