@inzombieland/nuxt-common 0.0.3 → 0.0.5

package/runtime/packages/layer-manager/LayerComponent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onMounted, ref, resolveComponent } from "vue"
+import type { ActiveLayer } from "./types"
+
+const props = defineProps<{ layer: ActiveLayer }>()
+const emit = defineEmits(["closeLayer", "closeAllLayers"])
+const layerRef = ref<HTMLElement | null>(null)
+
+const closeLayer = () => emit("closeLayer", props.layer.layerId)
+const closeAllLayers = () => emit("closeAllLayers")
+
+onMounted(() => {
+	// eslint-disable-next-line vue/no-mutating-props
+	props.layer.closeLayer = () => closeLayer()
+
+	setTimeout(() => {
+		layerRef.value?.classList.add("open")
+		const layoutElement = document.querySelector("#layout")
+		if (layoutElement) {
+			layoutElement.classList.remove("layer-hide")
+			layoutElement.classList.add("layer-open")
+			document.documentElement.style.overflow = "hidden auto"
+			document.body.style.overflow = "hidden auto"
+		}
+	}, 50)
+})
+
+const component = resolveComponent(props.layer.component)
+if (typeof component === "string") {
+	closeLayer()
+}
+</script>
+
+<template>
+	<article
+		v-if="typeof component !== 'string'"
+		:id="layer.layerId"
+		ref="layerRef"
+		class="layer"
+		:data-layer="layer.name"
+	>
+		<button
+			type="button"
+			class="layer-close"
+			@click="closeLayer"
+		/>
+		<component
+			:is="component"
+			:search-params="layer.searchParams"
+			@close-layer="closeLayer"
+			@close-all-layers="closeAllLayers"
+		/>
+	</article>
+</template>

