@nuxt/ui 0.0.0-alpha.1 → 0.0.0-alpha.5

package/README.md

@@ -1,5 +1,9 @@
 # Nuxt UI
 
+UI kit for Nuxt 3's examples and internal tooling UI.
+
+> Note: This is library heavily working in progress and does not serve as a generic UI library (for now).
+
 ## Install
 
 ```sh
@@ -10,18 +14,61 @@ npm install @nuxt/ui@npm:@nuxt/ui-edge
 yarn install @nuxt/ui@npm:@nuxt/ui-edge
 ```
 
+```ts
+// nuxt.config.js
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  buildModules: [
+    '@nuxt/ui'
+  ]
+})
+```
+
 ## Usage
 
+Nuxt UI is an unbundled component library powered by [UnoCSS](https://github.com/antfu/unocss) and [VueUse](https://vueuse.org/).
+
+In Nuxt UI, we introduced the `n` attribute for every component to customize the styles and variations. For example, to make a red button:
+
+```html
+<NButton n="red" />
+```
+
+to make it larger, add the size specifier (`sm`, `md`, `lg` or `xl`) the `n` attribute:
+
+```html
+<NButton n="red xl" />
+```
+
+You can apply the same specifiers to any other component, for example:
+
+```html
+<NCheckbox n="red xl" />
+```
+
+Apply it to parent components could make a local theme scope
+
+```html
+<NCard n="green-500">
+  <!-- both of them are themed green -->
+  <NCheckbox>i accept the terms & conditions</NCheckbox>
+  <NButton>Submit</NButton>
+</NCard>
+```
+
 ## Components
 
 ### Base
 
-- [ ] `<NCard>`
-- [ ] `<NInput>`
-- [ ] `<NCheckbox>`
-- [ ] `<NRadio>`
-- [ ] `<NIcon>`
-- [ ] `<NButton>`
+- [x] `<NCard>`
+- [x] `<NTextInput>`
+- [x] `<NCheckbox>`
+- [x] `<NRadio>`
+- [x] `<NIcon>`
+- [x] `<NLink>`
+- [x] `<NButton>`
+- [x] `<NTip>`
 - [ ] `<NButtonGroup>`
 - [ ] `<NSpinner>`
 - [ ] `<NAlert>`
@@ -29,6 +76,7 @@ yarn install @nuxt/ui@npm:@nuxt/ui-edge
 
 ### Interactive
 
+- [x] `<NDialog>`
 - [ ] `<NTabs>`
 - [ ] `<NDropdown>`
 - [ ] `<NPopup>`

package/dist/assets/logo-nuxt3.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
+  <g clip-path="url(#a)">
+    <path fill="currentColor"
+      d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z">
+    </path>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
+      fill="#80EEC0"></path>
+    <path
+      d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
+      fill="#00DC82"></path>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h221v65H0z"></path>
+    </clipPath>
+  </defs>
+</svg>

package/dist/components/NLink.vue

@@ -0,0 +1,17 @@
+<template>
+  <Component
+    :is="(href || target) ? 'a' : 'nuxt-link'"
+    v-bind="$props"
+    class="n-link n-link-base n-transition"
+  >
+    <slot />
+  </Component>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to?: string
+  href?: string
+  target?: string
+}>()
+</script>

package/dist/components/NuxtExampleLayout.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name?: string
+  showTips?: boolean
+  class?: string
+  openPath?: string
+}>()
+
+const openInEditor = () => {
+  fetch(`/__open-in-editor?file=${encodeURIComponent(props.openPath || 'app.vue')}`)
+}
+</script>
+
+<template>
+  <div class="relative font-sans" n="green6">
+    <div class="container max-w-200 mx-auto py-10 px-4">
+      <div class="flex flex-col gap-2 items-center mb-4">
+        <img src="../assets/logo-nuxt3.svg" h="12">
+        <div class="text-xl flex">
+          <div class="op-50">
+            examples/
+          </div>
+          <slot name="name">
+            <NLink :href="`https://github.com/nuxt/framework/tree/main/examples/${name}`" target="_blank">
+              {{ name }}
+            </NLink>
+          </slot>
+        </div>
+        <slot name="subtitle" />
+      </div>
+
+      <slot name="nav" />
+
+      <NCard class="p-6 flex flex-col gap-2 text-center" :class="$props.class">
+        <slot />
+      </NCard>
+
+      <div
+        v-if="$slots.tips"
+        :class="showTips ? 'opacity-100' : 'opacity-0'"
+        class="transition py-5 flex items-center gap-2 text-gray-400"
+      >
+        <NIcon icon="carbon-idea" class="text-xl flex-none" />
+        <slot name="tips" />
+        <NButton icon="carbon-edit" class="flex-none" @click="openInEditor">
+          Open in Editor
+        </NButton>
+      </div>
+
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/dist/nuxt.mjs

@@ -6,7 +6,7 @@ import UnocssModule from '@unocss/nuxt';
 import VueUseModule from '@vueuse/nuxt';
 import { mergeDeep } from '@unocss/core';
 import presetUno, { theme } from '@unocss/preset-uno';
-import { parseColorUtil, fontSizes } from '@unocss/preset-mini/rules';
+import { parseColorUtil, fonts } from '@unocss/preset-mini/rules';
 import presetIcons from '@unocss/preset-icons';
 import presetAttributify from '@unocss/preset-attributify';
 
@@ -29,7 +29,7 @@ const NuxtUIPreset = {
         };
       }
     }],
