@autoafleveren/ui 1.3.2 → 1.4.0

package/src/stories/layouts/Auth.stories.ts

@@ -0,0 +1,43 @@
+import { AuthLayout } from '../../modules/layouts';
+import { useNavigation, useLayout } from '~/modules/composables';
+import { HomeIcon } from '~/modules/icons';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Structure/Layout',
+  component: AuthLayout,
+};
+
+const template: StoryFn<typeof AuthLayout> = args => ({
+  components: {
+    AuthLayout,
+  },
+
+  setup(): unknown {
+    const navigation = useNavigation();
+    const layout = useLayout();
+
+    navigation.openMainMenu();
+    navigation.setNavigationItems([
+      {
+        name: 'Home',
+        to: '/',
+        icon: HomeIcon,
+      },
+    ]);
+    layout.setLayoutImage('/images/road.png');
+
+    return { args };
+  },
+
+  template: `
+    <AuthLayout>
+      Content within the layout
+    </AuthLayout>
+  `,
+});
+
+export const auth = template.bind({});
+
+export default meta;

package/src/stories/layouts/Base.stories.ts

@@ -0,0 +1,70 @@
+import { BaseLayout } from '~layouts';
+import { useNavigation } from '~/modules/composables';
+import { HomeIcon } from '~/modules/icons';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Structure/Layout',
+  component: BaseLayout,
+  argTypes: {
+    leftSideBar: {
+      control: { type: 'boolean' },
+    },
+
+    rightSideBar: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template: StoryFn<typeof BaseLayout> = args => ({
+  components: {
+    BaseLayout,
+  },
+
+  setup(): unknown {
+    const navigation = useNavigation();
+    navigation.openMainMenu();
+    navigation.setNavigationItems([
+      {
+        name: 'Home',
+        to: '/',
+        icon: HomeIcon,
+      },
+    ]);
+
+    return { args };
+  },
+
+  template: `
+    <BaseLayout>
+      <template
+        v-if="args.leftSideBar"
+        #sidebarLeft
+      >
+        Sidebar Left
+      </template>
+
+      <template
+        v-if="args.rightSideBar"
+        #sidebar
+      >
+        Sidebar Right
+      </template>
+
+      Content within the layout
+    </BaseLayout>
+  `,
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Base = template.bind({});
+
+Base.args = {
+  // @ts-expect-error prop not exist in compound, but in Story
+  leftSideBar: true,
+  rightSideBar: true,
+};
+
+export default meta;

package/src/tests/mocks/resize-observer.ts

@@ -0,0 +1,13 @@
+export default class ResizeObserverMock {
+  observe() {
+    // do nothing
+  }
+
+  unobserve() {
+    // do nothing
+  }
+
+  disconnect() {
+    // do nothing
+  }
+}

package/src/tests/stubs/AppSelect.ts

@@ -0,0 +1,89 @@
+/* eslint-disable vue/no-unused-properties, vue/require-prop-types */
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'AppSelect',
+
+  props: [
+    'modelValue',
+    'value',
+    'mode',
+    'options',
+    'searchable',
+    'valueProp',
+    'trackBy',
+    'label',
+    'placeholder',
+    'multipleLabel',
+    'disabled',
+    'max',
+    'limit',
+    'loading',
+    'id',
+    'caret',
+    'maxHeight',
+    'noOptionsText',
+    'noResultsText',
+    'canDeselect',
+    'canClear',
+    'clearOnSearch',
+    'clearOnSelect',
+    'delay',
+    'filterResults',
+    'minChars',
+    'resolveOnLoad',
+    'appendNewTag',
+    'appendNewOption',
+    'createTag',
+    'createOption',
+    'addTagOn',
+    'addOptionOn',
+    'hideSelected',
+    'showOptions',
+    'object',
+    'required',
+    'openDirection',
+    'nativeSupport',
+    'classes',
+    'strict',
+    'closeOnSelect',
+    'closeOnDeselect',
+    'autocomplete',
+    'groups',
+    'groupLabel',
+    'groupOptions',
+    'groupHideEmpty',
+    'groupSelect',
+    'inputType',
+    'attrs',
+    'onCreate',
+    'searchStart',
+    'reverse',
+    'regex',
+    'rtl',
+    'infinite',
+    'aria',
+    'clearOnBlur',
+    'locale',
+    'fallbackLocale',
+    'searchFilter',
+    'allowAbsent',
+  ],
+
+  emits: [
+    'update:modelValue',
+    'change',
+  ],
+
+  setup(props) {
+    function search(searchString: string): void {
+      props.options?.(searchString);
+    }
+
+    return { search };
+  },
+
+  render() {
+    return h('div');
+  },
+});

package/src/tests/stubs/HeadlessUiDialogStub.ts

@@ -0,0 +1,24 @@
+import { defineComponent } from 'vue';
+
+import type { Component, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'DialogStub',
+
+  props: {
+    as: {
+      type: [String, Object] as PropType<string | Component>,
+      default: 'div',
+    },
+  },
+
+  emits: [
+    'close',
+  ],
+
+  template: `
+    <Component :is="as">
+      <slot :open="true"></slot>
+    </Component>
+  `,
+});

