Merge branch 'main' into feat/default-theme-settings

nuxt · Jun 21, 2024 · ff49f90 · ff49f90
2 parents 290f50f + d276b31
commit ff49f90
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 691 deletions.
diff --git a/packages/devtools-kit/package.json b/packages/devtools-kit/package.json
@@ -40,7 +40,6 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "nuxt": "^3.9.0",
     "vite": "*"
   },
   "dependencies": {

diff --git a/packages/devtools-ui-kit/package.json b/packages/devtools-ui-kit/package.json
@@ -44,7 +44,6 @@
     "@iconify-json/tabler": "^1.1.111",
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/kit": "^3.11.2",
-    "@nuxtjs/color-mode": "^3.4.1",
     "@unocss/core": "^0.60.0",
     "@unocss/nuxt": "^0.60.0",
     "@unocss/preset-attributify": "^0.60.0",

diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -62,7 +62,7 @@ const radio = ref('a')
             XL Purple
           </NButton>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L44-L58" />
+        <ShowSource src="/playground/pages/index.vue#L44-L66" />
       </NCard>
 
       <NCard class="p4">
@@ -80,7 +80,7 @@ const radio = ref('a')
             XL Disabled
           </NCheckbox>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L68-L76" />
+        <ShowSource src="/playground/pages/index.vue#L68-L84" />
       </NCard>
 
       <NCard class="p4">
@@ -95,7 +95,7 @@ const radio = ref('a')
             nuxt.com
           </NLink>
         </form>
-        <ShowSource src="/playground/pages/index.vue#L86-L91" />
+        <ShowSource src="/playground/pages/index.vue#L86-L99" />
       </NCard>
 
       <NCard class="p4">
@@ -123,7 +123,7 @@ const radio = ref('a')
             Orange
           </NRadio>
         </form>
-        <ShowSource src="/playground/pages/index.vue#L101-L119" />
+        <ShowSource src="/playground/pages/index.vue#L101-L127" />
       </NCard>
 
       <NCard class="p4">
@@ -144,7 +144,7 @@ const radio = ref('a')
             XL
           </NSwitch>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L129-L140" />
+        <ShowSource src="/playground/pages/index.vue#L129-L148" />
       </NCard>
 
       <NCard class="p4">
@@ -162,7 +162,7 @@ const radio = ref('a')
             Error!
           </NTip>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L150-L158" />
+        <ShowSource src="/playground/pages/index.vue#L150-L166" />
       </NCard>
 
       <NCard class="p4">
@@ -184,7 +184,7 @@ const radio = ref('a')
             </div>
           </NDropdown>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L168-L180" />
+        <ShowSource src="/playground/pages/index.vue#L168-L188" />
       </NCard>
 
       <NCard class="p4">
@@ -223,7 +223,7 @@ const radio = ref('a')
             </NButton>
           </div>
         </form>
-        <ShowSource src="/playground/pages/index.vue#L190-L205" />
+        <ShowSource src="/playground/pages/index.vue#L190-L227" />
       </NCard>
 
       <NCard class="p4">
@@ -249,7 +249,7 @@ const radio = ref('a')
             </div>
           </NDialog>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L215-L231" />
+        <ShowSource src="/playground/pages/index.vue#L215-L253" />
       </NCard>
 
       <NCard class="p4">
@@ -259,7 +259,7 @@ const radio = ref('a')
         <div class="flex flex-col gap-2">
           <NLoading />
         </div>
-        <ShowSource src="/playground/pages/index.vue#L246" />
+        <ShowSource src="/playground/pages/index.vue#L255-263" />
       </NCard>
 
       <NCard class="p4">
@@ -279,7 +279,7 @@ const radio = ref('a')
             </option>
           </NSelect>
         </div>
-        <ShowSource src="/playground/pages/index.vue#L263" />
+        <ShowSource src="/playground/pages/index.vue#L265-283" />
       </NCard>
 
       <NCard class="p4">
@@ -297,7 +297,7 @@ const radio = ref('a')
             ]"
           />
         </div>
-        <ShowSource src="/playground/pages/index.vue#L263" />
+        <ShowSource src="/playground/pages/index.vue#L285-301" />
       </NCard>
     </div>
   </div>

diff --git a/packages/devtools-ui-kit/src/components/NDarkToggle.vue b/packages/devtools-ui-kit/src/components/NDarkToggle.vue
@@ -3,7 +3,9 @@ import { computed, nextTick } from 'vue'
 
 import { useColorMode } from '@vueuse/core'
 
