chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: use shared main button

Browse source
This commit is contained in:
Methapon2001 2024-08-08 11:33:28 +07:00
parent c5997394fe
commit 879544f12b
8 changed files with 161 additions and 651 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/components/button/AddButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-add"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-plus"
color="var(--info-bg)"
>
<slot name="icon">
<Icon icon="mdi-plus" class="main-btn-icon" />
</slot>
<slot>{{ $t('add') }}</slot>
</button>
{{ $t('add') }}
</MainButton>
</template>
<style scoped>
.main-btn-add {
--button-main-color: var(--info-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-add:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/BackButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-back"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-arrow-left"
color="var(--info-bg)"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('back') }}</slot>
</button>
{{ $t('back') }}
</MainButton>
</template>
<style scoped>
.main-btn-back {
--button-main-color: var(--info-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-back:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/CancelButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-cancel"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-close"
color="var(--negative-bg)"
>
<slot name="icon">
<Icon icon="mdi-close" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('cancel') }}</slot>
</button>
{{ $t('cancel') }}
</MainButton>
</template>
<style scoped>
.main-btn-cancel {
--button-main-color: var(--negative-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-cancel:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/DeleteButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-delete"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-trash-can"
color="var(--negative-bg)"
>
<slot name="icon">
<Icon icon="mdi-trash-can" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('delete') }}</slot>
</button>
{{ $t('delete') }}
</MainButton>
</template>
<style scoped>
.main-btn-delete {
--button-main-color: var(--negative-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-delete:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/EditButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-edit"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-pencil"
color="var(--info-bg)"
>
<slot name="icon">
<Icon icon="mdi-pencil" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('edit') }}</slot>
</button>
{{ $t('edit') }}
</MainButton>
</template>
<style scoped>
.main-btn-edit {
--button-main-color: var(--info-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-edit:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

112
src/components/button/MainButton.vue Normal file
View file

@ -0,0 +1,112 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
icon: string;
color: string;
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
dark?: boolean;
}>();
</script>
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:style="{ '--button-main-color': color }"
:disabled="disabled"
>
<slot name="icon">
<Icon :icon class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly" />
</button>
</template>
<style scoped>
.main-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-edit:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/SaveButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-save"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-content-save"
color="var(--positive-bg)"
>
<slot name="icon">
<Icon icon="mdi-content-save" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('save') }}</slot>
</button>
{{ $t('save') }}
</MainButton>
</template>
<style scoped>
.main-btn-save {
--button-main-color: var(--positive-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-save:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>

100
src/components/button/UndoButton.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import MainButton from './MainButton.vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
@ -14,98 +14,12 @@ defineProps<{
</script>
<template>
<button
<MainButton
@click="(e) => $emit('click', e)"
class="main-btn-undo"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
v-bind="{ ...$props, ...$attrs }"
icon="mdi-arrow-left"
color="var(--negative-bg)"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot v-if="!iconOnly">{{ $t('undo') }}</slot>
</button>
{{ $t('undo') }}
</MainButton>
</template>
<style scoped>
.main-btn-undo {
--button-main-color: var(--info-bg);
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
border-radius: var(--radius-2);
padding-block: var(--size-1);
padding-inline: var(--size-2);
transition: 100ms ease-in-out;
outline: none;
&.main-btn__dark:not(.main-btn__outline) {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background: hsla(var(--button-main-color) / 0.1);
}
&:not(:disabled):active {
background: hsla(var(--button-main-color) / 0.2);
}
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {
background-color: hsla(var(--button-main-color) / 1);
color: white;
& > .main-btn-icon {
color: white;
}
&:not(:disabled):hover,
&:not(:disabled):focus {
background-color: hsla(var(--button-main-color) / 0.8);
}
&:not(:disabled):active {
background-color: hsla(var(--button-main-color) / 0.7);
}
}
.main-btn__outline {
border: 1px solid hsla(var(--button-main-color) / 1);
color: hsla(var(--button-main-color) / 1);
}
.main-btn-undo:disabled {
filter: grayscale(1);
opacity: 0.8;
&.main-btn__solid {
background: hsla(0 0% 0% / 0.08);
}
&.main-btn__outline {
border: 1px solid hsla(0 0% 0% / 0.3);
}
}
</style>