FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
ameliabooking
/
v3
/
src
/
views
/
common
/
CatalogFormConstruction
/
Header
Edit File: Header.vue
<template> <div class="am-cat__header-inner"> <div class="am-cat__back-btn"> <AmButton v-if="props.backBtnVisibility" :prefix="arrowLeft" category="secondary" :type="btnType" :size="btnSize" @click="goBack" @keydown.enter="goBack" > {{props.btnString}} </AmButton> </div> <div v-if="props.cartBtnVisibility" class="am-cat__cart-btn" > <span class="am-cat__cart-number"> {{props.cartItemsNumber}} </span> <AmButton aria-label="Go to cart button" category="secondary" :type="btnType" :size="btnSize" :round="true" :icon-only="true" :icon="iconCart" @click="goToCart" > </AmButton> </div> </div> </template> <script setup> import AmButton from '../../../_components/button/AmButton.vue' import IconComponent from '../../../_components/icons/IconComponent.vue' import { defineComponent } from "vue" import {useStore} from "vuex"; // * import composable import { useRemoveLastCartItem, } from '../../../../assets/js/public/cart' let props = defineProps({ btnString: { type: String, default: '' }, btnType: { type: String, default: 'plain' }, btnSize: { type: String, default: 'mini' }, backBtnVisibility: { type: Boolean, default: true }, cartBtnVisibility: { type: Boolean, default: false }, cartItemsNumber: { type: Number, default: 0 } }) let arrowLeft = defineComponent({ components: {IconComponent}, template: `<IconComponent icon="arrow-left"></IconComponent>` }) let iconCart = defineComponent({ components: {IconComponent}, template: `<IconComponent icon="cart"/>` }) let emits = defineEmits(['goBack', 'goToCart']) function goBack() { emits('goBack') } const store = useStore() function goToCart() { useRemoveLastCartItem(store) emits('goToCart') } </script> <script> export default { name: "MainHeader" } </script> <style lang="scss"> @mixin catalog-header { .am-cat { &__header { &-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } } &__back-btn { width: 100%; } &__cart { &-btn { position: relative; .am-icon-cart { font-size: 24px; } } &-number { position: absolute; top: -6px; left: -6px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; border-radius: 50%; background-color: var(--am-c-error); color: var(--am-c-cat-main-bgr); } } } } // Public .amelia-v2-booking #amelia-container { @include catalog-header; } // Admin #amelia-app-backend-new #amelia-container { @include catalog-header; } </style>
Save
Back