@anweb/nuxt-ancore 1.15.11 → 1.16.1

package/README.md

@@ -4,33 +4,51 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-My new Nuxt module for doing amazing things.
+A set of composables, components and utilities for Nuxt to handle common tasks: data fetching with SSR, paginated lists, form validation, dialogs, i18n and more.
 
-- [✨  Release Notes](/CHANGELOG.md)
-
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
+## Setup
 
 ```bash
 npm i @anweb/nuxt-ancore
 ```
 
-Then, add it to your nuxt.config.ts:
 ```ts
 export default defineNuxtConfig({
-   modules: ['@anweb/nuxt-ancore']
+  modules: ['@anweb/nuxt-ancore']
 })
 ```
 
+## Composables
+
+| Name | Description |
+|---|---|
+| `useAnData` | Data fetching with SSR/CSR support, URL params, query and auto-refresh |
+| `useAnList` | Paginated lists with infinite scroll, filters and reverse mode |
+| `useAnForm` | Form state, validation (async-validator), history and diff tracking |
+| `useAnDialogs` | Dynamic dialogs: open, close, closeAll, swipe-to-dismiss |
+| `useAnI18n` | i18next integration with per-component namespaces and language switching |
+
+## Components
+
+| Name | Description |
+|---|---|
+| `AnTab` | Headless tab with lazy rendering and state preservation via `display: none` |
+| `AnDropdown` | Dropdown with CSS Anchor Positioning, teleport and ARIA |
+
+## Utilities
+
+| Name | Description |
+|---|---|
+| `toQuery` | Converts an object to a URL query string, filtering out null/undefined |
+| `asyncInit` | SSR-aware init helper: awaits during SSR, fires without await on CSR |
+| `coreApi` | Core API wrapper around `$fetch` with typed responses |
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
+[npm-version-src]: https://img.shields.io/npm/v/@anweb/nuxt-ancore/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@anweb/nuxt-ancore
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/my-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/@anweb/nuxt-ancore.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@anweb/nuxt-ancore
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "AnCore",
   "configKey": "ancore",
-  "version": "1.15.11",
+  "version": "1.16.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/An/Dialogs/Dialogs.vue

@@ -3,7 +3,7 @@ import { useScrollLock } from "@vueuse/core";
 import { useAnDialogs } from "#imports";
 import { AnDialogsItem } from "#components";
 const Dialogs = useAnDialogs();
-const isLocked = useScrollLock(window);
+const isLocked = useScrollLock(import.meta.client ? window : null);
 const onAnimation = () => {
   isLocked.value = !!Dialogs.items.length;
 };
