@antify/template-module 0.0.2

package/dist/runtime/components/crud/CrudTableNav.vue

@@ -0,0 +1,121 @@
+<script setup>
+import {
+  useRouter,
+  useRoute
+} from "vue-router";
+import {
+  computed,
+  ref,
+  watch
+} from "vue";
+import {
+  AntItemsPerPage,
+  AntPagination
+} from "@antify/ui";
+const emit = defineEmits([
+  "changeItemsPerPage",
+  "changePage"
+]);
+const props = defineProps({
+  count: { type: [Number, null], required: true },
+  pageQuery: { type: String, required: false, default: "p" },
+  itemsPerPageQuery: { type: String, required: false, default: "ipp" },
+  fullWidth: { type: Boolean, required: false, default: true },
+  validItemsPerPage: { type: Array, required: false, default: () => [
+    20,
+    50,
+    100,
+    200
+  ] },
+  skeleton: { type: Boolean, required: false, default: false }
+});
+const route = useRoute();
+const router = useRouter();
+const itemsPerPageOptions = computed(() => props.validItemsPerPage);
+const page = ref(1);
+const itemsPerPage = computed({
+  get() {
+    return route.query[props.itemsPerPageQuery] ? Number.parseInt(route.query[props.itemsPerPageQuery]) : props.validItemsPerPage[0];
+  },
+  set(val) {
+    const query = {
+      ...route.query
+    };
+    query[props.itemsPerPageQuery] = `${val}`;
+    delete query[props.pageQuery];
+    page.value = 1;
+    (async () => {
+      await router.push({
+        ...route,
+        query
+      });
+      emit("changeItemsPerPage", val);
+    })();
+  }
+});
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value) || 1);
+const _fullWidth = ref(props.fullWidth);
+const onChangePage = (val) => {
+  const query = {
+    ...route.query
+  };
+  query[props.pageQuery] = `${val}`;
+  (async () => {
+    await router.push({
+      ...route,
+      query
+    });
+    emit("changePage", val);
+  })();
+};
+watch(() => props.fullWidth, (val) => {
+  setTimeout(() => {
+    _fullWidth.value = val;
+  }, val ? 300 : 200);
+});
+watch(() => route.query, () => {
+  if (route.query[props.pageQuery]) {
+    const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
+    if (_page <= 0 || _page > pages.value) {
+      return 1;
+    }
+    page.value = _page;
+  }
+}, {
+  deep: true
+});
+</script>
+
+<template>
+  <div
+    class="w-full"
+    data-e2e="crud-table-nav"
+  >
+    <div
+      class="flex w-full items-center p-2"
+      :class="{ 'justify-end': !_fullWidth, 'justify-between': _fullWidth }"
+    >
+      <div
+        v-if="_fullWidth"
+        class="flex gap-2 items-center text-for-white-bg-font text-sm"
+        data-e2e="items-per-page"
+      >
+        <AntItemsPerPage
+          v-model="itemsPerPage"
+          :items-per-page-options="itemsPerPageOptions"
+          :amount-of-items="count"
+          :selected-page="page"
+          :skeleton="skeleton"
+        />
+      </div>
+
+      <AntPagination
+        v-model="page"
+        :pages="pages"
+        :skeleton="skeleton"
+        :light-version="!_fullWidth"
+        @update:model-value="(val) => onChangePage(val)"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/crud/CrudTableNav.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    count: number | null;
+    pageQuery?: string;
+    itemsPerPageQuery?: string;
+    fullWidth?: boolean;
+    validItemsPerPage?: number[];
+    skeleton?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    changeItemsPerPage: (...args: any[]) => void;
+    changePage: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChangeItemsPerPage?: ((...args: any[]) => any) | undefined;
+    onChangePage?: ((...args: any[]) => any) | undefined;
+}>, {
+    skeleton: boolean;
+    fullWidth: boolean;
+    pageQuery: string;
+    itemsPerPageQuery: string;
+    validItemsPerPage: number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/dialogs/DeleteDialog.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    open: boolean;
+    entity: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:open": (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/dialogs/DeleteDialog.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {
+  AntDialog,
+  InputState,
+  AntButton,
+  State
+} from "@antify/ui";
+import DeleteButton from "../buttons/DeleteButton.vue";
+import {
+  useVModel
+} from "@vueuse/core";
+const emit = defineEmits([
+  "update:open",
+  "close",
+  "confirm"
+]);
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  entity: { type: String, required: true }
+});
+const _open = useVModel(props, "open", emit);
+function closeDialog() {
+  emit("update:open", false);
+  emit("close");
+}
+function confirmDialog() {
+  emit("update:open", false);
+  emit("confirm");
+}
+</script>
+
+<template>
+  <AntDialog
+    v-model:open="_open"
+    :state="InputState.danger"
+    title="Löschen"
+    data-e2e="delete-dialog"
+    @close="() => $emit('close')"
+  >
+    <div>
+      Möchtest du wirklich <span class="font-semibold">{{ entity }}</span> löschen?
+    </div>
+
+    <template #footer>
+      <div
+        class="bg-base-100 gap-2 text-for-white-bg-font flex w-full justify-end"
+      >
+          <AntButton
+            :state="State.base"
+            @click="closeDialog"
+          >
+            Abbrechen
+          </AntButton>
+
+          <DeleteButton
+            filled
+            @click="confirmDialog"
+          >
+            Löschen
+          </DeleteButton>
+      </div>
+    </template>
+  </AntDialog>
+</template>

