@nuxt/devtools-ui-kit 4.0.0-alpha.16 → 4.0.0-alpha.17

package/dist/components/NBadgeHashed.vue

@@ -2,13 +2,17 @@
 import { computed } from "vue";
 import { getHslColorFromStringHash } from "../composables/color";
 import NBadge from "./NBadge.vue";
-const props = defineProps({
-  text: { type: String, required: true }
-});
+const props = defineProps({ text: {
+	type: String,
+	required: true
+} });
 const color = computed(() => {
-  const foreground = getHslColorFromStringHash(props.text, 50, 60);
-  const background = getHslColorFromStringHash(props.text, 50, 60, 0.05);
-  return { color: foreground, background };
+	const foreground = getHslColorFromStringHash(props.text, 50, 60);
+	const background = getHslColorFromStringHash(props.text, 50, 60, .05);
+	return {
+		color: foreground,
+		background
+	};
 });
 </script>
 

package/dist/components/NCheckbox.vue

@@ -1,8 +1,16 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  modelValue: { type: [Boolean, null], required: false, default: false },
-  disabled: { type: Boolean, required: false, default: false }
+	modelValue: {
+		type: [Boolean, null],
+		required: false,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const emit = defineEmits([]);
 const checked = useVModel(props, "modelValue", emit, { passive: true });

package/dist/components/NCodeBlock.vue

@@ -1,27 +1,48 @@
 <script setup>
+// This components requires to run in DevTools to render correctly
 import { computed, nextTick } from "vue";
 import { devToolsClient } from "../runtime/client";
 const props = defineProps({
-  code: { type: String, required: true },
-  lang: { type: String, required: false },
-  lines: { type: Boolean, required: false, default: true },
-  inline: { type: Boolean, required: false },
-  grammarContextCode: { type: String, required: false },
-  transformRendered: { type: Function, required: false }
+	code: {
+		type: String,
+		required: true
+	},
+	lang: {
+		type: String,
+		required: false
+	},
+	lines: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	inline: {
+		type: Boolean,
+		required: false
+	},
+	grammarContextCode: {
+		type: String,
+		required: false
+	},
+	transformRendered: {
+		type: Function,
+		required: false
+	}
 });
 const emit = defineEmits(["loaded"]);
 const rendered = computed(() => {
-  const result = props.lang === "text" ? { code: props.code, supported: false } : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang, { grammarContextCode: props.grammarContextCode }) || { code: props.code, supported: false };
-  if (result.supported && props.transformRendered)
-    result.code = props.transformRendered(result.code);
-  if (result.supported)
-    nextTick(() => emit("loaded"));
-  return result;
+	const result = props.lang === "text" ? {
+		code: props.code,
+		supported: false
+	} : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang, { grammarContextCode: props.grammarContextCode }) || {
+		code: props.code,
+		supported: false
+	};
+	if (result.supported && props.transformRendered) result.code = props.transformRendered(result.code);
+	if (result.supported) nextTick(() => emit("loaded"));
+	return result;
 });
-const classes = computed(() => [
-  "n-code-block shiki",
-  props.lines && !props.inline ? "n-code-block-lines" : ""
-]);
+const classes = computed(() => ["n-code-block shiki", props.lines && !props.inline ? "n-code-block-lines" : ""]);
 </script>
 
 <template>

package/dist/components/NDarkToggle.vue

@@ -1,55 +1,46 @@
 <script setup>
 import { useColorMode } from "@vueuse/core";
 import { computed, nextTick } from "vue";
-const mode = useColorMode({
-  storageKey: "nuxt-devtools-color-mode"
-});
+const mode = useColorMode({ storageKey: "nuxt-devtools-color-mode" });
 const isDark = computed({
-  get() {
-    return mode.value === "dark";
-  },
-  set() {
-    mode.value = isDark.value ? "light" : "dark";
-  }
+	get() {
+		return mode.value === "dark";
+	},
+	set() {
+		mode.value = isDark.value ? "light" : "dark";
+	}
 });
 const isAppearanceTransition = typeof document !== "undefined" && 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) {
-  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)
-  );
-  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.toReversed() : clipPath
-      },
-      {
-        duration: 400,
-        easing: "ease-in",
-        fill: "forwards",
-        pseudoElement: isDark.value ? "::view-transition-old(root)" : "::view-transition-new(root)"
-      }
-    );
-  });
+	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));
+	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.toReversed() : clipPath }, {
+			duration: 400,
+			easing: "ease-in",
+			fill: "forwards",
+			pseudoElement: isDark.value ? "::view-transition-old(root)" : "::view-transition-new(root)"
+		});
+	});
 }
 const context = {
-  mode,
-  isDark,
-  toggle
+	mode,
+	isDark,
+	toggle
 };
 </script>
 