-const mode = useColorMode({ storageKey: 'nuxt-devtools-color-mode' })
+const mode = useColorMode({
+  storageKey: 'nuxt-devtools-color-mode',
+})
 const isDark = computed<boolean>({
   get() {
     return mode.value === 'dark'
@@ -69,7 +71,7 @@ const context = {
 </script>
 
 <template>
-  <ColorScheme tag="span">
+  <ClientOnly placeholder-tag="span">
     <slot v-bind="context" />
-  </ColorScheme>
+  </ClientOnly>
 </template>
diff --git a/packages/devtools-ui-kit/src/module.ts b/packages/devtools-ui-kit/src/module.ts
@@ -45,7 +45,6 @@ export default defineNuxtModule<ModuleOptions>({
     const resolver = createResolver(import.meta.url)
     await installModule(await resolver.resolvePath('@unocss/nuxt'))
     await installModule(await resolver.resolvePath('@vueuse/nuxt'))
-    await installModule(await resolver.resolvePath('@nuxtjs/color-mode'))
     await installModule(await resolver.resolvePath('v-lazy-show/nuxt'))
   },
 })
diff --git a/packages/devtools/client/components/RoutePathItem.vue b/packages/devtools/client/components/RoutePathItem.vue
@@ -73,7 +73,7 @@ function navigate() {
               </template>
             </div>
           </template>
-          <NButton block n="primary">
+          <NButton type="submit" block n="primary">
             Navigate
           </NButton>
         </form>

diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -14,6 +14,7 @@ const emit = defineEmits<{
 
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
+const colorMode = useColorMode()
 const config = useServerConfig()
 const client = useClient()
 
@@ -544,7 +545,7 @@ const copy = useCopy()
         <JsonEditorVue
           v-else-if="selectedTabInput === 'json'"
           v-model="routeInputBodyJSON"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="colorMode === 'dark' ? 'jse-theme-dark' : 'light'"
           class="json-editor-vue of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

diff --git a/packages/devtools/client/components/ServerTaskDetails.vue b/packages/devtools/client/components/ServerTaskDetails.vue
@@ -16,6 +16,7 @@ const routeInputBodyJSON = ref<any>({ payload: {} })
 const { inputDefaults } = useDevToolsOptions('serverRoutes')
 const [DefineDefaultInputs, UseDefaultInputs] = createReusableTemplate()
 
+const colorMode = useColorMode()
 const config = useServerConfig()
 
 const response = reactive({
@@ -310,7 +311,7 @@ const copy = useCopy()
         <JsonEditorVue
           v-else-if="selectedTabInput === 'json'"
           v-model="routeInputBodyJSON"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="colorMode === 'dark' ? 'jse-theme-dark' : 'light'"
           class="json-editor-vue of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
@@ -88,7 +88,7 @@ async function refresh() {
         v-bind="$attrs"
         class="json-editor-vue"
         :class="[
-          colorMode.value === 'dark' ? 'jse-theme-dark' : '',
+          colorMode === 'dark' ? 'jse-theme-dark' : '',
           name ? '' : '',
         ]"
         :main-menu-bar="false"

diff --git a/packages/devtools/client/components/StorageDetails.vue b/packages/devtools/client/components/StorageDetails.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
 
+const colorMode = useColorMode()
 const nuxtApp = useNuxtApp()
 const router = useRouter()
 const searchString = ref('')
@@ -169,7 +170,7 @@ async function renameCurrentItem() {
         <JsonEditorVue
           v-if="typeof currentItem.content === 'object'"
           v-model="currentItem.updatedContent"
-          :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+          :class="[colorMode === 'dark' ? 'jse-theme-dark' : 'light']"
           class="json-editor-vue h-full of-auto text-sm outline-none"
           v-bind="$attrs"
           :mode="('text' as any)"

diff --git a/packages/devtools/client/components/TimelineArgumentView.vue b/packages/devtools/client/components/TimelineArgumentView.vue
@@ -26,6 +26,7 @@ const OnSetup = defineComponent({
   },
 })
 
+const colorMode = useColorMode()
 const copy = useCopy()
 </script>
 
@@ -69,7 +70,7 @@ const copy = useCopy()
             v-bind="$attrs"
             class="json-editor-vue"
             :class="[
-              $colorMode.value === 'dark' ? 'jse-theme-dark' : '',
+              colorMode === 'dark' ? 'jse-theme-dark' : '',
             ]"
             :main-menu-bar="false"
             :navigation-bar="false"

diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -39,7 +39,6 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "nuxt": "^3.9.0",
     "vite": "*"
   },
   "dependencies": {
@@ -92,7 +91,6 @@
     "@nuxt/content": "^2.12.1",
     "@nuxt/devtools": "workspace:*",
     "@nuxt/test-utils": "3.9.0",
-    "@nuxtjs/color-mode": "^3.4.1",
     "@parcel/watcher": "^2.4.1",
     "@types/markdown-it-link-attributes": "^3.0.5",
     "@types/ua-parser-js": "^0.7.39",