package/dist/runtime/components/dialogs/DeleteDialog.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    open: boolean;
+    entity: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:open": (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/index.d.ts

@@ -0,0 +1,15 @@
+import ActionButton from './buttons/ActionButton.vue.js';
+import CreateButton from './buttons/CreateButton.vue.js';
+import DeleteButton from './buttons/DeleteButton.vue.js';
+import DuplicateButton from './buttons/DuplicateButton.vue.js';
+import EditButton from './buttons/EditButton.vue.js';
+import SaveAndNewButton from './buttons/SaveAndNewButton.vue.js';
+import SaveButton from './buttons/SaveButton.vue.js';
+import DeleteDialog from './dialogs/DeleteDialog.vue.js';
+import Crud from './crud/Crud.vue.js';
+import CrudDetail from './crud/CrudDetail.vue.js';
+import CrudDetailActions from './crud/CrudDetailActions.vue.js';
+import CrudDetailNav from './crud/CrudDetailNav.vue.js';
+import CrudTableFilter from './crud/CrudTableFilter.vue.js';
+import CrudTableNav from './crud/CrudTableNav.vue.js';
+export { ActionButton, CreateButton, DeleteButton, DuplicateButton, EditButton, SaveAndNewButton, SaveButton, DeleteDialog, Crud, CrudDetail, CrudDetailActions, CrudDetailNav, CrudTableFilter, CrudTableNav, };

package/dist/runtime/components/index.js

@@ -0,0 +1,30 @@
+import ActionButton from "./buttons/ActionButton.vue";
+import CreateButton from "./buttons/CreateButton.vue";
+import DeleteButton from "./buttons/DeleteButton.vue";
+import DuplicateButton from "./buttons/DuplicateButton.vue";
+import EditButton from "./buttons/EditButton.vue";
+import SaveAndNewButton from "./buttons/SaveAndNewButton.vue";
+import SaveButton from "./buttons/SaveButton.vue";
+import DeleteDialog from "./dialogs/DeleteDialog.vue";
+import Crud from "./crud/Crud.vue";
+import CrudDetail from "./crud/CrudDetail.vue";
+import CrudDetailActions from "./crud/CrudDetailActions.vue";
+import CrudDetailNav from "./crud/CrudDetailNav.vue";
+import CrudTableFilter from "./crud/CrudTableFilter.vue";
+import CrudTableNav from "./crud/CrudTableNav.vue";
+export {
+  ActionButton,
+  CreateButton,
+  DeleteButton,
+  DuplicateButton,
+  EditButton,
+  SaveAndNewButton,
+  SaveButton,
+  DeleteDialog,
+  Crud,
+  CrudDetail,
+  CrudDetailActions,
+  CrudDetailNav,
+  CrudTableFilter,
+  CrudTableNav
+};

