feat: main button
This commit is contained in:
Methapon2001
parent
a4b7df62eb
commit
f4e85946dc
6 changed files with 530 additions and 0 deletions
105
src/components/button/AddButton.vue
Normal file
105
src/components/button/AddButton.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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
|
||||
class="main-btn-add"
|
||||
:class="{
|
||||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__dark': dark,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="icon">
|
||||
<Icon icon="mdi-plus" class="main-btn-icon" />
|
||||
</slot>
|
||||
<slot>{{ $t('add') }}</slot>
|
||||
</button>
|
||||
</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);
|
||||
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-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>
|
||||
105
src/components/button/CancelButton.vue
Normal file
105
src/components/button/CancelButton.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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
|
||||
class="main-btn-cancel"
|
||||
:class="{
|
||||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__dark': dark,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="icon">
|
||||
<Icon icon="mdi-close" class="main-btn-icon" />
|
||||
</slot>
|
||||
<slot>{{ $t('cancel') }}</slot>
|
||||
</button>
|
||||
</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);
|
||||
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-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>
|
||||
105
src/components/button/DeleteButton.vue
Normal file
105
src/components/button/DeleteButton.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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
|
||||
class="main-btn-delete"
|
||||
:class="{
|
||||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__dark': dark,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="icon">
|
||||
<Icon icon="mdi-close" class="main-btn-icon" />
|
||||
</slot>
|
||||
<slot>{{ $t('delete') }}</slot>
|
||||
</button>
|
||||
</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);
|
||||
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-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>
|
||||
105
src/components/button/EditButton.vue
Normal file
105
src/components/button/EditButton.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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
|
||||
class="main-btn-edit"
|
||||
:class="{
|
||||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__dark': dark,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="icon">
|
||||
<Icon icon="mdi-pencil" class="main-btn-icon" />
|
||||
</slot>
|
||||
<slot>{{ $t('edit') }}</slot>
|
||||
</button>
|
||||
</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);
|
||||
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-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>
|
||||
105
src/components/button/SaveButton.vue
Normal file
105
src/components/button/SaveButton.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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
|
||||
class="main-btn-save"
|
||||
:class="{
|
||||
'main-btn__solid': solid && !outlined,
|
||||
'main-btn__outline': !solid && outlined,
|
||||
'main-btn__dark': dark,
|
||||
}"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="icon">
|
||||
<Icon icon="mdi-content-save" class="main-btn-icon" />
|
||||
</slot>
|
||||
<slot>{{ $t('save') }}</slot>
|
||||
</button>
|
||||
</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);
|
||||
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-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>
|
||||
5
src/components/button/index.ts
Normal file
5
src/components/button/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export { default as AddButton } from './AddButton.vue';
|
||||
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';
|
||||
Loading…
Add table
Add a link
Reference in a new issue