package/runtime/packages/layer-manager/LayersProvider.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import LayerComponent from "./LayerComponent.vue"
+import { useLayerActions } from "./use-layer-actions"
+import type { ActiveLayer } from "./types"
+
+const router = useRouter()
+const route = useRoute()
+const layerActions = useLayerActions()
+const reactiveHistory = computed(() => ({ path: route.path, query: route.query }))
+const history = ref({ path: route.path, query: route.query })
+const activeLayers = ref<ActiveLayer[]>([])
+const pageTitle = ref("")
+const layersLimit = 5
+
+function getLayerHash(s: string): string {
+	const hash = s.split("").reduce((a, b) => {
+		a = (a << 5) - a + b.charCodeAt(0)
+		return a & a
+	}, 0)
+	return Math.abs(hash).toString()
+}
+
+const createLayer = (name: string): ActiveLayer => {
+	return {
+		name,
+		layerId: getLayerHash(name),
+		component: name.charAt(0).toUpperCase() + name.slice(1),
+		searchParams: history.value.query || {},
+		closeLayer: typeof window !== "undefined" ? () => {} : undefined,
+	}
+}
+
+const resolveLayer = (layerName: string, options: { isCloseOtherLayers: boolean } = { isCloseOtherLayers: false }) => {
+	const activeLayer = activeLayers.value.find(({ name }) => name === layerName)
+	if (activeLayer) {
+		// слой с таким именем уже есть
+		const layer = activeLayers.value.splice(activeLayers.value.indexOf(activeLayer), 1)[0]
+		if (layer) {
+			activeLayers.value.push(layer)
+		}
+	} else {
+		if (options.isCloseOtherLayers) {
+			activeLayers.value = []
+		}
+		if (activeLayers.value.length >= layersLimit) {
+			activeLayers.value.shift()
+		}
+		activeLayers.value.push(createLayer(layerName))
+	}
+}
+
+const closeLayer = (layerId: string) => {
+	if (typeof document !== "undefined") {
+		// eslint-disable-next-line unicorn/prefer-query-selector
+		const layerElement = document.getElementById(layerId)
+		if (layerElement) {
+			layerElement.classList.remove("open")
+			layerElement.classList.add("hide")
+		}
+		const layoutElement = document.querySelector("#layout")
+		if (layoutElement) {
+			layoutElement.classList.remove("layer-open")
+			layoutElement.classList.add("layer-hide")
+			document.documentElement.style.removeProperty("overflow")
+			document.body.style.removeProperty("overflow")
+		}
+	}
+
+	setTimeout(() => {
+		if (!activeLayers.value.some(s => s.layerId === layerId)) {
+			return
+		}
+
+		activeLayers.value = activeLayers.value.filter(s => s.layerId !== layerId)
+
+		const layer = activeLayers.value.at(-1)
+		const queryLayer = layer ? { layer: layer.name, ...layer.searchParams } : {}
+		const query = { ...(history.value.query?.layer ? queryLayer : {}) }
+
+		router.push({ path: history.value.path, query })
+		if (activeLayers.value.length === 0 && typeof document !== "undefined") {
+			document.title = pageTitle.value
+		}
+	}, 400)
+}
+
+const closeAllLayers = () => {
+	activeLayers.value = []
+	router.push(history.value.path)
+	document.title = pageTitle.value
+}
+
+watch(reactiveHistory, (value, prevValue) => {
+	history.value = value
+	if (value.path !== prevValue.path) {
+		if (value.query.layer) {
+			resolveLayer(value.query.layer.toString(), { isCloseOtherLayers: true })
+		} else if (activeLayers.value.length > 0) {
+			activeLayers.value = []
+			document.title = pageTitle.value
+		}
+	} else if (value.query.layer) {
+		if (value.query.layer !== prevValue.query.layer) {
+			resolveLayer(value.query.layer.toString())
+		} else {
+			const activeLayer = activeLayers.value.find(({ name }) => name === value.query.layer)
+			if (activeLayer) {
+				activeLayer.searchParams = value.query
+			}
+		}
+	} else if (activeLayers.value.length > 0) {
+		activeLayers.value = []
+		document.title = pageTitle.value
+	}
+})
+
+onMounted(() => {
+	pageTitle.value = document.title
+
+	layerActions.value = {
+		initialized: true,
+		open: (layerName: string, params?: { [p: string]: any }) => {
+			router.push({ path: history.value.path, query: { layer: layerName, ...(params ?? {}) } })
+		},
+		getLayer: (layerName: string) => {
+			return activeLayers.value.find(({ name }) => name === layerName)
+		},
+		closeAllLayers: () => {
+			closeAllLayers()
+		},
+	}
+
+	window.addEventListener("keyup", event => {
+		if (event.key === "Escape") {
+			const lastLayer = activeLayers.value.at(-1)
+			if (lastLayer) {
+				closeLayer(lastLayer.layerId)
+			}
+		}
+	})
+})
+
+if (!layerActions.value?.initialized && history.value.query?.layer) {
+	resolveLayer(history.value.query.layer.toString())
+}
+</script>
+
+<script lang="ts">
+export const useLayerManager = () => {
+	const layerActions = useLayerActions()
+	return {
+		open: (layerName: string, params?: { [p: string]: any }) => layerActions.value?.open?.(layerName, params),
+		getLayer: (layerName: string) => layerActions.value?.getLayer?.(layerName),
+		closeAllLayers: () => layerActions.value?.closeAllLayers?.(),
+	}
+}
+</script>
+
+<template>
+	<div>
+		<LayerComponent
+			v-for="layer of activeLayers"
+			:key="layer.layerId"
+			:layer="layer"
+			@close-layer="closeLayer"
+			@close-all-layers="closeAllLayers"
+		/>
+	</div>
+</template>

package/runtime/packages/layer-manager/index.d.ts

@@ -0,0 +1,2 @@
+import LayerManager, { useLayerManager } from "./LayersProvider.vue";
+export { LayerManager, useLayerManager };

package/runtime/packages/layer-manager/index.mjs

@@ -0,0 +1,2 @@
+import LayerManager, { useLayerManager } from "./LayersProvider.vue";
+export { LayerManager, useLayerManager };

package/runtime/packages/layer-manager/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@inzombieland/layer-manager",
+  "version": "1.15.0",
+  "type": "module",
+  "license": "ISC",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/runtime/packages/layer-manager/types.d.ts

@@ -0,0 +1,8 @@
+import type { LocationQuery } from "vue-router";
+export type ActiveLayer = {
+    readonly name: string;
+    readonly layerId: string;
+    readonly component: string;
+    searchParams: LocationQuery;
+    closeLayer: (() => void) | undefined;
+};

package/runtime/packages/layer-manager/use-layer-actions.d.ts

