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

package/dist/runtime/dialogs/createDesktopDialogs.js

@@ -0,0 +1,47 @@
+import { useModal } from "#imports";
+import NuxtUIConfirmModal from "../components/dialogs/NuxtUIConfirmModal.vue";
+import NuxtUIAlertModal from "../components/dialogs/NuxtUIAlertModal.vue";
+export function createDesktopDialogs() {
+  return {
+    confirm(opts) {
+      return new Promise((resolve) => {
+        const modal = useModal();
+        const toTrash = opts.extras?.toTrash;
+        modal.open(NuxtUIConfirmModal, {
+          title: opts.title ?? "Confirm",
+          message: typeof opts.message === "string" ? opts.message : opts.message?.message ?? "",
+          acceptLabel: opts.acceptLabel ?? "OK",
+          rejectLabel: opts.rejectLabel ?? "Cancel",
+          toTrash: !!toTrash,
+          onSuccess: () => {
+            modal.close();
+            resolve(true);
+          },
+          onCancel: () => {
+            modal.close();
+            resolve(false);
+          }
+        });
+      });
+    },
+    alert(message, options) {
+      return new Promise((resolve) => {
+        const modal = useModal();
+        modal.open(NuxtUIAlertModal, {
+          title: options?.title ?? "Alert",
+          message,
+          onSuccess: () => {
+            modal.close();
+            resolve();
+          }
+        });
+      });
+    },
+    prompt(message, defaultValue = "") {
+      if (import.meta.server) return Promise.resolve(null);
+      const g = globalThis;
+      const v = typeof g.prompt === "function" ? g.prompt(message, defaultValue) : null;
+      return Promise.resolve(v === null ? null : v);
+    }
+  };
+}

package/dist/runtime/plugins/01.desktop-nuxt-ui-dialogs.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/01.desktop-nuxt-ui-dialogs.client.js

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { DESKTOP_DIALOG_PROVIDER_KEY } from "@owdproject/nuxt/runtime/constants/desktopShellKeys";
+import { createDesktopDialogs } from "../dialogs/createDesktopDialogs.js";
+export default defineNuxtPlugin({
+  name: "owd-kit-nuxt-ui-dialogs",
+  enforce: "pre",
+  setup(nuxtApp) {
+    nuxtApp.vueApp.provide(
+      DESKTOP_DIALOG_PROVIDER_KEY,
+      createDesktopDialogs()
+    );
+  }
+});

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+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'
+
+export { type KitNuxtUiModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,80 @@
 {
   "name": "@owdproject/nuxt-kit-nuxt-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0-alpha.3",
+  "description": "Nuxt UI for OWD themes: dialogs (always) and optional DesktopExplorer* UI (requires @owdproject/nuxt-module-fs; use { explorer: false } for dialogs only).",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "development": "./src/module.ts",
+      "import": "./dist/module.mjs",
+      "default": "./dist/module.mjs"
+    },
+    "./runtime/dialogs/createDesktopDialogs": {
+      "types": "./src/runtime/dialogs/createDesktopDialogs.ts",
+      "import": "./src/runtime/dialogs/createDesktopDialogs.ts"
+    },
+    "./runtime/dialogs/*": {
+      "types": "./src/runtime/dialogs/*",
+      "import": "./src/runtime/dialogs/*"
+    },
+    "./runtime/components/*": {
+      "types": "./src/runtime/components/*",
+      "import": "./src/runtime/components/*"
+    },
+    "./kit/registerTailwindPath": {
+      "types": "./src/kit/registerTailwindPath.ts",
+      "import": "./src/kit/registerTailwindPath.ts"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src/runtime",
+    "src/kit"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "pnpm run dev:prepare",
+    "dev:prepare": "nuxt-module-build build --stub",
+    "build:module": "nuxt-module-build build"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.4.4",
+    "@nuxt/ui": "^2.21.0",
+    "defu": "^6.1.4",
+    "vue3-selecto": "^1.12.3",
+    "@owdproject/nuxt": "^4.0.0-alpha.3"
+  },
+  "devDependencies": {
+    "@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-module-fs": "^4.0.0-alpha.3",
+    "@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/kit/registerTailwindPath.ts

@@ -0,0 +1,44 @@
+import { createResolver } from '@nuxt/kit'
+import type { Nuxt } from '@nuxt/schema'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig {
+    desktopTailwindContent?: string[]
+  }
+}
+
+const DEFAULT_THEME_TAILWIND_GLOBS = [
+  './runtime/components/**/*.{vue,mjs,ts}',
+  './runtime/apps/**/*.{vue,mjs,ts}',
+]
+
+function tailwindContentPaths(nuxt: Nuxt): string[] {
+  nuxt.options.desktopTailwindContent ??= []
+  return nuxt.options.desktopTailwindContent
+}
+
+/**
+ * Register a Tailwind content glob; merged on `tailwindcss:config` when kit installs `@nuxtjs/tailwindcss`.
+ * Call from themes, built-in apps, or extension modules that ship Vue templates with utility classes.
+ */
+export function registerTailwindPath(nuxt: Nuxt, path: string): void {
+  const paths = tailwindContentPaths(nuxt)
+  if (!paths.includes(path)) {
+    paths.push(path)
+  }
+}
+
+/**
+ * Register default theme component globs relative to a theme module root (`import.meta.url`).
+ */
+export function registerThemeTailwindPath(
+  nuxt: Nuxt,
+  moduleUrl: string,
+  glob: string | string[] = DEFAULT_THEME_TAILWIND_GLOBS,
+ ): void {
+  const { resolve } = createResolver(moduleUrl)
+  const globs = Array.isArray(glob) ? glob : [glob]
+  for (const entry of globs) {
+    registerTailwindPath(nuxt, resolve(entry))
+  }
+}

package/src/runtime/components/dialogs/NuxtUIAlertModal.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  title: string
+  message: string
+  onSuccess: () => void
+}>()
+
+const isOpen = ref(true)
+</script>
+
+<template>
+  <UModal v-model="isOpen" prevent-close>
+    <UCard :ui="{ ring: '', divide: 'y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+        </div>
+      </template>
+
+      <div class="flex items-start space-x-4">
+        <div class="text-blue-500 flex-shrink-0 mt-0.5">
+          <UIcon name="i-heroicons-information-circle" class="w-6 h-6" />
+        </div>
+        <div class="text-sm text-gray-600 dark:text-gray-300">
+          {{ message }}
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end">
+          <UButton color="primary" @click="onSuccess">
+            OK
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>

