chore(release): 1.1.3

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.1.3](https://github.com/nuxtlabs/ui/compare/v1.1.2...v1.1.3) (2023-03-02)
+
+### [1.1.2](https://github.com/nuxtlabs/ui/compare/v1.1.1...v1.1.2) (2023-02-28)
+
+
+### Bug Fixes
+
+* **Tooltip:** truncate ([d08e64d](https://github.com/nuxtlabs/ui/commit/d08e64d53fa439f34d51909bcb6812f1bcd95d83))
+* **VerticalNavigation:** links `to` type ([7970aef](https://github.com/nuxtlabs/ui/commit/7970aefcb032ce01fcb11e9285fa61ce87f59519))
+
+### [1.1.1](https://github.com/nuxtlabs/ui/compare/v1.1.0...v1.1.1) (2023-02-20)
+
 ## [1.1.0](https://github.com/nuxtlabs/ui/compare/v1.0.0...v1.1.0) (2023-02-17)
 
 

docs/app.vue

@@ -84,7 +84,7 @@ const sections = [
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
   { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }, { label: 'CommandPalette', to: '/components/CommandPalette' }] },
-  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
+  { label: 'Overlays', links: [{ label: 'ContextMenu', to: '/components/ContextMenu' }, { label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>
 

docs/nuxt.config.ts

@@ -3,6 +3,13 @@ import nuxtUI from '../src/module'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en'
+      }
+    }
+  },
   modules: [
     // @ts-ignore
     nuxtUI

docs/pages/components/[component].vue

@@ -56,7 +56,6 @@
             v-if="prop.type === 'Boolean'"
             v-model="prop.value"
             :name="prop.key"
-            :label="prop.key"
           />
           <USelect
             v-else-if="prop.values"
@@ -121,6 +120,31 @@ const toggle = ref(false)
 const modal = ref(false)
 const slideover = ref(false)
 
+const x = ref(0)
+const y = ref(0)
+const isContextMenuOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+onMounted(() => {
+  document.addEventListener('mousemove', ({ clientX, clientY }) => {
+    x.value = clientX
+    y.value = clientY
+  })
+})
+
+function openContextMenu () {
+  const top = unref(y)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+  isContextMenuOpen.value = true
+}
+
 const defaultProps = {
   Button: {
     label: 'Button text'
@@ -261,6 +285,31 @@ const defaultProps = {
     title: 'Notification title',
     callback: 'console.log(\'Timer expired\')'
   },
+  ContextMenu: {
+    modelValue: isContextMenuOpen,
+    'onUpdate:modelValue': (v) => { isContextMenuOpen.value = v },
+    virtualElement,
+    component: {
+      name: 'Card',
+      props: {
+        variant: 'secondary',
+        label: 'Open context menu',
+        onClick: () => { isContextMenuOpen.value = false },
+        onContextmenu: (e) => {
+          e?.preventDefault()
+          openContextMenu()
+        },
+        class: 'relative w-[300px] h-[100px]'
+      }
+    },
+    slots: {
+      default: {
+        tag: 'div',
+        html: 'Context menu content',
+        class: 'rounded border u-border-gray-200 p-2'
+      }
+    }
+  },
   Modal: {
     modelValue: modal,
     'onUpdate:modelValue': (v) => { modal.value = v },

docs/pages/examples.vue

@@ -104,7 +104,7 @@
         </template>
 
         <template #panel>
-          <div class="p-4 u-bg-white border u-border-gray-200 rounded-md">
+          <div class="p-2">
             Panel
           </div>
         </template>
@@ -133,11 +133,11 @@
         Context menu:
       </div>
 
-      <UCard ref="contextMenuRef" class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
+      <UCard class="relative" body-class="h-64" @click="isContextMenuOpen = false" @contextmenu.prevent="openContextMenu">
         <UContextMenu v-model="isContextMenuOpen" :virtual-element="virtualElement" width-class="w-48">
-          <UCard @click.stop>
+          <div class="p-2">
             Menu
-          </UCard>
+          </div>
         </UContextMenu>
       </UCard>
     </div>
@@ -256,7 +256,7 @@ const { $toast } = useNuxtApp()
 const x = ref(0)
 const y = ref(0)
 const isContextMenuOpen = ref(false)
-const contextMenuRef = ref(null)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
 
 const commandPaletteGroups = computed(() => ([{
   key: 'people',
@@ -277,8 +277,6 @@ onMounted(() => {
   })
 })
 
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
 function openContextMenu () {
   const top = unref(y)
   const left = unref(x)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -25,10 +25,10 @@
     "release": "yarn lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.0.5",
+    "@egoist/tailwindcss-icons": "^1.0.7",
-    "@headlessui/vue": "^1.7.10",
+    "@headlessui/vue": "^1.7.11",
-    "@iconify-json/heroicons": "^1.1.9",
+    "@iconify-json/heroicons": "^1.1.10",
-    "@nuxt/kit": "^3.2.0",
+    "@nuxt/kit": "^3.2.2",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/tailwindcss": "^6.4.1",
     "@popperjs/core": "^2.11.6",
@@ -36,8 +36,8 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.12.0",
+    "@vueuse/core": "^9.13.0",
-    "@vueuse/integrations": "^9.12.0",
+    "@vueuse/integrations": "^9.13.0",
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
@@ -48,11 +48,11 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.2",
-    "eslint": "^8.34.0",
+    "eslint": "^8.35.0",
-    "nuxt": "^3.2.0",
+    "nuxt": "^3.2.2",
     "standard-version": "^9.5.0",
     "unbuild": "^1.1.2",
-    "vue-tsc": "^1.1.2"
+    "vue-tsc": "^1.2.0"
   }
 }

src/runtime/components/elements/Dropdown.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open && items.length" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <MenuItems :class="baseClass" static>
+        <MenuItems :class="[baseClass, divideClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <div v-for="(subItems, index) of items" :key="index" :class="groupClass">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <Component
@@ -104,6 +104,26 @@ const props = defineProps({
     type: String,
     default: () => $ui.dropdown.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.dropdown.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.dropdown.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.dropdown.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.dropdown.ring
+  },
+  divideClass: {
+    type: String,
+    default: () => $ui.dropdown.divide
+  },
   baseClass: {
     type: String,
     default: () => $ui.dropdown.base

src/runtime/components/navigation/CommandPalette.vue

@@ -255,6 +255,7 @@ function onClear () {
 }
 
 defineExpose({
+  query,
   updateQuery: (q: string) => {
     query.value = q
   },

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -15,14 +15,16 @@
       >
         <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center gap-2 min-w-0">
-            <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+            <slot :name="`${group.key}-icon`" :group="group" :command="command">
-            <Avatar
+              <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
-              v-else-if="command.avatar"
+              <Avatar
-              v-bind="{ size: 'xxxs', ...command.avatar }"
+                v-else-if="command.avatar"
-              class="flex-shrink-0"
+                v-bind="{ size: 'xxxs', ...command.avatar }"
-              aria-hidden="true"
+                class="flex-shrink-0"
-            />
+                aria-hidden="true"
-            <span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 mx-1 rounded-full" :style="{ background: `#${command.chip}` }" />
+              />
+              <span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 mx-1 rounded-full" :style="{ background: `#${command.chip}` }" />
+            </slot>
 
             <div class="flex items-center gap-1.5 min-w-0" :class="{ 'opacity-50': command.disabled }">
               <slot :name="`${group.key}-command`" :group="group" :command="command">

src/runtime/components/navigation/VerticalNavigation.vue

@@ -49,7 +49,7 @@ import $ui from '#build/ui'
 defineProps({
   links: {
     type: Array as PropType<{
-      to?: RouteLocationNormalized
+      to?: RouteLocationNormalized | string
       exact?: boolean
       label: string
       icon?: string

src/runtime/components/overlays/ContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isOpen" ref="container" :class="[containerClass, widthClass]">
     <transition appear v-bind="transitionClass">
-      <div :class="baseClass">
+      <div :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]">
         <slot />
       </div>
     </transition>
@@ -38,6 +38,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.contextMenu.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.contextMenu.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.contextMenu.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.contextMenu.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.contextMenu.ring
+  },
   baseClass: {
     type: String,
     default: () => $ui.contextMenu.base

src/runtime/components/overlays/Popover.vue

@@ -17,7 +17,7 @@
 
     <div v-if="open" ref="container" :class="[containerClass, widthClass]" @mouseover="onMouseOver">
       <transition appear v-bind="transitionClass">
-        <PopoverPanel :class="baseClass" static>
+        <PopoverPanel :class="[baseClass, ringClass, roundedClass, shadowClass, backgroundClass]" static>
           <slot name="panel" :open="open" :close="close" />
         </PopoverPanel>
       </transition>
@@ -62,6 +62,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.popover.base
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.popover.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.popover.shadow
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.popover.rounded
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.popover.ring
+  },
   transitionClass: {
     type: Object,
     default: () => $ui.popover.transition

src/runtime/components/overlays/Tooltip.vue

@@ -8,7 +8,7 @@
       <transition appear v-bind="transitionClass">
         <div :class="[baseClass, backgroundClass, roundedClass, shadowClass, ringClass]">
           <slot name="text">
-            <span class="truncate">{{ text }}</span>
+            {{ text }}
           </slot>
 
           <span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">

src/runtime/presets/default.ts

@@ -366,7 +366,12 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative inline-flex text-left',
     container: 'z-20',
     width: 'w-48',
-    base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg focus:outline-none',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'focus:outline-none',
+    divide: 'divide-y u-divide-gray-100',
     group: 'py-1',
     item: {
       base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
@@ -520,7 +525,7 @@ export default function defaultPreset (variantColors: string[]) {
     shadow: 'shadow',
     rounded: 'rounded',
     ring: 'ring-1 u-ring-gray-200',
-    base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal',
+    base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',
@@ -538,7 +543,11 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative',
     container: 'z-20',
     width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',
@@ -556,7 +565,11 @@ export default function defaultPreset (variantColors: string[]) {
     wrapper: 'relative',
     container: 'z-20',
     width: '',
-    base: '',
+    background: 'u-bg-white',
+    shadow: 'shadow-lg',
+    rounded: 'rounded-md',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'overflow-hidden focus:outline-none',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',

src/runtime/types/command-palette.d.ts

@@ -1,6 +1,7 @@
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { FuseSortFunctionMatch, FuseSortFunctionMatchList } from 'fuse.js'
 import type { Avatar } from './avatar'
+
 export interface Command {
   id: string | number
   prefix?: string
@@ -22,6 +23,5 @@ export interface Group {
   active?: string
   inactive?: string
   commands: Command[]
-  options?: Partial<UseFuseOptions<Command>>
   [key: string]: any
 }