@nuxt/devtools-ui-kit 3.4.1 → 3.4.2

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

@@ -1,77 +1,26 @@
-<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>
+type __VLS_Props = {
+    modelValue?: boolean;
+    top?: HTMLElement | string;
+    left?: HTMLElement | string;
+    autoClose?: boolean;
+    transition?: 'right' | 'bottom' | 'top';
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    transition: "right" | "bottom" | "top";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NDrawer.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { onClickOutside, useElementSize } from "@vueuse/core";
+import { ref } from "vue";
+const props = defineProps({
+  modelValue: { type: Boolean, required: false },
+  top: { type: null, required: false },
+  left: { type: null, required: false },
+  autoClose: { type: Boolean, required: false },
+  transition: { type: String, required: false, default: "right" }
+});
+const emit = defineEmits(["close"]);
+const el = ref();
+const { height } = useElementSize(() => props.top, void 0, { box: "border-box" });
+const width = typeof props.left === "string" && props.left.startsWith("#") ? document.querySelector(props.left)?.getBoundingClientRect().width : useElementSize(() => props.left, void 0, { 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.d.vue.ts

@@ -1,36 +1,28 @@
-<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 n-bg-base shadow n-transition"
-      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
+type __VLS_Props = {
+    modelValue?: boolean;
+    direction?: 'start' | 'end';
+};
+declare var __VLS_1: {
+    enabled: boolean;
+    click: () => boolean;
+}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    [x: string]: never;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    [x: `on${Capitalize<any>}`]: ((...args: unknown[]) => any) | undefined;
+}>, {
+    direction: "start" | "end";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NDropdown.vue

@@ -0,0 +1,31 @@
+<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();
+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 n-bg-base shadow n-transition"
+      :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.d.vue.ts

@@ -1,9 +1,6 @@
-<script setup lang="ts">
-defineProps<{
-  icon?: string
-}>()
-</script>
-
-<template>
-  <div class="n-icon" :class="icon" />
-</template>
+type __VLS_Props = {
+    icon?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/NIcon.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({
+  icon: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="n-icon" :class="icon" />
+</template>

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

@@ -1,15 +1,17 @@
-<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>
+type __VLS_Props = {
+    icon?: string;
+    text?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NIconTitle.vue

@@ -0,0 +1,15 @@
+<script setup>
+defineProps({
+  icon: { type: String, required: false },
+  text: { type: String, required: false }
+});
+</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.d.vue.ts

@@ -1,29 +1,19 @@
-<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>
+type __VLS_Props = {
+    to?: string;
+    href?: string;
+    target?: string;
+    underline?: boolean;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NLink.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  to: { type: String, required: false },
+  href: { type: String, required: false },
+  target: { type: String, required: false },
+  underline: { type: Boolean, required: false }
+});
+const link = computed(() => props.href || props.to);
+</script>
+
+<template>
+  <NuxtLink
+    v-bind="link ? {
+  href: link,
+  target,
+  rel: target === '_blank' ? 'noopener noreferrer' : void 0
+} : {}"
+    :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.d.vue.ts

@@ -1,10 +1,13 @@
-<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>
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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.d.vue.ts

@@ -1,19 +1,7 @@
-<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>
+type __VLS_Props = {
+    markdown: string;
+    tag?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/NMarkdown.vue

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

@@ -1,34 +1,25 @@
-<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" n-navbar-glass flex-1 :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>
+type __VLS_Props = {
+    search?: string;
+    noPadding?: boolean;
+};
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    search?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:search": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:search"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NNavbar.vue

@@ -0,0 +1,30 @@
+<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>
+
+<template>
+  <div flex="~ col gap2 wrap" border="b base" n-navbar-glass flex-1 :class="[{ p4: !noPadding }]">
+    <div flex="~ gap4 wrap" items-center>
+      <slot name="search">
+        <NTextInput
+          v-if="search !== void 0"
+          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.d.vue.ts

@@ -1,48 +1,3 @@
-<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>
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;