@nuxt/ui 0.1.1 → 0.3.1

package/README.md

@@ -12,7 +12,7 @@ UI kit for Nuxt 3's examples and internal tooling UI.
 
 ```ts
 // nuxt.config.js
-import { defineNuxtConfig } from 'nuxt3'
+import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
   modules: [
@@ -61,7 +61,7 @@ It's also possible to override the default theme globally, for example:
 
 ```ts
 // nuxt.config.js
-import { defineNuxtConfig } from 'nuxt3'
+import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
   modules: [

package/dist/components/NuxtContentLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg viewBox="0 0 236 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.3445 12.5176c-1.8181-3.10288-6.3636-3.10288-8.1819 0L1.34708 46.334c-1.8182 3.1029.45453 6.9814 4.09096 6.9814H20.9071c-1.5538-1.3478-2.1292-3.6793-.9532-5.68l15.0073-25.5327-5.6167-9.5851Z" fill="#80EEC0" />
+    <path d="M41.9001 19.9353c1.5048-2.5387 5.2665-2.5387 6.7712 0l16.3991 27.6679c1.5048 2.5387-.3762 5.7122-3.3855 5.7122H28.8867c-3.0093 0-4.8904-3.1735-3.3857-5.7122l16.3991-27.6679Z" fill="#00DC82" />
+    <path d="M93.247 53.206c7.271 0 12.682-4.1739 13.273-10.2874h-5.579c-.508 3.2042-3.6358 5.4388-7.694 5.4388-5.1572 0-9.0462-3.5415-9.0462-10.2451 0-6.7037 3.889-10.2875 9.0462-10.2875 3.9735 0 7.102 2.2345 7.524 5.4811h5.834c-.803-6.1135-6.214-10.2875-13.358-10.2875-7.7358 0-14.6684 5.0593-14.6684 15.0939 0 10.0344 6.8059 15.0937 14.6684 15.0937Zm26.866 0c6.468 0 11.118-4.6378 11.118-10.962 0-6.3242-4.65-10.962-11.118-10.962-6.51 0-11.159 4.6378-11.159 10.962 0 6.3242 4.649 10.962 11.159 10.962Zm0-4.4692c-3.55 0-5.918-2.6562-5.918-6.4928 0-3.8368 2.368-6.4927 5.918-6.4927 3.509 0 5.877 2.6559 5.877 6.4927 0 3.8366-2.368 6.4928-5.877 6.4928Zm19.826 4.1319V41.2743c0-3.12 2.029-5.3967 4.946-5.3967 2.663 0 4.439 2.0239 4.439 4.933v12.0581h5.199V39.7143c0-4.975-3.128-8.4323-7.947-8.4323-3.044 0-5.453 1.3071-6.637 3.6259v-3.2886h-5.199v21.2494h5.199Zm21.158-21.2494h-4.185v4.3427h4.185v9.4864c0 4.722 3.044 7.4203 7.694 7.4203h3.424v-4.3849h-2.833c-1.943 0-3.085-1.0961-3.085-3.2464V35.962h5.918v-4.3427h-5.918v-6.4085h-5.2v6.4085Zm28.684 14.1662c-.55 2.0237-2.283 3.12-4.946 3.12-3.297 0-5.495-2.1924-5.876-5.6074h15.725c.043-.4217.085-1.0541.085-1.7709 0-5.0593-3.211-10.2452-10.357-10.2452-6.974 0-10.441 5.2703-10.441 10.8776 0 5.5654 3.89 11.0464 10.864 11.0464 5.243 0 9.215-2.9092 10.018-7.4205h-5.072Zm-5.369-10.6245c3.086 0 4.947 2.0237 5.158 4.722h-10.483c.549-3.2044 2.408-4.722 5.325-4.722Zm19.141 17.7077V41.2743c0-3.12 2.029-5.3967 4.947-5.3967 2.663 0 4.439 2.0239 4.439 4.933v12.0581h5.199V39.7143c0-4.975-3.128-8.4323-7.947-8.4323-3.044 0-5.453 1.3071-6.638 3.6259v-3.2886h-5.199v21.2494h5.199Zm21.159-21.2494h-4.185v4.3427h4.185v9.4864c0 4.722 3.043 7.4203 7.693 7.4203h3.425v-4.3849h-2.833c-1.945 0-3.086-1.0961-3.086-3.2464V35.962h5.919v-4.3427h-5.919v-6.4085h-5.199v6.4085Z" fill="currentColor" />
+  </svg>
+</template>

package/dist/components/NuxtExampleLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import NIcon from './NIcon.vue'
-import NuxtIcon from './NuxtIcon.vue'
+import NuxtLogo from './NuxtLogo.vue'
+import NuxtContentLogo from './NuxtContentLogo.vue'
 
 interface Props {
   example?: string
@@ -22,8 +23,9 @@ const openInEditor = () => {
   <div class="relative font-sans" n="green6">
     <div class="container max-w-200 mx-auto py-10 px-4">
       <div class="flex items-end gap-3 mb-4 relative">
-        <slot name="icon">
-          <NuxtIcon />
+        <slot name="logo">
+          <NuxtContentLogo v-if="repo === 'nuxt/content'" class="h-10" />
+          <NuxtLogo v-else class="h-10" />
         </slot>
         <div class="text-xl flex">
           <div class="op-50">

package/dist/components/{NuxtIcon.vue → NuxtLogo.vue}

@@ -1,5 +1,5 @@
 <template>
-  <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-10">
+  <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#a)">
       <path
         fill="currentColor"

package/dist/components/nuxt/NDarkToggle.vue

@@ -9,8 +9,8 @@ const isDark = computed<boolean>({
   get () {
     return mode.value === 'dark'
   },
-  set (v) {
-    mode.preference = v ? 'dark' : 'light'
+  set () {
+    mode.preference = isDark.value ? 'light' : 'dark'
   }
 })
 const toggle = useToggle(isDark)

package/dist/nuxt.mjs

@@ -1,123 +1,11 @@
 import { fileURLToPath } from 'url';
-import { defineNuxtModule, addComponentsDir, installModule } from '@nuxt/kit';
+import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
 import defu from 'defu';
-import UnocssModule from '@unocss/nuxt';
-import VueUseModule from '@vueuse/nuxt';
-import NuxtColorMode from '@nuxtjs/color-mode';
-import { parseColor } from '@unocss/preset-mini/utils';
-import { theme } from '@unocss/preset-mini';
-import { fonts } from '@unocss/preset-mini/rules';
-import { mergeDeep, presetUno, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
-
-const NuxtUIPreset = {
-  name: "nuxt-ui",
-  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]`
-        };
-      }
-    },
-    (input) => {
-      const prefix = "n-checked:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
-        };
-      }
-    }
-  ],
-  shortcuts: {
-    "n-bg-base": "bg-white dark:bg-[#222]",
-    "n-border-base": "border-gray-400/50",
-    "n-border-300": "border-gray-400/40",
-    "n-border-200": "border-gray-400/25",
-    "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",
-    "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
-    "n-link-hover": "decoration-dotted text-context underline-context",
-    "n-card-base": "border n-border-200 rounded n-bg-base shadow-sm",
-    "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
-    "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none",
-    "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",
-    "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-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",
-    "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",
-    "n-tip-base": "bg-context/8 text-context px-1em py-0.4em rounded flex items-center dark:bg-context/12",
-    "n-tip-icon": "-ml-0.2em mr-0.4em text-1.1em"
-  }
-};
-function extendUnocssOptions(user = {}) {
-  return {
-    ...user,
-    preflight: true,
-    presets: [
-      presetUno(),
-      presetAttributify(),
-      presetIcons({
-        prefix: "",
-        scale: 1.2,
-        extraProperties: {
-          display: "inline-block",
-          "vertical-align": "middle"
-        }
-      }),
-      NuxtUIPreset,
-      ...user.presets || []
-    ],
-    transformers: [
-      transformerDirectives(),
-      transformerVariantGroup()
-    ]
-  };
-}
+import { extendUnocssOptions } from './unocss.mjs';
+import '@unocss/preset-mini/utils';
+import '@unocss/preset-mini';
+import '@unocss/preset-mini/rules';
+import 'unocss';
 
 const rPath = (p) => fileURLToPath(new URL(p, import.meta.url).toString());
 const nuxt = defineNuxtModule({
@@ -136,11 +24,12 @@ const nuxt = defineNuxtModule({
     if (!options.dev) {
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
     }
-    nuxt.options.vueuse = Object.assign({ ssrHandlers: true }, nuxt.options.vueuse || {});
+    nuxt.options.vueuse = nuxt.options.vueuse || {};
     nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: "" });
-    await installModule(UnocssModule);
-    await installModule(VueUseModule);
-    await installModule(NuxtColorMode);
+    const resolver = createResolver(import.meta.url);
+    await installModule(await resolver.resolvePath("@unocss/nuxt"));
+    await installModule(await resolver.resolvePath("@vueuse/nuxt"));
+    await installModule(await resolver.resolvePath("@nuxtjs/color-mode"));
   }
 });
 

package/dist/unocss.d.ts

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

package/dist/unocss.mjs

@@ -0,0 +1,117 @@
+import { parseColor } from '@unocss/preset-mini/utils';
+import { theme } from '@unocss/preset-mini';
+import { fonts } from '@unocss/preset-mini/rules';
+import { mergeDeep, presetUno, presetAttributify, presetTypography, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
+
+const NuxtUIPreset = () => ({
+  name: "nuxt-ui",
+  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]`
+        };
+      }
+    },
+    (input) => {
+      const prefix = "n-checked:";
+      if (input.startsWith(prefix)) {
+        return {
+          matcher: input.slice(prefix.length),
+          selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
+        };
+      }
+    }
+  ],
+  shortcuts: {
+    "n-bg-base": "bg-white dark:bg-[#222]",
+    "n-border-base": "border-gray-400/50",
+    "n-border-300": "border-gray-400/40",
+    "n-border-200": "border-gray-400/25",
+    "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",
+    "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
+    "n-link-hover": "decoration-dotted text-context underline-context",
+    "n-card-base": "border n-border-200 rounded n-bg-base shadow-sm",
+    "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
+    "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none",
+    "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",
+    "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-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",
+    "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",
+    "n-tip-base": "bg-context/8 text-context px-1em py-0.4em rounded flex items-center dark:bg-context/12",
+    "n-tip-icon": "-ml-0.2em mr-0.4em text-1.1em"
+  }
+});
+function extendUnocssOptions(user = {}) {
+  return {
+    ...user,
+    preflight: true,
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetTypography(),
+      presetIcons({
+        prefix: "",
+        scale: 1.2,
+        extraProperties: {
+          display: "inline-block",
+          "vertical-align": "middle"
+        }
+      }),
+      NuxtUIPreset(),
+      ...user.presets || []
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup()
+    ]
+  };
+}
+
+export { NuxtUIPreset, extendUnocssOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -11,6 +11,9 @@
     "./nuxt": {
       "import": "./dist/nuxt.mjs",
       "require": "./nuxt.cjs"
+    },
+    "./unocss": {
+      "import": "./dist/unocss.mjs"
     }
   },
   "main": "./dist/nuxt.mjs",
