@antify/ui-module 1.8.5 → 1.9.1

package/dist/module.d.mts

@@ -1,6 +1,12 @@
-import { NuxtModule } from 'nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types.js';
 
-type ModuleOptions = {};
-declare const module: NuxtModule<ModuleOptions>;
+type ModuleOptions = {
+    tailwindcss?: {
+        content?: string[];
+    };
+};
 
-export { module as default };
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.ts

@@ -1,6 +1,12 @@
-import { NuxtModule } from 'nuxt/schema';
+import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types.js';
 
-type ModuleOptions = {};
-declare const module: NuxtModule<ModuleOptions>;
+type ModuleOptions = {
+    tailwindcss?: {
+        content?: string[];
+    };
+};
 
-export { module as default };
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -1,5 +1,9 @@
 {
-  "name": "ui-module",
+  "name": "@antify/ui-module",
   "configKey": "uiModule",
-  "version": "1.8.5"
+  "version": "1.9.1",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
 }

package/dist/module.mjs

@@ -1,24 +1,6 @@
-import tailwindConfig from '@antify/ui/config';
+import tailwindConfig from '../dist/runtime/tailwindConfig.js';
 import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponent } from '@nuxt/kit';
-
-tailwindConfig.content = [
-  // For module dev
-  "./src/runtime/**/*.{vue,js,ts,jsx,tsx}",
-  "./src/runtime/**/*.stories.ts",
-  "./playground/app.vue",
-  "./playground/components/**/*.{vue,js,ts,jsx,tsx}",
-  "./playground/pages/**/*.{vue,js,ts,jsx,tsx}",
-  "./playground/layouts/**/*.{vue,js,ts,jsx,tsx}",
-  "../ui-module/src/**/*.{vue,js,ts,jsx,tsx}",
-  // For project dev
-  "./app.vue",
-  "./components/**/*.{vue,js,ts,jsx,tsx}",
-  "./pages/**/*.{vue,js,ts,jsx,tsx}",
-  "./layouts/**/*.{vue,js,ts,jsx,tsx}",
-  // If this config is used in a project
-  "./node_modules/@antify/*/dist/**/*.{js,vue,ts}",
-  "./node_modules/@antify/*/src/**/*.{js,vue,ts}"
-];
+import { defu } from 'defu';
 
 const uiComponents = [
   "AntActionButton",
@@ -91,7 +73,7 @@ const uiComponents = [
 const moduleKey = "uiModule";
 const module = defineNuxtModule({
   meta: {
-    name: "ui-module",
+    name: "@antify/ui-module",
     configKey: moduleKey
   },
   defaults: {},
@@ -109,7 +91,7 @@ const module = defineNuxtModule({
         filePath: "@antify/ui/components"
       });
     });
-    nuxt.options.postcss.plugins.tailwindcss = tailwindConfig;
+    nuxt.options.postcss.plugins.tailwindcss = defu(tailwindConfig, options.tailwindcss);
     nuxt.options.css.push(resolve(runtimeDir, "assets/tailwind.css"));
     nuxt.options.runtimeConfig.public[moduleKey] = options;
   }

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

@@ -2,11 +2,16 @@
  * Set of helper functions for client side
  */
 import type { FetchResponse, FetchError } from 'ofetch';
-import { type LocationQuery, type RouteLocationRaw } from '#vue-router';
+import { type LocationQuery, type RouteLocationRaw, type LocationQueryRaw, type RouteParams } from '#vue-router';
 import { type Ref } from '#imports';
-export declare function handleNotFoundResponse(response: FetchResponse, fallbackUrl: RouteLocationRaw): Promise<void>;
-export declare function handleResponseError(error: Ref<FetchError | null>): void;
+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.
  *
@@ -14,12 +19,33 @@ declare function isFormDisabled(status: Ref | Ref[]): boolean;
  * 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>;
+};
 /**
- * Detect if the given queryToWatch changed.
+ * 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.
  */
-declare function queryChanged(from: LocationQuery, to: LocationQuery, queryToWatch: string | string[]): boolean;
+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;
@@ -27,8 +53,38 @@ export declare const useUiClient: () => {
     };
     utils: {
         isFormDisabled: typeof isFormDisabled;
-        createSkeleton: typeof createSkeleton;
         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().$uiModule.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/plugins/ui-module.d.ts

@@ -1,2 +1,46 @@
-declare const _default: any;
+declare const _default: import("nuxt/app").Plugin<{
+    uiModule: {
+        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;
+        };
+    };
+}> & import("nuxt/app").ObjectPlugin<{
+    uiModule: {
+        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;
+        };
+    };
+}>;
 export default _default;

