vueless 0.0.159 → 0.0.161

package/composable.ui/index.js

@@ -58,8 +58,8 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
 
     const commonAttrs = {
       ...attrs,
-      component: isDev && (attrs.component || componentName || null),
-      "config-key": isDev && (attrs["config-key"] || configKey || null),
+      component: isDev ? attrs.component || componentName || null : null,
+      "config-key": isDev ? attrs["config-key"] || configKey || null : null,
       "child-component": isDev && attrs.component ? componentName : null,
       "child-config-key": isDev && attrs.component ? configKey : null,
     };

package/package.json

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

package/ui.data-table/composables/attrs.composable.js

@@ -39,20 +39,22 @@ export function useAttrs(
 
   const wrapperClasses = computed(() => cvaWrapper({ compact: props.compact }));
 
-  const customHeaderItemClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
+  const stickyHeaderColumnClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
 
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const customHeaderItemAttrsRaw = getAttrs("stickyHeaderColumn", {
-    classes: customHeaderItemClasses,
+  const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
+  const stickyHeaderColumnAttrsRaw = getAttrs("stickyHeaderColumn", {
+    classes: stickyHeaderColumnClasses,
   });
   const selectedRowsCountAttrs = getAttrs("selectedRowsCount");
   const selectAllCheckboxAttrs = getAttrs("selectAllCheckbox", { isComponent: true });
   const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
+  const tableWrapperAttrsRaw = getAttrs("tableWrapper");
   const tableAttrs = getAttrs("table");
   const headerAttrs = getAttrs("header");
-  const headerRowAttrs = getAttrs("headerRow");
+  const headerRowAttrsRaw = getAttrs("headerRow");
   const headerCellAttrsRaw = getAttrs("headerCell", { classes: headerCellClasses });
   const headerSelectAllCheckboxAttrs = getAttrs("headerSelectAllCheckbox", { isComponent: true });
   const tableLoaderAttrs = getAttrs("tableLoader", { isComponent: true });
@@ -66,6 +68,7 @@ export function useAttrs(
   const toggleItemButtonAttrs = getAttrs("toggleItemButton");
   const secondaryRowAttrs = getAttrs("secondaryRow");
   const secondaryRowEmptyAttrs = getAttrs("secondaryRowEmpty");
+  const footerAttrsRaw = getAttrs("footer");
   const footerRowAttrs = getAttrs("footerRow");
   const footerCellAttrs = getAttrs("footerCell", { isComponent: true });
   const footerStickyRowAttrs = getAttrs("footerStickyRow");
@@ -74,6 +77,7 @@ export function useAttrs(
   const beforeFirstRowCellAttrs = getAttrs("beforeFirstRowCell", { isComponent: true });
   const afterLastRowAttrsRaw = getAttrs("afterLastRow");
   const afterLastRowCellAttrs = getAttrs("afterLastRowCell", { isComponent: true });
+  const toggleButtonWrapperAttrsRaw = getAttrs("toggleButtonWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
@@ -101,35 +105,35 @@ export function useAttrs(
   }));
 
   const tableWrapperAttrs = computed(() => ({
+    ...tableWrapperAttrsRaw.value,
     class: cx([
-      config.value.innerWrapper,
-      selectedRows.value.length && config.value.innerWrapperSelected,
+      tableWrapperAttrsRaw.value.class,
+      selectedRows.value.length && config.value.tableWrapperSelected,
     ]),
   }));
 
-  const headerRowCellAttrs = computed(() => ({
+  const headerRowAttrs = computed(() => ({
+    ...headerRowAttrsRaw.value,
     class: cx([
-      config.value.headerRow,
+      headerRowAttrsRaw.value.class,
       selectedRows.value.length && !isHeaderSticky.value && config.value.stickyHeaderHidden,
     ]),
   }));
 
-  const stickyHeaderAttrs = computed(() => {
-    // console.log("hasSlotContentTheadActions", hasSlotContentTheadActions.value);
-
-    return {
-      class: cx([
-        config.value.stickyHeader,
-        selectedRows.value.length &&
-          hasSlotContentTheadActions.value &&
-          config.value.stickyHeaderActions,
-        isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
-      ]),
-    };
-  });
+  const stickyHeaderAttrs = computed(() => ({
+    ...stickyHeaderAttrsRaw.value,
+    class: cx([
+      stickyHeaderAttrsRaw.value.class,
+      selectedRows.value.length &&
+        hasSlotContentTheadActions.value &&
+        config.value.stickyHeaderActions,
+      isHeaderSticky.value && props.stickyHeader && config.value.stickyHeaderActive,
+    ]),
+  }));
 
   const footerClassesAttrs = computed(() => ({
-    class: cx([config.value.footer, isFooterSticky.value && config.value.footerSticky]),
+    ...footerAttrsRaw.value,
+    class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.footerSticky]),
   }));
 
   const afterLastRowAttrs = computed(() => ({
@@ -141,8 +145,8 @@ export function useAttrs(
   }));
 
   const stickyHeaderColumnAttrs = computed(() => (thClass) => ({
-    ...customHeaderItemAttrsRaw.value,
-    class: cx([customHeaderItemAttrsRaw.value.class, thClass]),
+    ...stickyHeaderColumnAttrsRaw.value,
+    class: cx([stickyHeaderColumnAttrsRaw.value.class, thClass]),
   }));
 
   const dateSeparatorRowAttrs = (rowIndex) => {
@@ -158,6 +162,7 @@ export function useAttrs(
   };
 
   const toggleButtonWrapperAttrs = computed(() => (index) => ({
+    ...toggleButtonWrapperAttrsRaw.value,
     class: index === 0 && isNesting.value ? config.value.toggleButtonWrapper : "",
   }));
 
@@ -167,7 +172,8 @@ export function useAttrs(
     stickyHeaderColumnAttrs,
     stickyHeaderAttrs,
     tableWrapperAttrs,
-    headerRowCellAttrs,
+    headerCellAttrs,
+    headerRowAttrs,
     bodyRowAttrs,
     footerClassesAttrs,
     afterLastRowAttrs,
@@ -176,7 +182,6 @@ export function useAttrs(
     beforeFirstRowCellAttrs,
     dateSeparatorRowAttrs,
     toggleButtonWrapperAttrs,
-    headerCellAttrs,
     bodyCellAttrs,
     checkboxBodyWrapperCellAttrs,
     footerCellAttrs,
@@ -190,7 +195,6 @@ export function useAttrs(
     selectedRowsCountAttrs,
     stickyHeaderLoaderAttrs,
     tableAttrs,
-    headerRowAttrs,
     tableLoaderAttrs,
     bodyAttrs,
     toggleItemButtonAttrs,

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

@@ -20,8 +20,8 @@ export default /*tw*/ {
   stickyHeaderColumn: "flex-none text-sm font-normal text-gray-500 p-4 whitespace-nowrap",
   selectedRowsCount: "absolute left-11 pr-2 font-medium text-sm text-gray-900 bg-gradient-to-r from-white from-80%",
   selectAllCheckbox: "flex-none text-sm font-normal text-gray-500 pr-[1.125rem] pl-4 py-4 group-[]/table-compact:!px-4",
-  innerWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
-  innerWrapperSelected: "!rounded-t-none border-t-0",
+  tableWrapper: "!overflow-x-auto rounded-lg border border-gray-200",
+  tableWrapperSelected: "!rounded-t-none border-t-0",
   table: "min-w-full border-none text-sm w-full",
   tableLoader: "absolute !top-auto",
   moreRow: "!px-0 !py-4 first:mx-auto",

package/ui.data-table/index.vue

@@ -492,7 +492,7 @@ const {
   stickyHeaderColumnAttrs,
   stickyHeaderAttrs,
   tableWrapperAttrs,
-  headerRowCellAttrs,
+  headerRowAttrs,
   afterLastRowAttrs,
   afterLastRowCellAttrs,
   beforeFirstRowAttrs,
@@ -515,7 +515,6 @@ const {
   selectedRowsCountAttrs,
   stickyHeaderLoaderAttrs,
   tableAttrs,
-  headerRowAttrs,
   tableLoaderAttrs,
   bodyAttrs,
   toggleItemButtonAttrs,

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.159",
+  "version": "0.0.161",
   "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": [