111 lines
2.1 KiB
Vue
111 lines
2.1 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import IconLoader from "~/components/icons/iconLoader.vue";
|
||
|
|
import type {ButtonProps} from "~/components/ui/Buttons/types.buttons";
|
||
|
|
import {ButtonKind} from "~/components/ui/Buttons/constants.buttons";
|
||
|
|
import IconAdd from "~/components/icons/iconAdd.vue";
|
||
|
|
import IconSend from "~/components/icons/iconSend.vue";
|
||
|
|
import {useWindowSize} from "@vueuse/core";
|
||
|
|
|
||
|
|
const {width} = useWindowSize()
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<ButtonProps>(), {
|
||
|
|
loading: false,
|
||
|
|
kind: ButtonKind.CreateMaterial
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
const getButtonTextAndIcon = computed(() => {
|
||
|
|
switch (props.kind) {
|
||
|
|
case ButtonKind.CreateStory:
|
||
|
|
return {
|
||
|
|
text: 'Создать историю',
|
||
|
|
icon: IconAdd,
|
||
|
|
};
|
||
|
|
case ButtonKind.CreateMaterial:
|
||
|
|
return {
|
||
|
|
text: 'Создать материал',
|
||
|
|
icon: IconAdd,
|
||
|
|
};
|
||
|
|
case ButtonKind.Send:
|
||
|
|
default:
|
||
|
|
return {
|
||
|
|
text: 'Сохранить',
|
||
|
|
icon: IconSend
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<button type="button" class="button">
|
||
|
|
<IconLoader class="icon loader" :class="{loading}" v-if="loading" />
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<span v-if="width > 768">{{getButtonTextAndIcon.text}}</span>
|
||
|
|
<component v-else :is="getButtonTextAndIcon.icon" class="icon"/>
|
||
|
|
</template>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.button {
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 0 24px;
|
||
|
|
height: 44px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background: #E7F8FE;
|
||
|
|
color: var(--text-blue);
|
||
|
|
|
||
|
|
font-family: FuturaPT, sans-serif;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 100%;
|
||
|
|
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all .3s ease;
|
||
|
|
|
||
|
|
&:hover:not(:disabled) {
|
||
|
|
background: #D2F3FF;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
background: #E7F8FE;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.loading {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
@include mixins.square(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
animation: rotate 1s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% {
|
||
|
|
rotate: 0deg;
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
rotate: 360deg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 768px) {
|
||
|
|
.button {
|
||
|
|
padding: 10px;
|
||
|
|
height: 48px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
@include mixins.square(28px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|