@nuxt/devtools-ui-kit 0.2.3 → 0.2.5

package/README.md

@@ -6,74 +6,4 @@
 
 UI kit for module authors to build embedded views for Nuxt Devtools.
 
-- [Demo](https://ui-kit.devtools.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).
+Please refer to the [DevTools UI Kit](https://devtools.nuxtjs.org/module/ui-kit) for the full documentation.

package/dist/components/NCodeBlock.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// This components requires to run in DevTools to render correctly
+import { devToolsClient } from '../runtime/client'
+
+defineProps<{
+  code: string
+  lang?: string
+}>()
+</script>
+
+<template>
+  <template v-if="lang && devToolsClient?.devtools?.renderCodeHighlight">
+    <pre class="n-code-block" v-html="devToolsClient.devtools.renderCodeHighlight(code, lang)" />
+  </template>
+  <template v-else>
+    <pre class="n-code-block" v-text="code" />
+  </template>
+</template>

package/dist/components/NDropdown.vue

@@ -22,7 +22,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute n-transition n-bg-base rounded z-10 border n-border-base shadow"
+      class="absolute n-transition n-bg-base rounded border z-10 n-border-base shadow"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
     >
       <slot />

package/dist/components/NIconTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  text?: string
+}>()
+</script>
+
+<template>
+  <div class="items-center flex flex-gap2">
+    <div v-if="icon" :class="icon" />
+    <slot>
+      <div>{{ text }}</div>
+    </slot>
+  </div>
+</template>

package/dist/components/NMarkdown.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// This components requires to run in DevTools to render correctly
+
+import { devToolsClient } from '../runtime/client'
+
+defineProps<{
+  markdown: string
+  tag?: string
+}>()
+</script>
+
+<template>
+  <template v-if="markdown && devToolsClient?.devtools?.renderMarkdown">
+    <component :is="tag || 'span'" class="n-markdown" v-html="devToolsClient.devtools.renderMarkdown(markdown)" />
+  </template>
+  <template v-else>
+    <component :is="tag || 'span'" class="n-markdown" v-text="markdown" />
+  </template>
+</template>

package/dist/components/NSectionBlock.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    icon?: string
+    text: string
+    description?: string
+    containerClass?: string
+    collapse?: boolean
+    open?: boolean
+    padding?: boolean | string
+  }>(), {
+    containerClass: '',
+    open: true,
+    padding: true,
+    collapse: true,
+  },
+)
+</script>
+
+<template>
+  <details :open="open">
+    <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>
+          {{ text }}
+          <div v-if="description" class="op50 text-sm">
+            {{ description }}
+          </div>
+        </div>
+        <div class="flex-auto" />
+        <NIcon
+          v-if="collapse"
+          icon="carbon-chevron-down"
+          class="text-base op50 cursor-pointer transition duration-500 place-self-start chevron"
+        />
+      </NIconTitle>
+    </summary>
+    <div class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+      <slot name="details" />
+      <div :class="containerClass" class="mt1">
+        <slot />
+      </div>
+      <slot name="footer" />
+    </div>
+  </details>
+  <div class="x-divider" />
+</template>
+
+<style scoped>
+details {
+  --at-apply: border-none;
+}
+
+summary {
+  --at-apply: border-none;
+  list-style: none;
+}
+
+details[open] summary {
+  --at-apply: border-none;
+}
+
+details summary::-webkit-details-marker {
+  display:none;
+}
+
+details[open] .chevron {
+  transform: rotate(180deg);
+  opacity: 0.75;
+}
+</style>

package/dist/components/NSelect.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+    icon: '',
+  },
+)
+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>
+    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+      <option v-if="placeholder" value="" disabled hidden>
+        {{ placeholder }}
+      </option>
+      <slot />
+    </select>
+  </div>
+</template>

package/dist/components/NTextInput.vue

@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: string
+    modelValue?: string | number
     placeholder?: string
     icon?: string
     disabled?: boolean
@@ -28,6 +28,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
       v-model="input"
       class="flex-auto n-bg-base w-full !outline-none"
       :type="type"
+      :disabled="disabled"
       :placeholder="placeholder"
     >
   </div>

package/dist/module.json

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

package/dist/module.mjs

@@ -19,7 +19,6 @@ const module = defineNuxtModule({
     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)

package/dist/runtime/client.d.ts

@@ -0,0 +1 @@
+export declare const devToolsClient: import("vue").Ref<import("@nuxt/devtools").NuxtDevtoolsIframeClient | undefined>;

package/dist/runtime/client.mjs

@@ -0,0 +1,2 @@
+import { useDevtoolsClient } from "@nuxt/devtools/iframe-client";
+export const devToolsClient = useDevtoolsClient();

package/dist/unocss.mjs

@@ -59,6 +59,7 @@ const unocssPreset = () => ({
     // 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",
@@ -92,8 +93,9 @@ const unocssPreset = () => ({
     "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"
+    "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"
   }
 });
 function extendUnocssOptions(user = {}) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -22,25 +22,29 @@
     "dist",
     "*.cjs"
   ],
+  "peerDependencies": {
+    "@nuxt/devtools": "0.2.5"
+  },
   "dependencies": {
-    "@iconify-json/carbon": "^1.1.15",
-    "@nuxt/kit": "^3.2.2",
+    "@iconify-json/carbon": "^1.1.16",
+    "@nuxt/kit": "^3.2.3",
     "@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",
+    "@unocss/core": "^0.50.1",
+    "@unocss/nuxt": "^0.50.1",
+    "@unocss/preset-attributify": "^0.50.1",
+    "@unocss/preset-icons": "^0.50.1",
+    "@unocss/preset-mini": "^0.50.1",
+    "@unocss/reset": "^0.50.1",
     "@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"
+    "unocss": "^0.50.1",
+    "@nuxt/devtools": "0.2.5"
   },
   "devDependencies": {
-    "nuxt": "^3.2.2"
+    "nuxt": "^3.2.3"
   },
   "publishConfig": {
     "access": "public"