vueless 0.0.541 → 0.0.543

package/package.json

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

package/ui.data-table/UTable.vue

@@ -91,6 +91,8 @@ const footerRowRef = useTemplateRef<HTMLTableRowElement>("footer-row");
 const tableWrapperRef = useTemplateRef<HTMLDivElement>("table-wrapper");
 const stickyFooterRowRef = useTemplateRef<HTMLTableRowElement>("sticky-footer-row");
 const stickyHeaderRowRef = useTemplateRef<HTMLDivElement>("sticky-header-row");
+const stickyActionHeaderRowRef = useTemplateRef<HTMLDivElement>("sticky-action-header-row");
+const actionHeaderRowRef = useTemplateRef<HTMLDivElement>("action-header-row");
 
 const i18nGlobal = tm(UTable);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
@@ -326,10 +328,21 @@ function setFooterCellWidth(zero?: null) {
 }
 
 function setHeaderCellWidth() {
-  if (selectedRows.value.length || !footerRowRef.value || !stickyFooterRowRef.value) return;
+  if (
+    !headerRowRef.value ||
+    !stickyHeaderRowRef.value ||
+    !stickyActionHeaderRowRef.value ||
+    !actionHeaderRowRef.value
+  ) {
+    return;
+  }
 
-  const mainHeaderItems = [...(headerRowRef.value?.children || [])] as HTMLElement[];
-  const stickyHeaderItems = [...(stickyHeaderRowRef.value?.children || [])] as HTMLDivElement[];
+  const mainHeaderItems = [...headerRowRef.value.children] as HTMLElement[];
+  const stickyHeaderItems = [
+    ...stickyHeaderRowRef.value.children,
+    ...stickyActionHeaderRowRef.value.children,
+    ...actionHeaderRowRef.value.children,
+  ] as HTMLElement[];
 
   stickyHeaderItems.forEach((item, index) => {
     item.style.width = `${mainHeaderItems[index]?.offsetWidth / PX_IN_REM}rem`;
@@ -486,7 +499,7 @@ defineExpose({
 
     <div
       v-show="isShownActionsHeader && isHeaderSticky"
-      ref="sticky-header-row"
+      ref="sticky-action-header-row"
       :style="tableRowWidthStyle"
       v-bind="stickyHeaderAttrs"
     >
@@ -518,7 +531,7 @@ defineExpose({
 
     <div
       v-show="isShownActionsHeader && !isHeaderSticky"
-      ref="sticky-header-row"
+      ref="action-header-row"
       :style="tableRowWidthStyle"
       v-bind="stickyHeaderAttrs"
       class="absolute"

package/ui.dropdown-list/UDropdownList.vue

@@ -80,7 +80,7 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
-const wrapperHeight = computed(() => {
+const wrapperMaxHeight = computed(() => {
   if (!optionsRef.value?.length) return "auto";
 
   const maxHeight = optionsRef.value
@@ -88,7 +88,7 @@ const wrapperHeight = computed(() => {
     .map((el) => el.getBoundingClientRect().height)
     .reduce((acc, cur) => acc + cur, 0);
 
-  return props.visibleOptions === undefined ? "auto" : `${maxHeight + 10}px`;
+  return !props.visibleOptions ? "auto" : `${maxHeight + 10}px`;
 });
 
 function onClickAddOption() {
@@ -202,7 +202,7 @@ defineExpose({
   <div
     ref="wrapper"
     tabindex="1"
-    :style="{ maxHeight: wrapperHeight }"
+    :style="{ maxHeight: wrapperMaxHeight }"
     v-bind="wrapperAttrs"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
@@ -267,21 +267,30 @@ defineExpose({
         </template>
       </li>
 
-      <div v-if="!options.length" v-bind="optionAttrs">
+      <li
+        v-if="!options.length"
+        ref="option"
+        v-bind="optionAttrs"
+        @mouseenter.self="pointerSet(options.length + 1)"
+      >
         <!-- @slot Use it to add something instead of empty state. -->
         <slot name="empty">
           <span v-bind="optionContentAttrs" v-text="currentLocale.noDataToShow" />
         </slot>
-      </div>
+      </li>
 
       <!-- Add button -->
       <template v-if="addOption">
-        <div v-bind="addOptionLabelWrapperAttrs" @click="onClickAddOption">
-          <div v-bind="addOptionLabelAttrs">
+        <li
+          v-bind="addOptionLabelWrapperAttrs"
+          @click="onClickAddOption"
+          @mouseenter.self="pointerSet(options.length + 1)"
+        >
+          <span v-bind="addOptionLabelAttrs">
             {{ currentLocale.add }}
             <span v-bind="addOptionLabelHotkeyAttrs" v-text="addOptionKeyCombination" />
-          </div>
-        </div>
+          </span>
+        </li>
 
         <UButton round square v-bind="addOptionButtonAttrs" @click="onClickAddOption">
           <UIcon

package/ui.dropdown-list/config.ts

@@ -49,13 +49,10 @@ export default /*tw*/ {
       },
     },
   },
-  addOptionLabelWrapper: `
-    flex items-center justify-between cursor-pointer p-3 hover:bg-brand-50
-    active:bg-brand-100 active:font-medium -mb-6
-  `,
-  addOptionLabel: "text-sm font-medium text-gray-900",
+  addOptionLabelWrapper: "-mb-[1.375rem] active:bg-brand-100",
+  addOptionLabel: "text-sm leading-none font-medium text-gray-900",
   addOptionLabelHotkey: "text-gray-500",
-  addOptionButton: "{UButton} sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
+  addOptionButton: "{UButton} !leading-none sticky left-[calc(100%-2.15rem)] bottom-2 p-1",
   addOptionIcon: "{UIcon} bg-transparent",
   i18n: {
     noDataToShow: "No data to show.",
@@ -65,7 +62,6 @@ export default /*tw*/ {
     size: "md",
     labelKey: "label",
     valueKey: "id",
-    optionHeight: 40,
     visibleOptions: undefined,
     disabled: false,
     addOption: false,

package/ui.dropdown-list/useAttrs.ts

@@ -16,6 +16,9 @@ export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
   const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
   const keysAttrs = getKeysAttrs({}, [], {
+    addOptionLabelWrapper: {
+      base: computed(() => [extendingKeysClasses.option.value]),
+    },
     group: {
       base: computed(() => [extendingKeysClasses.option.value]),
     },

package/web-types.json

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