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

feat: icon only button

Browse source
This commit is contained in:
Methapon2001 2024-08-08 11:09:45 +07:00
parent 314ffa8582
commit b309f91ca4
7 changed files with 49 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,6 +21,7 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot>{{ $t('back') }}</slot>
<slot v-if="!iconOnly">{{ $t('back') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-close" class="main-btn-icon" />
</slot>
<slot>{{ $t('cancel') }}</slot>
<slot v-if="!iconOnly">{{ $t('cancel') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-close" class="main-btn-icon" />
<Icon icon="mdi-trash-can" class="main-btn-icon" />
</slot>
<slot>{{ $t('delete') }}</slot>
<slot v-if="!iconOnly">{{ $t('delete') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-pencil" class="main-btn-icon" />
</slot>
<slot>{{ $t('edit') }}</slot>
<slot v-if="!iconOnly">{{ $t('edit') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-content-save" class="main-btn-icon" />
</slot>
<slot>{{ $t('save') }}</slot>
<slot v-if="!iconOnly">{{ $t('save') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {

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

@ -5,6 +5,7 @@ defineEmits<{
(e: 'click', v: MouseEvent): void;
}>();
defineProps<{
iconOnly?: boolean;
solid?: boolean;
outlined?: boolean;
disabled?: boolean;
@ -20,13 +21,14 @@ defineProps<{
'main-btn__solid': solid && !outlined,
'main-btn__outline': !solid && outlined,
'main-btn__dark': dark,
'main-btn__icon-only': iconOnly,
}"
:disabled="disabled"
>
<slot name="icon">
<Icon icon="mdi-arrow-left" class="main-btn-icon" />
</slot>
<slot>{{ $t('undo') }}</slot>
<slot v-if="!iconOnly">{{ $t('undo') }}</slot>
</button>
</template>
@ -63,9 +65,12 @@ defineProps<{
& > .main-btn-icon {
color: hsla(var(--button-main-color) / 1);
margin-right: var(--size-1);
font-size: 1.2rem;
}
&:not(.main-btn__icon-only) > .main-btn-icon {
margin-right: var(--size-1);
}
}
.main-btn__solid {