@owdproject/nuxt-theme-ui 0.0.0-stage → 4.0.0-alpha.3

package/dist/runtime/composables/useNuxtStartMenu.js

@@ -0,0 +1,57 @@
+import { ref, computed } from "vue";
+import { useScrollLock } from "@vueuse/core";
+import { useApplicationManager } from "@owdproject/nuxt/runtime/composables/useApplicationManager";
+import { useApplicationEntries } from "@owdproject/nuxt/runtime/composables/useApplicationEntries";
+const open = ref(false);
+const searchQuery = ref("");
+function isValidEntry(entry) {
+  return Boolean(entry?.application?.id && entry.command);
+}
+export function useNuxtStartMenu() {
+  const applicationManager = useApplicationManager();
+  const applicationEntries = useApplicationEntries();
+  const bodyScrollLock = useScrollLock(
+    typeof document !== "undefined" ? document.body : null
+  );
+  const allEntries = computed(() => {
+    return applicationEntries.sortedAppEntries("title", "primary").value.filter(isValidEntry);
+  });
+  const filteredEntries = computed(() => {
+    const q = searchQuery.value.trim().toLowerCase();
+    const entries = allEntries.value;
+    if (!q) return entries;
+    return entries.filter(
+      (entry) => (entry.title ?? "").toLowerCase().includes(q)
+    );
+  });
+  function syncScrollLock() {
+    bodyScrollLock.value = open.value;
+  }
+  function toggle() {
+    open.value = !open.value;
+    searchQuery.value = "";
+    syncScrollLock();
+  }
+  function close() {
+    open.value = false;
+    searchQuery.value = "";
+    bodyScrollLock.value = false;
+  }
+  async function launchEntry(entry) {
+    if (!isValidEntry(entry)) return;
+    await applicationManager.execAppCommand(
+      entry.application.id,
+      entry.command
+    );
+    close();
+  }
+  return {
+    open,
+    searchQuery,
+    allEntries,
+    filteredEntries,
+    toggle,
+    close,
+    launchEntry
+  };
+}

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@owdproject/nuxt-theme-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0-alpha.3",
+  "description": "Nuxt UI theme for Open Web Desktop",
+  "keywords": [
+    "owd-client",
+    "owd-themes",
+    "owd-modules"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "development": "./src/module.ts",
+      "import": "./dist/module.mjs",
+      "default": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "nx": {
+    "name": "theme-nuxt"
+  },
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "pnpm run dev:prepare",
+    "dev:prepare": "nuxt-module-build build --stub"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.4.4",
+    "@owdproject/nuxt-kit-nuxt-ui": "^4.0.0-alpha.3",
+    "defu": "^6.1.4",
+    "@owdproject/nuxt": "^4.0.0-alpha.3"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.2.4",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.4.4",
+    "@owdproject/core": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-module-fs": "^4.0.0-alpha.3",
+    "nuxt": "^4.4.4",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "@owdproject/core": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-kit-nuxt-ui": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-module-fs": "^4.0.0-alpha.3",
+    "nuxt": "^4.4.4",
+    "@owdproject/nuxt": "^4.0.0-alpha.3"
+  },
+  "peerDependenciesMeta": {
+    "@owdproject/nuxt-module-fs": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/i18n/locales/en.ts

@@ -0,0 +1 @@
+export default {}

package/src/module.ts

@@ -0,0 +1,69 @@
+import { existsSync } from 'node:fs'
+import {
+  createResolver,
+  addComponentsDir,
+  installModule,
+  addImportsDir,
+  addPlugin,
+} from '@nuxt/kit'
+import { defineDesktopTheme } from '@owdproject/nuxt'
+import {
+  registerTailwindPath,
+  registerThemeTailwindPath,
+} from '@owdproject/nuxt-kit-nuxt-ui/kit/registerTailwindPath'
+import { installNuxtBuiltInApps } from './runtime/apps/installBuiltInApps'
+
+export default defineDesktopTheme({
+  meta: {
+    name: 'desktop-theme-nuxt',
+  },
+  defaults: {
+    name: 'nuxt',
+    systemBar: {
+      enabled: true,
+      position: 'top',
+      startButton: true,
+    },
+    windows: {
+      position: 'fixed',
+    },
+  },
+  async setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+
+    // Install the Nuxt UI kit module
+    await installModule('@owdproject/nuxt-kit-nuxt-ui')
+
+    // Register Tailwind content scan paths for theme-nuxt components and pages
+    registerThemeTailwindPath(nuxt, import.meta.url)
+    registerTailwindPath(nuxt, resolve('./runtime/pages/**/*.{vue,mjs,ts}'))
+
+    // Add theme components
+    addComponentsDir({
+      path: resolve('./runtime/components'),
+      pathPrefix: false,
+    })
+
+    // Register i18n module localization if present
+    nuxt.hook('i18n:registerModule', (register) => {
+      register({
+        langDir: resolve('./i18n'),
+        locales: [
+          {
+            code: 'en',
+            file: existsSync(resolve('./i18n/locales/en.js')) ? 'locales/en.js' : 'locales/en.ts',
+          },
+        ],
+      })
+    })
+
+    // Register theme dirs
+    addImportsDir(resolve('./runtime/composables'))
+    addImportsDir(resolve('./runtime/consts'))
+    addImportsDir(resolve('./runtime/stores'))
+    addImportsDir(resolve('./runtime/utils'))
+
+    // Install built-in apps (Explorer, Calculator, Notepad)
+    installNuxtBuiltInApps(nuxt, import.meta.url)
+  },
+})

