nuxt-outfit 1.0.1

package/README.md

@@ -0,0 +1,89 @@
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: My Module
+- Package name: my-module
+- Description: My new Nuxt module
+-->
+
+# @nuxtjs/outfit
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+
+> My new Nuxt module
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+<!-- Highlight some of the features your module provide here -->
+- ⛰ &nbsp;Foo
+- 🚠 &nbsp;Bar
+- 🌲 &nbsp;Baz
+
+## Quick Setup
+
+1. Add `my-module` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D my-module
+
+# Using yarn
+yarn add --dev my-module
+
+# Using npm
+npm install --save-dev my-module
+```
+
+2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    'my-module'
+  ]
+})
+```
+
+That's it! You can now use My Module in your Nuxt app ✨
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+npm run release
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/my-module

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<{
+    echo: {
+        broadcaster: string;
+        autoConnect: boolean;
+        transports: string[];
+    };
+    serverUrl: null;
+    httpInstance: null;
+}>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "@nuxt/outfit",
+  "configKey": "outfit",
+  "version": "1.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,30 @@
+import { createResolver, defineNuxtModule, addPlugin } from '@nuxt/kit';
+
+const { resolve } = createResolver(import.meta.url);
+const module = defineNuxtModule({
+  meta: {
+    name: "@nuxt/outfit",
+    configKey: "outfit"
+  },
+  defaults: {
+    echo: {
+      broadcaster: "socket.io",
+      autoConnect: false,
+      transports: ["websocket"]
+    },
+    serverUrl: null,
+    httpInstance: null
+  },
+  hooks: {
+    "imports:dirs": (dirs) => {
+      dirs.push(resolve("./runtime/composables"));
+    }
+  },
+  setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.outfit = { echo: options.echo, httpInstance: options.httpInstance };
+    nuxt.options.runtimeConfig.outfit = { serverUrl: options.serverUrl };
+    addPlugin(resolve("./runtime/plugins/echo.client"));
+  }
+});
+
+export { module as default };

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

@@ -0,0 +1,3 @@
+export declare const useDetectOutsideClick: (component: any, callback: any) => {
+    listener: (event: any) => void;
+} | undefined;

package/dist/runtime/composables/useDetectOutsideClick.mjs

@@ -0,0 +1,22 @@
+export const useDetectOutsideClick = (component, callback) => {
+  if (!component) {
+    return;
+  }
+  const listener = (event) => {
+    if (event.target !== component.value && event.composedPath().includes(component.value)) {
+      return;
+    }
+    if (typeof callback === "function") {
+      callback();
+    }
+  };
+  onMounted(() => {
+    window.addEventListener("click", listener);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("click", listener);
+  });
+  return {
+    listener
+  };
+};

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

@@ -0,0 +1,45 @@
+export declare const useEcho: () => {
+    /**
+     * After success connected
+     *
+     * @param callback
+     */
+    connected: (callback: any) => void;
+    /**
+     * Connect to the socket
+     *
+     */
+    connect: () => void;
+    /**
+     * Disconnect from sockets
+     *
+     */
+    disconnect: () => void;
+    /**
+     * Public channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPublic: (channel: any, events: any) => void;
+    /**
+     * Private channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPrivate: (channel: any, events: any) => void;
+    /**
+     * Presence channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPresence: (channel: any, events: any) => void;
+    /**
+     * Leave from channel
+     *
+     * @param channel
+     */
+    leave: (channel: any) => void;
+};

package/dist/runtime/composables/useEcho.mjs