@@ -11,8 +11,10 @@ const onAnimation = () => {
 
 <template>
 	<transition-group
+		v-bind="$attrs"
 		name="an-dialogs"
 		tag="div"
+		aria-live="polite"
 
 		@before-enter="onAnimation"
 		@after-leave="onAnimation"

package/dist/runtime/components/An/Dialogs/Item.vue

@@ -19,6 +19,7 @@ const top = ref(0);
 const active = ref(false);
 const target = ref(null);
 let raf = 0;
+let mouseDownOnBackdrop = false;
 const onSwipeStart = () => {
   active.value = canSwipe.value;
 };
@@ -50,7 +51,9 @@ const canSwipe = computed(() => Scroll.arrivedState.top && !config.value.fullscr
 onMounted(() => {
   target.value = refDialog.value?.$el || null;
   if (!config.value.fullscreen) {
-    onClickOutside(refDialog, () => Dialogs.close(props.dialog));
+    onClickOutside(refDialog, () => Dialogs.close(props.dialog), {
+      ignore: [".an-dialog"]
+    });
   }
   Swipe = useSwipe(target, {
     onSwipeStart,
@@ -65,8 +68,14 @@ onMounted(() => {
 
 <template>
 	<div
+		v-bind="$attrs"
+		role="dialog"
+		aria-modal="true"
 		class="an-dialog -flex -flex__column"
 		:class="[{ '-fullscreen': config.fullscreen }, config.class]"
+		@mousedown.self="mouseDownOnBackdrop = true"
+		@click.self="mouseDownOnBackdrop && !config.fullscreen && Dialogs.close(props.dialog);
+  mouseDownOnBackdrop = false"
 	>
 		<component
 			ref="refDialog"

package/dist/runtime/components/An/Dropdown.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { v4 } from "uuid";
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+const props = defineProps({
+  area: { type: String, required: false }
+});
+const id = ref();
+const state = ref(false);
+const refTarget = useTemplateRef("refTarget");
+const toggle = (value) => {
+  state.value = value !== void 0 ? value : !state.value;
+};
+const close = () => {
+  toggle(false);
+};
+const onKeydown = (e) => {
+  if (e.key === "Escape" && state.value) close();
+};
+const area = computed(() => {
+  return props.area || "bottom span-right";
+});
+const name = computed(() => {
+  return id.value ? `--an-dropdown-${id.value}` : "";
+});
+const menuId = computed(() => id.value ? `an-dropdown-menu-${id.value}` : void 0);
+onMounted(() => {
+  id.value = v4();
+});
+onClickOutside(refTarget, close);
+useEventListener(document, "keydown", onKeydown);
+defineExpose({ toggle, close });
+</script>
+
+<template>
+	<div ref="refTarget" class="an-dropdown__button" v-bind="$attrs">
+		<div
+			:aria-expanded="state"
+			:aria-controls="menuId"
+			aria-haspopup="true"
+		>
+			<slot name="button" :toggle="toggle" />
+		</div>
+
+		<teleport to="body">
+			<div
+				v-show="state"
+				:id="menuId"
+				role="menu"
+				class="an-dropdown__menu"
+			>
+				<slot name="menu" :close="close" />
+			</div>
+		</teleport>
+	</div>
+</template>
+
+<style scoped>
+.an-dropdown__button{anchor-name:v-bind(name)}.an-dropdown__menu{position:fixed;position-anchor:v-bind(name);position-area:v-bind(area);position-try-fallbacks:top span-right,bottom span-left,top span-left;z-index:1000}
+</style>

package/dist/runtime/components/An/Dropdown.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/An/Tab.js

@@ -30,7 +30,7 @@ const Tab = defineComponent({
               display: "none"
             }
           },
-          vnode.children
+          vnode.children ?? void 0
         )
       );
     };

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

@@ -12,10 +12,10 @@ interface TUseAnData<TData, TError> {
     refresh: () => void;
     config: Ref<TConfig>;
     params: TConfig['params'];
-    data: ComputedRef<TData | undefined>;
-    status: ComputedRef<AsyncDataRequestStatus>;
+    data: Readonly<Ref<TData | undefined>>;
+    status: Readonly<Ref<AsyncDataRequestStatus>>;
     loading: ComputedRef<boolean>;
-    error: ComputedRef<TError | undefined>;
+    error: Readonly<Ref<TError | undefined>>;
 }
-export declare const useAnData: <TData = unknown, TError = unknown>(initConfig: Omit<TConfig, "params"> & Partial<TConfig["params"]>) => TUseAnData<TData, TError>;
+export declare const useAnData: <TData = unknown, TError = unknown>(initConfig: Omit<TConfig, "params"> & Partial<Pick<TConfig, "params">>) => TUseAnData<TData, TError>;
 export {};

package/dist/runtime/composables/useAnData.js

@@ -8,14 +8,15 @@ export const useAnData = (initConfig) => {
   const status = ref("idle");
   const isMounted = ref(false);
   const time = ref(0);
+  const fetchData = () => userApi(
+    path.value.url,
+    { method: "GET", ...config.value.apiConfig || {} }
+  );
   const init = async () => {
     if (isMounted.value) {
       const execute = () => {
         status.value = "pending";
-        userApi(
-          path.value.url,
-          { method: "GET", ...config.value.apiConfig || {} }
-        ).then((response) => {
+        fetchData().then((response) => {
           data.value = response;
           nextTick().then(() => {
             status.value = "success";
@@ -25,14 +26,11 @@ export const useAnData = (initConfig) => {
           error.value = e;
         });
       };
-      watch(() => key.value, execute, { immediate: true, deep: true });
+      watch(() => key.value, execute, { immediate: true });
     } else {
       const Data = useAsyncData(
         key,
-        () => userApi(
-          path.value.url,
-          { method: "GET", ...config.value.apiConfig || {} }
-        ),
+        () => fetchData(),
         { immediate: false }
       );
       await Data.execute();

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

@@ -1,6 +1,7 @@
+import { type Component } from 'vue';
 import type { TDialog } from '#ancore/types';
 export declare const useAnDialogs: () => {
-    open: (component: any, params?: Record<string, unknown>, config?: Partial<TDialog>) => TDialog;
+    open: (component: Component, params?: Record<string, unknown>, config?: Partial<TDialog>) => TDialog;
     close: (dialog: TDialog) => void;
     closeAll: () => void;
     items: TDialog[];

package/dist/runtime/composables/useAnDialogs.js

@@ -14,8 +14,10 @@ export const useAnDialogs = () => {
     return data;
   };
   const close = (dialog) => {
-    StateDialogs.value.splice(StateDialogs.value.indexOf(dialog), 1);
-    if (dialog.onClose) dialog.onClose();
+    const index = StateDialogs.value.indexOf(dialog);
+    if (index === -1) return;
+    StateDialogs.value.splice(index, 1);
+    dialog.onClose?.();
   };
   const closeAll = () => {
     while (StateDialogs.value.length) {

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

@@ -4,7 +4,7 @@ interface TStructureItem<TData> {
     default: TData;
     rules?: RuleItem[];
 }
-export declare const useAnForm: <TForm extends object, TData extends Partial<TForm> | null | (Record<string, any> & Partial<TForm>) = Partial<TForm> | null>(params: Record<keyof TForm, TStructureItem<TForm[keyof TForm]>>, data?: TData) => {
+export declare const useAnForm: <TForm extends object, TData extends Partial<TForm> | null | (Record<string, unknown> & Partial<TForm>) = Partial<TForm> | null>(params: Record<keyof TForm, TStructureItem<TForm[keyof TForm]>>, data?: TData) => {
     state: [TForm] extends [import("vue").Ref<any, any>] ? import("@vue/shared").IfAny<TForm, import("vue").Ref<TForm, TForm>, TForm> : import("vue").Ref<import("vue").UnwrapRef<TForm>, TForm | import("vue").UnwrapRef<TForm>>;
     diff: import("vue").ComputedRef<Partial<TForm>>;
     merge: (data: Partial<TForm>, commit?: true) => void;

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

@@ -1,4 +1,4 @@
-export declare const useAnI18n: (resources?: Record<string, any>) => {
+export declare const useAnI18n: (resources?: Record<string, Record<string, string>>) => {
     lang: string;
     set: (lang: string) => void;
     t: import("i18next").TFunction<["translation", ...string[]], undefined>;

package/dist/runtime/composables/useAnI18n.js

@@ -4,23 +4,33 @@ export const useAnI18n = (resources) => {
   const returnObj = {
     lang: i18next.language,
     set: (lang) => {
-      const config = useRuntimeConfig().public.i18n;
-      if (config?.cookie) {
-        const cookie = useCookie(config?.cookie, {
-          maxAge: 60 * 60 * 24 * 365,
-          path: "/",
-          sameSite: "lax",
-          secure: true
-        });
-        cookie.value = lang;
+      try {
+        i18next.changeLanguage(lang);
+        returnObj.lang = lang;
+        const config = useRuntimeConfig().public.i18n;
+        if (config?.cookie) {
+          const cookie = useCookie(config?.cookie, {
+            maxAge: 60 * 60 * 24 * 365,
+            path: "/",
+            sameSite: "lax",
+            secure: true
+          });
+          cookie.value = lang;
+        }
+      } catch (e) {
+        console.error("[AnI18n] Failed to set language:", e);
       }
     }
   };
   if (!resources) return { t: i18next.t, ...returnObj };
   const ns = JSON.stringify(resources);
   for (const lang in resources) {
-    if (!i18next.hasResourceBundle(lang, ns)) {
-      i18next.addResourceBundle(lang, ns, resources[lang]);
+    try {
+      if (!i18next.hasResourceBundle(lang, ns)) {
+        i18next.addResourceBundle(lang, ns, resources[lang]);
+      }
+    } catch (e) {
+      console.error(`[AnI18n] Failed to add resource bundle for ${lang}:`, e);
     }
   }
   const t = (key, options = {}) => i18next.t(key, { ns: [ns, "translation"], ...options });

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

@@ -1,5 +1,7 @@
 import type { NitroFetchOptions, NitroFetchRequest } from 'nitropack';
+import { type Ref, type ComputedRef } from 'vue';
 import type { TInfiniteScroll } from '#ancore/types';
+import { type AsyncDataRequestStatus } from '#app';
 interface TConfig<TFilter> {
     request: NitroFetchRequest;
     apiConfig?: NitroFetchOptions<string>;
@@ -8,16 +10,17 @@ interface TConfig<TFilter> {
     skipField?: string;
     reverse?: boolean;
 }
-export declare const useAnList: <TData, TFilter extends object = {}>(initConfig: TConfig<TFilter>) => {
+interface TUseAnList<TData, TFilter> {
     init: () => Promise<void>;
     infiniteScroll: (scrollConfig?: TInfiniteScroll) => () => void;
     filter: TFilter;
     params: Record<string, string> | undefined;
     items: TData[];
-    count: import("vue").Ref<number | null, number | null>;
-    inited: import("vue").ComputedRef<boolean>;
-    status: import("vue").ComputedRef<import("nuxt/app").AsyncDataRequestStatus>;
-    loading: import("vue").ComputedRef<boolean>;
-    error: import("vue").ComputedRef<unknown>;
-};
+    count: Ref<number | null>;
+    inited: ComputedRef<boolean>;
+    status: Readonly<Ref<AsyncDataRequestStatus>>;
+    loading: ComputedRef<boolean>;
+    error: Readonly<Ref<unknown | undefined>>;
+}
+export declare const useAnList: <TData, TFilter extends object = {}>(initConfig: TConfig<TFilter>) => TUseAnList<TData, TFilter>;
 export {};

package/dist/runtime/composables/useAnList.js

@@ -12,7 +12,7 @@ export const useAnList = (initConfig) => {
   const refresh = () => {
     if (!data.data.value) return;
     if (!config.value.apiConfig?.query?.[config.value.skipField || "skip"]) {
-      setCount(null);
+      count.value = null;
       items.length = 0;
     }
     if (config.value.reverse) {
@@ -20,10 +20,7 @@ export const useAnList = (initConfig) => {
     } else {
       items.push(...data.data.value.items);
     }
-    setCount(data.data.value.count);
-  };
-  const setCount = (value) => {
-    count.value = value;
+    count.value = data.data.value.count;
   };
   const infiniteScroll = (scrollConfig) => {
     const onLoadMore = scrollConfig?.onLoadMore || (() => {
@@ -31,8 +28,7 @@ export const useAnList = (initConfig) => {
       config.value.filter[config.value.skipField || "skip"] = items.length;
     });
     const canLoadMore = scrollConfig?.options?.canLoadMore || (() => {
-      return (scrollConfig?.canLoadMore?.() ?? true) && inited.value && data.status.value !== "pending" && items.length < (count.value || 0) && // @ts-ignore
-      !!config.value.filter.limit;
+      return (scrollConfig?.canLoadMore?.() ?? true) && inited.value && data.status.value !== "pending" && items.length < (count.value || 0) && !!config.value.filter?.limit;
     });
     const { reset } = useInfiniteScroll(
       scrollConfig?.element || window,

package/dist/runtime/types/dialogs.d.ts

@@ -1,7 +1,7 @@
-import type { Component } from '@nuxt/schema';
+import type { Component } from 'vue';
 export interface TDialog {
     id: string;
-    component: Component | Function;
+    component: Component;
     params: Record<string, unknown>;
     fullscreen?: boolean;
     class?: string;

package/dist/runtime/types/global.d.ts

@@ -14,7 +14,7 @@ declare module 'nuxt/schema' {
 	interface PublicRuntimeConfig {
 		i18n?: InitOptions<unknown> & {
 			cookie?: string
-			resources?: Record<string, { translation: any }>
+			resources?: Record<string, { translation: string | Record<string, unknown> }>
 		}
 	}
 }

package/dist/runtime/types/infiniteScroll.d.ts

@@ -1,4 +1,4 @@
-import type { TArgument } from '#ancore/types';
+import type { TArgument } from './argument.js';
 import type { useInfiniteScroll } from '@vueuse/core';
 export interface TInfiniteScroll {
     element?: TArgument<typeof useInfiniteScroll, 0>;

package/dist/runtime/utils/coreApi.js

@@ -1,10 +1,3 @@
 export const coreApi = (request, opts) => {
-  try {
-    return $fetch(
-      request,
-      { ...opts }
-    );
-  } catch (error) {
-    throw error;
-  }
+  return $fetch(request, { ...opts });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anweb/nuxt-ancore",
-	"version": "1.15.11",
+	"version": "1.16.1",
 	"description": "AnCore Nuxt module",
 	"repository": "https://github.com/ANLTD/ancore",
 	"license": "MIT",