@nuxt/devtools-ui-kit 0.4.5 → 0.5.0

package/dist/assets/styles.css

@@ -11,3 +11,81 @@ html.dark {
   background-color: #151515;
   color: white;
 }
+
+::selection {
+  background: #8884;
+}
+
+/* Shiki */
+.shiki .line {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.shiki.diff .line > span {
+  opacity: 0.75;
+  filter: saturate(0.75);
+}
+
+.shiki.diff .line-added,
+.shiki.diff .line-removed {
+  scroll-margin: 5em;
+}
+
+.shiki.diff .line-added > span,
+.shiki.diff .line-removed > span {
+  opacity: 1 !important;
+  z-index: 100;
+  position: inherit;
+  scroll-margin: 20px;
+}
+
+.shiki.diff .line-added > span {
+  color: #218c3b !important;
+}
+
+.shiki.diff .line-removed > span {
+  color: #8c2c21 !important;
+}
+
+.shiki .line-added:after {
+  content: "";
+  background-color: #43885440;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.shiki .line-removed:after {
+  content: "";
+  background-color: #8f4b3950;
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+/* Color Mode transition */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-old(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}

package/dist/components/NCheckbox.vue

@@ -16,7 +16,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="hover:n-checkbox-hover n-checkbox select-none items-center n-disabled:n-disabled"
+    class="n-checkbox hover:n-checkbox-hover select-none items-center n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >

package/dist/components/NCodeBlock.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // This components requires to run in DevTools to render correctly
-import { computed } from 'vue'
+import { computed, nextTick } from 'vue'
 import { devToolsClient } from '../runtime/client'
 
 const props = withDefaults(
@@ -8,11 +8,22 @@ const props = withDefaults(
     code: string
     lang?: string
     lines?: boolean
+    transformRendered?: (code: string) => string
   }>(), {
     lines: true,
   },
 )
-const rendered = computed(() => devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang as string) || { code: props.code, supported: false })
+
+const emit = defineEmits(['loaded'])
+
+const rendered = computed(() => {
+  const result = devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang as string) || { code: props.code, supported: false }
+  if (result.supported && props.transformRendered)
+    result.code = props.transformRendered(result.code)
+  if (result.supported)
+    nextTick(() => emit('loaded'))
+  return result
+})
 </script>
 
 <template>

package/dist/components/NDarkToggle.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useToggle } from '@vueuse/core'
+import { computed, nextTick } from 'vue'
 
 // @ts-expect-error auto imported from @nuxtjs/color-mode
 import { useColorMode } from '#imports'
@@ -14,7 +13,55 @@ const isDark = computed<boolean>({
     mode.preference = isDark.value ? 'light' : 'dark'
   },
 })