@@ -0,0 +1,73 @@
+export const useEcho = () => {
+  const { $echo } = useNuxtApp();
+  const notificationNamespace = ".Illuminate\\Notifications\\Events\\BroadcastNotificationCreated";
+  const listen = (room, events) => {
+    Object.keys(events).forEach((key) => {
+      room.listen(
+        key === "notification" ? notificationNamespace : key,
+        (payload) => events[key](payload)
+      );
+    });
+  };
+  return {
+    /**
+     * After success connected
+     *
+     * @param callback
+     */
+    connected: (callback) => {
+      $echo.connector.socket.on("connect", () => {
+        callback();
+      });
+    },
+    /**
+     * Connect to the socket
+     *
+     */
+    connect: () => {
+      $echo.connector.socket.connect();
+    },
+    /**
+     * Disconnect from sockets
+     *
+     */
+    disconnect: () => {
+      $echo.connector.socket.disconnect();
+    },
+    /**
+     * Public channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPublic: (channel, events) => {
+      listen($echo.channel(channel), events);
+    },
+    /**
+     * Private channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPrivate: (channel, events) => {
+      listen($echo.private(channel), events);
+    },
+    /**
+     * Presence channel
+     *
+     * @param channel
+     * @param events
+     */
+    joinPresence: (channel, events) => {
+      listen($echo.join(channel), events);
+    },
+    /**
+     * Leave from channel
+     *
+     * @param channel
+     */
+    leave: (channel) => {
+      $echo.leaveChannel(channel);
+    }
+  };
+};

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

@@ -0,0 +1,12 @@
+export declare const useForm: (opts?: {}) => {
+    fields: any;
+    errors: any;
+    repeatArray: (property: any) => void;
+    removeArray: (property: any, index: any) => void;
+    isPending: any;
+    handleSubmit: () => Promise<void>;
+    clearError: (field: any) => void;
+    reset: () => void;
+    onSuccess: (callback: any) => void;
+    onFail: (callback: any) => void;
+};

package/dist/runtime/composables/useForm.mjs

@@ -0,0 +1,102 @@
+import { klona as deepClone } from "klona/full";
+import { unflatten } from "flat";
+import { has, unset } from "lodash-es";
+export const useForm = (opts = {}) => {
+  const httpInstance = useRuntimeConfig().public.outfit.httpInstance;
+  const http = useNuxtApp()?.[httpInstance] ?? $fetch;
+  const snackMessage = useState("snackMessage");
+  const fields = reactive(deepClone(opts?.initialValues));
+  const isPending = ref(false);
+  const errors = ref({});
+  let _onSuccess = null;
+  let _onFail = null;
+  const onSuccess = (callback) => {
+    _onSuccess = callback;
+  };
+  const onFail = (callback) => {
+    _onFail = callback;
+  };
+  const processing = () => {
+    isPending.value = true;
+  };
+  const processed = () => {
+    isPending.value = false;
+  };
+  const reset = () => {
+    Object.assign(fields, deepClone(opts?.initialValues));
+  };
+  const repeatArray = (property) => {
+    if (Array.isArray(fields[property])) {
+      fields[property].push(deepClone(opts?.initialValues[property][0]));
+    }
+  };
+  const removeArray = (property, index) => {
+    if (Array.isArray(fields[property])) {
+      fields[property].splice(index, 1);
+    }
+    if (Array.isArray(errors.value[property])) {
+      errors.value[property].splice(index, 1);
+    }
+  };
+  const setErrors = (exceptions) => {
+    errors.value = exceptions;
+  };
+  const clearErrors = () => {
+    errors.value = {};
+  };
+  const clearError = (field) => {
+    if (has(errors.value, field)) {
+      unset(errors.value, field);
+    }
+  };
+  const handleFail = (fail, isRunCallback = true) => {
+    let messages = {};
+    const brackets = (text) => text.replace(/[[\].]+/g, ".");
+    if (fail.name === "ValidationError") {
+      if (fail.inner.length !== 0) {
+        for (const instance of fail.inner) {
+          messages[brackets(instance.path)] = instance.errors.map((item) => brackets(item));
+        }
+      } else {
+        messages[brackets(fail.path)] = brackets(fail.message);
+      }
+    } else if (fail.name === "FetchError") {
+      if (fail.data?.errors !== void 0) {
+        messages = fail.data.errors;
+      } else if (fail.data?.message !== void 0) {
+        snackMessage.value = fail.data?.message;
+      }
+    }
+    setErrors(unflatten(messages));
+    if (_onFail && isRunCallback) {
+      _onFail(errors);
+    }
+  };
+  const handleSuccess = (hit) => {
+    clearErrors();
+    reset();
+    if (_onSuccess) {
+      _onSuccess(hit);
+    }
+  };
+  const validate = () => {
+    return opts?.schema.validate(deepClone(fields), { abortEarly: false }).then((validated) => http(opts?.action, { method: "POST", body: validated })).then((hit) => handleSuccess(hit)).catch((fail) => handleFail(fail));
+  };
+  const handleSubmit = async () => {
+    processing();
+    await validate();
+    processed();
+  };
+  return {
+    fields,
+    errors,
+    repeatArray,
+    removeArray,
+    isPending,
+    handleSubmit,
+    clearError,
+    reset,
+    onSuccess,
+    onFail
+  };
+};

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

