@nuxt/devtools-ui-kit 3.3.1 → 3.4.1

package/dist/components/{NSelect.vue → NSelect.d.vue.ts}

@@ -1,13 +1,22 @@
-<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 }
-});
-const emit = defineEmits([]);
-const input = useVModel(props, "modelValue", emit, { passive: true });
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+    icon: '',
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 
 <template>

package/dist/components/{NSelectTabs.vue → NSelectTabs.d.vue.ts}

@@ -1,12 +1,19 @@
-<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 }
-});
-const emit = defineEmits([]);
-const input = useVModel(props, "modelValue", emit, { passive: true });
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    disabled?: boolean
+    options: { value: any, label: string }[]
+  }>(),
+  {
+    modelValue: undefined,
+    disabled: false,
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 
 <template>
@@ -19,15 +26,15 @@ const input = useVModel(props, "modelValue", emit, { passive: true });
       :disabled="disabled"
       class="relative n-border-base px-0.5em py-0.1em hover:n-bg-active"
       :class="[
-  idx ? 'border-l n-border-base ml--1px' : '',
-  i.value === input ? 'n-bg-active' : ''
-]"
+        idx ? 'border-l n-border-base ml--1px' : '',
+        i.value === input ? 'n-bg-active' : '',
+      ]"
       :title="i.label"
     >
       <div
         :class="[
-  i.value === input ? '' : 'op35'
-]"
+          i.value === input ? '' : 'op35',
+        ]"
       >{{ i.label }}</div>
       <input
         v-model="input"

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { Pane, Splitpanes } from 'splitpanes'
+import { computed, ref } from 'vue'
+
+import 'splitpanes/dist/splitpanes.css'
+
+const props = withDefaults(defineProps<{
+  /**
+   * The key to use for storing the pane sizes in localStorage.
+   */
+  storageKey?: string
+  stateKey?: string
+  leftSize?: number
+  minSize?: number
+  horizontal?: boolean
+}>(), {
+  stateKey: 'nuxt-devtools-panels-state',
+})
+
+const state = useLocalStorage<Record<string, number>>(props.stateKey, {} as any, { 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 },
+    })
+  : ref(props.leftSize || DEFAULT)
+</script>
+
+<template>
+  <Splitpanes :horizontal="horizontal" h-full of-hidden @resize="size = $event[0].size">
+    <Pane h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
+      <slot name="left" />
+    </Pane>
+    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
+      <slot name="right" />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style>
+.splitpanes__splitter {
+  position: relative;
+}
+.splitpanes__splitter:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: 0.2s ease;
+  content: '';
+  transition: opacity 0.4s;
+  z-index: 1;
+}
+.splitpanes__splitter:hover:before {
+  background: #8881;
+  opacity: 1;
+}
+.splitpanes--vertical > .splitpanes__splitter {
+  min-width: 0 !important;
+  width: 0 !important;
+  --at-apply: border-r border-base;
+}
+.splitpanes--horizontal > .splitpanes__splitter {
+  min-height: 0 !important;
+  height: 0 !important;
+  --at-apply: border-t border-base;
+}
+.splitpanes--vertical > .splitpanes__splitter:before {
+  left: -5px;
+  right: -4px;
+  height: 100%;
+}
+.splitpanes--horizontal > .splitpanes__splitter:before {
+  top: -5px;
+  bottom: -4px;
+  width: 100%;
+}
+</style>

package/dist/components/{NSwitch.vue → NSwitch.d.vue.ts}

@@ -1,11 +1,16 @@
-<script setup>
-defineProps({
-  disabled: { type: Boolean, required: false, default: false }
-});
-const checked = defineModel("modelValue", {
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+)
+const checked = defineModel('modelValue', {
   type: Boolean,
-  default: false
-});
+  default: false,
+})
 </script>
 
 <template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    icon?: string
+    placeholder?: string
+    disabled?: boolean
+    autofocus?: boolean
+    autocomplete?: string
+    readonly?: boolean
+    type?: string
+  }>(),
+  {
+    modelValue: '',
+    type: 'text',
+  },
+)
+
+const emit = defineEmits<{
+  (name: 'keydown', event: KeyboardEvent): void
+  (name: 'keyup', event: KeyboardEvent): void
+  (name: 'change', event: Event): void
+}>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <div class="n-text-input flex flex items-center border n-border-base rounded n-bg-base py-1 pl-1 pr-2 focus-within:border-context focus-within:n-focus-base">
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
+    </slot>
+    <input
+      v-model="input"
+      v-bind="$props as any"
+      class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
+    >
+  </div>
+</template>

package/dist/components/{NTip.vue → NTip.d.vue.ts}

