vueless 0.0.818 → 0.0.820

package/package.json

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

package/ui.container-divider/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex",
+    base: "flex relative",
     variants: {
       vertical: {
         true: "h-full w-fit",

package/ui.data-table/config.ts

@@ -82,7 +82,7 @@ export default /*tw*/ {
   },
   bodySelectedDateDivider: {
     base: "{>bodyDateDivider}",
-    label: "bg-gray-100 transition",
+    label: "!bg-gray-100 transition",
   },
   bodyEmptyState: "{UEmpty} my-8",
   bodyEmptyStateCell: "",

package/ui.form-input-file/UInputFile.vue

@@ -319,8 +319,15 @@ const {
           :removable="multiple && !disabled"
           @remove="onClickRemoveItem"
         >
-          <template #right="{ file }">
-            <slot name="right" :file="file" />
+          <template #default="{ id, label, url, imageUrl }">
+            <!--
+              @slot Use it to add a file directly.
+              @binding {string | number} id
+              @binding {string} label
+              @binding {string} url
+              @binding {string} image-url
+            -->
+            <slot :id="id" :label="label" :url="url" :image-url="imageUrl" />
           </template>
         </UFiles>
 

package/ui.form-input-file/storybook/stories.ts

@@ -7,6 +7,8 @@ import {
 
 import UInputFile from "../../ui.form-input-file/UInputFile.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -21,7 +23,8 @@ export default {
   title: "Form Inputs & Controls / Input File",
   component: UInputFile,
   args: {
-    label: "Vueless file input",
+    label: "Choose a file to upload",
+    files: [],
   },
   argTypes: {
     ...getArgTypes(UInputFile.__name),
@@ -34,22 +37,14 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs) => ({
-  components: { UInputFile },
+  components: { UInputFile, UBadge },
   setup() {
     const slots = getSlotNames(UInputFile.__name);
 
     return { args, slots };
   },
-  data() {
-    return {
-      files: [],
-    };
-  },
   template: `
-    <UInputFile
-      v-bind="args"
-      v-model="files"
-    >
+    <UInputFile v-bind="args" v-model="args.files">
       ${args.slotTemplate || getSlotsFragment("")}
     </UInputFile>
   `,
@@ -79,14 +74,29 @@ const EnumVariantTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs, { ar
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "Ensure the document is clear and readable before uploading." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "Upload failed. Please try again later." };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true };
 
-export const AllowedFileTypes = DefaultTemplate.bind({});
-AllowedFileTypes.args = { allowedFileTypes: ["png", "jpeg"], label: "Allow only png and jpeg" };
+export const MaxFileSize = DefaultTemplate.bind({});
+MaxFileSize.args = {
+  description: "File size limit is 5 MB.",
+  maxFileSize: 5,
+};
 
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error" };
+export const AllowedFileTypes = DefaultTemplate.bind({});
+AllowedFileTypes.args = {
+  allowedFileTypes: ["png", "jpeg"],
+  description: "Only png and jpeg formats are allowed.",
+};
 
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
@@ -94,11 +104,51 @@ Sizes.args = { enum: "size" };
 export const LabelAlign = EnumVariantTemplate.bind({});
 LabelAlign.args = { enum: "labelAlign" };
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
+export const SlotLabel = DefaultTemplate.bind({});
+SlotLabel.args = {
   slotTemplate: `
-    <template #left>
-      🤘
+    <template #label="{ label }">
+      <UBadge :label="label" />
     </template>
   `,
 };
+
+export const Slots: StoryFn<UInputFileArgs> = (args) => ({
+  components: { UInputFile, UCol, UBadge, UIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UCol>
+      <UInputFile
+        v-bind="args"
+        v-model="args.files"
+        label="Slot Top"
+      >
+        <template #top>
+          <UBadge label="Pending Review..." />
+        </template>
+      </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="args.files"
+        label="Slot Left"
+      >
+        <template #left>
+          <UIcon name="info" color="orange" />
+        </template>
+      </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="args.files"
+        label="Slot Bottom"
+      >
+        <template #bottom>
+          <UBadge label="An antivirus check will be performed after file upload." />
+        </template>
+      </UInputFile>
+    </UCol>
+  `,
+});

package/ui.text-file/UFile.vue

@@ -29,10 +29,10 @@ const emit = defineEmits([
 
 const focus = ref(false);
 
-const elementId = props.id || useId();
+const fileId = props.id || useId();
 
 function onRemove() {
-  emit("remove", props.id);
+  emit("remove", fileId);
 }
 
 function onFocus() {
@@ -61,9 +61,17 @@ const {
 
 <template>
   <ULink :href="url" v-bind="fileAttrs" :data-test="getDataTest()">
-    <slot name="left" :file="{ elementId, label, url, imageUrl }" />
-
-    <slot :file="{ elementId, label, url, imageUrl }">
+    <!-- @slot Use it to add something before the file. -->
+    <slot name="left" />
+
+    <!--
+      @slot Use it to add a file directly.
+      @binding {string | number} id
+      @binding {string} label
+      @binding {string} url
+      @binding {string} image-url
+    -->
+    <slot :id="fileId" :label="label" :url="url" :image-url="imageUrl">
       <div v-bind="bodyAttrs">
         <img v-if="imageUrl" :alt="label" :src="imageUrl" v-bind="fileImageAttrs" />
 
@@ -82,7 +90,8 @@ const {
       </div>
     </slot>
 
-    <slot name="right" :file="{ elementId, label, url, imageUrl }">
+    <!-- @slot Use it to add something after the file. -->
+    <slot name="right">
       <UIcon
         v-if="removable"
         internal

package/ui.text-file/types.ts

@@ -25,7 +25,7 @@ export interface Props {
   size?: "sm" | "md" | "lg";
 
   /**
-   * Unique element id.
+   * Unique file id.
    */
   id?: string;
 

package/ui.text-files/UFiles.vue

@@ -86,20 +86,38 @@ const { getDataTest, filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(de
           :data-test="getDataTest(`item-${index}`)"
           @remove="onRemoveFile"
         >
-          <template #left="{ file: currentFile }">
-            <!-- @slot Use it to add something left.
-              @binding {object} file
+          <template #left>
+            <!--
+              @slot Use it to add something left.
               @binding {number} index
             -->
-            <slot name="left" :file="currentFile" :index="index" />
+            <slot name="left" :index="index" />
           </template>
 
-          <template #right="{ file: currentFile }">
-            <!-- @slot Use it to add something right.
-              @binding {object} file
+          <template #default="{ id, label, url, imageUrl }">
+            <!-- @slot Use it to add a file directly.
+              @binding {string | number} id
+              @binding {string} label
+              @binding {string} url
+              @binding {string} image-url
               @binding {number} index
             -->
-            <slot name="right" :file="currentFile" :index="index" />
+            <slot
+              :id="id"
+              name="default"
+              :label="label"
+              :url="url"
+              :image-url="imageUrl"
+              :index="index"
+            />
+          </template>
+
+          <template #right>
+            <!--
+              @slot Use it to add something right.
+              @binding {number} index
+            -->
+            <slot name="right" :index="index" />
           </template>
         </UFile>
       </slot>