@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppLoader/AppLoader.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+  import { domClassesPerSize } from '.';
+
+  import type { Size } from './index.d';
+
+  withDefaults(defineProps<{
+    size?: Size;
+  }>(), {
+    size: 'medium',
+  });
+</script>
+
+<template>
+  <svg
+    :class="domClassesPerSize[size]"
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <circle
+      stroke="currentColor"
+      class="opacity-25"
+      stroke-width="4"
+      cx="12"
+      cy="12"
+      r="10"
+    ></circle>
+
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962
+        7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>

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

@@ -0,0 +1 @@
+export type Size = 'extra-small' | 'small' | 'medium' | 'large';

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

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

package/src/modules/components/AppMaps/AppMaps.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+  import { computed, ref, onMounted, watch } from 'vue';
+  import { defaultMapOptions, disableUserInteractionMapOptions, createMarkerElement } from '.';
+
+  const props = withDefaults(defineProps<{
+    withMarker?: boolean;
+    disableMarkerClick?: boolean;
+    markerLatitude?: number | null;
+    markerLongitude?: number | null;
+    disableUserInteraction?: boolean;
+    mapCenterLatitude?: number | null;
+    mapCenterLongitude?: number | null;
+    mapOptions?: google.maps.MapOptions | null;
+  }>(), {
+    mapOptions: null,
+    withMarker: true,
+    markerLatitude: null,
+    markerLongitude: null,
+    mapCenterLatitude: null,
+    mapCenterLongitude: null,
+    disableMarkerClick: false,
+    disableUserInteraction: false,
+  });
+
+  const mapElement = ref<HTMLElement | null>(null);
+
+  const centerPosition = computed((): google.maps.MapOptions['center'] => {
+    if (props.mapCenterLatitude && props.mapCenterLongitude) {
+      return { lat: props.mapCenterLatitude, lng: props.mapCenterLongitude };
+    }
+
+    return props.mapOptions?.center ?? null;
+  });
+  const markerPosition = computed((): google.maps.marker.AdvancedMarkerElementOptions['position'] => {
+    if (props.markerLatitude && props.markerLongitude) {
+      return { lat: props.markerLatitude, lng: props.markerLongitude };
+    }
+
+    return centerPosition.value;
+  });
+
+  watch(props, async () => {
+    await createMap();
+  });
+
+  onMounted(async () => {
+    if (!window?.google) {
+      console.error('Google not defined. use composable useGoogleApi at setup');
+      return;
+    }
+
+    await createMap();
+  });
+
+  async function createMap(): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
+
+    if (mapElement.value instanceof HTMLElement) {
+      const map = new Map(mapElement.value, {
+        ...getMapOptions(),
+        center: centerPosition.value,
+      });
+
+      if (props.withMarker) {
+        await createMarker(map);
+      }
+    }
+  }
+
+  function getMapOptions(): google.maps.MapOptions {
+    let mapOptions: google.maps.MapOptions = { ...defaultMapOptions };
+
+    if (props.disableUserInteraction) {
+      mapOptions = { ...mapOptions, ...disableUserInteractionMapOptions };
+    }
+
+    return { ...mapOptions, ...(props.mapOptions ?? {}) };
+  }
+
+  async function createMarker(map: google.maps.Map): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
+
+    const marker = new AdvancedMarkerElement({
+      map,
+      position: markerPosition.value,
+      content: createMarkerElement(),
+    });
+
+    if (props.disableMarkerClick && !props.disableUserInteraction) {
+      marker.element.classList.add('cursor-default!');
+
+      // Disable marker clicks
+      google.maps.event.addListener(marker, 'click', () => { /* */ });
+    }
+  }
+</script>
+
+<template>
+  <div
+    ref="mapElement"
+    class="h-80 w-full"
+  ></div>
+</template>

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

