Gemini 3

2025-11-18 23:54:30 +01:00
commit 678d5e6fbd
26 changed files with 12599 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "vitest.explorer",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "oxc.oxc-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -0,0 +1,45 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginVitest from '@vitest/eslint-plugin'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+
+  {
+    name: 'app/custom-rules',
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+
+  ...pluginOxlint.configs['flat/recommended'],
+  skipFormatting,
+)
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "vue-dialog",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix",
+    "lint": "run-s lint:*",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@vue/language-server": "^3.1.4",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@prettier/plugin-oxc": "^0.0.5",
+    "@tsconfig/node22": "^22.0.5",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/eslint-plugin": "^1.4.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-oxlint": "~1.29.0",
+    "eslint-plugin-vue": "~10.5.1",
+    "jiti": "^2.6.1",
+    "jsdom": "^27.2.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.29.0",
+    "prettier": "3.6.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.0.10",
+    "vue-tsc": "^3.1.4"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DialogProvider from './components/DialogProvider.vue'
+import { useDialog } from './composables/useDialog'
+import UserInputDialog from './components/UserInputDialog.vue'
+
+const { open } = useDialog()
+const lastResult = ref<string>('None')
+
+const triggerDialog = async () => {
+  try {
+    const result = await open(UserInputDialog, {
+      title: 'Change Username',
+      initialValue: 'GentooUser',
+    })
+
+    lastResult.value = `Success: "${result.text}" at ${new Date(result.timestamp).toLocaleTimeString()}`
+  } catch (error) {
+    lastResult.value = 'Rejected/Cancelled'
+    console.log(error)
+  }
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <h1>Vue 3 Dialog Concept</h1>
+    <p>
+      Last Result: <code>{{ lastResult }}</code>
+    </p>
+
+    <button @click="triggerDialog">Open Dialog</button>
+
+    <!-- The Provider must be present in the tree -->
+    <DialogProvider />
+  </div>
+</template>
+
+<style>
+:root {
+  font-family: sans-serif;
+}
+.app-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  text-align: center;
+}
+</style>
--- a/src/tests/type.tests.ts
+++ b/src/tests/type.tests.ts
@@ -0,0 +1,128 @@
+import { describe, it, expectTypeOf } from 'vitest'
+import { defineComponent } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import type { DialogReturnType, DialogProps } from '../types'
+
+const { open } = useDialog()
+
+describe('Dialog Type Inference', () => {
+  describe('DialogReturnType', () => {
+    it('infers payload from simple defineComponent emits', () => {
+      const Comp = defineComponent({
+        emits: {
+          submit: (payload: { id: number }) => true,
+          cancel: () => true,
+        },
+      })
+
+      expectTypeOf<DialogReturnType<typeof Comp>>().toEqualTypeOf<{ id: number }>()
+    })
+
+    it('infers undefined when submit has no payload (object syntax)', () => {
+      const Comp = defineComponent({
+        emits: {
+          // strict definition: no arguments
+          submit: () => true,
+          cancel: () => true,
+        },
+      })
+
+      // Parameters<() => void>[0] is undefined
+      expectTypeOf<DialogReturnType<typeof Comp>>().toEqualTypeOf<undefined>()
+    })
+
+    it('infers any when submit has implicit payload (array syntax)', () => {
+      const Comp = defineComponent({
+        // array definition implies (...args: any[]) => any
+        emits: ['submit', 'cancel'],
+      })
+
+      expectTypeOf<DialogReturnType<typeof Comp>>().toBeAny()
+    })
+
+    it('infers string payload from script setup simulation', () => {
+      // Simulating a component type with strict $props (like generated by vue-tsc)
+      type ScriptSetupComp = new () => {
+        $props: {
+          onSubmit?: (payload: string) => void
+          onCancel?: () => void
+          someProp: number
+        }
+      }
+
+      expectTypeOf<DialogReturnType<ScriptSetupComp>>().toEqualTypeOf<string>()
+    })
+
+    it('returns void if submit emit is missing', () => {
+      const Comp = defineComponent({
+        emits: {
+          cancel: () => true,
+        },
+      })
+
+      expectTypeOf<DialogReturnType<typeof Comp>>().toEqualTypeOf<void>()
+    })
+  })
+
+  describe('DialogProps', () => {
+    it('extracts props excluding lifecycle emits', () => {
+      const Comp = defineComponent({
+        props: {
+          username: { type: String, required: true },
+          age: Number,
+        },
+        emits: ['submit', 'cancel'],
+      })
+
+      type Props = DialogProps<typeof Comp>
+
+      // Should include defined props
+      expectTypeOf<Props>().toHaveProperty('username')
+      expectTypeOf<Props>().toHaveProperty('age')
+
+      // Should NOT include library-managed listeners
+      expectTypeOf<Props>().not.toHaveProperty('onSubmit')
+      expectTypeOf<Props>().not.toHaveProperty('onCancel')
+    })
+
+    it('allows native attributes if not explicitly excluded', () => {
+      const Comp = defineComponent({})
+      // Native props are usually allowed by component definitions unless strict
+      type Props = DialogProps<typeof Comp>
+
+      // Class and Style are standard component props
+      expectTypeOf<Props>().toHaveProperty('class')
+    })
+  })
+
+  describe('useDialog integration', () => {
+    it('open() returns Promise of inferred type', async () => {
+      const Comp = defineComponent({
+        emits: {
+          submit: (val: boolean) => true,
+        },
+      })
+
+      const result = await open(Comp)
+      expectTypeOf(result).toEqualTypeOf<boolean>()
+    })
+
+    it('open() accepts correct props', () => {
+      const Comp = defineComponent({
+        props: {
+          msg: { type: String, required: true },
+        },
+        emits: ['submit'],
+      })
+
+      // valid
+      open(Comp, { msg: 'hello' })
+
+      // @ts-expect-error missing required prop
+      open(Comp, {})
+
+      // @ts-expect-error wrong prop type
+      open(Comp, { msg: 123 })
+    })
+  })
+})
--- a/src/components/DialogProvider.vue
+++ b/src/components/DialogProvider.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue'
+import { useDialog } from '../composables/useDialog'
+
+const { activeDialogs } = useDialog()
+const dialogRefs = ref<Record<string, HTMLDialogElement>>({})
+
+// Watch for new dialogs to trigger showModal()
+watch(
+  () => activeDialogs.value.length,
+  async (newLen, oldLen) => {
+    if (newLen > oldLen) {
+      await nextTick()
+      const latest = activeDialogs.value[activeDialogs.value.length - 1]
+      if (latest) {
+        dialogRefs.value[latest.id]?.showModal()
+      }
+    }
+  },
+)
+
+const handleClose = (id: string, action: 'resolve' | 'reject', payload?: any) => {
+  const index = activeDialogs.value.findIndex((d) => d.id === id)
+  if (index === -1) return
+
+  const dialog = activeDialogs.value[index]
+  const el = dialogRefs.value[id]
+  if (!dialog) return
+
+  // Trigger close animation if defined in CSS, then cleanup
+  if (el) el.close()
+
+  if (action === 'resolve') {
+    dialog.resolve(payload)
+  } else {
+    dialog.reject(new Error('Dialog closed or cancelled'))
+  }
+
+  // Remove from DOM
+  activeDialogs.value.splice(index, 1)
+  delete dialogRefs.value[id]
+}
+
+// Handle native 'cancel' event (ESC key)
+const onNativeCancel = (e: Event, id: string) => {
+  e.preventDefault() // We handle the close logic manually for consistency
+  handleClose(id, 'reject')
+}
+</script>
+
+<template>
+  <dialog
+    v-for="item in activeDialogs"
+    :key="item.id"
+    :ref="
+      (el) => {
+        if (el) dialogRefs[item.id] = el as HTMLDialogElement
+      }
+    "
+    class="v-dialog-native"
+    @cancel="(e) => onNativeCancel(e, item.id)"
+  >
+    <component
+      :is="item.component"
+      v-bind="item.props"
+      @submit="(payload: any) => handleClose(item.id, 'resolve', payload)"
+      @cancel="() => handleClose(item.id, 'reject')"
+    />
+  </dialog>
+</template>
+
+<style scoped>
+.v-dialog-native {
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  max-width: 90vw;
+  max-height: 90vh;
+}
+
+.v-dialog-native::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+
+/* Optional: Simple entry animation */
+.v-dialog-native[open] {
+  animation: fade-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>
--- a/src/components/UserInputDialog.vue
+++ b/src/components/UserInputDialog.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  title?: string;
+  initialValue?: string;
+}>();
+
+// The return type of open() is inferred from this interface
+const emit = defineEmits<{
+  (e: 'submit', payload: { text: string; timestamp: number }): void;
+  (e: 'cancel'): void;
+}>();
+
+const inputValue = ref(props.initialValue || '');
+
+const handleSubmit = () => {
+  if (!inputValue.value) return;
+  emit('submit', {
+    text: inputValue.value,
+    timestamp: Date.now()
+  });
+};
+</script>
+
+<template>
+  <div class="dialog-content">
+    <h3>{{ title || 'Input Required' }}</h3>
+
+    <input
+      v-model="inputValue"
+      type="text"
+      placeholder="Type something..."
+      autofocus
+      @keyup.enter="handleSubmit"
+    />
+
+    <div class="actions">
+      <button class="btn-cancel" @click="emit('cancel')">Cancel</button>
+      <button class="btn-confirm" @click="handleSubmit">Confirm</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialog-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
+.actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
+button { padding: 0.5rem 1rem; cursor: pointer; }
+</style>
--- a/src/composables/useDialog.ts
+++ b/src/composables/useDialog.ts
@@ -0,0 +1,34 @@
+import { ref, markRaw, type Component } from 'vue'
+import type { DialogInstance, DialogProps, DialogReturnType } from '../types'
+
+// Global state to hold active dialogs
+const activeDialogs = ref<DialogInstance[]>([])
+
+export function useDialog() {
+  /**
+   * Opens a component inside a native <dialog>.
+   * * @param component The Vue component to render. Must emit 'submit' to resolve or 'cancel' to reject.
+   * @param props Props to pass to the component.
+   * @returns A Promise resolved with the payload of the 'submit' event.
+   */
+  const open = <C extends Component>(
+    component: C,
+    props?: DialogProps<C>,
+  ): Promise<DialogReturnType<C>> => {
+    return new Promise((resolve, reject) => {
+      activeDialogs.value.push({
+        id: crypto.randomUUID(),
+        // markRaw is crucial to prevent Vue from making the component definition reactive
+        component: markRaw(component),
+        props: props || {},
+        resolve,
+        reject,
+      })
+    })
+  }
+
+  return {
+    open,
+    activeDialogs, // Exposed for the Provider
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from '@/App.vue'
+
+createApp(App)
+  .mount('#app')
--- a/src/types.ts
+++ b/src/types.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Component } from 'vue'
+
+/**
+ * Helper to infer the 'submit' event payload from the component instance.
+ * * ARGS: Must use 'any[]' for arguments to ensure proper inference (contravariance).
+ * If we used 'unknown[]', it would fail to match specific payload types (e.g., string).
+ * * RETURN: Can use 'unknown' for the return type as it is covariant.
+ */
+export type DialogReturnType<C> = C extends new (...args: any) => any
+  ? InstanceType<C>['$props'] extends infer P
+    ? P extends { onSubmit?: infer F }
+      ? F extends (...args: any[]) => unknown
+        ? Parameters<F>[0]
+        : void
+      : void
+    : void
+  : void
+
+/**
+ * Helper to extract props from the component definition.
+ */
+export type DialogProps<C> = C extends new (...args: any) => any
+  ? Omit<InstanceType<C>['$props'], 'onSubmit' | 'onCancel'>
+  : never
+
+export interface DialogInstance {
+  id: string
+  component: Component
+  // Must be 'any' to allow v-bind to accept the object without strict type checking against the component definition
+  props: Record<string, any>
+  // Must be 'any' because this interface erases the generic type 'T' of the Promise.
+  // (val: string) => void is assignable to (val: any) => void, but NOT to (val: unknown) => void.
+  resolve: (val: any) => void
+  reject: (reason?: any) => void
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
+	"include": [
+		"env.d.ts",
+		"src/**/*",
+		"src/**/*.vue"
+	],
+	"exclude": [
+		"src/**/__tests__/*"
+	],
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"target": "esnext",
+		"module": "esnext",
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"strict": true,
+		"noEmit": true,
+
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
+	}
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["src/**/__tests__/*", "env.d.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+)