@nuxt/ui 0.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Nuxt Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,47 @@
+# Nuxt UI
+
+## Install
+
+```sh
+# npm
+npm install @nuxt/ui@npm:@nuxt/ui-edge
+
+# yarn
+yarn install @nuxt/ui@npm:@nuxt/ui-edge
+```
+
+## Usage
+
+## Components
+
+### Base
+
+- [ ] `<NCard>`
+- [ ] `<NInput>`
+- [ ] `<NCheckbox>`
+- [ ] `<NRadio>`
+- [ ] `<NIcon>`
+- [ ] `<NButton>`
+- [ ] `<NButtonGroup>`
+- [ ] `<NSpinner>`
+- [ ] `<NAlert>`
+- [ ] `<NBadge>`
+
+### Interactive
+
+- [ ] `<NTabs>`
+- [ ] `<NDropdown>`
+- [ ] `<NPopup>`
+- [ ] `<NNotification>`
+- [ ] `<NModal>`
+
+### Layout
+
+- [ ] `<NContainer>`
+- [ ] `<NDrawer>`
+- [ ] `<NNavbar>`
+- [ ] `<NPagination>`
+
+## License
+
+MIT

package/dist/components/NButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <Component
+    :is="to ? 'a' : 'button'"
+    :href="to"
+    class="n-button n-transition n-button-base hover:n-button-hover active:n-button-active focus-visible:n-focus-base n-disabled:n-disabled"
+  >
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="n-button-icon" />
+    </slot>
+    <slot />
+  </Component>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  to?: string
+  icon?: string
+}>()
+</script>

package/dist/components/NCard.vue

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

package/dist/components/NCheckbox.vue

@@ -0,0 +1,35 @@
+<template>
+  <label
+    class="n-checkbox inline-flex items-center select-none hover:n-checkbox-hover n-disabled:n-disabled"
+    :checked="checked || null"
+    :disabled="disabled || null"
+  >
+    <input
+      v-model="checked"
+      type="checkbox"
+      class="absolute op0 peer"
+      :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 n-checkbox-icon transform scale-0 op0 n-checked:op100 n-checked:scale-100" />
+    </span>
+    <span><slot /></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean }>(),
+  {
+    modelValue: false,
+    disabled: false,
+  },
+)
+const emit = defineEmits<{(...args: any): void}>()
+const checked = useVModel(props, 'modelValue', emit, { passive: true })
+</script>

package/dist/components/NDialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="n-dialog n-transition fixed inset-0 flex items-center justify-center z-100"
+    :class="[
+      show ? '' : 'op0 pointer-events-none',
+    ]"
+  >
+    <div
+      class="absolute inset-0 -z-1"
+      :class="[
+        dim ? 'bg-black/50' : ''
+      ]"
+      @click="close"
+    />
+    <NCard v-bind="$attrs" ref="card">
+      <slot />
+    </NCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    dim?: boolean
+  }>(),
+  {
+    modelValue: false,
+    dim: true,
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+
+const show = useVModel(props, 'modelValue', emit, { passive: true })
+const card = ref(null)
+
+const { activate, deactivate } = useFocusTrap(card, { immediate: false })
+
+onMounted(() => {
+  watch(show, (v) => {
+    if (v)
+      activate()
+    else
+      deactivate()
+  }, { immediate: true })
+})
+
+function close() {
+  show.value = false
+  emit('close')
+}
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>

package/dist/components/NIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="n-icon" :class="icon" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+}>()
+</script>

package/dist/components/NRadio.vue

@@ -0,0 +1,40 @@
+<template>
+  <label
+    class="n-radio inline-flex items-center select-none hover:n-radio-hover n-disabled:n-disabled"
+    :checked="model === value || null"
+    :disabled="disabled || null"
+  >
+    <input
+      v-model="model"
+      type="radio"
+      class="absolute op0 peer"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      @keypress.enter="model = value"
+    >
+    <span class="n-transition n-radio-box n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
+      <div class="n-transition n-radio-inner n-checked:n-radio-inner-checked" />
+    </span>
+    <span><slot /></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    disabled?: boolean
+    name?: string
+    value?: string
+  }>(),
+  {
+    modelValue: '',
+    disabled: false,
+  },
+)
+const emit = defineEmits<{(...args: any): void}>()
+const model = useVModel(props, 'modelValue', emit, { passive: true })
+</script>

