vueless 0.0.155 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "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/ui.form-checkbox/configs/default.config.js

@@ -1,14 +1,16 @@
 export default /*tw*/ {
-  label: "w-auto max-w-max relative gap-3",
+  label: "w-auto max-w-max relative", // TODO: label classes should be defined in ULabel component
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {
     base: "flex items-center justify-center absolute rounded bg-{color}-500",
     variants: {
       size: {
+        xs: "size-4",
         sm: "size-5",
         md: "size-6",
         lg: "size-7",
+        xl: "size-8",
       },
       color: {
         grayscale: "border-gray-900 bg-gray-900",
@@ -18,24 +20,24 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
-      border border-solid border-{color}-300 rounded bg-white
-      hover:border-{color}-400
-      focus:border-{color}-500 focus:ring-4 focus:ring-{color}-200 focus:ring-offset-0
+      border border-solid rounded
+      border-gray-300 bg-white
+      hover:border-gray-400
+      focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
       active:border-{color}-500 active:bg-{color}-500
-      checked:border-{color}-500 checked:bg-{color}-500 checked:hover:bg-{color}-500
-      checked:text-{color}-500 checked:bg-none
-      checked:focus:text-{color}-500 checked:active:text-{color}-500
+      checked:border-{color}-500 checked:bg-{color}-500 checked:text-{color}-500
+      checked:hover:bg-{color}-500 checked:focus:text-{color}-500 checked:active:text-{color}-500
     `,
     variants: {
       size: {
+        xs: "size-4 text-xs",
         sm: "size-5 text-sm",
         md: "size-6",
         lg: "size-7 text-lg",
+        xl: "size-6 text-xl",
       },
       color: {
         grayscale: `
-          border-gray-300
-          hover:border-gray-400
           focus:border-gray-500 focus:ring-gray-200
           checked:border-gray-900 checked:bg-gray-900 checked:text-gray-900
           active:border-gray-900 active:bg-gray-900
@@ -58,12 +60,9 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `bg-(${colors})-900` /* , variants: ["checked:hover", "checked", "active"] */ },
-    { pattern: `border-(${colors})-300` },
-    { pattern: `border-(${colors})-400`, variants: ["hover"] },
-    { pattern: `border-(${colors})-500`, variants: ["focus"] },
-    { pattern: `border-(${colors})-500`, variants: ["active", "checked"] },
+    { pattern: `bg-(${colors})-500`, variants: ["active", "checked", "checked:hover"] },
+    { pattern: `border-(${colors})-500`, variants: ["focus", "active", "checked"] },
     { pattern: `text-(${colors})-500`, variants: ["checked:focus", "checked", "checked:active"] },
-    { pattern: `ring-(${colors})-200`, variants: ["focus"] },
+    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
   ],
 };

package/ui.form-date-picker-range/index.vue

@@ -831,7 +831,7 @@ function deactivate() {
 function onBlur(event) {
   const { relatedTarget } = event;
 
-  if (!menuRef.value.contains(relatedTarget)) {
+  if (!menuRef.value?.contains(relatedTarget)) {
     deactivate();
   }
 }
@@ -844,7 +844,7 @@ function onBlurRangeInput(event) {
     menuRef.value.focus();
   }
 
-  if (!menuRef.value.contains(relatedTarget) && !isHoverEvent.value) {
+  if (!menuRef.value?.contains(relatedTarget) && !isHoverEvent.value) {
     deactivate();
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "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": {