mango-cms 0.3.21 → 0.3.23

package/cli.js

@@ -55,6 +55,57 @@ async function ensureSrcExists(mangoCmsRoot) {
     }
 }
 
+// Helper function to download and extract the versioned Mango UI (Nuxt admin) bundle.
+// Mirrors ensureSrcExists: the UI ships hidden, pulled on demand from S3 and kept
+// out of the npm tarball, exactly like the proprietary `src` core.
+async function ensureUiExists(mangoCmsRoot) {
+    const uiDir = path.join(mangoCmsRoot, 'mango-ui');
+    if (fs.existsSync(path.join(uiDir, 'nuxt.config.ts')) || fs.existsSync(path.join(uiDir, 'package.json'))) {
+        return uiDir;
+    }
+
+    const packageJsonPath = path.join(mangoCmsRoot, 'package.json');
+    let version = '0.1.24';
+    try {
+        if (fs.existsSync(packageJsonPath)) {
+            version = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')).version;
+        }
+    } catch (error) {
+        console.log('Error reading package.json:', error.message);
+    }
+
+    const zipFileName = `mango-ui-v${version}.zip`;
+    console.log(`Downloading Mango UI (version ${version})...`);
+
+    const response = await axios({
+        method: 'get',
+        url: `https://mango-cms.s3.amazonaws.com/${zipFileName}`,
+        responseType: 'arraybuffer'
+    });
+
+    const tempZipPath = path.join(mangoCmsRoot, zipFileName);
+    fs.writeFileSync(tempZipPath, response.data);
+
+    console.log('Extracting Mango UI...');
+    const zip = new AdmZip(tempZipPath);
+    zip.extractAllTo(mangoCmsRoot, true);
+
+    fs.unlinkSync(tempZipPath);
+    console.log(`Mango UI (version ${version}) installed successfully.`);
+    return uiDir;
+}
+
+// Resolve which Mango UI directory to use. A project-local "mango-ui" folder
+// (created by `mango ui eject`) always wins so users can fully customize it;
+// otherwise we fall back to the bundled/hidden copy inside the package.
+function resolveUiDir(mangoCmsRoot, userProjectRoot) {
+    const ejected = path.join(userProjectRoot, 'mango-ui');
+    if (fs.existsSync(path.join(ejected, 'nuxt.config.ts')) || fs.existsSync(path.join(ejected, 'package.json'))) {
+        return { dir: ejected, ejected: true };
+    }
+    return { dir: path.join(mangoCmsRoot, 'mango-ui'), ejected: false };
+}
+
 // Helper function to validate and prompt for license if needed
 async function ensureLicenseExists(configPath) {
     let settings = {};
@@ -205,6 +256,7 @@ program
                 siteName: answers.projectName,
                 siteDomain: `${projectSlug}.com`,
                 mangoDomain: `api.${projectSlug}.com`,
+                uiDomain: `admin.${projectSlug}.com`,
                 database: `${projectSlug}`,
                 s3Bucket: `${projectSlug}`
             };
@@ -284,31 +336,99 @@ program
         }
     });
 
-// --- Mango UI Dev Command ---
+// --- Mango UI Command ---
+// The Mango UI is a Nuxt app. It reads the project's mango/config (collections +
+// settings) at build time and talks to the backend API. By default it lives hidden
+// inside the package; `mango ui eject` pops it into the project for customization.
 program
     .command('ui <action>')
