vueless 0.0.417 → 0.0.419

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.417",
+  "version": "0.0.419",
   "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-range/UDatePickerRangePeriodMenu.vue

@@ -102,7 +102,7 @@
       <UButton
         square
         no-ring
-        size="xs"
+        size="sm"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -117,7 +117,7 @@
       <UButton
         square
         no-ring
-        size="xs"
+        size="sm"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"

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.417",
+  "version": "0.0.419",
   "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"
@@ -4031,6 +4034,10 @@
                 {
                   "type": "object",
                   "name": "file"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             },
@@ -4042,6 +4049,10 @@
                 {
                   "type": "object",
                   "name": "file"
+                },
+                {
+                  "type": "number",
+                  "name": "index"
                 }
               ]
             }