schon/storefront/src/components/ui/ui-button.vue
Alexandr SaVBaD Waltz 2d363e1740 Features: 1) Introduce new components including ui-counter, ui-link, base-auth, and base-header-catalogue with scoped styles; 2) Add useProductTags composable and integrate GraphQL queries for product tagging; 3) Build standalone pages for cart and wishlist with basic templates; 4) Integrate vue3-marquee-slider, swiper, and primeicons dependencies for enhanced UI interactions; 5) Add skeleton loaders for language switcher and counter components; 6) Localize the app with support for it-it, de-de, ja-jp, da-dk, fr-fr, and nl-nl locales;
Fixes: 1) Refactor `useProducts` and `useCategorybySlug` composables for improved error handling and lazy loading; 2) Correct import path in `product-page.vue` for `useProductBySlug`; 3) Update `useLanguages` composable to set current locale from local storage; 4) Remove unused `auth.js`, `base-header.vue`, and deprecated GraphQL fragments;

Extra: Minor styling adjustments and removal of redundant console logs; Updated `package-lock.json` dependencies for version consistency.
2025-05-31 17:43:33 +03:00

65 lines
No EOL
1.1 KiB
Vue

<template>
<button
class="button"
:disabled="isDisabled"
:class="[{active: isLoading}]"
type="submit"
>
<ui-loader class="button__loader" v-if="isLoading" />
<slot v-else />
</button>
</template>
<script setup>
import UiLoader from "@/components/ui/ui-loader.vue";
const props = defineProps({
isDisabled: Boolean,
isLoading: Boolean
})
</script>
<style lang="scss" scoped>
.button {
position: relative;
width: 100%;
cursor: pointer;
flex-shrink: 0;
transition: 0.2s;
border: 1px solid $accent;
background-color: $accent;
border-radius: $default_border_radius;
padding-block: 7px;
display: grid;
place-items: center;
z-index: 1;
color: $white;
text-align: center;
font-size: 14px;
font-weight: 700;
@include hover {
background-color: $accentLight;
}
&.active {
background-color: $accentLight;
}
&:disabled {
cursor: not-allowed;
background-color: $accentDisabled;
color: $white;
}
&:disabled:hover, &.active {
background-color: $accentDisabled;
color: $white;
}
&__loader {
margin-bottom: 10px;
}
}
</style>