@nuxt/devtools-ui-kit 0.2.2 → 0.2.4

package/README.md

@@ -6,74 +6,4 @@
 
 UI kit for module authors to build embedded views for Nuxt Devtools.
 
-- [Demo](https://ui-kit.devtools.nuxtjs.org/)
-
-## Install
-
-```bash
-npm i @nuxt/devtools-ui-kit
-```
-
-```ts
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/devtools-ui-kit'
-  ]
-})
-```
-
-## Usage
-
-`@nuxt/devtools-ui-kit` is an unbundled component library powered by [UnoCSS](https://github.com/antfu/unocss) and [VueUse](https://vueuse.org/).
-
-In this library, we introduced the `n` attribute for every component to customize the styles and variations. For example, to make a red button:
-
-```html
-<NButton n="red" />
-```
-
-to make it larger, add the size specifier (`sm`, `md`, `lg` or `xl`) the `n` attribute:
-
-```html
-<NButton n="red xl" />
-```
-
-You can apply the same specifiers to any other component, for example:
-
-```html
-<NCheckbox n="red xl" />
-```
-
-Apply it to parent components could make a local theme scope
-
-```html
-<NCard n="green-500">
-  <!-- both of them are themed green -->
-  <NCheckbox>i accept the terms & conditions</NCheckbox>
-  <NButton>Submit</NButton>
-</NCard>
-```
-
-## Theming
-
-Powered by [UnoCSS](https://github.com/antfu/unocss), you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components.
-
-It's also possible to override the default theme globally, for example:
-
-```ts
-// nuxt.config.js
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/devtools-ui-kit'
-  ],
-  unocss: {
-    shortcuts: {
-      'n-button-base': 'border n-border-base rounded shadow-sm op80 !outline-none',
-      'n-button-hover': 'op100 !border-context text-context',
-      'n-button-active': 'n-active-base bg-context/5',
-    }
-  }
-})
-```
-
-You can find all the default values and available entries in [src/unocss/index.ts](./src/unocss/index.ts).
+Please refer to the [DevTools UI Kit](https://devtools.nuxtjs.org/module/ui-kit) for the full documentation.

package/dist/components/NIconTitle.vue

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

package/dist/components/NSectionBlock.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    icon?: string
+    text: string
+    description?: string
+    containerClass?: string
+    collapse?: boolean
+    open?: boolean
+    padding?: boolean | string
+  }>(), {
+    containerClass: '',
+    open: true,
+    padding: true,
+    collapse: true,
+  },
+)
+</script>
+
+<template>
+  <details :open="open">
+    <summary class="select-none cursor-pointer p4 hover:bg-active" :class="collapse ? '' : 'pointer-events-none'">
+      <NIconTitle :icon="icon" :text="text" class="text-xl op75">
+        <div>
+          {{ text }}
+          <div v-if="description" class="op50 text-sm">
+            {{ description }}
+          </div>
+        </div>
+        <div class="flex-auto" />
+        <NIcon
+          v-if="collapse"
+          icon="carbon-chevron-down"
+          class="text-base op50 cursor-pointer transition duration-500 place-self-start chevron"
+        />
+      </NIconTitle>
+    </summary>
+    <div class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+      <slot name="details" />
+      <div :class="containerClass" class="mt1">
+        <slot />
+      </div>
+      <slot name="footer" />
+    </div>
+  </details>
+  <div class="x-divider" />
+</template>
+
+<style scoped>
+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>

package/dist/components/NSelect.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: any
+    placeholder?: string
+    icon?: string
+    disabled?: boolean
+  }>(),
+  {
+    modelValue: undefined,
+    placeholder: '',
+    disabled: false,
+    icon: '',
+  },
+)
+const emit = defineEmits<{ (...args: any): void }>()
+const input = useVModel(props, 'modelValue', emit, { passive: true })
+</script>
+
+<template>
+  <div
+    class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2"
+  >
+    <slot name="icon">
+      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+    </slot>
+    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+      <option v-if="placeholder" value="" disabled hidden>
+        {{ placeholder }}
+      </option>
+      <slot />
+    </select>
+  </div>
+</template>

package/dist/components/NTextInput.vue

@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
-    modelValue?: string
+    modelValue?: string | number
     placeholder?: string
     icon?: string
     disabled?: boolean
@@ -28,6 +28,7 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
       v-model="input"
       class="flex-auto n-bg-base w-full !outline-none"
       :type="type"
+      :disabled="disabled"
       :placeholder="placeholder"
     >
   </div>

package/dist/module.json

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

package/dist/module.mjs

@@ -19,7 +19,6 @@ const module = defineNuxtModule({
     dev: false
   },
   async setup(options, nuxt) {
-    addComponentsDir({ path: rPath("./components/nuxt") });
     addComponentsDir({ path: rPath("./components") });
     nuxt.options.css.unshift(rPath("assets/styles.css"));
     if (!options.dev)

package/dist/unocss.mjs

@@ -92,8 +92,9 @@ const unocssPreset = () => ({
     "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
     "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
     // tip
-    "n-tip-base": "bg-context/8 text-context px-1em py-0.4em rounded flex items-center dark:bg-context/12",
-    "n-tip-icon": "-ml-0.2em mr-0.4em text-1.1em"
+    "n-tip-base": "bg-context/4 text-context px-1em py-0.4em rounded flex gap-2 items-center dark:bg-context/12",
+    // icon
+    "n-icon": "flex-none"
   }
 });
 function extendUnocssOptions(user = {}) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {