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

package/dist/components/NDialog.vue

@@ -59,7 +59,7 @@ export default {
   <Teleport v-if="shown" to="body">
     <div
       v-show="show"
-      class="n-dialog fixed inset-0 z-100 flex items-center justify-center n-transition"
+      class="fixed inset-0 z-100 flex items-center justify-center n-transition n-glass-effect"
       role="dialog"
       aria-modal="true"
       :class="[

package/dist/components/NDropdown.vue

@@ -2,7 +2,12 @@
 import { ref } from 'vue'
 import { onClickOutside, useVModel } from '@vueuse/core'
 
-const props = defineProps<{ modelValue?: boolean }>()
+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 })
@@ -23,7 +28,7 @@ onClickOutside(el, () => {
 
     <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']"
+      :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1', direction === 'end' ? 'right-0' : 'left-0']"
     >
       <slot />
     </div>

package/dist/components/NNavbar.vue

@@ -16,8 +16,9 @@ function update(event: any) {
 <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">
+      <slot name="search">
         <NTextInput
+          v-if="search !== undefined"
           placeholder="Search..."
           icon="carbon-search"
           n="primary" flex-auto

package/dist/components/NNotification.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
+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/NTextInput.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     type: 'text',
   },
 )
+
 const emit = defineEmits<{ (...args: any): void }>()
 const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url';
-import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
+import { defineNuxtModule, addImportsDir, addComponentsDir, createResolver, installModule } from '@nuxt/kit';
 import defu from 'defu';
 import { extendUnocssOptions } from './unocss.mjs';
 export { unocssPreset } from './unocss.mjs';
@@ -21,6 +21,7 @@ const module = defineNuxtModule({
     dev: false
   },
   async setup(options, nuxt) {
+    addImportsDir(rPath("./composables"));
     addComponentsDir({ path: rPath("./components") });
     nuxt.options.css.unshift(rPath("assets/styles.css"));
     if (!options.dev)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,13 +23,13 @@
     "dist"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "1.0.0-beta.1"
+    "@nuxt/devtools": "1.0.0-beta.3"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.21",
     "@iconify-json/logos": "^1.1.37",
     "@iconify-json/ri": "^1.1.12",
-    "@iconify-json/tabler": "^1.1.94",
+    "@iconify-json/tabler": "^1.1.95",
     "@nuxt/kit": "^3.7.4",
     "@nuxtjs/color-mode": "^3.3.0",
     "@unocss/core": "^0.56.5",
@@ -42,15 +42,15 @@
     "@vueuse/integrations": "^10.5.0",
     "@vueuse/nuxt": "^10.5.0",
     "defu": "^6.1.2",
-    "focus-trap": "^7.5.3",
+    "focus-trap": "^7.5.4",
     "splitpanes": "^3.1.5",
     "unocss": "^0.56.5",
     "v-lazy-show": "^0.2.3",
-    "@nuxt/devtools-kit": "1.0.0-beta.1"
+    "@nuxt/devtools-kit": "1.0.0-beta.3"
   },
   "devDependencies": {
     "nuxt": "^3.7.4",
-    "@nuxt/devtools": "1.0.0-beta.1"
+    "@nuxt/devtools": "1.0.0-beta.3"
   },
   "publishConfig": {
     "access": "public"