package/src/runtime/apps/calculator/app.config.ts

@@ -0,0 +1,35 @@
+export default {
+  id: 'org.owdproject.calculator',
+  title: 'Calculator',
+  singleton: false,
+  icon: 'i-heroicons-calculator',
+  provides: {
+    name: 'calculator',
+    entry: 'calculator',
+  },
+  windows: {
+    main: {
+      component: () => import('./components/Window/WindowCalculator.vue'),
+      resizable: false,
+      size: {
+        width: 260,
+        height: 380,
+      },
+      position: {
+        x: 200,
+        y: 150,
+        z: 0,
+      },
+    },
+  },
+  entries: {
+    calculator: {
+      command: 'calculator',
+    },
+  },
+  commands: {
+    calculator: (app: any) => {
+      app.openWindow('main')
+    },
+  },
+}

package/src/runtime/apps/calculator/components/Window/WindowCalculator.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  window: any
+}>()
+
+const display = ref('0')
+const equation = ref('')
+const isFinished = ref(false)
+
+const buttons = [
+  ['C', '(', ')', '/'],
+  ['7', '8', '9', '*'],
+  ['4', '5', '6', '-'],
+  ['1', '2', '3', '+'],
+  ['0', '.', '=', '']
+]
+
+function handleClick(val: string) {
+  if (val === '=') {
+    calculate()
+  } else if (val === 'C') {
+    clear()
+  } else if (val === '') {
+    // Spacer button
+  } else {
+    append(val)
+  }
+}
+
+function append(val: string) {
+  if (isFinished.value) {
+    display.value = ''
+    isFinished.value = false
+  }
+  if (display.value === '0' && val !== '.') {
+    display.value = val
+  } else {
+    display.value += val
+  }
+}
+
+function clear() {
+  display.value = '0'
+  equation.value = ''
+  isFinished.value = false
+}
+
+function calculate() {
+  try {
+    const expr = display.value
+    // Safe evaluation for basic arithmetic only
+    if (/^[0-9+\-*/().\s]+$/.test(expr)) {
+      // eslint-disable-next-line no-eval
+      const res = eval(expr)
+      equation.value = expr + ' ='
+      display.value = String(res)
+      isFinished.value = true
+    } else {
+      display.value = 'Error'
+    }
+  } catch (e) {
+    display.value = 'Error'
+  }
+}
+</script>
+
+<template>
+  <DesktopWindow :window="window" class="h-full bg-gray-50 dark:bg-gray-950 flex flex-col p-3">
+    <!-- Calculator screen -->
+    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg p-3 mb-3 text-right shadow-inner flex-shrink-0">
+      <div class="text-xs text-gray-400 dark:text-gray-500 h-4 mb-0.5 truncate">{{ equation }}</div>
+      <div class="text-2xl font-bold font-mono text-gray-800 dark:text-gray-100 truncate">{{ display }}</div>
+    </div>
+
+    <!-- Buttons Grid -->
+    <div class="grid grid-cols-4 gap-2 flex-1">
+      <template v-for="(row, rIdx) in buttons" :key="rIdx">
+        <template v-for="(btn, bIdx) in row" :key="bIdx">
+          <UButton
+            v-if="btn !== ''"
+            :label="btn"
+            size="md"
+            class="flex items-center justify-center font-bold text-sm h-11 w-full"
+            :color="btn === '=' ? 'primary' : btn === 'C' ? 'red' : ['/', '*', '-', '+'].includes(btn) ? 'orange' : 'gray'"
+            variant="solid"
+            @click="handleClick(btn)"
+          />
+          <div v-else class="h-11 w-full" />
+        </template>
+      </template>
+    </div>
+  </DesktopWindow>
+</template>