package/dist/components/NSwitch.vue

@@ -0,0 +1,37 @@
+<template>
+  <label
+    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"
+      :disabled="disabled"
+      @keypress.enter="checked = !checked"
+    >
+    <div class="n-transition n-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
+      <div
+        class="n-transition n-switch-thumb n-checked:n-switch-thumb-checked"
+      />
+    </div>
+    <span><slot /></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean }>(),
+  {
+    modelValue: false,
+    disabled: false,
+  },
+)
+const emit = defineEmits<{(...args: any): void}>()
+const checked = useVModel(props, 'modelValue', emit, { passive: true })
+</script>

package/dist/components/NTextInput.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="n-text-input n-bg-base focus-within:n-focus-base focus-within:border-context rounded px-2 py-1 border n-border-base flex items-center flex">
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
+    </slot>
+    <input
+      v-model="input"
+      class="!outline-none flex-auto n-bg-base"
+      type="text"
+      :placeholder="placeholder"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: '',
+    disabled: false,
+  },
+)
+const emit = defineEmits<{(...args: any): void}>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>

package/dist/components/NTip.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="n-tip n-tip-base">
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="n-tip-icon" />
+    </slot>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+}>()
+</script>

package/dist/nuxt.cjs

@@ -0,0 +1,145 @@
+'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;

package/dist/nuxt.d.ts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.LegacyNuxtModule;
+
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        nui?: {
+            dev?: boolean;
+        };
+    }
+}
+
+export { _default as default };

package/dist/nuxt.mjs

@@ -0,0 +1,135 @@
+import { fileURLToPath } from 'url';
+import { resolve } from 'path';
+import { existsSync } from 'fs';
+import { defineNuxtModule, addComponentsDir, installModule } from '@nuxt/kit';
+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 presetIcons from '@unocss/preset-icons';
+import presetAttributify from '@unocss/preset-attributify';
+
+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 { rgba } = parseColorUtil(body, theme) || {};
+      if (rgba) {
+        return {
+          "--nui-c-context": `${rgba.join(",")}`
+        };
+      }
+    }],
+    [/^n-(.*)$/, 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(),
+      presetAttributify(),
+      presetIcons({
+        prefix: "",
+        scale: 1.2,
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
+      }),
+      NuxtUIPreset,
+      ...user.presets || []
+    ]
+  };
+}
+
+const rPath = (p) => fileURLToPath(new URL(p, import.meta.url).toString());
+const nuxt = defineNuxtModule({
+  name: "nui",
+  defaults: {
+    preset: rPath("./preset"),
+    dev: false
+  },
+  async setup(options, nuxt) {
+    addComponentsDir({ path: rPath("./components") });
+    const presetStyles = resolve(options.preset, "styles.css");
+    if (existsSync(presetStyles))
+      nuxt.options.css.push(presetStyles);
+    if (!options.dev)
+      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
+    await installModule(nuxt, UnocssModule);
+    await installModule(nuxt, VueUseModule);
+  }
+});
+
+export { nuxt as default };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@nuxt/ui",
+  "version": "0.0.0-alpha.0",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "build": "unbuild && cp -R src/components dist/",
+    "lint": "eslint . --ext .vue,.ts",
+    "dev": "yarn nuxi dev playground"
+  },
+  "main": "./dist/nuxt.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/nuxt.mjs",
+      "require": "./nuxt.cjs"
+    },
+    "./nuxt": {
+      "import": "./dist/nuxt.mjs",
+      "require": "./nuxt.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "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/nuxt": "^7.2.2",
+    "@vueuse/integrations": "^7.2.2",
+    "focus-trap": "^6.7.1"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.12.2",
+    "@iconify-json/carbon": "^1.0.12",
+    "eslint": "^8.4.1",
+    "nuxt3": "latest",
+    "typescript": "^4.5.2",
+    "unbuild": "^0.6.3"
+  },
+  "eslintConfig": {
+    "extends": "@antfu"
+  }
+}