@nuxt/devtools-ui-kit 0.3.2 → 0.4.0

package/dist/assets/styles.css

@@ -11,4 +11,3 @@ html.dark {
   background-color: #151515;
   color: white;
 }
-

package/dist/components/NButton.vue

@@ -14,7 +14,7 @@ defineProps<{
     :is="to ? NuxtLink : 'button'"
     :to="to"
     v-bind="$attrs"
-    class="n-transition n-button n-button-base hover:n-button-hover active:n-button-active focus-visible:n-focus-base n-disabled:n-disabled"
+    class="n-button n-button-base active:n-button-active focus-visible:n-focus-base n-transition hover:n-button-hover n-disabled:n-disabled"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="n-button-icon" />

package/dist/components/NCheckbox.vue

@@ -16,19 +16,19 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="items-center select-none n-disabled:n-disabled n-checkbox hover:n-checkbox-hover"
+    class="hover:n-checkbox-hover n-checkbox select-none items-center n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >
     <input
       v-model="checked"
       type="checkbox"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       @keypress.enter="checked = !checked"
     >
-    <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 class="n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <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>

package/dist/components/NCodeBlock.vue

@@ -27,8 +27,7 @@ const rendered = computed(() => devToolsClient.value?.devtools.renderCodeHighlig
     <pre
       class="n-code-block"
       :class="lines ? 'n-code-block-lines' : ''"
-      v-text="code"
-    />
+    ><pre class="shiki"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre></pre>
   </template>
 </template>
 

package/dist/components/NDialog.vue

@@ -47,13 +47,13 @@ export default {
 <template>
   <Teleport v-if="show" to="body">
     <div
-      class="n-transition fixed flex items-center justify-center z-100 n-dialog inset-0"
+      class="n-dialog fixed inset-0 z-100 flex items-center justify-center n-transition"
       :class="[
         show ? '' : 'op0 pointer-events-none visibility-none',
       ]"
     >
       <div
-        class="inset-0 absolute -z-1"
+        class="absolute inset-0 -z-1"
         :class="[
           dim ? 'bg-black/50' : '',
         ]"

package/dist/components/NDropdown.vue

@@ -22,7 +22,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute n-transition n-bg-base rounded border z-10 n-border-base shadow"
+      class="absolute z-10 border n-border-base rounded shadow n-transition n-bg-base"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
     >
       <slot />

package/dist/components/NIconTitle.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="items-center flex flex-gap2">
+  <div flex="~ gap-3" items-center>
     <div v-if="icon" :class="icon" />
     <slot>
       <div>{{ text }}</div>

package/dist/components/NLink.vue

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

package/dist/components/NLoading.vue

@@ -1,7 +1,7 @@
 <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" />
+  <div class="n-loading n-panel-grids">
+    <div class="flex flex-col animate-pulse items-center text-lg">
+      <div class="i-carbon-circle-dash animate-spin text-4xl op50" />
       <slot>
         Loading...
       </slot>

package/dist/components/NPanelGrids.vue

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

package/dist/components/NRadio.vue

@@ -19,21 +19,21 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-disabled:n-disabled items-center select-none inline-flex n-radio hover:n-radio-hover"
+    class="n-radio hover:n-radio-hover inline-flex select-none items-center n-disabled:n-disabled"
     :checked="model === value || null"
     :disabled="disabled || null"
   >
     <input
       v-model="model"
       type="radio"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       :name="name"
       :value="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" />
+    <span class="n-radio-box n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-radio-inner n-checked:n-radio-inner-checked n-transition" />
     </span>
     <span><slot /></span>
   </label>

package/dist/components/NSectionBlock.vue

@@ -26,13 +26,15 @@ function onToggle(e: any) {
 
 <template>
   <details :open="open" @toggle="onToggle">
-    <summary class="select-none cursor-pointer p4 hover:bg-active" :class="collapse ? '' : 'pointer-events-none'">
-      <NIconTitle :icon="icon" :text="text" class="text-xl op75">
+    <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'">
         <div>
-          <slot name="text">
-            {{ text }}
-          </slot>
-          <div v-if="description || $slots.description" class="op50 text-sm">
+          <div text-base>
+            <slot name="text">
+              {{ text }}
+            </slot>
+          </div>
+          <div v-if="description || $slots.description" text-sm op50>
             <slot name="description">
               {{ description }}
             </slot>
@@ -43,11 +45,16 @@ function onToggle(e: any) {
         <NIcon
           v-if="collapse"
           icon="carbon-chevron-down"
-          class="op50 cursor-pointer text-base transition duration-500 place-self-start chevron"
+          class="chevron"
+          cursor-pointer place-self-start text-base op75 transition duration-500
         />
       </NIconTitle>
     </summary>
-    <div v-lazy-if="open" class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+    <div
+      v-lazy-show="open"
+      class="flex flex-col flex-gap2 pb6 pt2"
+      :class="typeof padding === 'string' ? padding : padding ? 'px4' : ''"
+    >
       <slot name="details" />
       <div :class="containerClass" class="mt1">
         <slot />

package/dist/components/NSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+
 const props = withDefaults(
   defineProps<{
     modelValue?: any
@@ -20,12 +21,12 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    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"
+    class="n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
   >
     <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+      <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="n-bg-base flex-auto w-full !outline-none">
+    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>

package/dist/components/NSwitch.vue

@@ -16,19 +16,19 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-disabled:n-disabled n-switch n-switch-base"
+    class="n-switch n-switch-base n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >
     <input
       v-model="checked"
       type="checkbox"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       @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-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-checked:n-switch-thumb-checked n-switch-thumb n-transition" />
     </div>
     <slot />
   </label>

package/dist/components/NTextInput.vue

@@ -20,13 +20,13 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 
 <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">
+  <div class="n-text-input flex flex items-center border n-border-base rounded py-1 pl-1 pr-2 focus-within:n-focus-base focus-within:border-context n-bg-base">
     <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+      <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
     </slot>
     <input
       v-model="input"
-      class="flex-auto n-bg-base w-full !outline-none"
+      class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
       :type="type"
       :disabled="disabled"
       :placeholder="placeholder"

package/dist/module.json

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

package/dist/runtime/client.d.ts

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

package/dist/unocss.mjs

@@ -34,6 +34,21 @@ function unocssPreset() {
         "opacity": 0.4,
         "pointer-events": "none",
         "filter": "saturate(0)"
+      }],
+      /**
+       * Credit to Nanda Syahrasyad (https://github.com/narendrasss)
+       *
+       * - https://github.com/narendrasss/NotANumber
+       * - https://www.nan.fyi/grid.svg
+       * - https://www.nan.fyi/grid-dark.svg
+       */
+      ["n-panel-grids-light", {
+        "background-image": `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='hsla(0, 0%25, 98%25, 1)' fill='none'/%3E%3C/svg%3E")`,
+        "background-size": "40px 40px"
+      }],
+      ["n-panel-grids-dark", {
+        "background-image": `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='hsl(0, 0%25, 8.5%25)'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='hsl(0, 0%25, 11.0%25)' fill='none'/%3E%3C/svg%3E");`,
+        "background-size": "40px 40px"
       }]
     ],
     variants: [
@@ -103,7 +118,8 @@ function unocssPreset() {
       // 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"
+      "n-loading": "flex h-full w-full justify-center items-center",
+      "n-panel-grids": "n-panel-grids-light dark:n-panel-grids-dark flex flex-col h-full gap-2 items-center justify-center"
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,30 +23,30 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.3.2"
+    "@nuxt/devtools": "0.4.0"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@nuxt/kit": "^3.3.2",
+    "@nuxt/kit": "^3.3.3",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@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",
+    "@unocss/core": "^0.51.4",
+    "@unocss/nuxt": "^0.51.4",
+    "@unocss/preset-attributify": "^0.51.4",
+    "@unocss/preset-icons": "^0.51.4",
+    "@unocss/preset-mini": "^0.51.4",
+    "@unocss/reset": "^0.51.4",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",
     "@vueuse/nuxt": "^9.13.0",
     "defu": "^6.1.2",
     "focus-trap": "^7.4.0",
-    "unocss": "^0.50.6",
-    "v-lazy-show": "^0.2.1",
-    "@nuxt/devtools": "0.3.2",
-    "@nuxt/devtools-kit": "0.3.2"
+    "unocss": "^0.51.4",
+    "v-lazy-show": "^0.2.2",
+    "@nuxt/devtools": "0.4.0",
+    "@nuxt/devtools-kit": "0.4.0"
   },
   "devDependencies": {
-    "nuxt": "^3.3.2"
+    "nuxt": "^3.3.3"
   },
   "publishConfig": {
     "access": "public"