@autoafleveren/ui 1.2.13 → 1.3.3

package/src/modules/components/AppAvatar/AppAvatar.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+  import { domClassesPerSize } from '.';
+  import DefaultAvatar from './DefaultAvatar.vue';
+
+  import type { Props } from './index.d';
+
+  withDefaults(defineProps<Props>(), {
+    size: 'medium',
+  });
+</script>
+
+<template>
+  <div
+    :class="domClassesPerSize[size]"
+    class="app-avatar relative flex items-center rounded-full"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      alt="avatar"
+      class="absolute inset-0 size-full object-cover object-center rounded-full"
+    >
+
+    <DefaultAvatar
+      v-else
+      :color="defaultAvatarColor"
+      class="absolute inset-0 size-full rounded-full"
+    />
+  </div>
+</template>

package/src/modules/components/AppAvatar/DefaultAvatar.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useLayout } from '~/modules/composables';
+
+  const props = defineProps<{
+    color?: string;
+  }>();
+
+  const { colors } = useLayout();
+
+  const colorWithFallback = computed(() => props.color ?? colors.primaryColorActive.value);
+</script>
+
+<template>
+  <svg
+    width="39"
+    height="39"
+    viewBox="0 0 39 39"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_928_1872"
+      style="mask-type:alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="39"
+      height="39"
+    >
+      <circle
+        cx="19.5"
+        cy="19.5"
+        r="19.5"
+        fill="#D9D9D9"
+      ></circle>
+    </mask>
+
+    <g mask="url(#mask0_928_1872)">
+      <circle
+        cx="19.5"
+        cy="19.5"
+        r="19.5"
+        fill="#E4E4E7"
+      ></circle>
+
+      <path
+        d="M22.1755 30.7083C21.0239 32.4573 21.339 35.344 21.339 35.344C21.339 35.344 23.0323 34.3422 23.1456
+          32.6631C23.2588 30.984 22.1755 30.7083 22.1755 30.7083Z"
+        fill="#EBEFF2"
+      ></path>
+
+      <path
+        :fill="colorWithFallback"
+        d="M35.5856 80.897C29.1642 82.4294 14.7376 82.1295 8.80295 80.8632C8.72254 75.5395 8.88442 70.0636 9.34891
+          64.4843C10.4863 50.8311 21.5303 37.8094 22.0551 33.4794C22.1757 32.4899 22.2107 31.5637 22.1715 30.7083C23.219
+          32.849 22.4128 36.1324 23.3428 35.6687C24.1342 35.2748 27.7454 32.322 28.7706 31.0314C31.6253 40.2237 35.6692
+          55.4599 35.6692 68.0444C35.6776 72.405 35.648 76.6969 35.5845 80.8981L35.5856 80.897Z"
+      ></path>
+
+      <path
+        d="M28.9482 30.3374C28.9564 30.4399 28.8581 30.617 28.6812 30.8453C27.6784 32.1493 24.1454 35.1328 23.3724
+          35.5308C22.4628 35.9993 23.2503 32.6818 22.2268 30.5188C22.7132 30.5487 26.6922 28.6152 27.933 28.4082C28.0986
+          28.3804 28.2155 28.3836 28.2683 28.4252C28.7226 28.7859 28.8954 29.6513 28.9482 30.3364V30.3374Z"
+        fill="white"
+      ></path>
+
+      <path
+        d="M14.0829 3.72947C10.4355 3.03851 8.76582 6.04253 9.26737 8.87937C9.76786 11.7162 15.3706 12.932 16.0383
+          12.9563C16.706 12.9807 17.0393 8.95132 16.6817 6.78111C16.324 4.61195 14.0829 3.72947 14.0829 3.72947Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M27.9844 28.5191C26.8257 28.7064 23.335 30.3201 22.3573 30.5761C22.3541 30.5761 22.353 30.5772 22.352
+          30.5772C22.262 30.6015 22.1933 30.6132 22.1499 30.61C22.0282 27.9001 21.1595 25.9204 19.8463 24.9797C19.7575
+          24.9173 19.6686 24.858 19.5776 24.8051C18.8623 24.3871 17.747 24.3533 16.6233 24.3173H16.6222C14.7695 24.2602
+          12.8913 24.202 12.7357 22.4201C12.485 19.5589 13.9875 18.8796 13.996 17.9135C14.0055 16.9475 13.0214 17.1623
+          12.45 16.8152C11.8776 16.4681 12.9505 15.8756 13.8087 13.9085C14.2848 12.8155 14.0891 11.4685 14.2266
+          10.1807C14.3335 9.15119 14.6562 8.15761 15.7048 7.36401L20.2463 9.65274L25.9856 13.9085V22.6814C25.9856
+          22.6814 25.9888 22.6857 25.9888 22.6889C26.0205 22.7746 26.3676 23.7078 26.9125 25.295C27.2162 26.1775
+          27.5802 27.2631 27.9854 28.5181L27.9844 28.5191Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M25.9848 13.9096V22.6825C25.0536 20.7102 25.8959 17.6532 23.9288 16.9506C21.9618 16.248 21.2349 13.862
+          21.2349 13.862C21.2349 13.862 20.9132 13.4916 20.7217 12.5499C20.5312 11.6082 18.7906 11.5373 18.4689
+          11.5838C18.179 11.6272 14.9538 11.7753 14.2258 10.1807C14.3327 9.15119 14.6554 8.15761 15.704 7.36401L20.2455
+          9.65274L25.9848 13.9085V13.9096Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M31.2133 19.1316C31.2694 19.5083 31.2757 20.0828 31.1646 20.687C30.8514 22.3747 29.6155 24.2836 25.9851
+          22.6837V14.8165C21.5801 16.8682 20.7463 13.642 20.9971 12.659C21.2479 11.676 20.9251 11.6051 20.031
+          11.9966C19.1369 12.3913 15.5721 12.4326 15.2388 10.0243C14.9055 7.61705 15.8578 6.75891 14.6663
+          7.16312C13.4749 7.56944 11.329 5.01724 12.1385 3.0142C12.95 1.01117 14.2367 -3.2499 17.956 -2.30182C21.6753
+          -1.3548 19.2194 2.15606 20.2448 2.87136C21.2701 3.58665 23.2012 0.98895 25.2042 2.49043C27.2072 3.99297
+          25.2275 7.80646 25.2042 8.73549C25.1799 9.66558 27.6834 7.44775 29.6621 8.68787C31.6418 9.928 32.4291 11.5734
+          31.1413 13.7658C30.8556 14.2536 30.5932 14.6451 30.3647 14.9647C29.5626 16.081 29.1372 16.318 29.3044
+          16.7339C29.5192 17.2703 30.9985 17.6999 31.2122 19.1295L31.2133 19.1316Z"
+        fill="#52525B"
+      ></path>
+
+      <path
+        d="M27.9849 28.5192C26.8262 28.7065 23.3355 30.3201 22.3578 30.5762C22.3546 30.5762 22.3535 30.5772 22.3525
+          30.5772C22.2424 30.5963 22.1747 30.6058 22.1567 30.609C22.3197 30.5349 25.9099 28.934 26.4697 28.0473C26.822
+          27.4907 26.9035 26.2051 26.913 25.2961C27.2167 26.1786 27.5807 27.2643 27.986 28.5192H27.9849Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M19.8411 24.6635C19.8421 24.7746 19.8453 24.8804 19.8463 24.9809C19.7575 24.9185 19.6686 24.8593 19.5776
+          24.8063C18.8623 24.3884 17.747 24.3545 16.6233 24.3185C19.3882 24.2328 21.7721 21.3018 21.9615 21.4923C22.152
+          21.6828 19.8157 23.3514 19.84 24.6635H19.8411Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M31.1645 20.686C29.0292 20.3516 25.9913 19.3697 25.9913 19.3697C25.9913 19.3697 25.9881 19.3644 25.9839
+          19.3506V16.171C26.5733 15.0134 27.6949 13.4304 27.6949 13.4304L30.3645 14.9658C29.5625 16.0821 29.1371
+          16.3191 29.3043 16.7349C29.5191 17.2714 30.9983 17.701 31.2121 19.1305C31.2682 19.5072 31.2745 20.0818
+          31.1634 20.686H31.1645Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M22.8708 17.9423C23.2338 13.6124 27.169 11.9067 28.1012 13.9764C29.0334 16.0461 25.0675 19.412 23.9776
+          19.5538C22.8878 19.6956 22.8719 17.9423 22.8719 17.9423H22.8708Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M24.16 18.0892C23.45 16.574 24.9356 15.2683 25.8212 15.9423C26.7069 16.6163 25.0615 16.5454 24.9514
+          16.9179C24.8414 17.2903 24.9747 17.4702 24.6933 17.5411C24.4107 17.612 24.2785 18.34 24.16 18.0892Z"
+        fill="#EAAA79"
+      ></path>
+
+      <circle
+        cx="19.4453"
+        cy="17.2644"
+        r="1.62251"
+        fill="#FCA573"
+      ></circle>
+
+      <path
+        d="M13.4185 19.8579C14.36 21.1027 16.4522 22.6975 17.2889 19.1187C16.4662 20.0624 14.531 20.432
+          13.4185 19.8579Z"
+        fill="white"
+      ></path>
+
+      <path
+        d="M13.4185 19.8579C14.36 21.1027 16.4522 22.6975 17.2889 19.1187C16.4952 20.2142 14.4583 20.8804 13.4185
+          19.8579Z"
+        fill="#FE9661"
+      ></path>
+
+      <path
+        d="M31.7089 80.4317C30.4285 81.4243 29.1027 82.3745 27.798 83.2538C27.0013 82.2538 24.265 79.7577
+          23.1433 79.253C23.1423 79.2519 23.1402 79.2519 23.1402 79.2519C25.1495 76.1389 26.978 73.0164 27.2552
+          71.17C27.9705 66.4095 18.277 56.8779 19.6737 51.0317C19.6875 50.9735 20.1658 49.3948 20.1806 49.3366C21.3022
+          44.9009 25.3167 38.2485 27.6848 42.1625C31.7713 48.9176 39.4946 61.977 40.559 68.0199C41.2204 71.7752 36.8302
+          76.4574 31.7089 80.4317Z"
+        fill="#E25C2A"
+      ></path>
+
+      <ellipse
+        cx="16.0958"
+        cy="13.853"
+        rx="0.579469"
+        ry="1.39073"
+        transform="rotate(7.61614 16.0958 13.853)"
+        fill="#232426"
+      ></ellipse>
+
+      <ellipse
+        cx="13.9746"
+        cy="13.7072"
+        rx="0.543825"
+        ry="1.30518"
+        transform="rotate(-0.540649 13.9746 13.7072)"
+        fill="#232426"
+      ></ellipse>
+    </g>
+  </svg>
+</template>

