vueless 0.0.182 → 0.0.184

package/package.json

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

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

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

package/ui.data-list/index.vue

@@ -12,7 +12,7 @@
     <draggable
       v-else
       :list="list"
-      item-key="id"
+      :item-key="valueKey"
       :group="{ name: group }"
       handle=".icon-drag"
       :ghost-class="config.draggableGhost"
@@ -23,8 +23,8 @@
       @end="onDragEnd"
     >
       <template #item="{ element }">
-        <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
-          <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
+        <div :id="element[valueKey]" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
+          <div :data-cy="`${dataCy}-item-${element[valueKey]}`" v-bind="itemAttrs">
             <UIcon internal :name="config.dragIconName" color="gray" v-bind="dragIconAttrs" />
 
             <div v-bind="labelAttrs(element.isActive)">
@@ -52,7 +52,7 @@
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
                 v-bind="deleteIconAttrs"
-                @click="onClickDelete(element.id, element[labelKey])"
+                @click="onClickDelete(element[valueKey], element[labelKey])"
               />
 
               <UIcon
@@ -64,7 +64,7 @@
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
                 v-bind="editIconAttrs"
-                @click="onClickEdit(element.id, element[labelKey])"
+                @click="onClickEdit(element[valueKey], element[labelKey])"
               />
             </template>
           </div>
@@ -141,6 +141,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UDataListName).default.labelKey,
   },
 
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: UIService.get(defaultConfig, UDataListName).default.valueKey,
+  },
+
   /**
    * Empty state title.
    */
@@ -245,12 +253,12 @@ function onDragEnd() {
   emit("dragSort", sortData);
 }
 