@@ -0,0 +1,44 @@
+import { h, render } from 'vue';
+import { LocationMarkerIcon } from '~icons';
+
+export const defaultMapOptions: google.maps.MapOptions = {
+  mapId: '161a92b3666d9228',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  disableDefaultUI: true,
+  zoom: 15,
+};
+
+export const disableUserInteractionMapOptions: google.maps.MapOptions = {
+  scrollwheel: false,
+  clickableIcons: false,
+  keyboardShortcuts: false,
+  isFractionalZoomEnabled: false,
+  maxZoom: defaultMapOptions.zoom,
+  minZoom: defaultMapOptions.zoom,
+  disableDoubleClickZoom: true,
+  fullscreenControl: false,
+  streetViewControl: false,
+  gestureHandling: 'none',
+  rotateControl: false,
+  panControl: false,
+};
+
+export const markerDomClasses: string[] = [
+  'inline-flex',
+  'justify-center',
+  'items-center',
+  'rounded-full',
+  'bg-primary',
+  'text-white',
+  'h-12',
+  'w-12',
+];
+
+export function createMarkerElement(): HTMLElement {
+  const markerElement = document.createElement('div');
+
+  markerElement.classList.add(...markerDomClasses);
+  render(h(LocationMarkerIcon), markerElement);
+
+  return markerElement;
+}

package/src/modules/components/AppMenu/AppMenu.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { AppSelect } from '~components';
+  import AppMenuItem from './AppMenuItem.vue';
+
+  import type { SingleLabelProps, OptionProps } from '~components/AppSelect/index.d';
+  import type { MenuProps, MenuItem } from './index.d';
+
+  withDefaults(defineProps<MenuProps>(), { responsive: true });
+
+  const route = useRoute();
+  const itemValue = ref<MenuItem['to']>(route);
+  const router = useRouter();
+
+  async function onSelect(to: MenuItem['to']): Promise<void> {
+    await router.push(to);
+  }
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div
+      v-if="responsive"
+      :class="{ 'md:hidden': responsive }"
+      class="block"
+    >
+      <AppSelect
+        v-model="itemValue"
+        :options="items"
+        :can-clear="false"
+        :append-to-body="true"
+        open-direction="down"
+        dropdown-classes="max-h-48!"
+        wrapper-classes="w-full"
+        value-prop="to"
+        @select="onSelect"
+      >
+        <template #singlelabel="props">
+          <div class="flex w-full px-2">
+            <Component
+              :is="(props as SingleLabelProps).value.icon"
+              class="mr-2 size-6"
+              data-test-icon
+            />
+
+            <span class="text-base">
+              {{ (props as SingleLabelProps).value.name }}
+            </span>
+          </div>
+        </template>
+
+        <!-- @vue-ignore -->
+        <template #option="props">
+          <Component
+            :is="(props as OptionProps).option.icon"
+            class="mr-2 size-5"
+            data-test-icon
+          />
+
+          <span class="text-base">
+            {{ (props as OptionProps).option.name }}
+          </span>
+        </template>
+      </AppSelect>
+    </div>
+
+    <div
+      :class="{ hidden: responsive }"
+      class="mt-0! md:block md:space-y-2"
+    >
+      <AppMenuItem
+        v-for="item in items"
+        v-bind="item"
+        :key="item.name"
+      />
+    </div>
+  </div>
+</template>

package/src/modules/components/AppMenu/AppMenuItem.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+  import type { MenuItem } from './index.d';
+
+  withDefaults(defineProps<MenuItem>(), {
+    visible: true,
+    replace: false,
+  });
+</script>
+
+<template>
+  <RouterLink
+    v-if="visible"
+    v-slot="{ href, isActive, navigate }"
+    :to="to"
+    :replace="replace"
+    custom
+  >
+    <slot>
+      <a
+        :href="href"
+        :class="{ 'bg-zinc-100 hover:bg-zinc-100!': isActive }"
+        class="flex cursor-pointer items-center space-x-2 rounded-lg px-4 py-3 hover:bg-zinc-100"
+        @click="navigate"
+      >
+        <Component
+          :is="icon"
+          class="size-4 stroke-2"
+          data-test-icon
+        />
+
+        <span
+          class="text-base font-bold"
+          data-test-text
+        >
+          {{ name }}
+        </span>
+      </a>
+    </slot>
+  </RouterLink>
+</template>

package/src/modules/components/AppMenu/__mocks__/index.ts

