chore: wip

Author: cab-mikee

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

@@ -28,7 +28,7 @@
   "files": ["README.md", "dist"],
   "scripts": {
     "dev": "bunx --bun vite -c ./vite.config.ts",
-    "build": "bunx --bun vite build --mode lib",
+    "build": "bunx --bun vite build --mode lib && bun run build:types",
     "build:demo": "bunx --bun vite build",
     "build:types": "bunx vue-tsc -p tsconfig.build.json && bunx api-extractor run",
     "preview": "bunx --bun vite preview"

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

@@ -23,22 +23,22 @@ function handleClose() {
 </script>
 
 <template>
-  <div class="modal-wrapper bg-neutral-100/66 px-4 dark:bg-neutral-900">
-    <div class="relative mx-auto max-w-full container sm:max-w-2xl">
-      <header class="flex-center flex-col py-20">
+  <div class="px-4 modal-wrapper bg-neutral-100/66 dark:bg-neutral-900">
+    <div class="container relative max-w-full mx-auto sm:max-w-2xl">
+      <header class="flex-col py-20 flex-center">
         <Hero @open="handleOpen" />
       </header>
 
       <main
-        class="text-primary grid grid-cols-1 gap-8 pb-20 text-xs 2xl:text-sm"
+        class="grid grid-cols-1 gap-8 pb-20 text-xs text-primary 2xl:text-sm"
       >
         <Installation />
         <Usage />
         <Transitions />
       </main>
 
       <Transition name="fade" appear>
-        <Dialog v-if="visible" @close="handleClose">
+        <Dialog v-model="visible" @close="handleClose">
           <DialogPanel>
             <h2>Greetings! This is a dialog.</h2>
           </DialogPanel>

storage/framework/core/components/dialog/src/components/Dialog.vue

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { defineCustomElement, onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
 
 const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
   (event: 'close', visible: boolean): void
 }>()
 
+const dialogRef = ref<HTMLElement | null>(null)
+const previousActiveElement = ref<HTMLElement | null>(null)
+
 function handleClose() {
+  emit('update:modelValue', false)
   emit('close', false)
 }
 
@@ -15,42 +24,111 @@ function handleEscape(event: KeyboardEvent) {
   }
 }
 
+function trapFocus(event: KeyboardEvent) {
+  if (event.key !== 'Tab') return
+
+  const focusableElements = dialogRef.value?.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  )
+
+  if (!focusableElements?.length) return
+
+  const firstFocusable = focusableElements[0] as HTMLElement
+  const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement
+
+  if (event.shiftKey) {
+    if (document.activeElement === firstFocusable) {
+      lastFocusable.focus()
+    }
+  } else {
+    if (document.activeElement === lastFocusable) {
+      firstFocusable.focus()
+    }
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    previousActiveElement.value = document.activeElement as HTMLElement
+    nextTick(() => {
+      dialogRef.value?.focus()
+    })
+  } else if (previousActiveElement.value) {
+    previousActiveElement.value.focus()
+  }
+})
+
 onMounted(() => {
   window.addEventListener('keydown', handleEscape)
+  window.addEventListener('keydown', trapFocus)
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', handleEscape)
-})
-
-defineCustomElement({
-  shadow: true,
+  window.removeEventListener('keydown', trapFocus)
 })
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 overflow-y-auto">
-    <div
-      class="z-20 min-h-full flex items-end justify-center bg-gray-500 bg-opacity-75 p-4 text-center transition-opacity sm:items-center sm:p-0"
-      @click.self="emit('close', false)"
-    >
-      <slot />
+  <Transition name="dialog-fade">
+    <div v-if="modelValue" class="stacks-dialog-container">
+      <div
+        class="stacks-dialog-backdrop"
+        @click.self="handleClose"
+      >
+        <div class="stacks-dialog-content">
+          <slot />
+        </div>
+      </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <style scoped>
-button {
-  cursor: pointer;
+.stacks-dialog-container {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 50 !important;
+  min-height: 100% !important;
+  overflow-y: auto !important;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
+.stacks-dialog-backdrop {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 20 !important;
+  display: flex !important;
+  align-items: flex-end !important;
+  justify-content: center !important;
+  min-height: 100% !important;
+  padding: 1rem !important;
+  text-align: center !important;
+  transition-property: opacity !important;
+  background-color: rgb(107 114 128 / 0.75) !important;
 }
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+
+.stacks-dialog-content {
+  position: relative !important;
+  width: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+@media (min-width: 640px) {
+  .stacks-dialog-backdrop {
+    align-items: center !important;
+    padding: 0 !important;
+  }
+}
+
+.dialog-fade-enter-active,
+.dialog-fade-leave-active {
+  transition: opacity 0.3s ease !important;
+}
+
+.dialog-fade-enter-from,
+.dialog-fade-leave-to {
+  opacity: 0 !important;
 }
-/* @unocss-placeholder */
 </style>

storage/framework/core/components/dialog/src/components/DialogPanel.vue

@@ -1,11 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+</script>
+
 <template>
-  <div class="z-60 overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 sm:max-w-lg sm:w-full sm:p-6" @click.stop>
+  <div class="p-4 bg-white rounded-lg"  @click.stop>
     <slot>
       <p>Default modal content goes here.</p>
     </slot>
   </div>
 </template>
-
-<style scoped>
-/* @unocss-placeholder */
-</style>

storage/framework/core/components/dialog/vite.config.ts

@@ -1,6 +1,8 @@
 import type { UserConfig } from 'vite'
 import { resolve } from 'node:path'
 import { alias } from '@stacksjs/alias'
+
+import { path as p } from '@stacksjs/path'
 import Vue from '@vitejs/plugin-vue'
 import CleanCSS from 'clean-css'
 import UnoCSS from 'unocss/vite'
@@ -9,23 +11,26 @@ import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 
-const cleanCssInstance = new CleanCSS({})
 function minify(code: string) {
+  const cleanCssInstance = new CleanCSS({})
   return cleanCssInstance.minify(code).styles
 }
 
-let cssCodeStr = ''
-
 export default defineConfig(({ mode }) => {
-  const userConfig: UserConfig = {}
+  let cssCodeStr = ''
+  const userConfig: UserConfig = {
+    optimizeDeps: {
+      exclude: ['@stacksjs/dialog'],
+    },
+  }
 
   const commonPlugins = [
     Vue({
       include: /\.(stx|vue|md)($|\?)/,
     }),
-    UnoCSS({
-      mode: 'global',
-    }),
+
+    UnoCSS(),
+
     Components({
       extensions: ['stx', 'vue', 'md'],
       include: /\.(stx|vue|md)($|\?)/,
@@ -35,15 +40,16 @@ export default defineConfig(({ mode }) => {
         }),
       ],
     }),
+
     Icons(),
   ]
 
   if (mode === 'lib') {
     userConfig.build = {
       lib: {
         entry: resolve(__dirname, 'src/index.ts'),
-        name: 'StacksModal',
-        fileName: 'stacks-modal',
+        name: 'stacks-dialog',
+        fileName: 'index',
       },
       outDir: 'dist',
       emptyOutDir: true,
@@ -52,10 +58,6 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         external: ['vue'],
         output: [
-          // {
-          //   format: 'cjs',
-          //   entryFileNames: `stacks-modal.cjs`,
-          // },
           {
             format: 'es',
             entryFileNames: `index.js`,
@@ -86,15 +88,15 @@ export default defineConfig(({ mode }) => {
 
           return {
             code: `\
-            function __insertCSSStacksModal(code) {
+            function __insertCSSStacksDialog(code) {
               if (!code || typeof document == 'undefined') return
               let head = document.head || document.getElementsByTagName('head')[0]
               let style = document.createElement('style')
               style.type = 'text/css'
               head.appendChild(style)
               ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
             }\n
-            __insertCSSStacksModal(${JSON.stringify(cssCodeStr)})
+            __insertCSSStacksDialog(${JSON.stringify(cssCodeStr)})
             \n ${code}`,
             map: { mappings: '' },
           }
@@ -105,7 +107,13 @@ export default defineConfig(({ mode }) => {
 
   return {
     resolve: {
-      alias,
+      '~/.env': p.projectConfigPath('env.ts'),
+      '~/config/errors': p.projectConfigPath('errors.ts'),
+
+      ...alias,
+    },
+    server: {
+      port: 3007,
     },
     plugins: [...commonPlugins],
     ...userConfig,