@nuxt/devtools-ui-kit 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-PRESENT 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,79 @@
+# @nuxt/devtools-ui-kit
+
+<a href="https://www.npmjs.com/package/@nuxt/devtools-ui-kit-edge"><img src="https://flat.badgen.net/npm/v/@nuxt/devtools-ui-kit-edge"></a>
+
+> **Warning**: This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
+
+UI kit for module authors to build embedded views for Nuxt Devtools.
+
+- [Demo](https://components.ui.nuxtjs.org)
+
+## Install
+
+```bash
+npm i @nuxt/devtools-ui-kit
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/devtools-ui-kit'
+  ]
+})
+```
+
+## Usage
+
+`@nuxt/devtools-ui-kit` is an unbundled component library powered by [UnoCSS](https://github.com/antfu/unocss) and [VueUse](https://vueuse.org/).
+
+In this library, 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>
+```
+
+## Theming
+
+Powered by [UnoCSS](https://github.com/antfu/unocss), you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.
+
+It's also possible to override the default theme globally, for example:
+
+```ts
+// nuxt.config.js
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/devtools-ui-kit'
+  ],
+  unocss: {
+    shortcuts: {
+      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
+      'n-button-hover': 'op100 !border-context text-context',
+      'n-button-active': 'n-active-base bg-context/5',
+    }
+  }
+})
+```
+
+You can find all the default values and available entries in [src/unocss/index.ts](./src/unocss/index.ts).

package/dist/assets/styles.css

@@ -0,0 +1,14 @@
+:root {
+  --nui-c-context: 125,125,125;
+}
+
+html {
+  background-color: white;
+}
+
+html.dark {
+  color-scheme: dark;
+  background-color: #151515;
+  color: white;
+}
+

package/dist/components/NButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+defineProps<{
+  to?: string
+  icon?: string
+}>()
+</script>
+
+<template>
+  <Component
+    :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"
+  >
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="n-button-icon" />
+    </slot>
+    <slot />
+  </Component>
+</template>

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 @@
+<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>
+
+<template>
+  <label
+    class="items-center select-none n-disabled:n-disabled n-checkbox inline-flex hover:n-checkbox-hover"
+    :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 op0 n-checkbox-icon transform scale-0 n-checked:op100 n-checked:scale-100" />
+    </span>
+    <span><slot /></span>
+  </label>
+</template>

package/dist/components/NDarkToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useToggle } from '@vueuse/core'
+// @ts-expect-error auto imported from @nuxtjs/color-mode
+import { useColorMode } from '#imports'
+
+const mode = useColorMode()
+const isDark = computed<boolean>({
+  get() {
+    return mode.value === 'dark'
+  },
+  set() {
+    mode.preference = isDark.value ? 'light' : 'dark'
+  },
+})
+const toggle = useToggle(isDark)
+const context = {
+  mode,
+  isDark,
+  toggle,
+}
+</script>
+
+<template>
+  <ColorScheme tag="span">
+    <slot v-bind="context" />
+  </ColorScheme>
+</template>

package/dist/components/NDialog.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } 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<{
+  (event: 'close'): void
+  (event: 'update:modelValue', value: boolean): 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>
+
+<template>
+  <div
+    class="n-transition fixed flex items-center justify-center n-dialog inset-0 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>

package/dist/components/NDropdown.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useVModel } from '@vueuse/core'
+
+const props = defineProps<{ modelValue?: boolean }>()
+const emit = defineEmits<{ (...args: any): void }>()
+
+const enabled = useVModel(props, 'modelValue', emit, { passive: true })
+const el = ref<HTMLDivElement>()
+
+onClickOutside(el, () => {
+  enabled.value = false
+})
+</script>
+
+<template>
+  <div ref="el" class="relative">
+    <slot name="trigger" :enabled="enabled" @click="enabled = !enabled">
+      <NButton @click="enabled = !enabled">
+        Dropdown
+      </NButton>
+    </slot>
+
+    <div
+      class="absolute n-transition n-bg-base rounded z-10 border n-border-base shadow"
+      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/components/NIcon.vue

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

package/dist/components/NLink.vue

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

package/dist/components/NRadio.vue

@@ -0,0 +1,40 @@
+<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>
+
+<template>
+  <label
+    class="inline-flex items-center select-none n-disabled:n-disabled n-radio hover:n-radio-hover"
+    :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 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>
+    <span><slot /></span>
+  </label>
+</template>

package/dist/components/NSwitch.vue

@@ -0,0 +1,37 @@
+<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>
+
+<template>
+  <label
+    class="n-disabled:n-disabled n-switch n-switch-base"
+    :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 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>
+    <span><slot /></span>
+  </label>
+</template>

package/dist/components/NTextInput.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+    type?: string
+  }>(),
+  {
+    modelValue: '',
+    disabled: false,
+    type: 'text',
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+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">
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+    </slot>
+    <input
+      v-model="input"
+      class="flex-auto n-bg-base w-full !outline-none"
+      :type="type"
+      :placeholder="placeholder"
+    >
+  </div>
+</template>

package/dist/components/NTip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+}>()
+</script>
+
+<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>

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,12 @@
+import * as _nuxt_schema from '@nuxt/schema';
+export { unocssPreset } from './unocss.js';
+import '@unocss/core';
+import '@unocss/nuxt';
+
+interface ModuleOptions {
+    dev?: boolean;
+    preset?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'url';
+import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
+import defu from 'defu';
+import { extendUnocssOptions } from './unocss.mjs';
+export { unocssPreset } 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 module = defineNuxtModule({
+  meta: {
+    name: "devtools-ui-kit",
+    configKey: "devtoolsUIKit"
+  },
+  defaults: {
+    preset: rPath("./preset"),
+    dev: false
+  },
+  async setup(options, nuxt) {
+    addComponentsDir({ path: rPath("./components/nuxt") });
+    addComponentsDir({ path: rPath("./components") });
+    nuxt.options.css.unshift(rPath("assets/styles.css"));
+    if (!options.dev)
+      nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
+    nuxt.options.vueuse = nuxt.options.vueuse || {};
+    nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: "" });
+    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"));
+  }
+});
+
+export { module as default };

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['devtoolsUIKit']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['devtoolsUIKit']?: ModuleOptions }
+}
+
+
+export { unocssPreset } from './module'

package/dist/unocss.d.ts

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

package/dist/unocss.mjs

@@ -0,0 +1,126 @@
+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 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]`
+        };
+      }
+    },
+    (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-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-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",
+    // 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/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: ["i-", ""],
+        scale: 1.2,
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
+        // ...(user?.icons || {})
+      }),
+      unocssPreset(),
+      ...user.presets || []
+    ],
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup()
+    ]
+  };
+}
+
+export { extendUnocssOptions, unocssPreset };

