@autoafleveren/ui 1.2.13 → 1.3.3

package/src/modules/components/AppCard/__tests__/card-icon-slot.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import CardIconSlot from '../CardIconSlot.vue';
+
+describe('the CardIconSlot component', () => {
+  it('should render the default slot by default', () => {
+    const icon = '<i>Icon</i>';
+    const wrapper = shallowMount(CardIconSlot, {
+      slots: { default: icon },
+    });
+
+    expect(wrapper.element.innerHTML).toBe(icon);
+  });
+
+  it('should render the icon when passed via prop', () => {
+    const icon = '<i>Icon</i>';
+    const wrapper = shallowMount(CardIconSlot, {
+      props: {
+        icon,
+      },
+    });
+
+    const iconComponent = wrapper.find('[data-test-icon-component]');
+    expect(iconComponent.exists()).toBe(true);
+    expect(iconComponent.element.innerHTML).toBe(icon);
+  });
+});

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

@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+
+export interface Action {
+  name: string;
+  to?: unknown;
+  href?: string;
+  onClick?: () => unknown;
+  icon: string | Component | FontAwesomeIconProps;
+  iconPosition?: 'left' | 'right';
+  iconStroke?: 1 | 2 | 3;
+}

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

@@ -0,0 +1,5 @@
+export const strokeClasses: Record<1 | 2 | 3, string> = {
+  1: 'stroke-1',
+  2: 'stroke-2',
+  3: 'stroke-3',
+};

package/src/modules/components/AppColor/AppColor.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { PencilIcon } from '~icons';
+
+  import type { RGBColor, ColorProps } from '~components/AppColor/index';
+
+  const props = withDefaults(defineProps<ColorProps>(), { disabled: false });
+
+  const color = defineModel<string>();
+  const colorInput = ref<HTMLInputElement | null>(null);
+  const defaultRgbColor: RGBColor = { red: 0, green: 0, blue: 0 };
+
+  const rgbColor = computed((): RGBColor => {
+    if (props.modelValue) {
+      const result = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(props.modelValue);
+
+      return result ? {
+        red: parseInt(result[1], 16),
+        green: parseInt(result[2], 16),
+        blue: parseInt(result[3], 16),
+      } : defaultRgbColor;
+    }
+
+    return defaultRgbColor;
+  });
+  const isDarkColor = computed((): boolean => {
+    const { red, green, blue } = rgbColor.value;
+    const darkMargin = 150;
+    const rValue = 0.299 * (red * red);
+    const gValue = 0.587 * (green * green);
+    const bValue = 0.114 * (blue * blue);
+
+    const perceivedBrightness = Math.sqrt(rValue + gValue + bValue);
+
+    return perceivedBrightness < darkMargin;
+  });
+
+  function onInputColor(event: Event): void {
+    color.value = (event.target as HTMLInputElement).value;
+  }
+</script>
+
+<template>
+  <label
+    :aria-disabled="disabled"
+    class="group relative block size-10 cursor-pointer aria-disabled:cursor-not-allowed"
+  >
+    <input
+      ref="colorInput"
+      :value="color"
+      :disabled="disabled"
+      type="color"
+      class="relative size-full cursor-pointer appearance-none rounded-lg border-none p-0 group-aria-disabled:cursor-not-allowed"
+      @input="onInputColor"
+    >
+
+    <PencilIcon
+      :class="{ 'text-white': isDarkColor, 'text-black': !isDarkColor }"
+      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    />
+  </label>
+</template>
+
+<style>
+  @reference "./../../../css/main.css";
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    @apply p-0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+   @apply border-none;
+  }
+</style>

