vueless 0.0.399 → 0.0.400

package/package.json

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

package/ui.data-table/UTable.vue

@@ -201,6 +201,9 @@
               >
                 <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" />
               </template>
+              <template #nested-content>
+                <slot v-if="row" name="nested-content" :row="row" />
+              </template>
             </UTableRow>
 
             <tr

package/ui.data-table/UTableRow.vue

@@ -18,19 +18,19 @@
       :class="cx([getCellAttrs(key, row, index).class, columns[index].tdClass])"
     >
       <div
-        v-if="(row.row || nestedLevel) && index === 0"
+        v-if="(row.row || nestedLevel || row.nestedData) && index === 0"
         :style="getNestedShift()"
         v-bind="bodyCellNestedAttrs"
       >
         <UIcon
-          v-if="row.row"
+          v-if="row.row || (row.nestedData && hasSlotContent($slots['nested-content']))"
           size="xs"
           internal
           interactive
-          :name="row?.row?.isHidden ? config.defaults.expandIcon : config.defaults.collapseIcon"
+          :name="getToggleIconName(row)"
           color="brand"
           v-bind="toggleIconConfig"
-          @click="onClickToggleRowChild(row.row.id)"
+          @click="onClickToggleRowChild(row.row?.id || row.id)"
         />
       </div>
 
@@ -66,8 +66,20 @@
     </td>
   </tr>
 
+  <template
+    v-if="row.nestedData && !row.nestedData.isHidden && hasSlotContent($slots['nested-content'])"
+  >
+    <tr>
+      <td :colspan="columns.length + (selectable ? 1 : 0)">
+        <div :style="getNestedShift()">
+          <slot name="nested-content" :row="row" />
+        </div>
+      </td>
+    </tr>
+  </template>
+
   <UTableRow
-    v-if="row.row && !row.row.isHidden"
+    v-if="row.row && !row.row.isHidden && !row.nestedData"
     v-bind="$attrs"
     v-model:selected-rows="selectedRows"
     :attrs="attrs"
@@ -85,6 +97,7 @@
 <script setup>
 import { computed, onMounted, ref } from "vue";
 import { cx } from "../utils/utilUI.js";
+import useUI from "../composables/useUI.js";
 
 import { HYPHEN_SYMBOL } from "../constants.js";
 import { getFilteredRow } from "./utilTable.js";
@@ -94,6 +107,8 @@ import { useMutationObserver } from "../composables/useMutationObserver.js";
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 
+const { hasSlotContent } = useUI();
+
 const props = defineProps({
   row: {
     type: Object,
@@ -163,12 +178,18 @@ const toggleIconConfig = computed(() =>
 
 const shift = computed(() => (props.row.row ? 1.5 : 2));
 
+const getToggleIconName = computed(() => (row) => {
+  const isHidden = row.row?.isHidden || row.nestedData?.isHidden;
+
+  return isHidden ? props.config.defaults.expandIcon : props.config.defaults.collapseIcon;
+});
+
 onMounted(() => {
   cellRef.value.forEach(setElementTitle);
 });
 
 function getCellAttrs(key, row, cellIndex) {
-  const isNestedRow = (row.row || props.nestedLevel > 0) && cellIndex === 0;
+  const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
 
   return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;
 }
@@ -182,7 +203,9 @@ function getNestedCheckboxShift() {
 }
 
 function onClickToggleRowChild(rowId) {
-  emit("toggleRowVisibility", rowId);
+  if (props.row.row || props.row.nestedData) {
+    emit("toggleRowVisibility", rowId);
+  }
 }
 
 function onClick(row) {

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

@@ -177,7 +177,7 @@ const DefaultTemplate = (args) => ({
 
       if (typeof args.row === "function") {
         for (let i = 0; i < args.numberOfRows; i++) {
-          rows.push(args.row());
+          rows.push(args.row(i));
         }
       } else {
         rows.push(args.row);
@@ -206,6 +206,92 @@ Default.args = {};
 export const Nesting = DefaultTemplate.bind({});
 Nesting.args = { row: getNestedRow, selectable: true };
 
+export const NestedContent = DefaultTemplate.bind({});
+NestedContent.args = {
+  columns: [
+    { key: "key_1", label: "Title 1" },
+    { key: "key_2", label: "Title 2" },
+    { key: "key_3", label: "Title 3" },
+  ],
+  row: (index) => {
+    if (index === 0) {
+      return {
+        id: getRandomId(),
+        isChecked: false,
+        key_1: {
+          primary: "Row with nested content",
+          secondary: "Click to expand",
+        },
+        key_2: {
+          primary: "Primary content",
+          secondary: "Secondary content",
+        },
+        key_3: {
+          primary: "More info",
+          secondary: "Details below",
+        },
+        nestedData: {
+          isChecked: false,
+          isHidden: true,
+          rows: [
+            {
+              id: getRandomId(),
+              key_1: "Detail 1A",
+              key_2: "Info 1B",
+              key_3: "Data 1C",
+            },
+            {
+              id: getRandomId(),
+              key_1: "Detail 2A",
+              key_2: "Info 2B",
+              key_3: "Data 2C",
+            },
+            {
+              id: getRandomId(),
+              key_1: "Detail 3A",
+              key_2: "Info 3B",
+              key_3: "Data 3C",
+            },
+          ],
+        },
+      };
+    } else {
+      return {
+        id: getRandomId(),
+        isChecked: false,
+        key_1: {
+          primary: `Regular row ${index}`,
+          secondary: "No nested content",
+        },
+        key_2: {
+          primary: "Standard info",
+          secondary: "Nothing special",
+        },
+        key_3: {
+          primary: "Basic data",
+          secondary: "No details",
+        },
+      };
+    }
+  },
+  selectable: true,
+  slotTemplate: `
+    <template #nested-content="{ row }">
+      <div class="p-4 bg-gray-100">
+        <UTable
+          :columns="[
+            { key: 'key_1', label: 'Detail' },
+            { key: 'key_2', label: 'Info' },
+            { key: 'key_3', label: 'Data' },
+          ]"
+          :rows="row.nestedData.rows"
+          compact
+        />
+      </div>
+    </template>
+  `,
+};
+
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 

package/ui.data-table/utilTable.js

@@ -23,11 +23,23 @@ export function syncRowCheck(row, selectedRows) {
 }
 
 export function toggleRowVisibility(row, targetRowId) {
-  if (row.id === targetRowId) row.isHidden = !row.isHidden;
+  if (row.id === targetRowId) {
+    if ("isHidden" in row) {
+      row.isHidden = !row.isHidden;
+    } else if (row.nestedData && "isHidden" in row.nestedData) {
+      row.nestedData.isHidden = !row.nestedData.isHidden;
+    }
+
+    return;
+  }
 
   if (row.row) {
     toggleRowVisibility(row.row, targetRowId);
   }
+
+  if (row.nestedData) {
+    toggleRowVisibility(row.nestedData, targetRowId);
+  }
 }
 
 export function switchRowCheck(row, isChecked) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.399",
+  "version": "0.0.400",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8253,6 +8253,15 @@
                 }
               ]
             },
+            {
+              "name": "nested-content",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "row"
+                }
+              ]
+            },
             {
               "name": "after-last-row",
               "description": "Use it to add something after last row."
@@ -8370,6 +8379,15 @@
                   "name": "row"
                 }
               ]
+            },
+            {
+              "name": "nested-content",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "row"
+                }
+              ]
             }
           ],
           "source": {