-function onClickEdit(id, label) {
-  emit("clickEdit", id, label);
+function onClickEdit(value, label) {
+  emit("clickEdit", value, label);
 }
 
-function onClickDelete(id, label) {
-  emit("clickDelete", id, label);
+function onClickDelete(value, label) {
+  emit("clickDelete", value, label);
 }
 
 function prepareSortData(list, parentId) {
@@ -260,7 +268,7 @@ function prepareSortData(list, parentId) {
     let hasItemChildren = item?.children?.length;
 
     if (hasItemChildren) {
-      let childrenItem = prepareSortData(item.children, item.id);
+      let childrenItem = prepareSortData(item.children, item[props.valueKey]);
 
       childrenItem.forEach((item) => {
         sortData.push(item);

package/ui.dropdown-badge/configs/default.config.js

@@ -27,6 +27,8 @@ export default /*tw*/ {
     size: "md",
     weight: "medium",
     variant: "primary",
+    labelKey: "label",
+    valueKey: "id",
     listYPosition: "bottom",
     listXPosition: "left",
     noIcon: false,

package/ui.dropdown-badge/index.vue

@@ -132,7 +132,7 @@ const props = defineProps({
    */
   labelKey: {
     type: String,
-    default: "label",
+    default: UIService.get(defaultConfig, UDropdownBadge).default.labelKey,
   },
 
   /**
@@ -140,7 +140,7 @@ const props = defineProps({
    */
   valueKey: {
     type: String,
-    default: "id",
+    default: UIService.get(defaultConfig, UDropdownBadge).default.valueKey,
   },
 
   /**

package/ui.dropdown-button/configs/default.config.js

@@ -26,6 +26,8 @@ export default /*tw*/ {
     color: "brand",
     size: "md",
     variant: "primary",
+    labelKey: "label",
+    valueKey: "id",
     listYPosition: "bottom",
     listXPosition: "left",
     filled: false,

package/ui.dropdown-button/index.vue

@@ -167,7 +167,7 @@ const props = defineProps({
    */
   labelKey: {
     type: String,
-    default: "label",
+    default: UIService.get(defaultConfig, UDropdownButton).default.labelKey,
   },
 
   /**
@@ -175,7 +175,7 @@ const props = defineProps({
    */
   valueKey: {
     type: String,
-    default: "id",
+    default: UIService.get(defaultConfig, UDropdownButton).default.valueKey,
   },
 
   /**

package/ui.dropdown-link/configs/default.config.js

@@ -26,6 +26,8 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
+    labelKey: "label",
+    valueKey: "id",
     listYPosition: "bottom",
     listXPosition: "left",
     underlined: undefined,

package/ui.dropdown-link/index.vue

@@ -68,6 +68,7 @@ import vClickOutside from "../directive.clickOutside";
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
+import { UDropdownButton } from "../ui.dropdown-button/constants/index.js";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownLink", inheritAttrs: false });
@@ -152,7 +153,7 @@ const props = defineProps({
    */
   labelKey: {
     type: String,
-    default: "label",
+    default: UIService.get(defaultConfig, UDropdownButton).default.labelKey,
   },
 
   /**
@@ -160,7 +161,7 @@ const props = defineProps({
    */
   valueKey: {
     type: String,
-    default: "id",
+    default: UIService.get(defaultConfig, UDropdownButton).default.valueKey,
   },
 
   /**

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

@@ -63,6 +63,8 @@ export default /*tw*/ {
   },
   defaultVariants: {
     size: "md",
+    labelKey: "label",
+    valueKey: "id",
     optionHeight: 40,
     maxHeight: undefined,
     disabled: false,

package/ui.dropdown-list/index.vue

@@ -127,7 +127,7 @@ const props = defineProps({
    */
   labelKey: {
     type: String,
-    default: "label",
+    default: UIService.get(defaultConfig, UDropdownList).default.valueKey,
   },
 
   /**
@@ -135,7 +135,7 @@ const props = defineProps({
    */
   valueKey: {
     type: String,
-    default: "id",
+    default: UIService.get(defaultConfig, UDropdownList).default.valueKey,
   },
 
   /**

package/ui.form-input-file/configs/default.config.js

@@ -11,8 +11,8 @@ export default /*tw*/ {
   },
   dropzoneWrapper: {
     base: `
-      size-auto w-full rounded border border-solid border-gray-300 bg-white
-      p-4 px-5 py-6 hover:border-gray-400
+      size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
+      p-4 px-5 py-6 transition-all hover:border-gray-400
     `,
     variants: {
       error: {

package/ui.form-select/index.vue

@@ -163,13 +163,13 @@
         ref="dropdownListRef"
         v-model="dropdownValue"
         :options="filteredOptions"
-        :disabled
-        :size
+        :disabled="disabled"
+        :size="size"
         :max-height="optimizedHeight"
         :option-height="optionHeight"
-        :value-key
-        :label-key
-        :add-option
+        :value-key="valueKey"
+        :label-key="labelKey"
+        :add-option="addOption"
         tabindex="-1"
         v-bind="dropdownListAttrs"
         @focus="activate"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.182",
+  "version": "0.0.184",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1590,6 +1590,15 @@
               },
               "default": "label"
             },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
+            },
             {
               "name": "emptyTitle",
               "description": "Empty state title.",
@@ -2300,7 +2309,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"label\""
+              "default": "label"
             },
             {
               "name": "valueKey",
@@ -2309,7 +2318,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"id\""
+              "default": "id"
             },
             {
               "name": "listYPosition",
@@ -2483,7 +2492,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"label\""
+              "default": "label"
             },
             {
               "name": "valueKey",
@@ -2492,7 +2501,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"id\""
+              "default": "id"
             },
             {
               "name": "listYPosition",
@@ -2694,7 +2703,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"label\""
+              "default": "label"
             },
             {
               "name": "valueKey",
@@ -2703,7 +2712,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"id\""
+              "default": "id"
             },
             {
               "name": "listYPosition",
@@ -2787,7 +2796,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"label\""
+              "default": "label"
             },
             {
               "name": "valueKey",
@@ -2796,7 +2805,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"id\""
+              "default": "id"
             },
             {
               "name": "groupLabel",