@nuxt/devtools-ui-kit 0.2.5 → 0.3.1

package/dist/components/NButton.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore tsconfig
 import { NuxtLink } from '#components'
 
 defineProps<{

package/dist/components/NCheckbox.vue

@@ -16,7 +16,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="items-center select-none n-disabled:n-disabled n-checkbox inline-flex hover:n-checkbox-hover"
+    class="items-center select-none n-disabled:n-disabled n-checkbox hover:n-checkbox-hover"
     :checked="checked || null"
     :disabled="disabled || null"
   >
@@ -30,6 +30,6 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
     <span class="n-transition n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
       <NIcon class="n-transition op0 n-checkbox-icon transform scale-0 n-checked:op100 n-checked:scale-100" />
     </span>
-    <span><slot /></span>
+    <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
   </label>
 </template>

package/dist/components/NCodeBlock.vue

@@ -1,18 +1,50 @@
 <script setup lang="ts">
 // This components requires to run in DevTools to render correctly
+import { computed } from 'vue'
 import { devToolsClient } from '../runtime/client'
 
-defineProps<{
-  code: string
-  lang?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: string
+    lines?: boolean
+  }>(), {
+    lines: true,
+  },
+)
+const rendered = computed(() => devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang as string) || { code: props.code, supported: false })
 </script>
 
 <template>
-  <template v-if="lang && devToolsClient?.devtools?.renderCodeHighlight">
-    <pre class="n-code-block" v-html="devToolsClient.devtools.renderCodeHighlight(code, lang)" />
+  <template v-if="lang && rendered.supported">
+    <pre
+      class="n-code-block"
+      :class="lines ? 'n-code-block-lines' : ''"
+      v-html="rendered.code"
+    />
   </template>
   <template v-else>
-    <pre class="n-code-block" v-text="code" />
+    <pre
+      class="n-code-block"
+      :class="lines ? 'n-code-block-lines' : ''"
+      v-text="code"
+    />
   </template>
 </template>
+
+<style>
+.n-code-block-lines .shiki code {
+  counter-reset: step;
+  counter-increment: step calc(var(--start, 1) - 1);
+}
+.n-code-block-lines .shiki code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 2rem;
+  padding-right: 0.5rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+  text-align: right;
+  --at-apply: text-truegray:50;
+}
+</style>

package/dist/components/NDialog.vue

@@ -27,7 +27,8 @@ onMounted(() => {
   watch(show, (v) => {
     if (v)
       activate()
-    else deactivate()
+    else
+      deactivate()
   }, { immediate: true })
 })
 
@@ -44,21 +45,23 @@ export default {
 </script>
 
 <template>
-  <div
-    class="n-transition fixed flex items-center justify-center n-dialog inset-0 z-100"
-    :class="[
-      show ? '' : 'op0 pointer-events-none',
-    ]"
-  >
+  <Teleport v-if="show" to="body">
     <div
-      class="absolute inset-0 -z-1"
+      class="n-transition fixed flex items-center justify-center z-100 n-dialog inset-0"
       :class="[
-        dim ? 'bg-black/50' : '',
+        show ? '' : 'op0 pointer-events-none visibility-none',
       ]"
-      @click="close"
-    />
-    <NCard v-bind="$attrs" ref="card">
-      <slot />
-    </NCard>
-  </div>
+    >
+      <div
+        class="inset-0 absolute -z-1"
+        :class="[
+          dim ? 'bg-black/50' : '',
+        ]"
+        @click="close()"
+      />
+      <NCard v-bind="$attrs" ref="card">
+        <slot />
+      </NCard>
+    </div>
+  </Teleport>
 </template>

package/dist/components/NIconButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore tsconfig
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+  to?: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <Component
+    :is="to ? NuxtLink : 'button'"
+    :to="to"
+    v-bind="$attrs"
+    class="n-transition n-icon-button"
+  >
+    <NIcon :icon="props.icon" />
+  </Component>
+</template>

