@v1nt1248/3nclient-lib 0.3.13 → 0.3.15

package/dist/ui3n-components.js

@@ -18089,23 +18089,23 @@ var Wo = {
 		function o(e) {
 			n.disabled || (e.stopImmediatePropagation(), a.value?.click());
 		}
-		function l(e) {
+		function u(e) {
 			if (!e) return !1;
 			if (!n.maxFileSize) return !0;
 			let { name: t, size: i } = e;
 			return i > n.maxFileSize ? (r("error", `The [${t}] file is too big. Maximum file size ${co(n.maxFileSize)}`), !1) : !0;
 		}
-		function u(e) {
+		function d(e) {
 			if (!e) return !1;
 			let { name: t } = e, i = `.${(0, Ts.default)(t.split("."))}`.toLowerCase(), a = n.allowedFileTypes.split(",").map((e) => (0, Es.default)(e).toLowerCase()), o = a.includes("*") || a.includes(i);
 			return o || r("error", `The [${t}] file type is not valid.`), o;
 		}
-		function d(e) {
+		function f(e) {
 			if (!e) return !1;
 			let { name: t } = e, i = [...n.modelValue].find((e) => e.name === t);
 			return i && r("error", `The [${t}] file has already been downloaded.`), !i;
 		}
-		function f(e = []) {
+		function p(e = []) {
 			if (!n.maxNumberOfFiles) return !0;
 			let t = e.reduce((e, t) => {
 				let { size: n } = t;
@@ -18113,21 +18113,21 @@ var Wo = {
 			}, 0) <= Number(n.maxNumberOfFiles);
 			return t || r("error", `You cannot select more than ${n.maxNumberOfFiles} files.`), t;
 		}
-		function p(e) {
+		function m(e) {
 			if ((0, ws.default)(e)) {
-				if (!f(e)) return;
-				let t = e.filter((e) => d(e)).filter((e) => l(e)).filter((e) => u(e));
+				if (!p(e)) return;
+				let t = e.filter((e) => f(e)).filter((e) => u(e)).filter((e) => d(e));
 				(0, ws.default)(t) > 0 && r("update:modelValue", [...n.modelValue, ...t]);
 			}
 		}
-		function m() {
-			a.value && a.value.files && p([...a.value.files]), a.value && (a.value.value = "");
+		function h() {
+			a.value && a.value.files && m([...a.value.files]), a.value && (a.value.value = "");
 		}
 		return (t, n) => (x(), s("div", { class: g(t.$style.ui3nInputFile) }, [c("label", {
 			for: A(i),
 			class: g([t.$style.label, e.disabled && t.$style.disabled]),
 			onClick: B(o, ["stop", "prevent"])
-		}, D(e.buttonText), 11, Ds), c("input", {
+		}, [T(t.$slots, "default", {}, () => [l(D(e.buttonText), 1)])], 10, Ds), c("input", {
 			id: A(i),
 			ref_key: "fileInput",
 			ref: a,
@@ -18137,7 +18137,7 @@ var Wo = {
 			multiple: e.multiple,
 			accept: e.allowedFileTypes,
 			disabled: e.disabled,
-			onChange: m
+			onChange: h
 		}, null, 40, Os)], 2));
 	}
 }), [["__cssModules", { $style: {

package/package.json

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

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

@@ -1,3 +1,5 @@
+import { VNode } from 'vue';
+
 export interface Ui3nInputFileProps {
   /**
    * Selected files
@@ -41,3 +43,10 @@ export interface Ui3nInputFileEmits {
    */
   (event: 'error', value: string): void;
 }
+
+export interface Ui3nInputFileSlots {
+  /**
+   * Default slot
+   */
+  default: () => VNode;
+}

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

@@ -1,34 +1,10 @@
-<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 { Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nInputFileSlots } from './types';
   import type { Nullable } from '@/types';
 
   const props = withDefaults(defineProps<Ui3nInputFileProps>(), {
@@ -37,6 +13,7 @@
     allowedFileTypes: '*',
   });
   const emits = defineEmits<Ui3nInputFileEmits>();
+  defineSlots<Ui3nInputFileSlots>();
 
   const id = getRandomId(4);
   const fileInput = ref<Nullable<HTMLInputElement>>(null);
@@ -141,6 +118,30 @@
   }
 </script>
 
+<template>
+  <div :class="$style.ui3nInputFile">
+    <label
+      :for="id"
+      :class="[$style.label, disabled && $style.disabled]"
+      @click.stop.prevent="selectFiles"
+    >
+      <slot>{{ buttonText }}</slot>
+    </label>
+
+    <input
+      :id="id"
+      ref="fileInput"
+      type="file"
+      name="file"
+      hidden
+      :multiple="multiple"
+      :accept="allowedFileTypes"
+      :disabled="disabled"
+      @change="onChange"
+    />
+  </div>
+</template>
+
 <style lang="scss" module>
   .ui3nInputFile {
     position: relative;