vueless 0.0.155 → 0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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

@@ -31,6 +31,7 @@ export default /*tw*/ {
   },
   defaultVariants: {
     animationDuration: 200,
+    labelKey: "label",
     nesting: false,
     upperlined: false,
   },

package/ui.data-list/constants/index.js

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UDataListName = "UDataList";
+export const UDataList = "UDataList";

package/ui.data-list/index.vue

@@ -30,7 +30,7 @@
             <div v-bind="labelAttrs(element.isActive)">
               <!-- @slot Use it to modify label. -->
               <slot name="label" :item="element">
-                {{ element.label }}
+                {{ element[labelKey] }}
               </slot>
             </div>
 
@@ -52,7 +52,7 @@
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
                 v-bind="deleteIconAttrs"
-                @click="onClickDelete(element.id, element.label)"
+                @click="onClickDelete(element.id, element[labelKey])"
               />
 
               <UIcon
@@ -64,7 +64,7 @@
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
                 v-bind="editIconAttrs"
-                @click="onClickEdit(element.id, element.label)"
+                @click="onClickEdit(element.id, element[labelKey])"
               />
             </template>
           </div>
@@ -81,9 +81,9 @@
             @click-edit="onClickEdit"
             @drag-sort="onDragEnd"
           >
-            <template #default="{ item }">
-              <slot :item="item">
-                <div v-bind="labelAttrs" v-text="item.label" />
+            <template #label="{ item }">
+              <slot name="label" :item="item">
+                <div v-bind="labelAttrs" v-text="item[labelKey]" />
               </slot>
             </template>
 
@@ -108,7 +108,7 @@ import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UIService from "../service.ui";
 
-import { UDataListName } from "./constants";
+import { UDataList as UDataListName } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -133,6 +133,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: UIService.get(defaultConfig, UDataListName).default.labelKey,
+  },
+
   /**
    * Empty state title.
    */
@@ -237,12 +245,12 @@ function onDragEnd() {
   emit("dragSort", sortData);
 }
 
-function onClickEdit(id) {
-  emit("clickEdit", id);
+function onClickEdit(id, label) {
+  emit("clickEdit", id, label);
 }
 
-function onClickDelete(id, title) {
-  emit("clickDelete", id, title);
+function onClickDelete(id, label) {
+  emit("clickDelete", id, label);
 }
 
 function prepareSortData(list, parentId) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1401,6 +1401,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "label"
+            },
             {
               "name": "emptyTitle",
               "description": "Empty state title.",
@@ -1493,9 +1502,6 @@
             {
               "name": "actions",
               "description": "Use it to add custom actions."
-            },
-            {
-              "name": "default"
             }
           ],
           "source": {