chore: improvements & change colors

package.json

@@ -28,9 +28,7 @@
     "build": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "prepare": "nuxi prepare playground",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:coverage": "pnpm test -- --reporter verbose --coverage"
+    "lint": "eslint ."
   },
   "devDependencies": {
     "@antfu/eslint-config": "latest",
@@ -40,7 +38,7 @@
     "@vueuse/components": "latest",
     "@vueuse/core": "latest",
     "eslint": "latest",
-    "nuxt": "^3.0.0-rc.6",
+    "nuxt": "^3.0.0-rc.11",
     "typescript": "latest"
   }
 }

playground/app.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="h-screen flex flex-col bg-gray-900 text-white">
+  <div class="h-screen">
     <NuxtPage class="flex-1" />
     <NuxtModals />
   </div>
 </template>
+
+<style lang="postcss">
+html {
+  @apply bg-gray-900 text-white
+}
+</style>

playground/components/MyModal.vue

@@ -2,34 +2,36 @@
 import { vOnClickOutside } from '@vueuse/components'
 import { useFocus } from '@vueuse/core'
 
-interface Emits {
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
   (event: 'close', text: string | null): void
-}
+}>()
 
-const emit = defineEmits<Emits>()
-const close = () => emit('close', null)
-const closeWithText = (text: string) => emit('close', text)
+const close = (text?: string | MouseEvent) => emit('close', typeof text === 'string' ? text : null)
 
 const focusTarget = ref()
 useFocus(focusTarget, { initialValue: true })
 
-const text = ref('')
+const text = ref(props.text)
 </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 class="fixed top-0 left-0 h-screen w-screen p-10 flex justify-center items-center bg-black/75">
+    <div v-on-click-outside="close" class="justify-between bg-gray-900 p-4 rounded border-2 border-indigo-500 gap-5">
+      <div row class="justify-center items-center">
+        <input ref="focusTarget" v-model="text" class="rounded border-2 focus:outline-none focus:ring-emerald-500 text-black px-2 py-1">
       </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">
+      <div row class="justify-between gap-4">
+        <button class="w-full bg-red-700 rounded px-4 py-2" @click="close">
           Cancel
         </button>
-        <button class="w-full bg-emerald-500 rounded px-4 py-2" @click="() => closeWithText(text)">
+        <button class="w-full bg-indigo-500 rounded px-4 py-2" @click="() => close(text)">
           Save
         </button>
       </div>

playground/nuxt.config.ts

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

playground/pages/index.vue

@@ -1,20 +1,20 @@
 <script setup>
 import { MyModal } from '#components'
+
 const { open } = useModals()
 
-const text = ref('')
-const getText = async () => {
-  const value = await open(MyModal)
+const text = ref('Click on the pen to change me !')
+
+const edit = async () => {
+  const newValue = await open(MyModal, { text })
   if (value !== null)
-    text.value = value
+    text.value = newValue
 }
 </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 row class="justify-center items-center gap-2">
+    <span class="text-lg">{{ text }}</span>
+    <button class="i-mdi-pencil text-2xl text-indigo-500 hover:text-indigo-600" @click="edit" />
   </div>
 </template>

playground/uno.config.ts

@@ -0,0 +1,16 @@
+import {
+  defineConfig,
+  presetIcons,
+  presetUno,
+  transformerDirectives,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetIcons(),
+  ],
+  transformers: [
+    transformerDirectives(),
+  ],
+})