chore(release): 0.1.31

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.
 
+### [0.1.31](https://github.com/nuxtlabs/ui/compare/v0.1.30...v0.1.31) (2023-01-17)
+
+### [0.1.30](https://github.com/nuxtlabs/ui/compare/v0.1.29...v0.1.30) (2023-01-17)
+
+### [0.1.29](https://github.com/nuxtlabs/ui/compare/v0.1.28...v0.1.29) (2023-01-17)
+
+### [0.1.28](https://github.com/nuxtlabs/ui/compare/v0.1.27...v0.1.28) (2023-01-13)
+
+### [0.1.27](https://github.com/nuxtlabs/ui/compare/v0.1.26...v0.1.27) (2023-01-12)
+
+### [0.1.26](https://github.com/nuxtlabs/ui/compare/v0.1.25...v0.1.26) (2023-01-09)
+
+
+### Bug Fixes
+
+* **CommandPalette:** select first item on search changes ([#126](https://github.com/nuxtlabs/ui/issues/126)) ([4f56921](https://github.com/nuxtlabs/ui/commit/4f56921096f5885cdab8b7cb5c5aa01304188e11))
+
+### [0.1.25](https://github.com/nuxtlabs/ui/compare/v0.1.24...v0.1.25) (2023-01-09)
+
+### [0.1.24](https://github.com/nuxtlabs/ui/compare/v0.1.23...v0.1.24) (2023-01-04)
+
 ### [0.1.23](https://github.com/nuxtlabs/ui/compare/v0.1.22...v0.1.23) (2022-12-20)
 
 ### [0.1.22](https://github.com/nuxtlabs/ui/compare/v0.1.21...v0.1.22) (2022-12-19)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "0.1.23",
+  "version": "0.1.31",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -29,14 +29,14 @@
     "@iconify/vue": "^4.0.2",
     "@nuxt/kit": "^3.0.0",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.1.3",
+    "@nuxtjs/tailwindcss": "^6.2.0",
     "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.8",
-    "@vueuse/core": "^9.7.0",
-    "@vueuse/integrations": "^9.7.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@vueuse/core": "^9.11.0",
+    "@vueuse/integrations": "^9.11.0",
     "defu": "^6.1.1",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
@@ -46,11 +46,11 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^8.30.0",
+    "eslint": "^8.32.0",
     "nuxt": "^3.0.0",
     "standard-version": "^9.5.0",
-    "unbuild": "^1.0.2",
-    "vue-tsc": "^1.0.13"
+    "unbuild": "^1.1.1",
+    "vue-tsc": "^1.0.24"
   },
   "build": {
     "externals": [

src/runtime/components/elements/Button.vue

@@ -7,7 +7,12 @@
     v-bind="buttonProps"
   >
     <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
-    <slot><span :class="truncate ? 'text-left break-all line-clamp-1' : ''">{{ label }}</span></slot>
+    <slot>
+      <span :class="[truncate ? 'text-left break-all line-clamp-1' : '', compact ? 'hidden sm:block' : '']">
+        <span :class="[labelCompact && 'hidden sm:block']">{{ label }}</span>
+        <span v-if="labelCompact" class="sm:hidden">{{ labelCompact }}</span>
+      </span>
+    </slot>
     <Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
   </component>
 </template>
@@ -34,6 +39,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  labelCompact: {
+    type: String,
+    default: null
+  },
   loading: {
     type: Boolean,
     default: false
@@ -127,6 +136,10 @@ const props = defineProps({
   truncate: {
     type: Boolean,
     default: false
+  },
+  compact: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -164,7 +177,7 @@ const buttonClass = computed(() => {
   return classNames(
     props.baseClass,
     $ui.button.size[props.size],
-    $ui.button[isSquare.value ? 'square' : 'spacing'][props.size],
+    $ui.button[isSquare.value ? 'square' : (props.compact ? 'compact' : 'spacing')][props.size],
     $ui.button.variant[props.variant],
     props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
     props.rounded ? 'rounded-full' : props.roundedClass,
@@ -192,7 +205,7 @@ const leadingIconClass = computed(() => {
   return classNames(
     props.iconBaseClass,
     $ui.button.icon.size[props.size],
-    (!!slots.default || !!props.label?.length) && $ui.button.icon.leading.spacing[props.size],
+    (!!slots.default || !!props.label?.length) && $ui.button.icon.leading[props.compact ? 'compactSpacing' : 'spacing'][props.size],
     props.leadingIconClass,
     props.loading && 'animate-spin'
   )
@@ -202,7 +215,7 @@ const trailingIconClass = computed(() => {
   return classNames(
     props.iconBaseClass,
     $ui.button.icon.size[props.size],
-    (!!slots.default || !!props.label?.length) && $ui.button.icon.trailing.spacing[props.size],
+    (!!slots.default || !!props.label?.length) && $ui.button.icon.trailing[props.compact ? 'compactSpacing' : 'spacing'][props.size],
     props.trailingIconClass,
     props.loading && !isLeading.value && 'animate-spin'
   )

src/runtime/components/elements/Dropdown.vue

@@ -1,6 +1,12 @@
 <template>
   <Menu v-slot="{ open }" as="div" :class="wrapperClass" @mouseleave="onMouseLeave">
-    <MenuButton ref="trigger" as="div" class="inline-flex w-full" @mouseover="onMouseOver">
+    <MenuButton
+      ref="trigger"
+      as="div"
+      class="inline-flex w-full"
+      role="button"
+      @mouseover="onMouseOver"
+    >
       <slot :open="open">
         <button>Open</button>
       </slot>

src/runtime/components/forms/SelectCustom.vue

@@ -10,9 +10,9 @@
     :class="wrapperClass"
     @update:model-value="onUpdate"
   >
-    <input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1">
+    <input :value="modelValue" :required="required" class="absolute inset-0 w-px opacity-0 cursor-default" tabindex="-1" aria-hidden="true">
 
-    <ComboboxButton ref="trigger" v-slot="{ disabled: buttonDisabled }" as="div" class="inline-flex w-full">
+    <ComboboxButton ref="trigger" v-slot="{ disabled: buttonDisabled }" as="div" role="button" class="inline-flex w-full">
       <slot :open="open" :disabled="buttonDisabled">
         <button :class="selectCustomClass" :disabled="disabled" type="button">
           <slot name="label">

src/runtime/components/navigation/CommandPalette.vue

@@ -19,7 +19,14 @@
           @change="query = $event.target.value"
         />
 
-        <Button v-if="closeIcon" :icon="closeIcon" variant="transparent" class="absolute right-3" @click="onClear" />
+        <Button
+          v-if="closeIcon"
+          :icon="closeIcon"
+          variant="transparent"
+          class="absolute right-2"
+          aria-label="close"
+          @click="onClear"
+        />
       </div>
 
       <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
@@ -41,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useFuse } from '@vueuse/integrations/useFuse'
@@ -174,11 +181,19 @@ const groups = computed(() => map(groupBy(results.value, command => command.item
   } as Group
 }))
 
+watch(groups, () => {
+  // Select first item on search changes
+  setTimeout(() => {
+    // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
+    comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
+  }, 0)
+})
+
 // Methods
 
 function activateFirstOption () {
   // hack combobox by using keyboard event
-  // https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L692
+  // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
   setTimeout(() => {
     comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
   }, 0)

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="p-2">
+  <li class="p-2" role="option">
     <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
       {{ group[groupAttribute] }}
     </h2>
@@ -20,6 +20,7 @@
               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}` }" />
 

src/runtime/components/overlays/Popover.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover v-slot="{ open, close }" :class="wrapperClass" @mouseleave="onMouseLeave">
-    <PopoverButton ref="trigger" as="div" class="inline-flex w-full" @mouseover="onMouseOver">
+    <PopoverButton ref="trigger" as="div" class="inline-flex w-full" role="button" @mouseover="onMouseOver">
       <slot :open="open" :close="close">
         <button>Open</button>
       </slot>

src/runtime/components/overlays/Slideover.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" @close="isOpen = false">
+    <Dialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" @close="close">
       <TransitionChild
         v-if="overlay"
         as="template"
@@ -89,7 +89,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'close'])
 
 const isOpen: WritableComputedRef<boolean> = computed({
   get () {
@@ -129,6 +129,11 @@ const slideoverTransition = computed(() => {
     ...props.transitionClass
   }
 })
+
+function close (value: boolean) {
+  isOpen.value = value
+  emit('close')
+}
 </script>
 
 <script lang="ts">

src/runtime/presets/default.ts

@@ -26,6 +26,14 @@ export default function defaultPreset (variantColors: string[]) {
       lg: 'p-2',
       xl: 'p-3'
     },
+    compact: {
+      xxs: 'p-1 sm:px-2',
+      xs: 'p-1.5 sm:px-2.5',
+      sm: 'p-2 sm:px-3',
+      md: 'p-2 sm:px-4',
+      lg: 'p-2 sm:px-4',
+      xl: 'p-3 sm:px-6'
+    },
     variant: {
       ...variantColors.reduce((acc: any, color: string) => {
         acc[color] = `shadow-sm border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 disabled:bg-${color}-600 focus:ring-2 focus:ring-offset-2 focus:ring-${color}-500`
@@ -57,6 +65,14 @@ export default function defaultPreset (variantColors: string[]) {
           md: '-ml-1 mr-2',
           lg: '-ml-1 mr-3',
           xl: '-ml-1 mr-3'
+        },
+        compactSpacing: {
+          xxs: 'sm:-ml-0.5 sm:mr-1',
+          xs: 'sm:-ml-0.5 sm:mr-1.5',
+          sm: 'sm:-ml-0.5 sm:mr-2',
+          md: 'sm:-ml-1 sm:mr-2',
+          lg: 'sm:-ml-1 sm:mr-3',
+          xl: 'sm:-ml-1 sm:mr-3'
         }
       },
       trailing: {
@@ -67,6 +83,14 @@ export default function defaultPreset (variantColors: string[]) {
           md: 'ml-2 -mr-1',
           lg: 'ml-3 -mr-1',
           xl: 'ml-3 -mr-1'
+        },
+        compactSpacing: {
+          xxs: 'sm:ml-1 sm:-mr-0.5',
+          xs: 'sm:ml-1.5 sm:-mr-0.5',
+          sm: 'sm:ml-2 sm:-mr-0.5',
+          md: 'sm:ml-2 sm:-mr-1',
+          lg: 'sm:ml-3 sm:-mr-1',
+          xl: 'sm:ml-3 sm:-mr-1'
         }
       }
     }