-    [/^n-(.*)$/, fontSizes[0][1]],
+    [/^n-(.*)$/, fonts[1][1]],
     ["n-dashed", { "border-style": "dashed" }],
     ["n-solid", {
       "background-color": "rgba(var(--nui-c-context), 1) !important",
@@ -70,8 +70,9 @@ const NuxtUIPreset = {
     "n-transition": "transition-all duration-200",
     "n-focus-base": "ring-2 ring-context/50",
     "n-active-base": "ring-3 ring-context/10",
+    "n-link-base": "hover:decoration-dotted hover:underline-offset-2 hover:text-context hover:underline",
     "n-card-base": "border n-border-200 rounded n-bg-base shadow-sm",
-    "n-header-upper": "text-sm case-upper mb-2 leading-1.2em tracking-wide op50",
+    "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",

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@nuxt/ui",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.5",
   "type": "module",
   "license": "MIT",
   "scripts": {
     "build": "unbuild && cp -R src/components dist/",
     "lint": "eslint . --ext .vue,.ts",
     "dev": "yarn nuxi dev playground",
-    "release": "bumpp --commit --tag --push --preid alpha && npm publish"
+    "prepublishOnly": "npm run build",
+    "release": "bumpp --commit --tag --push --preid alpha && yarn publish --non-interactive"
   },
   "main": "./dist/nuxt.mjs",
   "exports": {
@@ -26,25 +27,25 @@
   ],
   "dependencies": {
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@unocss/core": "^0.15.6",
-    "@unocss/nuxt": "^0.15.6",
-    "@unocss/preset-attributify": "^0.15.6",
-    "@unocss/preset-icons": "^0.15.6",
-    "@unocss/preset-mini": "^0.15.6",
-    "@unocss/preset-uno": "^0.15.6",
-    "@unocss/reset": "^0.15.6",
-    "@vueuse/integrations": "^7.2.2",
-    "@vueuse/nuxt": "^7.2.2",
+    "@unocss/core": "^0.16.4",
+    "@unocss/nuxt": "^0.16.4",
+    "@unocss/preset-attributify": "^0.16.4",
+    "@unocss/preset-icons": "^0.16.4",
+    "@unocss/preset-mini": "^0.16.4",
+    "@unocss/preset-uno": "^0.16.4",
+    "@unocss/reset": "^0.16.4",
+    "@vueuse/integrations": "^7.3.0",
+    "@vueuse/nuxt": "^7.3.0",
     "focus-trap": "^6.7.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.12.2",
+    "@antfu/eslint-config": "^0.13.1",
     "@iconify-json/carbon": "^1.0.12",
     "bumpp": "^7.1.1",
     "eslint": "^8.4.1",
     "nuxt3": "latest",
-    "typescript": "^4.5.2",
-    "unbuild": "^0.6.3"
+    "typescript": "^4.5.4",
+    "unbuild": "^0.6.7"
   },
   "eslintConfig": {
     "extends": "@antfu"

package/dist/nuxt.cjs

@@ -1,145 +0,0 @@
-'use strict';
-
-const url = require('url');
-const path = require('path');
-const fs = require('fs');
-const kit = require('@nuxt/kit');
-const UnocssModule = require('@unocss/nuxt');
-const VueUseModule = require('@vueuse/nuxt');
-const core = require('@unocss/core');
-const presetUno = require('@unocss/preset-uno');
-const rules = require('@unocss/preset-mini/rules');
-const presetIcons = require('@unocss/preset-icons');
-const presetAttributify = require('@unocss/preset-attributify');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-const UnocssModule__default = /*#__PURE__*/_interopDefaultLegacy(UnocssModule);
-const VueUseModule__default = /*#__PURE__*/_interopDefaultLegacy(VueUseModule);
-const presetUno__default = /*#__PURE__*/_interopDefaultLegacy(presetUno);
-const presetIcons__default = /*#__PURE__*/_interopDefaultLegacy(presetIcons);
-const presetAttributify__default = /*#__PURE__*/_interopDefaultLegacy(presetAttributify);
-
-const NuxtUIPreset = {
-  name: "nuxt-ui",
-  theme: core.mergeDeep(presetUno.theme, {
-    colors: {
-      context: "rgba(var(--nui-c-context),%alpha)"
-    },
-    fontFamily: {
-      sans: "Avenir, Helvetica, Arial, sans-serif"
-    }
-  }),
-  rules: [
-    [/^n-(.*)$/, ([, body], { theme }) => {
-      const { rgba } = rules.parseColorUtil(body, theme) || {};
-      if (rgba) {
-        return {
-          "--nui-c-context": `${rgba.join(",")}`
-        };
-      }
-    }],
-    [/^n-(.*)$/, rules.fontSizes[0][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-card-base": "border n-border-200 rounded n-bg-base shadow-sm",
-    "n-header-upper": "text-sm case-upper 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__default(),
-      presetAttributify__default(),
-      presetIcons__default({
-        prefix: "",
-        scale: 1.2,
-        extraProperties: {
-          "display": "inline-block",
-          "vertical-align": "middle"
-        }
-      }),
-      NuxtUIPreset,
-      ...user.presets || []
-    ]
-  };
-}
-
-const rPath = (p) => url.fileURLToPath(new URL(p, (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('nuxt.cjs', document.baseURI).href))).toString());
-const nuxt = kit.defineNuxtModule({
-  name: "nui",
-  defaults: {
-    preset: rPath("./preset"),
-    dev: false
-  },
-  async setup(options, nuxt) {
-    kit.addComponentsDir({ path: rPath("./components") });
-    const presetStyles = path.resolve(options.preset, "styles.css");
-    if (fs.existsSync(presetStyles))
-      nuxt.options.css.push(presetStyles);
-    if (!options.dev)
-      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
-    await kit.installModule(nuxt, UnocssModule__default);
-    await kit.installModule(nuxt, VueUseModule__default);
-  }
-});
-
-module.exports = nuxt;