vueless 0.0.158 → 0.0.160

package/package.json

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

package/ui.button-toggle/configs/default.config.js

@@ -13,13 +13,13 @@ export default /*tw*/ {
       separated: {
         false: `
           flex-nowrap -space-x-px gap-0
-          [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
-          [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
+          [&>:first-child]:rounded-l-lg  [&>:last-child]:rounded-r-lg
+          [&>:first-child>*>*]:rounded-l-lg  [&>:last-child>*>*]:rounded-r-lg
         `,
       },
     },
     compoundVariants: [
-      { separated: false, variant: "thirdary", class: "space-x-0" },
+      { separated: false, variant: "thirdary", class: "space-x-px" },
       { separated: false, multiple: true, class: "space-x-px" },
     ],
   },

package/ui.button-toggle-item/configs/default.config.js

@@ -12,7 +12,13 @@ export default /*tw*/ {
         false: "rounded-none",
       },
       variant: {
-        thirdary: "border-none hover:bg-brand-600 hover:bg-opacity-5",
+        thirdary: `
+          !text-gray-900 bg-brand-600
+          border-transparent bg-opacity-10
+          hover:border-transparent hover:bg-opacity-15
+          focus:border-transparent focus:bg-opacity-15
+          active:border-transparent active:bg-opacity-20
+        `,
       },
     },
   },
@@ -23,7 +29,7 @@ export default /*tw*/ {
       variant: {
         primary: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
         secondary: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
-        thirdary: "text-brand-600 bg-brand-600 bg-opacity-10",
+        thirdary: " bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
       },
     },
   },