package/src/modules/components/AppAvatar/__tests__/app-avatar.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppAvatar from '../AppAvatar.vue';
+import DefaultAvatar from '../DefaultAvatar.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Size } from '../index.d';
+
+function createWrapper(
+  size: Size,
+  src?: string,
+  defaultAvatarColor?: string,
+): VueWrapper<InstanceType<typeof AppAvatar>> {
+  return shallowMount(AppAvatar, {
+    props: {
+      size,
+      src,
+      defaultAvatarColor,
+    },
+  });
+}
+
+describe('the AppAvatar component', () => {
+  it('renders default avatar when src not defined', () => {
+    const wrapper = createWrapper('small');
+
+    const defaultAvatar = wrapper.findComponent(DefaultAvatar);
+    expect(defaultAvatar.exists()).toBe(true);
+
+    const img = wrapper.find('img');
+    expect(img.exists()).toBe(false);
+  });
+
+  it('renders custom avatar when src defined', () => {
+    const wrapper = createWrapper('medium', 'image.src');
+
+    const defaultAvatar = wrapper.findComponent(DefaultAvatar);
+    expect(defaultAvatar.exists()).toBe(false);
+
+    const img = wrapper.find('img');
+    expect(img.exists()).toBe(true);
+    expect(img.attributes('src')).toBe('image.src');
+  });
+
+  it('can set avatar size', () => {
+    let wrapper = createWrapper('small');
+
+    expect(wrapper.classes('h-7')).toBe(true);
+    expect(wrapper.classes('w-7')).toBe(true);
+
+    wrapper = createWrapper('medium');
+
+    expect(wrapper.classes('h-10')).toBe(true);
+    expect(wrapper.classes('w-10')).toBe(true);
+
+    wrapper = createWrapper('large');
+
+    expect(wrapper.classes('h-12')).toBe(true);
+    expect(wrapper.classes('w-12')).toBe(true);
+  });
+
+  it('can set the color of the default avatar', () => {
+    const color = '#3094CD';
+    const wrapper = createWrapper('small', undefined, color);
+
+    const defaultAvatar = wrapper.findComponent(DefaultAvatar);
+    expect(defaultAvatar.exists()).toBe(true);
+    expect(defaultAvatar.props('color')).toBe(color);
+  });
+});

