vueless 0.0.175 → 0.0.177

package/ui.data-table/index.vue

@@ -67,7 +67,7 @@
 
       <ULoaderTop
         v-if="resource && isHeaderSticky"
-        :resource-names="resource"
+        :resources="resource"
         v-bind="stickyHeaderLoaderAttrs"
       />
     </div>
@@ -126,7 +126,7 @@
             </th>
           </tr>
 
-          <ULoaderTop v-if="resource" :resource-names="resource" v-bind="headerLoaderAttrs" />
+          <ULoaderTop v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">
@@ -154,89 +154,33 @@
               </td>
             </tr>
 
-            <tr
-              v-if="!isShownRow(row)"
+            <TableRow
               v-bind="bodyRowAttrs(getRowClasses(row))"
+              v-model:selectedRows="selectedRows"
+              :selectable="selectable"
               :data-cy="`${dataCy}-row`"
-              @click="onClickRow(row)"
+              :row="row"
+              :columns="columns"
+              :config="config"
+              :attrs="{
+                bodyCellAttrs,
+                bodyCellSecondaryAttrs,
+                bodyCellSecondaryEmptyAttrs,
+                bodyCellNestedCollapseIconAttrs,
+                bodyCellNestedExpandIconAttrs,
+                bodyCellNestedAttrs,
+              }"
+              @click="onClickRow"
+              @toggle-row-visibility="onToggleRowVisibility"
             >
-              <td v-if="selectable" v-bind="bodyCellAttrs(config.bodyCellCheckbox)">
-                <UCheckbox
-                  v-model="selectedRows"
-                  :data-id="row.id"
-                  :value="row.id"
-                  size="sm"
-                  :data-cy="`${dataCy}-body-checkbox`"
-                  v-bind="bodyCheckboxAttrs"
-                  @click.stop
-                />
-              </td>
-
-              <td
-                v-for="(value, key, index) in TableService.getFilteredRow(row, columns)"
+              <template
+                v-for="(value, key, index) in getFilteredRow(row, columns)"
                 :key="index"
-                v-bind="bodyCellAttrs(getCellClasses(key))"
+                #[`cell-${key}`]="slotValues"
               >
-                <template v-if="hasSlotContent($slots[`cell-${key}`])">
-                  <div
-                    v-if="isNesting"
-                    :style="getNestedShift(row.nestedLevel)"
-                    v-bind="bodyCellNestedWrapperAttrs(index)"
-                    @click="onClickNestedWrapper(row)"
-                  >
-                    <div v-if="isShownNestedIcon({ index, row })" v-bind="bodyCellNestedAttrs">
-                      <UIcon
-                        v-if="row.isHidden"
-                        size="xs"
-                        internal
-                        interactive
-                        :name="config.bodyCellNestedExpandIconName"
-                        :color="isActiveNestedIcon(row)"
-                        v-bind="bodyCellNestedExpandIconAttrs"
-                      />
-
-                      <UIcon
-                        v-else
-                        size="xs"
-                        internal
-                        interactive
-                        :name="config.bodyCellNestedCollapseIconName"
-                        v-bind="bodyCellNestedCollapseIconAttrs"
-                      />
-                    </div>
-                  </div>
-
-                  <!-- @slot Use it to customise table cell item (in whole column). -->
-                  <slot :name="`cell-${key}`" :value="value" :row="row" />
-                </template>
-
-                <template v-else-if="value?.hasOwnProperty('secondary')">
-                  <div :data-cy="`${dataCy}-${key}-cell`">
-                    {{ value.primary || HYPHEN_SYMBOL }}
-                  </div>
-
-                  <div v-bind="bodyCellSecondaryAttrs">
-                    <template v-if="Array.isArray(value.secondary)">
-                      <div v-for="(secondary, idx) in value.secondary" :key="idx">
-                        <span v-bind="bodyCellSecondaryEmptyAttrs">
-                          {{ secondary }}
-                        </span>
-                      </div>
-                    </template>
-
-                    <template v-else>
-                      {{ value.secondary }}
-                    </template>
-                  </div>
-                </template>
-
-                <template v-else>
-                  <div :data-cy="`${dataCy}-${key}-cell`">
-                    {{ value || HYPHEN_SYMBOL }}
-                  </div>
-                </template>
-              </td>
-            </tr>
+                <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" />
+              </template>
+            </TableRow>
 
             <tr
               v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
