@nuxt/devtools-ui-kit 3.4.1 → 3.4.2

package/dist/components/NBadge.d.vue.ts

@@ -1,5 +1,13 @@
-<template>
-  <span class="n-badge">
-    <slot />
-  </span>
-</template>
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NBadge.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="n-badge">
+    <slot />
+  </span>
+</template>

package/dist/components/NBadgeHashed.d.vue.ts

@@ -1,21 +1,16 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getHslColorFromStringHash } from '../composables/color'
-import NBadge from './NBadge.vue'
-
-const props = defineProps<{
-  text: string
-}>()
-
-const color = computed(() => {
-  const foreground = getHslColorFromStringHash(props.text, 50, 60)
-  const background = getHslColorFromStringHash(props.text, 50, 60, 0.05)
-  return { color: foreground, background }
-})
-</script>
-
-<template>
-  <NBadge :style="color">
-    {{ text }}<slot />
-  </NBadge>
-</template>
+type __VLS_Props = {
+    text: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NBadgeHashed.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { computed } from "vue";
+import { getHslColorFromStringHash } from "../composables/color";
+import NBadge from "./NBadge.vue";
+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 };
+});
+</script>
+
+<template>
+  <NBadge :style="color">
+    {{ text }}<slot />
+  </NBadge>
+</template>

package/dist/components/NCard.d.vue.ts

@@ -1,5 +1,13 @@
-<template>
-  <div class="n-card n-card-base">
-    <slot />
-  </div>
-</template>
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NCard.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="n-card n-card-base">
+    <slot />
+  </div>
+</template>

package/dist/components/NCheckbox.d.vue.ts

@@ -1,36 +1,24 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean | null
-    disabled?: boolean
-  }>(),
-  {
-    modelValue: false,
-    disabled: false,
-  },
-)
-const emit = defineEmits<{ (...args: any): void }>()
-const checked = useVModel(props, 'modelValue', emit, { passive: true })
-</script>
-
-<template>
-  <label
-    class="n-checkbox select-none items-center hover:n-checkbox-hover n-disabled:n-disabled"
-    :checked="checked || null"
-    :disabled="disabled || null"
-  >
-    <input
-      v-model="checked"
-      type="checkbox"
-      class="peer absolute op0"
-      :disabled="disabled"
-      @keypress.enter="checked = !checked"
-    >
-    <span class="n-checkbox-box n-transition n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
-      <NIcon class="n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100" />
-    </span>
-    <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
-  </label>
-</template>
+type __VLS_Props = {
+    modelValue?: boolean | null;
+    disabled?: boolean;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    [x: string]: never;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    [x: `on${Capitalize<any>}`]: ((...args: unknown[]) => any) | undefined;
+}>, {
+    modelValue: boolean | null;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NCheckbox.vue

@@ -0,0 +1,29 @@
+<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 }
+});
+const emit = defineEmits([]);
+const checked = useVModel(props, "modelValue", emit, { passive: true });
+</script>
+
+<template>
+  <label
+    class="n-checkbox select-none items-center hover:n-checkbox-hover n-disabled:n-disabled"
+    :checked="checked || null"
+    :disabled="disabled || null"
+  >
+    <input
+      v-model="checked"
+      type="checkbox"
+      class="peer absolute op0"
+      :disabled="disabled"
+      @keypress.enter="checked = !checked"
+    >
+    <span class="n-checkbox-box n-transition n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
+      <NIcon class="n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100" />
+    </span>
+    <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
+  </label>
+</template>

package/dist/components/NCodeBlock.d.vue.ts

@@ -1,64 +1,18 @@
-<script setup lang="ts">
-import type { BuiltinLanguage } from 'shiki'
-// This components requires to run in DevTools to render correctly
-import { computed, nextTick } from 'vue'
-import { devToolsClient } from '../runtime/client'
-
-const props = withDefaults(
-  defineProps<{
-    code: string
-    lang?: BuiltinLanguage | 'text'
-    lines?: boolean
-    inline?: boolean
-    grammarContextCode?: string
-    transformRendered?: (code: string) => string
-  }>(),
-  {
-    lines: true,
-  },
-)
-
-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 classes = computed(() => [
-  'n-code-block shiki',
-  (props.lines && !props.inline) ? 'n-code-block-lines' : '',
-])
-</script>
-
-<template>
-  <template v-if="lang && rendered.supported">
-    <pre :class="classes"><code v-html="rendered.code" /></pre>
-  </template>
-  <template v-else>
-    <pre :class="classes"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre>
-  </template>
-</template>
-
-<style>
-.n-code-block-lines code {
-  counter-reset: step;
-  counter-increment: step calc(var(--start, 1) - 1);
-}
-.n-code-block-lines code .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 2.5rem;
-  padding-right: 0.5rem;
-  margin-right: 0.5rem;
-  display: inline-block;
-  text-align: right;
-  --uno: text-truegray/50;
-}
-</style>
+import type { BuiltinLanguage } from 'shiki';
+type __VLS_Props = {
+    code: string;
+    lang?: BuiltinLanguage | 'text';
+    lines?: boolean;
+    inline?: boolean;
+    grammarContextCode?: string;
+    transformRendered?: (code: string) => string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+}>, {
+    lines: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/NCodeBlock.vue

@@ -0,0 +1,38 @@
+<script setup>
+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 }
+});
+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 classes = computed(() => [
+  "n-code-block shiki",
+  props.lines && !props.inline ? "n-code-block-lines" : ""
+]);
+</script>
+
+<template>
+  <template v-if="lang && rendered.supported">
+    <pre :class="classes"><code v-html="rendered.code" /></pre>
+  </template>
+  <template v-else>
+    <pre :class="classes"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre>
+  </template>
+</template>
+
+<style>
+.n-code-block-lines code{counter-increment:step calc(var(--start, 1) - 1);counter-reset:step}.n-code-block-lines code .line:before{content:counter(step);counter-increment:step;display:inline-block;margin-right:.5rem;padding-right:.5rem;text-align:right;width:2.5rem;--uno:text-truegray/50}
+</style>

