vueless 0.0.231 → 0.0.232

package/package.json

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

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

@@ -12,7 +12,16 @@ export default /*tw*/ {
   `,
   dragIcon: "{UIcon} icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
   dragIconName: "drag_indicator",
-  label: "text-base font-normal text-gray-900 flex-auto pt-px",
+  label: {
+    base: "font-normal text-gray-900 flex-auto pt-px",
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+    },
+  },
   labelCrossed: "line-through",
   customActions: `
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
@@ -32,9 +41,10 @@ export default /*tw*/ {
     emptyDescription: "There is no data in the list.",
   },
   defaultVariants: {
-    animationDuration: 200,
+    size: "md",
     labelKey: "label",
     valueKey: "id",
+    animationDuration: 200,
     nesting: false,
     upperlined: false,
   },

package/ui.data-list/index.vue

@@ -25,7 +25,13 @@
       <template #item="{ element }">
         <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" />
+            <UIcon
+              internal
+              color="gray"
+              :size="iconSize"
+              :name="config.dragIconName"
+              v-bind="dragIconAttrs"
+            />
 
             <div v-bind="labelAttrs(element.isActive)">
               <!--
@@ -54,6 +60,7 @@
                 internal
                 interactive
                 color="gray"
+                :size="iconSize"
                 :name="config.deleteIconName"
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
@@ -66,6 +73,7 @@
                 internal
                 interactive
                 color="gray"
+                :size="iconSize"
                 :name="config.editIconName"
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
@@ -142,6 +150,15 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Data list size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UDataListName).default.size,
+  },
+
   /**
    * Label key in the item object of options.
    */
@@ -267,6 +284,16 @@ const { tm } = useLocale();
 const i18nGlobal = tm(UDataListName);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 function onDragMove(event) {
   const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;
   const isNestingAction = !event.relatedContext.element?.isDisabledNesting;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.231",
+  "version": "0.0.232",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1798,6 +1798,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "size",
+              "description": "Data list size.",
+              "value": {
+                "kind": "expression",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              "default": "md"
+            },
             {
               "name": "labelKey",
               "description": "Label key in the item object of options.",