@autoafleveren/ui 1.3.2 → 1.3.3

package/src/css/theme.css

@@ -0,0 +1,208 @@
+@theme {
+  --text-*: initial;
+  --text-4xl: 1.953rem;
+  --text-4xl--line-height: 2rem;
+  --text-3xl: 1.563rem;
+  --text-3xl--line-height: 2rem;
+  --text-2xl: 1.25rem;
+  --text-2xl--line-height: 1.75rem;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.75rem;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5rem;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.375rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.375rem;
+  --text-xs: 0.625rem;
+  --text-xs--line-height: 0.75rem;
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: 0.75rem;
+
+  --font-*: initial;
+  --font-sans: Inter;
+  --font-serif: Inter;
+  --font-mono: Inter;
+
+  --color-*: initial;
+  --color-current: currentColor;
+  --color-transparent: transparent;
+  --color-primary: rgb(71 166 220);
+  --color-primary-active: rgb(29 132 191);
+
+  --color-secondary: rgb(50 47 49);
+  --color-secondary-active: rgb(0 0 0);
+
+  --color-black-50: #fcfcfd;
+  --color-black-100: #202020;
+  --color-black-black: #000000;
+  --color-black: #1e1e1e;
+
+  --color-white: #ffffff;
+  --color-error: #dc2626;
+
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-900: #162c87;
+
+  --color-lime-200: #d9f99d;
+  --color-lime-600: #65a30d;
+
+  --color-amber-200: #fde68a;
+  --color-amber-600: #d97706;
+
+  --color-orange-200: #fed7aa;
+  --color-orange-500: #e25c2a;
+
+  --color-sky-200: #bae6fd;
+  --color-sky-600: #0284c7;
+
+  --color-teal-200: #99f6e4;
+  --color-teal-600: #0d9488;
+
+  --color-violet-200: #ddd6fe;
+  --color-violet-600: #7c3aed;
+
+  --color-blue-200: #bfdbfe;
+  --color-blue-600: #2563eb;
+
+  --color-gold-200: #fde68a;
+  --color-gold-600: #d97706;
+
+  --color-pink-200: #fbcfe8;
+  --color-pink-600: #db2777;
+
+  --breakpoint-*: initial;
+  --breakpoint-xxs: 480px;
+  --breakpoint-xs: 600px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 992px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1440px;
+  --breakpoint-2xl: 1800px;
+
+  --spacing-141: 34.375rem;
+  --spacing-4_5: 1.2rem;
+
+  --height-18: 4.5rem;
+
+  --width-110: 27.5rem;
+  --width-141: 34.375rem;
+  --width-full-plus8: calc(100% + 2rem);
+
+  --max-height-160: 40rem;
+
+  --border-width-6: 6px;
+  --border-width-10: 10px;
+  --border-width-12: 12px;
+  --border-width-4_5: 1.2rem;
+
+  --scale-flip: -1;
+
+  --stroke-width-3: 3px;
+  --stroke-width-4: 4px;
+
+  --drop-shadow-card: 0px 4px 2px rgba(21, 21, 21, 0.08);
+  --drop-shadow-cardhighlight: 1px 4px 3px rgba(21, 21, 21, 0.16);
+
+  --transition-property-font: font-weight, font-size, line-height;
+
+  --z-index-100: 100;
+
+  --background-image-multiselect-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3e%3c/svg%3e");
+  --background-image-multiselect-spinner: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='undefined' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
+  --background-image-multiselect-remove: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
+  --background-image-nature: url('/images/nature.svg');
+}
+
+@utility container {
+  margin-inline: auto;
+  @media (width >= --theme(--breakpoint-xxs)) {
+    max-width: none;
+  }
+  @media (width >= 600px) {
+    max-width: 600px;
+  }
+  @media (width >= 728px) {
+    max-width: 728px;
+  }
+  @media (width >= 984px) {
+    max-width: 984px;
+  }
+  @media (width >= 1240px) {
+    max-width: 1240px;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer base {
+  body {
+    @apply text-zinc-700 overflow-x-hidden;
+
+    -webkit-tap-highlight-color: transparent;
+  }
+}

package/src/css/tinymce.css

@@ -0,0 +1,58 @@
+@reference "./main.css";
+
+.tox-tinymce {
+  @apply border! border-zinc-300!;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  @apply shadow-none! border-b! border-solid! border-b-zinc-300!;
+}
+
+.tox .tox-tbtn {
+  @apply cursor-pointer hover:!bg-zinc-100;
+}
+
+.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover {
+  @apply bg-zinc-300!;
+}
+
+.tox .tox-toolbar-overlord>.tox-toolbar, .tox .tox-toolbar-overlord>.tox-toolbar__overflow, .tox .tox-toolbar-overlord>.tox-toolbar__primary {
+  @apply divide-zinc-300 divide-x;
+}
+
+.tox .tox-toolbar__group {
+  @apply border-zinc-300!;
+}
+
+
+.tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea, .tox .tox-textarea-wrap .tox-textarea:focus, .tox .tox-textfield, .tox .tox-toolbar-textfield {
+  @apply border-zinc-300 px-5 block w-full appearance-none rounded-lg
+  placeholder:text-zinc-300 focus:outline-none text-base
+  disabled:cursor-not-allowed disabled:border-zinc-100 disabled:bg-zinc-100
+  read-only:cursor-default read-only:border-zinc-300 read-only:bg-zinc-100 py-3 h-[42px] border bg-white focus:ring-1 focus:ring-zinc-300 hover:bg-zinc-100;
+
+  font-size: 14px !important;
+}
+
+.tox .tox-custom-editor:focus-within, .tox .tox-listboxfield .tox-listbox--select:focus, .tox .tox-textarea-wrap:focus-within, .tox .tox-textarea:focus, .tox .tox-textfield:focus {
+  @apply ring-1! ring-zinc-300! border-zinc-300!;
+}
+
+.tox .tox-label, .tox .tox-toolbar-label {
+  @apply mb-2! block! text-base! font-semibold! text-zinc-900!;
+}
+
+.tox .tox-form__group {
+  @apply mb-4!;
+}
+
+.tox button.tox-button:not(.tox-button--naked) {
+  @apply text-white bg-primary border-transparent hover:bg-primary-active hover:border-transparent px-5 py-2.5 h-[42px] inline-flex cursor-pointer items-center whitespace-nowrap rounded-lg border text-base font-semibold transition-colors focus:outline-none disabled:cursor-not-allowed disabled:select-none disabled:opacity-50;
+}
+
+.tox button.tox-button--secondary:not(.tox-button--naked) {
+  @apply text-white bg-secondary border-transparent hover:text-white enabled:hover:bg-secondary-active hover:border-transparent px-5 py-2.5 h-[42px] inline-flex cursor-pointer items-center whitespace-nowrap rounded-lg border text-base font-semibold transition-colors focus:outline-none disabled:cursor-not-allowed disabled:select-none disabled:opacity-50;
+}
+
+.tox .tox-listbox__select-label {
+  font-size: 14px;
+}

package/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue';
+import UILibrary from '~/modules';
+import App from './App.vue';
+
+import './css/build.css';
+import './css/main.css';
+import { createRouter, createWebHistory } from 'vue-router';
+import { useGoogleApi } from './modules/composables';
+
+const app = createApp(App);
+
+app.use(UILibrary);
+
+useGoogleApi().load(import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '');
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'playground',
+      component: async () => import('./Playground.vue'),
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: async () => import('./Playground.vue'),
+    },
+  ],
+});
+
+app.use(router);
+
+app.mount('#app');