package/dist/components/NDialog.vue

@@ -3,39 +3,46 @@ import { onClickOutside, useVModel } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 import { computed, nextTick, ref, watchEffect } from "vue";
 const props = defineProps({
-  modelValue: { type: Boolean, required: false, default: false },
-  dim: { type: Boolean, required: false, default: true },
-  autoClose: { type: Boolean, required: false, default: true }
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	dim: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	autoClose: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
 const emit = defineEmits(["close", "update:modelValue"]);
 const show = useVModel(props, "modelValue", emit, { passive: true });
 const card = ref(null);
 const shown = ref(false);
 const { activate, deactivate } = useFocusTrap(computed(() => card.value || document.body), { immediate: false });
-watchEffect(
-  () => {
-    if (!shown.value && show.value)
-      shown.value = true;
-    if (show.value && card.value)
-      nextTick(activate);
-    else
-      deactivate();
-  }
-);
-onClickOutside(card, () => {
-  if (props.modelValue && props.autoClose) {
-    show.value = false;
-    emit("close");
-  }
-}, {
-  ignore: ["a", "button", "summary"]
+watchEffect(() => {
+	if (!shown.value && show.value) shown.value = true;
+	if (show.value && card.value) nextTick(activate);
+	else deactivate();
 });
+onClickOutside(card, () => {
+	if (props.modelValue && props.autoClose) {
+		show.value = false;
+		emit("close");
+	}
+}, { ignore: [
+	"a",
+	"button",
+	"summary"
+] });
 </script>
 
 <script>
-export default {
-  inheritAttrs: false
-};
+export default { inheritAttrs: false };
 </script>
 
 <template>

package/dist/components/NDrawer.vue

@@ -2,35 +2,53 @@
 import { onClickOutside, useElementSize } from "@vueuse/core";
 import { ref } from "vue";
 const props = defineProps({
-  modelValue: { type: Boolean, required: false },
-  top: { type: null, required: false },
-  left: { type: null, required: false },
-  autoClose: { type: Boolean, required: false },
-  transition: { type: String, required: false, default: "right" }
+	modelValue: {
+		type: Boolean,
+		required: false
+	},
+	top: {
+		type: null,
+		required: false
+	},
+	left: {
+		type: null,
+		required: false
+	},
+	autoClose: {
+		type: Boolean,
+		required: false
+	},
+	transition: {
+		type: String,
+		required: false,
+		default: "right"
+	}
 });
 const emit = defineEmits(["close"]);
 const el = ref();
-const { height } = useElementSize(() => props.top, void 0, { box: "border-box" });
-const width = typeof props.left === "string" && props.left.startsWith("#") ? document.querySelector(props.left)?.getBoundingClientRect().width : useElementSize(() => props.left, void 0, { box: "border-box" }).width;
+const { height } = useElementSize(() => props.top, undefined, { box: "border-box" });
+const width = typeof props.left === "string" && props.left.startsWith("#") ? document.querySelector(props.left)?.getBoundingClientRect().width : useElementSize(() => props.left, undefined, { box: "border-box" }).width;
 onClickOutside(el, () => {
-  if (props.modelValue && props.autoClose)
-    emit("close");
-}, {
-  ignore: ["a", "button", "summary", '[role="dialog"]']
-});
+	if (props.modelValue && props.autoClose) emit("close");
+}, { ignore: [
+	"a",
+	"button",
+	"summary",
+	"[role=\"dialog\"]"
+] });
 const transitionType = {
-  right: {
-    "enter-from-class": "transform translate-x-1/1",
-    "leave-to-class": "transform translate-x-1/1"
-  },
-  top: {
-    "enter-from-class": "transform translate-y--1/1",
-    "leave-to-class": "transform translate-y--1/1"
-  },
-  bottom: {
-    "enter-from-class": "transform translate-y-1/1",
-    "leave-to-class": "transform translate-y-1/1"
-  }
+	right: {
+		"enter-from-class": "transform translate-x-1/1",
+		"leave-to-class": "transform translate-x-1/1"
+	},
+	top: {
+		"enter-from-class": "transform translate-y--1/1",
+		"leave-to-class": "transform translate-y--1/1"
+	},
+	bottom: {
+		"enter-from-class": "transform translate-y-1/1",
+		"leave-to-class": "transform translate-y-1/1"
+	}
 };
 </script>
 

package/dist/components/NDropdown.vue

@@ -2,14 +2,21 @@
 import { onClickOutside, useVModel } from "@vueuse/core";
 import { ref } from "vue";
 const props = defineProps({
-  modelValue: { type: Boolean, required: false },
-  direction: { type: String, required: false, default: "start" }
+	modelValue: {
+		type: Boolean,
+		required: false
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "start"
+	}
 });
 const emit = defineEmits([]);
 const enabled = useVModel(props, "modelValue", emit, { passive: true });
 const el = ref();
 onClickOutside(el, () => {
-  enabled.value = false;
+	enabled.value = false;
 });
 </script>
 

package/dist/components/NIcon.vue

@@ -1,7 +1,8 @@
 <script setup>
-defineProps({
-  icon: { type: String, required: false }
-});
+defineProps({ icon: {
+	type: String,
+	required: false
+} });
 </script>
 
 <template>

package/dist/components/NIconTitle.vue

@@ -1,7 +1,13 @@
 <script setup>
 defineProps({
-  icon: { type: String, required: false },
-  text: { type: String, required: false }
+	icon: {
+		type: String,
+		required: false
+	},
+	text: {
+		type: String,
+		required: false
+	}
 });
 </script>
 

package/dist/components/NLink.vue

@@ -1,10 +1,22 @@
 <script setup>
 import { computed } from "vue";
 const props = defineProps({
-  to: { type: String, required: false },
-  href: { type: String, required: false },
-  target: { type: String, required: false },
-  underline: { type: Boolean, required: false }
+	to: {
+		type: String,
+		required: false
+	},
+	href: {
+		type: String,
+		required: false
+	},
+	target: {
+		type: String,
+		required: false
+	},
+	underline: {
+		type: Boolean,
+		required: false
+	}
 });
 const link = computed(() => props.href || props.to);
 </script>

package/dist/components/NMarkdown.vue

@@ -1,8 +1,15 @@
 <script setup>
+// This components requires to run in DevTools to render correctly
 import { devToolsClient } from "../runtime/client";
 defineProps({
-  markdown: { type: String, required: true },
-  tag: { type: String, required: false }
+	markdown: {
+		type: String,
+		required: true
+	},
+	tag: {
+		type: String,
+		required: false
+	}
 });
 </script>
 

package/dist/components/NNavbar.vue

@@ -1,11 +1,17 @@
 <script setup>
 defineProps({
-  search: { type: String, required: false },
-  noPadding: { type: Boolean, required: false }
+	search: {
+		type: String,
+		required: false
+	},
+	noPadding: {
+		type: Boolean,
+		required: false
+	}
 });
 const emit = defineEmits(["update:search"]);
 function update(event) {
-  emit("update:search", event.target.value);
+	emit("update:search", event.target.value);
 }
 </script>
 

package/dist/components/NNotification.vue

@@ -1,5 +1,11 @@
 <script setup>
-
+/**
+* @deprecated The bespoke Nuxt DevTools toast has been retired. Notifications
+* now flow through the devframe Messages system (Vite DevTools' built-in
+* Messages dock + toast overlay). Use `devtoolsUiShowNotification(...)`, which
+* is re-pointed onto that system — this component is a no-op shim kept only so
+* existing `<NNotification />` mounts don't break, and renders nothing.
+*/
 </script>
 
 <template>

package/dist/components/NRadio.vue

@@ -1,10 +1,24 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  modelValue: { type: String, required: false, default: "" },
-  disabled: { type: Boolean, required: false, default: false },
-  name: { type: String, required: false },
-  value: { type: String, required: false }
+	modelValue: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	name: {
+		type: String,
+		required: false
+	},
+	value: {
+		type: String,
+		required: false
+	}
 });
 const emit = defineEmits([]);
 const model = useVModel(props, "modelValue", emit, { passive: true });