-const toggle = useToggle(isDark)
+
+const isAppearanceTransition = typeof document !== 'undefined'
+  // @ts-expect-error: Transition API
+  && document.startViewTransition
+  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+/**
+ * Credit to [@hooray](https://github.com/hooray)
+ * @see https://github.com/vuejs/vitepress/pull/2347
+ */
+function toggle(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}
 const context = {
   mode,
   isDark,

package/dist/components/NDialog.vue

@@ -59,7 +59,7 @@ export default {
         ]"
         @click="close()"
       />
-      <NCard v-bind="$attrs" ref="card">
+      <NCard v-bind="$attrs" ref="card" class="max-h-screen of-auto">
         <slot />
       </NCard>
     </div>

package/dist/components/NDropdown.vue

@@ -15,7 +15,7 @@ onClickOutside(el, () => {
 
 <template>
   <div ref="el" class="relative">
-    <slot name="trigger" :enabled="enabled" @click="enabled = !enabled">
+    <slot name="trigger" :enabled="enabled" :click="() => enabled = !enabled">
       <NButton @click="enabled = !enabled">
         Dropdown
       </NButton>

package/dist/components/NLink.vue

@@ -14,7 +14,7 @@ defineProps<{
   <Component
     :is="(href || target) ? 'a' : NuxtLink"
     v-bind="$props"
-    class="n-link hover:n-link-hover n-transition n-link-base"
+    class="n-link n-transition hover:n-link-hover n-link-base"
   >
     <slot />
   </Component>

package/dist/components/NRadio.vue

@@ -19,7 +19,7 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-radio hover:n-radio-hover inline-flex select-none items-center n-disabled:n-disabled"
+    class="n-radio inline-flex hover:n-radio-hover select-none items-center n-disabled:n-disabled"
     :checked="model === value || null"
     :disabled="disabled || null"
   >

package/dist/components/NSectionBlock.vue

@@ -7,6 +7,7 @@ const props = withDefaults(
     text: string
     description?: string
     containerClass?: string
+    headerClass?: string
     collapse?: boolean
     open?: boolean
     padding?: boolean | string
@@ -27,7 +28,7 @@ function onToggle(e: any) {
 <template>
   <details :open="open" @toggle="onToggle">
     <summary class="cursor-pointer select-none hover:bg-active p4" :class="collapse ? '' : 'pointer-events-none'">
-      <NIconTitle :icon="icon" :text="text" text-xl transition :class="open ? 'op100' : 'op60'">
+      <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
         <div>
           <div text-base>
             <slot name="text">

package/dist/components/NSwitch.vue

@@ -16,7 +16,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-switch n-switch-base n-disabled:n-disabled"
+    class="n-switch n-switch-base hover:n-switch-hover n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >

package/dist/components/NTextExternalLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import NLink from './NLink.vue'
+
+defineProps<{
+  link?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="link ? NLink : 'div'"
+    v-bind="link ? {
+      href: link,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    } : {}"
+  >
+    <slot />
+    <div
+      v-if="link"
+      i-carbon:arrow-up-right translate-y--1 text-xs op50
+    />
+  </component>
+</template>

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "0.4.5"
+  "version": "0.5.0"
 }

package/dist/runtime/client.d.ts

@@ -1 +1 @@
-export declare const devToolsClient: import("vue").Ref<import("@nuxt/devtools-kit/dist/client-api-11f14301").c | undefined>;
+export declare const devToolsClient: import("vue").Ref<import("@nuxt/devtools-kit/dist/client-api-dfe1af35").c | undefined>;

package/dist/types.d.ts

@@ -6,5 +6,10 @@ declare module '@nuxt/schema' {
   interface NuxtOptions { ['devtoolsUIKit']?: ModuleOptions }
 }
 
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['devtoolsUIKit']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['devtoolsUIKit']?: ModuleOptions }
+}
+
 
 export { unocssPreset } from './module'

package/dist/unocss.mjs

@@ -83,7 +83,7 @@ function unocssPreset() {
       "n-borderless": "!border-transparent !shadow-none",
       // link
       "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
-      "n-link-hover": "decoration-dotted text-context underline-context",
+      "n-link-hover": "decoration-dotted text-context underline-context! op100!",
       // card
       "n-card-base": "border n-border-base rounded n-bg-base shadow-sm",
       // header
@@ -94,17 +94,20 @@ function unocssPreset() {
       "n-button-active": "n-active-base bg-context/5",
       "n-button-icon": "-ml-0.2em mr-0.2em text-1.1em",
       // checkbox
-      "n-checkbox": "inline-flex gap-1 items-center",
+      "n-checkbox": "inline-flex gap-1 items-center rounded",
+      "n-checkbox-hover": "op100 n-bg-hover cursor-pointer",
       "n-checkbox-box": "border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible",
       "n-checkbox-box-checked": "bg-context border-context",
       "n-checkbox-icon": "carbon-checkmark w-1em h-1em m-auto",
       // radio
-      "n-radio-box": "border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible",
+      "n-radio-box": "border rounded n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible",
+      "n-radio-hover": "op100 n-bg-hover cursor-pointer",
       "n-radio-box-checked": "border-context",
       "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
       "n-radio-inner-checked": "w-0.8em h-0.8em",
       // switch
-      "n-switch-base": "inline-flex items-center select-none",
+      "n-switch-base": "inline-flex items-center select-none rounded-full pe-2",
+      "n-switch-hover": "op100 n-bg-hover cursor-pointer",
       "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
       "n-switch-slider-checked": "border-context/20 bg-context/10",
       "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,30 +23,30 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.4.5"
+    "@nuxt/devtools": "0.5.0"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@nuxt/kit": "^3.4.2",
+    "@nuxt/kit": "^3.5.0",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@unocss/core": "^0.51.8",
-    "@unocss/nuxt": "^0.51.8",
-    "@unocss/preset-attributify": "^0.51.8",
-    "@unocss/preset-icons": "^0.51.8",
-    "@unocss/preset-mini": "^0.51.8",
-    "@unocss/reset": "^0.51.8",
-    "@vueuse/core": "^10.1.0",
-    "@vueuse/integrations": "^10.1.0",
-    "@vueuse/nuxt": "^10.1.0",
+    "@unocss/core": "^0.51.13",
+    "@unocss/nuxt": "^0.51.13",
+    "@unocss/preset-attributify": "^0.51.13",
+    "@unocss/preset-icons": "^0.51.13",
+    "@unocss/preset-mini": "^0.51.13",
+    "@unocss/reset": "^0.51.13",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/integrations": "^10.1.2",
+    "@vueuse/nuxt": "^10.1.2",
     "defu": "^6.1.2",
-    "focus-trap": "^7.4.0",
-    "unocss": "^0.51.8",
+    "focus-trap": "^7.4.1",
+    "unocss": "^0.51.13",
     "v-lazy-show": "^0.2.3",
-    "@nuxt/devtools": "0.4.5",
-    "@nuxt/devtools-kit": "0.4.5"
+    "@nuxt/devtools": "0.5.0",
+    "@nuxt/devtools-kit": "0.5.0"
   },
   "devDependencies": {
-    "nuxt": "^3.4.2"
+    "nuxt": "^3.5.0"
   },
   "publishConfig": {
     "access": "public"