@nuxt/devtools-ui-kit-nightly 2.0.0-28980754.13f6fd0

package/dist/components/NNavbar.vue

@@ -0,0 +1,34 @@
+<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 wrap" border="b base" flex-1 n-navbar-glass :class="[{ p4: !noPadding }]">
+    <div flex="~ gap4 wrap" items-center>
+      <slot name="search">
+        <NTextInput
+          v-if="search !== undefined"
+          placeholder="Search..."
+          icon="carbon-search"
+          n="primary" flex-auto
+          :class="{ 'px-3 py-2': !noPadding }"
+          :value="search"
+          @input="update"
+        />
+      </slot>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>

package/dist/components/NNotification.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
+
+import { ref } from 'vue'
+import { devtoolsUiProvideNotificationFn } from '../composables/notification'
+
+const show = ref(false)
+const icon = ref<string>()
+const text = ref<string>()
+const classes = ref<string>()
+const position = ref<DevtoolsUiShowNotificationPosition>('top-center')
+
+devtoolsUiProvideNotificationFn((data) => {
+  text.value = data.message
+  icon.value = data.icon
+  classes.value = data.classes ?? 'text-primary border-primary'
+  icon.value = data.icon
+  show.value = true
+  position.value = data.position ?? 'top-center'
+  setTimeout(() => {
+    show.value = false
+  }, data.duration ?? 1500)
+})
+</script>
+
+<template>
+  <div
+    fixed left-0 right-0 z-999 text-center
+    :class="[
+      { 'pointer-events-none overflow-hidden': !show },
+      { 'top-0': position.startsWith('top') },
+      { 'bottom-0': position.startsWith('bottom') },
+    ]"
+  >
+    <div flex :style="{ justifyContent: position.includes('right') ? 'right' : position.includes('left') ? 'left' : 'center' }">
+      <div
+        border="~ base"
+        flex="~ inline gap2"
+        m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
+        :style="show ? {} : { transform: `translateY(${position.startsWith('top') ? '-' : ''}300%)` }"
+        :class="[show ? 'shadow' : 'shadow-none', classes]"
+      >
+        <div v-if="icon" :class="icon" />
+        <div>{{ text }}</div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/NPanelGrids.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="n-panel-grids-center">
+    <slot />
+  </div>
+</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="n-radio inline-flex hover:n-radio-hover select-none items-center n-disabled:n-disabled"
+    :checked="model === value || null"
+    :disabled="disabled || null"
+  >
+    <input
+      v-model="model"
+      type="radio"
+      class="peer absolute op0"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      @keypress.enter="model = value!"
+    >
+    <span class="n-radio-box n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-radio-inner n-checked:n-radio-inner-checked n-transition" />
+    </span>
+    <span><slot /></span>
+  </label>
+</template>

package/dist/components/NSectionBlock.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string
+    text?: string
+    description?: string
+    containerClass?: string
+    headerClass?: string
+    collapse?: boolean
+    open?: boolean
+    padding?: boolean | string
+  }>(),
+  {
+    containerClass: '',
+    open: true,
+    padding: true,
+    collapse: true,
+  },
+)
+
+const open = useVModel(props, 'open', undefined, { passive: true })
+function onToggle(e: any) {
+  open.value = e.target.open
+}
+</script>
+
+<template>
+  <!-- TODO: Seems something wrong with the DOM type -->
+  <!-- @vue-ignore -->
+  <details :open="open" @toggle="(onToggle as any)">
+    <summary
+      class="cursor-pointer select-none hover:bg-active p4"
+      :class="collapse ? '' : 'pointer-events-none'"
+    >
+      <NIconTitle :icon="icon" :text="text" text-xl transition :class="[open ? 'op100' : 'op60', headerClass]">
+        <div>
+          <div text-base>
+            <slot name="text">
+              {{ text }}
+            </slot>
+          </div>
+          <div v-if="description || $slots.description" text-sm op50>
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+        </div>
+        <div class="flex-auto" />
+        <slot name="actions" />
+        <NIcon
+          v-if="collapse"
+          icon="carbon-chevron-down"
+          class="chevron"
+          cursor-pointer place-self-start text-base op75 transition duration-500
+        />
+      </NIconTitle>
+    </summary>
+    <div
+      v-lazy-show="open"
+      class="flex flex-col flex-gap2 pb6 pt2"
+      :class="typeof padding === 'string' ? padding : padding ? 'px4' : ''"
+    >
+      <slot name="details" />
+      <div :class="containerClass" class="mt1">
+        <slot />
+      </div>
+      <slot name="footer" />
+    </div>
+  </details>
+  <div class="x-divider" />
+</template>
+
+<style scoped>
+details,summary{--at-apply:border-none}summary{list-style:none}details[open] summary{--at-apply:border-none}details summary::-webkit-details-marker{display:none}details[open] .chevron{opacity:.75;transform:rotate(180deg)}
+</style>

package/dist/components/NSelect.vue

@@ -0,0 +1,37 @@
+<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-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" :class="disabled ? 'appearance-none' : ''">
+      <option v-if="placeholder" value="" disabled hidden>
+        {{ placeholder }}
+      </option>
+      <slot />
+    </select>
+  </div>
+</template>

