Rewritten input-file, removed uppy library

package.json

@@ -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",

src/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,

src/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.
    */

src/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,
   };
 }