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

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,129 @@
+<a href="https://devtools.nuxt.com"><img width="1200" alt="Nuxt DevTools" src="https://github-production-user-asset-6210df.s3.amazonaws.com/904724/261577617-a10567bd-ad33-48cc-9bda-9e37dbe1929f.png"></a>
+<br>
+
+<h1>
+Nuxt DevTools
+</h1>
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Volta][volta-src]][volta-href]
+
+<p>
+Unleash Nuxt Developer Experience.
+<br>Nuxt DevTools is a set of visual tools that help you to know your app better.
+</p>
+
+<p>
+  <a href="https://nuxt.com/blog/nuxt-devtools-v1-0">👋 Introduction</a> |
+  <a href="https://github.com/nuxt/devtools/discussions/29">💡 Ideas & Suggestions</a> |
+  <a href="https://github.com/nuxt/devtools/discussions/31">🗺️ Project Roadmap</a> |
+  <a href="https://devtools.nuxt.com/">📚 Documentation</a>
+</p>
+
+<br>
+
+> [!NOTE]
+> You are viewing the v2.x branch which are in active development. For the latest stable version, please refer to the [v1.x branch](https://github.com/nuxt/devtools/tree/v1)
+
+## Installation
+
+> Nuxt DevTools v2 requires **Nuxt v3.15.0 or higher**.
+
+Nuxt DevTools is **enabled by default** in Nuxt v3.8.0. You can press <kbd>Shift</kbd> + <kbd>Alt</kbd> / <kbd>⇧ Shift</kbd> + <kbd>⌥ Option</kbd> + <kbd>D</kbd> in your app to open it up.
+
+If you want to explicitly enable or disable Nuxt DevTools, you can update your `nuxt.config` with:
+
+```js
+export default defineNuxtConfig({
+  devtools: {
+    enabled: true // or false to disable
+  }
+})
+```
+
+### Nightly Release Channel
+
+Similar to [Nuxt's Nightly Channel](https://nuxt.com/docs/guide/going-further/nightly-release-channel), DevTools also offers a nightly release channel, that automatically releases for every commit to `main` branch.
+
+You can opt-in to the nightly release channel by running:
+
+```diff
+{
+  "devDependencies": {
+--    "@nuxt/devtools": "^0.1.0"
+++    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
+  }
+}
+```
+
+Remove lockfile (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) and reinstall dependencies.
+
+### Module Options
+
+To configure Nuxt DevTools, you can pass the `devtools` options.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  devtools: {
+    // Enable devtools (default: true)
+    enabled: true,
+    // VS Code Server options
+    vscode: {},
+    // ...other options
+  }
+})
+```
+
+For all options available, please refer to TSDocs in your IDE, or the [type definition file](https://github.com/nuxt/devtools/blob/main/packages/devtools-kit/src/_types/options.ts).
+
+## Features
+
+Read the [**Announcement Blog Post 🎊**](https://nuxt.com/blog/nuxt-devtools-v1-0) for why we built Nuxt DevTools and what it can do!
+
+## Module Authors
+
+Please refer to the [Module Authors Guide](https://devtools.nuxt.com/module/guide).
+
+## Contribution Guide
+
+Please refer to the [Contribution Guide](https://devtools.nuxt.com/development/contributing).
+
+## Anonymous Usage Analytics
+
+Nuxt DevTools collects anonymous telemetry data about general usage. This helps us to accurately gauge feature usage and customization across all our users. This data will let us better understand how each features in Nuxt DevTools are used, measuring improvements made (DX and performances) and their relevance. It would also help us to prioritize our efforts and focus on the features that matter the most to our users.
+
+Nuxt DevTools' telemetry data is piped through [Nuxt Telemetry](https://github.com/nuxt/telemetry), meaning that Nuxt DevTools will respect your local and global Nuxt Telemetry settings. You can also opt-out Nuxt DevTools' telemetry in the Nuxt DevTools settings.
+
+The data we collect is completely anonymous, not traceable to the source (using hash+seed), and only meaningful in aggregate form. No data we collect is personally identifiable or trackable.
+
+### Events
+
+On top of the [default Nuxt Telemetry events](https://github.com/nuxt/telemetry#events), Nuxt DevTools also collects the following events:
+
+- Versions of Nuxt DevTools
+- Navigations between tabs/feature
+  - This helps us to understand which features are used the most to prioritize our efforts.
+- Browser and OS names and versions
+  - This helps us improve compatibility across different browsers and operating systems.
+- Click event on some action buttons
+
+## License
+
+[MIT](./LICENSE)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/devtools/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxt/devtools
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/devtools.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npm.chart.dev/@nuxt/devtools
+[license-src]: https://img.shields.io/npm/l/@nuxt/devtools.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@nuxt/devtools
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
+[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
+[volta-href]: https://volta.net/nuxt/devtools?utm_source=nuxt_devtools_readme

package/dist/assets/styles.css

@@ -0,0 +1 @@
+:root{--nui-c-context:125,125,125}html{background-color:#fff}html.dark{background-color:#151515;color:#fff;color-scheme:dark}::-moz-selection{background:#8884}::selection{background:#8884}.shiki .line{display:inline-block;position:relative;width:100%}.shiki.diff .line>span{filter:saturate(.75);opacity:.75}.shiki.diff .line-added,.shiki.diff .line-removed{scroll-margin:5em}.shiki.diff .line-added>span,.shiki.diff .line-removed>span{opacity:1!important;position:inherit;scroll-margin:20px;z-index:100}.shiki.diff .line-added>span{color:#218c3b!important}.shiki.diff .line-removed>span{color:#d15547!important}.shiki .line-added:after{background-color:#43885420}.shiki .line-added:after,.shiki .line-removed:after{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.shiki .line-removed:after{background-color:#8f4c3926}::view-transition-new(root),::view-transition-old(root){animation:none;mix-blend-mode:normal}::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2147483646}.dark::view-transition-old(root){z-index:2147483646}.dark::view-transition-new(root){z-index:1}

package/dist/components/NBadge.vue

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

package/dist/components/NButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-ignore tsconfig
+import { NuxtLink } from '#components'
+
+withDefaults(defineProps<{
+  to?: string
+  icon?: string
+  border?: boolean
+  disabled?: boolean
+  type?: 'submit' | 'reset' | 'button'
+}>(), {
+  border: true,
+  type: 'button',
+})
+</script>
+
+<template>
+  <Component
+    :is="to ? NuxtLink : 'button'"
+    :to="to"
+    v-bind="{ ...$attrs, ...(!to && { type }), ...(disabled ? { disabled: true } : { tabindex: 0 }) }"
+    :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': $slots.default }" />
+    </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,36 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean | null
+    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-checkbox hover:n-checkbox-hover select-none items-center 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"
+    >
+    <span class="n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <NIcon class="n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100" />
+    </span>
+    <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
+  </label>
+</template>

package/dist/components/NCodeBlock.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
+// This components requires to run in DevTools to render correctly
+import { computed, nextTick } from 'vue'
+import { devToolsClient } from '../runtime/client'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang?: BuiltinLanguage | 'text'
+    lines?: boolean
+    inline?: boolean
+    transformRendered?: (code: string) => string
+  }>(),
+  {
+    lines: true,
+  },
+)
+
+const emit = defineEmits(['loaded'])
+
+const rendered = computed(() => {
+  const result = props.lang === 'text'
+    ? { code: props.code, supported: false }
+    : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false }
+  if (result.supported && props.transformRendered)
+    result.code = props.transformRendered(result.code)
+  if (result.supported)
+    nextTick(() => emit('loaded'))
+  return result
+})
+
+const classes = computed(() => [
+  'n-code-block shiki',
+  (props.lines && !props.inline) ? 'n-code-block-lines' : '',
+])
+</script>
+
+<template>
+  <template v-if="lang && rendered.supported">
+    <pre :class="classes"><code v-html="rendered.code" /></pre>
+  </template>
+  <template v-else>
+    <pre :class="classes"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre>
+  </template>
+</template>
+
+<style>
+.n-code-block-lines code{counter-increment:step calc(var(--start, 1) - 1);counter-reset:step}.n-code-block-lines code .line:before{content:counter(step);counter-increment:step;display:inline-block;margin-right:.5rem;padding-right:.5rem;text-align:right;width:2.5rem;--uno:text-truegray/50}
+</style>

package/dist/components/NDarkToggle.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useColorMode } from '@vueuse/core'
+
+import { computed, nextTick } from 'vue'
+
+const mode = useColorMode({
+  storageKey: 'nuxt-devtools-color-mode',
+})
+const isDark = computed<boolean>({
+  get() {
+    return mode.value === 'dark'
+  },
+  set() {
+    mode.value = isDark.value ? 'light' : 'dark'
+  },
+})
+
+const isAppearanceTransition = typeof document !== 'undefined'
+// @ts-expect-error document.startViewTransition can be undefined
+  && document.startViewTransition
+  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+/**
+ * Credit to [@hooray](https://github.com/hooray)
+ * @see https://github.com/vuejs/vitepress/pull/2347
+ */
+function toggle(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}
+
+const context = {
+  mode,
+  isDark,
+  toggle,
+}
+</script>
+
+<template>
+  <ClientOnly placeholder-tag="span">
+    <slot v-bind="context" />
+  </ClientOnly>
+</template>

package/dist/components/NDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onClickOutside, useVModel } from '@vueuse/core'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { computed, nextTick, ref, watchEffect } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    dim?: boolean
+    autoClose?: boolean
+  }>(),
+  {
+    modelValue: false,
+    dim: true,
+    autoClose: 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 shown = ref(false)
+
+const { activate, deactivate } = useFocusTrap(computed(() => card.value || document.body), { immediate: false })
+
+watchEffect(
+  () => {
+    if (!shown.value && show.value)
+      shown.value = true
+
+    if (show.value && card.value)
+      nextTick(activate)
+    else
+      deactivate()
+  },
+)
+
+onClickOutside(card, () => {
+  if (props.modelValue && props.autoClose) {
+    show.value = false
+    emit('close')
+  }
+}, {
+  ignore: ['a', 'button', 'summary'],
+})
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Teleport v-if="shown" to="body">
+    <div
+      v-show="show"
+      class="fixed inset-0 z-100 flex items-center justify-center n-transition n-glass-effect"
+      role="dialog"
+      aria-modal="true"
+      :class="[
+        show ? '' : 'op0 pointer-events-none visibility-none',
+      ]"
+    >
+      <div
+        class="absolute inset-0 -z-1"
+        :class="[
+          dim ? 'glass-effect' : '',
+        ]"
+      />
+      <NCard v-bind="$attrs" ref="card" class="max-h-screen of-auto">
+        <slot />
+      </NCard>
+    </div>
+  </Teleport>
+</template>

package/dist/components/NDrawer.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onClickOutside, useElementSize } from '@vueuse/core'
+import { ref } from 'vue'
+
+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/NDropdown.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onClickOutside, useVModel } from '@vueuse/core'
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  direction?: 'start' | 'end'
+}>(), {
+  direction: 'start',
+})
+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 z-10 border n-border-base rounded shadow n-transition n-bg-base"
+      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"
+    >
+      <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/NIconTitle.vue

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

package/dist/components/NLink.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  to?: string
+  href?: string
+  target?: string
+  underline?: boolean
+}>()
+
+const link = computed(() => props.href || props.to)
+</script>
+
+<template>
+  <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 />
+    <div
+      v-if="link && target === '_blank'"
+      i-carbon:arrow-up-right translate-y--1 text-xs op50
+    />
+  </NuxtLink>
+</template>

package/dist/components/NLoading.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="n-loading n-panel-grids-center">
+    <div class="flex flex-col animate-pulse items-center text-lg">
+      <div class="i-carbon-circle-dash animate-spin text-4xl op50" />
+      <slot>
+        Loading...
+      </slot>
+    </div>
+  </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>