vueless 0.0.2 → 0.0.3

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

@@ -1,400 +1,399 @@
 <template>
-  <div class="mono-file-upload-wrapper">
-    <div v-if="!isExistSlot('default')">
-      <div :id="fileId" class="mono-file-upload" :class="[fileUploadClasses]" :data-cy="dataCy">
-        <div class="mono-file-upload-label">
-          {{ label }}
-        </div>
-
-        <div v-if="!filesData.length" class="mono-file-upload-block">
-          <UIcon name="upload_file" color="gray" :size="descriptionIconSize" />
-
-          <div class="mono-file-upload-description">
-            {{ i18n.selectOrDragImage }} {{ allowedFilesForUpload }}
-          </div>
-        </div>
-
-        <div class="mono-file-upload-list">
-          <div v-for="(file, index) in filesData" :key="file.id" class="mono-file-upload-item">
-            <div class="mono-file-upload-item-block">
-              <img v-if="file.imageUrl" class="mono-file-upload-item-image" :src="file.imageUrl" />
-
-              <UIcon v-else name="description" color="gray" size="lg" />
-
-              <div class="mono-file-upload-item-title">
-                {{ file.name }}
-              </div>
-            </div>
-
+  <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
-              class="mono-file-upload-item-close"
-              name="close"
-              interactive
-              :size="size"
+              :name="config.iconUploadFileName"
               color="gray"
-              :data-cy="`${dataCy}-${index}-delete`"
-              @click="onClickDeleteFile(file.id)"
+              :size="descriptionIconSize"
+              v-bind="iconUploadFileAttrs"
+            />
+
+            <div
+              v-bind="descriptionAttrs"
+              v-text="`${i18n.selectOrDragImage} ${allowedFilesForUpload}`"
             />
           </div>
-        </div>
 
-        <UButton
-          class="mono-file-upload-button"
-          :text="i18n.selectFile"
-          :size="buttonSize"
-          variant="thirdary"
-          filled
-          :data-cy="`${dataCy}-upload`"
-          @click="onClickUploadFile"
-        />
-
-        <DragDrop :id="uppyId" class="uppy-upload" :uppy="uppy" :class="uppyUploadClass" />
-      </div>
+          <div v-bind="listAttrs">
+            <UFiles :options="filesList" v-bind="filesAttrs">
+              <template #right="file">
+                <UIcon
+                  :name="config.iconCloseName"
+                  interactive
+                  :size="size"
+                  color="gray"
+                  v-bind="iconCloseAttrs"
+                  @click="onClickDeleteFile(file)"
+                />
+              </template>
+            </UFiles>
+          </div>
+
+          <UButton
+            :label="i18n.selectFile"
+            :size="size"
+            variant="thirdary"
+            filled
+            :data-cy="`${dataCy}-upload`"
+            v-bind="buttonAttrs"
+            @click="onClickUploadFile"
+          />
+
+          <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
+        </div>
+      </ULabel>
     </div>
 
-    <div
-      v-else
-      :id="fileId"
-      class="mono-file-upload-slot"
-      :data-cy="dataCy"
-      @click="onClickUploadFile"
-    >
+    <div v-else :id="fileId" :data-cy="dataCy" v-bind="uploadSlotAttrs" @click="onClickUploadFile">
       <slot />
 
-      <DragDrop :id="uppyId" class="uppy-upload" :uppy="uppy" :class="uppyUploadClass" />
+      <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
     </div>
-
-    <p v-if="errorMessage" class="error-message" :data-cy="`${dataCy}-error-message`">
-      {{ errorMessage }}
-    </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import Uppy from "@uppy/core";
 import DragDrop from "@uppy/vue/src/drag-drop";