@@ -1,7 +1,7 @@
-<script setup>
-defineProps({
-  icon: { type: String, required: false }
-});
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+}>()
 </script>
 
 <template>

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "3.3.1",
+  "version": "3.4.1",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@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": "3.3.1",
+  "version": "3.4.1",
   "license": "MIT",
   "homepage": "https://devtools.nuxt.com/module/ui-kit",
   "repository": {
@@ -28,33 +28,33 @@
     "dist"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "3.3.1"
+    "@nuxt/devtools": "3.4.1"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.2.20",
-    "@iconify-json/logos": "^1.2.11",
+    "@iconify-json/carbon": "^1.2.25",
+    "@iconify-json/logos": "^1.2.12",
     "@iconify-json/ri": "^1.2.10",
-    "@iconify-json/tabler": "^1.2.33",
-    "@nuxt/kit": "^4.4.4",
-    "@unocss/core": "^66.6.8",
-    "@unocss/nuxt": "^66.6.8",
-    "@unocss/preset-attributify": "^66.6.8",
-    "@unocss/preset-icons": "^66.6.8",
-    "@unocss/preset-mini": "^66.6.8",
-    "@unocss/reset": "^66.6.8",
-    "@vueuse/core": "^14.2.1",
-    "@vueuse/integrations": "^14.2.1",
-    "@vueuse/nuxt": "^14.2.1",
+    "@iconify-json/tabler": "^1.2.38",
+    "@nuxt/kit": "^4.5.1",
+    "@unocss/core": "^66.7.5",
+    "@unocss/nuxt": "^66.7.5",
+    "@unocss/preset-attributify": "^66.7.5",
+    "@unocss/preset-icons": "^66.7.5",
+    "@unocss/preset-mini": "^66.7.5",
+    "@unocss/reset": "^66.7.5",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/integrations": "^14.4.0",
+    "@vueuse/nuxt": "^14.4.0",
     "defu": "^6.1.7",
-    "focus-trap": "^8.1.0",
-    "splitpanes": "^4.0.4",
-    "unocss": "^66.6.8",
+    "focus-trap": "^8.2.2",
+    "splitpanes": "^4.1.2",
+    "unocss": "^66.7.5",
     "v-lazy-show": "^0.3.0",
-    "@nuxt/devtools-kit": "3.3.1"
+    "@nuxt/devtools-kit": "3.4.1"
   },
   "devDependencies": {
-    "nuxt": "^4.4.4",
-    "@nuxt/devtools": "3.3.1"
+    "nuxt": "^4.5.1",
+    "@nuxt/devtools": "3.4.1"
   },
   "publishConfig": {
     "access": "public"

package/dist/components/NBadgeHashed.vue

@@ -1,19 +0,0 @@
-<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/NCodeBlock.vue

@@ -1,38 +0,0 @@
-<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.vue

@@ -1,60 +0,0 @@
-<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.vue

@@ -1,63 +0,0 @@
-<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>

package/dist/components/NDrawer.vue

@@ -1,64 +0,0 @@
-<script setup>
-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" }
-});
-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;
-onClickOutside(el, () => {
-  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"
-  }
-};
-</script>
-
-<template>
-  <Transition
-    v-bind="transitionType[transition]"
-    enter-active-class="duration-200 ease-in"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-out"
-    leave-from-class="opacity-100"
-  >
-    <div
-      v-if="modelValue"
-      ref="el"
-      :border="`${transition === 'right' ? 'l' : transition === 'bottom' ? 't' : 'b'} base`"
-      flex="~ col gap-1"
-      :class="{ 'right-0': transition === 'right' || transition === 'bottom' }"
-      absolute bottom-0 z-10 z-20 of-auto n-glass-effect text-sm
-      :style="{
-  top: transition === 'bottom' ? 'auto' : `${height}px`,
-  left: transition === 'right' && !width ? 'auto' : `${width}px`
-}"
-      v-bind="$attrs"
-    >
-      <NButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" :border="false" @click="$emit('close')" />
-      <div relative h-full w-full of-auto>
-        <slot />
-      </div>
-    </div>
-  </Transition>
-</template>

package/dist/components/NIcon.vue

@@ -1,9 +0,0 @@
-<script setup>
-defineProps({
-  icon: { type: String, required: false }
-});
-</script>
-
-<template>
-  <div class="n-icon" :class="icon" />
-</template>

package/dist/components/NLink.vue

@@ -1,27 +0,0 @@
-<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 }
-});
-const link = computed(() => props.href || props.to);
-</script>
-
-<template>
-  <NuxtLink
-    v-bind="link ? {
-  href: link,
-  target,
-  rel: target === '_blank' ? 'noopener noreferrer' : void 0
-} : {}"
-    :class="{ 'n-link n-transition hover:n-link-hover n-link-base': link || underline }"
-  >
-    <slot />
-    <div
-      v-if="link && target === '_blank'"
-      i-carbon:arrow-up-right translate-y--1 text-xs op50
-    />
-  </NuxtLink>
-</template>

package/dist/components/NNotification.vue

@@ -1,44 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import { devtoolsUiProvideNotificationFn } from "../composables/notification";
-const show = ref(false);
-const icon = ref();
-const text = ref();
-const classes = ref();
-const position = ref("top-center");
-devtoolsUiProvideNotificationFn((data) => {
-  text.value = data.message;
-  icon.value = data.icon;
-  classes.value = data.classes ?? "text-primary border-primary";
-  icon.value = data.icon;
-  show.value = true;
-  position.value = data.position ?? "top-center";
-  setTimeout(() => {
-    show.value = false;
-  }, data.duration ?? 1500);
-});
-</script>
-
-<template>
-  <div
-    fixed left-0 right-0 z-999 text-center
-    :class="[
-  { 'pointer-events-none overflow-hidden': !show },
-  { 'top-0': position.startsWith('top') },
-  { 'bottom-0': position.startsWith('bottom') }
-]"
-  >
-    <div flex :style="{ justifyContent: position.includes('right') ? 'right' : position.includes('left') ? 'left' : 'center' }">
-      <div
-        border="~ base"
-        flex="~ inline gap2"
-        m-3 inline-block items-center rounded bg-base px-4 py-1 transition-all duration-300
-        :style="show ? {} : { transform: `translateY(${position.startsWith('top') ? '-' : ''}300%)` }"
-        :class="[show ? 'shadow' : 'shadow-none', classes]"
-      >
-        <div v-if="icon" :class="icon" />
-        <div>{{ text }}</div>
-      </div>
-    </div>
-  </div>
-</template>