package/src/runtime/components/dialogs/NuxtUIConfirmModal.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  title: string
+  message: string
+  acceptLabel: string
+  rejectLabel: string
+  toTrash?: boolean
+  onSuccess: () => void
+  onCancel: () => void
+}>()
+
+const isOpen = ref(true)
+</script>
+
+<template>
+  <UModal v-model="isOpen" prevent-close>
+    <UCard :ui="{ ring: '', divide: 'y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+        </div>
+      </template>
+
+      <div class="flex items-start space-x-4">
+        <div class="text-amber-500 flex-shrink-0 mt-0.5">
+          <UIcon name="i-heroicons-exclamation-triangle" class="w-6 h-6" />
+        </div>
+        <div class="text-sm text-gray-600 dark:text-gray-300">
+          {{ message }}
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end space-x-2">
+          <UButton color="gray" variant="ghost" @click="onCancel">
+            {{ rejectLabel }}
+          </UButton>
+          <UButton color="primary" @click="onSuccess">
+            {{ acceptLabel }}
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>

package/src/runtime/components/explorer/AddressBar.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import {
+  formatExplorerDisplayPath,
+  parseExplorerVfsPath,
+} from '@owdproject/nuxt-module-fs/runtime/utils/utilExplorerDisplayPath'
+
+const props = defineProps({
+  address: { type: String, required: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const addressInput = ref(formatExplorerDisplayPath(props.address))
+
+watch(
+  () => props.address,
+  (address) => {
+    addressInput.value = formatExplorerDisplayPath(address)
+  },
+)
+
+function onEnter() {
+  emit('update:modelValue', parseExplorerVfsPath(addressInput.value))
+}
+</script>
+
+<template>
+  <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">
+    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 select-none">
+      {{ $t('apps.explorer.address') }}
+    </span>
+    <UInput
+      v-model="addressInput"
+      class="flex-1"
+      size="sm"
+      color="gray"
+      variant="outline"
+      spellcheck="false"
+      icon="i-heroicons-folder-open"
+      @keydown.enter="onEnter"
+    />
+  </div>
+</template>

package/src/runtime/components/explorer/Chrome.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex flex-col flex-1 min-h-0 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
+    <slot />
+  </div>
+</template>

package/src/runtime/components/explorer/DefaultToolbar.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+defineProps({
+  arrowsDisabled: { type: Boolean, required: true },
+})
+defineEmits([
+  'back',
+  'forward',
+  'up',
+  'cut',
+  'copy',
+  'paste',
+  'delete',
+  'properties',
+])
+</script>
+
+<template>
+  <div class="flex items-center space-x-1 p-2 bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+    <UButton
+      icon="i-heroicons-arrow-left"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      :disabled="arrowsDisabled"
+      @click="$emit('back')"
+      :title="$t('apps.explorer.action.back')"
+    />
+    <UButton
+      icon="i-heroicons-arrow-right"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      :disabled="arrowsDisabled"
+      @click="$emit('forward')"
+      :title="$t('apps.explorer.action.forward')"
+    />
+    <UButton
+      icon="i-heroicons-arrow-up-circle"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      @click="$emit('up')"
+      :title="$t('apps.explorer.action.up')"
+    />
+
+    <div class="border-l border-gray-200 dark:border-gray-800 h-5 mx-1" />
+
+    <UButton
+      icon="i-heroicons-scissors"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      @click="$emit('cut')"
+      :title="$t('apps.explorer.action.cut')"
+    />
+    <UButton
+      icon="i-heroicons-document-duplicate"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      @click="$emit('copy')"
+      :title="$t('apps.explorer.action.copy')"
+    />
+    <UButton
+      icon="i-heroicons-clipboard"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      @click="$emit('paste')"
+      :title="$t('apps.explorer.action.paste')"
+    />
+    <UButton
+      icon="i-heroicons-trash"
+      color="red"
+      variant="ghost"
+      size="sm"
+      @click="$emit('delete')"
+      :title="$t('apps.explorer.action.delete')"
+    />
+
+    <div class="border-l border-gray-200 dark:border-gray-800 h-5 mx-1" />
+
+    <UButton
+      icon="i-heroicons-information-circle"
+      color="gray"
+      variant="ghost"
+      size="sm"
+      @click="$emit('properties')"
+      :title="$t('apps.explorer.action.properties')"
+    />
+  </div>
+</template>

package/src/runtime/components/explorer/FileContextMenu.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { explorerEntryAbsolutePath } from '@owdproject/nuxt-module-fs/runtime/utils/utilExplorerEntryPath'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  fileName: string
+  window: any
+  isDirectory?: boolean
+  openPathInNewTab?: (p: string) => void
+}>()
+
+const emit = defineEmits(['open', 'rename'])
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({} as any) })
+
+const entryPath = computed(() =>
+  explorerEntryAbsolutePath(
+    props.window.fsExplorer.basePath.value,
+    props.fileName,
+  ),
+)
+
+function selectEntry() {
+  props.window.fsExplorer.selectFiles([entryPath.value])
+}
+
+const items = computed(() => [
+  [
+    {
+      label: t('fs.contextMenu.open'),
+      click: () => {
+        emit('open', props.fileName)
+      },
+    }
+  ],
+  [
+    {
+      label: t('fs.contextMenu.cut'),
+      click: () => {
+        selectEntry()
+        props.window.fsExplorer.cutSelectedFiles()
+      },
+    },
+    {
+      label: t('fs.contextMenu.copy'),
+      click: () => {
+        selectEntry()
+        props.window.fsExplorer.copySelectedFiles()
+      },
+    }
+  ],
+  [
+    {
+      label: t('fs.contextMenu.delete'),
+      click: () => {
+        selectEntry()
+        props.window.fsExplorer.fsController.deleteSelectedFiles()
+      },
+    },
+    {
+      label: t('fs.contextMenu.rename'),
+      click: () => {
+        emit('rename', props.fileName)
+      },
+    }
+  ]
+])
+
+function show(event: MouseEvent) {
+  event.preventDefault()
+  virtualElement.value = {
+    getBoundingClientRect: () => ({
+      width: 0,
+      height: 0,
+      top: event.clientY,
+      right: event.clientX,
+      bottom: event.clientY,
+      left: event.clientX,
+    }) as any
+  }
+  isOpen.value = true
+}
+
+defineExpose({
+  show,
+})
+</script>
+
+<template>
+  <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
+    <UCard :ui="{ body: { padding: 'p-1' } }">
+      <UVerticalNavigation :links="[items[0], items[1], items[2]]" />
+    </UCard>
+  </UContextMenu>
+</template>