@nuxt/devtools-ui-kit 0.3.0 → 0.3.2

package/dist/components/NSectionBlock.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
   defineProps<{
     icon?: string
     text: string
@@ -15,10 +17,15 @@ withDefaults(
     collapse: true,
   },
 )
+
+const open = useVModel(props, 'open', undefined, { passive: true })
+function onToggle(e: any) {
+  open.value = e.target.open
+}
 </script>
 
 <template>
-  <details :open="open">
+  <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">
         <div>
@@ -40,7 +47,7 @@ withDefaults(
         />
       </NIconTitle>
     </summary>
-    <div class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+    <div v-lazy-if="open" class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
       <slot name="details" />
       <div :class="containerClass" class="mt1">
         <slot />

package/dist/module.json

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

package/dist/module.mjs

@@ -8,7 +8,9 @@ import '@unocss/preset-mini';
 import '@unocss/preset-mini/rules';
 import 'unocss';
 
-const rPath = (p) => fileURLToPath(new URL(p, import.meta.url).toString());
+function rPath(p) {
+  return fileURLToPath(new URL(p, import.meta.url).toString());
+}
 const module = defineNuxtModule({
   meta: {
     name: "devtools-ui-kit",
@@ -29,6 +31,7 @@ const module = defineNuxtModule({
     await installModule(await resolver.resolvePath("@unocss/nuxt"));
     await installModule(await resolver.resolvePath("@vueuse/nuxt"));
     await installModule(await resolver.resolvePath("@nuxtjs/color-mode"));
+    await installModule(await resolver.resolvePath("v-lazy-show/nuxt"));
   }
 });
 

package/dist/runtime/client.d.ts

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

package/dist/unocss.d.ts

@@ -1,7 +1,7 @@
 import { Preset } from '@unocss/core';
 import { UnocssNuxtOptions } from '@unocss/nuxt';
 
-declare const unocssPreset: () => Preset;
+declare function unocssPreset(): Preset;
 declare function extendUnocssOptions(user?: UnocssNuxtOptions): UnocssNuxtOptions;
 
 export { extendUnocssOptions, unocssPreset };

package/dist/unocss.mjs

@@ -3,108 +3,110 @@ import { theme } from '@unocss/preset-mini';
 import { fonts } from '@unocss/preset-mini/rules';
 import { mergeDeep, presetUno, presetAttributify, presetTypography, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
 
-const unocssPreset = () => ({
-  name: "@nuxt/devtools-ui-kit",
-  theme: mergeDeep(theme, {
-    colors: {
-      context: "rgba(var(--nui-c-context),%alpha)"
-    },
-    fontFamily: {
-      sans: "Avenir, Helvetica, Arial, sans-serif"
-    }
-  }),
-  rules: [
-    [/^n-(.*)$/, ([, body], { theme }) => {
-      const color = parseColor(body, theme);
-      if (color?.cssColor?.type === "rgb" && color.cssColor.components) {
-        return {
-          "--nui-c-context": `${color.cssColor.components.join(",")}`
-        };
-      }
-    }],
-    [/^n-(.*)$/, fonts[1][1]],
-    ["n-dashed", { "border-style": "dashed" }],
-    ["n-solid", {
-      "background-color": "rgba(var(--nui-c-context), 1) !important",
-      "border-color": "rgba(var(--nui-c-context), 1)",
-      "color": "white !important"
-    }],
-    ["n-disabled", {
-      "opacity": 0.4,
-      "pointer-events": "none",
-      "filter": "saturate(0)"
-    }]
-  ],
-  variants: [
-    (input) => {
-      const prefix = "n-disabled:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
-        };
+function unocssPreset() {
+  return {
+    name: "@nuxt/devtools-ui-kit",
+    theme: mergeDeep(theme, {
+      colors: {
+        context: "rgba(var(--nui-c-context),%alpha)"
+      },
+      fontFamily: {
+        sans: "Avenir, Helvetica, Arial, sans-serif"
       }
-    },
-    (input) => {
-      const prefix = "n-checked:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
-        };
+    }),
+    rules: [
+      [/^n-(.*)$/, ([, body], { theme }) => {
+        const color = parseColor(body, theme);
+        if (color?.cssColor?.type === "rgb" && color.cssColor.components) {
+          return {
+            "--nui-c-context": `${color.cssColor.components.join(",")}`
+          };
+        }
+      }],
+      [/^n-(.*)$/, fonts[1][1]],
+      ["n-dashed", { "border-style": "dashed" }],
+      ["n-solid", {
+        "background-color": "rgba(var(--nui-c-context), 1) !important",
+        "border-color": "rgba(var(--nui-c-context), 1)",
+        "color": "white !important"
+      }],
+      ["n-disabled", {
+        "opacity": 0.4,
+        "pointer-events": "none",
+        "filter": "saturate(0)"
+      }]
+    ],
+    variants: [
+      (input) => {
+        const prefix = "n-disabled:";
+        if (input.startsWith(prefix)) {
+          return {
+            matcher: input.slice(prefix.length),
+            selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
+          };
+        }
+      },
+      (input) => {
+        const prefix = "n-checked:";
+        if (input.startsWith(prefix)) {
+          return {
+            matcher: input.slice(prefix.length),
+            selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
+          };
+        }
       }
+    ],
+    shortcuts: {
+      // general
+      "n-bg-base": "bg-white dark:bg-[#151515]",
+      "n-bg-active": "bg-gray:5",
+      "n-bg-hover": "bg-gray:3",
+      "n-border-base": "border-gray/20",
+      "n-transition": "transition-all duration-200",
+      "n-focus-base": "ring-2 ring-context/50",
+      "n-active-base": "ring-3 ring-context/10",
+      "n-borderless": "!border-none !shadow-none",
+      // link
+      "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
+      "n-link-hover": "decoration-dotted text-context underline-context",
+      // card
+      "n-card-base": "border n-border-base rounded n-bg-base shadow-sm",
+      // header
+      "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
+      // button
+      "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none touch-manipulation",
+      "n-button-hover": "op100 !border-context text-context",
+      "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 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",
+      "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
+      "n-radio-inner-checked": "w-0.8em h-0.8em",
+      // switch
+      "n-switch-base": "inline-flex items-center select-none",
+      "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
+      "n-switch-slider-checked": "border-context/20 bg-context/10",
+      "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
+      "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
+      // 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",
+      // 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"
     }
-  ],
-  shortcuts: {
-    // general
-    "n-bg-base": "bg-white dark:bg-[#151515]",
-    "n-bg-active": "bg-gray:5",
-    "n-bg-hover": "bg-gray:3",
-    "n-border-base": "border-gray/20",
-    "n-transition": "transition-all duration-200",
-    "n-focus-base": "ring-2 ring-context/50",
-    "n-active-base": "ring-3 ring-context/10",
-    "n-borderless": "!border-none !shadow-none",
-    // link
-    "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
-    "n-link-hover": "decoration-dotted text-context underline-context",
-    // card
-    "n-card-base": "border n-border-base rounded n-bg-base shadow-sm",
-    // header
-    "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
-    // button
-    "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none touch-manipulation",
-    "n-button-hover": "op100 !border-context text-context",
-    "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 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",
-    "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
-    "n-radio-inner-checked": "w-0.8em h-0.8em",
-    // switch
-    "n-switch-base": "inline-flex items-center select-none",
-    "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
-    "n-switch-slider-checked": "border-context/20 bg-context/10",
-    "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
-    "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
-    // 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",
-    // 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:bg-active",
-    // loading
-    "n-loading": "flex h-full w-full justify-center items-center"
-  }
-});
+  };
+}
 function extendUnocssOptions(user = {}) {
   return {
     ...user,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,11 +23,11 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.3.0"
+    "@nuxt/devtools": "0.3.2"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@nuxt/kit": "^3.3.1",
+    "@nuxt/kit": "^3.3.2",
     "@nuxtjs/color-mode": "^3.2.0",
     "@unocss/core": "^0.50.6",
     "@unocss/nuxt": "^0.50.6",
@@ -41,11 +41,12 @@
     "defu": "^6.1.2",
     "focus-trap": "^7.4.0",
     "unocss": "^0.50.6",
-    "@nuxt/devtools": "0.3.0",
-    "@nuxt/devtools-kit": "0.3.0"
+    "v-lazy-show": "^0.2.1",
+    "@nuxt/devtools": "0.3.2",
+    "@nuxt/devtools-kit": "0.3.2"
   },
   "devDependencies": {
-    "nuxt": "^3.3.1"
+    "nuxt": "^3.3.2"
   },
   "publishConfig": {
     "access": "public"