vueless 0.0.404 → 0.0.406

package/package.json

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

package/ui.data-list/UDataList.vue

@@ -2,12 +2,23 @@
   <div v-bind="wrapperAttrs">
     <UDivider v-if="upperlined" size="xl" padding="after" v-bind="dividerAttrs" />
 
-    <UEmpty
+    <!--
+      @slot Use it to add something instead of the drag icon.
+      @binding {string} empty-title
+      @binding {string} empty-description
+    -->
+    <slot
       v-if="!hideEmptyStateForNesting && !list?.length"
-      :title="emptyTitle || currentLocale.emptyTitle"
-      :description="emptyDescription || currentLocale.emptyDescription"
-      v-bind="emptyAttrs"
-    />
+      name="empty"
+      :empty-title="emptyTitle"
+      :empty-description="emptyDescription"
+    >
+      <UEmpty
+        :title="emptyTitle || currentLocale.emptyTitle"
+        :description="emptyDescription || currentLocale.emptyDescription"
+        v-bind="emptyAttrs"
+      />
+    </slot>
 
     <draggable
       v-else
@@ -27,6 +38,7 @@
           <div :data-test="`${dataTest}-item-${element[valueKey]}`" v-bind="itemAttrs">
             <!--
               @slot Use it to add something instead of the drag icon.
+              @binding {string} icon-name
               @binding {string} icon-size
             -->
             <slot name="drag" :icon-name="config.defaults.dragIcon" :icon-size="iconSize">
@@ -43,6 +55,7 @@
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
+                @binding {boolean} active
               -->
               <slot name="label" :item="element" :active="isActive(element)">
                 {{ element[labelKey] }}
@@ -63,6 +76,7 @@
 
               <!--
                 @slot Use it to add something instead of the delete icon.
+                @binding {string} icon-name
                 @binding {string} icon-size
               -->
               <slot name="delete" :icon-name="config.defaults.deleteIcon" :icon-size="iconSize">
@@ -82,6 +96,7 @@
 
               <!--
                 @slot Use it to add something instead of the edit icon.
+                @binding {string} icon-name
                 @binding {string} icon-size
               -->
               <slot name="edit" :icon-name="config.defaults.editIcon" :icon-size="iconSize">
@@ -114,6 +129,11 @@
             @drag-sort="onDragEnd"
           >
             <template #label="{ item, active }">
+              <!--
+                @slot Use it to modify label.
+                @binding {object} item
+                @binding {boolean} active
+              -->
               <slot name="label" :item="item" :active="active">
                 <div v-bind="active ? labelCrossedAttrs : labelAttrs" v-text="item[labelKey]" />
               </slot>
@@ -152,7 +172,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Data list array.
+   * Data item options.
    */
   list: {
     type: Array,
@@ -217,7 +237,7 @@ const props = defineProps({
   },
 
   /**
-   * Enables nesting.
+   * Enable nesting.
    */
   nesting: {
     type: Boolean,

package/ui.data-table/UTable.vue

@@ -190,7 +190,8 @@
               :columns="columns"
               :config="config"
               :attrs="keysAttrs"
-              v-bind="isRowSelected(row) ? bodyRowCheckedAttrs : bodyRowAttrs"
+              v-bind="getRowAttrs(row.id)"
+              :class="cx([getRowAttrs(row.id).class, row.class])"
               @click="onClickRow"
               @toggle-row-visibility="onToggleRowVisibility"
             >
@@ -598,8 +599,8 @@ function shouldDisplayDateSeparator(rowIndex) {
   return (isPreviousRowChecked && isCheckedRowAfter) || isFirstRowAndNextChecked;
 }
 
-function isRowSelected(row) {
-  return Boolean(selectedRows.value.includes(row.id));
+function getRowAttrs(rowId) {
+  return selectedRows.value.includes(rowId) ? bodyRowCheckedAttrs : bodyRowAttrs;
 }
 
 function setFooterCellWidth(width) {

package/ui.data-table/UTableRow.vue

@@ -15,7 +15,7 @@
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
       v-bind="getCellAttrs(key, row, index)"
-      :class="cx([getCellAttrs(key, row, index).class, columns[index].tdClass])"
+      :class="cx([getCellAttrs(key, row, index).class, columns[index].tdClass, row[key]?.class])"
     >
       <div
         v-if="(row.row || nestedLevel || row.nestedData) && index === 0"
@@ -34,10 +34,10 @@
         />
       </div>
 
-      <div v-if="value?.hasOwnProperty('secondary')">
+      <div v-if="isCellObject(value)">
         <slot :name="`cell-${key}`" :value="value" :row="row">
           <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
-            {{ value.primary || HYPHEN_SYMBOL }}
+            {{ getCellPrimaryContent(value) }}
           </div>
 
           <div v-bind="bodyCellSecondaryAttrs">
@@ -188,6 +188,18 @@ onMounted(() => {
   cellRef.value.forEach(setElementTitle);
 });
 
+function isCellObject(value) {
+  return typeof value === "object" && value !== null && ("primary" in value || "value" in value);
+}
+
+function getCellPrimaryContent(value) {
+  if (typeof value === "object" && value !== null) {
+    return value.primary || value.value || HYPHEN_SYMBOL;
+  }
+
+  return value || HYPHEN_SYMBOL;
+}
+
 function getCellAttrs(key, row, cellIndex) {
   const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
 

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

@@ -51,82 +51,34 @@ 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",
-    },
+    key_1: "Click to expand",
+    key_2: "Some data",
+    key_3: "Numbers",
+    key_4: "Statistics",
     row: {
       id: getRandomId(),
       isChecked: false,
       isHidden: true,
-      key_1: {
-        primary: "Nesting",
-        secondary: "secondary",
-      },
-      key_2: {
-        primary: "Nesting",
-        secondary: "secondary",
-      },
-      key_3: {
-        primary: "Nesting",
-        secondary: "secondary",
-      },
-      key_4: {
-        primary: "Nesting",
-        secondary: "secondary",
-      },
+      key_1: "Nesting",
+      key_2: "Nesting",
+      key_3: "Nesting",
+      key_4: "Nesting",
       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",
-        },
+        key_1: "Second level nesting",
+        key_2: "Second level nesting",
+        key_3: "Second level nesting",
+        key_4: "Second level nesting",
         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",
-          },
+          key_1: "Third level nesting",
+          key_2: "Third level nesting",
+          key_3: "Third level nesting",
+          key_4: "Third level nesting",
         },
       },
     },
@@ -137,22 +89,10 @@ 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",
-    },
+    key_1: "Info",
+    key_2: "Statistics",
+    key_3: "Reports",
+    key_4: "Discounts",
   };
 }
 