package/dist/components/NSectionBlock.vue

@@ -1,18 +1,46 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  icon: { type: String, required: false },
-  text: { type: String, required: false },
-  description: { type: String, required: false },
-  containerClass: { type: String, required: false, default: "" },
-  headerClass: { type: String, required: false },
-  collapse: { type: Boolean, required: false, default: true },
-  open: { type: Boolean, required: false, default: true },
-  padding: { type: [Boolean, String], required: false, default: true }
+	icon: {
+		type: String,
+		required: false
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	description: {
+		type: String,
+		required: false
+	},
+	containerClass: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	headerClass: {
+		type: String,
+		required: false
+	},
+	collapse: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	open: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	padding: {
+		type: [Boolean, String],
+		required: false,
+		default: true
+	}
 });
-const open = useVModel(props, "open", void 0, { passive: true });
+const open = useVModel(props, "open", undefined, { passive: true });
 function onToggle(e) {
-  open.value = e.target.open;
+	open.value = e.target.open;
 }
 </script>
 

package/dist/components/NSelect.vue

@@ -1,10 +1,26 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  modelValue: { type: null, required: false, default: void 0 },
-  placeholder: { type: String, required: false, default: "" },
-  icon: { type: String, required: false, default: "" },
-  disabled: { type: Boolean, required: false, default: false }
+	modelValue: {
+		type: null,
+		required: false,
+		default: undefined
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	icon: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	}
 });
 const emit = defineEmits([]);
 const input = useVModel(props, "modelValue", emit, { passive: true });

