vueless 0.0.418 → 0.0.420

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.418",
+  "version": "0.0.420",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button-toggle/storybook/stories.js

@@ -6,13 +6,6 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-const OPTIONS = [
-  { value: "11", label: "label 1" },
-  { value: "12", label: "label 2" },
-  { value: "13", label: "label 3" },
-  { value: "14", label: "label 4" },
-];
-
 /**
  * The `UToggle` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle)
  */
@@ -20,6 +13,14 @@ export default {
   components: { UIcon, UToggleItem },
   title: "Buttons & Links / Toggle",
   component: UToggle,
+  args: {
+    options: [
+      { value: "11", label: "label 1" },
+      { value: "12", label: "label 2" },
+      { value: "13", label: "label 3" },
+      { value: "14", label: "label 4" },
+    ],
+  },
   argTypes: {
     ...getArgTypes(UToggle.__name),
     modelValue: { control: { type: "text" } },
@@ -29,18 +30,12 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UToggle, UIcon, UToggleItem },
   setup() {
-    const value = ref("");
-
     const slots = getSlotNames(UToggle.__name);
 
-    return { args, slots, value, OPTIONS };
+    return { args, slots };
   },
   template: `
-    <UToggle
-      v-bind="args"
-      v-model="value"
-      :options="OPTIONS"
-    >
+    <UToggle v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment()}
     </UToggle>
   `,

package/ui.data-list/UDataList.vue

@@ -1,7 +1,5 @@
 <template>
   <div v-bind="wrapperAttrs">
-    <UDivider v-if="upperlined" size="xl" padding="after" v-bind="dividerAttrs" />
-
     <!--
       @slot Use it to add something instead of the drag icon.
       @binding {string} empty-title
@@ -38,10 +36,16 @@
           <div :data-test="`${dataTest}-item-${element[valueKey]}`" v-bind="itemAttrs">
             <!--
               @slot Use it to add something instead of the drag icon.
+              @binding {object} item
               @binding {string} icon-name
               @binding {string} icon-size
             -->
-            <slot name="drag" :icon-name="config.defaults.dragIcon" :icon-size="iconSize">
+            <slot
+              name="drag"
+              :item="element"
+              :icon-name="config.defaults.dragIcon"
+              :icon-size="iconSize"
+            >
               <UIcon
                 internal
                 color="gray"
@@ -76,10 +80,16 @@
 
               <!--
                 @slot Use it to add something instead of the delete icon.
+                @binding {object} item
                 @binding {string} icon-name
                 @binding {string} icon-size
               -->
-              <slot name="delete" :icon-name="config.defaults.deleteIcon" :icon-size="iconSize">
+              <slot
+                name="delete"
+                :item="element"
+                :icon-name="config.defaults.deleteIcon"
+                :icon-size="iconSize"
+              >
                 <UIcon
                   v-if="!element.isHiddenDelete"
                   internal
@@ -96,10 +106,16 @@
 
               <!--
                 @slot Use it to add something instead of the edit icon.
+                @binding {object} item
                 @binding {string} icon-name
                 @binding {string} icon-size
               -->
-              <slot name="edit" :icon-name="config.defaults.editIcon" :icon-size="iconSize">
+              <slot
+                name="edit"
+                :item="element"
+                :icon-name="config.defaults.editIcon"
+                :icon-size="iconSize"
+              >
                 <UIcon
                   v-if="!element.isHiddenEdit"
                   internal
@@ -244,14 +260,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDataListName).nesting,
   },
 
-  /**
-   * Add line divider above the list.
-   */
-  upperlined: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UDataListName).upperlined,
-  },
-
   /**
    * Disable empty state for nested elements if empty (internal props).
    * @ignore
@@ -303,7 +311,6 @@ const emit = defineEmits([
 const {
   config,
   wrapperAttrs,
-  dividerAttrs,
   emptyAttrs,
   draggableAttrs,
   nestedAttrs,

package/ui.data-list/config.js

@@ -43,7 +43,6 @@ export default /*tw*/ {
     valueKey: "id",
     animationDuration: 200,
     nesting: false,
-    upperlined: false,
     /* icons */
     dragIcon: "drag_indicator",
     deleteIcon: "delete",

package/ui.form-date-picker/UDatePicker.vue

@@ -28,8 +28,14 @@
       </template>
 
       <template #right-icon>
-        <!-- @slot Use it add an icon after the date. -->
-        <slot name="right-icon" />
+        <!--
+          @slot Use it add an icon after the date.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="size">
+          <UIcon :name="rightIcon" :size="size" color="gray" />
+        </slot>
       </template>
 
       <template #right>
@@ -68,6 +74,7 @@
 import { computed, nextTick, ref, useId } from "vue";
 import { merge } from "lodash-es";
 
+import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
 import { VIEW, STANDARD_USER_FORMAT } from "../ui.form-calendar/constants.js";
@@ -223,7 +230,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDatePicker).calendarIcon,
   },
 
   /**

package/ui.form-date-picker/config.js

@@ -123,5 +123,7 @@ export default /*tw*/ {
     dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    /* icons */
+    calendarIcon: "calendar_month-fill",
   },
 };

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

@@ -28,8 +28,14 @@
       </template>
 
       <template #right-icon>
-        <!-- @slot Use it to add icon after the date. -->
-        <slot name="right-icon" />
+        <!--
+          @slot Use it add an icon after the date.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="size">
+          <UIcon :name="rightIcon" :size="size" color="gray" />
+        </slot>
       </template>
 
       <template #right>
