@nuxt/devtools-ui-kit 0.8.5 → 1.0.0-beta.1

package/dist/components/NBadge.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="n-badge">
+    <slot />
+  </span>
+</template>

package/dist/components/NButton.vue

@@ -3,10 +3,14 @@
 // @ts-ignore tsconfig
 import { NuxtLink } from '#components'
 
-defineProps<{
+withDefaults(defineProps<{
   to?: string
   icon?: string
-}>()
+  border?: boolean
+  disabled?: boolean
+}>(), {
+  border: true,
+})
 </script>
 
 <template>
@@ -14,10 +18,14 @@ defineProps<{
     :is="to ? NuxtLink : 'button'"
     :to="to"
     v-bind="$attrs"
-    class="n-button n-button-base active:n-button-active focus-visible:n-focus-base n-transition hover:n-button-hover n-disabled:n-disabled"
+    :class="[
+      { 'n-button-base active:n-button-active focus-visible:n-focus-base hover:n-button-hover': border },
+      { 'n-icon-button': !$slots.default },
+    ]"
+    class="n-button n-transition n-disabled:n-disabled"
   >
     <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="n-button-icon" />
+      <NIcon v-if="icon" :icon="icon" :class="{ 'n-button-icon': $slots.default }" />
     </slot>
     <slot />
   </Component>

package/dist/components/NCheckbox.vue

@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: boolean
+    modelValue?: boolean | null
     disabled?: boolean
   }>(),
   {

package/dist/components/NDarkToggle.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick } from 'vue'
-
-// @ts-expect-error auto imported from @nuxtjs/color-mode
 import { useColorMode } from '#imports'
 
 const mode = useColorMode()

package/dist/components/NDrawer.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useElementSize } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  top?: HTMLElement | string
+  left?: HTMLElement | string
+  autoClose?: boolean
+  transition?: 'right' | 'bottom' | 'top'
+}>(), {
+  transition: 'right',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = ref<HTMLElement>()
+
+const { height } = useElementSize(() => props.top as HTMLElement, undefined, { box: 'border-box' })
+
+const width = typeof props.left === 'string' && props.left.startsWith('#')
+  ? document.querySelector(props.left)?.getBoundingClientRect().width
+  : useElementSize(() => props.left as HTMLElement, undefined, { box: 'border-box' }).width
+
+onClickOutside(el, () => {
+  if (props.modelValue && props.autoClose)
+    emit('close')
+}, {
+  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
+})
+
+const transitionType = {
+  right: {
+    'enter-from-class': 'transform translate-x-1/1',
+    'leave-to-class': 'transform translate-x-1/1',
+  },
+  top: {
+    'enter-from-class': 'transform translate-y--1/1',
+    'leave-to-class': 'transform translate-y--1/1',
+  },
+  bottom: {
+    'enter-from-class': 'transform translate-y-1/1',
+    'leave-to-class': 'transform translate-y-1/1',
+  },
+}
+</script>
+
+<template>
+  <Transition
+    v-bind="transitionType[transition]"
+    enter-active-class="duration-200 ease-in"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-out"
+    leave-from-class="opacity-100"
+  >
+    <div
+      v-if="modelValue"
+      ref="el"
+      :border="`${transition === 'right' ? 'l' : transition === 'bottom' ? 't' : 'b'} base`"
+      flex="~ col gap-1"
+      :class="{ 'right-0': transition === 'right' || transition === 'bottom' }"
+      absolute bottom-0 z-10 z-20 of-auto text-sm n-glass-effect
+      :style="{
+        top: transition === 'bottom' ? 'auto' : `${height}px`,
+        left: transition === 'right' && !width ? 'auto' : `${width}px`,
+      }"
+      v-bind="$attrs"
+    >
+      <NButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" :border="false" @click="$emit('close')" />
+      <div relative h-full w-full of-auto>
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>

package/dist/components/NLink.vue

@@ -1,21 +1,29 @@
 <script setup lang="ts">
-// eslint-disable-next-line ts/prefer-ts-expect-error
-// @ts-ignore tsconfig
-import { NuxtLink } from '#components'
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   to?: string
   href?: string
   target?: string
+  underline?: boolean
 }>()
+
+const link = computed(() => props.href || props.to)
 </script>
 
 <template>
-  <Component
-    :is="(href || target) ? 'a' : NuxtLink"
-    v-bind="$props"
-    class="n-link n-transition hover:n-link-hover n-link-base"
+  <NuxtLink
+    v-bind="link ? {
+      href: link,
+      target,
+      rel: target === '_blank' ? 'noopener noreferrer' : null,
+    } : {}"
+    :class="{ 'n-link n-transition hover:n-link-hover n-link-base': link || underline }"
   >
     <slot />
