vueless 0.0.467 → 0.0.469

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.469",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/UButton.vue

@@ -5,6 +5,7 @@
     ref="buttonRef"
     :disabled="disabled"
     v-bind="buttonAttrs"
+    :style="buttonStyle"
     :tabindex="!loading ? tabindex : -1"
     :data-test="dataTest"
   >
@@ -80,7 +81,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watchEffect, useId } from "vue";
+import { computed, ref, watchEffect, useId, watch } from "vue";
 
 import { getDefault } from "../utils/utilUI.js";
 import ULoader from "../ui.loader/ULoader.vue";
@@ -255,6 +256,8 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
   useAttrs(props);
 
 const buttonRef = ref(null);
+const buttonStyle = ref(null);
+const buttonWidth = ref(0);
 
 const loaderSize = computed(() => {
   const sizes = {
@@ -286,6 +289,20 @@ const iconColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
 
+watch(
+  () => props.loading,
+  (newValue) => {
+    if (newValue && buttonRef.value) {
+      buttonWidth.value = buttonRef.value.offsetWidth;
+    }
+
+    buttonStyle.value = {
+      width: newValue ? `${buttonWidth.value}px` : "auto",
+    };
+  },
+  { immediate: true },
+);
+
 watchEffect(() => {
   props.loading && buttonRef.value.blur();
 });

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.469",
   "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": {