package/dist/components/NSelectTabs.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    disabled?: boolean
+    options: { value: any, label: string }[]
+  }>(),
+  {
+    modelValue: undefined,
+    disabled: false,
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <fieldset
+    class="n-select-tabs flex flex-inline flex-wrap items-center border n-border-base rounded n-bg-base"
+  >
+    <label
+      v-for="i, idx of options"
+      :key="i.label"
+      :disabled="disabled"
+      class="relative n-border-base hover:n-bg-active px-0.5em py-0.1em"
+      :class="[
+        idx ? 'border-l n-border-base ml--1px' : '',
+        i.value === input ? 'n-bg-active' : '',
+      ]"
+      :title="i.label"
+    >
+      <div
+        :class="[
+          i.value === input ? '' : 'op35',
+        ]"
+      >{{ i.label }}</div>
+      <input
+        v-model="input"
+        type="radio"
+        :disabled="disabled"
+        :value="i.value"
+        :title="i.label"
+        class="absolute inset-0 op-0.1"
+      >
+    </label>
+  </fieldset>
+</template>

package/dist/components/NSplitPane.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { Pane, Splitpanes } from 'splitpanes'
+import { computed, ref } from 'vue'
+
+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{content:"";left:0;position:absolute;top:0;transition:.2s ease;transition:opacity .4s;z-index:1}.splitpanes__splitter:hover:before{background:#8881;opacity:1}.splitpanes--vertical>.splitpanes__splitter{min-width:0!important;width:0!important;--at-apply:border-r border-base}.splitpanes--horizontal>.splitpanes__splitter{height:0!important;min-height:0!important;--at-apply:border-t border-base}.splitpanes--vertical>.splitpanes__splitter:before{height:100%;left:-5px;right:-4px}.splitpanes--horizontal>.splitpanes__splitter:before{bottom:-4px;top:-5px;width:100%}
+</style>

package/dist/components/NSwitch.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+)
+const checked = defineModel('modelValue', {
+  type: Boolean,
+  default: false,
+})
+</script>
+
+<template>
+  <label
+    class="n-switch n-switch-base hover:n-switch-hover n-disabled:n-disabled"
+    :checked="checked || null"
+    :disabled="disabled || null"
+  >
+    <input
+      v-model="checked"
+      type="checkbox"
+      class="peer absolute op0"
+      :disabled="disabled"
+      @keypress.enter="checked = !checked"
+    >
+    <div class="n-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-checked:n-switch-thumb-checked n-switch-thumb n-transition" />
+    </div>
+    <slot />
+  </label>
+</template>

package/dist/components/NTextInput.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    icon?: string
+    placeholder?: string
+    disabled?: boolean
+    autofocus?: boolean
+    autocomplete?: string
+    readonly?: boolean
+    type?: string
+  }>(),
+  {
+    modelValue: '',
+    type: 'text',
+  },
+)
+
+const emit = defineEmits<{
+  (name: 'keydown', event: KeyboardEvent): void
+  (name: 'keyup', event: KeyboardEvent): void
+  (name: 'change', event: Event): void
+}>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <div class="n-text-input flex flex items-center border n-border-base rounded py-1 pl-1 pr-2 focus-within:n-focus-base focus-within:border-context n-bg-base">
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
+    </slot>
+    <input
+      v-model="input"
+      v-bind="$props as any"
+      class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
+    >
+  </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/composables/notification.d.ts

@@ -0,0 +1,9 @@
+export type DevtoolsUiShowNotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export declare function devtoolsUiShowNotification(data: {
+    message: string;
+    icon?: string;
+    classes?: string;
+    duration?: number;
+    position?: DevtoolsUiShowNotificationPosition;
+}): void;
+export declare function devtoolsUiProvideNotificationFn(fn: typeof devtoolsUiShowNotification): void;

package/dist/composables/notification.mjs

@@ -0,0 +1,7 @@
+let _devtoolsUiShowNotification;
+export function devtoolsUiShowNotification(data) {
+  _devtoolsUiShowNotification?.(data);
+}
+export function devtoolsUiProvideNotificationFn(fn) {
+  _devtoolsUiShowNotification = fn;
+}

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.mts

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

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, ModuleOptions, false>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "devtools-ui-kit",
+  "configKey": "devtoolsUIKit",
+  "version": "2.0.0-28980754.13f6fd0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "3.3.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,38 @@
+import { fileURLToPath } from 'node:url';
+import { defineNuxtModule, addImportsDir, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
+import defu from 'defu';
+import { extendUnocssOptions } from './unocss.mjs';
+export { unocssPreset } from './unocss.mjs';
+import '@unocss/preset-mini';
+import '@unocss/preset-mini/rules';
+import '@unocss/preset-mini/utils';
+import 'unocss';
+
+function rPath(p) {
+  return 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) {
+    addImportsDir(rPath("./composables"));
+    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("v-lazy-show/nuxt"));
+  }
+});
+
+export { module as default };

package/dist/runtime/client.d.ts

@@ -0,0 +1 @@
+export declare const devToolsClient: import("vue").Ref<any, any>;

package/dist/runtime/client.js

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

package/dist/runtime/client.mjs

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

package/dist/types.d.mts

@@ -0,0 +1 @@
+export { type unocssPreset } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1 @@
+export { type unocssPreset } from './module'

package/dist/unocss.d.mts

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

package/dist/unocss.d.ts

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