package/ui.form-input-file/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { dropzoneWrapper, placeholder, selectedItem } = config.value;
+  const { dropzoneWrapper, placeholder, contentWrapper } = config.value;
 
   const cvaDropzoneWrapper = cva({
     base: dropzoneWrapper.base,
@@ -20,10 +20,10 @@ export function useAttrs(props) {
     compoundVariants: placeholder.compoundVariants,
   });
 
-  const cvaSelectedItem = cva({
-    base: selectedItem.base,
-    variants: selectedItem.variants,
-    compoundVariants: selectedItem.compoundVariants,
+  const cvaContentWrapper = cva({
+    base: contentWrapper.base,
+    variants: contentWrapper.variants,
+    compoundVariants: contentWrapper.compoundVariants,
   });
 
   const dropzoneWrapperClasses = computed(() =>
@@ -41,9 +41,9 @@ export function useAttrs(props) {
     }),
   );
 
-  const selectedItemClasses = computed(() =>
-    cvaSelectedItem({
-      size: props.size,
+  const contentWrapperClasses = computed(() =>
+    cvaContentWrapper({
+      multiple: props.multiple,
     }),
   );
 
@@ -51,14 +51,14 @@ export function useAttrs(props) {
   const buttonAttrs = getAttrs("button", { isComponent: true });
   const dropzoneWrapperAttrs = getAttrs("dropzoneWrapper", { classes: dropzoneWrapperClasses });
   const descriptionAttrs = getAttrs("description", { isComponent: true });
-  const contentWrapperAttrs = getAttrs("contentWrapper");
   const buttonWrapperAttrs = getAttrs("buttonWrapper");
   const placeholderAttrs = getAttrs("placeholder", { classes: placeholderClasses });
   const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
+  const removeItemIconAttrs = getAttrs("removeItemIcon", { isComponent: true });
   const chooseFileIconAttrs = getAttrs("chooseFileIcon", { isComponent: true });
   const inputAttrs = getAttrs("input");
-  const fileListAttrs = getAttrs("fileList");
-  const selectedItemAttrs = getAttrs("selectedItem", { classes: selectedItemClasses });
+  const fileListAttrs = getAttrs("fileList", { isComponent: true });
+  const contentWrapperAttrs = getAttrs("contentWrapper", { classes: contentWrapperClasses });
 
   return {
     config,
@@ -72,7 +72,7 @@ export function useAttrs(props) {
     placeholderAttrs,
     fileListAttrs,
     buttonWrapperAttrs,
-    selectedItemAttrs,
     chooseFileIconAttrs,
+    removeItemIconAttrs,
   };
 }

package/ui.form-input-file/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
   },
   dropzoneWrapper: {
     base: `
-      size-auto w-full rounded border border-dashed border-gray-300 bg-white
+      size-auto w-full rounded border border-solid border-gray-300 bg-white
       p-4 px-5 py-6 hover:border-gray-400
     `,
     variants: {
@@ -21,24 +21,20 @@ export default /*tw*/ {
     },
     compoundVariants: [
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-8" },
-      { labelAlign: "topInside", label: true, size: "md", class: "py-10" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-10" },
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-12" },
     ],
   },
   description: "text-gray-700",
-  contentWrapper: "relative mt-3 flex w-full gap-6 justify-between items-start rounded bg-brand-50 p-3",
-  fileList: "pr-4 shrink-0 text-gray-700 flex-grow flex flex-col gap-4",
-  placeholder: {
-    base: "pr-4 text-gray-700 flex-grow",
+  contentWrapper: {
+    base: "relative mt-3 flex w-full gap-6 justify-between items-start rounded bg-brand-50 p-3",
     variants: {
-      size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+      multiple: {
+        false: "items-center",
       },
     },
   },
-  selectedItem: {
+  placeholder: {
     base: "pr-4 text-gray-700 flex-grow",
     variants: {
       size: {
@@ -53,8 +49,10 @@ export default /*tw*/ {
   chooseFileIconName: "attach_file",
   clearIcon: "",
   clearIconName: "close",
-  dropzoneWrapperHover: "border-gray-400",
-  dropzoneWrapperError: "hover:border-red-400 border-red-300",
+  removeItemIcon: "",
+  removeItemIconName: "close",
+  dropzoneWrapperHover: "border-gray-400 border-dashed",
+  dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
   buttonWrapper: "flex gap-4 items-center",
   i18n: {

package/ui.form-input-file/index.stories.js

@@ -10,6 +10,9 @@ export default {
   id: "30232",
   title: "Form Inputs & Controls / Input File",
   component: UInputFile,
+  args: {
+    label: "Vueless file input",
+  },
   argTypes: {
     ...getArgTypes(UInputFile.name),
   },
@@ -37,6 +40,27 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
+const LabelAlignTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputFile, URow },
+  setup() {
+    return {
+      args,
+      alignOptions: argTypes.labelAlign.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col" gap="xl">
+      <div v-for="(align, index) in alignOptions" :key="index">
+        <UInputFile
+          :label-align="align"
+          v-bind="args"
+          :label="align"
+        />
+      </div>
+    </URow>
+  `,
+});
+
 const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputFile, URow },
   setup() {
@@ -60,8 +84,17 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+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 error = DefaultTemplate.bind({});
 error.args = { error: "some error" };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
+
+export const labelAlign = LabelAlignTemplate.bind({});
+labelAlign.args = {};

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

@@ -9,18 +9,21 @@
 
         <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
 
-        <div v-else v-bind="fileListAttrs">
-          <template v-if="props.multiple">
-            <span
-              v-for="(file, idx) in currentFiles"
-              :key="idx"
-              v-bind="selectedItemAttrs"
-              v-text="file.name"
+        <UFiles :size="size" v-bind="fileListAttrs" :file-list="fileList">
+          <template #right="{ file }">
+            <UIcon
+              v-if="props.multiple"
+              pill
+              internal
+              interactive
+              size="2xs"
+              :name="config.removeItemIconName"
+              :data-cy="`${dataCy}-remove-item`"
+              v-bind="removeItemIconAttrs"
+              @click.stop.prevent="onClickRemoveItem(file.id)"
             />
           </template>
-
-          <span v-else v-bind="selectedItemAttrs" v-text="currentFiles.name" />
-        </div>
+        </UFiles>
 
         <div v-bind="buttonWrapperAttrs">
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
@@ -31,6 +34,7 @@
               variant="thirdary"
               :size="nestedComponentSize"
               :label="currentLocale.uploadFile"
+              :data-cy="`${dataCy}-upload`"
               v-bind="buttonAttrs"
             >
               <template #right>
@@ -61,6 +65,7 @@
             interactive
             :size="nestedComponentSize"
             :name="config.clearIconName"
+            :data-cy="`${dataCy}-clear`"
             v-bind="clearIconAttrs"
             @click="onClickResetFiles"
           />
@@ -71,13 +76,14 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { merge } from "lodash-es";
 
 import UText from "../ui.text-block";
 import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
 import UButton from "../ui.button";
+import UFiles from "../ui.text-files";
 
 import UIService, { getRandomId } from "../service.ui";
 import { getFileMbSize } from "./services/fileForm.service";
@@ -178,6 +184,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(["update:modelValue", "update:error"]);
@@ -200,7 +214,7 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonWrapperAttrs,
-  selectedItemAttrs,
+  removeItemIconAttrs,
 } = useAttrs(props);
 
 const i18nGlobal = tm(UInputFile);
@@ -234,7 +248,7 @@ const accept = computed(() => {
 
 const isValue = computed(() => {
   return (
-    (Array.isArray(currentFiles.value) && currentFiles.value.length) ||
+    (Array.isArray(currentFiles.value) && currentFiles.value?.length) ||
     (!Array.isArray(currentFiles.value) && currentFiles.value)
   );
 });
@@ -249,6 +263,14 @@ const nestedComponentSize = computed(() => {
   return size;
 });
 
+const fileList = computed(() => {
+  if (Array.isArray(currentFiles.value)) {
+    return currentFiles.value;
+  }
+
+  return currentFiles.value ? [currentFiles.value] : [];
+});
+
 onMounted(() => {
   dropZoneRef.value.addEventListener("dragover", onDragOver);
   dropZoneRef.value.addEventListener("dragleave", onDragLeave);
@@ -259,6 +281,23 @@ onBeforeUnmount(() => {
   dropZoneRef.value.removeEventListener("dragleave", onDragLeave);
 });
 
+watch(
+  () => props.multiple,
+  () => {
+    if (!props.multiple && Array.isArray(currentFiles.value)) {
+      currentFiles.value = currentFiles.value[0];
+    }
+
+    if (props.multiple && !Array.isArray(currentFiles.value)) {
+      currentFiles.value = currentFiles.value ? [currentFiles.value] : [];
+    }
+  },
+);
+
+function removeDuplicates(files) {
+  return files.filter((file) => !fileList.value.find((item) => item.name === file.name));
+}
+
 function validate(file) {
   const targetFileSize = getFileMbSize(file);
 
@@ -287,7 +326,7 @@ function onChangeFile(event) {
   }
 
   currentFiles.value = props.multiple
-    ? [...currentFiles.value, Array.from(event.target.files).at(0)]
+    ? [...(currentFiles.value || []), ...removeDuplicates(Array.from(event.target.files))]
     : Array.from(event.target.files).at(0);
 
   if (fileInputRef.value) fileInputRef.value.value = "";
@@ -314,24 +353,32 @@ function onDragLeave(event) {
 function onDrop(event) {
   event.preventDefault();
 
-  let targetFile = null;
+  let targetFiles = null;
 
   if (event.dataTransfer.items) {
-    targetFile = [...event.dataTransfer.items].find((item) => item.kind === "file")?.getAsFile();
+    targetFiles = [...event.dataTransfer.items]
+      .filter((item) => item.kind === "file")
+      .map((item) => item.getAsFile());
   } else {
-    targetFile = [...event.dataTransfer.files].at(0);
+    targetFiles = [...event.dataTransfer.files];
   }
 
-  if (targetFile) validate(targetFile);
+  if (targetFiles.length) targetFiles.forEach(validate);
 
   nextTick(() => {
-    if (currentError.value || !targetFile) {
+    if (currentError.value || !targetFiles.length) {
       onClickResetFiles();
 
       return;
     }
 
-    currentFiles.value = props.multiple ? [...currentFiles.value, targetFile] : targetFile;
+    currentFiles.value = props.multiple
+      ? [...(currentFiles.value || []), ...removeDuplicates(targetFiles)]
+      : targetFiles[0];
   });
 }
+
+function onClickRemoveItem(id) {
+  currentFiles.value = currentFiles.value?.filter((file) => file.name !== id);
+}
 </script>

package/ui.text-alert/configs/default.config.js

@@ -43,9 +43,5 @@ export default /*tw*/ {
     bordered: false,
     closeIcon: false,
   },
-  safelist: (colors) => [
-    { pattern: `bg-(${colors})-50` },
-    { pattern: `text-(${colors})-700` },
-    { pattern: `border-(${colors})-100` },
-  ],
+  safelist: (colors) => [{ pattern: `bg-(${colors})-50` }, { pattern: `text-(${colors})-700` }, { pattern: `border-(${colors})-100` }],
 };

package/ui.text-file/composables/attrs.composable.js

@@ -6,32 +6,33 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props, { focus }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { text } = config.value;
+  const { label } = config.value;
 
-  const cvaText = cva({
-    base: text.base,
-    variants: text.variants,
-    compoundVariants: text.compoundVariants,
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
   });
 
-  const textClasses = computed(() =>
-    cvaText({
+  const labelClasses = computed(() =>
+    cvaLabel({
       focus: Boolean(focus.value),
+      size: props.size,
     }),
   );
 
-  const textAttrs = getAttrs("text", { classes: textClasses });
+  const labelAttrs = getAttrs("label", { classes: labelClasses });
   const fileAttrs = getAttrs("file", { isComponent: true });
   const infoAttrs = getAttrs("info");
   const iconAttrs = getAttrs("icon", { isComponent: true });
-  const itemImageAttrs = getAttrs("itemImage");
+  const imageAttrs = getAttrs("image");
 
   return {
     config,
     fileAttrs,
     infoAttrs,
     iconAttrs,
-    textAttrs,
-    itemImageAttrs,
+    labelAttrs,
+    imageAttrs,
   };
 }

package/ui.text-file/configs/default.config.js

@@ -1,15 +1,20 @@
 export default /*tw*/ {
   file: "",
-  info: "flex items-start",
-  icon: "mr-3",
+  info: "flex items-center gap-2 ",
+  icon: "",
   iconName: "description",
-  itemImage: "rounded-sm",
-  text: {
-    base: "whitespace-normal pt-0.5 hover:underline hover:decoration-dashed hover:underline-offset-4",
+  image: "rounded-sm max-w-7",
+  label: {
+    base: "text-gray-700 whitespace-normal hover:underline hover:decoration-dashed hover:underline-offset-4",
     variants: {
       focus: {
         true: "underline decoration-dashed underline-offset-4",
       },
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
     },
   },
 };

package/ui.text-file/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UFile = "UFile";

package/ui.text-file/index.vue

@@ -1,9 +1,9 @@
 <template>
   <ULink :url="url" no-ring target-blank :data-cy="dataCy" v-bind="fileAttrs">
-    <slot name="left" :file="{ id, text, url, imageUrl }" />
+    <slot name="left" :file="{ id, label, url, imageUrl }" />
 
     <div v-bind="infoAttrs">
-      <img v-if="imageUrl" :src="imageUrl" v-bind="itemImageAttrs" />
+      <img v-if="imageUrl" :src="imageUrl" v-bind="imageAttrs" />
 
       <UIcon
         v-else
@@ -16,7 +16,7 @@
         @blur="onBlur"
       />
 
-      <span v-bind="textAttrs" v-text="label" />
+      <span v-bind="labelAttrs" v-text="label" />
     </div>
 
     <slot name="right" :file="{ id, label, url, imageUrl }" />
@@ -28,9 +28,12 @@ import { ref } from "vue";
 
 import ULink from "../ui.button-link";
 import UIcon from "../ui.image-icon";
-import { getRandomId } from "../service.ui";
+
+import UIService, { getRandomId } from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
+import { UFile } from "./constants";
+import defaultConfig from "./configs/default.config";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UFile", inheritAttrs: false });
@@ -69,6 +72,15 @@ const props = defineProps({
     default: () => getRandomId(),
   },
 
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UFile).default.size,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -80,7 +92,7 @@ const props = defineProps({
 
 const focus = ref(false);
 
-const { config, fileAttrs, infoAttrs, iconAttrs, textAttrs, itemImageAttrs } = useAttrs(props, {
+const { config, fileAttrs, infoAttrs, iconAttrs, labelAttrs, imageAttrs } = useAttrs(props, {
   focus,
 });
 

package/ui.text-files/composables/attrs.composable.js

@@ -1,17 +1,26 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+  const { getAttrs, config } = useUI(defaultConfig, () => props.config);
+  const { body } = config.value;
+
+  const cvaBody = cva({
+    base: body.base,
+    variants: body.variants,
+    compoundVariants: body.compoundVariants,
+  });
+
+  const bodyClasses = computed(() => cvaBody({ label: Boolean(props.label) }));
 
-  const filesAttrs = getAttrs("files");
   const labelAttrs = getAttrs("label");
-  const bodyAttrs = getAttrs("body");
+  const bodyAttrs = getAttrs("body", { classes: bodyClasses });
   const fileAttrs = getAttrs("file", { isComponent: true });
 
   return {
-    filesAttrs,
     labelAttrs,
     bodyAttrs,
     fileAttrs,

package/ui.text-files/configs/default.config.js

@@ -1,9 +1,16 @@
 export default /*tw*/ {
-  files: "",
   label: "block text-sm font-normal text-gray-500",
-  body: "space-y-2 mt-4",
+  body: {
+    base: "flex gap-4 flex-col",
+    variants: {
+      label: {
+        true: "mt-4",
+      },
+    },
+  },
   file: "block",
   defaultVariants: {
     placement: "topInside",
+    size: "md",
   },
 };

package/ui.text-files/index.stories.js

@@ -11,9 +11,9 @@ export default {
   component: UFiles,
   args: {
     label: "Label",
-    options: [
-      { text: "some file text 1", url: "https://storybook.js.org/" },
-      { text: "some file text 2", url: "https://storybook.js.org/" },
+    fileList: [
+      new File(["foo"], "foo.txt", { type: "text/plain" }),
+      new File(["bar"], "foo.txt", { type: "text/plain" }),
     ],
   },
   argTypes: {

package/ui.text-files/index.vue

@@ -1,31 +1,31 @@
 <template>
-  <div :data-cy="dataCy" v-bind="filesAttrs">
-    <ULabel :label="label" :description="description" v-bind="labelAttrs">
-      <div v-bind="bodyAttrs">
-        <slot>
-          <UFile
-            v-for="(option, index) in options"
-            :id="option.id"
-            :key="option.text"
-            :label="option.text"
-            :url="option.url"
-            :data-cy="`${dataCy}-item-${index}`"
-            v-bind="fileAttrs"
-          >
-            <template #left="{ file }">
-              <!-- @slot Use it to add something left. -->
-              <slot name="left" :file="file" />
-            </template>
+  <ULabel :label="label" :description="description" v-bind="labelAttrs">
+    <div v-bind="bodyAttrs">
+      <slot>
+        <UFile
+          v-for="file in formattedFileList"
+          :id="file.id"
+          :key="file.id"
+          :label="file.label"
+          :url="file.url"
+          :image-url="file.imageUrl"
+          :size="size"
+          v-bind="fileAttrs"
+          :data-cy="`${dataCy}-item`"
+        >
+          <template #left="{ file: currentFile }">
+            <!-- @slot Use it to add something left. -->
+            <slot name="left" :file="currentFile" />
+          </template>
 
-            <template #right="{ file }">
-              <!-- @slot Use it to add something right. -->
-              <slot name="right" :file="file" />
-            </template>
-          </UFile>
-        </slot>
-      </div>
-    </ULabel>
-  </div>
+          <template #right="{ file: currentFile }">
+            <!-- @slot Use it to add something right. -->
+            <slot name="right" :file="currentFile" />
+          </template>
+        </UFile>
+      </slot>
+    </div>
+  </ULabel>
 </template>
 
 <script setup>
@@ -36,6 +36,7 @@ import UIService from "../service.ui";
 import { UFiles } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
+import { computed } from "vue";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UFiles", inheritAttrs: false });
@@ -67,13 +68,22 @@ const props = defineProps({
   },
 
   /**
-   * Set options for files.
+   * List of file objects.
    */
-  options: {
+  fileList: {
     type: Array,
     default: () => [],
   },
 
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UFiles).default.size,
+  },
+
   /**
    * Sets data-cy attribute for automated testing.
    */
@@ -83,5 +93,16 @@ const props = defineProps({
   },
 });
 
-const { filesAttrs, labelAttrs, bodyAttrs, fileAttrs } = useAttrs(props);
+const { labelAttrs, bodyAttrs, fileAttrs } = useAttrs(props);
+
+const formattedFileList = computed(() =>
+  props.fileList.map((file) => {
+    return {
+      id: file.name,
+      label: file.name,
+      url: URL.createObjectURL(file),
+      imageUrl: file.type.includes("image") ? URL.createObjectURL(file) : undefined,
+    };
+  }),
+);
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.158",
+  "version": "0.0.160",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2840,6 +2840,15 @@
               },
               "default": "() => getRandomId()"
             },
+            {
+              "name": "size",
+              "description": "Set size.",
+              "value": {
+                "kind": "expression",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              "default": "UIService.get(defaultConfig, UFile).default.size"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",
@@ -2895,14 +2904,23 @@
               "default": "topInside"
             },
             {
-              "name": "options",
-              "description": "Set options for files.",
+              "name": "fileList",
+              "description": "List of file objects.",
               "value": {
                 "kind": "expression",
                 "type": "array"
               },
               "default": "[]"
             },
+            {
+              "name": "size",
+              "description": "Set size.",
+              "value": {
+                "kind": "expression",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              "default": "md"
+            },
             {
               "name": "dataCy",
               "description": "Sets data-cy attribute for automated testing.",
@@ -3595,6 +3613,15 @@
                 "type": "object"
               },
               "default": "{}"
+            },
+            {
+              "name": "dataCy",
+              "description": "Data-cy attribute for automated testing.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
             }
           ],
           "events": [