package/src/runtime/apps/calculator/plugin.ts

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { defineDesktopApp } from '@owdproject/nuxt/kit/defineDesktopApp'
+import configAppCalculator from './app.config'
+
+export default defineNuxtPlugin({
+  name: 'desktop-theme-nuxt-calculator',
+  dependsOn: ['pinia', 'desktop-shell-init'],
+  async setup() {
+    if (import.meta.server) return
+    await defineDesktopApp(configAppCalculator)
+  },
+})

package/src/runtime/apps/explorer/app.config.ts

@@ -0,0 +1,39 @@
+export default {
+  id: 'org.owdproject.explorer',
+  title: 'Explorer',
+  singleton: false,
+  icon: 'i-heroicons-folder-open',
+  provides: {
+    name: 'explorer',
+    entry: 'explorer',
+  },
+  windows: {
+    main: {
+      component: () => import('./components/Window/WindowExplorer.vue'),
+      resizable: true,
+      size: {
+        width: 720,
+        height: 480,
+        minWidth: 560,
+        minHeight: 440,
+      },
+      position: {
+        x: 120,
+        y: 80,
+        z: 0,
+      },
+    },
+  },
+  entries: {
+    explorer: {
+      command: 'explorer /',
+    },
+  },
+  commands: {
+    explorer: (app: any, args: any) => {
+      const a = args as { _?: string[] } | undefined
+      const pathArg = a?._?.[1]
+      app.openWindow('main', undefined, { path: pathArg ?? '/' })
+    },
+  },
+}

package/src/runtime/apps/explorer/components/Window/WindowExplorer.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { inject } from 'vue'
+import { DESKTOP_DIALOG_PROVIDER_KEY } from '@owdproject/nuxt/runtime/constants/desktopShellKeys'
+import { createExplorerWindowMenuItems } from '@owdproject/nuxt-module-fs/runtime/composables/useExplorerWindowMenu'
+
+const props = defineProps<{
+  window: any
+}>()
+
+const { t } = useI18n()
+const dialogs = inject<any>(DESKTOP_DIALOG_PROVIDER_KEY)
+
+const explorerMenu = createExplorerWindowMenuItems(
+  () => props.window,
+  t,
+  () => {
+    dialogs?.alert('Nuxt UI theme explorer powered by module-fs!', { title: 'About Explorer' })
+  }
+)
+
+props.window.setMenu(explorerMenu)
+</script>
+
+<template>
+  <DesktopExplorerWorkspace
+    :window="window"
+    frame-class="nuxt-explorer-frame"
+  >
+    <template #nav>
+      <DesktopWindowNav />
+    </template>
+  </DesktopExplorerWorkspace>
+</template>

package/src/runtime/apps/explorer/plugin.ts

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { defineDesktopApp } from '@owdproject/nuxt/kit/defineDesktopApp'
+import configAppExplorer from './app.config'
+
+export default defineNuxtPlugin({
+  name: 'desktop-theme-nuxt-explorer',
+  dependsOn: ['pinia', 'desktop-shell-init'],
+  async setup() {
+    if (import.meta.server) return
+    await defineDesktopApp(configAppExplorer)
+  },
+})

package/src/runtime/apps/installBuiltInApps.ts

@@ -0,0 +1,36 @@
+import {
+  addComponentsDir,
+  addPlugin,
+  createResolver,
+} from '@nuxt/kit'
+import type { Nuxt } from '@nuxt/schema'
+import { registerTailwindPath } from '@owdproject/nuxt-kit-nuxt-ui/kit/registerTailwindPath'
+import { NUXT_THEME_BUILTIN_APPS } from './registry'
+
+/** Register autoload built-in apps from `runtime/apps/<name>/`. */
+export function installNuxtBuiltInApps(nuxt: Nuxt, themeRoot: string) {
+  const { resolve } = createResolver(themeRoot)
+
+  for (const app of NUXT_THEME_BUILTIN_APPS) {
+    if (!app.autoload) continue
+    if (app.when && !app.when(nuxt)) continue
+
+    const appRoot = resolve(`./runtime/apps/${app.name}`)
+
+    addPlugin({
+      src: resolve(appRoot, 'plugin'),
+      mode: 'client',
+      name: `desktop-theme-nuxt-${app.name}`,
+      order: 1,
+    })
+
+    addComponentsDir({
+      path: resolve(appRoot, 'components'),
+    })
+
+    registerTailwindPath(
+      nuxt,
+      resolve(appRoot, 'components/**/*.{vue,mjs,ts}'),
+    )
+  }
+}