package/dist/runtime/composables/useUiClient.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Set of helper functions for client side
+ */
+import type { FetchResponse, FetchError } from 'ofetch';
+import { type LocationQuery, type RouteLocationRaw, type LocationQueryRaw, type RouteParams } from '#vue-router';
+import { type Ref } from '#imports';
+import { InputState } from '@antify/ui';
+declare function handleNotFoundResponse(response: FetchResponse, fallbackUrl: RouteLocationRaw): Promise<void>;
+declare function handleResponseError(error: Ref<FetchError | null>): void;
+declare function isFormDisabled(status: Ref | Ref[]): boolean;
+/**
+ * Detect if the given queryToWatch changed.
+ */
+declare function queryChanged(from: LocationQuery, to: LocationQuery, queryToWatch: string | string[]): boolean;
+/**
+ * Creates a skeleton ref with flicker protection by prevent switching to fast from true to false.
+ *
+ * Important, it only watches the pending ref once, because a skeleton should be shown only one time
+ * on initial loading.
+ *
+ * @param pending
+ * @deprecated - Flicker protection is implemented in @antify/ui directly. Do not handle it from outside anymore.
+ */
+declare function createSkeleton(pending: Ref<boolean>): Ref<boolean>;
+export type CrudRoutingOptions = {
+    detailRouteName: string;
+    listingRouteName: string;
+    getDetailRouteParams?: () => RouteParams;
+    getListingRouteParams?: () => RouteParams;
+    entityIdentifier?: string;
+    createEntityIdentifier?: string;
+};
+export type FormFieldType = {
+    errors: string[];
+    state: InputState;
+    validate: () => Promise<void>;
+};
+/**
+ * Yup validation throws an error if the value expect not the given schema.
+ * This function creates a wrapper around it, to easily use it with antify ui components.
+ */
+export declare function useFormField(validationFn: () => Promise<void>): {
+    errors: never[];
+    state: InputState;
+    validate: () => Promise<void>;
+};
+type GroupedForm = Record<string, FormFieldType[]>;
+export declare function useGroupedForm<T extends GroupedForm>(form: T): {};
+export declare const useUiClient: () => {
+    handler: {
+        handleNotFoundResponse: typeof handleNotFoundResponse;
+        handleResponseError: typeof handleResponseError;
+    };
+    utils: {
+        isFormDisabled: typeof isFormDisabled;
+        queryChanged: typeof queryChanged;
+        useCrudRouting: (detailRouteName: string, listingRouteName: string, getDetailRouteParams?: () => RouteParams, getListingRouteParams?: () => RouteParams, entityIdentifier?: string, createEntityIdentifier?: string) => {
+            isListingPage: import("vue").ComputedRef<boolean>;
+            isDetailPage: import("vue").ComputedRef<boolean>;
+            isUpdatePage: import("vue").ComputedRef<boolean>;
+            isCreatePage: import("vue").ComputedRef<boolean>;
+            getDetailRoute(entityId: string | string[], query?: LocationQueryRaw): {
+                name: string;
+                params: {
+                    [x: string]: string | string[] | string[];
+                };
+                query: LocationQueryRaw;
+            };
+            getDetailSubRoute(entityId: string | string[], subRouteNameExtension: string, query?: LocationQueryRaw): {
+                name: string;
+                params: {
+                    [x: string]: string | string[] | string[];
+                };
+                query: LocationQueryRaw;
+            };
+            getListingRoute(query?: LocationQueryRaw): {
+                name: string;
+                params: import("vue-router").RouteParamsGeneric;
+                query: LocationQueryRaw;
+            };
+            getEntityId(): string | string[];
+            goToListingPage(query?: LocationQueryRaw): Promise<void | import("vue-router").NavigationFailure | undefined>;
+            goToDetailPage(entityId?: string | string[], query?: LocationQuery): Promise<void | import("vue-router").NavigationFailure | undefined>;
+            goToDetailSubPage(subRouteNameExtension: string, query?: LocationQueryRaw): Promise<void | import("vue-router").NavigationFailure | undefined>;
+        };
+        useFormField: typeof useFormField;
+        createSkeleton: typeof createSkeleton;
+    };
+};
+export {};

package/dist/runtime/composables/useUiClient.js