package/src/modules/components/AppActionBar/AppActionBar.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+  import { computed, ref, useTemplateRef, watch } from 'vue';
+  import { onKeyStroke } from '@vueuse/core';
+  import { XMarkIcon } from '~icons';
+  import { useActionBar, useComputedPosition } from '~composables';
+  import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
+  import AppInput from '~components/AppInput/AppInput.vue';
+
+  const actionBar = useTemplateRef('actionBar');
+  const { selection, actions, isOpen, close, resetSelection, selectionText } = useActionBar();
+  const { setComputedPosition } = useComputedPosition(
+    () => document.getElementById('sidebar-left-wrapper'),
+    actionBar,
+    {
+      active: true,
+      placement: 'left-start',
+      mainAxis: 0,
+      sizeElement: '#sidebar-wrapper',
+    },
+  );
+  const selected = ref([1]);
+
+  const selectionTextWithValue = computed((): string => {
+    return selectionText.value.replace(':selection', String(selection.value.length));
+  });
+
+  watch(isOpen, () => setComputedPosition());
+  watch(selection, () => {
+    if (selection.value.length === 0) {
+      close();
+    }
+  });
+
+  function changeSelection(): void {
+    selected.value = [1];
+
+    resetSelection();
+  }
+
+  function closeActionBar(): void {
+    resetSelection();
+
+    close();
+  }
+
+  onKeyStroke(['Escape'], (event: Event) => {
+    event.preventDefault();
+
+    closeActionBar();
+  });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      ref="actionBar"
+      :class="{ 'translate-y-0! max-md:mt-0!': selection.length > 0 && isOpen }"
+      class="fixed inset-x-0 top-0 z-100 flex h-14 md:-mt-1 -translate-y-24 items-center justify-between bg-secondary
+        px-4 text-white transition-[translate] ease-in-out max-md:transform-none! max-md:translate-none! max-md:-mt-10"
+      data-test-action-bar-wrapper
+    >
+      <div class="flex py-4.5">
+        <!-- @vue-ignore -->
+        <AppInput
+          v-model="selected"
+          :value="1"
+          type="checkbox"
+          @change="changeSelection"
+        />
+
+        <div
+          class="w-28 whitespace-nowrap pl-2"
+          data-test-selection-text
+        >
+          {{ selectionTextWithValue }}
+        </div>
+      </div>
+
+      <div class="flex">
+        <AppActionBarItem
+          v-for="(action, index) in actions"
+          :key="`action-item-${index}`"
+          :action="action"
+          @close="closeActionBar"
+        />
+      </div>
+
+      <div>
+        <XMarkIcon
+          class="size-5 cursor-pointer"
+          @click="closeActionBar"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/modules/components/AppActionBar/AppActionBarItem.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+  import { computed, onMounted, ref, toValue, useTemplateRef } from 'vue';
+  import { onClickOutside } from '@vueuse/core';
+  import { WarningIcon } from '~icons';
+  import { AppLoader } from '~components';
+  import { useActionBar, useContextMenu } from '~composables';
+  import AppActionBarSubMenu from './AppActionBarSubMenu.vue';
+  import { domClassesPerMenu, domClassesPerType } from '.';
+
+  import type { ActionItemProps, Type } from './index.d';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const props = withDefaults(defineProps<ActionItemProps>(), {
+    item: undefined,
+    context: false,
+    confirmed: false,
+  });
+
+  const emit = defineEmits<{ (event: 'close'): void }>();
+
+  const actionBar = useActionBar();
+  const contextMenu = useContextMenu();
+  const actionBarElement = useTemplateRef<HTMLDivElement>('actionBarItem');
+  const confirm = ref(false);
+  const loading = ref(false);
+  const modelValueSubMenu = ref<number[]>([]);
+
+  const icon = computed(() => {
+    if (loading.value) {
+      return AppLoader;
+    }
+
+    if (confirm.value && props.action.confirm) {
+      return WarningIcon;
+    }
+
+    return props.action.icon;
+  });
+  const type = computed((): Type => props.action.type ?? 'default');
+  const itemHidden = computed(() => {
+    if (typeof props.action.hidden === 'function') {
+      // @ts-expect-error item not in unknown
+      if (props.context && contextMenu.item) {
+        // @ts-expect-error item not in unknown
+        return props.action.hidden([toValue(contextMenu.item)], true);
+      }
+
+      return props.action.hidden(actionBar.tableSelection.value, false);
+    }
+
+    return props.action.hidden;
+  });
+
+  onMounted(() => {
+    if (props.confirmed) {
+      confirm.value = true;
+    }
+  });
+
+  async function onClickAction(): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    if ((props.action.confirm || props.action.component) && !confirm.value) {
+      confirm.value = true;
+      return;
+    }
+
+    loading.value = true;
+    confirm.value = false;
+
+    const closeOnComplete = await props.action.onClick?.(props.item ?? actionBar.tableSelection.value);
+
+    loading.value = false;
+
+    if (props.action?.resetSelection ?? true) {
+      actionBar.resetSelection();
+    }
+
+    if (closeOnComplete) {
+      emit('close');
+    }
+  }
+
+  function subMenuClose(): void {
+    confirm.value = false;
+
+    emit('close');
+  }
+
+  onClickOutside(actionBarElement, () => {
+    confirm.value = false;
+  });
+</script>
+
+<template>
+  <div
+    v-if="itemHidden !== true"
+    ref="actionBarItem"
+    :class="[...domClassesPerType[type], ...domClassesPerMenu[props.context ? 'contextMenu' : 'actionBar']]"
+    class="relative cursor-pointer rounded-md  transition-colors duration-200"
+  >
+    <div
+      v-tippy="context ? undefined : action.name"
+      :class="{ 'px-2.5 py-4': !context }"
+      class="flex size-full items-center space-x-2 whitespace-nowrap"
+      data-test-action-bar-icon
+      @click="onClickAction"
+    >
+      <Component
+        :is="icon"
+        :class="{ 'text-yellow-600': confirm && action.confirm, 'size-4': context, 'size-5': !context, 'size-5!': loading }"
+      />
+
+      <slot></slot>
+    </div>
+
+    <AppActionBarSubMenu
+      v-if="props.action.component && confirm"
+      v-model="modelValueSubMenu"
+      v-bind="props"
+      @close="subMenuClose"
+    />
+  </div>
+</template>

