vueless 0.0.425 → 0.0.426

package/package.json

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

package/ui.data-table/UTableRow.vue

@@ -18,9 +18,9 @@
     <td
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
-      v-bind="getCellAttrs(key, row, index)"
+      v-bind="getCellAttrs(row, index)"
       :class="
-        cx([getCellAttrs(key, row, index).class, columns[index].tdClass, getCellClasses(row, key)])
+        cx([getCellAttrs(row, index).class, columns[index].tdClass, getCellClasses(row, key)])
       "
     >
       <div
@@ -40,38 +40,16 @@
         />
       </div>
 
-      <div
-        v-if="isCellObject(value)"
-        :class="cx([bodyCellPrimaryAttrs.class, getCellContentClasses(row, key)])"
-      >
-        <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
-            {{ getCellPrimaryContent(value) }}
-          </div>
-
-          <div v-bind="bodyCellSecondaryAttrs">
-            <template v-if="Array.isArray(value.secondary)">
-              <div v-for="(secondary, idx) in value.secondary" ref="cellRef" :key="idx">
-                <span v-bind="bodyCellSecondaryEmptyAttrs">
-                  {{ secondary }}
-                </span>
-              </div>
-            </template>
-
-            <div v-else ref="cellRef">
-              {{ value.secondary }}
-            </div>
-          </div>
-        </slot>
-      </div>
-
-      <template v-else>
-        <slot :name="`cell-${key}`" :value="value" :row="row">
-          <div v-bind="bodyCellPrimaryAttrs" ref="cellRef" :data-test="`${dataTest}-${key}-cell`">
-            {{ value || value === 0 ? value : HYPHEN_SYMBOL }}
-          </div>
-        </slot>
-      </template>
+      <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>
     </td>
   </tr>
 
@@ -188,9 +166,7 @@ const cellRef = ref([]);
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
 const {
-  bodyCellPrimaryAttrs,
-  bodyCellSecondaryAttrs,
-  bodyCellSecondaryEmptyAttrs,
+  bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
   bodyCheckboxAttrs,
   bodyCellNestedAttrs,
@@ -230,19 +206,7 @@ function getCellContentClasses(row, key) {
   return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
 }
 
-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) {
+function getCellAttrs(row, cellIndex) {
   const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
 
   return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;

package/ui.data-table/config.js

@@ -57,9 +57,7 @@ export default /*tw*/ {
     },
   },
   bodyCellNestedRow: "flex",
-  bodyCellPrimary: "text-ellipsis overflow-hidden",
-  bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
-  bodyCellSecondaryEmpty: "inline-block",
+  bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
   bodyCellNested: "mr-2 mt-0.5",

package/ui.data-table/storybook/Docs.mdx

@@ -20,12 +20,13 @@ Keys you have/may to provide to component in row object.
 
 <Markdown>
 {`
-|  Key name         | Description                    | Type           | Required     |
-| ------------------| ------------------------------ | ---------------| ------------ |
-| id                | A unique identifier for row    | String, Number | true         |
-| isChecked         | Indicates if row checked       | Boolean        | false        |
-| isHidden          | Indicated if nested row hidden | Boolean        | false        |
-| rowDate           | Row date for date divider      | String, Date   | false        |
+|  Key name         | Description                        | Type           | Required     |
+| ------------------| ---------------------------------- | ---------------| ------------ |
+| id                | A unique identifier for row        | String, Number | true         |
+| content           | Content to be rendered in the cell | Any            | false        |
+| isChecked         | Indicates if row checked           | Boolean        | false        |
+| isHidden          | Indicated if nested row hidden     | Boolean        | false        |
+| rowDate           | Row date for date divider          | String, Date   | false        |
 `}
 </Markdown>
 

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

@@ -277,72 +277,6 @@ RowAndCellClasses.args = {
   ],
 };
 
-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.425",
+  "version": "0.0.426",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8498,6 +8498,9 @@
                 },
                 {
                   "name": "row"
+                },
+                {
+                  "name": "index"
                 }
               ]
             },