chore(release): 1.2.10

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.10](https://github.com/nuxtlabs/ui/compare/v1.2.9...v1.2.10) (2023-04-07)
+
+
+### Bug Fixes
+
+* **CommandPalette:** typecheck ([cfce152](https://github.com/nuxtlabs/ui/commit/cfce1524b209212d9ce635b61376ff0d6bc3601b))
+
+### [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)
+
+
+### Bug Fixes
+
+* **useTimer:** remaining after pause ([aafdfdb](https://github.com/nuxtlabs/ui/commit/aafdfdb59c365c542f93703dd52b4306ac935040))
+
 ### [1.2.6](https://github.com/nuxtlabs/ui/compare/v1.2.5...v1.2.6) (2023-04-04)
 
 ### [1.2.5](https://github.com/nuxtlabs/ui/compare/v1.2.4...v1.2.5) (2023-04-04)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "1.2.6",
+  "version": "1.2.10",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -34,7 +34,6 @@
     "@popperjs/core": "^2.11.7",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",

src/module.ts

@@ -136,7 +136,6 @@ export default defineNuxtModule<ModuleOptions>({
         theme,
         plugins: [
           require('@tailwindcss/forms'),
-          require('@tailwindcss/line-clamp'),
           require('@tailwindcss/aspect-ratio'),
           require('@tailwindcss/typography')
         ],

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-else class="truncate" :class="{ 'flex-none': command.suffix }">{{ command[commandAttribute] }}</span>
-                <span v-if="command.suffix" class="u-text-gray-400 truncate">{{ command.suffix }}</span>
+                <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-if="command.suffix" class="truncate" :class="command.suffixClass || 'u-text-gray-400'">{{ 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 {
-  const pair = indices[indices.length - i]
-  if (!pair) {
-    return value
+function highlight (text: string, { indices, value }: { indices: number[][], value:string }): string {
+  if (text === value) {
+    return ''
   }
 
-  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/composables/useTimer.ts

@@ -2,16 +2,16 @@ 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, options: UseTimestampOptions<true> = { controls: true }) {
+export function useTimer (cb: (...args: unknown[]) => any, interval: number, options?: UseTimestampOptions<true>) {
   let timer: number | null = null
-  const timestamp = useTimestamp(options)
+  const { pause: tPause, resume: tResume, timestamp } = useTimestamp({ ...(options || {}), controls: true })
   const startTime = ref<number | null>(null)
 
   const remaining = computed(() => {
     if (!startTime.value) {
-      return
+      return 0
     }
-    return interval - (timestamp.timestamp.value - startTime.value)
+    return interval - (timestamp.value - startTime.value)
   })
 
   function set (...args: unknown[]) {
@@ -38,18 +38,18 @@ export function useTimer (cb: (...args: unknown[]) => any, interval: number, opt
 
   function stop () {
     clear()
-    timestamp.pause()
+    tPause()
   }
 
   function pause () {
     clear()
-    timestamp.pause()
+    tPause()
   }
 
   function resume () {
-    startTime.value = (startTime.value || 0) + (Date.now() - timestamp.timestamp.value)
-    timestamp.resume()
     set()
+    tResume()
+    startTime.value = (startTime.value || 0) + (Date.now() - timestamp.value)
   }
 
   start()

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',
-        unselected: 'font-normal',
+        selected: 'font-semibold pl-4 pr-10',
+        unselected: 'font-normal px-4',
         disabled: 'cursor-not-allowed opacity-50',
         empty: 'text-sm u-text-gray-400 px-4 py-2',
         icon: {

yarn.lock

@@ -1591,11 +1591,6 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
-"@tailwindcss/line-clamp@^0.4.4":
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
-  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
-
 "@tailwindcss/typography@^0.5.9":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"