vueless 0.0.98 → 0.0.100

package/assets/icons/attach_file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M737.33-324.39q0 105.46-74.69 177.91-74.69 72.46-180.26 72.46-105.58 0-180.35-72.46-74.77-72.45-74.77-177.85v-383.82q0-74.63 53.41-126.35 53.42-51.72 127.75-51.72 74.34 0 127.69 51.72 53.35 51.72 53.35 126.35v363.82q0 43.66-31.56 74.62-31.55 30.97-75.81 30.97-44.26 0-75.61-30.64t-31.35-74.95v-370h66.46v370q0 16.05 11.97 27.59t29.2 11.54q17.24 0 28.74-11.5 11.5-11.51 11.5-27.63v-363.58q.24-47.35-33.38-79.6-33.62-32.25-81.35-32.25-47.74 0-81.14 32.19-33.41 32.19-33.41 79.42v383.82q.24 77.83 55.57 130.96 55.33 53.13 133.62 53.13 77.86 0 133.03-53.16 55.17-53.17 54.93-130.93v-396.93h66.46v396.87Z"/></svg>

package/composable.ui/index.js

@@ -176,10 +176,10 @@ function mergeConfigs({
     if (isGlobalConfig || isPropsConfig) {
       if (key === "strategy") {
         config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
-      } else if (key === "safelist") {
+      } else if (key === "safelist" || key === "safelistColors") {
         if (propsConfig[key]) {
           // eslint-disable-next-line no-console
-          console.warn("Passing component safelist by `config` prop is not supported.");
+          console.warn(`Passing '${key}' key by 'config' prop is not allowed.`);
         }
       } else if (key === "defaultVariants") {
         config[key] = { ...defaultConfig[key], ...globalConfig[key], ...propsConfig[key] };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -25,9 +25,6 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
-    "@uppy/core": "^3.10.1",
-    "@uppy/drag-drop": "^3.1.0",
-    "@uppy/vue": "^1.1.2",
     "cva": "^1.0.0-beta.1",
     "lodash-es": "^4.17.21",
     "tailwind-merge": "^2.3.0",

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

@@ -149,6 +149,7 @@ export default /*tw*/ {
     color: "brand",
     variant: "primary",
     size: "md",
+    tag: "button",
     pill: false,
     block: false,
     square: false,

package/ui.button/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <button
+  <component
+    :is="tag"
     :id="id"
     ref="buttonRef"
     :disabled="disabled"
@@ -19,7 +20,7 @@
 
     <!-- @slot Use it to add something after text. -->
     <slot v-if="!loading" name="right" />
-  </button>
+  </component>
 </template>
 
 <script setup>
@@ -136,6 +137,11 @@ const props = defineProps({
     default: () => ({}),
   },
 
+  tag: {
+    type: String,
+    default: UIService.get(defaultConfig, UButton).default.tag,
+  },
+
   /**
    * Data-cy attribute for automated testing.
    */

package/ui.container-page/configs/default.config.js

@@ -2,7 +2,7 @@ export default /*tw*/ {
   htmlBody: "bg-gray-50 group/body-gray",
   wrapperMobile: "overflow-x-hidden mb-[theme('spacing.mobile-menu-height')]",
   wrapper: {
-    base: "min-h-screen overflow-auto UNotifyPage",
+    base: "min-h-screen UNotifyPage",
     variants: {
       width: {
         xs: "md:w-[25rem] md:max-[500px]:!w-full",

package/ui.form-input/index.vue

@@ -360,7 +360,7 @@ function transformValue(value, exp) {
 }
 
 function setLabelPosition() {
-  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
+  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
   const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 

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

@@ -1,82 +1,67 @@
 import { computed } from "vue";
 import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { errorMessage, dragOver }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { upload, block } = config.value;
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { dropzoneWrapper, placeholder } = config.value;
 
-  const cvaUpload = cva({
-    base: upload.base,
-    variants: upload.variants,
-    compoundVariants: upload.compoundVariants,
+  const cvaDropzoneWrapper = cva({
+    base: dropzoneWrapper.base,
+    variants: dropzoneWrapper.variants,
+    compoundVariants: dropzoneWrapper.compoundVariants,
   });
 
-  const cvaBlock = cva({
-    base: block.base,
-    variants: block.variants,
-    compoundVariants: block.compoundVariants,
+  const cvaPlaceholder = cva({
+    base: placeholder.base,
+    variants: placeholder.variants,
+    compoundVariants: placeholder.compoundVariants,
   });
 
-  const uploadClasses = computed(() =>
-    cvaUpload({
-      size: props.size,
+  const dropzoneWrapperClasses = computed(() =>
+    cvaDropzoneWrapper({
+      error: Boolean(props.error),
       label: Boolean(props.label),
-      error: Boolean(errorMessage.value),
+      labelAlign: props.labelAlign,
+      size: props.size,
     }),
   );
 
-  const blockClasses = computed(() =>
-    cvaBlock({
-      label: Boolean(props.label),
+  const placeholderClasses = computed(() =>
+    cvaPlaceholder({
+      size: props.size,
     }),
   );
 
-  const uploadAttrs = getAttrs("upload", { classes: uploadClasses });
-  const buttonAttrs = getAttrs("button", { isComponent: true });
-  const iconUploadFileAttrs = getAttrs("iconUploadFile", { isComponent: true });
-  const wrapperAttrs = getAttrs("wrapper");
   const labelAttrs = getAttrs("label", { isComponent: true });
-  const blockAttrs = getAttrs("block", { classes: blockClasses });
-  const descriptionAttrs = getAttrs("description");
-  const listAttrs = getAttrs("list");
-  const itemCloseAttrs = getAttrs("itemClose");
-  const iconCloseRaw = getAttrs("iconClose", {
-    classes: itemCloseAttrs.value.class,
+  const buttonAttrs = getAttrs("button", { isComponent: true });
+  const dropzoneWrapperAttrs = getAttrs("dropzoneWrapper", { classes: dropzoneWrapperClasses });
+  const descriptionAttrs = getAttrs("description", { isComponent: true });
+  const buttonWrapperAttrs = getAttrs("buttonWrapper");
+  const placeholderWrapperAttrs = getAttrs("placeholderWrapper");
+  const placeholderAttrs = getAttrs("placeholder", {
+    classes: placeholderClasses,
     isComponent: true,
   });
-
-  const iconCloseAttrs = computed(() => ({
-    ...iconCloseRaw.value,
-    class: cx([iconCloseRaw.value.class, itemCloseAttrs.value.class]),
-  }));
-
-  const uppyUploadRaw = getAttrs("uppyUpload");
-
-  const uppyUploadAttrs = computed(() => ({
-    ...uppyUploadRaw.value,
-    class: cx([uppyUploadRaw.value.class, dragOver.value && config.dragOver]),
-  }));
-
-  const uploadSlotAttrs = getAttrs("uploadSlot");
-  const filesAttrs = getAttrs("files", { isComponent: true });
+  const iconPlaceholderAttrs = getAttrs("iconPlaceholder", { isComponent: true });
+  const iconCloseAttrs = getAttrs("iconClose", { isComponent: true });
+  const iconUploadFileAttrs = getAttrs("iconUploadFile", { isComponent: true });
+  const inputAttrs = getAttrs("input");
 
   return {
     config,
-    uploadAttrs,
-    buttonAttrs,
-    iconUploadFileAttrs,
-    iconCloseAttrs,
-    wrapperAttrs,
+    inputAttrs,
     labelAttrs,
-    blockAttrs,
+    buttonAttrs,
+    dropzoneWrapperAttrs,
     descriptionAttrs,
-    listAttrs,
-    uppyUploadAttrs,
-    uploadSlotAttrs,
-    filesAttrs,
-    hasSlotContent,
+    buttonWrapperAttrs,
+    placeholderWrapperAttrs,
+    iconPlaceholderAttrs,
+    iconCloseAttrs,
+    iconUploadFileAttrs,
+    placeholderAttrs,
   };
 }

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

@@ -1,59 +1,63 @@
 export default /*tw*/ {
-  wrapper: "w-full relative",
-  label: "group/label mb-2 font-normal text-gray-500",
-  block: {
-    base: "mb-4 space-x-2 flex",
-    variants: {
-      label: {
-        true: "mt-4",
-      },
+  label: {
+    wrapper: "relative w-full",
+    label: {
+      compoundVariants: [
+        { align: "topInside", size: "sm", class: "left-5 top-4" },
+        { align: "topInside", size: "md", class: "left-5 top-5" },
+        { align: "topInside", size: "lg", class: "left-5 top-6" },
+      ],
     },
   },
-  description: "group/description font-normal text-gray-700",
-  list: "mb-4 space-y-4",
-  button: "w-full",
-  iconUploadFileName: "upload_file",
-  iconDescriptionName: "description",
-  iconCloseName: "close",
-  iconClose: "ml-1.5",
-  iconUploadFile: "",
-  itemClose: "z-20",
-  uploadSlot: "w-fit",
-  files: "mt-4",
-  fileUploadHover: "border-gray-400 bg-gray-50",
-  dragOver: "h-full w-full",
-  uppyUpload: "opacity-0 absolute left-0 top-0 h-0 w-0 [&_.uppy-Root]:h-full [&_.uppy-Root]:w-full",
-  errorFileUpload: "hover:border-red-400 border-red-300",
-  upload: {
+  dropzoneWrapper: {
     base: `
-      relative rounded-lg border border-dashed border-gray-300 bg-white h-auto w-auto p-4
-      hover:border-gray-400 hover:bg-gray-50
+      size-auto w-full rounded border border-dashed border-gray-300 bg-white
+      p-4 px-5 py-6 hover:border-gray-400
     `,
     variants: {
-      size: {
-        sm: "group/label:text-xs group/description:text-xs group/image:h-8 group/image:w-8 group/title:text-sm",
-        md: "group/text-sm group/description:text-sm group/image:h-10 group/image:w-10 group/title:text-base",
-        ld: "group/label:text-base group/description:text-base group/image:h-12 group/image:w-12 group/title:text-lg",
-      },
       error: {
         true: "border-red-300 hover:border-red-400",
       },
     },
+    compoundVariants: [
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-8" },
+      { labelAlign: "topInside", label: true, size: "md", class: "py-10" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-12" },
+    ],
   },
+  description: "text-gray-700",
+  buttonWrapper: "relative mt-3 flex w-full gap-52 justify-between rounded bg-brand-50 p-4",
+  placeholderWrapper: "flex items-center gap-2",
+  placeholder: {
+    base: "pr-4 shrink-0 text-ellipsis overflow-hidden text-gray-700 text-nowrap",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  iconPlaceholderName: "attach_file",
+  iconPlaceholder: "-rotate-45",
+  button: "hover:cursor-pointer",
+  iconUploadFileName: "upload_file",
+  iconCloseName: "close",
+  iconClose: "",
+  iconUploadFile: "",
+  dropzoneWrapperHover: "border-gray-400 bg-gray-50",
+  dropzoneWrapperError: "hover:border-red-400 border-red-300",
+  input: "sr-only pointer-events-none size-0 opacity-0",
   i18n: {
-    selectOrDragImage: "Select or drag file in this area.",
-    canAttachFilesFormat: "You can attach files in the format:",
-    cannotAttachFilesStart: "Attaching files in",
-    cannotAttachFilesEnd: "format is not supported.",
-    selectFile: "Select file",
+    sizeError: "File size is too big.",
+    formatError: "Format is not supported.",
+    noFile: "No file selected",
+    uploadFile: "Upload file",
   },
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",
     allowedFileTypes: [".png", ".jpg", ".jpeg", ".pdf", ".txt", ".doc", ".docx", "xls", ".xlsx"],
-    maxFileSize: 1,
-    maxFiles: 3,
-    local: false,
-    multiple: false,
+    maxFileSize: 100,
   },
 };

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

@@ -1,11 +1,10 @@
 import { getArgTypes } from "../service.storybook";
 
 import UInputFile from "../ui.form-input-file";
-import UButton from "../ui.button";
 import URow from "../ui.container-row";
 
 export default {
-  id: "3020",
+  id: "30232",
   title: "Form Inputs & Controls / Input File",
   component: UInputFile,
   argTypes: {
@@ -18,29 +17,23 @@ const DefaultTemplate = (args) => ({
   setup() {
     return { args };
   },
+  data() {
+    return {
+      files: [],
+      error: args.error || "",
+    };
+  },
   template: `
     <URow>
       <UInputFile
         v-bind="args"
+        v-model="files"
+        v-model:error="error"
       />
     </URow>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UInputFile, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInputFile
-      v-bind="args"
-    >
-      ${args.slotTemplate}
-    </UInputFile>
-  `,
-});
-
 const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputFile, URow },
   setup() {
@@ -64,23 +57,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const allowedSomeFileType = DefaultTemplate.bind({});
-allowedSomeFileType.args = { allowedFileTypes: [".png", ".jpg", ".jpeg"] };
-
-export const sizes = SizesTemplate.bind({});
-sizes.args = {};
-
-export const multiple = DefaultTemplate.bind({});
-multiple.args = { multiple: true };
-
 export const error = DefaultTemplate.bind({});
 error.args = { error: "some error" };
 
-export const slotDefault = SlotTemplate.bind({});
-slotDefault.args = {
-  slotTemplate: `
-    <template #default>
-       <UButton class="w-[40rem]" label="Select file" color="red" />
-    </template>
-  `,
-};
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};

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

@@ -1,84 +1,78 @@
 <template>
-  <div v-bind="wrapperAttrs">
-    <div v-if="!hasSlotContent($slots['default'])">
-      <ULabel
-        :label="props.label"
-        :description="props.description"
-        :align="labelAlign"
-        :error="errorMessage"
-        v-bind="labelAttrs"
-      >
-        <div :id="fileId" :data-cy="dataCy" v-bind="uploadAttrs">
-          <div v-if="!filesData.length" v-bind="blockAttrs">
-            <UIcon
-              internal
-              color="gray"
-              :size="componentSize"
-              :name="config.iconUploadFileName"
-              v-bind="iconUploadFileAttrs"
-            />
-
-            <div v-bind="descriptionAttrs" v-text="descriptionText" />
-          </div>
-
-          <div v-bind="listAttrs">
-            <UFiles :options="filesList" v-bind="filesAttrs">
-              <template #right="file">
-                <UIcon
-                  internal
-                  interactive
-                  color="gray"
-                  :size="componentSize"
-                  :name="config.iconCloseName"
-                  v-bind="iconCloseAttrs"
-                  @click="onClickDeleteFile(file)"
-                />
-              </template>
-            </UFiles>
-          </div>
+  <ULabel :error="error" :align="labelAlign" :label="label" :size="size" v-bind="labelAttrs">
+    <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneWrapperAttrs">
+      <UText :size="nestedComponentSize" v-bind="descriptionAttrs" :html="description" />
+
+      <div v-bind="buttonWrapperAttrs">
+        <div v-bind="placeholderWrapperAttrs">
+          <UIcon
+            pill
+            internal
+            :size="nestedComponentSize"
+            :name="config.iconPlaceholderName"
+            v-bind="iconPlaceholderAttrs"
+          />
+          <span v-bind="placeholderAttrs" v-text="placeholder" />
+        </div>
 
+        <template v-if="!currentFiles.length">
           <UButton
-            :label="currentLocale.selectFile"
-            :size="size"
+            class="hover:cursor-pointer"
+            :label="currentLocale.uploadFile"
             variant="thirdary"
             filled
-            :data-cy="`${dataCy}-upload`"
+            :size="nestedComponentSize"
             v-bind="buttonAttrs"
-            @click="onClickUploadFile"
+            tag="label"
+            :for="id"
+          >
+            <template #right>
+              <UIcon
+                internal
+                :size="nestedComponentSize"
+                :name="config.iconUploadFileName"
+                v-bind="iconUploadFileAttrs"
+              />
+            </template>
+          </UButton>
+
+          <input
+            :id="id"
+            ref="fileInputRef"
+            type="file"
+            :accept="accept"
+            v-bind="inputAttrs"
+            @change="onChangeFile"
           />
-
-          <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
-        </div>
-      </ULabel>
+        </template>
+        <UIcon
+          v-else
+          interactive
+          internal
+          :size="nestedComponentSize"
+          :name="config.iconCloseName"
+          pill
+          v-bind="iconCloseAttrs"
+          @click="onClickResetFiles"
+        />
+      </div>
     </div>
-
-    <div v-else :id="fileId" :data-cy="dataCy" v-bind="uploadSlotAttrs" @click="onClickUploadFile">
-      <slot />
-
-      <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
-    </div>
-  </div>
+  </ULabel>
 </template>
 
 <script setup>
-import Uppy from "@uppy/core";
-import DragDrop from "@uppy/vue/src/drag-drop";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
-
-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";
 
-import { UInputFile } from "./constants";
-import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 
+import { UInputFile } from "./constants";
+import defaultConfig from "./configs/default.config";
+
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UInputFile" });
 
@@ -88,7 +82,7 @@ const props = defineProps({
    */
   label: {
     type: String,
-    default: "",
+    default: "Label",
   },
 
   /**
@@ -96,7 +90,7 @@ const props = defineProps({
    */
   description: {
     type: String,
-    default: "",
+    default: "Some description here",
   },
 
   /**
@@ -108,22 +102,11 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UInputFile).default.labelAlign,
   },
 
-  /**
-   * Set files data.
-   */
-  files: {
+  modelValue: {
     type: Array,
     default: () => [],
   },
 
-  /**
-   * Selected files will be imported when a form will be submitted
-   */
-  local: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputFile).default.local,
-  },
-
   /**
    * Set max file size in megabytes.
    */
@@ -132,22 +115,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UInputFile).default.maxFileSize,
   },
 
-  /**
-   * Allow to select multiple files.
-   */
-  multiple: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputFile).default.multiple,
-  },
-
-  /**
-   * Set max number files for upload
-   */
-  maxFiles: {
-    type: Number,
-    default: UIService.get(defaultConfig, UInputFile).default.maxFiles,
-  },
-
   /**
    * Set allowed file types.
    */
@@ -157,20 +124,20 @@ const props = defineProps({
   },
 
   /**
-   * Set error text for component.
+   * Set size.
+   * @values sm, md, lg
    */
-  error: {
+  size: {
     type: String,
-    default: "",
+    default: UIService.get(defaultConfig, UInputFile).default.size,
   },
 
   /**
-   * Set size.
-   * @values sm, md, lg
+   * Set error text for component.
    */
-  size: {
+  error: {
     type: String,
-    default: UIService.get(defaultConfig, UInputFile).default.size,
+    default: "",
   },
 
   /**
@@ -181,211 +148,147 @@ const props = defineProps({
     type: String,
     default: () => getRandomId(),
   },
-
   /**
-   * Sets data-cy attribute for automated testing.
+   * Sets component ui config object.
    */
-  dataCy: {
-    type: String,
-    default: "",
+  config: {
+    type: Object,
+    default: () => ({}),
   },
 });
 
-const emit = defineEmits(["changeFiles", "deleteFile"]);
+const emit = defineEmits(["update:modelValue", "update:error"]);
 
 const { tm } = useLocale();
 
-const filesData = ref([]);
-const selectedFiles = ref([]);
-const errorMessage = ref("");
-const dragOver = ref(false);
-const errorFilesTypes = ref([]);
+const dropZoneRef = ref(null);
+const fileInputRef = ref(null);
 
 const {
   config,
-  uploadAttrs,
-  buttonAttrs,
-  iconUploadFileAttrs,
-  iconCloseAttrs,
-  wrapperAttrs,
   labelAttrs,
-  blockAttrs,
+  buttonAttrs,
+  dropzoneWrapperAttrs,
   descriptionAttrs,
-  listAttrs,
-  uppyUploadAttrs,
-  uploadSlotAttrs,
-  filesAttrs,
-  hasSlotContent,
-} = useAttrs(props, { errorMessage, dragOver });
+  buttonWrapperAttrs,
+  placeholderWrapperAttrs,
+  iconPlaceholderAttrs,
+  iconCloseAttrs,
+  iconUploadFileAttrs,
+  placeholderAttrs,
+  inputAttrs,
+} = useAttrs(props);
 
 const currentLocale = computed(() => merge(tm("UInputFile"), props.config.i18n));
 
-const filesList = computed(() => {
-  return filesData.value.map((file) => {
-    return {
-      text: file.name,
-      id: file.id,
-    };
-  });
+const currentFiles = computed({
+  get: () => props.modelValue,
+  set: (newValue) => emit("update:modelValue", newValue),
 });
 
-const fileId = computed(() => {
-  return `file-${props.id}`;
+const currentError = computed({
+  get: () => props.error,
+  set: (newValue) => emit("update:error", newValue),
 });
 
-const uppyId = computed(() => {
-  return `uppy-${props.id}`;
+const accept = computed(() => {
+  return props.allowedFileTypes.join(",");
 });
 
-const fileUpload = computed(() => {
-  return document.getElementById(fileId.value);
+const extensionNames = computed(() => {
+  return props.allowedFileTypes.map((type) => type.replace(".", ""));
 });
 
-const uppyUpload = computed(() => {
-  return document.getElementById(uppyId.value);
-});
-
-const allowedFilesForUpload = computed(() => {
-  const allowedFormat = props.allowedFileTypes.join(", ");
-
-  return `${currentLocale.value.canAttachFilesFormat} ${allowedFormat}`;
+const placeholder = computed(() => {
+  return currentFiles.value.length ? currentFiles.value[0].name : currentLocale.value.noFile;
 });
 
-const descriptionText = computed(() => {
-  return `${currentLocale.value.selectOrDragImage} ${allowedFilesForUpload.value}`;
-});
+const nestedComponentSize = computed(() => {
+  let size = "sm";
 
-const componentSize = computed(() => {
-  const size = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
+  if (props.size === "sm") size = "xs";
+  if (props.size === "md") size = "sm";
+  if (props.size === "lg") size = "md";
 
-  return size[props.size];
+  return size;
 });
 
-const maxFileSizeInBytes = computed(() => {
-  return props.maxFileSize * Math.pow(2, 20);
+onMounted(() => {
+  dropZoneRef.value.addEventListener("dragover", onDragOver);
+  dropZoneRef.value.addEventListener("dragleave", onDragLeave);
 });
 
-const maxFilesNumber = computed(() => {
-  return props.multiple ? props.maxFiles : 1;
+onBeforeUnmount(() => {
+  dropZoneRef.value.removeEventListener("dragover", onDragOver);
+  dropZoneRef.value.removeEventListener("dragleave", onDragLeave);
 });
 
-const uppy = computed(() =>
-  new Uppy({
-    id: uppyId.value,
-    restrictions: {
-      maxFileSize: maxFileSizeInBytes,
-      maxNumberOfFiles: maxFilesNumber,
-      allowedFileTypes: props.allowedFileTypes,
-    },
-  }).on("restriction-failed", (file, error) => {
-    const isFile = errorFilesTypes.value.find((item) => item === file.extension);
-
-    if (error && !isFile) errorFilesTypes.value.push(`.${file.extension}`);
-  }),
-);
-
-watch(selectedFiles, onChangeSelectedFiles, { deep: true });
-watch(() => props.files, onChangeFiles, { deep: true });
-watch(errorFilesTypes, onChangeErrorFilesTypes, { deep: true });
-watch(() => props.error, onChangeError, { deep: true, immediate: true });
-
-onMounted(() => {
-  uppy.value.on("file-added", () => {
-    uploadFiles();
-  });
+function validate(file) {
+  const targetFileSize = getFileMbSize(file);
 
-  addEventListener("dragover", () => (dragOver.value = true));
+  const isValidType = extensionNames.value.some((item) => file.type.includes(item));
+  const isValidSize = targetFileSize <= props.maxFileSize;
 
-  if (uppyUpload.value) {
-    uppyUpload.value.addEventListener("dragover", onDragOver, true);
-    uppyUpload.value.addEventListener("dragleave", onDragLeave, true);
+  if (!isValidSize) {
+    currentError.value = currentLocale.value.sizeError;
   }
-});
-
-onBeforeUnmount(() => {
-  removeEventListener("dragover", () => (dragOver.value = true));
-  uppyUpload.value.removeEventListener("dragover", onDragOver, true);
-  uppyUpload.value.removeEventListener("dragleave", onDragLeave, true);
-});
 
-function onClickUploadFile() {
-  document.querySelector(`#${fileId.value} .uppy-Root button`).click();
+  if (!isValidType) {
+    currentError.value = currentLocale.value.formatError;
+  }
 }
 
-function uploadFiles() {
-  const { files } = uppy.value.getState();
+function onChangeFile(event) {
+  validate(event.target.files[0]);
 
-  selectedFiles.value = Object.values(files);
-}
+  if (currentError.value) {
+    onClickResetFiles();
 
-function onDragOver() {
-  fileUpload.value.classList.add(config.fileUploadHover);
-}
+    return;
+  }
 
-function onDragLeave() {
-  fileUpload.value.classList.remove(config.fileUploadHover);
-  dragOver.value = false;
+  currentFiles.value = Array.from(event.target.files);
 }
 
-function onChangeSelectedFiles() {
-  uppy.value.cancelAll();
+function onClickResetFiles() {
+  currentFiles.value = [];
 
-  const selectedFilesData = selectedFiles.value.map((file) => {
-    file.data.id = getRandomId();
-
-    return file.data;
-  });
-
-  if (!props.error && errorMessage.value) {
-    errorMessage.value = "";
-    errorFilesTypes.value = [];
-  }
+  if (fileInputRef.value) fileInputRef.value.value = "";
+}
 
-  if (props.local) filesData.value = selectedFilesData;
+function onDragOver(event) {
+  event.preventDefault();
 
-  emit("changeFiles", selectedFilesData);
+  dropZoneRef.value.classList.add(config.value.dropzoneWrapperHover.split(" "));
 }
 
-function onChangeFiles() {
-  filesData.value = props.files;
-
-  if (!props.error && errorMessage.value) {
-    errorMessage.value = "";
-    errorFilesTypes.value = [];
-  }
+function onDragLeave(event) {
+  event.preventDefault();
 
-  onDragLeave();
+  dropZoneRef.value.classList.remove(config.value.dropzoneWrapperHover.split(" "));
 }
 
-function onChangeError() {
-  errorMessage.value = props.error;
-}
+function onDrop(event) {
+  event.preventDefault();
 
-function onChangeErrorFilesTypes() {
-  if (errorFilesTypes.value.length) {
-    const error = errorFilesTypes.value.join(", ");
-    const cannotAttachFilesStart = currentLocale.value.cannotAttachFilesStart;
-    const cannotAttachFilesEnd = currentLocale.value.cannotAttachFilesEnd;
+  let targetFile = null;
 
-    errorMessage.value = `${cannotAttachFilesStart} ${error} ${cannotAttachFilesEnd}`;
+  if (event.dataTransfer.items) {
+    targetFile = [...event.dataTransfer.items].find((item) => item.kind === "file")?.getAsFile();
+  } else {
+    targetFile = [...event.dataTransfer.files].at(0);
   }
-}
-
-function onClickDeleteFile(data) {
-  const index = filesData.value.findIndex((file) => file.id === data.file.id);
 
-  if (~index) {
-    filesData.value.splice(index, 1);
+  if (targetFile) validate(targetFile);
 
-    uppy.value.removeFile(data.file.id);
+  nextTick(() => {
+    if (currentError.value || !targetFile) {
+      onClickResetFiles();
 
-    emit("deleteFile", data.file.id);
+      return;
+    }
 
-    if (props.local) emit("changeFiles", filesData.value);
-  }
+    currentFiles.value = [targetFile];
+  });
 }
 </script>

package/ui.form-input-file/services/fileForm.service.js

@@ -0,0 +1,5 @@
+const bytesInMegabyte = 1024 * 1024;
+
+export function getFileMbSize(file) {
+  return (file.size / bytesInMegabyte).toFixed(2);
+}

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

@@ -6,7 +6,7 @@ export default /*tw*/ {
     decimalScale: 2,
     decimalSeparator: ",",
     thousandsSeparator: " ",
-    labelOutside: false,
+    labelAlign: "topInside",
     positiveOnly: false,
     rawValuePrefix: false,
     minus: false,

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

@@ -2,7 +2,7 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 
 import UInputMoney from "../ui.form-input-money";
 import URow from "../ui.container-row";
-import UGroup from "../ui.container-group";
+// import UGroup from "../ui.container-group";
 
 export default {
   id: "3030",
@@ -56,29 +56,30 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const LabelPlacementTemplate = (args) => ({
-  components: { UInputMoney, UGroup },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `
-    <UGroup size="lg">
-      <UInputMoney
-        v-bind="args"
-        :label-outside="true"
-        label="top"
-      />
-
-      <UInputMoney
-        v-bind="args"
-        :label-outside="false"
-        label="topInside"
-      />
-    </UGroup>
-  `,
-});
+// TODO: Rewrite to labelAlign
+// const LabelPlacementTemplate = (args) => ({
+//   components: { UInputMoney, UGroup },
+//   setup() {
+//     return {
+//       args,
+//     };
+//   },
+//   template: `
+//     <UGroup size="lg">
+//       <UInputMoney
+//         v-bind="args"
+//         :label-outside="true"
+//         label="top"
+//       />
+//
+//       <UInputMoney
+//         v-bind="args"
+//         :label-outside="false"
+//         label="topInside"
+//       />
+//     </UGroup>
+//   `,
+// });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
@@ -89,8 +90,8 @@ sizes.args = {};
 export const symbol = DefaultTemplate.bind({});
 symbol.args = { symbol: "€" };
 
-export const labelOutside = LabelPlacementTemplate.bind({});
-labelOutside.args = {};
+// export const labelOutside = LabelPlacementTemplate.bind({});
+// labelOutside.args = {};
 
 export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "Placeholder" };

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

@@ -5,7 +5,7 @@
     v-model="formattedValue"
     :size="size"
     :label="localLabel"
-    :label-outside="labelOutside"
+    :label-align="labelAlign"
     :placeholder="placeholder"
     :description="description"
     :error="error"
@@ -67,11 +67,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the input block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputMoney).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.labelAlign,
   },
 
   /**

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

@@ -13,8 +13,8 @@ export default /*tw*/ {
   button: "",
   defaultVariants: {
     size: "md",
+    labelAlign: "topInside",
     disabled: false,
     searchButton: false,
-    labelOutside: false,
   },
 };

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

@@ -12,7 +12,7 @@
     :type="search"
     :input-mode="search"
     :data-cy="dataCy"
-    :label-outside="labelOutside"
+    :label-align="labelAlign"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
   >
@@ -136,11 +136,12 @@ const props = defineProps({
   },
 
   /**
-   * Show label outside the input block.
+   * Set label placement related from the default slot.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputSearch).default.labelOutside,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputSearch).default.labelAlign,
   },
 
   /**

package/ui.form-select/index.vue

@@ -713,7 +713,7 @@ function removeElement(option, shouldClose = true) {
 }
 
 function setLabelPosition() {
-  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
+  if (props.labelAlign === "top" || !hasSlotContent(slots["left"])) return;
 
   const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
   const innerWrapperPaddingLeft = parseInt(

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -635,6 +635,14 @@
               },
               "default": "{}"
             },
+            {
+              "name": "tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "button"
+            },
             {
               "name": "dataCy",
               "description": "Data-cy attribute for automated testing.",
@@ -3440,7 +3448,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "\"Label\""
             },
             {
               "name": "description",
@@ -3449,7 +3457,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "\"Some description here\""
             },
             {
               "name": "labelAlign",
@@ -3461,23 +3469,13 @@
               "default": "topInside"
             },
             {
-              "name": "files",
-              "description": "Set files data.",
+              "name": "modelValue",
               "value": {
                 "kind": "expression",
                 "type": "array"
               },
               "default": "[]"
             },
-            {
-              "name": "local",
-              "description": "Selected files will be imported when a form will be submitted",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "maxFileSize",
               "description": "Set max file size in megabytes.",
@@ -3485,25 +3483,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "1"
-            },
-            {
-              "name": "multiple",
-              "description": "Allow to select multiple files.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "maxFiles",
-              "description": "Set max number files for upload",
-              "value": {
-                "kind": "expression",
-                "type": "number"
-              },
-              "default": "3"
+              "default": "100"
             },
             {
               "name": "allowedFileTypes",
@@ -3515,22 +3495,22 @@
               "default": ".png,.jpg,.jpeg,.pdf,.txt,.doc,.docx,xls,.xlsx"
             },
             {
-              "name": "error",
-              "description": "Set error text for component.",
+              "name": "size",
+              "description": "Set size.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'sm' | 'md' | 'lg'"
               },
-              "default": "\"\""
+              "default": "md"
             },
             {
-              "name": "size",
-              "description": "Set size.",
+              "name": "error",
+              "description": "Set error text for component.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "string"
               },
-              "default": "md"
+              "default": "\"\""
             },
             {
               "name": "id",
@@ -3542,26 +3522,21 @@
               "default": "() => getRandomId()"
             },
             {
-              "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "name": "config",
+              "description": "Sets component ui config object.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "object"
               },
-              "default": "\"\""
+              "default": "{}"
             }
           ],
           "events": [
             {
-              "name": "changeFiles"
+              "name": "update:modelValue"
             },
             {
-              "name": "deleteFile"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
+              "name": "update:error"
             }
           ],
           "source": {
@@ -3592,13 +3567,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the input block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "symbol",
@@ -4057,13 +4032,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelOutside",
-              "description": "Show label outside the input block.",
+              "name": "labelAlign",
+              "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
               "name": "placeholder",