-    .description('Run Mango UI commands (e.g., dev, build, preview)')
+    .description('Run the Mango UI (dev, build, preview, start, eject)')
     .action(async (action) => {
-        const allowed = ['dev', 'build', 'preview'];
+        const allowed = ['dev', 'build', 'preview', 'start', 'eject'];
         if (!allowed.includes(action)) {
-            console.error(`Unknown UI action: ${action}`);
+            console.error(`Unknown UI action: ${action}. Use: ${allowed.join(', ')}`);
             process.exit(1);
         }
-        const uiDir = path.join(__dirname, 'ui');
-        const viteConfig = path.join(uiDir, 'vite.config.js');
-        // Pass through the Mango config context via cwd and env
+
+        const mangoCmsRoot = path.resolve(__dirname);
+        const userProjectRoot = process.cwd();
+
+        // Read UI port from project settings (falls back to Nuxt default).
+        const settingsPath = path.join(userProjectRoot, 'mango/config/settings.json');
+        let settings = {};
         try {
-            execSync(
-                `npx vite ${action} --config "${viteConfig}"`,
-                {
+            if (fs.existsSync(settingsPath)) {
+                settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+            }
+        } catch (error) {
+            console.log('Error reading settings file:', error.message);
+        }
+        const uiPort = settings.uiPort || 3001;
+
+        try {
+            // Make sure a UI bundle is available (downloads the hidden copy if needed).
+            await ensureUiExists(mangoCmsRoot);
+            const { dir: uiDir, ejected } = resolveUiDir(mangoCmsRoot, userProjectRoot);
+
+            if (action === 'eject') {
+                const dest = path.join(userProjectRoot, 'mango-ui');
+                if (ejected) {
+                    console.log('⚠️  Mango UI is already ejected at ./mango-ui. Remove it first to re-eject.');
+                    process.exit(1);
+                }
+                console.log('Ejecting Mango UI into ./mango-ui ...');
+                fs.copySync(uiDir, dest, {
+                    filter: (src) => {
+                        const base = path.basename(src);
+                        return !['node_modules', '.git', '.nuxt', '.output', '.data', '.nitro', '.cache'].includes(base);
+                    }
+                });
+                console.log(`
+✨ Mango UI ejected to ./mango-ui
+You now own the admin UI source and can customize it freely.
+
+  cd mango-ui
+  npm install
+
+Then run it from your project root as usual:
+  mango ui dev
+`);
+                return;
+            }
+
+            // Ensure UI dependencies are installed before running Nuxt.
+            // Pass the project root so the postinstall (nuxt prepare) can resolve
+            // this project's mango/config instead of failing inside node_modules.
+            if (!fs.existsSync(path.join(uiDir, 'node_modules'))) {
+                console.log('Installing Mango UI dependencies...');
+                execSync('npm install', {
                     cwd: uiDir,
                     stdio: 'inherit',
-                    env: {
-                        ...process.env,
-                        // Optionally add more env vars here if needed
-                    }
+                    env: { ...process.env, MANGO_PROJECT_ROOT: userProjectRoot, MANGO_UI_PORT: String(uiPort) }
+                });
+            }
+
+            // Map mango actions to Nuxt commands. `start` serves a production build.
+            const nuxtCmd = {
+                dev: `npx nuxt dev --port ${uiPort}`,
+                build: 'npx nuxt build',
+                preview: `npx nuxt preview --port ${uiPort}`,
+                start: `node .output/server/index.mjs`
+            }[action];
+
+            execSync(nuxtCmd, {
+                cwd: uiDir,
+                stdio: 'inherit',
+                env: {
+                    ...process.env,
+                    // Tell nuxt.config where the project (and its mango/config) lives,
+                    // since the bundled UI sits inside node_modules, not the project.
+                    MANGO_PROJECT_ROOT: userProjectRoot,
+                    MANGO_UI_PORT: String(uiPort),
+                    NUXT_PORT: String(uiPort),
+                    PORT: String(uiPort)
                 }
-            );
+            });
         } catch (error) {
             console.error(`Error running Mango UI (${action}):`, error.message);
             process.exit(1);
@@ -406,6 +526,29 @@ function generateNginxConfig(settings, buildPath) {
     const domain = settings.mangoDomain;
     const port = settings.port || 3002;
     const frontPort = settings.frontPort || 3001;
+    const uiDomain = settings.uiDomain;
+    const uiPort = settings.uiPort || 3001;
+
+    // Reverse-proxy the Mango UI (Nuxt SSR server) on its own subdomain, when configured.
+    const uiServerBlock = uiDomain ? `
+server {
+    server_name ${uiDomain};
+
+    client_max_body_size 50M;
+
+    location / {
+        proxy_http_version 1.1;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_pass http://localhost:${uiPort};
+    }
+}
+` : '';
 
     return `server {
     root ${buildPath};
@@ -470,7 +613,7 @@ server {
         proxy_pass http://localhost:${frontPort};
     }
 }
-`;
+${uiServerBlock}`;
 }
 
 // Helper function to generate apache config
@@ -478,6 +621,27 @@ function generateApacheConfig(settings, buildPath) {
     const domain = settings.mangoDomain;
     const port = settings.port || 3002;
     const frontPort = settings.frontPort || 3001;
+    const uiDomain = settings.uiDomain;
+    const uiPort = settings.uiPort || 3001;
+
+    // Reverse-proxy the Mango UI (Nuxt SSR server) on its own subdomain, when configured.
+    const uiVirtualHost = uiDomain ? `
+<VirtualHost *:80>
+    ServerName ${uiDomain}
+
+    ProxyRequests Off
+    ProxyPreserveHost On
+
+    ProxyPass / http://localhost:${uiPort}/
+    ProxyPassReverse / http://localhost:${uiPort}/
+
+    RequestHeader set X-Forwarded-Proto "https"
+    RequestHeader set X-Forwarded-Port "443"
+
+    ErrorLog \${APACHE_LOG_DIR}/${uiDomain}-error.log
+    CustomLog \${APACHE_LOG_DIR}/${uiDomain}-access.log combined
+</VirtualHost>
+` : '';
 
     return `<VirtualHost *:80>
     ServerName ${domain}
@@ -529,7 +693,7 @@ function generateApacheConfig(settings, buildPath) {
     ErrorLog \${APACHE_LOG_DIR}/${settings.siteDomain}-error.log
     CustomLog \${APACHE_LOG_DIR}/${settings.siteDomain}-access.log combined
 </VirtualHost>
-`;
+${uiVirtualHost}`;
 }
 
 // Helper function to configure web server
@@ -632,6 +796,50 @@ async function managePM2Process(settings) {
     }
 }
 
+// Helper function to build and (re)start the Mango UI (Nuxt) under PM2
+async function manageUiPM2Process(settings, mangoCmsRoot, userProjectRoot) {
+    if (!settings.uiDomain) {
+        console.log('No uiDomain configured, skipping Mango UI deploy.');
+        return;
+    }
+
+    const { dir: uiDir, ejected } = resolveUiDir(mangoCmsRoot, userProjectRoot);
+    const uiPort = settings.uiPort || 3001;
+    const processName = `${settings.database.toLowerCase()}-ui`;
+
+    // Install deps + build the Nuxt app (reads this project's mango/config).
+    if (!fs.existsSync(path.join(uiDir, 'node_modules'))) {
+        console.log('Installing Mango UI dependencies...');
+        execSync('npm install', {
+            cwd: uiDir,
+            stdio: 'inherit',
+            env: { ...process.env, MANGO_PROJECT_ROOT: userProjectRoot, MANGO_UI_PORT: String(uiPort) }
+        });
+    }
+    console.log(`Building Mango UI (${ejected ? 'ejected' : 'bundled'})...`);
+    execSync('npx nuxt build', {
+        cwd: uiDir,
+        stdio: 'inherit',
+        env: { ...process.env, MANGO_PROJECT_ROOT: userProjectRoot, MANGO_UI_PORT: String(uiPort) }
+    });
+
+    const serverEntry = path.join(uiDir, '.output/server/index.mjs');
+    const processListOutput = execSync('pm2 list', { encoding: 'utf8' });
+
+    if (processListOutput.includes(processName)) {
+        console.log(`Reloading PM2 process: ${processName}`);
+        execSync(`pm2 reload ${processName} --update-env`, {
+            env: { ...process.env, PORT: String(uiPort), NODE_ENV: 'production' }
+        });
+    } else {
+        console.log(`Starting new PM2 process: ${processName}`);
+        execSync(`pm2 start "${serverEntry}" --name ${processName}`, {
+            cwd: uiDir,
+            env: { ...process.env, PORT: String(uiPort), NODE_ENV: 'production' }
+        });
+    }
+}
+
 program
     .command('deploy')
     .description('Build and deploy Mango CMS using PM2')
@@ -639,14 +847,20 @@ program
         try {
             const configPath = path.join(process.cwd(), 'mango/config/settings.json');
             const settings = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+            const mangoCmsRoot = path.resolve(__dirname);
+            const userProjectRoot = process.cwd();
 
             // Run build command
             console.log('Building Mango CMS...');
             execSync('npm run mango build', { stdio: 'inherit' });
 
+            // Make sure a UI bundle is available for deploy.
+            await ensureUiExists(mangoCmsRoot);
+
             // Check if PM2 is installed
             if (await checkPM2()) {
                 await managePM2Process(settings);
+                await manageUiPM2Process(settings, mangoCmsRoot, userProjectRoot);
 
                 // Configure web server
                 const buildPath = path.join(process.cwd(), 'build');
@@ -810,6 +1024,15 @@ program
             fs.unlinkSync(tempZipPath);
             console.log(`Source files (version ${version}) updated successfully.`);
 
+            // Refresh the bundled (hidden) Mango UI as well. The project-local
+            // ejected copy, if any, is never touched here.
+            const bundledUiDir = path.join(cmsPackagePath, 'mango-ui');
+            if (fs.existsSync(bundledUiDir)) {
+                console.log('Removing existing Mango UI...');
+                fs.removeSync(bundledUiDir);
+            }
+            await ensureUiExists(cmsPackagePath);
+
         } catch (error) {
             console.error('Error updating Mango CMS source files:', error.message);
             process.exit(1);
@@ -848,6 +1071,7 @@ const proxyCmd = program
             const slug = siteName.toLowerCase().replace(/[^a-z0-9]/g, '');
             const frontDomain = `${slug}.mango`;
             const apiDomain = `api.${slug}.mango`;
+            const uiDomain = `admin.${slug}.mango`;
 
             // Kill existing proxy if running
             if (fs.existsSync(pidPath)) {
@@ -859,10 +1083,11 @@ const proxyCmd = program
             }
 
             // Add /etc/hosts entries
-            addHosts([frontDomain, apiDomain]);
+            addHosts([frontDomain, apiDomain, uiDomain]);
 
             const frontendPort = settings.frontPort || 5173;
             const backendPort = settings.port || 3002;
+            const uiPort = settings.uiPort || 3001;
 
             // Start the proxy server as a detached background process
             const proxyScript = path.join(__dirname, 'lib/dev-proxy.js');
@@ -871,7 +1096,7 @@ const proxyCmd = program
             // Use shell to redirect output to a log file and background the process
             // This keeps sudo in the current TTY so the password prompt works
             execSync(
-                `sudo node "${proxyScript}" ${frontDomain} ${apiDomain} ${frontendPort} ${backendPort} "${pidPath}" > "${logPath}" 2>&1 &`,
+                `sudo node "${proxyScript}" ${frontDomain} ${apiDomain} ${frontendPort} ${backendPort} "${pidPath}" ${uiDomain} ${uiPort} > "${logPath}" 2>&1 &`,
                 { stdio: 'inherit', shell: true }
             );
 
@@ -900,12 +1125,13 @@ const proxyCmd = program
             console.log(`
 Mango Dev Proxy started.
 
-  http://${frontDomain}   -> localhost:${frontendPort} (frontend)
-  http://${apiDomain}  -> localhost:${backendPort} (backend)
+  http://${frontDomain}     -> localhost:${frontendPort} (frontend)
+  http://${apiDomain} -> localhost:${backendPort} (backend)
+  http://${uiDomain} -> localhost:${uiPort} (admin ui)
 
 Start your dev servers with proxy support:
-  mango start                                          (backend on port ${backendPort})
-  VITE_DEV_PROXY=${apiDomain} mango ui dev   (frontend on port ${frontendPort})
+  mango start    (backend on port ${backendPort})
+  mango ui dev   (admin ui on port ${uiPort})
 
 Proxy log: ${logPath}
 To stop: mango proxy stop

package/default/mango/config/settings.json

@@ -1,12 +1,14 @@
 {
 	"port": 6646,
 	"frontPort": 6645,
+	"uiPort": 6644,
 	"siteName": "Example",
 	"siteDomain": "example.com",
 	"mangoDomain": "api.example.com",
+	"uiDomain": "admin.example.com",
     "serverIp": null,
 
-	"mangoThreads": 2,
+	"mangoThreads": 1,
 	"maxPoolSize": 10,
 	"minPoolSize": 0,
 	"maxIdleTimeMS": 60000,

package/default/package.json

@@ -24,7 +24,7 @@
         "dayjs": "^1.10.7",
         "express": "^4.18.1",
         "google-maps": "^4.3.3",
-        "mango-cms": "^0.3.21",
+        "mango-cms": "^0.3.23",
         "mapbox-gl": "^2.7.0",
         "vite": "^6.2.2",
         "vue": "^3.2.37",
@@ -34,6 +34,7 @@
         "vue3-clipboard": "^1.0.0",
         "vue3-touch-events": "^4.1.0",
         "vuedraggable": "^4.1.0",
+        "sweetalert2": "^11.26.24",
         "socket.io-client": "^4.8.1"
     },
     "devDependencies": {

package/default/src/helpers/user.js

@@ -1,40 +1,59 @@
 import { ref } from 'vue'
 import { mango } from 'mango-cms'
 
-const getUser = async (user) => {
-
-    user = user || { value: {} }
-
-    if (window.user?.id) {
-
-        console.log('got it!')
-        user.value = window.user
+function setCookie(cname, cvalue) {
+	var d = new Date()
+	d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000)
+	var expires = 'expires=' + d.toUTCString()
+	document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'
+}
 
-        /*
+const getUser = async (user) => {
+	user = user || { value: {} }
+
+	// Persist token from URL query param
+	let params = new URLSearchParams(window.location.search)
+	let tokenParam = params.get('token')
+	if (tokenParam) {
+		setCookie('Authorization', tokenParam)
+		window.localStorage.setItem('token', tokenParam)
+		window.localStorage.setItem('user', tokenParam.split(':')[1])
+
+		params.delete('token')
+		let newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '') + window.location.hash
+		window.history.replaceState({}, '', newUrl)
+	}
+
+	if (window.user?.id) {
+		console.log('got it!')
+		user.value = window.user
+
+		window.localStorage.setItem('token', `${window.user.password.hash}:${window.user.id}`)
+		window.localStorage.setItem('user', window.user.id)
+		window.localStorage.setItem('email', window.user.email)
+
+		/*
         Gotta clear this out so next time
         we try to call getUser we don't get
         stale data. ;)
         */
-        window.user = null
-        return user.value
-    }
-
-    let userId = window.localStorage.getItem('user')
+		window.user = null
+		return user.value
+	}
 
-    if (!userId) return {}
+	let userId = window.localStorage.getItem('user')
 
-    user.value = await mango.member(userId, { depthLimit: 0 }).then(r => user.value = r)
+	if (!userId) return {}
 
-    return user.value
+	user.value = await mango.member(userId, { depthLimit: 0 }).then((r) => (user.value = r))
 
+	return user.value
 }
 
 const initUser = () => {
-
-    const user = ref({})
-    getUser(user)
-    return user
-
+	const user = ref({})
+	getUser(user)
+	return user
 }
 
 export { initUser, getUser }

package/default/vite.config.js

@@ -21,6 +21,9 @@ if (!fs.existsSync(configPath)) {
 
 const collectionsPath = path.resolve(configPath, 'config/.collections.json')
 const endpointsPath = path.resolve(configPath, 'config/.endpoints.json')
+const settingsPath = path.resolve(configPath, 'config/settings.json')
+
+const settings = JSON.parse(fs.readFileSync(settingsPath, 'utf-8'))
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -56,6 +59,7 @@ export default defineConfig({
 		},
 	],
 	server: {
+		port: settings.frontPort || 5173,
 		host: '0.0.0.0',
 		allowedHosts: ['.mango'],
 		// When running behind mango proxy, configure HMR to use the proxy domain

package/lib/dev-proxy.js

@@ -6,7 +6,7 @@
  * Runs on port 80, routes requests by hostname to the correct local dev server.
  * Supports WebSocket upgrade for Vite HMR and Socket.io.
  *
- * Usage: node lib/dev-proxy.js <frontDomain> <apiDomain> <frontPort> <backendPort> [pidPath]
+ * Usage: node lib/dev-proxy.js <frontDomain> <apiDomain> <frontPort> <backendPort> [pidPath] [uiDomain] [uiPort]
  */
 
 import http from 'http';
@@ -18,9 +18,11 @@ const apiDomain = process.argv[3];
 const frontendPort = parseInt(process.argv[4], 10);
 const backendPort = parseInt(process.argv[5], 10);
 const pidPath = process.argv[6];
+const uiDomain = process.argv[7];
+const uiPort = process.argv[8] ? parseInt(process.argv[8], 10) : null;
 
 if (!frontDomain || !apiDomain || !frontendPort || !backendPort) {
-    console.error('Usage: node lib/dev-proxy.js <frontDomain> <apiDomain> <frontPort> <backendPort> [pidPath]');
+    console.error('Usage: node lib/dev-proxy.js <frontDomain> <apiDomain> <frontPort> <backendPort> [pidPath] [uiDomain] [uiPort]');
     process.exit(1);
 }
 
@@ -45,6 +47,9 @@ function getTarget(host) {
     if (hostname === frontDomain) {
         return `http://127.0.0.1:${frontendPort}`;
     }
+    if (uiDomain && uiPort && hostname === uiDomain) {
+        return `http://127.0.0.1:${uiPort}`;
+    }
     return null;
 }
 
@@ -71,6 +76,9 @@ server.listen(80, '0.0.0.0', () => {
     console.log('Mango Dev Proxy running on port 80');
     console.log(`  ${frontDomain}  -> http://127.0.0.1:${frontendPort} (frontend)`);
     console.log(`  ${apiDomain}   -> http://127.0.0.1:${backendPort} (backend)`);
+    if (uiDomain && uiPort) {
+        console.log(`  ${uiDomain}   -> http://127.0.0.1:${uiPort} (ui)`);
+    }
 });
 
 // Write PID for cleanup

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mango-cms",
-    "version": "0.3.21",
+    "version": "0.3.23",
     "type": "module",
     "main": "./index.js",
     "exports": {

package/default/src/components/layout/modal.vue

@@ -1,108 +0,0 @@
-<template>
-	<div
-		ref="modal"
-		@click.prevent.stop="close"
-		tabindex="-1"
-		class="fixed w-full h-screen bg-gray-800/50 dark:bg-black/60 backdrop-blur-sm md:backdrop-blur-md opacity-0 transition-all duration-500 flex items-start sm:items-center justify-center z-[100] inset-0 !m-0 overscroll-none cursor-default"
-		:class="{ '!opacity-100': fadeIn }"
-		aria-modal="true"
-		v-show="active"
-		role="dialog"
-	>
-		<button @click.prevent.stop="close" class="absolute top-2 right-3"><i class="fa fa-times md:text-4xl" /></button>
-		<div
-			ref="modalContent"
-			@click.stop
-			class="shadow-card rounded w-full p-4 md:p-8 m-2 dark:bg-gray-800 bg-white relative border dark:border-gray-700 space-y-4 md:space-y-8 max-h-[75vh]"
-			:class="[dialogClasses, maxWidth, allowOverflow ? 'overflow-visible' : 'overflow-y-scroll']"
-		>
-			<slot :close="close" />
-		</div>
-	</div>
-	<!-- max-w-md max-w-lg max-w-xl max-w-sm -->
-</template>
-
-<script>
-export default {
-	props: {
-		dialogClasses: { type: String, default: '' },
-		maxWidth: { default: 'max-w-md' },
-		active: { default: true },
-		allowOverflow: { type: Boolean, default: false },
-	},
-	data() {
-		return {
-			fadeIn: false,
-		}
-	},
-	watch: {
-		active: {
-			handler() {
-				if (this.active) this.freeze()
-				else this.thaw()
-			},
-			immediate: true,
-		},
-	},
-	beforeDestroy() {
-		this.thaw()
-	},
-	unmounted() {
-		this.thaw()
-	},
-	methods: {
-		freeze() {
-			this.$nextTick(() => {
-				this.$refs.modalContent.focus()
-				this.fadeIn = true
-				document.body.style.overflow = 'hidden'
-				document.getElementById('app').setAttribute('aria-hidden', 'true')
-				this.$refs?.modal?.setAttribute('aria-modal', 'true')
-				this.attachListeners()
-			})
-		},
-		thaw() {
-			document.body.style.overflow = ''
-			document.getElementById('app').setAttribute('aria-hidden', 'false')
-			this.$refs?.modal?.removeAttribute('aria-modal')
-			this.removeListeners()
-		},
-		close() {
-			this.fadeIn = false
-			this.thaw()
-			setTimeout(() => {
-				this.$emit('hide')
-			}, 500)
-		},
-		attachListeners() {
-			window.addEventListener('keydown', this.handleKeydown)
-		},
-		removeListeners() {
-			window.removeEventListener('keydown', this.handleKeydown)
-		},
-		handleKeydown(e) {
-			if (e.key === 'Tab') {
-				this.manageFocus(e)
-			} else if (e.key === 'Escape') {
-				this.close()
-			}
-		},
-		manageFocus(e) {
-			let focusable = Array.from(this.$refs.modal.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'))
-			focusable = focusable.filter((el) => window.getComputedStyle(el).display !== 'none')
-			console.log('focusable', focusable)
-
-			if (!focusable.includes(document.activeElement)) {
-				e.preventDefault()
-				focusable[0].focus()
-			} else if (e.shiftKey && document.activeElement === focusable[0]) {
-				e.preventDefault()
-				focusable[focusable.length - 1].focus()
-			} else if (document.activeElement === focusable[focusable.length - 1]) {
-				e.preventDefault()
-				focusable[0].focus()
-			}
-		},
-	},
-}
-</script>

package/default/src/components/layout/spinner.vue

@@ -1,17 +0,0 @@
-<template>
-	<div
-		class="flex justify-center items-center border-transparent"
-		:class="{'w-full h-screen': !small}"
-	>
-		<div class="rounded-full border-4 animate-spin w-full h-full max-w-32 max-h-32 border-inherit" :class="color"/>
-	</div>
-</template>
-
-<script>
-export default {
-	props: {
-        small: {type: Boolean, default: false},
-        color: {default: 'border-t-blue-500'}
-    },
-}
-</script>