package/src/modules/components/AppColor/__tests__/app-color.spec.ts

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import AppColor from '../AppColor.vue';
+
+import type { RGBColor } from '~components/AppColor';
+
+describe('the AppColor component', () => {
+  it('renders the component', () => {
+    const wrapper = shallowMount(AppColor, {
+      props: { modelValue: '#ff0000' },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('computes rgbColor correctly', () => {
+    const wrapper = shallowMount(AppColor, {
+      props: { modelValue: '#ff0000' },
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapperVm = wrapper.vm as unknown as typeof AppColor;
+    const rgbColor = wrapperVm.rgbColor as RGBColor;
+
+    expect(rgbColor).toStrictEqual({ red: 255, green: 0, blue: 0 });
+  });
+
+  it('computes isDarkColor correctly', () => {
+    const wrapper = shallowMount(AppColor, {
+      props: { modelValue: '#000000' },
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapperVm = wrapper.vm as unknown as typeof AppColor;
+    const isDarkColor = wrapperVm.isDarkColor as boolean;
+
+    expect(isDarkColor).toBe(true);
+  });
+
+  it('emits update:modelValue on color input', async () => {
+    expect.assertions(2);
+
+    const wrapper = shallowMount(AppColor, {
+      props: { modelValue: '#ff0000' },
+    });
+    const input = wrapper.find('input[type="color"]');
+
+    await input.setValue('#00ff00');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual(['#00ff00']);
+  });
+});

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

@@ -0,0 +1,10 @@
+export interface RGBColor {
+  red: number;
+  green: number;
+  blue: number;
+}
+
+export interface ColorProps {
+  modelValue?: string | null;
+  disabled?: boolean;
+}

package/src/modules/components/AppColorCard/AppColorCard.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  import { AppColor } from '~components';
+
+  defineProps<{ title: string; disabled?: boolean }>();
+
+  const modelValue = defineModel<string>();
+  const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="disabled ? 'bg-zinc-50' : 'bg-white'"
+    class="rounded-xl p-2 pl-4 shadow-[0px_2px_4px_0px_rgba(32,32,32,0.08)]"
+  >
+    <div class="flex items-center justify-between space-x-2">
+      <span data-test-title>
+        <slot
+          name="title"
+          data-test-title-slot
+        >
+          {{ title }}
+        </slot>
+      </span>
+
+      <AppColor
+        :ref="title"
+        v-model="modelValue"
+        :disabled="disabled"
+      />
+    </div>
+
+    <div
+      v-if="slots.default"
+      v-show="modelValue"
+      data-test-default-slot
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppColorCard/__tests__/app-color-card.spec.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { AppColorCard, AppColor } from '~components';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(title = 'title', disabled = false): VueWrapper<InstanceType<typeof AppColorCard>> {
+  return shallowMount(AppColorCard, {
+    global: {
+      stubs: {
+        AppColor: false,
+      },
+    },
+    props: { title, disabled },
+  });
+}
+
+describe('the AppColorCard component', () => {
+  it('should render the title', () => {
+    const title = 'ColorCard title';
+    const wrapper = createWrapper(title);
+
+    const titleWrapper = wrapper.find('[data-test-title]');
+    expect(titleWrapper.exists()).toBe(true);
+    expect(titleWrapper.text()).toStrictEqual(title);
+  });
+
+  it('should update modelValue on change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+    expect(wrapper.vm.modelValue).toBeUndefined();
+
+    const color = wrapper.findComponent(AppColor);
+    expect(color.exists()).toBe(true);
+
+    await color.setValue('#ff0000');
+
+    expect(wrapper.vm.modelValue).toBe('#ff0000');
+  });
+
+  it('should not be turned off when disabled', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper('disabled item', true);
+    expect(wrapper.vm.modelValue).toBeUndefined();
+
+    const color = wrapper.findComponent(AppColor);
+    expect(color.exists()).toBe(true);
+
+    await color.setValue('#ff0000');
+
+    expect(wrapper.vm.modelValue).toBe('#ff0000');
+  });
+});

package/src/modules/components/AppConfirm/AppConfirm.vue

@@ -0,0 +1,237 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+  import { SuccessIcon, ErrorIcon } from '~icons';
+  import { AppButton } from '~components';
+  import { useNavigation } from '~composables';
+
+  import type { Component } from 'vue';
+  import type { ConfirmProps } from './index.d';
+
+  const props = withDefaults(defineProps<ConfirmProps>(), {
+    type: 'default',
+    confirmButtonText: '',
+    cancelButtonText: '',
+    withBackdrop: true,
+    preventBackdropClose: true,
+    icon: undefined,
+    html: false,
+    animate: true,
+    title: '',
+    content: '',
+    extendedIconDomClasses: '',
+  });
+
+  const emit = defineEmits<{
+    (event: 'close', value: boolean): void;
+    (event: 'confirmed', value: true): void;
+  }>();
+
+  const isOpen = ref(true);
+  const confirmLoading = ref(false);
+  const cancelLoading = ref(false);
+  const { expanded } = useNavigation();
+
+  const dynamicIconProperties = computed((): Component | string | undefined => {
+    if (!props.icon && props.type === 'error') {
+      return ErrorIcon;
+    }
+
+    if (!props.icon && props.type === 'success') {
+      return SuccessIcon;
+    }
+
+    return props.icon;
+  });
+  const transitionRootComponent = computed((): typeof TransitionRoot | string => (props.animate ? TransitionRoot : 'div'));
+  const transitionChildComponent = computed((): typeof TransitionChild | string => (props.animate ? TransitionChild : 'div'));
+  const iconDomClasses = computed((): string[] => {
+    const defaultClasses = props.type === 'error' ? 'text-red-500' : 'text-green-500';
+
+    return [defaultClasses, props.extendedIconDomClasses];
+  });
+
+  async function close(confirmed: boolean): Promise<void> {
+    if (confirmed && typeof props.onConfirm === 'function') {
+      confirmLoading.value = true;
+
+      await Promise.resolve(props.onConfirm());
+    } else if (!confirmed && typeof props.onCancel === 'function') {
+      cancelLoading.value = true;
+
+      await Promise.resolve(props.onCancel());
+    }
+
+    isOpen.value = false;
+    emit('close', confirmed);
+  }
+</script>
+
+<template>
+  <Component
+    :is="transitionRootComponent"
+    :show="isOpen"
+    as="template"
+  >
+    <Dialog
+      :open="animate ? undefined : isOpen"
+      :class="{ 'md:left-72!': expanded }"
+      as="div"
+      class="app-confirm-dialog fixed inset-0 top-16 z-50 overflow-y-auto transition-all duration-500 md:left-20 md:top-0"
+      data-test-confirm-dialog
+      @close="() => !preventBackdropClose ? close(false) : undefined"
+    >
+      <div class="flex min-h-screen px-4 pb-20 pt-4 text-center md:items-center md:justify-center">
+        <Component
+          :is="transitionChildComponent"
+          v-if="withBackdrop"
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            :class="{ 'md:left-72!': expanded }"
+            class="app-confirm-dialog-overlay fixed inset-0 top-16 z-40 rounded-l-2xl bg-zinc-800/50 transition-all duration-500
+            md:left-20 md:top-0"
+          />
+        </Component>
+
+        <span
+          class="hidden md:inline-block md:h-screen md:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <Component
+          :is="transitionChildComponent"
+          as="template"
+          enter="ease-in-out duration-300"
+          enter-from="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+          enter-to="opacity-100 translate-y-0 md:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 md:scale-100"
+          leave-to="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+        >
+          <div
+            class="relative z-50 mx-auto inline-block w-full max-w-lg overflow-hidden
+              text-left align-bottom transition-all md:my-8 md:max-w-2xl md:align-middle"
+          >
+            <div class="rounded-2xl bg-zinc-100 drop-shadow-card">
+              <div class="flex flex-col items-center space-y-5 p-8">
+                <div
+                  v-if="dynamicIconProperties"
+                  class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full"
+                >
+                  <Component
+                    :is="dynamicIconProperties"
+                    :class="iconDomClasses"
+                    class="size-full"
+                    data-test-confirm-icon
+                  />
+                </div>
+
+                <div class="mt-3">
+                  <DialogTitle
+                    as="h3"
+                    class="text-2xl font-bold leading-6 text-zinc-900"
+                  >
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+                  </DialogTitle>
+
+                  <div
+                    class="mt-3 w-full text-base text-zinc-700"
+                    data-test-confirm-content
+                  >
+                    <slot>
+                      <div
+                        v-if="html"
+                        class="app-confirm-html-content"
+                        v-html="content"
+                      ></div>
+
+                      <p v-else>
+                        {{ content }}
+                      </p>
+                    </slot>
+                  </div>
+                </div>
+              </div>
+
+              <div class="ml-auto flex flex-row-reverse items-center gap-8 rounded-b-2xl bg-white p-8">
+                <AppButton
+                  v-if="confirmButtonText"
+                  :disabled="confirmLoading || cancelLoading"
+                  :loading="confirmLoading"
+                  type="button"
+                  color-type="primary"
+                  class="justify-center"
+                  @click="() => close(true)"
+                >
+                  <template
+                    v-if="confirmButtonTrailingIcon"
+                    #trailingIcon
+                  >
+                    <Component
+                      :is="confirmButtonTrailingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  <template
+                    v-if="confirmButtonLeadingIcon"
+                    #leadingIcon
+                  >
+                    <Component
+                      :is="confirmButtonLeadingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  {{ confirmButtonText }}
+                </AppButton>
+
+                <AppButton
+                  v-if="cancelButtonText"
+                  :disabled="confirmLoading || cancelLoading"
+                  :loading="cancelLoading"
+                  color-type="plain"
+                  class="justify-center text-zinc-900"
+                  @click="() => close(false)"
+                >
+                  <template
+                    v-if="cancelButtonTrailingIcon"
+                    #trailingIcon
+                  >
+                    <Component
+                      :is="cancelButtonTrailingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  <template
+                    v-if="cancelButtonLeadingIcon"
+                    #leadingIcon
+                  >
+                    <Component
+                      :is="cancelButtonLeadingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  {{ cancelButtonText }}
+                </AppButton>
+              </div>
+            </div>
+          </div>
+        </Component>
+      </div>
+    </Dialog>
+  </Component>
+</template>