@@ -20,34 +23,34 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "dev": "yarn nuxi dev playground",
+    "dev": "nuxi dev playground",
     "lint": "eslint . --ext .vue,.ts",
     "prepack": "npm run build",
-    "playground:build": "yarn nuxi build playground"
+    "playground:build": "nuxi build playground"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.1.3",
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@nuxtjs/color-mode": "^3.0.2",
-    "@unocss/core": "^0.31.6",
-    "@unocss/nuxt": "^0.31.6",
-    "@unocss/preset-attributify": "^0.31.6",
-    "@unocss/preset-icons": "^0.31.6",
-    "@unocss/preset-mini": "^0.31.6",
-    "@unocss/reset": "^0.31.6",
-    "@vueuse/core": "^8.2.6",
-    "@vueuse/integrations": "^8.2.6",
-    "@vueuse/nuxt": "^8.2.6",
+    "@iconify-json/carbon": "^1.1.7",
+    "@nuxt/kit": "^3.0.0-rc.7",
+    "@nuxtjs/color-mode": "^3.1.4",
+    "@unocss/core": "^0.45.6",
+    "@unocss/nuxt": "^0.45.6",
+    "@unocss/preset-attributify": "^0.45.6",
+    "@unocss/preset-icons": "^0.45.6",
+    "@unocss/preset-mini": "^0.45.6",
+    "@unocss/reset": "^0.45.6",
+    "@vueuse/core": "^9.1.0",
+    "@vueuse/integrations": "^9.1.0",
+    "@vueuse/nuxt": "^9.1.0",
     "defu": "^6.0.0",
-    "focus-trap": "^6.7.3",
-    "unocss": "^0.31.6"
+    "focus-trap": "^6.9.4",
+    "unocss": "^0.45.6"
   },
   "devDependencies": {
-    "nuxt3": "latest",
-    "unbuild": "^0.7.4"
+    "nuxt": "npm:nuxt3@latest",
+    "unbuild": "^0.8.8"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "efbb705b65badd081240c63f63be61ec3874e9dc"
+  "gitHead": "24129e2a12f60e30fd1bfc66fa0e5f9d4bb9cbf1"
 }