chore: init module

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+coverage
+templates

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@antfu",
+  "rules": {
+    "@typescript-eslint/space-before-function-paren": ["error", "always"]
+  }
+}

.gitignore

@@ -0,0 +1,22 @@
+# Dependencies
+node_modules
+
+# Coverage
+coverage
+
+# Logs
+*.log*
+
+# IDE
+.idea
+.vscode
+
+# Nuxt build
+.nuxt*
+.output
+
+# Module build
+dist
+
+# Environment files
+.env*

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Kevin Marrec
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,67 @@
+# Nuxt Modals
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Github Actions][github-actions-src]][github-actions-href]
+[![Codecov][codecov-src]][codecov-href]
+
+> Modals logic for Nuxt 3
+
+![image](https://user-images.githubusercontent.com/25272043/171139116-b0137f28-f29d-429d-a778-9e8bbe530331.png)
+
+
+## Setup
+
+Add `@kevinmarrec/nuxt-modals` dependency to your project :
+
+```sh
+# Using Yarn
+yarn add -D @kevinmarrec/nuxt-modals
+# Using NPM
+npm install -D @kevinmarrec/nuxt-modals
+# Using PNPM
+pnpm install -D @kevinmarrec/nuxt-modals
+```
+
+Edit your `nuxt.config.ts` file to add PWA module :
+
+```ts
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@kevinmarrec/nuxt-modals'
+  ]
+})
+```
+
+## Development
+
+Make sure to install the dependencies :
+
+```sh
+pnpm install
+```
+
+Start the development server on http://localhost:3000 :
+
+```sh
+pnpm dev
+```
+
+## License
+
+Made with 💙
+
+Published under the [MIT License](./LICENCE).
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@kevinmarrec/nuxt-modals?style=flat-square
+[npm-version-href]: https://npmjs.com/package/@kevinmarrec/nuxt-modals
+[npm-downloads-src]: https://img.shields.io/npm/dm/@kevinmarrec/nuxt-modals?style=flat-square
+[npm-downloads-href]: https://npmjs.com/package/@kevinmarrec/nuxt-modals
+[github-actions-src]: https://img.shields.io/github/workflow/status/kevinmarrec/nuxt-modals/CI?style=flat-square
+[github-actions-href]: https://github.com/kevinmarrec/nuxt-modals/actions?query=workflow%3Aci
+[codecov-src]: https://img.shields.io/codecov/c/gh/kevinmarrec/nuxt-modals/main?style=flat-square
+[codecov-href]: https://codecov.io/gh/kevinmarrec/nuxt-modals

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@kevinmarrec/nuxt-modals",
+  "type": "module",
+  "version": "0.0.0",
+  "packageManager": "[email protected]",
+  "author": "Kevin Marrec <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/kevinmarrec/nuxt-pwa-module#readme",
+  "repository": "https://github.com/kevinmarrec/nuxt-pwa-module",
+  "keywords": [
+    "nuxt",
+    "modals",
+    "module"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "prepare": "nuxi prepare playground",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:coverage": "pnpm test -- --reporter verbose --coverage"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "latest",
+    "@iconify-json/mdi": "latest",
+    "@nuxt/module-builder": "latest",
+    "@unocss/nuxt": "latest",
+    "@vueuse/components": "latest",
+    "@vueuse/core": "latest",
+    "eslint": "latest",
+    "nuxt": "^3.0.0-rc.6",
+    "typescript": "latest"
+  }
+}

playground/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="h-screen flex flex-col bg-gray-900 text-white">
+    <NuxtPage class="flex-1" />
+    <NuxtModals />
+  </div>
+</template>

playground/components/MyModal.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { useFocus } from '@vueuse/core'
+
+interface Emits {
+  (event: 'close', text: string | null): void
+}
+
+const emit = defineEmits<Emits>()
+const close = () => emit('close', null)
+const closeWithText = (text: string) => emit('close', text)
+
+const focusTarget = ref()
+useFocus(focusTarget, { initialValue: true })
+
+const text = ref('')
+</script>
+
+<template>
+  <div class="fixed top-0 left-0 h-screen w-screen p-10 flex justify-center items-center bg-black/50">
+    <div v-on-click-outside="close" class="flex flex-col justify-between bg-white p-4 rounded border-2 border-emerald-500 gap-10">
+      <div class="flex justify-end">
+        <button class="flex text-emerald-500" @click="close">
+          <span class="i-mdi-close text-xl" />
+        </button>
+      </div>
+      <input ref="focusTarget" v-model="text" class="rounded border-2 focus:outline-none focus:ring-emerald-500 text-black px-2 py-1">
+      <div class="flex justify-between gap-4">
+        <button class="w-full bg-red-500 rounded px-4 py-2" @click="close">
+          Cancel
+        </button>
+        <button class="w-full bg-emerald-500 rounded px-4 py-2" @click="() => closeWithText(text)">
+          Save
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

playground/nuxt.config.ts

@@ -0,0 +1,12 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: [
+    '@unocss/nuxt',
+    '../dist/module.mjs',
+  ],
+  unocss: {
+    preflight: true,
+    icons: true,
+  },
+})

playground/pages/index.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { MyModal } from '#components'
+const { open } = useModals()
+
+const text = ref('')
+const getText = async () => {
+  const value = await open(MyModal)
+  if (value !== null)
+    text.value = value
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center">
+    Text: {{ text }}
+    <button class="rounded bg-emerald-500 bg-emerald-500 px-3 py-2 hover:bg-emerald-400" @click="getText">
+      Click me to change text
+    </button>
+  </div>
+</template>

playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}