-  </Component>
+    <div
+      v-if="link && target === '_blank'"
+      i-carbon:arrow-up-right translate-y--1 text-xs op50
+    />
+  </NuxtLink>
 </template>

package/dist/components/NNavbar.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  search?: string
+  noPadding?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:search', value: string): void
+}>()
+
+function update(event: any) {
+  emit('update:search', event.target.value)
+}
+</script>
+
+<template>
+  <div flex="~ col gap2" border="b base" flex-1 n-navbar-glass :class="[{ p4: !noPadding }]">
+    <div flex="~ gap4" items-center>
+      <slot v-if="search !== undefined" name="search">
+        <NTextInput
+          placeholder="Search..."
+          icon="carbon-search"
+          n="primary" flex-auto
+          :class="{ 'px-5 py-2': !noPadding }"
+          :value="search"
+          @input="update"
+        />
+      </slot>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>

package/dist/components/NSelect.vue

@@ -21,12 +21,13 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-select flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    class="n-select flex flex items-center border rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    :class="disabled ? 'border-gray:10' : 'n-border-base'"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none">
+    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none" :class="disabled ? 'appearance-none' : ''">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>

package/dist/components/NSplitPane.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { Pane, Splitpanes } from 'splitpanes'
+
+import 'splitpanes/dist/splitpanes.css'
+
+const props = withDefaults(defineProps<{
+  /**
+   * The key to use for storing the pane sizes in localStorage.
+   */
+  storageKey?: string
+  stateKey?: string
+  leftSize?: number
+  minSize?: number
+  horizontal?: boolean
+}>(), {
+  stateKey: 'nuxt-devtools-panels-state',
+})
+
+const state = useLocalStorage<Record<string, number>>(props.stateKey, {} as any, { listenToStorageChanges: false })
+
+const DEFAULT = 30
+
+const key = props.storageKey
+const size = key
+  ? computed({
+    get: () => state.value[key] || props.leftSize || DEFAULT,
+    set: (v) => { state.value[key] = v },
+  })
+  : ref(props.leftSize || DEFAULT)
+</script>
+
+<template>
+  <Splitpanes :horizontal="horizontal" h-full of-hidden @resize="size = $event[0].size">
+    <Pane h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
+      <slot name="left" />
+    </Pane>
+    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
+      <slot name="right" />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style>
+.splitpanes__splitter {
+  position: relative;
+}
+.splitpanes__splitter:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: .2s ease;
+  content: '';
+  transition: opacity 0.4s;
+  z-index: 1;
+}
+.splitpanes__splitter:hover:before {
+  background: #8881;
+  opacity: 1;
+}
+.splitpanes--vertical>.splitpanes__splitter {
+  min-width: 0 !important;
+  width: 0 !important;
+  @apply border-r border-base
+}
+.splitpanes--horizontal>.splitpanes__splitter {
+  min-height: 0 !important;
+  height: 0 !important;
+  @apply border-t border-base
+}
+.splitpanes--vertical>.splitpanes__splitter:before {
+  left: -5px;
+  right: -4px;
+  height: 100%;
+}
+.splitpanes--horizontal>.splitpanes__splitter:before {
+  top: -5px;
+  bottom: -4px;
+  width: 100%;
+}
+</style>

package/dist/components/NTextInput.vue

@@ -8,6 +8,7 @@ const props = withDefaults(
     placeholder?: string
     disabled?: boolean
     autofocus?: boolean
+    readonly?: boolean
     type?: string
   }>(),
   {

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "0.8.5"
+  "version": "1.0.0-beta.1"
 }

package/dist/unocss.mjs

@@ -1,17 +1,16 @@
 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';
+import { mergeDeep, presetUno, presetAttributify, presetTypography, presetIcons, presetWebFonts, transformerDirectives, transformerVariantGroup } from 'unocss';
 
 function unocssPreset() {
   return {
     name: "@nuxt/devtools-ui-kit",
     theme: mergeDeep(theme, {
       colors: {
+        brand: "#00DC82",
+        primary: "#099e61",
         context: "rgba(var(--nui-c-context),%alpha)"
-      },
-      fontFamily: {
-        sans: "Avenir, Helvetica, Arial, sans-serif"
       }
     }),
     rules: [
@@ -120,10 +119,16 @@ function unocssPreset() {
       "n-code-block": "dark:bg-[#121212] bg-white",
       // icon-button
       "n-icon-button": "aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active",
+      // badge
+      "n-badge-base": "bg-context/10 text-context rounded whitespace-nowrap select-none",
+      "n-badge": "n-badge-base mx-0.5 px-1.5 py-0.5 text-xs",
       // loading
       "n-loading": "flex h-full w-full justify-center items-center",
       "n-panel-grids": "n-panel-grids-light dark:n-panel-grids-dark",
-      "n-panel-grids-center": "n-panel-grids flex flex-col h-full gap-2 items-center justify-center"
+      "n-panel-grids-center": "n-panel-grids flex flex-col h-full gap-2 items-center justify-center",
+      // glass
+      "n-glass-effect": "backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90",
+      "n-navbar-glass": "sticky z-10 top-0 n-glass-effect"
     }
   };
 }
@@ -144,6 +149,12 @@ function extendUnocssOptions(user = {}) {
         }
         // ...(user?.icons || {})
       }),