package/module.cjs

@@ -0,0 +1,6 @@
+// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
+module.exports = function (...args) {
+  return import('./dist/module.mjs').then(m => m.default.call(this, ...args))
+}
+
+module.exports.meta = require('./package.json')

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@nuxt/devtools-ui-kit",
+  "type": "module",
+  "version": "0.2.0",
+  "license": "MIT",
+  "repository": "nuxt/devtools",
+  "exports": {
+    ".": {
+      "require": "./module.cjs",
+      "import": "./dist/module.mjs"
+    },
+    "./module": {
+      "require": "./module.cjs",
+      "import": "./dist/module.mjs"
+    },
+    "./unocss": {
+      "import": "./dist/unocss.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist",
+    "*.cjs"
+  ],
+  "dependencies": {
+    "@iconify-json/carbon": "^1.1.15",
+    "@nuxt/kit": "^3.2.2",
+    "@nuxtjs/color-mode": "^3.2.0",
+    "@unocss/core": "^0.50.0",
+    "@unocss/nuxt": "^0.50.0",
+    "@unocss/preset-attributify": "^0.50.0",
+    "@unocss/preset-icons": "^0.50.0",
+    "@unocss/preset-mini": "^0.50.0",
+    "@unocss/reset": "^0.50.0",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/integrations": "^9.13.0",
+    "@vueuse/nuxt": "^9.13.0",
+    "defu": "^6.1.2",
+    "focus-trap": "^7.3.1",
+    "unocss": "^0.50.0"
+  },
+  "devDependencies": {
+    "nuxt": "^3.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "nuxt-build-module",
+    "dev": "nuxi dev playground",
+    "playground:build": "nuxi generate playground"
+  }
+}