package/dist/components/NSelectTabs.vue

@@ -1,9 +1,20 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  modelValue: { type: null, required: false, default: void 0 },
-  disabled: { type: Boolean, required: false, default: false },
-  options: { type: Array, required: true }
+	modelValue: {
+		type: null,
+		required: false,
+		default: undefined
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	options: {
+		type: Array,
+		required: true
+	}
 });
 const emit = defineEmits([]);
 const input = useVModel(props, "modelValue", emit, { passive: true });

package/dist/components/NSplitPane.vue

@@ -4,20 +4,36 @@ import { Pane, Splitpanes } from "splitpanes";
 import { computed, ref } from "vue";
 import "splitpanes/dist/splitpanes.css";
 const props = defineProps({
-  storageKey: { type: String, required: false },
-  stateKey: { type: String, required: false, default: "nuxt-devtools-panels-state" },
-  leftSize: { type: Number, required: false },
-  minSize: { type: Number, required: false },
-  horizontal: { type: Boolean, required: false }
+	storageKey: {
+		type: String,
+		required: false
+	},
+	stateKey: {
+		type: String,
+		required: false,
+		default: "nuxt-devtools-panels-state"
+	},
+	leftSize: {
+		type: Number,
+		required: false
+	},
+	minSize: {
+		type: Number,
+		required: false
+	},
+	horizontal: {
+		type: Boolean,
+		required: false
+	}
 });
 const state = useLocalStorage(props.stateKey, {}, { listenToStorageChanges: false });
 const DEFAULT = 30;
 const key = props.storageKey;
 const size = key ? computed({
-  get: () => state.value[key] || props.leftSize || DEFAULT,
-  set: (v) => {
-    state.value[key] = v;
-  }
+	get: () => state.value[key] || props.leftSize || DEFAULT,
+	set: (v) => {
+		state.value[key] = v;
+	}
 }) : ref(props.leftSize || DEFAULT);
 </script>
 

package/dist/components/NSwitch.vue

@@ -1,10 +1,12 @@
 <script setup>
-defineProps({
-  disabled: { type: Boolean, required: false, default: false }
-});
+defineProps({ disabled: {
+	type: Boolean,
+	required: false,
+	default: false
+} });
 const checked = defineModel("modelValue", {
-  type: Boolean,
-  default: false
+	type: Boolean,
+	default: false
 });
 </script>
 

