vueless 0.0.175 → 0.0.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.32",
+    "@vueless/plugin-vite": "^0.0.34",
     "@vueless/storybook": "^0.0.32",
     "@vueless/web-types": "^0.0.12",
     "autoprefixer": "^10.4.19",

package/ui.data-table/components/TableRow.vue

@@ -0,0 +1,170 @@
+<template>
+  <tr v-bind="$attrs" @click="onClick(props.row)">
+    <td
+      v-if="selectable"
+      :style="getNestedCheckboxShift()"
+      v-bind="attrs.bodyCellAttrs(config.bodyCellCheckbox)"
+    >
+      <UCheckbox
+        v-model="selectedRows"
+        :data-id="row.id"
+        :value="row.id"
+        size="sm"
+        :data-cy="`${dataCy}-body-checkbox`"
+        v-bind="attrs.bodyCheckboxAttrs"
+        @click.stop
+      />
+    </td>
+
+    <td
+      v-for="(value, key, index) in getFilteredRow(row, columns)"
+      :key="index"
+      v-bind="attrs.bodyCellAttrs(getCellClasses(key, row, index))"
+    >
+      <div
+        v-if="(row.row || nestedLevel) && index === 0"
+        :style="getNestedShift()"
+        v-bind="attrs.bodyCellNestedAttrs"
+      >
+        <UIcon
+          v-if="row.row"
+          size="xs"
+          internal
+          interactive
+          :name="
+            row?.row?.isHidden
+              ? config.bodyCellNestedExpandIconName
+              : config.bodyCellNestedCollapseIconName
+          "
+          color="brand"
+          v-bind="toggleIconConfig"
+          @click="onClickToggleRowChild(row.row.id)"
+        />
+      </div>
+
+      <div v-if="value?.hasOwnProperty('secondary')">
+        <slot :name="`cell-${key}`" :value="value" :row="row">
+          <div :data-cy="`${dataCy}-${key}-cell`">
+            {{ value.primary || HYPHEN_SYMBOL }}
+          </div>
+
+          <div v-bind="attrs.bodyCellSecondaryAttrs">
+            <template v-if="Array.isArray(value.secondary)">
+              <div v-for="(secondary, idx) in value.secondary" :key="idx">
+                <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
+                  {{ secondary }}
+                </span>
+              </div>
+            </template>
+
+            <template v-else>
+              {{ value.secondary }}
+            </template>
+          </div>
+        </slot>
+      </div>
+
+      <template v-else>
+        <slot :name="`cell-${key}`" :value="value" :row="row">
+          <div :data-cy="`${dataCy}-${key}-cell`">
+            {{ value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
+      </template>
+    </td>
+  </tr>
+
+  <TableRow
+    v-if="row.row && !row.row.isHidden"
+    v-bind="$attrs"
+    v-model:selected-rows="selectedRows"
+    :attrs="attrs"
+    :columns="columns"
+    :row="row.row"
+    :data-cy="dataCy"
+    :nested-level="nestedLevel + 1"
+    :config="config"
+    :selectable="selectable"
+    @toggle-row-visibility="onClickToggleRowChild"
+    @click="onClick"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { HYPHEN_SYMBOL } from "../../service.ui";
+import { getFilteredRow } from "../services/table.service.js";
+
+import UIcon from "../../ui.image-icon";
+import UCheckbox from "../../ui.form-checkbox";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  tag: {
+    type: String,
+    default: "tr",
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  nestedLevel: {
+    type: Number,
+    default: 0,
+  },
+  dataCy: {
+    type: String,
+    required: true,
+  },
+  attrs: {
+    type: Object,
+    required: true,
+  },
+  config: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["toggleRowVisibility", "click"]);
+
+const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
+
+const toggleIconConfig = computed(() =>
+  props.row?.row?.isHidden
+    ? props.attrs.bodyCellNestedExpandIconAttrs
+    : props.attrs.bodyCellNestedCollapseIconAttrs,
+);
+
+const shift = computed(() => (props.row.row ? 1.5 : 2));
+
+function getCellClasses(key, row, cellIndex) {
+  const isNestedRow = (row.row || props.nestedLevel) && cellIndex === 0;
+
+  return [props.columns.find((column) => column.key === key)?.tdClass, isNestedRow && "flex"];
+}
+
+function getNestedShift() {
+  return { marginLeft: `${props.nestedLevel * shift.value}rem` };
+}
+
+function getNestedCheckboxShift() {
+  return { transform: `translateX(${props.nestedLevel * shift.value}rem)` };
+}
+
+function onClickToggleRowChild(rowId) {
+  emit("toggleRowVisibility", rowId);
+}
+
+function onClick(row) {
+  emit("click", row);
+}
+</script>

package/ui.data-table/composables/attrs.composable.js

@@ -5,10 +5,18 @@ import { computed } from "vue";
 
 export function useAttrs(
   props,
-  { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
+  { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { stickyHeaderCell, headerCell, footerRow, bodyCell, headerCellGeneral } = config.value;
+  const {
+    stickyHeaderCell,
+    headerCell,
+    footerRow,
+    bodyCell,
+    headerCellGeneral,
+    stickyHeaderCounter,
+    headerCounter,
+  } = config.value;
 
   const cvaHeaderCellGeneral = cva({
     base: headerCellGeneral.base,
@@ -40,19 +48,37 @@ export function useAttrs(
     compoundVariants: bodyCell.compoundVariants,
   });
 
+  const cvaStickyHeaderCounter = cva({
+    base: stickyHeaderCounter.base,
+    variants: stickyHeaderCounter.variants,
+    compoundVariants: stickyHeaderCounter.compoundVariants,
+  });
+
+  const cvaHeaderCounter = cva({
+    base: headerCounter.base,
+    variants: headerCounter.variants,
+    compoundVariants: headerCounter.compoundVariants,
+  });
+
   const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
   const footerRowClasses = computed(() => cvaFooterRow({ compact: props.compact }));
   const bodyCellClasses = computed(() => cvaBodyCell({ compact: props.compact }));
   const headerCellGeneralClasses = computed(() => cvaHeaderCellGeneral({ compact: props.compact }));
+  const headerCounterClasses = computed(() => cvaHeaderCounter({ compact: props.compact }));
+  const stickyHeaderCounterClasses = computed(() =>
+    cvaStickyHeaderCounter({ compact: props.compact }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
   const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
     classes: stickyHeaderCellClasses,
   });
-  const headerCounterAttrsRaw = getAttrs("headerCounter");
-  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter");
+  const headerCounterAttrsRaw = getAttrs("headerCounter", { classes: headerCounterClasses });
+  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter", {
+    classes: stickyHeaderCounterClasses,
+  });
   const stickyHeaderActionsCounterAttrsRaw = getAttrs("stickyHeaderActionsCounter");
   const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
     isComponent: true,
@@ -88,7 +114,6 @@ export function useAttrs(
   const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
   const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
   const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
-  const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
@@ -195,11 +220,6 @@ export function useAttrs(
     return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
   };
 
-  const bodyCellNestedWrapperAttrs = computed(() => (index) => ({
-    ...bodyCellNestedWrapperAttrsRaw.value,
-    class: index === 0 && isNesting.value ? config.value.bodyCellNestedWrapper : "",
-  }));
-
   return {
     config,
     wrapperAttrs,
@@ -215,7 +235,6 @@ export function useAttrs(
     bodyRowBeforeAttrs,
     bodyRowBeforeCellAttrs,
     bodyRowDateSeparatorAttrs,
-    bodyCellNestedWrapperAttrs,
     bodyCellAttrs,
     stickyHeaderCounterAttrs,
     stickyHeaderActionsCounterAttrs,

package/ui.data-table/configs/default.config.js

@@ -13,7 +13,14 @@ export default /*tw*/ {
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "",
-  stickyHeaderCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
+  stickyHeaderCounter: {
+    base: "absolute top-5 left-11 bg-gradient-to-r from-white from-80%",
+    variants: {
+      compact: {
+        true: "top-3",
+      },
+    },
+  },
   stickyHeaderLoader: "",
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
   stickyHeaderActionsCheckbox: "",
@@ -25,7 +32,14 @@ export default /*tw*/ {
   headerCell: "",
   headerCellCheckbox: "w-10",
   headerCheckbox: "",
-  headerCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80% mt-px ml-px",
+  headerCounter: {
+    base: "absolute top-5 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
+    variants: {
+      compact: {
+        true: "top-3",
+      },
+    },
+  },
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
@@ -36,10 +50,10 @@ export default /*tw*/ {
   bodyRowAfterCell: "py-1",
   bodyRowDateSeparator: "",
   bodyCell: {
-    base: "p-[1.125rem] py-5 first:p-5 truncate align-top last:p-5",
+    base: "p-[1.125rem] py-5 first:!p-5 truncate align-top last:p-5",
     variants: {
       compact: {
-        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+        true: "px-4 py-3 last:px-4 last:py-3 first:!px-3.5 first:py-3",
       },
     },
   },
@@ -47,11 +61,16 @@ export default /*tw*/ {
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateSeparator: "",
-  bodyCellNestedWrapper: "flex items-center",
-  bodyCellNested: "flex relative -top-px",
-  bodyCellNestedExpandIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNested: "mr-2 mt-0.5",
+  bodyCellNestedExpandIcon: {
+    wrapper: "rounded-sm",
+    container: "bg-gray-200",
+  },
   bodyCellNestedExpandIconName: "add",
-  bodyCellNestedCollapseIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNestedCollapseIcon: {
+    wrapper: "rounded-sm",
+    container: "bg-gray-200",
+  },
   bodyCellNestedCollapseIconName: "remove",
   bodyCheckbox: "",
   bodyDateSeparator: "",

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

@@ -42,29 +42,119 @@ export default {
       { key: "key_3", label: "title 3" },
       { key: "key_4", label: "title 4" },
     ],
+    row: getRow,
+    numberOfRows: 5,
+  },
+};
+
+function getNestedRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    key_1: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_2: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_3: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_4: {
+      primary: "primary",
+      secondary: "secondary",
+    },
     row: {
-      id: 1,
+      id: getRandomId(),
       isChecked: false,
+      isHidden: true,
       key_1: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_2: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_3: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_4: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
+      row: {
+        id: getRandomId(),
+        isChecked: false,
+        isHidden: true,
+        key_1: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_2: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_3: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_4: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        row: {
+          id: getRandomId(),
+          isChecked: false,
+          isHidden: true,
+          key_1: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_2: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_3: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_4: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+        },
+      },
     },
-    numberOfRows: 5,
-  },
-};
+  };
+}
+
+function getRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    key_1: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_2: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_3: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_4: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+  };
+}
 
 const DefaultTemplate = (args) => ({
   components: { UTable },
@@ -85,10 +175,7 @@ const DefaultTemplate = (args) => ({
       let rows = [];
 
       for (let i = 0; i < args.numberOfRows; i++) {
-        const newRow = { ...args.row };
-
-        newRow.id = getRandomId();
-        rows.push(newRow);
+        rows.push(args.row());
       }
 
       return rows;
@@ -126,10 +213,7 @@ const SlotTemplate = (args) => ({
       let rows = [];
 
       for (let i = 0; i < args.numberOfRows; i++) {
-        const newRow = { ...args.row };
-
-        newRow.id = getRandomId();
-        rows.push(newRow);
+        rows.push(args.row());
       }
 
       return rows;
@@ -140,6 +224,12 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Nesting = DefaultTemplate.bind({});
+Nesting.args = {
+  row: getNestedRow,
+  selectable: true,
+};
+
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};