@anweb/nuxt-ancore 1.14.3 → 1.15.0

package/dist/module.json

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

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

@@ -0,0 +1,19 @@
+<script setup>
+import { useScrollLock } from "@vueuse/core";
+import { watch } from "vue";
+import { useAnDialogs } from "#imports";
+import { AnDialogsItem } from "#components";
+const Dialogs = useAnDialogs();
+const isLocked = useScrollLock(window);
+watch(() => Dialogs.items.length, (value) => {
+  isLocked.value = !!value;
+});
+</script>
+
+<template>
+	<AnDialogsItem
+		v-for="dialog of Dialogs.items"
+		:key="dialog.id"
+		:dialog="dialog"
+	/>
+</template>

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

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

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

@@ -0,0 +1,81 @@
+<script setup>
+import { computed, ref, onMounted } from "vue";
+import {
+  onClickOutside,
+  useSwipe,
+  useElementSize,
+  useScroll
+} from "@vueuse/core";
+import { useAnDialogs, useTemplateRef } from "#imports";
+const props = defineProps({
+  dialog: { type: Object, required: true }
+});
+const Dialogs = useAnDialogs();
+const refDialog = useTemplateRef("refDialog");
+let Scroll;
+let Swipe;
+let ElementSize;
+const top = ref(0);
+const active = ref(false);
+const target = ref(null);
+let raf = 0;
+const onSwipeStart = () => {
+  active.value = canSwipe.value;
+};
+const onSwipe = () => {
+  if (!active.value) return;
+  cancelAnimationFrame(raf);
+  raf = requestAnimationFrame(() => {
+    top.value = Math.max(0, -Swipe.lengthY.value);
+  });
+};
+const onSwipeEnd = () => {
+  if (Math.abs(top.value) > ElementSize.height.value / 2) {
+    Dialogs.close(props.dialog);
+    return;
+  }
+  top.value = 0;
+  active.value = false;
+};
+const config = computed(() => {
+  return {
+    ...props.dialog,
+    ...refDialog.value?.config ? refDialog.value.config : {}
+  };
+});
+const canSwipe = computed(() => Scroll.arrivedState.top && !config.value.fullscreen);
+onMounted(() => {
+  target.value = refDialog.value?.$el || null;
+  if (!config.value.fullscreen) {
+    onClickOutside(refDialog, () => Dialogs.close(props.dialog));
+  }
+  Swipe = useSwipe(target, {
+    onSwipeStart,
+    onSwipe,
+    onSwipeEnd,
+    threshold: 0
+  });
+  Scroll = useScroll(target);
+  ElementSize = useElementSize(target);
+});
+</script>
+
+<template>
+	<div
+		class="dialog -flex -flex__column"
+		:class="[{ '-fullscreen': config.fullscreen }, config.class]"
+	>
+		<component
+			ref="refDialog"
+			:is="props.dialog.component"
+			:params="props.dialog.params"
+			class="dialog__component"
+			:style="{ transform: `translateY(${top}px)` }"
+			@close="Dialogs.close(props.dialog)"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.dialog{--an-dialogs-background:inherit;--an-dialogs-close:inherit;--an-dialogs-backdrop-filter:inherit;box-sizing:border-box;height:100%;left:0;position:fixed;top:0;width:100%;z-index:200}.dialog:not(.-fullscreen){align-items:center;backdrop-filter:var(--an-dialogs-backdrop-filter,blur(6px));-webkit-backdrop-filter:var(--an-dialogs-backdrop-filter,blur(6px));background:var(--an-dialogs-background,rgba(0,0,0,.3));display:flex;justify-content:center}@media (width < 768px){.dialog:not(.-fullscreen) .dialog__component{margin-top:auto;max-height:calc(100vh - 48px);position:relative;width:100%}.dialog:not(.-fullscreen) .dialog__component:before{background:var(--an-dialogs-close,rgba(0,0,0,.5));border-radius:100px;content:"";display:block;height:4px;margin:10px auto;width:50px}}@media (width >= 768px){.dialog:not(.-fullscreen) .dialog__component{margin:auto}}.dialog.-fullscreen .dialog__component{height:100%;width:100%}.dialog__component{box-sizing:border-box;overflow-y:scroll;position:relative;-ms-overflow-style:none;scrollbar-width:none}
+</style>

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

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

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

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

package/dist/runtime/composables/useAnDialogs.js

@@ -0,0 +1,31 @@
+import { v4 } from "uuid";
+import { useState } from "#app";
+import { markRaw } from "vue";
+export const useAnDialogs = () => {
+  const StateDialogs = useState("an-dialogs", () => []);
+  const open = (component, params = {}, config = {}) => {
+    const data = {
+      ...config,
+      id: v4(),
+      component: markRaw(component),
+      params
+    };
+    StateDialogs.value.push(data);
+    return data;
+  };
+  const close = (dialog) => {
+    StateDialogs.value.splice(StateDialogs.value.indexOf(dialog), 1);
+    if (dialog.onClose) dialog.onClose();
+  };
+  const closeAll = () => {
+    while (StateDialogs.value.length) {
+      StateDialogs.value[0] && close(StateDialogs.value[0]);
+    }
+  };
+  return {
+    open,
+    close,
+    closeAll,
+    items: StateDialogs.value
+  };
+};

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

@@ -0,0 +1,9 @@
+import type { Component } from '@nuxt/schema';
+export interface TDialog {
+    id: string;
+    component: Component | Function;
+    params: Record<string, unknown>;
+    fullscreen?: boolean;
+    class?: string;
+    onClose?: () => void;
+}

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

@@ -1,5 +1,6 @@
 export * from './api.js';
 export * from './argument.js';
+export * from './dialogs.js';
 export * from './global.js';
 export * from './infiniteScroll.js';
 export * from './responseList.js';

package/dist/runtime/types/index.js

@@ -1,5 +1,6 @@
 export * from "./api.js";
 export * from "./argument.js";
+export * from "./dialogs.js";
 export * from "./global";
 export * from "./infiniteScroll.js";
 export * from "./responseList.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anweb/nuxt-ancore",
-	"version": "1.14.3",
+	"version": "1.15.0",
 	"description": "AnCore Nuxt module",
 	"repository": "https://github.com/ANLTD/ancore",
 	"license": "MIT",
@@ -36,7 +36,8 @@
 		"@vueuse/core": "^14.1.0",
 		"@vueuse/integrations": "^14.1.0",
 		"async-validator": "^4.2.5",
-		"i18next": "^25.6.3"
+		"i18next": "^25.6.3",
+		"uuid": "^13.0.0"
 	},
 	"devDependencies": {
 		"@nuxt/devtools": "^3.1.1",