@v1nt1248/3nclient-lib 0.1.47 → 0.1.49

package/dist/utils/ui.d.ts

@@ -12,3 +12,4 @@ export declare function html2text(html: string): string;
  */
 export declare function prepareDateAsSting(ts: number): string;
 export declare function capitalize(text: string): string;
+export declare function formatFileSize(size: number): string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -11,6 +11,8 @@ import Ui3nEmoji from './ui3n-emoji/ui3n-emoji.vue';
 import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji/types';
 import Ui3nInput from './ui3n-input/ui3n-input.vue';
 import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input/types';
+import Ui3nInputFile from './ui3n-input-file/ui3n-input-file.vue';
+import type { Ui3nInputFileProps, Ui3nInputFileEmits } from './ui3n-input-file/types';
 import Ui3nText from './ui3n-text/ui3n-text.vue';
 import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text/types';
 import Ui3nCheckbox from './ui3n-checkbox/ui3n-checkbox.vue';
@@ -101,6 +103,9 @@ export {
   Ui3nInput,
   Ui3nInputProps,
   Ui3nInputEmits,
+  Ui3nInputFile,
+  Ui3nInputFileProps,
+  Ui3nInputFileEmits,
   Ui3nText,
   Ui3nTextProps,
   Ui3nTextEmits,

package/src/components/ui3n-input-file/types.ts

@@ -0,0 +1,14 @@
+export interface Ui3nInputFileProps {
+  modelValue?: File[] | FileList;
+  buttonText?: string;
+  multiple?: boolean;
+  maxNumberOfFiles?: number | string;
+  maxFileSize?: number;
+  allowedFileTypes?: string;
+  disabled?: boolean;
+}
+
+export interface Ui3nInputFileEmits {
+  (event: 'update:modelValue', value: File[] | FileList): void;
+  (event: 'error', value: string): void;
+}

package/src/components/ui3n-input-file/ui3n-input-file.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :class="$style.ui3nInputFile">
+    <label
+      :for="id"
+      :class="[$style.label, disabled && $style.disabled]"
+      @click.stop.prevent="selectFiles"
+    >
+      {{ buttonText }}
+    </label>
+
+    <input
+      :id="id"
+      ref="fileInput"
+      type="file"
+      name="file"
+      hidden
+      :multiple="multiple"
+      :accept="allowedFileTypes"
+      :disabled="disabled"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import size from 'lodash/size';
+  import last from 'lodash/last';
+  import trim from 'lodash/trim';
+  import { getRandomId, formatFileSize } from '@/utils';
+  import type { Ui3nInputFileProps, Ui3nInputFileEmits } from './types';
+  import type { Nullable } from '@/components/types';
+
+  const props = withDefaults(defineProps<Ui3nInputFileProps>(), {
+    modelValue: () => [],
+    buttonText: 'Select file',
+    allowedFileTypes: '*',
+  });
+  const emits = defineEmits<Ui3nInputFileEmits>();
+
+  const id = getRandomId(4);
+  const fileInput = ref<Nullable<HTMLInputElement>>(null);
+
+  function selectFiles(ev: MouseEvent) {
+    if (props.disabled) {
+      return;
+    }
+
+    ev.stopImmediatePropagation();
+    fileInput.value!.click();
+  }
+
+  function validateFileSize(file: File) {
+    if (!file) {
+      return false;
+    }
+
+    if (!props.maxFileSize) {
+      return true;
+    }
+
+    const { name, size } = file;
+    if (size > props.maxFileSize) {
+      emits('error', `The [${name}] file is too big. Maximum file size ${formatFileSize(props.maxFileSize)}`);
+      return false;
+    }
+    return true;
+  }
+
+  function validateFileType(file: File) {
+    if (!file) {
+      return false;
+    }
+
+    const { name } = file;
+    const fileExt = `.${last(name.split('.'))}`.toLowerCase();
+    const allowedFileTypes = props.allowedFileTypes.split(',').map(type => trim(type).toLowerCase());
+
+    const isValid = allowedFileTypes.includes('*') || allowedFileTypes.includes(fileExt);
+    if (!isValid) {
+      emits('error', `The [${name}] file type is not valid.`);
+    }
+    return isValid;
+  }
+
+  function validateDuplicateFile(file: File) {
+    if (!file) {
+      return false;
+    }
+
+    const { name } = file;
+    const isFoundDuplicate = [...props.modelValue].find(file => file.name === name);
+
+    if (isFoundDuplicate) {
+      emits('error', `The [${name}] file has already been downloaded.`);
+    }
+
+    return !isFoundDuplicate;
+  }
+
+  function validateCount(files: File[] = []) {
+    if (!props.maxNumberOfFiles) {
+      return true;
+    }
+
+    const total = files.reduce((acc, file) => {
+      const { size } = file;
+      if (size) {
+        acc += size;
+      }
+      return acc;
+    }, 0);
+
+    const isValid = total <= Number(props.maxNumberOfFiles);
+    if (!isValid) {
+      emits('error', `You cannot select more than ${props.maxNumberOfFiles} files.`);
+    }
+    return isValid;
+  }
+
+  function processFiles(files: File[]) {
+    if (size(files)) {
+      if (!validateCount(files)) {
+        return;
+      }
+
+      const inputValue = files
+        .filter(f => validateDuplicateFile(f))
+        .filter(f => validateFileSize(f))
+        .filter(f => validateFileType(f));
+
+      if (size(inputValue) > 0) {
+        emits('update:modelValue', [...props.modelValue, ...inputValue]);
+      }
+    }
+  }
+
+  function onChange() {
+    processFiles([...fileInput.value!.files!]);
+    fileInput.value!.value = '';
+  }
+</script>
+
+<style lang="scss" module>
+  .ui3nInputFile {
+    position: relative;
+    width: max-content;
+  }
+
+  .label {
+    font-size: var(--font-12);
+    font-weight: 500;
+    line-height: var(--font-16);
+    color: var(--color-text-button-secondary-default);
+    padding: 0 var(--space-xs);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-text-button-secondary-hover);
+    }
+
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+</style>