vueless 0.0.543 → 0.0.544

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.543",
+  "version": "0.0.544",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.dropdown-list/UDropdownList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId, useTemplateRef } from "vue";
+import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -49,6 +49,10 @@ const emit = defineEmits([
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const optionsRef = useTemplateRef<HTMLLIElement[]>("option");
+const emptyOptionRef = useTemplateRef<HTMLLIElement>("empty-option");
+const addOptionRef = useTemplateRef<HTMLLIElement>("add-option");
+
+const wrapperMaxHeight = ref("");
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
   usePointer(props.options, optionsRef, wrapperRef);
@@ -80,16 +84,30 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
-const wrapperMaxHeight = computed(() => {
-  if (!optionsRef.value?.length) return "auto";
-
-  const maxHeight = optionsRef.value
-    .slice(0, props.visibleOptions)
-    .map((el) => el.getBoundingClientRect().height)
-    .reduce((acc, cur) => acc + cur, 0);
-
-  return !props.visibleOptions ? "auto" : `${maxHeight + 10}px`;
-});
+watch(
+  () => props.options,
+  () => {
+    nextTick(() => {
+      const options = [
+        ...(optionsRef.value || []),
+        ...(addOptionRef.value ? [addOptionRef.value] : []),
+        ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
+      ];
+
+      if (props.visibleOptions) {
+        options.slice(0, props.visibleOptions);
+      }
+
+      const maxHeight = options
+        .slice(0, props.visibleOptions)
+        .map((el) => el.getBoundingClientRect().height)
+        .reduce((acc, cur) => acc + cur, 0);
+
+      wrapperMaxHeight.value = `${maxHeight + 10}px`;
+    });
+  },
+  { immediate: true },
+);
 
 function onClickAddOption() {
   emit("add");
@@ -269,9 +287,10 @@ defineExpose({
 
       <li
         v-if="!options.length"
-        ref="option"
+        :id="`${elementId}-empty`"
+        ref="empty-option"
+        role="option"
         v-bind="optionAttrs"
-        @mouseenter.self="pointerSet(options.length + 1)"
       >
         <!-- @slot Use it to add something instead of empty state. -->
         <slot name="empty">
@@ -282,6 +301,9 @@ defineExpose({
       <!-- Add button -->
       <template v-if="addOption">
         <li
+          :id="`${elementId}-addOption`"
+          ref="add-option"
+          role="option"
           v-bind="addOptionLabelWrapperAttrs"
           @click="onClickAddOption"
           @mouseenter.self="pointerSet(options.length + 1)"

package/ui.dropdown-list/config.ts

@@ -5,13 +5,13 @@ export default /*tw*/ {
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,
-  list: "m-1 inline-block list-none align-top w-full p-0 bg-white opacity-1 hover:transition",
+  list: "m-1 p-0 inline-block list-none align-top w-full",
   listItem: "group/item block",
   option: {
     base: `
       rounded px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none normal-case text-gray-900
-      hover:bg-brand-50
+      hover:bg-brand-50 active:bg-brand-100
       overflow-hidden text-ellipsis
     `,
     variants: {
@@ -50,7 +50,7 @@ export default /*tw*/ {
     },
   },
   addOptionLabelWrapper: "-mb-[1.375rem] active:bg-brand-100",
-  addOptionLabel: "text-sm leading-none font-medium text-gray-900",
+  addOptionLabel: "leading-none font-medium",
   addOptionLabelHotkey: "text-gray-500",
   addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",
   addOptionIcon: "{UIcon} bg-transparent",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.543",
+  "version": "0.0.544",
   "contributions": {
     "html": {
       "description-markup": "markdown",