package/dist/components/NLink.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore tsconfig
 import { NuxtLink } from '#components'
 
 defineProps<{
@@ -12,7 +14,7 @@ defineProps<{
   <Component
     :is="(href || target) ? 'a' : NuxtLink"
     v-bind="$props"
-    class="n-link n-link-base hover:n-link-hover n-transition"
+    class="n-transition n-link n-link-base hover:n-link-hover"
   >
     <slot />
   </Component>

package/dist/components/NLoading.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="n-loading">
+    <div class="flex flex-col items-center text-lg animate-pulse">
+      <div class="text-4xl op50 i-carbon-circle-dash animate-spin" />
+      <slot>
+        Loading...
+      </slot>
+    </div>
+  </div>
+</template>

package/dist/components/NRadio.vue

@@ -19,7 +19,7 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="inline-flex items-center select-none n-disabled:n-disabled n-radio hover:n-radio-hover"
+    class="n-disabled:n-disabled items-center select-none inline-flex n-radio hover:n-radio-hover"
     :checked="model === value || null"
     :disabled="disabled || null"
   >
@@ -30,7 +30,7 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
       :disabled="disabled"
       :name="name"
       :value="value"
-      @keypress.enter="model = value"
+      @keypress.enter="model = value!"
     >
     <span class="n-transition peer-active:n-active-base peer-focus-visible:n-focus-base n-radio-box n-checked:n-radio-box-checked">
       <div class="n-transition n-radio-inner n-checked:n-radio-inner-checked" />

package/dist/components/NSectionBlock.vue

@@ -22,16 +22,21 @@ withDefaults(
     <summary class="select-none cursor-pointer p4 hover:bg-active" :class="collapse ? '' : 'pointer-events-none'">
       <NIconTitle :icon="icon" :text="text" class="text-xl op75">
         <div>
-          {{ text }}
-          <div v-if="description" class="op50 text-sm">
-            {{ description }}
+          <slot name="text">
+            {{ text }}
+          </slot>
+          <div v-if="description || $slots.description" class="op50 text-sm">
+            <slot name="description">
+              {{ description }}
+            </slot>
           </div>
         </div>
         <div class="flex-auto" />
+        <slot name="actions" />
         <NIcon
           v-if="collapse"
           icon="carbon-chevron-down"
-          class="text-base op50 cursor-pointer transition duration-500 place-self-start chevron"
+          class="op50 cursor-pointer text-base transition duration-500 place-self-start chevron"
         />
       </NIconTitle>
     </summary>

package/dist/components/NSelect.vue

@@ -20,12 +20,12 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2"
+    class="flex items-center flex n-bg-base rounded py-1 border n-border-base px-2 n-text-input focus-within:n-focus-base focus-within:border-context"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+    <select v-model="input" :disabled="disabled" class="n-bg-base flex-auto w-full !outline-none">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>

package/dist/components/NSwitch.vue

@@ -28,10 +28,8 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
       @keypress.enter="checked = !checked"
     >
     <div class="n-transition peer-active:n-active-base peer-focus-visible:n-focus-base n-switch-slider n-checked:n-switch-slider-checked">
-      <div
-        class="n-transition n-switch-thumb n-checked:n-switch-thumb-checked"
-      />
+      <div class="n-transition n-switch-thumb n-checked:n-switch-thumb-checked" />
     </div>
-    <span><slot /></span>
+    <slot />
   </label>
 </template>

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { fileURLToPath } from 'url';
+import { fileURLToPath } from 'node:url';
 import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
 import defu from 'defu';
 import { extendUnocssOptions } from './unocss.mjs';

package/dist/runtime/client.d.ts

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

package/dist/runtime/client.mjs

@@ -1,2 +1,2 @@
-import { useDevtoolsClient } from "@nuxt/devtools/iframe-client";
+import { useDevtoolsClient } from "@nuxt/devtools-kit/iframe-client";
 export const devToolsClient = useDevtoolsClient();

package/dist/unocss.mjs

@@ -78,9 +78,10 @@ const 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-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",
+    "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-checked": "border-context",
@@ -95,7 +96,13 @@ const unocssPreset = () => ({
     // tip
     "n-tip-base": "bg-context/4 text-context px-1em py-0.4em rounded flex gap-2 items-center dark:bg-context/12",
     // icon
-    "n-icon": "flex-none"
+    "n-icon": "flex-none",
+    // code
+    "n-code-block": "dark:bg-[#121212] bg-white",
+    // icon-button
+    "n-icon-button": "aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active",
+    // loading
+    "n-loading": "flex h-full w-full justify-center items-center"
   }
 });
 function extendUnocssOptions(user = {}) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,34 +23,36 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.2.5"
+    "@nuxt/devtools": "0.3.1"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@nuxt/kit": "^3.2.3",
+    "@nuxt/kit": "^3.3.1",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@unocss/core": "^0.50.1",
-    "@unocss/nuxt": "^0.50.1",
-    "@unocss/preset-attributify": "^0.50.1",
-    "@unocss/preset-icons": "^0.50.1",
-    "@unocss/preset-mini": "^0.50.1",
-    "@unocss/reset": "^0.50.1",
+    "@unocss/core": "^0.50.6",
+    "@unocss/nuxt": "^0.50.6",
+    "@unocss/preset-attributify": "^0.50.6",
+    "@unocss/preset-icons": "^0.50.6",
+    "@unocss/preset-mini": "^0.50.6",
+    "@unocss/reset": "^0.50.6",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",
     "@vueuse/nuxt": "^9.13.0",
     "defu": "^6.1.2",
-    "focus-trap": "^7.3.1",
-    "unocss": "^0.50.1",
-    "@nuxt/devtools": "0.2.5"
+    "focus-trap": "^7.4.0",
+    "unocss": "^0.50.6",
+    "@nuxt/devtools": "0.3.1",
+    "@nuxt/devtools-kit": "0.3.1"
   },
   "devDependencies": {
-    "nuxt": "^3.2.3"
+    "nuxt": "^3.3.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "nuxt-build-module",
+    "stub": "nuxt-build-module --stub",
     "dev": "nuxi dev playground",
     "playground:build": "nuxi generate playground"
   }