chore: wip

docs/config.ts

@@ -432,7 +432,7 @@ const sidebar = {
         { text: 'Command Palette', link: '/components/command-palette' },
         { text: 'Dropdown', link: '/components/dropdown' },
         { text: 'Form', link: '/components/form' },
-        { text: 'Modal', link: '/components/modal' },
+        { text: 'Dialog', link: '/components/dialog' },
         { text: 'Notification', link: '/components/notification' },
         { text: 'Stepper', link: '/components/stepper' },
         { text: 'Table', link: '/components/table' },

storage/framework/core/components/modal/components.d.ts → storage/framework/core/components/dialog/components.d.ts

@@ -9,11 +9,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
     'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
+    Dialog: typeof import('./src/components/Dialog.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     Installation: typeof import('./src/components/Installation.vue')['default']
     'Mdi:heart': typeof import('~icons/mdi/heart')['default']
-    Modal: typeof import('./src/components/Modal.vue')['default']
     Options: typeof import('./src/components/Options.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

storage/framework/core/components/modal/package.json → storage/framework/core/components/dialog/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "@stacksjs/modal",
+  "name": "@stacksjs/dialog",
   "type": "module",
   "version": "0.67.0",
-  "description": "A modern modal component.",
+  "description": "A modern dialog component.",
   "author": "Chris Breuer",
   "contributors": ["Chris Breuer <[email protected]>"],
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",
-  "homepage": "https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/modal#readme",
+  "homepage": "https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/dialog#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
-    "directory": "./storage/framework/core/components/modal"
+    "directory": "./storage/framework/core/components/dialog"
   },
   "bugs": {
     "url": "https://github.com/stacksjs/stacks/issues"
   },
-  "keywords": ["modals", "components", "library", "stacks"],
+  "keywords": ["dialog", "components", "library", "stacks"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

storage/framework/core/components/modal/src/App.vue → storage/framework/core/components/dialog/src/App.vue

@@ -41,14 +41,14 @@ defineCustomElement({
       </main>
 
       <Transition name="fade" appear>
-        <Modal :visible="visible" @close="handleClose">
+        <Dialog :visible="visible" overlay @close="handleClose">
           <template #closeButton />
           <template #header>
             <h1> Hello Detail</h1>
           </template>
 
           <p>Modal Content</p>
-        </Modal>
+        </Dialog>
       </Transition>
 
       <Footer />

storage/framework/core/components/modal/src/components/Modal.vue → storage/framework/core/components/dialog/src/components/Dialog.vue

@@ -12,7 +12,10 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
-const showOverlay = computed(() => props.overlay ?? true)
+
+const showOverlay = computed(() => {
+  return props.overlay ?? true
+})
 
 function handleClose() {
   emit('close', false)

storage/framework/core/components/modal/src/components/Hero.vue → storage/framework/core/components/dialog/src/components/Hero.vue

@@ -8,29 +8,29 @@ function handleOpen() {
 
 <template>
   <div class="flex flex-col items-center gap-3">
-    <div class="modalWrapper">
-      <div class="modal" />
-      <div class="modal" />
-      <div class="modal" />
+    <div class="dialogWrapper">
+      <div class="dialog" />
+      <div class="dialog" />
+      <div class="dialog" />
     </div>
     <h1 class="text-neon mb-3 text-5xl font-bold -mt-5">
-      stacks/modal
+      stacks/dialog
     </h1>
 
     <p class="mb-3 mt-0 text-lg">
-      An simple, minimal, yet powerful, modal component.
+      An simple, minimal, yet powerful, dialog component.
     </p>
 
     <div class="flex gap-2">
       <button
         class="button btn-primary"
         @click="handleOpen"
       >
-        Render a Modal
+        Render Dialog
       </button>
       <a
         class="button btn-secondary"
-        href="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/modal"
+        href="https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/dialog"
         target="_blank"
       >
         GitHub
@@ -40,7 +40,7 @@ function handleOpen() {
 </template>
 
 <style scoped>
-.modalWrapper {
+.dialogWrapper {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
@@ -52,7 +52,7 @@ function handleOpen() {
   opacity: 1;
 }
 
-.modal {
+.dialog {
   width: 356px;
   height: 40px;
   background: #ffffff;
@@ -65,11 +65,11 @@ function handleOpen() {
   transform: translateX(-50%);
 }
 
-.modal:nth-child(1) {
+.dialog:nth-child(1) {
   transform: translateY(-60%) translateX(-50%) scale(0.9);
 }
 
-.modal:nth-child(2) {
+.dialog:nth-child(2) {
   transform: translateY(-30%) translateX(-50%) scale(0.95);
 }
 

storage/framework/core/components/modal/src/components/Installation.vue → storage/framework/core/components/dialog/src/components/Installation.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { useCopyCode } from '../composables/useCopyCode'
 
-const code = `bun install @stacksjs/modal`
+const code = `bun install @stacksjs/dialog`
 
 const showCheckIcon = ref(false)
 

storage/framework/core/components/modal/src/components/Options.vue → storage/framework/core/components/dialog/src/components/Options.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-// import { notification } from '../'
 import { useCopyCode } from '../composables/useCopyCode'
 
 const currentAction = ref('default')
@@ -12,16 +11,16 @@ function handleClose() {
 }
 
 const renderedCode = computed(() => {
-  let modalContent = `
+  let dialogContent = `
   <div>
     <p class="text-sm text-gray-500">
-      Here is the content of the modal
+      Here is the content of the dialog
     </p>
   </div>
 `
 
   if (currentAction.value === 'close') {
-    modalContent = `
+    dialogContent = `
   <!-- For default close button -->
   <template #closeButton />
 
@@ -34,14 +33,14 @@ const renderedCode = computed(() => {
 
   <div>
     <p class="text-sm text-gray-500">
-      Here is the content of the modal
+      Here is the content of the dialog
     </p>
   </div
 `
   }
 
   if (currentAction.value === 'header') {
-    modalContent = `
+      dialogContent = `
   <template #header>
     <h1 class="text-lg font-semibold">
       Greetings
@@ -50,13 +49,13 @@ const renderedCode = computed(() => {
 
   <div>
     <p class="text-sm text-gray-500">
-      Here is the content of the modal.
+      Here is the content of the dialog.
     </p>
   </div>
 `
   }
 
-  return `<Modal :visible="visible" @close="handleClose">${modalContent}</Modal>`
+  return `<Dialog :visible="visible" overlay @close="handleClose">${dialogContent}</Dialog>`
 })
 
 function handleClick(action: string) {
@@ -126,7 +125,7 @@ async function handleCopyCode() {
     </div>
 
     <Transition name="fade" appear>
-      <Modal :visible="visible" class="bg-gray-500 bg-opacity-70 transition-opacity" @close="handleClose">
+      <Dialog :visible="visible" class="bg-gray-500 bg-opacity-70 transition-opacity" @close="handleClose">
         <template v-if="currentAction === 'close'" #closeButton />
         <template v-if="currentAction === 'header'" #header>
           <h1 class="text-lg font-semibold">
@@ -139,7 +138,7 @@ async function handleCopyCode() {
             Here is the content of the modal
           </p>
         </div>
-      </Modal>
+      </Dialog>
     </Transition>
   </div>
 </template>

storage/framework/core/components/modal/src/components/Transitions.vue → storage/framework/core/components/dialog/src/components/Transitions.vue

@@ -167,7 +167,7 @@ const styleCode = computed(() => {
 const renderedCode = computed(() => {
   return `
 <template>
-  // For a better modal overlay effect, we recommend on creating a separate modal-overlay.
+  // For a better dialog overlay effect, we recommend on creating a separate dialog-overlay.
   <Transition name="fade" appear>
     <div
       v-if="visible"
@@ -177,13 +177,13 @@ const renderedCode = computed(() => {
   </Transition>
 
   <Transition name="${currentTransition.value}" appear>
-    <Modal :visible="visible" :overlay="false" @close="handleClose">
+    <Dialog :visible="visible" :overlay="false" @close="handleClose">
       <div>
         <p class="text-sm text-gray-500">
-          Here is the content of the modal
+          Here is the content of the dialog
         </p>
       </div>
-    </Modal>
+    </Dialog>
   </Transition>
 </template>
 
@@ -207,12 +207,13 @@ async function handleCopyCode() {
       Transition
     </h1>
     <p class="my-3 text-base">
-      Here are the default transitions that come with the modal.
+      Here are the default transitions that come with the dialog.
     </p>
 
     <div class="mb-4 flex gap-3 overflow-auto">
       <button
-        v-for="trans in transitionList"
+        v-for="(trans, index) in transitionList"
+        :key="index"
         class="btn-default"
         :class="{
           'bg-neutral-200/50 border-neutral-400/50': currentTransition === trans,
@@ -245,17 +246,17 @@ async function handleCopyCode() {
     </Transition>
 
     <Transition :name="currentTransition" appear>
-      <Modal :visible="visible" :overlay="false" @close="handleClose">
+      <Dialog :visible="visible" :overlay="false" @close="handleClose">
         <div>
           <p class="text-sm text-gray-500">
-            Here is the content of the modal
+            Here is the content of the dialog
           </p>
         </div>
-      </Modal>
+      </Dialog>
     </Transition>
 
     <p class="text-sm text-gray-500">
-      For a better modal overlay effect, we recommend on creating a separate modal-overlay for it like the example above.
+      For a better dialog overlay effect, we recommend on creating a separate dialog-overlay for it like the example above.
     </p>
   </div>
 </template>

storage/framework/core/components/modal/src/components/Usage.vue → storage/framework/core/components/dialog/src/components/Usage.vue

@@ -5,7 +5,7 @@ import { useCopyCode } from '../composables/useCopyCode'
 
 const code = `<!-- App.vue -->
 <script lang="ts" setup>
-import { Modal } from '@stacksjs/modal'
+import { Dialog } from '@stacksjs/dialog'
 
 const visible = ref(false)
 
@@ -16,21 +16,22 @@ const handleClose = () => {
 
 <template>
   <Transition name="fade" appear>
-    <Modal
+    <Dialog
       :visible="visible"
+      overlay
       @close="handleClose"
     >
       <template #closeButton />
       <template #header>
         <h1> Hello Detail</h1>
       </template>
 
-      <p>Modal Content</p>
-    </Modal>
+      <p>Dialog Content</p>
+    </Dialog>
   </Transition>
 
   <button @click="visible = true">
-    Open Modal
+    Open Dialog
   </button>
 </template>
 

storage/framework/core/components/dialog/src/components/index.ts

@@ -0,0 +1 @@
+export { default as Dialog } from './Dialog.vue'

storage/framework/core/components/modal/src/composables/useSEOHeader.ts → storage/framework/core/components/dialog/src/composables/useSEOHeader.ts

@@ -2,32 +2,32 @@ import { useHead, useSeoMeta } from '@vueuse/head'
 
 function useSEOHeader() {
   useHead({
-    title: 'stacks/notification',
-    titleTemplate: title => `${title} | An opinionated toast component for Vue.`,
+    title: 'stacks/dialog',
+    titleTemplate: title => `${title} | An opinionated dialog component for Vue.`,
     meta: [
       {
         name: 'author',
         content: '@xiaoluoboding',
       },
       {
         name: 'description',
-        content: 'An opinionated toast component for Vue.',
+        content: 'An opinionated dialog component for Vue.',
       },
     ],
   })
 
   useSeoMeta({
-    title: 'stacks/modal',
-    description: 'An opinionated modal component for Vue.',
-    ogDescription: 'An opinionated modal component for Vue.',
-    ogTitle: 'stacks/modal',
+    title: 'stacks/dialog',
+    description: 'An opinionated dialog component for Vue.',
+    ogDescription: 'An opinionated dialog component for Vue.',
+    ogTitle: 'stacks/dialog',
     ogImage: 'https://vue-sonner.vercel.app/og.png',
     ogImageHeight: '882',
     ogImageWidth: '1686',
     twitterCard: 'summary_large_image',
     twitterImage: 'https://vue-sonner.vercel.app/og.png',
-    twitterTitle: 'stacks/modal',
-    twitterDescription: 'An opinionated notification component for Stacks.',
+    twitterTitle: 'stacks/dialog',
+    twitterDescription: 'An opinionated dialog component for Stacks.',
   })
 }
 

storage/framework/core/components/modal/src/index.ts → storage/framework/core/components/dialog/src/index.ts

@@ -1,12 +1,12 @@
 import type { Plugin } from 'vue'
-import { Modal } from './components'
+import { Dialog } from './components'
 
 const plugin: Plugin = {
   install(app) {
-    app.component('Modal', Modal)
+    app.component('Dialog', Dialog)
   },
 }
 
 export default plugin
 
-export { Modal }
+export { Dialog }