@@ -0,0 +1,151 @@
+import {
+  useNuxtApp,
+  navigateTo,
+  createError,
+  useRouter,
+  useRoute,
+  computed,
+  reactive,
+  ref
+} from "#imports";
+import { InputState } from "@antify/ui";
+import { watchOnce } from "@vueuse/core";
+async function handleNotFoundResponse(response, fallbackUrl) {
+  if (response._data?.notFound) {
+    useNuxtApp().$templateModule.toaster.toastError("Entity not found. Maybe an other user deleted it.");
+    await navigateTo(fallbackUrl);
+  }
+}
+function handleResponseError(error) {
+  if (error.value) {
+    throw createError({ ...error.value?.data, statusCode: 500, fatal: true });
+  }
+}
+function isFormDisabled(status) {
+  if (Array.isArray(status)) {
+    return status.some((status2) => isFormDisabled(status2));
+  }
+  return status.value === "pending";
+}
+function queryChanged(from, to, queryToWatch) {
+  const _queryToWatch = Array.isArray(queryToWatch) ? queryToWatch : [queryToWatch];
+  const changes = Object.keys(to).reduce((acc, key) => {
+    if (to[key] !== from[key]) {
+      acc[key] = to[key];
+    }
+    return acc;
+  }, {});
+  return _queryToWatch.some((key) => changes[key] !== void 0);
+}
+function createSkeleton(pending) {
+  const skeleton = ref(true);
+  const initialTimestamp = Date.now();
+  const minShowTime = 500;
+  watchOnce(pending, () => {
+    const timeShowed = Date.now() - (initialTimestamp || Date.now());
+    const restTimeToShow = minShowTime - timeShowed > 0 ? minShowTime - timeShowed : 0;
+    if (restTimeToShow === 0) {
+      skeleton.value = false;
+    } else {
+      setTimeout(() => {
+        skeleton.value = false;
+      }, restTimeToShow);
+    }
+  });
+  return skeleton;
+}
+const useCrudRouting = (detailRouteName, listingRouteName, getDetailRouteParams = () => ({}), getListingRouteParams = () => ({}), entityIdentifier = "entityId", createEntityIdentifier = "create") => {
+  const route = useRoute();
+  const router = useRouter();
+  const isDetailPage = computed(() => {
+    return route.name?.includes(detailRouteName || "") || false;
+  });
+  return {
+    isListingPage: computed(() => route.name === listingRouteName),
+    isDetailPage,
+    isUpdatePage: computed(() => isDetailPage.value && route.params[entityIdentifier] !== createEntityIdentifier),
+    isCreatePage: computed(() => isDetailPage.value && route.params[entityIdentifier] === createEntityIdentifier),
+    getDetailRoute(entityId, query = route.query) {
+      return {
+        name: detailRouteName,
+        params: {
+          ...getDetailRouteParams(),
+          [entityIdentifier]: entityId
+        },
+        query
+      };
+    },
+    getDetailSubRoute(entityId, subRouteNameExtension, query = route.query) {
+      return {
+        name: `${detailRouteName}-${subRouteNameExtension}`,
+        params: {
+          ...getDetailRouteParams(),
+          [entityIdentifier]: entityId
+        },
+        query
+      };
+    },
+    getListingRoute(query = route.query) {
+      return {
+        name: listingRouteName,
+        params: getListingRouteParams(),
+        query
+      };
+    },
+    getEntityId() {
+      const entityId = route.params[entityIdentifier];
+      if (entityId === void 0) {
+        throw new Error(`Entity identifier "${entityIdentifier}" is not set in route.params. Make sure you set it in route and this function is called on a detail page.`);
+      }
+      return entityId;
+    },
+    // TODO:: use the given query and merge it into route.query
+    goToListingPage(query = route.query) {
+      return router.push(this.getListingRoute(query));
+    },
+    goToDetailPage(entityId = "create", query = route.query) {
+      return router.push(this.getDetailRoute(entityId, query));
+    },
+    goToDetailSubPage(subRouteNameExtension, query = route.query) {
+      return router.push(this.getDetailSubRoute(subRouteNameExtension, query));
+    }
+  };
+};
+export function useFormField(validationFn) {
+  const _reactive = reactive({
+    errors: [],
+    state: InputState.base,
+    async validate() {
+      try {
+        await validationFn();
+        _reactive.errors = [];
+        _reactive.state = InputState.base;
+      } catch (e) {
+        if (e?.name !== "ValidationError") {
+          throw e;
+        }
+        _reactive.errors = e?.errors || [];
+        _reactive.state = InputState.danger;
+      }
+    }
+  });
+  return _reactive;
+}
+export function useGroupedForm(form) {
+  return {};
+}
+export const useUiClient = () => {
+  return {
+    handler: {
+      handleNotFoundResponse,
+      handleResponseError
+    },
+    utils: {
+      isFormDisabled,
+      queryChanged,
+      useCrudRouting,
+      useFormField,
+      createSkeleton
+    }
+  };
+};

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@import "@antify/ui";

