vueless 0.0.399 → 0.0.401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.399",
+  "version": "0.0.401",
   "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/ui.loader/ULoader.vue

@@ -20,7 +20,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set loader on.
+   * Loader state (shown / hidden).
    */
   loading: {
     type: Boolean,

package/ui.loader/useAttrs.js

@@ -4,7 +4,11 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+    "loader",
+  );
 
   const keysAttrs = getKeysAttrs({}, [], {
     ellipse: {

package/ui.loader-rendering/ULoaderRendering.vue

@@ -1,12 +1,15 @@
 <template>
   <Transition v-bind="config.transition">
-    <div v-if="showLoader" v-bind="wrapperAttrs">
-      <ULoader
-        :loading="showLoader"
-        size="lg"
-        :color="color === 'white' ? 'grayscale' : 'white'"
-        v-bind="loaderAttrs"
-      />
+    <div v-if="showLoader" v-bind="overlayAttrs">
+      <!-- @slot Use it to add something instead of the default loader. -->
+      <slot>
+        <ULoader
+          :loading="showLoader"
+          size="lg"
+          :color="color === 'white' ? 'grayscale' : 'white'"
+          v-bind="nestedLoaderAttrs"
+        />
+      </slot>
     </div>
   </Transition>
 </template>
@@ -26,7 +29,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set loader on.
+   * Loader state (shown / hidden).
    */
   loading: {
     type: Boolean,
@@ -43,7 +46,7 @@ const props = defineProps({
   },
 });
 
-const { wrapperAttrs, loaderAttrs, config } = useAttrs(props);
+const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
 const { isLoading, loaderRenderingOn, loaderRenderingOff } = useLoaderRendering();
 
 onMounted(() => {

package/ui.loader-rendering/config.js

@@ -1,5 +1,9 @@
 export default /*tw*/ {
-  wrapper: {
+  transition: {
+    enterFromClass: "scale-110 transform",
+    leaveActiveClass: "scale-110 transform",
+  },
+  overlay: {
     base: `
       bg-{color}-600
       h-screen w-screen
@@ -14,11 +18,7 @@ export default /*tw*/ {
       },
     },
   },
-  loader: "{ULoader}",
-  transition: {
-    enterFromClass: "scale-110 transform",
-    leaveActiveClass: "scale-110 transform",
-  },
+  nestedLoader: "{ULoader}",
   defaults: {
     color: "brand",
     loading: undefined,

package/ui.loader-rendering/useAttrs.js

@@ -3,7 +3,11 @@ import useUI from "../composables/useUI.js";
 import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+    "overlay",
+  );
 
   const keysAttrs = getKeysAttrs();
 

package/ui.loader-top/ULoaderTop.vue

@@ -1,6 +1,6 @@
 <template>
   <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-    <div v-if="show" v-bind="progressAttrs" :style="barStyle" />
+    <div v-if="show" v-bind="stripeAttrs" :style="barStyle" />
   </Transition>
 </template>
 
@@ -20,7 +20,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * The color of the loader stripe.
+   * Loader stripe color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
    */
   color: {
@@ -44,7 +44,7 @@ const opacity = ref(1);
 const status = ref(null);
 
 const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
-const { progressAttrs } = useAttrs(props, { error, isMobileApp });
+const { stripeAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
   return typeof status.value === "number";

package/ui.loader-top/config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  progress: {
+  stripe: {
     base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-600",
     variants: {
       color: {
@@ -11,7 +11,6 @@ export default /*tw*/ {
       },
     },
   },
-  progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
   defaults: {
     color: "brand",
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.399",
+  "version": "0.0.401",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5825,7 +5825,7 @@
           "attributes": [
             {
               "name": "loading",
-              "description": "Set loader on.",
+              "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5868,7 +5868,7 @@
           "attributes": [
             {
               "name": "loading",
-              "description": "Set loader on.",
+              "description": "Loader state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5884,6 +5884,12 @@
               "default": "brand"
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Use it to add something instead of the default loader."
+            }
+          ],
           "source": {
             "module": "./src/ui.loader-rendering/ULoaderRendering.vue",
             "symbol": "default"
@@ -5895,7 +5901,7 @@
           "attributes": [
             {
               "name": "color",
-              "description": "The color of the loader stripe.",
+              "description": "Loader stripe color.",
               "value": {
                 "kind": "expression",
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
@@ -8253,6 +8259,15 @@
                 }
               ]
             },
+            {
+              "name": "nested-content",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "row"
+                }
+              ]
+            },
             {
               "name": "after-last-row",
               "description": "Use it to add something after last row."
@@ -8370,6 +8385,15 @@
                   "name": "row"
                 }
               ]
+            },
+            {
+              "name": "nested-content",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "row"
+                }
+              ]
             }
           ],
           "source": {