fix(core): add custom confirm for reset buttons in popup mode

Author: webfansplz

packages/core/src/client/webcomponents/.generated/css.ts

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ConfirmPromise } from '../../state/confirm'
+
+function resolveConfirm(resolve: (value: boolean) => void, value: boolean) {
+  resolve(value)
+}
+</script>
+
+<template>
+  <ConfirmPromise v-slot="{ resolve, args: [options] }">
+    <div
+      class="fixed inset-0 z-2147483647 flex items-center justify-center p-4 color-base"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="options.title ? 'vite-devtools-confirm-title' : undefined"
+      aria-describedby="vite-devtools-confirm-message"
+      @keydown.esc.prevent.stop="resolveConfirm(resolve, false)"
+    >
+      <div
+        class="absolute inset-0 bg-black/30 dark:bg-black/45 backdrop-blur-1 cursor-default"
+        aria-hidden="true"
+        @click="resolveConfirm(resolve, false)"
+      />
+
+      <div class="relative w-full max-w-96 bg-base border border-base rounded-lg shadow-xl p-5">
+        <h3 v-if="options.title" id="vite-devtools-confirm-title" class="text-sm font-medium leading-5">
+          {{ options.title }}
+        </h3>
+        <p
+          id="vite-devtools-confirm-message"
+          class="text-xs op60 leading-5"
+          :class="options.title ? 'mt-1.5' : ''"
+        >
+          {{ options.message }}
+        </p>
+
+        <div class="flex items-center justify-end gap-2 mt-6">
+          <button
+            type="button"
+            class="px-3 py-1.5 rounded text-xs op60 hover:op100 hover:bg-gray/10 transition-colors"
+            @click="resolveConfirm(resolve, false)"
+          >
+            {{ options.cancelText ?? 'Cancel' }}
+          </button>
+          <button
+            type="button"
+            autofocus
+            class="px-3 py-1.5 rounded text-xs transition-colors bg-primary/15 text-primary hover:bg-primary/25"
+            @click="resolveConfirm(resolve, true)"
+          >
+            {{ options.confirmText ?? 'OK' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </ConfirmPromise>
+</template>

packages/core/src/client/webcomponents/components/display/Confirm.vue

@@ -5,6 +5,7 @@ import { onUnmounted, ref } from 'vue'
 import { sharedStateToRef } from '../../state/docks'
 import { closeDockPopup, useIsDockPopupOpen } from '../../state/popup'
 import CommandPalette from '../command-palette/CommandPalette.vue'
+import Confirm from '../display/Confirm.vue'
 import ToastOverlay from '../display/ToastOverlay.vue'
 import FloatingElements from '../floating/FloatingElements.vue'
 import Dock from './Dock.vue'
@@ -67,6 +68,7 @@ onUnmounted(() => {
       </Dock>
     </template>
     <FloatingElements />
+    <Confirm />
   </template>
   <CommandPalette :context />
   <ToastOverlay :context />

packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue

@@ -3,6 +3,7 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed, markRaw, ref, useTemplateRef, watch } from 'vue'
 import { PersistedDomViewsManager } from '../../utils/PersistedDomViewsManager'
 import CommandPalette from '../command-palette/CommandPalette.vue'
+import Confirm from '../display/Confirm.vue'
 import ToastOverlay from '../display/ToastOverlay.vue'
 import FloatingElements from '../floating/FloatingElements.vue'
 import VitePlus from '../icons/VitePlus.vue'
@@ -79,5 +80,6 @@ function switchEntry(id: string | undefined) {
   </div>
   <FloatingElements />
   <CommandPalette :context />
+  <Confirm />
   <ToastOverlay :context />
 </template>

packages/core/src/client/webcomponents/components/dock/DockStandalone.vue

@@ -3,33 +3,42 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { SharedState } from 'devframe/utils/shared-state'
 import type { DevToolsDocksUserSettings } from '../../state/dock-settings'
 import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
+import { useConfirm } from '../../state/confirm'
 
 const props = defineProps<{
   context: DocksContext
   settingsStore: SharedState<DevToolsDocksUserSettings>
 }>()
 
-function resetAllSettings() {
-  // eslint-disable-next-line no-alert
-  if (confirm('Reset all settings to defaults? This includes appearance, docks, and shortcuts.')) {
+const confirm = useConfirm()
+
+async function resetAllSettings() {
+  if (await confirm({
+    title: 'Reset All Settings',
+    message: 'Reset all settings to defaults? This includes appearance, docks, and shortcuts.',
+  })) {
     props.settingsStore.mutate(() => {
       return DEFAULT_STATE_USER_SETTINGS()
     })
   }
 }
 
-function resetShortcuts() {
-  // eslint-disable-next-line no-alert
-  if (confirm('Reset all keyboard shortcuts to defaults?')) {
+async function resetShortcuts() {
+  if (await confirm({
+    title: 'Reset Keyboard Shortcuts',
+    message: 'Reset all keyboard shortcuts to defaults?',
+  })) {
     props.settingsStore.mutate((state) => {
       state.commandShortcuts = {}
     })
   }
 }
 
-function resetDocks() {
-  // eslint-disable-next-line no-alert
-  if (confirm('Reset dock visibility, order, and pinning to defaults?')) {
+async function resetDocks() {
+  if (await confirm({
+    title: 'Reset Dock Settings',
+    message: 'Reset dock visibility, order, and pinning to defaults?',
+  })) {
     props.settingsStore.mutate((state) => {
       const defaults = DEFAULT_STATE_USER_SETTINGS()
       state.docksHidden = defaults.docksHidden

packages/core/src/client/webcomponents/components/views-builtin/SettingsAdvanced.vue

@@ -0,0 +1,16 @@
+import { createTemplatePromise } from '@vueuse/core'
+
+export interface ConfirmOptions {
+  title?: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+}
+
+export const ConfirmPromise = createTemplatePromise<boolean, [ConfirmOptions]>({
+  singleton: true,
+})
+
+export function useConfirm() {
+  return ConfirmPromise.start
+}