vueless 0.0.453 → 0.0.455

package/package.json

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

package/ui.data-table/UTable.vue

@@ -2,7 +2,7 @@
   <div :data-test="dataTest" v-bind="wrapperAttrs">
     <div
       v-show="isHeaderSticky || isShownActionsHeader"
-      ref="stickyHeaderRowRef"
+      ref="sticky-header-row"
       :style="tableRowWidthStyle"
       v-bind="stickyHeaderAttrs"
     >
@@ -82,7 +82,7 @@
       />
     </div>
 
-    <div ref="tableWrapperRef" v-bind="tableWrapperAttrs">
+    <div ref="table-wrapper" v-bind="tableWrapperAttrs">
       <table v-bind="tableAttrs">
         <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs">
@@ -101,7 +101,7 @@
 
           <tr v-if="hasSlotContent($slots['before-header'])" v-bind="headerRowAttrs"></tr>
 
-          <tr ref="headerRowRef" v-bind="headerRowAttrs">
+          <tr ref="header-row" v-bind="headerRowAttrs">
             <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
                 v-model="selectAll"
@@ -241,7 +241,7 @@
         </tbody>
 
         <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerAttrs">
-          <tr ref="footerRowRef" v-bind="footerRowAttrs">
+          <tr ref="footer-row" v-bind="footerRowAttrs">
             <td v-if="selectable" />
 
             <!--
@@ -251,7 +251,7 @@
             <slot name="footer" :cols-count="colsCount" />
           </tr>
 
-          <tr ref="stickyFooterRowRef" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
+          <tr ref="sticky-footer-row" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
             <td v-if="selectable" />
 
             <!--
@@ -277,6 +277,7 @@ import {
   onMounted,
   onUpdated,
   onBeforeUnmount,
+  useTemplateRef,
 } from "vue";
 import { merge } from "lodash-es";
 
@@ -422,11 +423,11 @@ const tableWidth = ref(0);
 const tableHeight = ref(0);
 const pagePositionY = ref(0);
 
-const headerRowRef = ref(null);
-const footerRowRef = ref(null);
-const tableWrapperRef = ref(null);
-const stickyFooterRowRef = ref(null);
-const stickyHeaderRowRef = ref(null);
+const headerRowRef = useTemplateRef("header-row");
+const footerRowRef = useTemplateRef("footer-row");
+const tableWrapperRef = useTemplateRef("table-wrapper");
+const stickyFooterRowRef = useTemplateRef("sticky-footer-row");
+const stickyHeaderRowRef = useTemplateRef("sticky-header-row");
 
 const i18nGlobal = tm(UTable);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));

package/ui.data-table/UTableRow.vue

@@ -31,21 +31,27 @@
         :style="getNestedShift()"
         v-bind="bodyCellNestedAttrs"
       >
-        <UIcon
-          v-if="isShownToggleIcon"
-          size="xs"
-          internal
-          interactive
-          :name="getToggleIconName(row)"
-          color="brand"
-          v-bind="toggleIconConfig"
-          @click.stop="onClickToggleIcon"
-        />
-
+        <div
+          ref="toggle-wrapper"
+          v-bind="bodyCellNestedExpandIconWrapperAttrs"
+          :style="{ width: getIconWidth() }"
+        >
+          <UIcon
+            v-if="isShownToggleIcon"
+            size="xs"
+            internal
+            interactive
+            :data-row-toggle-icon="row.id"
+            :name="getToggleIconName(row)"
+            color="brand"
+            v-bind="toggleIconConfig"
+            @click.stop="onClickToggleIcon"
+          />
+        </div>
         <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
           <div
             v-bind="bodyCellContentAttrs"
-            ref="cellRef"
+            ref="cell"
             :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
             :data-test="`${dataTest}-${key}-cell`"
           >
@@ -58,7 +64,7 @@
         <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
           <div
             v-bind="bodyCellContentAttrs"
-            ref="cellRef"
+            ref="cell"
             :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
             :data-test="`${dataTest}-${key}-cell`"
           >
@@ -147,11 +153,11 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, useSlots } from "vue";
+import { computed, onMounted, useSlots, useTemplateRef } from "vue";
 import { cx } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.js";
 
-import { HYPHEN_SYMBOL } from "../constants.js";
+import { HYPHEN_SYMBOL, PX_IN_REM } from "../constants.js";
 import { getFilteredRow } from "./utilTable.js";
 
 import { useMutationObserver } from "../composables/useMutationObserver.js";
@@ -207,7 +213,8 @@ const emit = defineEmits(["toggleRowVisibility", "click", "click-cell"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
-const cellRef = ref([]);
+const cellRef = useTemplateRef("cell");
+const toggleWrapperRef = useTemplateRef("toggle-wrapper");
 const slots = useSlots();
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
@@ -220,6 +227,7 @@ const {
   bodyCellNestedExpandIconAttrs,
   bodyCellNestedCollapseIconAttrs,
   bodyCellBaseAttrs,
+  bodyCellNestedExpandIconWrapperAttrs,
 } = props.attrs;
 
 const toggleIconConfig = computed(() =>
@@ -251,7 +259,13 @@ const isShownToggleIcon = computed(() => {
   );
 });
 
-const getToggleIconName = computed(() => (row) => {
+onMounted(() => {
+  if (cellRef.value) {
+    cellRef.value.forEach(setElementTitle);
+  }
+});
+
+function getToggleIconName(row) {
   const isHiddenNestedRow = Array.isArray(row.row)
     ? row.row.some((nestedRow) => nestedRow.isHidden)
     : row.row?.isHidden;
@@ -259,11 +273,18 @@ const getToggleIconName = computed(() => (row) => {
   const isHidden = isHiddenNestedRow || row.nestedData?.isHidden;
 
   return isHidden ? props.config.defaults.expandIcon : props.config.defaults.collapseIcon;
-});
+}
 
-onMounted(() => {
-  cellRef.value.forEach(setElementTitle);
-});
+function getIconWidth() {
+  const icon = document.querySelector(`[data-row-toggle-icon='${props.row.id}']`);
+  const currentWrapperWidth = toggleWrapperRef.value?.at(0)?.getBoundingClientRect()?.width;
+
+  if (icon) {
+    return `${icon.getBoundingClientRect().width / PX_IN_REM}rem`;
+  }
+
+  return `${currentWrapperWidth / PX_IN_REM || 1}rem`;
+}
 
 function getCellClasses(row, key) {
   const cellClasses = row[key]?.class || "";

package/ui.data-table/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "relative",
+  wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-sm text-gray-900",
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
@@ -18,7 +18,7 @@ export default /*tw*/ {
   stickyHeaderActionsCheckbox: "{UCheckbox}",
   stickyHeaderActionsCounter: "-ml-2",
   tableWrapper: "border border-gray-200 rounded-dynamic bg-white",
-  table: "min-w-full border-none text-sm w-full table-fixed",
+  table: "min-w-full border-none text-sm w-full table-auto",
   header: "border-b border-gray-200",
   headerRow: "",
   headerCellBase: {
@@ -60,6 +60,7 @@ export default /*tw*/ {
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
   bodyCellNested: "mr-2 flex gap-0.5",
+  bodyCellNestedExpandIconWrapper: "",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
     wrapper: "rounded-sm",

package/ui.data-table/storybook/stories.js

@@ -228,7 +228,6 @@ NestedContent.args = {
       };
     }
   },
-  selectable: true,
   slotTemplate: `
     <template #nested-content="{ row }">
       <div class="p-4 bg-gray-100">

package/web-types.json

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