@nuxt/devtools-ui-kit 0.7.5 → 0.8.0

package/README.md

@@ -4,6 +4,6 @@
 
 > **Warning**: This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
 
-UI kit for module authors to build embedded views for Nuxt Devtools.
+UI kit for module authors to build embedded views for Nuxt DevTools.
 
 Please refer to the [DevTools UI Kit](https://devtools.nuxtjs.org/module/ui-kit) for the full documentation.

package/dist/components/NSelect.vue

@@ -21,7 +21,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
+    class="n-select flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />

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/module.json

@@ -1,5 +1,5 @@
 {
   "name": "devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "0.7.5"
+  "version": "0.8.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,7 +23,7 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.7.5"
+    "@nuxt/devtools": "0.8.0"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.19",
@@ -32,21 +32,21 @@
     "@iconify-json/tabler": "^1.1.87",
     "@nuxt/kit": "^3.6.5",
     "@nuxtjs/color-mode": "^3.3.0",
-    "@unocss/core": "^0.54.1",
-    "@unocss/nuxt": "^0.54.1",
-    "@unocss/preset-attributify": "^0.54.1",
-    "@unocss/preset-icons": "^0.54.1",
-    "@unocss/preset-mini": "^0.54.1",
-    "@unocss/reset": "^0.54.1",
+    "@unocss/core": "^0.55.0",
+    "@unocss/nuxt": "^0.55.0",
+    "@unocss/preset-attributify": "^0.55.0",
+    "@unocss/preset-icons": "^0.55.0",
+    "@unocss/preset-mini": "^0.55.0",
+    "@unocss/reset": "^0.55.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "@vueuse/nuxt": "^10.3.0",
     "defu": "^6.1.2",
     "focus-trap": "^7.5.2",
-    "unocss": "^0.54.1",
+    "unocss": "^0.55.0",
     "v-lazy-show": "^0.2.3",
-    "@nuxt/devtools": "0.7.5",
-    "@nuxt/devtools-kit": "0.7.5"
+    "@nuxt/devtools-kit": "0.8.0",
+    "@nuxt/devtools": "0.8.0"
   },
   "devDependencies": {
     "nuxt": "^3.6.5"