chore(release): 1.2.9

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.9](https://github.com/nuxtlabs/ui/compare/v1.2.8...v1.2.9) (2023-04-07)
+
 ### [1.2.8](https://github.com/nuxtlabs/ui/compare/v1.2.7...v1.2.8) (2023-04-04)
 
 ### [1.2.7](https://github.com/nuxtlabs/ui/compare/v1.2.6...v1.2.7) (2023-04-04)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -28,11 +28,13 @@
 
             <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">
-                <span v-if="command.prefix" class="u-text-gray-400">{{ command.prefix }}</span>
+                <span v-if="command.prefix" class="flex-shrink-0" :class="command.prefixClass || 'u-text-gray-400'">{{ command.prefix }}</span>
+
+                <span class="truncate" :class="{ 'flex-none': command.suffix || command.matches?.length }">{{ command[commandAttribute] }}</span>
+
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <span v-if="command.matches?.length" class="truncate" :class="{ 'flex-none': command.suffix }" v-html="highlight(command.matches[0])" />
+                <span v-if="command.matches?.length" class="truncate" :class="command.suffixClass || 'u-text-gray-400'" v-html="highlight(command[commandAttribute], command.matches[0])" />
-                <span v-else class="truncate" :class="{ 'flex-none': command.suffix }">{{ command[commandAttribute] }}</span>
+                <span v-else-if="command.suffix" class="truncate" :class="command.suffixClass || 'u-text-gray-400'">{{ command.suffix }}</span>
-                <span v-if="command.suffix" class="u-text-gray-400 truncate">{{ command.suffix }}</span>
               </slot>
             </div>
           </div>
@@ -87,13 +89,36 @@ const label = computed(() => {
   return typeof label === 'function' ? label(props.query) : label
 })
 
-function highlight ({ indices, value }: { indices: number[][], value:string }, i = 1): string {
+function highlight (text, { indices, value }: { indices: number[][], value:string }): string {
-  const pair = indices[indices.length - i]
+  if (text === value) {
-  if (!pair) {
+    return ''
-    return value
   }
 
-  return `${highlight({ indices, value: value.substring(0, pair[0]) }, i + 1)}<mark>${value.substring(pair[0], pair[1] + 1)}</mark>${value.substring(pair[1] + 1)}`
+  let content = ''
+  let nextUnhighlightedIndiceStartingIndex = 0
+
+  indices.forEach((indice) => {
+    const lastIndiceNextIndex = indice[1] + 1
+    const isMatched = (lastIndiceNextIndex - indice[0]) >= props.query.length
+
+    content += [
+      value.substring(nextUnhighlightedIndiceStartingIndex, indice[0]),
+      isMatched && '<mark>',
+      value.substring(indice[0], lastIndiceNextIndex),
+      isMatched && '</mark>'
+    ].filter(Boolean).join('')
+
+    nextUnhighlightedIndiceStartingIndex = lastIndiceNextIndex
+  })
+
+  content += value.substring(nextUnhighlightedIndiceStartingIndex)
+
+  const index = content.indexOf('<mark>')
+  if (index > 60) {
+    content = `...${content.substring(index - 60)}`
+  }
+
+  return content
 }
 </script>
 

src/runtime/presets/default.ts

@@ -224,12 +224,12 @@ export default function defaultPreset (variantColors: string[]) {
       base: 'u-bg-white shadow-lg rounded-md ring-1 u-ring-gray-200 focus:outline-none overflow-y-auto py-1 max-h-60',
       input: 'relative block w-full focus:ring-transparent text-sm px-4 py-2 u-text-gray-700 border-l-0 u-bg-white border-t-0 border-r-0 u-border-gray-200 focus:u-border-gray-200',
       option: {
-        base: 'cursor-default select-none relative py-2 pl-4 pr-10 text-sm group',
+        base: 'cursor-default select-none relative py-2 text-sm group',
         container: 'flex items-center gap-3',
         active: 'text-white bg-primary-600',
         inactive: 'u-text-gray-900',
-        selected: 'font-semibold',
+        selected: 'font-semibold pl-4 pr-10',
-        unselected: 'font-normal',
+        unselected: 'font-normal px-4',
         disabled: 'cursor-not-allowed opacity-50',
         empty: 'text-sm u-text-gray-400 px-4 py-2',
         icon: {