diff --git a/src/components/Button/SButton/SButton.vue b/src/components/Button/SButton/SButton.vue index 710173c8..771c8b69 100644 --- a/src/components/Button/SButton/SButton.vue +++ b/src/components/Button/SButton/SButton.vue @@ -52,6 +52,12 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design * By default it's set to `false` */ @Prop({ default: false, type: Boolean }) readonly rounded!: boolean + /** + * Primary property for `type="action"` buttons. + * + * By default it's set to `false` + */ + @Prop({ default: false, type: Boolean }) readonly primary!: boolean /** * Icon name from icon collection of this library */ @@ -144,6 +150,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design if (this.alternative) { cssClasses.push('s-alternative') } + if (this.primary) { + cssClasses.push('s-primary') + } if (this.pressed) { cssClasses.push('s-pressed') } @@ -171,15 +180,14 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design } get isRounded (): boolean { - if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) return false + if (([ButtonTypes.ACTION] as Array).includes(this.type)) return this.rounded - return this.rounded + return false } get isLoading (): boolean { - if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type) || this.isRounded) { - return false - } + if (([ButtonTypes.LINK, ButtonTypes.ACTION] as Array).includes(this.type)) return false + return this.loading } diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts index 1b76f72b..f86df398 100644 --- a/src/components/DesignSystem/DesignSystemInject.ts +++ b/src/components/DesignSystem/DesignSystemInject.ts @@ -12,4 +12,8 @@ export default class DesignSystemInject extends Vue { get designSystemClass (): string { return this.useDesignSystem ? this.designSystem.value : '' } + + get isNeumorphic (): boolean { + return this.designSystem.value === DesignSystem.NEUMORPHIC + } } diff --git a/src/components/Input/SInput/SInput.vue b/src/components/Input/SInput/SInput.vue index 82ed8733..a9c9e6d6 100644 --- a/src/components/Input/SInput/SInput.vue +++ b/src/components/Input/SInput/SInput.vue @@ -3,10 +3,10 @@ class="s-input" :class="computedClasses" > - +
- +
{{ placeholder }} @@ -57,15 +57,15 @@ >
- +
- +