vueless 0.0.467 → 0.0.468

package/constants.js

@@ -68,5 +68,4 @@ export const SYSTEM_CONFIG_KEY = {
 
 /* Other */
 export const PX_IN_REM = 16;
-export const HYPHEN_SYMBOL = "-";
 export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;

package/package.json

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

package/ui.data-table/UTable.vue

@@ -177,6 +177,7 @@
               :columns="columns"
               :config="config"
               :attrs="keysAttrs"
+              :empty-cell-label="emptyCellLabel"
               @click="onClickRow"
               @click-cell="onClickCell"
               @toggle-row-visibility="onToggleRowVisibility"
@@ -320,6 +321,14 @@ const props = defineProps({
     required: true,
   },
 
+  /**
+   * Label to display for empty cell values.
+   */
+  emptyCellLabel: {
+    type: String,
+    default: getDefault(defaultConfig, UTable).emptyCellLabel,
+  },
+
   /**
    * Show date divider line between dates.
    */

package/ui.data-table/UTableRow.vue

@@ -157,7 +157,7 @@ import { computed, onMounted, useSlots, useTemplateRef } from "vue";
 import { cx } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.js";
 
-import { HYPHEN_SYMBOL, PX_IN_REM } from "../constants.js";
+import { PX_IN_REM } from "../constants.js";
 import { getFilteredRow } from "./utilTable.js";
 
 import { useMutationObserver } from "../composables/useMutationObserver.js";
@@ -178,6 +178,11 @@ const props = defineProps({
     required: true,
   },
 
+  emptyCellLabel: {
+    type: String,
+    required: true,
+  },
+
   tag: {
     type: String,
     default: "tr",
@@ -311,7 +316,7 @@ function isEmptyValue(value) {
 function formatCellValue(value) {
   const nestedValue = value && typeof value === "object" && "value" in value ? value.value : value;
 
-  return isEmptyValue(nestedValue) ? HYPHEN_SYMBOL : nestedValue;
+  return isEmptyValue(nestedValue) ? props.emptyCellLabel : nestedValue;
 }
 
 function getNestedShift() {

package/ui.data-table/config.js

@@ -92,6 +92,7 @@ export default /*tw*/ {
     noData: "There is no data in the table.",
   },
   defaults: {
+    emptyCellLabel: "—",
     nesting: false,
     compact: false,
     selectable: false,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.467",
+  "version": "0.0.468",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8554,6 +8554,15 @@
                 "type": "array"
               }
             },
+            {
+              "name": "emptyCellLabel",
+              "description": "Label to display for empty cell values.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "—"
+            },
             {
               "name": "dateDivider",
               "description": "Show date divider line between dates.",
@@ -8817,6 +8826,15 @@
                 "type": "array"
               }
             },
+            {
+              "name": "emptyCellLabel",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "—"
+            },
             {
               "name": "tag",
               "value": {