feat: nuxt module

hunterliu1003 · hunterliu1003 · commit 6ec6393f7bbf · 2022-11-03T18:25:37.000+08:00
diff --git a/packages/docs/components/content/VModelPreview.vue b/packages/docs/components/content/VModelPreview.vue
@@ -2,7 +2,6 @@
 const show = ref(false)
 
 function confirm() {
-  alert('confirm')
   show.value = false
 }
 </script>
diff --git a/packages/docs/markdown-parser/handler/blockquote.ts b/packages/docs/markdown-parser/handler/blockquote.ts
@@ -2,6 +2,6 @@ import type { H } from 'mdast-util-to-hast'
 import { all } from 'mdast-util-to-hast'
 import { wrap } from './utils'
 
-export default function blockquote (h: H, node: any) {
+export default function blockquote(h: H, node: any) {
   return h(node, 'blockquote', wrap(all(h, node), true))
 }
diff --git a/packages/docs/markdown-parser/handler/inlineCode.ts b/packages/docs/markdown-parser/handler/inlineCode.ts
@@ -3,7 +3,6 @@ import { u } from 'unist-builder'
 
 export default function inlineCode(h: H, node: any) {
   return h(node, 'code-inline', node.attributes, [
-    // @ts-expect-error
     u('text', node.value.replace(/\r?\n|\r/g, ' ')),
   ])
 }
diff --git a/packages/nuxt/.gitignore b/packages/nuxt/.gitignore
@@ -0,0 +1,51 @@
+# Dependencies
+node_modules
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+
+# Nuxt
+.nuxt
+.output
+.vercel_build_output
+.build-*
+.env
+.netlify
+
+# Env
+.env
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/packages/nuxt/.nuxtrc b/packages/nuxt/.nuxtrc
@@ -0,0 +1 @@
+imports.autoImport=false
diff --git a/packages/nuxt/README.md b/packages/nuxt/README.md
@@ -0,0 +1,6 @@
+# Nuxt Module
+
+## Development
+
+- Run `npm run dev:prepare` to generate type stubs.
+- Use `npm run dev` to start [playground](./playground) in development mode.
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@vue-final-modal/nuxt",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "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": "release-it"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.0.0-rc.12",
+    "vue-final-modal": "workspace:4.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.2.0",
+    "@nuxt/schema": "^3.0.0-rc.12",
+    "@nuxtjs/eslint-config-typescript": "^11.0.0",
+    "eslint": "^8.26.0",
+    "nuxt": "^3.0.0-rc.12",
+    "release-it": "^15.5.0"
+  }
+}
diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { ModalsContainer } from 'vue-final-modal'
+</script>
+
+<template>
+  <PlainCssConfirmModalPreview />
+  <ModalsContainer />
+</template>
diff --git a/packages/nuxt/playground/components/PlainCssConfirmModal.vue b/packages/nuxt/playground/components/PlainCssConfirmModal.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { VueFinalModal } from 'vue-final-modal'
+
+defineProps<{
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: boolean): void
+  (e: 'confirm'): void
+}>()
+</script>
+
+<template>
+  <VueFinalModal
+    class="confirm-modal"
+    content-class="confirm-modal-content"
+    @update:model-value="val => emit('update:modelValue', val)"
+  >
+    <h1>{{ title }}</h1>
+    <slot />
+    <button @click="emit('confirm')">
+      Confirm
+    </button>
+  </VueFinalModal>
+</template>
+
+<style>
+.confirm-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.confirm-modal-content {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background: #fff;
+  border-radius: 0.5rem;
+}
+.confirm-modal-content > * + *{
+  margin: 0.5rem 0;
+}
+.confirm-modal-content h1 {
+  font-size: 1.375rem;
+}
+.confirm-modal-content button {
+  margin: 0.25rem 0 0 auto;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+.dark .confirm-modal-content {
+  background: #000;
+}
+</style>
diff --git a/packages/nuxt/playground/components/PlainCssConfirmModalPreview.vue b/packages/nuxt/playground/components/PlainCssConfirmModalPreview.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ModalsContainer, useModal } from 'vue-final-modal'
+import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
+
+const { open, close } = useModal({
+  component: markRaw(PlainCssConfirmModal),
+  attrs: {
+    title: 'Hello World!',
+    onConfirm() {
+      close()
+    },
+  },
+  slots: {
+    default: '<p>The content of the modal</p>',
+  },
+})
+</script>
+
+<template>
+  <button @click="() => open()">
+    Open Modal
+  </button>
+
+  <ModalsContainer />
+</template>
diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
@@ -0,0 +1,8 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import vfmModule from '..'
+
+export default defineNuxtConfig({
+  modules: [
+    vfmModule,
+  ],
+})
diff --git a/packages/nuxt/playground/package.json b/packages/nuxt/playground/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "vue-final-modal-module-playground"
+}
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { addPlugin, defineNuxtModule } from '@nuxt/kit'
+
+export interface ModuleOptions {
+  addPlugin: boolean
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@vue-final-modal/nuxt',
+    configKey: 'vue-final-modal',
+  },
+  setup(options, nuxt) {
+    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+    nuxt.options.build.transpile.push(runtimeDir)
+    addPlugin(resolve(runtimeDir, 'plugin'))
+
+    nuxt.options.css.push('vue-final-modal/style.css')
+  },
+})
diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
@@ -0,0 +1,8 @@
+import { createVfm } from 'vue-final-modal'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vfm = createVfm() as any
+
+  nuxtApp.vueApp.use(vfm)
+})
diff --git a/packages/nuxt/tsconfig.json b/packages/nuxt/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./playground/.nuxt/tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`	`const show = ref(false)`
`3`	`3`
`4`	`4`	`function confirm() {`
`5`		`- alert('confirm')`
`6`	`5`	`show.value = false`
`7`	`6`	`}`
`8`	`7`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@ import type { H } from 'mdast-util-to-hast'`
`2`	`2`	`import { all } from 'mdast-util-to-hast'`
`3`	`3`	`import { wrap } from './utils'`
`4`	`4`
`5`		`-export default function blockquote (h: H, node: any) {`
	`5`	`+export default function blockquote(h: H, node: any) {`
`6`	`6`	`return h(node, 'blockquote', wrap(all(h, node), true))`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,6 @@ import { u } from 'unist-builder'`
`3`	`3`
`4`	`4`	`export default function inlineCode(h: H, node: any) {`
`5`	`5`	`return h(node, 'code-inline', node.attributes, [`
`6`		`- // @ts-expect-error`
`7`	`6`	`u('text', node.value.replace(/\r?\n\|\r/g, ' ')),`
`8`	`7`	`])`
`9`	`8`	`}`