@nuxt/devtools-ui-kit 3.4.0 → 3.4.1

package/dist/components/NBadgeHashed.d.vue.ts

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getHslColorFromStringHash } from '../composables/color'
+import NBadge from './NBadge.vue'
+
+const props = defineProps<{
+  text: string
+}>()
+
+const color = computed(() => {
+  const foreground = getHslColorFromStringHash(props.text, 50, 60)
+  const background = getHslColorFromStringHash(props.text, 50, 60, 0.05)
+  return { color: foreground, background }
+})
+</script>
+
+<template>
+  <NBadge :style="color">
+    {{ text }}<slot />
+  </NBadge>
+</template>

package/dist/components/{NCheckbox.vue → NCheckbox.d.vue.ts}

@@ -1,11 +1,18 @@
-<script setup>
-import { useVModel } from "@vueuse/core";
-const props = defineProps({
-  modelValue: { type: [Boolean, null], required: false, default: false },
-  disabled: { type: Boolean, required: false, default: false }
-});
-const emit = defineEmits([]);
-const checked = useVModel(props, "modelValue", emit, { passive: true });
+<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>

package/dist/components/NCodeBlock.d.vue.ts

@@ -0,0 +1,64 @@
+<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
+    grammarContextCode?: string
+    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, { grammarContextCode: props.grammarContextCode }) || { 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-reset: step;
+  counter-increment: step calc(var(--start, 1) - 1);
+}
+.n-code-block-lines code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 2.5rem;
+  padding-right: 0.5rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+  text-align: right;
+  --uno: text-truegray/50;
+}
+</style>

package/dist/components/NDarkToggle.d.vue.ts

@@ -0,0 +1,78 @@
+<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.toReversed()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        fill: 'forwards',
+        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.d.vue.ts

@@ -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-glass-effect n-transition"
+      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.d.vue.ts

@@ -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 n-glass-effect text-sm
+      :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 → NDropdown.d.vue.ts}

@@ -1,16 +1,21 @@
-<script setup>
-import { onClickOutside, useVModel } from "@vueuse/core";
-import { ref } from "vue";
-const props = defineProps({
-  modelValue: { type: Boolean, required: false },
-  direction: { type: String, required: false, default: "start" }
-});
-const emit = defineEmits([]);
-const enabled = useVModel(props, "modelValue", emit, { passive: true });
-const el = ref();
+<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;
-});
+  enabled.value = false
+})
 </script>
 
 <template>

package/dist/components/NIcon.d.vue.ts

@@ -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 → NIconTitle.d.vue.ts}

@@ -1,8 +1,8 @@
-<script setup>
-defineProps({
-  icon: { type: String, required: false },
-  text: { type: String, required: false }
-});
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  text?: string
+}>()
 </script>
 
 <template>

package/dist/components/NLink.d.vue.ts

@@ -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' : undefined,
+    } : {}"
+    :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/{NMarkdown.vue → NMarkdown.d.vue.ts}

@@ -1,9 +1,12 @@
-<script setup>
-import { devToolsClient } from "../runtime/client";
-defineProps({
-  markdown: { type: String, required: true },
-  tag: { type: String, required: false }
-});
+<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>

package/dist/components/{NNavbar.vue → NNavbar.d.vue.ts}

@@ -1,11 +1,15 @@
-<script setup>
-defineProps({
-  search: { type: String, required: false },
-  noPadding: { type: Boolean, required: false }
-});
-const emit = defineEmits(["update:search"]);
-function update(event) {
-  emit("update:search", event.target.value);
+<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>
 
@@ -14,7 +18,7 @@ function update(event) {
     <div flex="~ gap4 wrap" items-center>
       <slot name="search">
         <NTextInput
-          v-if="search !== void 0"
+          v-if="search !== undefined"
           placeholder="Search..."
           icon="carbon-search"
           n="primary" flex-auto

package/dist/components/NNotification.d.vue.ts

@@ -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 bg-base px-4 py-1 transition-all duration-300
+        :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/{NRadio.vue → NRadio.d.vue.ts}

@@ -1,13 +1,20 @@
-<script setup>
-import { useVModel } from "@vueuse/core";
-const props = defineProps({
-  modelValue: { type: String, required: false, default: "" },
-  disabled: { type: Boolean, required: false, default: false },
-  name: { type: String, required: false },
-  value: { type: String, required: false }
-});
-const emit = defineEmits([]);
-const model = useVModel(props, "modelValue", emit, { passive: true });
+<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>
@@ -23,7 +30,7 @@ const model = useVModel(props, "modelValue", emit, { passive: true });
       :disabled="disabled"
       :name="name"
       :value="value"
-      @keypress.enter="model = value"
+      @keypress.enter="model = value!"
     >
     <span class="n-radio-box n-transition n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
       <div class="n-radio-inner n-transition n-checked:n-radio-inner-checked" />

package/dist/components/{NSectionBlock.vue → NSectionBlock.d.vue.ts}

@@ -1,25 +1,35 @@
-<script setup>
-import { useVModel } from "@vueuse/core";
-const props = defineProps({
-  icon: { type: String, required: false },
-  text: { type: String, required: false },
-  description: { type: String, required: false },
-  containerClass: { type: String, required: false, default: "" },
-  headerClass: { type: String, required: false },
-  collapse: { type: Boolean, required: false, default: true },
-  open: { type: Boolean, required: false, default: true },
-  padding: { type: [Boolean, String], required: false, default: true }
-});
-const open = useVModel(props, "open", void 0, { passive: true });
-function onToggle(e) {
-  open.value = e.target.open;
+<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">
+  <details :open="open" @toggle="(onToggle as any)">
     <summary
       class="cursor-pointer select-none p4 hover:bg-active"
       :class="collapse ? '' : 'pointer-events-none'"
@@ -63,5 +73,25 @@ function onToggle(e) {
 </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)}
+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>