@@ -0,0 +1,23 @@
+import { UserIcon, EyeSlashIcon } from '~icons';
+
+import type { MenuItem } from '~components/AppMenu/index.d';
+
+export const menuItem: MenuItem = {
+  name: 'dashboard',
+  replace: false,
+  to: { name: 'dashboard' },
+  icon: UserIcon,
+};
+
+export const hiddenMenuItem: MenuItem = {
+  name: 'hidden',
+  to: { name: 'hidden' },
+  replace: false,
+  icon: EyeSlashIcon,
+  visible: false,
+};
+
+export const items = [
+  menuItem,
+  hiddenMenuItem,
+];

package/src/modules/components/AppMenu/__tests__/app-menu-item.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { RouterLinkStub, shallowMount } from '@vue/test-utils';
+import { menuItem, hiddenMenuItem } from '../__mocks__';
+import AppMenuItem from '../AppMenuItem.vue';
+
+function createWrapper(item = menuItem) {
+  return shallowMount(AppMenuItem, {
+    props: { ...item },
+    global: {
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+    },
+  });
+}
+
+describe('the AppMenuItem component', () => {
+  it('should render the router link', () => {
+    const wrapper = createWrapper();
+
+    const routerLink = wrapper.findComponent(RouterLinkStub);
+    expect(routerLink.exists()).toBe(true);
+    expect(routerLink.props('to')).toStrictEqual(menuItem.to);
+  });
+
+  it('should render the text', () => {
+    const wrapper = createWrapper();
+
+    const text = wrapper.find('[data-test-text]');
+    expect(text.exists()).toBe(true);
+    expect(text.text()).toBe(menuItem.name);
+  });
+
+  it('should render the icon', () => {
+    const wrapper = createWrapper();
+
+    const icon = wrapper.find('[data-test-icon]');
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('should render nothing when invisible', () => {
+    const wrapper = createWrapper(hiddenMenuItem);
+
+    const routerLink = wrapper.findComponent(RouterLinkStub);
+    expect(routerLink.exists()).toBe(false);
+  });
+});

package/src/modules/components/AppMenu/__tests__/app-menu.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppSelect from '~/tests/stubs/AppSelect';
+import { items as mockItems } from '../__mocks__';
+import AppMenu from '../AppMenu.vue';
+import AppMenuItem from '../AppMenuItem.vue';
+
+const routerPushMock = vi.fn();
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: routerPushMock,
+  }),
+  useRoute: () => ({
+    name: 'home',
+  }),
+}));
+
+function createWrapper(items = mockItems, responsive = false) {
+  return shallowMount(AppMenu, {
+    props: { items, responsive },
+    global: {
+      stubs: {
+        AppSelect,
+      },
+    },
+  });
+}
+
+describe('the AppMenu component', () => {
+  it('should render the right amount of items', () => {
+    const wrapper = createWrapper();
+
+    const items = wrapper.findAllComponents(AppMenuItem);
+    expect(items).toHaveLength(2);
+    expect(items[0].props()).toStrictEqual({ ...mockItems[0], visible: true });
+    expect(items[1].props()).toStrictEqual(mockItems[1]);
+
+    const select = wrapper.findComponent(AppSelect);
+    expect(select.exists()).toBe(false);
+  });
+
+  it('should render the AppSelect when responsive', () => {
+    const wrapper = createWrapper(mockItems, true);
+
+    const select = wrapper.findComponent(AppSelect);
+    expect(select.exists()).toBe(true);
+
+    select.vm.$emit('select', mockItems[0].to);
+
+    expect(routerPushMock).toHaveBeenCalledTimes(1);
+    expect(routerPushMock).toHaveBeenCalledWith(mockItems[0].to);
+  });
+});

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

@@ -0,0 +1,15 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { Component, VNode } from 'vue';
+
+export interface MenuProps {
+  responsive?: boolean;
+  items: MenuItem[];
+}
+
+export interface MenuItem {
+  name: string;
+  icon: Component | VNode;
+  to: RouteLocationRaw;
+  visible?: boolean;
+  replace?: boolean;
+}