package/dist/components/NDarkToggle.d.vue.ts

@@ -1,78 +1,22 @@
-<script setup lang="ts">
-import { useColorMode } from '@vueuse/core'
-
-import { computed, nextTick } from 'vue'
-
-const mode = useColorMode({
-  storageKey: 'nuxt-devtools-color-mode',
-})
-const isDark = computed<boolean>({
-  get() {
-    return mode.value === 'dark'
-  },
-  set() {
-    mode.value = isDark.value ? 'light' : 'dark'
-  },
-})
-
-const isAppearanceTransition = typeof document !== 'undefined'
-// @ts-expect-error document.startViewTransition can be 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?: 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),
-  )
-  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,
-}
-</script>
-
-<template>
-  <ClientOnly placeholder-tag="span">
-    <slot v-bind="context" />
-  </ClientOnly>
-</template>
+declare function toggle(event?: MouseEvent): void;
+declare var __VLS_8: {
+    mode: import("@vueuse/core").UseColorModeReturn<import("@vueuse/core").BasicColorMode>;
+    isDark: import("vue").WritableComputedRef<boolean, boolean>;
+    toggle: typeof toggle;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NDarkToggle.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { useColorMode } from "@vueuse/core";
+import { computed, nextTick } from "vue";
+const mode = useColorMode({
+  storageKey: "nuxt-devtools-color-mode"
+});
+const isDark = computed({
+  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;
+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)"
+      }
+    );
+  });
+}
+const context = {
+  mode,
+  isDark,
+  toggle
+};
+</script>
+
+<template>
+  <ClientOnly placeholder-tag="span">
+    <slot v-bind="context" />
+  </ClientOnly>
+</template>

package/dist/components/NDialog.d.vue.ts

@@ -1,80 +1,28 @@
-<script setup lang="ts">
-import { onClickOutside, useVModel } from '@vueuse/core'
-import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
-import { computed, nextTick, ref, watchEffect } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    dim?: boolean
-    autoClose?: boolean
-  }>(),
-  {
-    modelValue: false,
-    dim: true,
-    autoClose: true,
-  },
-)
-
-const emit = defineEmits<{
-  (event: 'close'): void
-  (event: 'update:modelValue', value: boolean): void
-}>()
-
-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'],
-})
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <Teleport v-if="shown" to="body">
-    <div
-      v-show="show"
-      class="fixed inset-0 z-100 flex items-center justify-center n-glass-effect n-transition"
-      role="dialog"
-      aria-modal="true"
-      :class="[
-        show ? '' : 'op0 pointer-events-none visibility-none',
-      ]"
-    >
-      <div
-        class="absolute inset-0 -z-1"
-        :class="[
-          dim ? 'glass-effect' : '',
-        ]"
-      />
-      <NCard v-bind="$attrs" ref="card" class="max-h-screen of-auto">
-        <slot />
-      </NCard>
-    </div>
-  </Teleport>
-</template>
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    modelValue?: boolean;
+    dim?: boolean;
+    autoClose?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue?: boolean;
+    dim?: boolean;
+    autoClose?: boolean;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    modelValue: boolean;
+    dim: boolean;
+    autoClose: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NDialog.vue

@@ -0,0 +1,63 @@
+<script setup>
+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 }
+});
+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"]
+});
+</script>
+
+<script>
+export default {
+  inheritAttrs: false
+};
+</script>
+
+<template>
+  <Teleport v-if="shown" to="body">
+    <div
+      v-show="show"
+      class="fixed inset-0 z-100 flex items-center justify-center n-glass-effect n-transition"
+      role="dialog"
+      aria-modal="true"
+      :class="[
+  show ? '' : 'op0 pointer-events-none visibility-none'
+]"
+    >
+      <div
+        class="absolute inset-0 -z-1"
+        :class="[
+  dim ? 'glass-effect' : ''
+]"
+      />
+      <NCard v-bind="$attrs" ref="card" class="max-h-screen of-auto">
+        <slot />
+      </NCard>
+    </div>
+  </Teleport>
+</template>