package/src/modules/components/AppActionBar/AppActionBarSubMenu.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+  import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
+  import { pascal } from 'radash';
+  import { useParentElement } from '@vueuse/core';
+  import { flip, offset, shift, limitShift, arrow } from '@floating-ui/vue';
+  import { useComputedPosition } from '~composables';
+  import { byPrefixAndName, FontAwesomeIcon } from '~icons';
+  import Loading from './Components/Loading.vue';
+  import Error from './Components/Error.vue';
+  import { arrowClassPerMenu } from './index';
+
+  import type { ActionItemProps } from './index.d';
+
+  // eslint-disable-next-line vue/no-unused-properties
+  const props = withDefaults(defineProps<ActionItemProps>(), {
+    item: undefined,
+    context: false,
+  });
+
+  const emit = defineEmits<{ close: [] }>();
+
+  const parentElement = useParentElement();
+  const subMenuElement = useTemplateRef<HTMLDivElement>('subMenu');
+  const arrowElement = useTemplateRef<HTMLDivElement>('submenuArrow');
+  const { position } = useComputedPosition(parentElement, subMenuElement, {
+    placement: props.context ? 'right-start' : 'bottom',
+    middleware: [
+      offset({ mainAxis: props.context ? 25 : 20, crossAxis: 0 }),
+      shift({ padding: props.context ? 25 : 20, limiter: limitShift() }),
+      flip({ mainAxis: true, crossAxis: true }),
+      arrow({ element: arrowElement }),
+    ],
+  });
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const MenuComponent = defineAsyncComponent({
+    loader: async () => {
+      if (typeof props.action.component === 'string') {
+        return import(`./Components/${pascal(props.action.component)}.vue`);
+      }
+
+      return props.action.component;
+    },
+    errorComponent: Error,
+    loadingComponent: Loading,
+  });
+
+  const horizontalPlacement = computed((): 'left' | 'right' => (`${position.value?.placement}`.startsWith('left') ? 'left' : 'right'));
+  const arrowHorizontal = computed((): number | null => position.value?.middlewareData?.arrow?.x ?? null);
+</script>
+
+<template>
+  <div
+    ref="subMenu"
+    :class="{ '-top-full left-full': props.context }"
+    class="absolute w-fit rounded-lg bg-secondary p-2"
+  >
+    <div
+      ref="submenuArrow"
+      :class="{
+        '-translate-x-6 -ml-px': horizontalPlacement === 'right',
+        'translate-x-4': horizontalPlacement === 'left',
+        hidden: !props.context,
+      }"
+      :style="{
+        left: arrowHorizontal !== null && horizontalPlacement === 'right' ? `${arrowHorizontal}px` : '',
+        right: horizontalPlacement === 'left' ? `${arrowHorizontal ?? 0}px` : '',
+        top: position?.middlewareData?.arrow?.y !== null ? `${position?.middlewareData?.arrow?.y}px` : '',
+      }"
+      class="absolute text-secondary size-8"
+    >
+      <FontAwesomeIcon
+        :icon="byPrefixAndName.fas['caret-left']"
+        :class="{ 'rotate-180': horizontalPlacement === 'left' }"
+        class="size-full!"
+      />
+    </div>
+
+    <div
+      :class="arrowClassPerMenu[props.context ? 'contextMenu' : 'actionBar']"
+      class="relative w-fit before:absolute before:-translate-x-3"
+    >
+      <MenuComponent
+        v-bind="{ ...props, ...action.componentProperties }"
+        data-test-action-menu
+        @close="() => emit('close')"
+      />
+    </div>
+  </div>
+</template>

package/src/modules/components/AppActionBar/Components/Error.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+  import { AppAlert } from '~components';
+</script>
+
+<template>
+  <AppAlert
+    type="error"
+    title="Onbekend type"
+    description="Type wordt niet ondersteund."
+  />
+</template>

package/src/modules/components/AppActionBar/Components/Loading.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+  import { AppLoader } from '~/modules';
+</script>
+
+<template>
+  <div>
+    <AppLoader />
+  </div>
+</template>