package/dist/runtime/{tailwind.config.mjs → tailwindConfig.js}

@@ -7,14 +7,14 @@ tailwindConfig.content = [
   "./playground/components/**/*.{vue,js,ts,jsx,tsx}",
   "./playground/pages/**/*.{vue,js,ts,jsx,tsx}",
   "./playground/layouts/**/*.{vue,js,ts,jsx,tsx}",
-  "../ui-module/src/**/*.{vue,js,ts,jsx,tsx}",
+  // '../ui-module/src/**/*.{vue,js,ts,jsx,tsx}',
   // For project dev
   "./app.vue",
   "./components/**/*.{vue,js,ts,jsx,tsx}",
   "./pages/**/*.{vue,js,ts,jsx,tsx}",
   "./layouts/**/*.{vue,js,ts,jsx,tsx}",
   // If this config is used in a project
-  "./node_modules/@antify/*/dist/**/*.{js,vue,ts}",
-  "./node_modules/@antify/*/src/**/*.{js,vue,ts}"
+  "./node_modules/@antify/*/dist/**/*.{js,vue,ts}"
+  // './node_modules/@antify/*/src/**/*.{js,vue,ts}',
 ];
 export default tailwindConfig;

package/dist/runtime/types.d.ts

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

package/dist/types.d.mts

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

package/dist/types.d.ts

@@ -1,8 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
 
-import type {  } from './module'
+import type { default as Module } from './module'
 
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-
-
-
-export type { default } from './module'
+export { default } from './module'

package/package.json

@@ -1,25 +1,26 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.8.5",
+  "version": "1.9.1",
   "license": "MIT",
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs",
-      "types": "./dist/types.d.ts"
+      "require": "./dist/module.cjs"
     }
   },
+  "main": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
   "files": [
     "dist"
   ],
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
   "dependencies": {
     "@antify/ui": "^1.0.4",
     "@fortawesome/vue-fontawesome": "^3.0.8",
-    "@nuxt/kit": "^3.9.3",
+    "@nuxt/kit": "^3.13.1",
     "@vueuse/core": "^10.7.2",
     "tailwindcss": "^3.4.10",
     "vue": "^3.4.29"
@@ -27,23 +28,25 @@
   "devDependencies": {
     "@faker-js/faker": "^8.3.1",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@nuxt/eslint-config": "latest",
+    "@nuxt/eslint-config": "^0.4.0",
     "@nuxt/module-builder": "latest",
     "autoprefixer": "^10.4.16",
     "defu": "^6.1.4",
-    "eslint": "latest",
-    "eslint-plugin-storybook": "latest",
-    "nuxt": "^3.9.3",
+    "eslint": "^8.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "nuxt": "^3.13.1",
     "ofetch": "^1.3.3",
     "standard-version": "latest",
-    "typescript": "^5.3.3",
-    "unbuild": "^2.0.0"
+    "typescript": "^5.5.4"
+  },
+  "resolutions": {
+    "@antify/ui-module": "workspace:*"
   },
   "scripts": {
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build && nuxi prepare playground",
+    "dev:prepare": "nuxi prepare playground",
     "release": "standard-version && git push --follow-tags && pnpm publish --access public"
   }
 }

package/dist/runtime/composables/useUiClient.mjs

@@ -1,60 +0,0 @@
-import { useNuxtApp, navigateTo, createError, ref } from "#imports";
-import { watchOnce } from "@vueuse/core";
-export async function handleNotFoundResponse(response, fallbackUrl) {
-  if (response._data?.notFound) {
-    useNuxtApp().$uiModule.toaster.toastError("Entity not found. Maybe an other user deleted it.");
-    await navigateTo(fallbackUrl);
-  }
-}
-export 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 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;
-}
-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);
-}
-export const useUiClient = () => {
-  return {
-    handler: {
-      handleNotFoundResponse,
-      handleResponseError
-    },
-    utils: {
-      isFormDisabled,
-      createSkeleton,
-      queryChanged
-      // createFlickerProtectRef
-    }
-  };
-};