package/src/runtime/apps/notepad/app.config.ts

@@ -0,0 +1,35 @@
+export default {
+  id: 'org.owdproject.notepad',
+  title: 'Notepad',
+  singleton: false,
+  icon: 'i-heroicons-document-text',
+  provides: {
+    name: 'notepad',
+    entry: 'notepad',
+  },
+  windows: {
+    main: {
+      component: () => import('./components/Window/WindowNotepad.vue'),
+      resizable: true,
+      size: {
+        width: 600,
+        height: 400,
+      },
+      position: {
+        x: 180,
+        y: 120,
+        z: 0,
+      },
+    },
+  },
+  entries: {
+    notepad: {
+      command: 'notepad',
+    },
+  },
+  commands: {
+    notepad: (app: any) => {
+      app.openWindow('main')
+    },
+  },
+}

package/src/runtime/apps/notepad/components/Window/WindowNotepad.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  window: any
+}>()
+
+const text = ref('')
+
+function clear() {
+  text.value = ''
+}
+</script>
+
+<template>
+  <DesktopWindow :window="window" class="h-full bg-white dark:bg-gray-950 flex flex-col">
+    <!-- Toolbar -->
+    <div class="flex items-center space-x-2 p-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex-shrink-0">
+      <UButton
+        icon="i-heroicons-document"
+        label="New"
+        color="gray"
+        variant="ghost"
+        size="xs"
+        @click="clear"
+      />
+      <UButton
+        icon="i-heroicons-trash"
+        label="Clear"
+        color="red"
+        variant="ghost"
+        size="xs"
+        @click="clear"
+      />
+    </div>
+
+    <!-- Text area -->
+    <div class="flex-1 min-h-0">
+      <textarea
+        v-model="text"
+        class="w-full h-full p-4 resize-none outline-none border-0 text-sm font-mono bg-transparent text-gray-800 dark:text-gray-200"
+        placeholder="Type here..."
+      />
+    </div>
+  </DesktopWindow>
+</template>

package/src/runtime/apps/notepad/plugin.ts

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { defineDesktopApp } from '@owdproject/nuxt/kit/defineDesktopApp'
+import configAppNotepad from './app.config'
+
+export default defineNuxtPlugin({
+  name: 'desktop-theme-nuxt-notepad',
+  dependsOn: ['pinia', 'desktop-shell-init'],
+  async setup() {
+    if (import.meta.server) return
+    await defineDesktopApp(configAppNotepad)
+  },
+})

package/src/runtime/apps/registry.ts

@@ -0,0 +1,21 @@
+import type { Nuxt } from '@nuxt/schema'
+
+export type NuxtThemeBuiltInApp = {
+  name: string
+  autoload: boolean
+  when?: (nuxt: Nuxt) => boolean
+}
+
+export function hasModuleFs(nuxt: Nuxt): boolean {
+  const desktop = nuxt.options.runtimeConfig.public.desktop as {
+    modules?: string[]
+  }
+  const modules = desktop?.modules ?? []
+  return modules.some((m) => String(m).includes('nuxt-fs'))
+}
+
+export const NUXT_THEME_BUILTIN_APPS: NuxtThemeBuiltInApp[] = [
+  { name: 'explorer', autoload: true },
+  { name: 'calculator', autoload: true },
+  { name: 'notepad', autoload: true },
+]

package/src/runtime/components/Background/DesktopBackground.vue

@@ -0,0 +1,3 @@
+<template>
+  <DesktopCoreBackground />
+</template>

package/src/runtime/components/Desktop/DesktopContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useAppConfig } from "nuxt/app";
+import { computed } from "vue";
+
+const appConfig = useAppConfig() as any;
+const classes = computed(() => {
+  const list = ["owd-desktop__content"];
+  const pos = appConfig.desktop?.systemBar?.position;
+  if (pos) {
+    list.push(`owd-desktop__content--system-bar-position-${pos}`);
+  }
+  return list;
+});
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.owd-desktop__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.owd-desktop__content--system-bar-position-top {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.owd-desktop__content--system-bar-position-bottom {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>