@@ -0,0 +1,23 @@
+import type { ActiveLayer } from "./types";
+export declare const useLayerActions: () => import("vue").Ref<{
+    initialized: boolean;
+    open?: ((layerName: string, params?: {
+        [p: string]: any;
+    }) => void) | undefined;
+    getLayer?: ((layerName: string) => ActiveLayer | undefined) | undefined;
+    closeAllLayers?: (() => void) | undefined;
+}, {
+    initialized: boolean;
+    open?: (layerName: string, params?: {
+        [p: string]: any;
+    }) => void;
+    getLayer?: (layerName: string) => ActiveLayer | undefined;
+    closeAllLayers?: () => void;
+} | {
+    initialized: boolean;
+    open?: ((layerName: string, params?: {
+        [p: string]: any;
+    }) => void) | undefined;
+    getLayer?: ((layerName: string) => ActiveLayer | undefined) | undefined;
+    closeAllLayers?: (() => void) | undefined;
+}>;

package/runtime/packages/layer-manager/use-layer-actions.mjs

@@ -0,0 +1,5 @@
+import { ref } from "vue";
+const layerActions = ref({ initialized: false });
+export const useLayerActions = () => {
+  return layerActions;
+};

package/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<{}> & import("#app").ObjectPlugin<{}>;
+export default _default;

package/runtime/plugin.mjs

@@ -0,0 +1,42 @@
+import { useLocalStorage } from "@vueuse/core";
+import { addRouteMiddleware, defineNuxtPlugin } from "#app";
+import { useRequestHeaders, useRuntimeConfig, useState } from "#imports";
+import { fetch, getUser } from "./api/index.mjs";
+import { authMiddleware, guestMiddleware, localeMiddleware } from "./middleware/index.mjs";
+import { flush, setToken, setUser } from "./packages/api/api-client.mjs";
+import bus from "./packages/api/bus.mjs";
+const useAuth = () => {
+  return useState("auth", () => null);
+};
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const auth = useAuth();
+  const runtimeConfig = useRuntimeConfig();
+  if (runtimeConfig.public.ssr && import.meta.server || !runtimeConfig.public.ssr) {
+    flush();
+    if (import.meta.server) {
+      auth.value = await fetch("/account/0/authcheck", {
+        baseURL: "/",
+        headers: useRequestHeaders(["cookie"])
+      });
+    } else {
+      auth.value = await getUser();
+    }
+  }
+  if (auth.value) {
+    setToken(auth.value.token);
+    setUser(auth.value.user);
+  }
+  nuxtApp.hook("app:beforeMount", () => {
+    auth.value = null;
+    bus.subscribe("user:onUpdated", (value) => {
+      const loggedIn = useLocalStorage("lin", "no");
+      loggedIn.value = value ? "yes" : "no";
+    });
+  });
+  addRouteMiddleware("auth", authMiddleware, { global: false });
+  addRouteMiddleware("guest", guestMiddleware, { global: false });
+  addRouteMiddleware("locale", localeMiddleware, { global: true });
+  return {
+    provide: {}
+  };
+});

package/runtime/plugins/device.d.ts

