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

package/dist/runtime/components/Window/DesktopWindowNav.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { inject, computed } from "vue";
+import { useToggleWindowMaximize } from "@owdproject/nuxt/runtime/composables/useToggleWindowMaximize";
+const windowController = inject("windowController");
+const toggleWindowMaximize = useToggleWindowMaximize();
+function onWindowMinimize() {
+  if (!windowController?.instanced) return;
+  windowController.actions.minimize();
+}
+function onWindowMaximize() {
+  toggleWindowMaximize(windowController);
+}
+function onWindowNavDestroy() {
+  if (!windowController?.instanced) return;
+  windowController.actions.destroy();
+}
+const dropdownItems = computed(() => [
+  [
+    {
+      label: "Minimize",
+      icon: "i-heroicons-minus",
+      click: onWindowMinimize
+    },
+    {
+      label: windowController?.state?.maximized ? "Restore" : "Maximize",
+      icon: "i-heroicons-squares-2x2",
+      click: onWindowMaximize
+    }
+  ],
+  [
+    {
+      label: "Close",
+      icon: "i-heroicons-x-mark",
+      click: onWindowNavDestroy
+    }
+  ]
+]);
+</script>
+
+<template>
+  <DesktopCoreWindowNav
+    class="flex items-center justify-between px-3 py-1.5 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 select-none cursor-default"
+    @dblclick="onWindowMaximize"
+  >
+    <div class="flex items-center space-x-2 min-w-0">
+      <UDropdown :items="dropdownItems" :popper="{ placement: 'bottom-start' }">
+        <UButton
+          v-if="windowController?.icon"
+          :icon="windowController.icon"
+          color="gray"
+          variant="ghost"
+          size="2xs"
+          class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        />
+        <UButton
+          v-else
+          icon="i-heroicons-cog-6-tooth"
+          color="gray"
+          variant="ghost"
+          size="2xs"
+          class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        />
+      </UDropdown>
+
+      <div
+        v-if="windowController?.title"
+        class="text-xs font-semibold text-gray-700 dark:text-gray-300 truncate"
+        v-text="windowController?.title"
+      />
+    </div>
+
+    <div class="flex items-center space-x-1 flex-shrink-0">
+      <UButton
+        v-if="!windowController?.instanced || windowController?.isMinimizable"
+        icon="i-heroicons-minus"
+        size="2xs"
+        color="gray"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        @mousedown.stop
+        @click.stop="onWindowMinimize"
+      />
+      <UButton
+        v-if="windowController?.isMaximizable"
+        icon="i-heroicons-squares-2x2"
+        size="2xs"
+        color="gray"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded"
+        @mousedown.stop
+        @click.stop="onWindowMaximize"
+      />
+      <UButton
+        v-if="!windowController?.instanced || windowController?.isDestroyable"
+        icon="i-heroicons-x-mark"
+        size="2xs"
+        color="red"
+        variant="ghost"
+        class="h-5 w-5 p-0 flex items-center justify-center rounded hover:bg-red-500 hover:text-white"
+        @mousedown.stop
+        @click.stop="onWindowNavDestroy"
+      />
+    </div>
+  </DesktopCoreWindowNav>
+</template>

package/dist/runtime/components/Window/DesktopWindowNav.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useNuxtStartMenu.d.ts

@@ -0,0 +1,9 @@
+export declare function useNuxtStartMenu(): {
+    open: import("vue").Ref<boolean, boolean>;
+    searchQuery: import("vue").Ref<string, string>;
+    allEntries: import("vue").ComputedRef<any>;
+    filteredEntries: import("vue").ComputedRef<any>;
+    toggle: () => void;
+    close: () => void;
+    launchEntry: (entry: any) => Promise<void>;
+};

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.4",
+  "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: 420,
+      },
+      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,104 @@
+<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" :content="{ padded: true }">
+    <div class="flex h-full min-h-0 flex-col gap-3">
+      <!-- Calculator screen -->
+      <div
+        class="flex-shrink-0 rounded-lg border border-gray-200 bg-white p-3 text-right shadow-inner dark:border-gray-800 dark:bg-gray-900"
+      >
+        <div class="mb-0.5 h-4 truncate text-xs text-gray-400 dark:text-gray-500">
+          {{ equation }}
+        </div>
+        <div
+          class="truncate font-mono text-2xl font-bold text-gray-800 dark:text-gray-100"
+        >
+          {{ display }}
+        </div>
+      </div>
+
+      <!-- Buttons grid -->
+      <div class="grid grid-cols-4 grid-rows-5 gap-2 flex-1 min-h-0">
+        <template v-for="(row, rIdx) in buttons" :key="rIdx">
+          <template v-for="(btn, bIdx) in row" :key="bIdx">
+            <UButton
+              v-if="btn !== ''"
+              :label="btn"
+              class="flex h-full w-full items-center justify-center text-sm font-semibold"
+              :color="btn === '=' ? 'primary' : btn === 'C' ? 'red' : ['/', '*', '-', '+'].includes(btn) ? 'orange' : 'gray'"
+              variant="solid"
+              @click="handleClick(btn)"
+            />
+            <div v-else />
+          </template>
+        </template>
+      </div>
+    </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')
+    },
+  },
+}