-import { getRandomId } from "vueless/service.ui";
-import UIcon from "vueless/ui.image-icon";
-import UButton from "vueless/ui.button";
-import I18nServiceDefault from "vueless/service.i18n";
-
-export default {
-  name: "UInputFile",
 
-  components: {
-    UButton,
-    DragDrop,
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Set label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set files data.
-     */
-    files: {
-      type: Array,
-      default: () => [],
-    },
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
 
-    /**
-     * Selected files will be imported when a form will be submitted
-     */
-    local: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set max file size in megabytes.
-     */
-    maxFileSizeInMegabytes: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Allow to select multiple files.
-     */
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set max number files for upload
-     */
-    maxFiles: {
-      type: Number,
-      default: 3,
-    },
-
-    /**
-     * Set allowed file types.
-     */
-    allowedFileTypes: {
-      type: Array,
-      default: () => [".png", ".jpg", ".jpeg", ".pdf", ".txt", ".doc", ".docx", "xls", ".xlsx"],
-    },
+import UIcon from "vueless/ui.image-icon";
+import UButton from "vueless/ui.button";
 
-    /**
-     * Set error text for component.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
+import UIService, { getRandomId } from "vueless/service.ui";
+import I18nServiceDefault from "@vueless/services/i18n";
 
-    /**
-     * Set size.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
+import { UInputFile } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputFile" });
 
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+const props = defineProps({
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  emits: ["changeFiles", "deleteFile"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
+  /**
+   * Set description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  data: () => ({
-    filesData: [],
-    selectedFiles: [],
-    errorMessage: "",
-    dragOver: false,
-    errorFilesTypes: [],
-  }),
-
-  computed: {
-    i18n() {
-      return {
-        selectOrDragImage: this.getTranslation("selectOrDragImage"),
-        selectFile: this.getTranslation("selectFile"),
-        canAttachFilesFormat: this.getTranslation("canAttachFilesFormat"),
-        cannotAttachFilesStart: this.getTranslation("cannotAttachFilesStart"),
-        cannotAttachFilesEnd: this.getTranslation("cannotAttachFilesEnd"),
-      };
-    },
-
-    fileId() {
-      return `file-${this.id}`;
-    },
-
-    uppyId() {
-      return `uppy-${this.id}`;
-    },
-
-    fileUpload() {
-      return document.getElementById(this.fileId);
-    },
-
-    uppyUpload() {
-      return document.getElementById(this.uppyId);
-    },
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, left, right
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.labelOutside,
+  },
 
-    allowedFilesForUpload() {
-      const allowedFormat = this.allowedFileTypes.join(", ");
+  /**
+   * Set files data.
+   */
+  files: {
+    type: Array,
+    default: () => [],
+  },
 
-      return `${this.i18n.canAttachFilesFormat} ${allowedFormat}`;
-    },
+  /**
+   * Selected files will be imported when a form will be submitted
+   */
+  local: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.local,
+  },
 
-    descriptionIconSize() {
-      const size = {
-        sm: "md",
-        md: "lg",
-        lg: "xl",
-      };
+  /**
+   * Set max file size in megabytes.
+   */
+  maxFileSize: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputFile).default.maxFileSize,
+  },
 
-      return size[this.size];
-    },
+  /**
+   * Allow to select multiple files.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.multiple,
+  },
 
-    fileUploadClasses() {
-      return {
-        "error-file-upload": this.errorMessage,
-        "size-sm": this.size === "sm",
-        "size-md": this.size === "md",
-        "size-lg": this.size === "lg",
-      };
-    },
+  /**
+   * Set max number files for upload
+   */
+  maxFiles: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputFile).default.maxFiles,
+  },
 
-    uppyUploadClass() {
-      return this.dragOver ? "uppy-upload-drag-over" : "";
-    },
+  /**
+   * Set allowed file types.
+   */
+  allowedFileTypes: {
+    type: Array,
+    default: () => UIService.get(defaultConfig, UInputFile).default.allowedFileTypes,
+  },
 
