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

feat: add and fix event

Browse source
This commit is contained in:
Methapon2001 2024-08-07 15:01:14 +07:00
parent f4e85946dc
commit c25cede70b
8 changed files with 219 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ defineProps<{
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-add"
:class="{
'main-btn__solid': solid && !outlined,

106
src/components/button/BackButton.vue Normal file
View file

@ -0,0 +1,106 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
dark?: boolean;
}>();
</script>
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-back"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot>{{ $t('back') }}</slot>
</button>
</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);
margin-right: var(--size-1);
font-size: 1.2rem;
}
}
.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>

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

@ -14,6 +14,7 @@ defineProps<{
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-cancel"
:class="{
'main-btn__solid': solid && !outlined,

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

@ -14,6 +14,7 @@ defineProps<{
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-delete"
:class="{
'main-btn__solid': solid && !outlined,

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

@ -14,6 +14,7 @@ defineProps<{
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-edit"
:class="{
'main-btn__solid': solid && !outlined,

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

@ -14,6 +14,7 @@ defineProps<{
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-save"
:class="{
'main-btn__solid': solid && !outlined,

106
src/components/button/UndoButton.vue Normal file
View file

@ -0,0 +1,106 @@
<script lang="ts" setup>
import { Icon } from '@iconify/vue';
defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
dark?: boolean;
}>();
</script>
<template>
<button
@click="(e) => $emit('click', e)"
class="main-btn-undo"
:class="{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot>{{ $t('undo') }}</slot>
</button>
</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);
margin-right: var(--size-1);
font-size: 1.2rem;
}
}
.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>

2
src/components/button/index.ts
View file

@ -3,3 +3,5 @@ export { default as SaveButton } from './SaveButton.vue';
export { default as CancelButton } from './CancelButton.vue';
export { default as EditButton } from './EditButton.vue';
export { default as DeleteButton } from './DeleteButton.vue';
export { default as BackButton } from './BackButton.vue';
export { default as UndoButton } from './UndoButton.vue';