package/dist/components/NTextInput.vue

@@ -1,16 +1,46 @@
 <script setup>
 import { useVModel } from "@vueuse/core";
 const props = defineProps({
-  modelValue: { type: [String, Number], required: false, default: "" },
-  icon: { type: String, required: false },
-  placeholder: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  autofocus: { type: Boolean, required: false },
-  autocomplete: { type: String, required: false },
-  readonly: { type: Boolean, required: false },
-  type: { type: String, required: false, default: "text" }
+	modelValue: {
+		type: [String, Number],
+		required: false,
+		default: ""
+	},
+	icon: {
+		type: String,
+		required: false
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	autofocus: {
+		type: Boolean,
+		required: false
+	},
+	autocomplete: {
+		type: String,
+		required: false
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	type: {
+		type: String,
+		required: false,
+		default: "text"
+	}
 });
-const emit = defineEmits(["keydown", "keyup", "change"]);
+const emit = defineEmits([
+	"keydown",
+	"keyup",
+	"change"
+]);
 const input = useVModel(props, "modelValue", emit, { passive: true });
 </script>
 

package/dist/components/NTip.vue

@@ -1,7 +1,8 @@
 <script setup>
-defineProps({
-  icon: { type: String, required: false }
-});
+defineProps({ icon: {
+	type: String,
+	required: false
+} });
 </script>
 
 <template>

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "4.0.0-alpha.16",
+  "version": "4.0.0-alpha.17",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "4.0.0-alpha.16",
+  "version": "4.0.0-alpha.17",
   "license": "MIT",
   "deprecated": "This package is deprecated and no longer recommended for use. See https://devtools.nuxt.com/module/ui-kit for details.",
   "homepage": "https://devtools.nuxt.com/module/ui-kit",
@@ -20,7 +20,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "4.0.0-alpha.16",
+    "@nuxt/devtools": "4.0.0-alpha.17",
     "@nuxt/kit": "^4.0.0-0 || ^5.0.0-0"
   },
   "dependencies": {
@@ -28,26 +28,26 @@
     "@iconify-json/logos": "^1.2.13",
     "@iconify-json/ri": "^1.2.10",
     "@iconify-json/tabler": "^1.2.38",
-    "@nuxt/devtools-kit": "4.0.0-alpha.16",
-    "@unocss/core": "^66.8.1",
-    "@unocss/nuxt": "^66.8.1",
-    "@unocss/preset-attributify": "^66.8.1",
-    "@unocss/preset-icons": "^66.8.1",
-    "@unocss/preset-mini": "^66.8.1",
-    "@unocss/reset": "^66.8.1",
+    "@nuxt/devtools-kit": "4.0.0-alpha.17",
+    "@unocss/core": "^66.9.2",
+    "@unocss/nuxt": "^66.9.2",
+    "@unocss/preset-attributify": "^66.9.2",
+    "@unocss/preset-icons": "^66.9.2",
+    "@unocss/preset-mini": "^66.9.2",
+    "@unocss/reset": "^66.9.2",
     "@vueuse/core": "^14.4.0",
     "@vueuse/integrations": "^14.4.0",
     "@vueuse/nuxt": "^14.4.0",
     "defu": "^6.1.7",
     "focus-trap": "^8.2.2",
     "splitpanes": "^4.1.2",
-    "unocss": "^66.8.1",
+    "unocss": "^66.9.2",
     "v-lazy-show": "^0.3.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "4.0.0-alpha.16",
-    "@nuxt/kit": "npm:@nuxt/kit-nightly@5.0.0-29755283.b4586ef2",
-    "nuxt": "npm:nuxt-nightly@5.0.0-29755283.b4586ef2",
+    "@nuxt/devtools": "4.0.0-alpha.17",
+    "@nuxt/kit": "npm:@nuxt/kit-nightly@5.0.0-29806258.d070492f",
+    "nuxt": "npm:nuxt-nightly@5.0.0-29806258.d070492f",
     "unbuild": "^3.6.1"
   },
   "publishConfig": {