-    buttonSize() {
-      return this.size === "lg" ? "md" : "sm";
-    },
+  /**
+   * Set error text for component.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
 
-    maxFileSizeInBytes() {
-      return this.maxFileSizeInMegabytes * Math.pow(2, 20);
-    },
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputFile).default.size,
+  },
 
-    uppy() {
-      return new Uppy({
-        id: this.uppyId,
-        restrictions: {
-          maxFileSize: this.maxFileSizeInBytes,
-          maxNumberOfFiles: this.maxFilesNumber,
-          allowedFileTypes: this.allowedFileTypes,
-        },
-      }).on("restriction-failed", (file, error) => {
-        const isFile = this.errorFilesTypes.find((item) => item === file.extension);
-
-        if (error && !isFile) this.errorFilesTypes.push(`.${file.extension}`);
-      });
-    },
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
 
-    maxFilesNumber() {
-      return this.multiple ? this.maxFiles : 1;
-    },
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
   },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(["changeFiles", "deleteFile"]);
+
+const { getTranslation } = new I18nServiceDefault();
+
+const filesData = ref([]);
+const selectedFiles = ref([]);
+const errorMessage = ref("");
+const dragOver = ref(false);
+const errorFilesTypes = ref([]);
+
+const {
+  config,
+  uploadAttrs,
+  buttonAttrs,
+  iconUploadFileAttrs,
+  iconCloseAttrs,
+  wrapperAttrs,
+  labelAttrs,
+  blockAttrs,
+  descriptionAttrs,
+  listAttrs,
+  uppyUploadAttrs,
+  uploadSlotAttrs,
+  filesAttrs,
+  hasSlotContent,
+} = useAttrs(props, { errorMessage, dragOver });
+
+const i18n = computed(() => {
+  return {
+    selectOrDragImage: getTranslation("selectOrDragImage"),
+    selectFile: getTranslation("selectFile"),
+    canAttachFilesFormat: getTranslation("canAttachFilesFormat"),
+    cannotAttachFilesStart: getTranslation("cannotAttachFilesStart"),
+    cannotAttachFilesEnd: getTranslation("cannotAttachFilesEnd"),
+  };
+});
+
+const filesList = computed(() => {
+  return filesData.value.map((file) => {
+    return {
+      text: file.name,
+      id: file.id,
+    };
+  });
+});
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const fileId = computed(() => {
+  return `file-${props.id}`;
+});
+
+const uppyId = computed(() => {
+  return `uppy-${props.id}`;
+});
+
+const fileUpload = computed(() => {
+  return document.getElementById(fileId.value);
+});
+
+const uppyUpload = computed(() => {
+  return document.getElementById(uppyId.value);
+});
+
+const allowedFilesForUpload = computed(() => {
+  const allowedFormat = props.allowedFileTypes.join(", ");
+
+  return `${i18n.value.canAttachFilesFormat} ${allowedFormat}`;
+});
+
+const descriptionIconSize = computed(() => {
+  const size = {
+    sm: "md",
+    md: "lg",
+    lg: "xl",
+  };
+
+  return size[props.size];
+});
+
+const maxFileSizeInBytes = computed(() => {
+  return props.maxFileSize * Math.pow(2, 20);
+});
+
+const maxFilesNumber = computed(() => {
+  return props.multiple ? props.maxFiles : 1;
+});
+
+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: {
-      handler: "onChangeSelectedFiles",
-      deep: true,
-    },
+watch(selectedFiles, onChangeSelectedFiles, { deep: true });
+watch(() => props.files, onChangeFiles, { deep: true });
+watch(errorFilesTypes, onChangeErrorFilesTypes, { deep: true });
+watch(() => props.error, onChangeError, { deep: true, immediate: true });
 
-    files: {
-      handler: "onChangeFiles",
-      deep: true,
-    },
+onMounted(() => {
+  uppy.value.on("file-added", () => {
+    uploadFiles();
+  });
 
-    errorFilesTypes: {
-      handler: "onChangeErrorFilesTypes",
-      deep: true,
-    },
+  addEventListener("dragover", () => (dragOver.value = true));
 
-    error: {
-      handler: "onChangeError",
-      deep: true,
-      immediate: true,
-    },
-  },
-
-  mounted() {
-    addEventListener("dragover", () => (this.dragOver = true));
-
-    if (this.uppyUpload) {
-      this.uppyUpload.addEventListener("dragover", this.onDragOver, true);
-      this.uppyUpload.addEventListener("dragleave", this.onDragLeave, true);
-    }
-  },
+  if (uppyUpload.value) {
+    uppyUpload.value.addEventListener("dragover", onDragOver, true);
+    uppyUpload.value.addEventListener("dragleave", onDragLeave, true);
+  }
+});
 
-  beforeUnmount() {
-    removeEventListener("dragover", () => (this.dragOver = true));
-    this.uppyUpload.removeEventListener("dragover", this.onDragOver, true);
-    this.uppyUpload.removeEventListener("dragleave", this.onDragLeave, true);
-  },
+onBeforeUnmount(() => {
+  removeEventListener("dragover", () => (dragOver.value = true));
+  uppyUpload.value.removeEventListener("dragover", onDragOver, true);
+  uppyUpload.value.removeEventListener("dragleave", onDragLeave, true);
+});
 
-  created() {
-    this.uppy.on("file-added", () => {
-      this.uploadFiles();
-    });
-  },
+function onClickUploadFile() {
+  document.querySelector(`#${fileId.value} .uppy-Root button`).click();
+}
 
-  methods: {
-    isExistSlot(slotName) {
-      return !!this.$slots[slotName];
-    },
+function uploadFiles() {
+  const { files } = uppy.value.getState();
 
-    onClickUploadFile() {
-      document.querySelector(`#${this.fileId} .uppy-Root button`).click();
-    },
+  selectedFiles.value = Object.values(files);
+}
 
-    uploadFiles() {
-      const { files } = this.uppy.getState();
+function onDragOver() {
+  fileUpload.value.classList.add(config.fileUploadHover);
+}
 
-      this.selectedFiles = Object.values(files);
-    },
+function onDragLeave() {
+  fileUpload.value.classList.remove(config.fileUploadHover);
+  dragOver.value = false;
+}
 
-    onDragOver() {
-      this.fileUpload.classList.add("hover-file-upload");
-    },
+function onChangeSelectedFiles() {
+  uppy.value.cancelAll();
 
-    onDragLeave() {
-      this.fileUpload.classList.remove("hover-file-upload");
-      this.dragOver = false;
-    },
+  const selectedFilesData = selectedFiles.value.map((file) => {
+    file.data.id = getRandomId();
 
-    onChangeSelectedFiles() {
-      this.uppy.cancelAll();
+    return file.data;
+  });
 
-      const selectedFilesData = this.selectedFiles.map((file) => file.data);
+  if (!props.error && errorMessage.value) {
+    errorMessage.value = "";
+    errorFilesTypes.value = [];
+  }
 
-      if (this.local) this.filesData = selectedFilesData;
+  if (props.local) filesData.value = selectedFilesData;
 
-      this.$emit("changeFiles", selectedFilesData);
-    },
+  emit("changeFiles", selectedFilesData);
+}
 
-    onChangeFiles() {
-      this.filesData = this.files;
+function onChangeFiles() {
+  filesData.value = props.files;
 
-      if (!this.error && this.errorMessage) {
-        this.errorMessage = "";
-        this.errorFilesTypes = [];
-      }
+  if (!props.error && errorMessage.value) {
+    errorMessage.value = "";
+    errorFilesTypes.value = [];
+  }
 
-      this.onDragLeave();
-    },
+  onDragLeave();
+}
 
-    onChangeError() {
-      this.errorMessage = this.error;
-    },
+function onChangeError() {
+  errorMessage.value = props.error;
+}
 
-    onChangeErrorFilesTypes() {
-      if (this.errorFilesTypes.length) {
-        let error = this.errorFilesTypes.join(", ");
+function onChangeErrorFilesTypes() {
+  if (errorFilesTypes.value.length) {
+    let error = errorFilesTypes.value.join(", ");
 
-        this.errorMessage = `${this.i18n.cannotAttachFilesStart} ${error} ${this.i18n.cannotAttachFilesEnd}`;
-      }
-    },
+    errorMessage.value = `${i18n.value.cannotAttachFilesStart} ${error} ${i18n.value.cannotAttachFilesEnd}`;
+  }
+}
 
-    onClickDeleteFile(id) {
-      const index = this.filesData.findIndex((file) => file.id === id);
+function onClickDeleteFile(data) {
+  const index = filesData.value.findIndex((file) => file.id === data.file.id);
 
-      if (~index) {
-        this.filesData.splice(index, 1);
+  if (~index) {
+    filesData.value.splice(index, 1);
 
-        this.uppy.removeFile(id);
+    uppy.value.removeFile(data.file.id);
 
-        this.$emit("deleteFile", id);
+    emit("deleteFile", data.file.id);
 
-        if (this.local) this.$emit("changeFiles", this.filesData);
-      }
-    },
-  },
-};
+    if (props.local) emit("changeFiles", filesData.value);
+  }
+}
 </script>
 
 <i18n>
@@ -417,168 +416,3 @@ ua:
   cannotAttachFilesEnd: "не підтримується."
   selectFile: Оберіть файл
 </i18n>
-
-<style lang="postcss" scoped>
-.size {
-  &-sm {
-    .mono-file-upload {
-      &-label {
-        @apply text-xs;
-      }
-
-      &-description {
-        @apply text-xs;
-      }
-
-      &-item {
-        &-image {
-          @apply h-8 w-8;
-        }
-
-        &-title {
-          @apply text-sm;
-        }
-      }
-    }
-  }
-
-  &-md {
-    .mono-file-upload {
-      &-label {
-        @apply text-sm;
-      }
-
-      &-description {
-        @apply text-sm;
-      }
-
-      &-item {
-        &-image {
-          @apply h-10 w-10;
-        }
-
-        &-title {
-          @apply text-base;
-        }
-      }
-    }
-  }
-
-  &-lg {
-    .mono-file-upload {
-      &-label {
-        @apply text-base;
-      }
-
-      &-description {
-        @apply text-base;
-      }
-
-      &-item {
-        &-image {
-          @apply h-12 w-12;
-        }
-
-        &-title {
-          @apply text-lg;
-        }
-      }
-    }
-  }
-}
-
-.mono-file-upload {
-  @apply relative;
-  @apply rounded-lg border border-dashed border-gray-300 bg-white;
-  @apply h-auto w-auto p-4;
-
-  &:hover {
-    @apply border-gray-400 bg-gray-50;
-  }
-
-  &-wrapper {
-    @apply w-full;
-  }
-
-  &-label {
-    @apply mb-2 font-normal text-gray-500;
-  }
-
-  &-block {
-    @apply flex;
-    @apply mb-4 space-x-2;
-  }
-
-  &-description {
-    @apply font-normal text-gray-700;
-  }
-
-  &-button {
-    @apply w-full;
-  }
-
-  &-list {
-    @apply mb-4 space-y-4;
-  }
-
-  &-item {
-    @apply flex items-center justify-between;
-    @apply border-b border-gray-200;
-    @apply pb-2;
-
-    &-block {
-      @apply flex items-center;
-    }
-
-    &-image {
-      @apply rounded-sm;
-    }
-
-    &-title {
-      @apply font-normal text-gray-900;
-      @apply ml-2 break-all;
-    }
-
-    &-close {
-      @apply z-20;
-    }
-  }
-
-  &-slot {
-    @apply w-fit;
-  }
-}
-
-.mono-file-upload.hover-file-upload {
-  @apply border-gray-400 bg-gray-50;
-}
-
-.uppy-upload {
-  @apply absolute left-0 top-0;
-  @apply opacity-0;
-  @apply h-0 w-0;
-
-  &:deep(.uppy-Root) {
-    @apply h-full w-full;
-  }
-}
-
-.uppy-upload-drag-over {
-  @apply h-full w-full;
-}
-
-.error {
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
-  }
-
-  &-file-upload {
-    @apply border-red-300;
-
-    &:hover {
-      @apply border-red-400;
-    }
-  }
-}
-</style>