@@ -300,18 +244,25 @@ import {
 } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
 import ULoaderTop from "../ui.loader-top";
+import TableRow from "./components/TableRow";
 
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import TableService from "./services/table.service";
-
-import { HYPHEN_SYMBOL, PX_IN_REM } from "../service.ui";
+import {
+  normalizeColumns,
+  getFilteredRow,
+  syncRowCheck,
+  toggleRowVisibility,
+  switchRowCheck,
+  getFlatRows,
+} from "./services/table.service";
+
+import { PX_IN_REM } from "../service.ui";
 import { UTable } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -376,14 +327,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UTable).default.stickyFooter,
   },
 
-  /**
-   * Sets the nesting level from which folding button need to be shown.
-   */
-  nesting: {
-    type: [Number, Boolean],
-    default: UIService.get(defaultConfig, UTable).default.nesting,
-  },
-
   /**
    * Set loader resource name to activate table top loader exact for that resource.
    */
@@ -420,7 +363,6 @@ const selectAll = ref(false);
 const canSelectAll = ref(true);
 const selectedRows = ref([]);
 const tableRows = ref([]);
-const hiddenIds = ref([]);
 const firstRow = ref(0);
 const tableWidth = ref(0);
 const tableHeight = ref(0);
@@ -443,11 +385,7 @@ const isFooterSticky = computed(
     isCheckedMoreOneTableItems.value,
 );
 