+      presetWebFonts({
+        fonts: {
+          sans: "DM Sans",
+          mono: "DM Mono"
+        }
+      }),
       unocssPreset(),
       ...user.presets || []
     ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.8.5",
+  "version": "1.0.0-beta.1",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,40 +23,41 @@
     "dist"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.8.5"
+    "@nuxt/devtools": "1.0.0-beta.1"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.21",
     "@iconify-json/logos": "^1.1.37",
     "@iconify-json/ri": "^1.1.12",
-    "@iconify-json/tabler": "^1.1.91",
-    "@nuxt/kit": "^3.7.3",
+    "@iconify-json/tabler": "^1.1.94",
+    "@nuxt/kit": "^3.7.4",
     "@nuxtjs/color-mode": "^3.3.0",
-    "@unocss/core": "^0.56.0",
-    "@unocss/nuxt": "^0.56.0",
-    "@unocss/preset-attributify": "^0.56.0",
-    "@unocss/preset-icons": "^0.56.0",
-    "@unocss/preset-mini": "^0.56.0",
-    "@unocss/reset": "^0.56.0",
-    "@vueuse/core": "^10.4.1",
-    "@vueuse/integrations": "^10.4.1",
-    "@vueuse/nuxt": "^10.4.1",
+    "@unocss/core": "^0.56.5",
+    "@unocss/nuxt": "^0.56.5",
+    "@unocss/preset-attributify": "^0.56.5",
+    "@unocss/preset-icons": "^0.56.5",
+    "@unocss/preset-mini": "^0.56.5",
+    "@unocss/reset": "^0.56.5",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/integrations": "^10.5.0",
+    "@vueuse/nuxt": "^10.5.0",
     "defu": "^6.1.2",
-    "focus-trap": "^7.5.2",
-    "unocss": "^0.56.0",
+    "focus-trap": "^7.5.3",
+    "splitpanes": "^3.1.5",
+    "unocss": "^0.56.5",
     "v-lazy-show": "^0.2.3",
-    "@nuxt/devtools-kit": "0.8.5"
+    "@nuxt/devtools-kit": "1.0.0-beta.1"
   },
   "devDependencies": {
-    "nuxt": "^3.7.3",
-    "@nuxt/devtools": "0.8.5"
+    "nuxt": "^3.7.4",
+    "@nuxt/devtools": "1.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "nuxt-build-module",
-    "stub": "nuxt-build-module --stub",
+    "build": "nuxt-build-module build",
+    "stub": "nuxt-build-module build --stub",
     "dev": "nuxi dev playground",
     "playground:build": "nuxi generate playground"
   }

package/dist/components/NIconButton.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-// eslint-disable-next-line ts/prefer-ts-expect-error
-// @ts-ignore tsconfig
-import { NuxtLink } from '#components'
-
-const props = defineProps<{
-  to?: string
-  icon: string
-  disabled?: boolean
-}>()
-</script>
-
-<template>
-  <Component
-    :is="to ? NuxtLink : 'button'"
-    :to="to"
-    v-bind="$attrs"
-    class="n-transition n-icon-button"
-    :class="{
-      'n-disabled op10!': props.disabled,
-    }"
-  >
-    <NIcon :icon="props.icon" />
-  </Component>
-</template>

package/dist/components/NTextExternalLink.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import NLink from './NLink.vue'
-
-defineProps<{
-  link?: string
-}>()
-</script>
-
-<template>
-  <component
-    :is="link ? NLink : 'div'"
-    v-bind="link ? {
-      href: link,
-      target: '_blank',
-      rel: 'noopener noreferrer',
-    } : {}"
-  >
-    <slot />
-    <div
-      v-if="link"
-      i-carbon:arrow-up-right translate-y--1 text-xs op50
-    />
-  </component>
-</template>