package/src/modules/components/AppAvatar/index.d.ts

@@ -0,0 +1,9 @@
+import type { sizes } from './index';
+
+export type Size = typeof sizes[number];
+
+export interface Props {
+  size?: Size;
+  src?: string;
+  defaultAvatarColor?: string;
+}

package/src/modules/components/AppAvatar/index.ts

@@ -0,0 +1,9 @@
+import type { Size } from './index.d';
+
+export const sizes = ['small', 'medium', 'large'] as const;
+
+export const domClassesPerSize: Record<Size, string[]> = {
+  small: ['w-7 h-7'],
+  medium: ['w-10 h-10'],
+  large: ['w-12 h-12'],
+};

package/src/modules/components/AppBackButton/AppBackButton.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  import { ChevronLeftIcon } from '~icons';
+
+  import type { RouteLocationRaw, NavigationFailure } from 'vue-router';
+
+  const props = withDefaults(defineProps<{
+    buttonText?: string;
+    iconClasses?: string;
+    to?: RouteLocationRaw;
+  }>(), {
+    buttonText: 'Ga terug',
+    to: undefined,
+    iconClasses: '',
+  });
+
+  const router = useRouter();
+
+  async function goBack(): Promise<void | NavigationFailure | undefined> {
+    if (props.to) {
+      return router.push(props.to);
+    }
+
+    return router.back();
+  }
+</script>
+
+<template>
+  <div
+    class="inline-block cursor-pointer"
+    @click="goBack"
+  >
+    <div class="group mb-3 flex items-center font-semibold text-zinc-700">
+      <div
+        :class="iconClasses"
+        class="mr-4 flex items-center justify-center rounded-full bg-white p-2 drop-shadow-xs
+          transition-transform group-hover:-translate-x-2"
+      >
+        <!-- @vue-ignore -->
+        <ChevronLeftIcon
+          class="h-4 stroke-3 text-black"
+          data-test-icon
+        />
+      </div>
+
+      <slot>
+        {{ buttonText }}
+      </slot>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppBackButton/__tests__/app-back-button.spec.ts

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import IconStub from '~/tests/stubs/IconStub';
+import AppBackButton from '../AppBackButton.vue';
+
+import type { RouteLocationRaw } from 'vue-router';
+import type { VueWrapper } from '@vue/test-utils';
+import type { ChevronLeftIcon } from '@heroicons/vue/24/outline';
+
+vi.mock('@autoafleveren/ui/icons', () => ({
+  ChevronLeftIcon: IconStub,
+}));
+
+const routerBackMock = vi.fn();
+const routerPushMock = vi.fn();
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    back: routerBackMock,
+    push: routerPushMock,
+  }),
+}));
+
+function createWrapper(
+  buttonText = 'Ga terug',
+  to: RouteLocationRaw | undefined = undefined,
+): VueWrapper<InstanceType<typeof AppBackButton>> {
+  return shallowMount(AppBackButton, {
+    props: { buttonText, to },
+  });
+}
+
+describe('the AppBackButton component', () => {
+  beforeEach(() => {
+    routerBackMock.mockClear();
+    routerPushMock.mockClear();
+  });
+
+  it('should go back when to not provided', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await wrapper.trigger('click');
+
+    expect(routerBackMock).toHaveBeenCalledTimes(1);
+    expect(routerPushMock).toHaveBeenCalledTimes(0);
+  });
+
+  it('should go to route when to provided', async () => {
+    const wrapper = createWrapper('Ga terug', { name: 'dashboard' });
+
+    await wrapper.trigger('click');
+
+    expect(routerBackMock).toHaveBeenCalledTimes(0);
+    expect(routerPushMock).toHaveBeenCalledTimes(1);
+    expect(routerPushMock).toHaveBeenCalledWith({ name: 'dashboard' });
+  });
+
+  it('should render text', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.text()).toBe('Ga terug');
+  });
+
+  it('should render an icon', () => {
+    const wrapper = createWrapper();
+
+    const icon = wrapper.findComponent<typeof ChevronLeftIcon>('[data-test-icon]');
+    expect(icon.exists()).toBe(true);
+  });
+});