package/src/tests/stubs/HeadlessUiTransitionChildStub.ts

@@ -0,0 +1,20 @@
+import { defineComponent } from 'vue';
+
+import type { Component, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'TransitionChildStub',
+
+  props: {
+    as: {
+      type: [String, Object] as PropType<string | Component>,
+      default: 'div',
+    },
+  },
+
+  template: `
+    <Component :is="as">
+      <slot></slot>
+    </Component>
+  `,
+});

package/src/tests/stubs/HeadlessUiTransitionRootStub.ts

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue';
+
+import type { Component, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'TransitionRootStub',
+
+  props: {
+    as: {
+      type: [String, Object] as PropType<string | Component>,
+      default: 'div',
+    },
+
+    show: {
+      type: [Boolean] as PropType<boolean>,
+      default: false,
+    },
+  },
+
+  template: `
+    <Component :is="as">
+      <slot :open="show"></slot>
+    </Component>
+  `,
+});

package/src/tests/stubs/IconStub.ts

@@ -0,0 +1,9 @@
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  name: 'IconStub',
+
+  render() {
+    return h('span');
+  },
+});

package/src/tests/stubs/Vue3EasyDataTableStub.ts

@@ -0,0 +1,53 @@
+import { defineComponent, h } from 'vue';
+import { vi } from 'vitest';
+
+import type { VNode, PropType } from 'vue';
+import type { Props, DataTableInstance } from '~components/AppDataTable';
+
+export const nextPageMock = vi.fn();
+export const previousPageMock = vi.fn();
+export const updatePageMock = vi.fn();
+export const updateRowsPerPageActiveOptionMock = vi.fn();
+export const dataTableInstance: DataTableInstance = {
+  clientItemsLength: 100,
+  currentPageFirstIndex: 1,
+  currentPageLastIndex: 20,
+  currentPaginationNumber: 1,
+  isFirstPage: true,
+  isLastPage: false,
+  maxPaginationNumber: 5,
+  nextPage: nextPageMock,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  prevPage: previousPageMock,
+  rowsPerPageActiveOption: 20,
+  rowsPerPageOptions: [20, 50, 100],
+  updatePage: updatePageMock,
+  updateRowsPerPageActiveOption: updateRowsPerPageActiveOptionMock,
+};
+
+export default defineComponent({
+  name: 'Vue3EasyDataTableStub',
+
+  props: {
+    hideFooter: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+
+    itemsSelected: {
+      type: Array as PropType<number[]>,
+      required: true,
+    },
+  },
+
+  emits: [
+    'update:items-selected',
+  ],
+
+  // @ts-expect-error no overload matches this call
+  setup(props: Props, { expose }) {
+    expose(dataTableInstance);
+
+    return (): VNode => h('div', '1');
+  },
+});

package/src/typings/plugin.d.ts

@@ -0,0 +1,5 @@
+import type { PluginOptions as ToastPluginOptions } from "vue-toastification";
+
+export interface PluginOptions {
+  toast: ToastPluginOptions,
+}

package/src/typings/shims-vue.d.ts

@@ -0,0 +1,13 @@
+import { DefineComponent } from 'vue';
+
+declare module '*.vue' {
+  const component: DefineComponent<{}, {}, any>;
+
+  export default component;
+}
+
+declare module 'vue3-easy-data-table' {
+  export default DefineComponent<{}, {}, any>;
+  export type { Header, Item } from 'vue3-easy-data-table/types/main';
+}
+

package/src/typings/utilities.d.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DefinedComponent = new (...arguments: any[]) => any;
+
+export type MaybeFunction<T> = T | (() => T);

package/src/typings/vite-environment.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable unicorn/prevent-abbreviations */
+/// <reference types="vite/client" />
+import 'vite/client'
+
+interface ImportMetaEnv {
+  readonly VITE_GOOGLE_MAPS_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}