@@ -147,6 +153,7 @@
 import { computed, watch, ref, nextTick, provide, useId } from "vue";
 import { getDefault } from "../utils/utilUI.js";
 
+import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";
 import UCalendar from "../ui.form-calendar/UCalendar.vue";
 import UDatePickerRangePeriodMenu from "./UDatePickerRangePeriodMenu.vue";
@@ -293,7 +300,7 @@ const props = defineProps({
    */
   rightIcon: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDatePickerRange).calendarIcon,
   },
 
   /**

package/ui.form-date-picker-range/config.js

@@ -202,5 +202,6 @@ export default /*tw*/ {
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
     ownRangeIcon: "apps",
+    calendarIcon: "calendar_month-fill",
   },
 };

package/ui.form-input/UInput.vue

@@ -333,8 +333,6 @@ const inputRef = ref(null);
 const labelComponentRef = ref(null);
 const leftSlotWrapperRef = ref(null);
 
-defineExpose({ inputRef });
-
 const isTypePassword = computed(() => props.type === "password");
 
 const inputValue = computed({
@@ -469,6 +467,14 @@ function setLabelPosition() {
     labelComponentRef.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
   }
 }
+
+defineExpose({
+  /**
+   * A reference to the input element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  inputRef,
+});
 </script>
 
 <style lang="postcss" scoped>

package/ui.text-files/UFiles.vue

@@ -10,7 +10,7 @@
       <!-- @slot Use it to add UFile. -->
       <slot>
         <UFile
-          v-for="file in formattedFileList"
+          v-for="(file, index) in formattedFileList"
           :id="file.id"
           :key="file.id"
           :label="file.label"
@@ -23,15 +23,17 @@
           <template #left="{ file: currentFile }">
             <!-- @slot Use it to add something left.
               @binding {object} file
+              @binding {number} index
             -->
-            <slot name="left" :file="currentFile" />
+            <slot name="left" :file="currentFile" :index="index" />
           </template>
 
           <template #right="{ file: currentFile }">
             <!-- @slot Use it to add something right.
               @binding {object} file
+              @binding {number} index
             -->
-            <slot name="right" :file="currentFile" />
+            <slot name="right" :file="currentFile" :index="index" />
           </template>
         </UFile>
       </slot>

package/utils/utilStorybook.js

@@ -119,6 +119,33 @@ export function getArgTypes(componentName) {
     }
   });
 
+  component.exposes?.forEach((expose) => {
+    const properties = [];
+
+    expose.properties?.forEach((property) => {
+      const description = property.description ? ` (${property.description})` : "";
+
+      properties.push(`${property.type}${description}`);
+    });
+
+    types[`${expose.name}Expose`] = {
+      type: expose.properties ? properties.join(", ") : null,
+      name: expose.name,
+      description: expose.description,
+      control: false,
+      table: { category: "expose" },
+    };
+
+    // Hide autogenerated expose docs, but keep props with the same name
+    if (!component.attributes?.map((item) => item.name)?.includes(expose.name)) {
+      types[expose.name] = {
+        table: {
+          disable: true,
+        },
+      };
+    }
+  });
+
   component.events?.forEach((event) => {
     const properties = [];
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.418",
+  "version": "0.0.420",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2135,15 +2135,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "upperlined",
-              "description": "Add line divider above the list.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "hideEmptyStateForNesting",
               "description": "@ignore: Disable empty state for nested elements if empty (internal props).",
@@ -2243,6 +2234,10 @@
               "scoped": true,
               "description": "Use it to add something instead of the drag icon.",
               "bindings": [
+                {
+                  "type": "object",
+                  "name": "item"
+                },
                 {
                   "type": "string",
                   "name": "icon-name"
@@ -2284,6 +2279,10 @@
               "scoped": true,
               "description": "Use it to add something instead of the delete icon.",
               "bindings": [
+                {
+                  "type": "object",
+                  "name": "item"
+                },
                 {
                   "type": "string",
                   "name": "icon-name"
@@ -2299,6 +2298,10 @@
               "scoped": true,
               "description": "Use it to add something instead of the edit icon.",
               "bindings": [
+                {
+                  "type": "object",
+                  "name": "item"
+                },
                 {
                   "type": "string",
                   "name": "icon-name"
@@ -2466,7 +2469,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "getDefault(defaultConfig, UDatePicker).calendarIcon"
             },
             {
               "name": "disabled",
@@ -2551,7 +2554,18 @@
             },
             {
               "name": "right-icon",
-              "description": "Use it add an icon after the date."
+              "scoped": true,
+              "description": "Use it add an icon after the date.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                }
+              ]
             },
             {
               "name": "right",
@@ -2661,7 +2675,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "getDefault(defaultConfig, UDatePickerRange).calendarIcon"
             },
             {
               "name": "label",
@@ -2761,7 +2775,18 @@
             },
             {
               "name": "right-icon",
-              "description": "Use it to add icon after the date."
+              "scoped": true,
+              "description": "Use it add an icon after the date.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                }
+              ]
             },
             {
               "name": "right",
@@ -4031,6 +4056,10 @@
                 {
                   "type": "object",
                   "name": "file"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             },
@@ -4042,6 +4071,10 @@
                 {
                   "type": "object",
                   "name": "file"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             }