chore(release): 1.2.4

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.2.4](https://github.com/nuxtlabs/ui/compare/v1.2.3...v1.2.4) (2023-04-04)
+
+### [1.2.3](https://github.com/nuxtlabs/ui/compare/v1.2.2...v1.2.3) (2023-03-22)
+
+### [1.2.2](https://github.com/nuxtlabs/ui/compare/v1.2.1...v1.2.2) (2023-03-20)
+
+### [1.2.1](https://github.com/nuxtlabs/ui/compare/v1.2.0...v1.2.1) (2023-03-20)
+
+
+### Bug Fixes
+
+* **defineShortcuts:** shift + alphabetic character handling ([#140](https://github.com/nuxtlabs/ui/issues/140)) ([377b418](https://github.com/nuxtlabs/ui/commit/377b4189ca85603db0b7f040949260ba7494c46f))
+
+## [1.2.0](https://github.com/nuxtlabs/ui/compare/v1.1.4...v1.2.0) (2023-03-09)
+
+
+### Bug Fixes
+
+* **defineShortcuts:** add missing import ([37b2271](https://github.com/nuxtlabs/ui/commit/37b2271bf04adfe6bee4d984fa12452b2168318c))
+* **Tooltip:** `shortcutsClass` prop type ([fa49d52](https://github.com/nuxtlabs/ui/commit/fa49d52f17752eaa06f997a9b6e8df8adcab983f))
+
+### [1.1.4](https://github.com/nuxtlabs/ui/compare/v1.1.3...v1.1.4) (2023-03-02)
+
+### [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)
 
 

docs/pages/examples.vue

@@ -128,6 +128,16 @@
       <UButton icon="i-heroicons-bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
     </div>
 
+    <div>
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
+        Copy text to clipboard:
+      </div>
+      <div class="flex gap-2">
+        <UInput v-model="textToCopy" name="textToCopy" />
+        <UButton icon="i-heroicons-document-duplicate-solid" variant="primary" label="Copy text" @click="onCopyTextClick" />
+      </div>
+    </div>
+
     <div>
       <div class="font-medium text-sm mb-1 u-text-gray-700">
         Context menu:
@@ -230,6 +240,7 @@
 
 <script setup>
 const isModalOpen = ref(false)
+const textToCopy = ref('Copied text')
 
 const people = ref([
   { id: 1, name: 'Durward Reynolds', disabled: false },
@@ -251,7 +262,8 @@ const form = reactive({
   persons: ref([people.value[0]])
 })
 
-const { $toast } = useNuxtApp()
+const toast = useToast()
+const clipboard = useCopyToClipboard()
 
 const x = ref(0)
 const y = ref(0)
@@ -346,6 +358,10 @@ const customDropdownItems = [
 ]
 
 const onNotificationClick = () => {
-  $toast.error({ title: 'Error', description: 'This is an error message' })
+  toast.error({ title: 'Error', description: 'This is an error message' })
+}
+
+const onCopyTextClick = () => {
+  clipboard.copy(textToCopy.value, { title: 'Text copied successfully!' })
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "1.1.2",
+  "version": "1.2.4",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -26,11 +26,11 @@
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.0.7",
-    "@headlessui/vue": "^1.7.11",
+    "@headlessui/vue": "1.7.10",
     "@iconify-json/heroicons": "^1.1.10",
-    "@nuxt/kit": "^3.2.2",
+    "@nuxt/kit": "^3.3.1",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.4.1",
+    "@nuxtjs/tailwindcss": "^6.6.0",
     "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
@@ -38,19 +38,20 @@
     "@tailwindcss/typography": "^0.5.9",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",
+    "@vueuse/math": "^9.13.0",
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "^1.1.47",
+    "@iconify-json/mdi": "^1.1.50",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^18.14.2",
-    "eslint": "^8.35.0",
-    "nuxt": "^3.2.2",
+    "@types/lodash-es": "^4.17.7",
+    "@types/node": "^18.15.3",
+    "eslint": "^8.36.0",
+    "nuxt": "^3.3.1",
     "standard-version": "^9.5.0",
     "unbuild": "^1.1.2",
     "vue-tsc": "^1.2.0"

src/module.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, addTemplate, addPlugin, createResolver } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, addTemplate, createResolver } from '@nuxt/kit'
 import { defu } from 'defu'
 import colors from 'tailwindcss/colors.js'
 import type { Config } from 'tailwindcss'
@@ -155,9 +155,6 @@ export default defineNuxtModule<ModuleOptions>({
       cssPath: resolve(runtimeDir, 'tailwind.css')
     })
 
-    addPlugin(resolve(runtimeDir, 'plugins', 'toast.client'))
-    addPlugin(resolve(runtimeDir, 'plugins', 'clipboard.client'))
-
     addComponentsDir({
       path: resolve(runtimeDir, 'components', 'elements'),
       prefix,

src/runtime/components/elements/Avatar.vue

@@ -38,12 +38,8 @@ const props = defineProps({
     default: true
   },
   chip: {
-    type: Boolean,
-    default: false
-  },
-  chipVariant: {
     type: String,
-    default: 'primary',
+    default: null,
     validator (value: string) {
       return Object.keys($ui.avatar.chip.variant).includes(value)
     }
@@ -92,8 +88,8 @@ const avatarClass = computed(() => {
 const chipClass = computed(() => {
   return classNames(
     $ui.avatar.chip.base,
+    $ui.avatar.chip.variant[props.chip],
     $ui.avatar.chip.position[props.chipPosition],
-    $ui.avatar.chip.variant[props.chipVariant],
     $ui.avatar.chip.size[props.size]
   )
 })

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" />
-            <Avatar
-              v-else-if="command.avatar"
-              v-bind="{ size: 'xxxs', ...command.avatar }"
-              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}` }" />
+            <slot :name="`${group.key}-icon`" :group="group" :command="command">
+              <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" />
+              <Avatar
+                v-else-if="command.avatar"
+                v-bind="{ size: 'xxxs', ...command.avatar }"
+                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}` }" />
+            </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">
@@ -40,7 +42,7 @@
             <span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
           </slot>
           <slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
-            <span v-if="command.shortcuts?.length" class="flex-shrink-0 text-xs font-semibold u-text-gray-500">
+            <span v-if="command.shortcuts?.length" :class="$ui.commandPalette.option.shortcuts">
               <kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
             </span>
             <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>

src/runtime/components/overlays/Notifications.vue

@@ -9,7 +9,7 @@
           v-bind="notification"
           :class="notification.click && 'cursor-pointer'"
           @click="notification.click && notification.click(notification)"
-          @close="$toast.removeNotification(notification.id)"
+          @close="toast.removeNotification(notification.id)"
         />
       </div>
     </div>
@@ -18,10 +18,11 @@
 
 <script setup lang="ts">
 import type { ToastNotification } from '../../types'
+import { useToast } from '../../composables/useToast'
 import Notification from './Notification.vue'
-import { useNuxtApp, useState } from '#imports'
+import { useState } from '#imports'
 
-const { $toast } = useNuxtApp()
+const toast = useToast()
 const notifications = useState<ToastNotification[]>('notifications', () => [])
 </script>
 

src/runtime/components/overlays/Tooltip.vue

@@ -11,7 +11,7 @@
             {{ text }}
           </slot>
 
-          <span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">
+          <span v-if="shortcuts?.length" :class="shortcutsClass">
             <span class="mr-1 u-text-gray-700">&middot;</span>
             <kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] u-bg-gray-100 rounded u-text-gray-900">
               {{ shortcut }}
@@ -84,6 +84,10 @@ const props = defineProps({
     type: Object as PropType<PopperOptions>,
     default: () => ({})
   },
+  shortcutsClass: {
+    type: String,
+    default: () => $ui.tooltip.shortcuts
+  },
   openDelay: {
     type: Number,
     default: 0

src/runtime/composables/defineShortcuts.ts

@@ -0,0 +1,109 @@
+import type { Ref, ComputedRef } from 'vue'
+import { logicAnd, logicNot } from '@vueuse/math'
+import { computed, onMounted, onBeforeUnmount } from 'vue'
+import { useShortcuts } from './useShortcuts'
+
+export interface ShortcutConfig {
+  handler: Function
+  usingInput?: string | boolean
+  whenever?: Ref<Boolean>[]
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Function
+}
+
+interface Shortcut {
+  handler: Function
+  condition: ComputedRef<Boolean>
+  // KeyboardEvent attributes
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+  altKey: boolean
+  // code?: string
+  // keyCode?: number
+}
+
+export const defineShortcuts = (config: ShortcutsConfig) => {
+  const { macOS, usingInput } = useShortcuts()
+
+  let shortcuts: Shortcut[] = []
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
+
+    for (const shortcut of shortcuts) {
+      if (e.key.toLowerCase() !== shortcut.key) { continue }
+      if (e.metaKey !== shortcut.metaKey) { continue }
+      if (e.ctrlKey !== shortcut.ctrlKey) { continue }
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) { continue }
+      // alt modifier changes the combined key anyways
+      // if (e.altKey !== shortcut.altKey) { continue }
+
+      if (shortcut.condition.value) {
+        e.preventDefault()
+        shortcut.handler()
+      }
+      return
+    }
+  }
+
+  onMounted(() => {
+    // Map config to full detailled shortcuts
+    shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null
+      }
+
+      // Parse key and modifiers
+      const keySplit = key.toLowerCase().split('_').map(k => k)
+      let shortcut: Partial<Shortcut> = {
+        key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
+        metaKey: keySplit.includes('meta'),
+        ctrlKey: keySplit.includes('ctrl'),
+        shiftKey: keySplit.includes('shift'),
+        altKey: keySplit.includes('alt')
+      }
+
+      // Convert Meta to Ctrl for non-MacOS
+      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+        shortcut.metaKey = false
+        shortcut.ctrlKey = true
+      }
+
+      // Retrieve handler function
+      if (typeof shortcutConfig === 'function') {
+        shortcut.handler = shortcutConfig
+      } else if (typeof shortcutConfig === 'object') {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler }
+      }
+
+      if (!shortcut.handler) {
+        // eslint-disable-next-line no-console
+        console.trace('[Shortcut] Invalid value')
+        return null
+      }
+
+      // Create shortcut computed
+      const conditions = []
+      if (!(shortcutConfig as ShortcutConfig).usingInput) {
+        conditions.push(logicNot(usingInput))
+      } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === 'string') {
+        conditions.push(computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput))
+      }
+      shortcut.condition = logicAnd(...conditions, ...((shortcutConfig as ShortcutConfig).whenever || []))
+
+      return shortcut as Shortcut
+    }).filter(Boolean) as Shortcut[]
+
+    document.addEventListener('keydown', onKeyDown)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('keydown', onKeyDown)
+  })
+}

src/runtime/composables/useCopyToClipboard.ts

@@ -1,8 +1,9 @@
 import { useClipboard } from '@vueuse/core'
-import { defineNuxtPlugin } from '#app'
+import { useToast } from './useToast'
 
-export default defineNuxtPlugin((nuxtApp) => {
+export function useCopyToClipboard () {
   const { copy: copyToClipboard, isSupported } = useClipboard()
+  const toast = useToast()
 
   function copy (text: string, success: { title?: string, description?: string } = {}, failure: { title?: string, description?: string } = {}) {
     if (!isSupported) {
@@ -14,9 +15,9 @@ export default defineNuxtPlugin((nuxtApp) => {
         return
       }
 
-      nuxtApp.$toast.success(success)
+      toast.success(success)
     }, function (e) {
-      nuxtApp.$toast.error({
+      toast.error({
         ...failure,
         description: failure.description || e.message
       })
@@ -24,10 +25,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   }
 
   return {
-    provide: {
-      clipboard: {
-        copy
-      }
-    }
+    copy
   }
-})
+}

src/runtime/composables/useShortcuts.ts

@@ -0,0 +1,32 @@
+import { createSharedComposable, useActiveElement } from '@vueuse/core'
+import { ref, computed, onMounted } from 'vue'
+
+export const _useShortcuts = () => {
+  const macOS = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+
+  const metaSymbol = ref(' ')
+
+  const activeElement = useActiveElement()
+  const usingInput = computed(() => {
+    const usingInput = !!(activeElement.value?.tagName === 'INPUT' || activeElement.value?.tagName === 'TEXTAREA' || activeElement.value?.contentEditable === 'true')
+
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true
+    }
+
+    return false
+  })
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? '⌘' : 'Ctrl'
+  })
+
+  return {
+    macOS,
+    metaSymbol,
+    activeElement,
+    usingInput
+  }
+}
+
+export const useShortcuts = createSharedComposable(_useShortcuts)

src/runtime/composables/useTimer.ts

@@ -1,9 +1,10 @@
 import { ref, computed } from 'vue-demi'
 import { useTimestamp } from '@vueuse/core'
+import type { UseTimestampOptions } from '@vueuse/core'
 
-export function useTimer (cb: (...args: unknown[]) => any, interval: number) {
+export function useTimer (cb: (...args: unknown[]) => any, interval: number, options: UseTimestampOptions<true> = { controls: true }) {
   let timer: number | null = null
-  const timestamp = useTimestamp({ controls: true })
+  const timestamp = useTimestamp(options)
   const startTime = ref<number | null>(null)
 
   const remaining = computed(() => {

src/runtime/composables/useToast.ts

@@ -0,0 +1,41 @@
+import type { ToastNotification } from '../types'
+import { useState } from '#imports'
+
+export function useToast () {
+  const notifications = useState<ToastNotification[]>('notifications', () => [])
+
+  function addNotification (notification: Partial<ToastNotification>) {
+    const body = {
+      id: new Date().getTime().toString(),
+      ...notification
+    }
+
+    const index = notifications.value.findIndex((n: ToastNotification) => n.id === body.id)
+    if (index === -1) {
+      notifications.value.push(body as ToastNotification)
+    }
+
+    return body
+  }
+
+  function removeNotification (id: string) {
+    notifications.value = notifications.value.filter((n: ToastNotification) => n.id !== id)
+  }
+
+  const success = (notification: Partial<ToastNotification> = {}) => addNotification({ type: 'success', ...notification })
+
+  const info = (notification: Partial<ToastNotification> = {}) => addNotification({ type: 'info', ...notification })
+
+  const warning = (notification: Partial<ToastNotification> = {}) => addNotification({ type: 'warning', ...notification })
+
+  const error = (notification: Partial<ToastNotification>) => addNotification({ type: 'error', title: 'An error occurred!', ...notification })
+
+  return {
+    addNotification,
+    removeNotification,
+    success,
+    info,
+    warning,
+    error
+  }
+}

src/runtime/plugins/toast.client.ts

@@ -1,45 +0,0 @@
-import { defineNuxtPlugin, useState } from '#app'
-import type { ToastNotification } from '../types'
-
-export default defineNuxtPlugin(() => {
-  const notifications = useState<ToastNotification[]>('notifications', () => [])
-
-  function addNotification (notification: Partial<ToastNotification>) {
-    const body = {
-      id: new Date().getTime().toString(),
-      ...notification
-    }
-
-    const index = notifications.value.findIndex((n: ToastNotification) => n.id === body.id)
-    if (index === -1) {
-      notifications.value.push(body as ToastNotification)
-    }
-
-    return body
-  }
-
-  function removeNotification (id: string) {
-    notifications.value = notifications.value.filter((n: ToastNotification) => n.id !== id)
-  }
-
-  return {
-    provide: {
-      toast: {
-        addNotification,
-        removeNotification,
-        success (notification: Partial<ToastNotification> = {}) {
-          return addNotification({ type: 'success', ...notification })
-        },
-        info (notification: Partial<ToastNotification> = {}) {
-          return addNotification({ type: 'info', ...notification })
-        },
-        warning (notification: Partial<ToastNotification> = {}) {
-          return addNotification({ type: 'warning', ...notification })
-        },
-        error (notification: Partial<ToastNotification>) {
-          return addNotification({ type: 'error', title: 'An error occurred!', ...notification })
-        }
-      }
-    }
-  }
-})

src/runtime/presets/default.ts

@@ -380,7 +380,7 @@ export default function defaultPreset (variantColors: string[]) {
       disabled: 'cursor-not-allowed opacity-50',
       icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
       avatar: '-m-0.5 group-hover:u-bg-gray-200 flex-shrink-0',
-      shortcuts: 'flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
+      shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold u-text-gray-500 ml-auto'
     },
     transition: {
       enterActiveClass: 'transition duration-100 ease-out',
@@ -526,6 +526,7 @@ export default function defaultPreset (variantColors: string[]) {
     rounded: 'rounded',
     ring: 'ring-1 u-ring-gray-200',
     base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
+    shortcuts: 'hidden md:inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',
@@ -611,7 +612,8 @@ export default function defaultPreset (variantColors: string[]) {
         icon: {
           name: 'i-heroicons-check-20-solid'
         }
-      }
+      },
+      shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold u-text-gray-500'
     }
   }
 

src/runtime/types/avatar.d.ts

@@ -4,7 +4,6 @@ export interface Avatar {
   text: string
   size: string
   rounded: boolean
-  chip: boolean
-  chipVariant: string
+  chip: string
   chipPosition: string
 }

src/runtime/types/toast.d.ts

@@ -14,10 +14,3 @@ export interface ToastNotification {
   click?: Function
   callback?: Function
 }
-
-export interface ToastPlugin {
-  addNotification: (notification: Partial<Notification>) => Notification
-  removeNotification: (id: string) => void
-  success: (options: { title?: string, description?: string }) => void
-  error: (options: { title?: string, description?: string }) => void
-}