@@ -0,0 +1,136 @@
+export interface Device {
+    mobile: () => boolean;
+    tablet: () => boolean;
+    desktop: () => boolean;
+    ios: () => boolean;
+    macos: () => boolean;
+    ipad: () => boolean;
+    iphone: () => boolean;
+    ipod: () => boolean;
+    android: () => boolean;
+    androidPhone: () => boolean;
+    androidTablet: () => boolean;
+    blackberry: () => boolean;
+    blackberryPhone: () => boolean;
+    blackberryTablet: () => boolean;
+    windows: () => boolean;
+    windowsPhone: () => boolean;
+    windowsTablet: () => boolean;
+    fxos: () => boolean;
+    fxosPhone: () => boolean;
+    fxosTablet: () => boolean;
+    meego: () => boolean;
+    television: () => boolean;
+    mobileApp: () => boolean;
+    iosMobileApp: () => boolean;
+    androidMobileApp: () => boolean;
+    tabletApp: () => boolean;
+    iosTabletApp: () => boolean;
+    androidTabletApp: () => boolean;
+    landscape: () => boolean;
+    portrait: () => boolean;
+    onChangeOrientation: (cb: (newOrientation: DeviceOrientation) => void) => void;
+    noConflict: (currentDevice: Device) => void;
+    type: DeviceType;
+    orientation: DeviceOrientation;
+    os: DeviceOs;
+    osName: () => string;
+}
+export type DeviceType = "mobile" | "tablet" | "desktop" | "unknown";
+export type DeviceOrientation = "landscape" | "portrait" | "unknown";
+export type DeviceOs = "ios" | "macos" | "iphone" | "ipad" | "ipod" | "android" | "blackberry" | "windows" | "fxos" | "meego" | "television" | "unknown";
+declare const _default: import("#app").Plugin<{
+    device: {
+        mobileApp: () => boolean;
+        iosMobileApp: () => boolean;
+        androidMobileApp: () => boolean;
+        tabletApp: () => boolean;
+        iosTabletApp: () => boolean;
+        androidTabletApp: () => boolean;
+        getInfo: () => Promise<string>;
+        mobile: () => boolean;
+        tablet: () => boolean;
+        desktop: () => boolean;
+        ios: () => boolean;
+        macos: () => boolean;
+        ipad: () => boolean;
+        iphone: () => boolean;
+        ipod: () => boolean;
+        android: () => boolean;
+        androidPhone: () => boolean;
+        androidTablet: () => boolean;
+        blackberry: () => boolean;
+        blackberryPhone: () => boolean;
+        blackberryTablet: () => boolean;
+        windows: () => boolean;
+        windowsPhone: () => boolean;
+        windowsTablet: () => boolean;
+        fxos: () => boolean;
+        fxosPhone: () => boolean;
+        fxosTablet: () => boolean;
+        meego: () => boolean;
+        television: () => boolean;
+        landscape: () => boolean;
+        portrait: () => boolean;
+        onChangeOrientation: (cb: (newOrientation: DeviceOrientation) => void) => void;
+        noConflict: (currentDevice: Device) => void;
+        type: DeviceType;
+        orientation: DeviceOrientation;
+        os: DeviceOs;
+        osName: () => string;
+    };
+}> & import("#app").ObjectPlugin<{
+    device: {
+        mobileApp: () => boolean;
+        iosMobileApp: () => boolean;
+        androidMobileApp: () => boolean;
+        tabletApp: () => boolean;
+        iosTabletApp: () => boolean;
+        androidTabletApp: () => boolean;
+        getInfo: () => Promise<string>;
+        mobile: () => boolean;
+        tablet: () => boolean;
+        desktop: () => boolean;
+        ios: () => boolean;
+        macos: () => boolean;
+        ipad: () => boolean;
+        iphone: () => boolean;
+        ipod: () => boolean;
+        android: () => boolean;
+        androidPhone: () => boolean;
+        androidTablet: () => boolean;
+        blackberry: () => boolean;
+        blackberryPhone: () => boolean;
+        blackberryTablet: () => boolean;
+        windows: () => boolean;
+        windowsPhone: () => boolean;
+        windowsTablet: () => boolean;
+        fxos: () => boolean;
+        fxosPhone: () => boolean;
+        fxosTablet: () => boolean;
+        meego: () => boolean;
+        television: () => boolean;
+        landscape: () => boolean;
+        portrait: () => boolean;
+        onChangeOrientation: (cb: (newOrientation: DeviceOrientation) => void) => void;
+        noConflict: (currentDevice: Device) => void;
+        type: DeviceType;
+        orientation: DeviceOrientation;
+        os: DeviceOs;
+        osName: () => string;
+    };
+}>;
+export default _default;
+declare module "#app" {
+    interface NuxtApp {
+        $device: Device;
+        $mobileApp: {
+            getInfo: () => Promise<{
+                name: string;
+            }>;
+            changeTheme: ({ theme }: {
+                theme: string;
+            }) => Promise<void>;
+        };
+    }
+}

package/runtime/plugins/device.mjs

@@ -0,0 +1,29 @@
+import { defineNuxtPlugin } from "#app";
+import { useNuxtApp, useRuntimeConfig } from "#imports";
+import { device as currentDevice } from "../packages/api/helpers/index.mjs";
+export default defineNuxtPlugin(() => {
+  const device = currentDevice;
+  const runtimeConfig = useRuntimeConfig();
+  const isMobileApp = Boolean(runtimeConfig.public.isMobileApp);
+  return {
+    provide: {
+      device: {
+        ...device,
+        mobileApp: () => isMobileApp && device.mobile(),
+        iosMobileApp: () => isMobileApp && device.mobile() && device.ios(),
+        androidMobileApp: () => isMobileApp && device.androidPhone(),
+        tabletApp: () => isMobileApp && device.tablet(),
+        iosTabletApp: () => isMobileApp && device.tablet() && device.ios(),
+        androidTabletApp: () => isMobileApp && device.androidTablet(),
+        getInfo: async () => {
+          const { $mobileApp } = useNuxtApp();
+          if (isMobileApp && $mobileApp && typeof $mobileApp.getInfo === "function") {
+            const device2 = await $mobileApp.getInfo();
+            return device2.name;
+          }
+          return device.osName();
+        }
+      }
+    }
+  };
+});

