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

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface KitNuxtUiModuleOptions {
+    /**
+     * Register `DesktopExplorer*` components (Workspace, FileEntry, …).
+     * Requires `@owdproject/nuxt-module-fs` in the app when enabled (default).
+     * Set `false` for Nuxt UI + dialogs only.
+     */
+    explorer?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<KitNuxtUiModuleOptions, KitNuxtUiModuleOptions, false>;
+
+export { _default as default };
+export type { KitNuxtUiModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "desktop-kit-nuxt-ui",
+  "configKey": "kitNuxtUi",
+  "version": "4.0.0-alpha.4",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,112 @@
+import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+function tailwindContentPaths(nuxt) {
+  nuxt.options.desktopTailwindContent ??= [];
+  return nuxt.options.desktopTailwindContent;
+}
+function registerTailwindPath(nuxt, path) {
+  const paths = tailwindContentPaths(nuxt);
+  if (!paths.includes(path)) {
+    paths.push(path);
+  }
+}
+
+function resolveNuxtUiDistDir() {
+  try {
+    const resolveMeta = import.meta.resolve;
+    const resolved = resolveMeta?.("@nuxt/ui");
+    if (resolved) {
+      const distDir = dirname(fileURLToPath(resolved));
+      if (existsSync(resolve(distDir, "runtime/ui.config"))) return distDir;
+    }
+  } catch {
+  }
+  return void 0;
+}
+function registerNuxtUiTailwindContent(nuxt) {
+  const distDir = resolveNuxtUiDistDir();
+  if (!distDir) return;
+  registerTailwindPath(nuxt, resolve(distDir, "runtime/components/**/*.{vue,mjs,ts}"));
+  registerTailwindPath(nuxt, resolve(distDir, "runtime/ui.config/**/*.{mjs,js,ts}"));
+}
+function flattenTailwindContentPaths(content) {
+  const paths = [];
+  if (typeof content === "string") {
+    paths.push(content);
+    return paths;
+  }
+  if (Array.isArray(content)) {
+    for (const entry of content) {
+      paths.push(...flattenTailwindContentPaths(entry));
+    }
+    return paths;
+  }
+  if (content && typeof content === "object") {
+    const record = content;
+    if (Array.isArray(record.files)) {
+      for (const entry of record.files) {
+        if (typeof entry === "string") paths.push(entry);
+      }
+    }
+    for (const [key, value] of Object.entries(record)) {
+      if (key === "files") continue;
+      paths.push(...flattenTailwindContentPaths(value));
+    }
+  }
+  return paths;
+}
+function mergeDesktopTailwindContent(nuxt, config) {
+  const registered = [...nuxt.options.desktopTailwindContent ?? []];
+  const prior = flattenTailwindContentPaths(config.content);
+  const merged = [.../* @__PURE__ */ new Set([...prior, ...registered])];
+  if (merged.length > 0) {
+    config.content = { files: merged };
+  }
+  if (nuxt.options.dev && merged.length > 0) {
+    console.info(
+      "[desktop-kit-nuxt-ui] Tailwind content:",
+      merged.length,
+      "paths"
+    );
+  }
+}
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "desktop-kit-nuxt-ui",
+    configKey: "kitNuxtUi"
+  },
+  defaults: {
+    explorer: true
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.hook("tailwindcss:config", (config) => {
+      mergeDesktopTailwindContent(nuxt, config);
+    });
+    await installModule("@nuxt/ui", {
+      global: true
+    });
+    registerNuxtUiTailwindContent(nuxt);
+    addPlugin({
+      src: resolve("./runtime/plugins/01.desktop-nuxt-ui-dialogs.client"),
+      mode: "client",
+      order: 1
+    });
+    if (options.explorer !== false) {
+      addComponentsDir({
+        path: resolve("./runtime/components/explorer"),
+        prefix: "DesktopExplorer",
+        pathPrefix: false
+      });
+      registerTailwindPath(
+        nuxt,
+        resolve("./runtime/components/explorer/**/*.{vue,mjs,ts}")
+      );
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/dialogs/NuxtUIAlertModal.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title: string;
+    message: string;
+    onSuccess: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from "vue";
+defineProps({
+  title: { type: String, required: true },
+  message: { type: String, required: true },
+  onSuccess: { type: Function, required: true }
+});
+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/dist/runtime/components/dialogs/NuxtUIAlertModal.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title: string;
+    message: string;
+    onSuccess: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/dialogs/NuxtUIConfirmModal.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title: string;
+    message: string;
+    acceptLabel: string;
+    rejectLabel: string;
+    toTrash?: boolean;
+    onSuccess: () => void;
+    onCancel: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from "vue";
+defineProps({
+  title: { type: String, required: true },
+  message: { type: String, required: true },
+  acceptLabel: { type: String, required: true },
+  rejectLabel: { type: String, required: true },
+  toTrash: { type: Boolean, required: false },
+  onSuccess: { type: Function, required: true },
+  onCancel: { type: Function, required: true }
+});
+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/dist/runtime/components/dialogs/NuxtUIConfirmModal.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    title: string;
+    message: string;
+    acceptLabel: string;
+    rejectLabel: string;
+    toTrash?: boolean;
+    onSuccess: () => void;
+    onCancel: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/explorer/AddressBar.d.vue.ts

@@ -0,0 +1,17 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+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/dist/runtime/components/explorer/AddressBar.vue.d.ts

@@ -0,0 +1,17 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    address: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/explorer/Chrome.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/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/dist/runtime/components/explorer/Chrome.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/explorer/DefaultToolbar.d.vue.ts

@@ -0,0 +1,31 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    arrowsDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    back: (...args: any[]) => void;
+    forward: (...args: any[]) => void;
+    up: (...args: any[]) => void;
+    cut: (...args: any[]) => void;
+    copy: (...args: any[]) => void;
+    paste: (...args: any[]) => void;
+    delete: (...args: any[]) => void;
+    properties: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    arrowsDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onBack?: ((...args: any[]) => any) | undefined;
+    onForward?: ((...args: any[]) => any) | undefined;
+    onUp?: ((...args: any[]) => any) | undefined;
+    onCut?: ((...args: any[]) => any) | undefined;
+    onCopy?: ((...args: any[]) => any) | undefined;
+    onPaste?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onProperties?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,92 @@
+<script setup>
+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/dist/runtime/components/explorer/DefaultToolbar.vue.d.ts

@@ -0,0 +1,31 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    arrowsDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    back: (...args: any[]) => void;
+    forward: (...args: any[]) => void;
+    up: (...args: any[]) => void;
+    cut: (...args: any[]) => void;
+    copy: (...args: any[]) => void;
+    paste: (...args: any[]) => void;
+    delete: (...args: any[]) => void;
+    properties: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    arrowsDisabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onBack?: ((...args: any[]) => any) | undefined;
+    onForward?: ((...args: any[]) => any) | undefined;
+    onUp?: ((...args: any[]) => any) | undefined;
+    onCut?: ((...args: any[]) => any) | undefined;
+    onCopy?: ((...args: any[]) => any) | undefined;
+    onPaste?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onProperties?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/explorer/FileContextMenu.d.vue.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    fileName: string;
+    window: any;
+    isDirectory?: boolean;
+    openPathInNewTab?: (p: string) => void;
+};
+declare function show(event: MouseEvent): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    rename: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onRename?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,90 @@
+<script setup>
+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: { type: String, required: true },
+  window: { type: null, required: true },
+  isDirectory: { type: Boolean, required: false },
+  openPathInNewTab: { type: Function, required: false }
+});
+const emit = defineEmits(["open", "rename"]);
+const isOpen = ref(false);
+const virtualElement = ref({ getBoundingClientRect: () => ({}) });
+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) {
+  event.preventDefault();
+  virtualElement.value = {
+    getBoundingClientRect: () => ({
+      width: 0,
+      height: 0,
+      top: event.clientY,
+      right: event.clientX,
+      bottom: event.clientY,
+      left: event.clientX
+    })
+  };
+  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>

package/dist/runtime/components/explorer/FileContextMenu.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    fileName: string;
+    window: any;
+    isDirectory?: boolean;
+    openPathInNewTab?: (p: string) => void;
+};
+declare function show(event: MouseEvent): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    show: typeof show;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    rename: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onRename?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;