package/dist/runtime/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export * from './utils.js';

package/dist/runtime/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./utils.js";

package/dist/runtime/plugins/template-module.d.ts

@@ -0,0 +1,48 @@
+declare const _default: import("nuxt/app").Plugin<{
+    templateModule: {
+        toaster: {
+            getToasts(): {
+                id?: string | undefined;
+                title: string;
+                content?: string | undefined;
+                type: import("@antify/ui").InputState;
+                hasIcon?: boolean | undefined;
+            }[];
+            toast(toast: import("@antify/ui").Toast): void;
+            removeToast(toast: import("@antify/ui").Toast): void;
+            toastSuccess(message: string): void;
+            toastError(message: string): void;
+            toastWarning(message: string): void;
+            toastInfo(message: string): void;
+            toastDeleted(): void;
+            toastCreated(): void;
+            toastUpdated(): void;
+            toastDuplicated(): void;
+            toastInvalidFormInfo(): void;
+        };
+    };
+}> & import("nuxt/app").ObjectPlugin<{
+    templateModule: {
+        toaster: {
+            getToasts(): {
+                id?: string | undefined;
+                title: string;
+                content?: string | undefined;
+                type: import("@antify/ui").InputState;
+                hasIcon?: boolean | undefined;
+            }[];
+            toast(toast: import("@antify/ui").Toast): void;
+            removeToast(toast: import("@antify/ui").Toast): void;
+            toastSuccess(message: string): void;
+            toastError(message: string): void;
+            toastWarning(message: string): void;
+            toastInfo(message: string): void;
+            toastDeleted(): void;
+            toastCreated(): void;
+            toastUpdated(): void;
+            toastDuplicated(): void;
+            toastInvalidFormInfo(): void;
+        };
+    };
+}>;
+export default _default;

package/dist/runtime/plugins/template-module.js

@@ -0,0 +1,14 @@
+import { defineNuxtPlugin } from "#app";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useToaster } from "@antify/ui";
+export default defineNuxtPlugin((nuxtApp) => {
+  const toaster = useToaster();
+  nuxtApp.vueApp.component("FaIcon", FontAwesomeIcon);
+  return {
+    provide: {
+      templateModule: {
+        toaster
+      }
+    }
+  };
+});

package/dist/runtime/types.d.ts

@@ -0,0 +1 @@
+export { type CrudRoutingOptions, type FormFieldType, } from './composables/useUiClient.js';

package/dist/runtime/utils.d.ts

@@ -0,0 +1,15 @@
+import { InputState } from "@antify/ui";
+export type FormFieldType = {
+    errors: string[];
+    state: InputState;
+    validate: () => Promise<void>;
+};
+/**
+ * Yup validation throws an error if the value expect not the given schema.
+ * This function creates a wrapper around it, to easily use it with antify ui components.
+ */
+export declare function useFormField(validationFn: () => Promise<void>): {
+    errors: never[];
+    state: InputState;
+    validate: () => Promise<void>;
+};

package/dist/runtime/utils.js

@@ -0,0 +1,22 @@
+import { reactive } from "vue";
+import { InputState } from "@antify/ui";
+export function useFormField(validationFn) {
+  const _reactive = reactive({
+    errors: [],
+    state: InputState.base,
+    async validate() {
+      try {
+        await validationFn();
+        _reactive.errors = [];
+        _reactive.state = InputState.base;
+      } catch (e) {
+        if (e?.name !== "ValidationError") {
+          throw e;
+        }
+        _reactive.errors = e?.errors || [];
+        _reactive.state = InputState.danger;
+      }
+    }
+  });
+  return _reactive;
+}

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'
+
+export * from '../dist/runtime/types.js'