-const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
-
-const isSelectedAllRows = computed(() => {
-  return selectedRows.value.length === tableRows.value.length;
-});
+const normalizedColumns = computed(() => normalizeColumns(props.columns));
 
 const colsCount = computed(() => {
   return props.columns.length + 1;
@@ -458,7 +396,7 @@ const lastRow = computed(() => {
 });
 
 const isShownActionsHeader = computed(
-  () => hasSlotContent(slots["header-actions"]) && selectedRows.value.length,
+  () => hasSlotContent(slots["header-actions"]) && Boolean(selectedRows.value.length),
 );
 
 const isHeaderSticky = computed(() => {
@@ -487,8 +425,10 @@ const hasSlotContentBeforeFirstRow = computed(() => {
     : false;
 });
 
-const isNesting = computed(() => {
-  return Boolean(props.nesting) || props.nesting === 0;
+const isSelectedAllRows = computed(() => {
+  const rows = getFlatRows(tableRows.value);
+
+  return selectedRows.value.length === rows.length;
 });
 
 const {
@@ -505,14 +445,12 @@ const {
   bodyRowAttrs,
   footerClassesAttrs,
   bodyRowDateSeparatorAttrs,
-  bodyCellNestedWrapperAttrs,
   headerCellAttrs,
   bodyCellAttrs,
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
   headerCounterAttrs,
-  bodyCheckboxAttrs,
   bodyCellNestedCollapseIconAttrs,
   bodyCellNestedExpandIconAttrs,
   bodyEmptyStateAttrs,
@@ -533,7 +471,6 @@ const {
   headerAttrs,
 } = useAttrs(props, {
   tableRows,
-  isNesting,
   isShownActionsHeader,
   isHeaderSticky,
   isFooterSticky,
@@ -551,11 +488,7 @@ watch(isFooterSticky, (newValue) =>
 watch(
   () => selectedRows.value.length,
   () => {
-    tableRows.value = tableRows.value.map((row) => {
-      row.isChecked = selectedRows.value.includes(row.id);
-
-      return row;
-    });
+    tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
   },
 );
 
@@ -585,56 +518,12 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function isShownNestedIcon({ index, row }) {
-  const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
-  const isWithinNestingLevel = row.nestedLevel >= nestedLevel;
-  const isChildren = row.childrenIds?.length > 0;
-
-  const isFirstRow = index === 0;
-
-  return isFirstRow && (isChildren || row.isNestingRow) && isNesting.value && isWithinNestingLevel;
-}
-
-function isActiveNestedIcon(row) {
-  return !row.childrenIds?.length ? "grayscale" : "";
-}
-
-function onClickNestedWrapper(row) {
-  if (!isNesting.value || !row.childrenIds.length) return;
-  const [firstElement] = row.childrenIds;
-
-  row.isHidden = !row.isHidden;
-
-  if (row.isHidden && row.childrenIds.length) {
-    hiddenIds.value.push(...row.childrenIds);
-  } else {
-    const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
-
-    hiddenIds.value =
-      row.nestedLevel === nestedLevel
-        ? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
-        : hiddenIds.value.filter((item) => item !== firstElement);
-  }
-}
-
-function getNestedShift(nestedLevel) {
-  return { marginLeft: `${nestedLevel * 1.5}rem` };
-}
-
 function getDateSeparatorLabel(separatorDate) {
   return Array.isArray(props.dateDivider)
     ? props.dateDivider.find((dateItem) => dateItem.date === separatorDate)?.label || separatorDate
     : separatorDate;
 }
 
-function isShownRow(row) {
-  if (hiddenIds.value.includes(row.id)) {
-    row.isHidden = true;
-  }
-
-  return hiddenIds.value.includes(row.id);
-}
-
 function setFooterCellWidth(width) {
   const ZERO_WIDTH = 0;
 
@@ -670,12 +559,6 @@ function synchronizeTableItemsWithProps() {
   }
 
   tableRows.value = props.rows;
-
-  tableRows.value.forEach((item) => {
-    if (isNesting.value && item.isHidden && item.childrenIds?.length) {
-      hiddenIds.value.push(...item.childrenIds);
-    }
-  });
 }
 
 function updateSelectedRows() {
@@ -715,19 +598,15 @@ function getRowClasses(row) {
   return selectedRows.value.includes(row.id) ? config.value.bodyRowChecked : "";
 }
 
-function getCellClasses(key) {
-  return props.columns.find((column) => column.key === key)?.tdClass;
-}
-
 function onChangeSelectAll(selectAll) {
   if (selectAll && canSelectAll.value) {
-    selectedRows.value = tableRows.value.map((item) => item.id);
+    selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);
 
-    tableRows.value.forEach((item) => (item.isChecked = true));
+    tableRows.value.forEach((row) => switchRowCheck(row, true));
   } else if (!selectAll) {
     selectedRows.value = [];
 
-    tableRows.value.forEach((item) => (item.isChecked = false));
+    tableRows.value.forEach((row) => switchRowCheck(row, false));
   }
 
   canSelectAll.value = true;
@@ -748,4 +627,8 @@ function onChangeSelectedRows(selectedRows) {
 function clearSelectedItems() {
   selectedRows.value = [];
 }
+
+function onToggleRowVisibility(rowId) {
+  tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
+}
 </script>

package/ui.data-table/services/table.service.js

@@ -1,15 +1,55 @@
-export default class TableService {
-  static normalizeColumns(columns) {
-    return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+export function normalizeColumns(columns) {
+  return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+}
+
+export function getFilteredRow(row, columns) {
+  const filteredRow = Object.entries(row).filter((item) => {
+    const isShownColumn = columns.some((column) => column.key === item[0]);
+
+    if (isShownColumn) return item;
+  });
+
+  return Object.fromEntries(filteredRow);
+}
+
+export function syncRowCheck(row, selectedRows) {
+  row.isChecked = selectedRows.includes(row.id);
+
+  if (row.row) {
+    row.row = syncRowCheck(row.row, selectedRows);
   }
 
-  static getFilteredRow(row, columns) {
-    const filteredRow = Object.entries(row).filter((item) => {
-      const isShownColumn = columns.some((column) => column.key === item[0]);
+  return row;
+}
 
-      if (isShownColumn) return item;
-    });
+export function toggleRowVisibility(row, targetRowId) {
+  if (row.id === targetRowId) row.isHidden = !row.isHidden;
 
-    return Object.fromEntries(filteredRow);
+  if (row.row) {
+    toggleRowVisibility(row.row, targetRowId);
   }
 }
+
+export function switchRowCheck(row, isChecked) {
+  row.isChecked = isChecked;
+
+  if (row.row) {
+    switchRowCheck(row.row, isChecked);
+  }
+}
+
+export function getFlatRows(tableRows) {
+  const rows = [];
+
+  function addRow(row) {
+    rows.push(row);
+
+    if (row.row) {
+      addRow(row.row);
+    }
+  }
+
+  tableRows.forEach((row) => addRow(row));
+
+  return rows;
+}

package/ui.dropdown-list/configs/default.config.js

@@ -10,7 +10,7 @@ export default /*tw*/ {
       hover:transition hover:duration-100 hover:ease-in-out bg-white opacity-1
     `,
   subGroupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-1",
+    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {
       size: {
         sm: "text-2xs",
@@ -20,7 +20,7 @@ export default /*tw*/ {
     },
   },
   groupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
+    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
     variants: {
       size: {
         sm: "text-2xs pb-1 mt-4",

package/ui.form-checkbox/configs/default.config.js

@@ -20,6 +20,7 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
+      transition duration-100 ease-in-out
       border border-solid rounded
       border-gray-300 bg-white
       hover:border-gray-400
@@ -34,11 +35,11 @@ export default /*tw*/ {
         sm: "size-5 text-sm",
         md: "size-6",
         lg: "size-7 text-lg",
-        xl: "size-6 text-xl",
+        xl: "size-8 text-xl",
       },
       color: {
         grayscale: `
-          focus:border-gray-500 focus:ring-gray-200
+          focus:border-gray-500 focus:ring-gray-500
           checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
           active:border-gray-900 active:bg-gray-900
         `,

package/ui.form-checkbox/index.vue

@@ -135,7 +135,7 @@ const props = defineProps({
 
   /**
    * Checkbox size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -192,9 +192,11 @@ const { config, checkboxAttrs, iconWrapperCellAttrs, labelAttrs, iconAttrs } = u
 
 const iconSize = computed(() => {
   const sizes = {
+    xs: "2xs",
     sm: "xs",
     md: "sm",
     lg: "md",
+    xl: "lg",
   };
 
   return sizes[props.size];

package/ui.form-input/configs/default.config.js

@@ -49,9 +49,9 @@ export default /*tw*/ {
       `,
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, size: "sm", class: "pt-6 pb-2" },
-      { labelAlign: "topInside", label: true, size: "md", class: "pt-7 pb-2.5" },
-      { labelAlign: "topInside", label: true, size: "lg", class: "pt-8 pb-3" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5 pb-1.5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6 pb-1.5" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7 pb-2" },
     ],
   },
   defaultVariants: {

package/ui.form-label/configs/default.config.js

@@ -3,38 +3,38 @@ export default /*tw*/ {
     base: "flex",
     variants: {
       size: {
+        xs: "gap-2",
         sm: "gap-2",
         md: "gap-2.5",
         lg: "gap-3",
+        xl: "gap-3.5",
       },
       align: {
         top: "flex-col",
-        topInside: "flex-col",
+        topInside: "flex-col gap-0",
         topWithDesc: "flex-col-reverse w-fit",
         left: "flex-row w-fit",
         right: "flex-row-reverse w-fit",
         bottom: "flex-col-reverse w-fit",
       },
     },
-    compoundVariants: [
-      { align: "topInside", size: "sm", class: "gap-0" },
-      { align: "topInside", size: "md", class: "gap-0" },
-      { align: "topInside", size: "lg", class: "gap-0" },
-    ],
   },
   labelWrapper: "",
   label: {
     base: "text-gray-500 z-10 font-normal block !leading-none",
     variants: {
       size: {
+        xs: "text-2xs",
         sm: "text-xs",
         md: "text-sm",
         lg: "text-base",
+        xl: "text-lg",
       },
       align: {
         topInside: "absolute left-4",
-        left: "text-gray-900",
-        right: "text-gray-900",
+        topWithDesc: "pt-1 pb-1.5",
+        left: "pt-1 pb-1 text-gray-900",
+        right: "pt-1 pb-1 text-gray-900",
       },
       error: {
         true: "text-red-500",
@@ -44,49 +44,55 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { align: "topInside", size: "xs", class: "top-1.5" },
       { align: "topInside", size: "sm", class: "top-2" },
       { align: "topInside", size: "md", class: "top-2.5" },
       { align: "topInside", size: "lg", class: "top-3" },
-      { align: "topWithDesc", size: "sm", class: "pt-1 pb-1.5" },
-      { align: "topWithDesc", size: "md", class: "pt-1 pb-1.5 mt-px" },
-      { align: "topWithDesc", size: "lg", class: "pt-1 pb-1.5 mt-0.5" },
-      { align: "left", size: "sm", class: "pt-1 pb-1.5 text-sm" },
-      { align: "left", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
-      { align: "left", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
-      { align: "right", size: "sm", class: "pt-1 pb-1.5 text-sm" },
-      { align: "right", size: "md", class: "pt-1 pb-1.5 mt-px text-base" },
-      { align: "right", size: "lg", class: "pt-1 pb-1.5 mt-0.5 text-lg" },
+      { align: "topInside", size: "xl", class: "top-3.5" },
+      { align: "topWithDesc", size: "xs", class: "-mt-px" },
+      { align: "topWithDesc", size: "sm", class: "" },
+      { align: "topWithDesc", size: "md", class: "mt-px" },
+      { align: "topWithDesc", size: "lg", class: "mt-0.5" },
+      { align: "topWithDesc", size: "xl", class: "mt-1" },
+      { align: "left", size: "xs", class: "-mt-0.5 text-sm" },
+      { align: "left", size: "sm", class: "text-sm" },
+      { align: "left", size: "md", class: "mt-px text-base" },
+      { align: "left", size: "lg", class: "mt-0.5 text-lg" },
+      { align: "left", size: "xl", class: "mt-1 text-xl" },
+      { align: "right", size: "sm", class: "-mt-0.5 text-xs" },
+      { align: "right", size: "sm", class: "text-sm" },
+      { align: "right", size: "md", class: "mt-px text-base" },
+      { align: "right", size: "lg", class: "mt-0.5 text-lg" },
+      { align: "right", size: "xl", class: "mt-1 text-xl" },
     ],
   },
   description: {
     base: "font-normal text-gray-500/[85] !leading-none",
     variants: {
       size: {
+        xs: "text-2xs",
         sm: "text-2xs",
         md: "text-xs",
         lg: "text-sm",
+        xl: "text-base",
       },
       align: {
         topInside: "pl-4",
-        top: "pl-0",
+        top: "pl-0 -mt-0.5",
         left: "pl-0",
         right: "pl-0",
-        bottom: "-order-1",
+        bottom: "-order-1 -mt-2",
       },
       error: {
         true: "text-red-500",
       },
     },
     compoundVariants: [
-      { align: "bottom", size: "sm", class: "-mt-2" },
-      { align: "bottom", size: "md", class: "-mt-2" },
-      { align: "bottom", size: "lg", class: "-mt-2" },
-      { align: "top", size: "sm", class: "-mt-0.5" },
-      { align: "top", size: "md", class: "-mt-0.5" },
-      { align: "top", size: "lg", class: "-mt-0.5" },
+      { align: "topInside", size: "xs", class: "mt-1" },
       { align: "topInside", size: "sm", class: "mt-1.5" },
       { align: "topInside", size: "md", class: "mt-2" },
       { align: "topInside", size: "lg", class: "mt-2.5" },
+      { align: "topInside", size: "xl", class: "mt-3" },
     ],
   },
   defaultVariants: {

package/ui.form-label/index.vue

@@ -16,12 +16,7 @@
         v-text="label"
       />
 
-      <div
-        v-if="error"
-        :data-cy="`${dataCy}-error-message`"
-        v-bind="descriptionAttrs"
-        v-text="error"
-      />
+      <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
 
       <div
         v-if="description && !error"
@@ -46,12 +41,7 @@
 
     <slot />
 
-    <div
-      v-if="error"
-      :data-cy="`${dataCy}-error-message`"
-      v-bind="descriptionAttrs"
-      v-text="error"
-    />
+    <div v-if="error" :data-cy="`${dataCy}-error`" v-bind="descriptionAttrs" v-text="error" />
 
     <div
       v-if="description && !error"
@@ -89,7 +79,7 @@ const props = defineProps({
 
   /**
    * Set label size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,

package/ui.form-radio/configs/default.config.js

@@ -2,6 +2,7 @@ export default /*tw*/ {
   label: "inline-flex",
   radio: {
     base: `
+      transition duration-100 ease-in-out
       border border-solid border-{color}-300 text-{color}-500
       hover:border-{color}-400
       active:border-{color}-500
@@ -10,9 +11,11 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
+        xs: "size-4",
         sm: "size-5",
         md: "size-6",
         lg: "size-7",
+        xl: "size-8",
       },
     },
     compoundVariants: [

package/ui.form-radio/index.vue

@@ -77,7 +77,7 @@ const props = defineProps({
 
   /**
    * Radio size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,