package/src/modules/components/AppBadge/AppBadge.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { domClassesPerType, domClassesPerSize, domClassesPerTypeRounded } from '.';
+
+  import type { Props } from './index.d';
+
+  const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    size: 'medium',
+    rounded: false,
+    leadingIcon: undefined,
+    trailingIcon: undefined,
+  });
+
+  const domClasses = computed(() => ({
+    'rounded-full text-white!': props.rounded,
+    'rounded-lg': !props.rounded,
+  }));
+</script>
+
+<template>
+  <div
+    :class="[
+      ...domClassesPerType[type],
+      ...domClassesPerSize[size],
+      ...(props.rounded ? domClassesPerTypeRounded[type] : []),
+      domClasses,
+    ]"
+    class="app-badge inline-flex items-center font-semibold"
+  >
+    <span
+      v-if="$slots.leadingIcon || leadingIcon"
+      class="app-badge__icon mr-2 h-4"
+    >
+      <slot name="leadingIcon">
+        <Component
+          :is="leadingIcon"
+          v-if="leadingIcon"
+        />
+      </slot>
+    </span>
+
+    <slot></slot>
+
+    <span
+      v-if="$slots.trailingIcon || trailingIcon"
+      class="app-badge__icon ml-2 h-4"
+    >
+      <slot name="trailingIcon">
+        <Component
+          :is="trailingIcon"
+          v-if="trailingIcon"
+        />
+      </slot>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-badge__icon > :deep(*) {
+    @apply h-full!;
+  }
+</style>