package/runtime/plugins/otp-input.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/runtime/plugins/otp-input.mjs

@@ -0,0 +1,5 @@
+import VOtpInput from "vue3-otp-input";
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("OtpInput", VOtpInput);
+});

package/runtime/plugins/sanitize-html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/runtime/plugins/sanitize-html.mjs

@@ -0,0 +1,90 @@
+import { transform } from "ultrahtml";
+import sanitize from "ultrahtml/transformers/sanitize";
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("sanitize-html", async (el, binding) => {
+    if (binding.value !== binding.oldValue) {
+      el.innerHTML = await transform(binding.value, [
+        sanitize({
+          allowElements: [
+            "address",
+            "article",
+            "aside",
+            "footer",
+            "header",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "hgroup",
+            "main",
+            "nav",
+            "section",
+            "blockquote",
+            "dd",
+            "div",
+            "dl",
+            "dt",
+            "figcaption",
+            "figure",
+            "hr",
+            "li",
+            "main",
+            "ol",
+            "p",
+            "pre",
+            "ul",
+            "a",
+            "abbr",
+            "b",
+            "bdi",
+            "bdo",
+            "br",
+            "cite",
+            "code",
+            "data",
+            "dfn",
+            "em",
+            "i",
+            "kbd",
+            "mark",
+            "q",
+            "rb",
+            "rp",
+            "rt",
+            "rtc",
+            "ruby",
+            "s",
+            "samp",
+            "small",
+            "span",
+            "strong",
+            "sub",
+            "sup",
+            "time",
+            "u",
+            "var",
+            "wbr",
+            "caption",
+            "col",
+            "colgroup",
+            "table",
+            "tbody",
+            "td",
+            "tfoot",
+            "th",
+            "thead",
+            "tr",
+            "img"
+          ],
+          allowAttributes: {
+            a: ["href", "name", "target"],
+            img: ["src", "srcset", "alt", "title", "width", "height", "loading"]
+          }
+        })
+      ]);
+    }
+  });
+});

package/runtime/plugins/sanitize-url.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/runtime/plugins/sanitize-url.mjs

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from "#app";
+import { sanitizeUrl } from "../thirdparty/sanitize-url/index.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("sanitize-url", (el, binding) => {
+    if (binding.value !== binding.oldValue) {
+      el.href = sanitizeUrl(binding.value);
+    }
+  });
+});

package/runtime/server/middleware/basic-auth.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, void>;
+export default _default;

package/runtime/server/middleware/basic-auth.mjs

@@ -0,0 +1,34 @@
+import { Buffer } from "node:buffer";
+import { defineEventHandler } from "h3";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler((event) => {
+  let basicAuthEnabled = false;
+  let basicAuthUsers;
+  if (import.meta.server) {
+    basicAuthEnabled = useRuntimeConfig().basicAuthEnabled ?? false;
+    basicAuthUsers = useRuntimeConfig().basicAuthUsers ?? [];
+  }
+  const config = {
+    enabled: basicAuthEnabled,
+    users: basicAuthUsers ?? "",
+    deniedRoutes: ["/", "/en", "/ru"]
+  };
+  if (!config.enabled || !config.users?.length || !config.deniedRoutes.includes(event.node.req?.url ?? "")) {
+    return;
+  }
+  let authenticated = false;
+  const credentials = event.node.req.headers?.authorization?.split(" ")[1];
+  if (credentials) {
+    const [username, password] = Buffer.from(credentials, "base64").toString("ascii").split(":");
+    const users = Array.isArray(config.users) ? config.users : config.users.split(",").map((user) => {
+      const [username2, password2] = user.split(":");
+      return { username: username2, password: password2 };
+    });
+    authenticated = users.some((user) => user.username === username && user.password === password);
+  }
+  if (!authenticated) {
+    event.node.res.setHeader("WWW-Authenticate", "Basic realm='Secure Area'");
+    event.node.res.statusCode = 401;
+    event.node.res.end("Access denied");
+  }
+});

package/runtime/thirdparty/helpers/index.d.mts

@@ -0,0 +1,5 @@
+export namespace cookieHelper {
+    export { splitCookiesString };
+}
+declare function splitCookiesString(cookiesString: any): any[];
+export {};

package/runtime/thirdparty/helpers/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    splitCookiesString: typeof splitCookiesString;
+};
+
+declare function splitCookiesString(cookiesString: string): (string & any[]) | string[];
+
+export { _default as cookieHelper };