@@ -0,0 +1,8 @@
+export declare const useSpaHeaders: (additionalHeaders?: {}) => {
+    headers: any;
+    onResponse({ response }: {
+        response: any;
+    }): Promise<void>;
+} | {
+    headers: {};
+};

package/dist/runtime/composables/useSpaHeaders.mjs

@@ -0,0 +1,37 @@
+import { appendHeader } from "h3";
+import { parse, splitCookiesString as split } from "set-cookie-parser";
+import { serialize } from "cookie";
+export const useSpaHeaders = (additionalHeaders = {}) => {
+  if (process.client) {
+    return {
+      headers: additionalHeaders
+    };
+  }
+  const serverUrl = useRuntimeConfig().outfit.serverUrl;
+  const event = useRequestEvent();
+  const headers = useRequestHeaders(["cookie", "referer", "host"]);
+  const goodResponses = [200, 201, 202, 203, 204, 205, 206, 207, 208, 226];
+  if (!Object.prototype.hasOwnProperty.call(headers, "referer")) {
+    headers.referer = `${headers.host}/${event.req.originalUrl}`;
+  }
+  const parseCookie = (cookies) => {
+    return parse(split(cookies)).map((cookie) => serialize(cookie.name, cookie.value, cookie));
+  };
+  const serverOptions = {
+    headers: {
+      ...additionalHeaders,
+      ...headers
+    },
+    // eslint-disable-next-line
+    async onResponse({ response }) {
+      const { status, headers: headers2 } = response;
+      if (goodResponses.includes(status)) {
+        appendHeader(event, "Set-Cookie", parseCookie(headers2.get("set-cookie")));
+      }
+    }
+  };
+  if (serverUrl) {
+    serverOptions.baseURL = serverUrl;
+  }
+  return serverOptions;
+};

package/dist/runtime/plugins/echo.client.d.ts

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

package/dist/runtime/plugins/echo.client.mjs

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#imports";
+import { io } from "socket.io-client";
+import Echo from "laravel-echo";
+export default defineNuxtPlugin((nuxtApp) => {
+  const options = useRuntimeConfig().public.outfit.echo;
+  if (options.broadcaster === "socket.io") {
+    options.client = io;
+  }
+  nuxtApp.provide("echo", new Echo(options));
+});

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+
+import {  } from './module'
+
+
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "nuxt-outfit",
+  "version": "1.0.1",
+  "description": "Outfit - Connection Laravel and Nuxt",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/k0mar12/outfit"
+  },
+  "homepage": "https://github.com/k0mar12/outfit",
+  "author": "Vlad Poshvaniuk",
+  "contributors": [
+    "k0mar12 <vladlovedance@gmail.com>"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.2.2",
+    "cookie": "^0.5.0",
+    "flat": "^5.0.2",
+    "klona": "^2.0.6",
+    "laravel-echo": "^1.15.0",
+    "lodash-es": "^4.17.21",
+    "set-cookie-parser": "^2.5.1",
+    "socket.io-client": "^4.6.0",
+    "yup": "^1.0.0"
+  },
+  "devDependencies": {
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/module-builder": "^0.2.1",
+    "@nuxt/schema": "^3.2.2",
+    "@nuxt/test-utils": "^3.2.2",
+    "changelogen": "^0.4.1",
+    "eslint": "^8.34.0",
+    "nuxt": "^3.2.2",
+    "vitest": "^0.28.5"
+  },
+  "keywords": [
+    "outfit",
+    "nuxt",
+    "laravel",
+    "module"
+  ]
+}