package/src/modules/components/AppBadge/__tests__/app-badge.spec.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppBadge from '../AppBadge.vue';
+
+import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
+import type { Props } from '~components/AppBadge/index.d';
+
+function createWrapper(
+  props?: Props,
+  slots?: ComponentMountingOptions<typeof AppBadge>['slots'],
+): VueWrapper<InstanceType<typeof AppBadge>> {
+  return shallowMount(AppBadge, { props, slots });
+}
+
+describe('the AppBadge component', () => {
+  it('has no content by default', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('should render the default slot', () => {
+    const badgeText = 'Example text';
+    const slotContent = `<i data-test-badge-content>${badgeText}</i>`;
+    const wrapper = createWrapper({}, { default: slotContent });
+
+    const badgeContent = wrapper.find('[data-test-badge-content]');
+    expect(badgeContent.exists()).toBe(true);
+    expect(badgeContent.text()).toBe(badgeText);
+  });
+
+  it('can render a leading icon via slot', () => {
+    const leadingIcon = '<i data-test-leading-icon>Icon</i>';
+    const wrapper = createWrapper({}, { default: 'Example text', leadingIcon });
+
+    const leadingIconWrapper = wrapper.find('[data-test-leading-icon]');
+    expect(leadingIconWrapper.exists()).toBe(true);
+    expect(leadingIconWrapper.text()).toBe('Icon');
+  });
+
+  it('can render a trailing icon via slot', () => {
+    const trailingIcon = '<i data-test-trailing-icon>Icon</i>';
+    const wrapper = createWrapper({}, { default: 'Example text', trailingIcon });
+
+    const trailingIconWrapper = wrapper.find('[data-test-trailing-icon]');
+    expect(trailingIconWrapper.exists()).toBe(true);
+    expect(trailingIconWrapper.text()).toBe('Icon');
+  });
+
+  it('should add extra classes when rounded-sm', () => {
+    const wrapper = createWrapper({ type: 'error', rounded: true }, { default: 'Example text' });
+
+    expect(wrapper.classes('rounded-full')).toBe(true);
+    expect(wrapper.classes('rounded-lg')).toBe(false);
+    expect(wrapper.classes('bg-error!')).toBe(true);
+  });
+
+  it('should not add extra classes when not rounded-sm', () => {
+    const wrapper = createWrapper({ type: 'error' }, { default: 'Example text' });
+
+    expect(wrapper.classes('rounded-full')).toBe(false);
+    expect(wrapper.classes('rounded-lg')).toBe(true);
+    expect(wrapper.classes('bg-error!')).toBe(false);
+  });
+});

package/src/modules/components/AppBadge/index.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'vue';
+import type { types, sizes } from '.';
+
+export type Type = typeof types[number];
+export type Size = typeof sizes[number];
+
+export interface Props {
+  type?: Type;
+  rounded?: boolean;
+  size?: Size;
+  leadingIcon?: Component | string;
+  trailingIcon?: Component | string;
+}

package/src/modules/components/AppBadge/index.ts

@@ -0,0 +1,29 @@
+import type { Size, Type } from './index.d';
+
+export const types = ['plain', 'default', 'success', 'warning', 'error', 'info', 'inactive'] as const;
+export const sizes = ['medium', 'large'] as const;
+
+export const domClassesPerType: Record<Type, string[]> = {
+  plain: [],
+  default: ['bg-zinc-200', 'text-zinc-600'],
+  success: ['bg-green-200', 'text-green-600'],
+  warning: ['bg-yellow-200', 'text-yellow-600'],
+  error: ['bg-red-200', 'text-red-600'],
+  info: ['bg-sky-200', 'text-sky-600'],
+  inactive: ['bg-orange-200', 'text-orange-500'],
+};
+
+export const domClassesPerSize: Record<Size, string[]> = {
+  medium: ['px-3 py-[3px] text-sm min-h-7'],
+  large: ['px-3 py-2.5 text-sm'],
+};
+
+export const domClassesPerTypeRounded: Record<Type, string[]> = {
+  plain: [],
+  default: ['bg-zinc-600!'],
+  success: ['bg-green-600!'],
+  warning: ['bg-yellow-600!'],
+  error: ['bg-error!'],
+  info: ['bg-sky-600!'],
+  inactive: ['bg-orange-600!'],
+};

package/src/modules/components/AppButton/AppButton.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+  import ButtonIconSlot from './ButtonIconSlot.vue';
+  import { domClassesPerColorType, domClassesPerColorBorderedType, domClassesPerSize } from '.';
+
+  import type { Props } from './index.d';
+
+  withDefaults(defineProps<Props>(), {
+    as: 'button',
+    size: 'medium',
+    type: 'button',
+    colorType: 'primary',
+    disabled: false,
+    loading: false,
+    bordered: false,
+    block: false,
+  });
+</script>
+
+<template>
+  <Component
+    :is="as"
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      ...(!bordered ? domClassesPerColorType[colorType] : []),
+      ...(bordered ? domClassesPerColorBorderedType[colorType] : []),
+      ...domClassesPerSize[size],
+      ...(block ? ['w-full', 'justify-center'] : []),
+    ]"
+    class="app-button inline-flex cursor-pointer items-center whitespace-nowrap
+      rounded-lg border text-base font-semibold transition-colors
+      focus:outline-hidden disabled:cursor-not-allowed disabled:select-none disabled:opacity-50"
+  >
+    <ButtonIconSlot
+      v-if="$slots.leadingIcon || loading"
+      :loading="loading"
+      class="mr-3"
+      data-test-leading-icon
+    >
+      <slot name="leadingIcon"></slot>
+    </ButtonIconSlot>
+
+    <slot></slot>
+
+    <ButtonIconSlot
+      v-if="$slots.trailingIcon"
+      class="ml-3"
+      data-test-trailing-icon
+    >
+      <slot name="trailingIcon"></slot>
+    </ButtonIconSlot>
+  </Component>
+</template>

package/src/modules/components/AppButton/ButtonIconSlot.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+  import AppLoader from '../AppLoader/AppLoader.vue';
+
+  defineProps<{
+    loading?: boolean;
+  }>();
+</script>
+
+<template>
+  <span class="app-button__icon h-4">
+    <AppLoader
+      v-if="loading"
+      class="w-4"
+    />
+
+    <slot v-else></slot>
+  </span>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-button__icon > :deep(*) {
+    @apply h-full!;
+  }
+</style>