@@ -166,7 +106,7 @@ const DefaultTemplate = (args) => ({
   template: `
     <UTable
       v-bind="args"
-      :rows="itemsData"
+      :rows="args.rows || itemsData"
     >
       ${args.slotTemplate || getSlotsFragment()}
     </UTable>
@@ -218,18 +158,9 @@ NestedContent.args = {
       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",
-        },
+        key_1: "Row with nested content",
+        key_2: "Basic data",
+        key_3: "More info",
         nestedData: {
           isChecked: false,
           isHidden: true,
@@ -259,18 +190,9 @@ NestedContent.args = {
       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",
-        },
+        key_1: `Regular row ${index}`,
+        key_2: "Standard info",
+        key_3: "Basic data",
       };
     }
   },
@@ -292,6 +214,103 @@ NestedContent.args = {
   `,
 };
 
+export const RowAndCellClasses = DefaultTemplate.bind({});
+RowAndCellClasses.args = {
+  rows: [
+    {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: "Info",
+      key_2: "Statistics",
+      key_3: { value: "Reports", class: "bg-red-200" },
+      key_4: "Discounts",
+    },
+    {
+      id: getRandomId(),
+      isChecked: false,
+      class: "bg-green-100",
+      key_1: "Data",
+      key_2: "Meetings",
+      key_3: "Calendar",
+      key_4: "Departments",
+    },
+    {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: "Events",
+      key_2: "Sales",
+      key_3: "Renovation",
+      key_4: "Calendar",
+    },
+  ],
+};
+
+export const PrimaryAndSecondaryContent = DefaultTemplate.bind({});
+PrimaryAndSecondaryContent.args = {
+  rows: [
+    {
+      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",
+      },
+    },
+    {
+      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",
+      },
+    },
+    {
+      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",
+      },
+    },
+  ],
+};
+
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.404",
+  "version": "0.0.406",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2054,7 +2054,7 @@
           "attributes": [
             {
               "name": "list",
-              "description": "Data list array.",
+              "description": "Data item options.",
               "value": {
                 "kind": "expression",
                 "type": "array"
@@ -2126,7 +2126,7 @@
             },
             {
               "name": "nesting",
-              "description": "Enables nesting.",
+              "description": "Enable nesting.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2221,12 +2221,28 @@
             }
           ],
           "slots": [
+            {
+              "name": "empty",
+              "scoped": true,
+              "description": "Use it to add something instead of the drag icon.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "empty-title"
+                },
+                {
+                  "type": "string",
+                  "name": "empty-description"
+                }
+              ]
+            },
             {
               "name": "drag",
               "scoped": true,
               "description": "Use it to add something instead of the drag icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2241,9 +2257,11 @@
               "description": "Use it to modify label.",
               "bindings": [
                 {
+                  "type": "object",
                   "name": "item"
                 },
                 {
+                  "type": "boolean",
                   "name": "active"
                 }
               ]
@@ -2265,6 +2283,7 @@
               "description": "Use it to add something instead of the delete icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
@@ -2279,6 +2298,7 @@
               "description": "Use it to add something instead of the edit icon.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {