vueless 0.0.432 → 0.0.434

package/package.json

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

package/ui.data-table/UTable.vue

@@ -297,6 +297,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
+  rowsHasId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -563,6 +564,16 @@ watch(
     tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
   },
 );
+watch(
+  () => props.rows,
+  () => {
+    if (!rowsHasId(props.rows)) {
+      // eslint-disable-next-line no-console
+      console.warn("[Vueless][UTable]: Each table row must have unique id.");
+    }
+  },
+  { deep: true, immediate: true },
+);
 
 onMounted(() => {
   tableRows.value = props.rows;

package/ui.data-table/UTableRow.vue

@@ -18,10 +18,8 @@
     <td
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
-      v-bind="getCellAttrs(row, index)"
-      :class="
-        cx([getCellAttrs(row, index).class, columns[index].tdClass, getCellClasses(row, key)])
-      "
+      v-bind="bodyCellBaseAttrs"
+      :class="cx([columns[index].tdClass, getCellClasses(row, key)])"
     >
       <div
         v-if="(row.row || nestedLevel || row.nestedData) && index === 0"
@@ -36,20 +34,33 @@
           :name="getToggleIconName(row)"
           color="brand"
           v-bind="toggleIconConfig"
-          @click="onClickToggleIcon"
+          @click.stop="onClickToggleIcon"
         />
+
+        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
+          <div
+            v-bind="bodyCellContentAttrs"
+            ref="cellRef"
+            :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
+            {{ value.value || value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
       </div>
 
-      <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
-        <div
-          v-bind="bodyCellContentAttrs"
-          ref="cellRef"
-          :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
-          :data-test="`${dataTest}-${key}-cell`"
-        >
-          {{ value.value || value || HYPHEN_SYMBOL }}
-        </div>
-      </slot>
+      <template v-else>
+        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
+          <div
+            v-bind="bodyCellContentAttrs"
+            ref="cellRef"
+            :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
+            {{ value.value || value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
+      </template>
     </td>
   </tr>
 
@@ -78,7 +89,15 @@
     :selectable="selectable"
     @toggle-row-visibility="onClickToggleRowChild"
     @click="onClick"
-  />
+  >
+    <template
+      v-for="(value, key, index) in getFilteredRow(row.row, columns)"
+      :key="index"
+      #[`cell-${key}`]="slotValues"
+    >
+      <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" :index="index" />
+    </template>
+  </UTableRow>
 
   <template v-if="!isSingleNestedRow && row.row.length && !row.nestedData">
     <template v-for="nestedRow in row.row" :key="nestedRow.id">
@@ -95,7 +114,20 @@
         :selectable="selectable"
         @toggle-row-visibility="onClickToggleRowChild"
         @click="onClick"
-      />
+      >
+        <template
+          v-for="(value, key, index) in getFilteredRow(nestedRow, columns)"
+          :key="index"
+          #[`cell-${key}`]="slotValues"
+        >
+          <slot
+            :name="`cell-${key}`"
+            :value="slotValues.value"
+            :row="slotValues.row"
+            :index="index"
+          />
+        </template>
+      </UTableRow>
     </template>
   </template>
 </template>
@@ -172,7 +204,6 @@ const {
   bodyCellNestedAttrs,
   bodyCellNestedExpandIconAttrs,
   bodyCellNestedCollapseIconAttrs,
-  bodyCellNestedRowAttrs,
   bodyCellBaseAttrs,
 } = props.attrs;
 
@@ -206,12 +237,6 @@ function getCellContentClasses(row, key) {
   return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
 }
 
-function getCellAttrs(row, cellIndex) {
-  const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
-
-  return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;
-}
-
 function getNestedShift() {
   return { marginLeft: `${props.nestedLevel * shift.value}rem` };
 }
@@ -255,6 +280,12 @@ function setElementTitle(element) {
 }
 
 function onClickToggleIcon() {
+  if (props.row.nestedData) {
+    onClickToggleRowChild(props.row.id);
+
+    return;
+  }
+
   if (isSingleNestedRow.value) {
     onClickToggleRowChild(props.row.row.id);
 

package/ui.data-table/config.js

@@ -56,11 +56,10 @@ export default /*tw*/ {
       },
     },
   },
-  bodyCellNestedRow: "flex",
   bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
-  bodyCellNested: "mr-2 mt-0.5",
+  bodyCellNested: "mr-2 flex gap-0.5",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
     wrapper: "rounded-sm",

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

@@ -406,6 +406,7 @@ CellSlots.args = {
     { key: "tags", label: "tags" },
   ],
   row: {
+    id: getRandomId(),
     link: "some link",
     money: {
       sum: 10,
@@ -416,6 +417,36 @@ CellSlots.args = {
       tags: { label: "some tag" },
       variant: "orange",
     },
+    row: [
+      {
+        id: getRandomId(),
+        isHidden: false,
+        link: "some link",
+        money: {
+          sum: 10,
+          currencySymbol: "$",
+        },
+        email: "some@email.ua",
+        tags: {
+          tags: { label: "some tag" },
+          variant: "orange",
+        },
+      },
+      {
+        id: getRandomId(),
+        isHidden: false,
+        link: "some link",
+        money: {
+          sum: 10,
+          currencySymbol: "$",
+        },
+        email: "some@email.ua",
+        tags: {
+          tags: { label: "some tag" },
+          variant: "orange",
+        },
+      },
+    ],
   },
 
   slotTemplate: `

package/ui.data-table/useAttrs.js

@@ -52,9 +52,6 @@ export default function useAttrs(
     headerCellCheckbox: {
       base: computed(() => [extendingKeysClasses.headerCellBase.value]),
     },
-    bodyCellNestedRow: {
-      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
-    },
     bodyCellCheckbox: {
       base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
     },

package/ui.data-table/utilTable.js

@@ -60,12 +60,41 @@ export function getFlatRows(tableRows) {
   function addRow(row) {
     rows.push(row);
 
-    if (row.row) {
+    if (row.row && !Array.isArray(row.row)) {
       addRow(row.row);
     }
+
+    if (row.row && Array.isArray(row.row)) {
+      row.row.forEach(addRow);
+    }
   }
 
   tableRows.forEach((row) => addRow(row));
 
   return rows;
 }
+
+export function rowsHasId(rows) {
+  const ids = new Set();
+  let totalRows = 0;
+
+  function addId(row) {
+    totalRows++;
+
+    if (typeof row.id !== "undefined") {
+      ids.add(row.id);
+    }
+
+    if (row.row && !Array.isArray(row.row)) {
+      addId(row.row);
+    }
+
+    if (row.row && Array.isArray(row.row)) {
+      row.row.forEach(addId);
+    }
+  }
+
+  rows.forEach((row) => addId(row));
+
+  return ids.size === totalRows;
+}

package/ui.form-date-picker/UDatePicker.vue

@@ -234,7 +234,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: getDefault(defaultConfig, UDatePicker).calendarIcon,
+    default: getDefault(defaultConfig, UDatePicker).rightIcon,
   },
 
   /**

package/ui.form-date-picker/config.js

@@ -123,7 +123,6 @@ export default /*tw*/ {
     dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
-    /* icons */
-    calendarIcon: "calendar_month-fill",
+    rightIcon: "calendar_month-fill",
   },
 };

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -7,6 +7,7 @@
       v-model="userFormatDate"
       :size="size"
       :label="label"
+      :label-align="labelAlign"
       :disabled="disabled"
       :placeholder="placeholder"
       :description="description"
@@ -300,7 +301,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: getDefault(defaultConfig, UDatePickerRange).calendarIcon,
+    default: getDefault(defaultConfig, UDatePickerRange).rightIcon,
   },
 
   /**
@@ -311,6 +312,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Label placement.
+   * @values top, topInside, topWithDesc, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: getDefault(defaultConfig, UDatePickerRange).labelAlign,
+  },
+
   /**
    * Input placeholder for an input type.
    */

package/ui.form-date-picker-range/config.js

@@ -187,6 +187,7 @@ export default /*tw*/ {
   defaults: {
     size: "md",
     variant: "button",
+    labelAlign: "topInside",
     openDirectionX: "auto",
     openDirectionY: "auto",
     timepicker: false,
@@ -194,10 +195,10 @@ export default /*tw*/ {
     dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    rightIcon: "calendar_month-fill",
     /* icons */
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
     ownRangeIcon: "apps",
-    calendarIcon: "calendar_month-fill",
   },
 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.432",
+  "version": "0.0.434",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2484,7 +2484,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "getDefault(defaultConfig, UDatePicker).calendarIcon"
+              "default": "calendar_month-fill"
             },
             {
               "name": "disabled",
@@ -2708,7 +2708,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "getDefault(defaultConfig, UDatePickerRange).calendarIcon"
+              "default": "calendar_month-fill"
             },
             {
               "name": "label",
@@ -2719,6 +2719,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
+              },
+              "default": "topInside"
+            },
             {
               "name": "placeholder",
               "description": "Input placeholder for an input type.",