@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
111 lines (110 loc) • 3.59 kB
JavaScript
import { defineComponent as s, ref as a, computed as c } from "vue";
import { NeonSize as y } from "../../../model/common/size/NeonSize.es.js";
import { NeonFunctionalColor as S } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonState as g } from "../../../model/common/state/NeonState.es.js";
import v from "../button/NeonButton.vue.es.js";
import N from "../input/NeonInput.vue.es.js";
import F from "../list/NeonList.vue.es.js";
import { NeonButtonStyle as b } from "../../../model/user-input/button/NeonButtonStyle.es.js";
const h = s({
name: "NeonFile",
components: {
NeonButton: v,
NeonInput: N,
NeonList: F
},
props: {
/**
* The disabled state of the component
*/
disabled: { type: Boolean, default: !1 },
/**
* Files are uploaded directly once added, there is no waiting to click a confirmation button
*/
directUpload: { type: Boolean, default: !1 },
/**
* Support multiple files.
*/
multiple: { type: Boolean, default: !1 },
/**
* HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,
* e.g. 'application/pdf'.
*/
accept: { type: String, default: null },
/**
* Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and
* the hidden input).
*/
id: { type: String, default: null },
/**
* The file component size
*/
size: { type: String, default: y.Medium },
/**
* The state of the input, used to indicate loading, success and error states
*/
state: { type: String, default: g.Ready },
/**
* The file component color
*/
color: { type: String, default: S.Primary },
/**
* The style of button to use for the upload
*/
buttonStyle: { type: String, default: b.Solid },
/**
* Make the button circular. NOTE: This is only for icon only buttons.
*/
circular: { type: Boolean, default: null },
/**
* The label of the file component button
*/
label: { type: String, default: null },
/**
* The icon of the file component button
*/
icon: { type: String, default: null },
/**
* Title for the file upload button.
*/
title: { type: String, default: "Upload" }
},
emits: [
/**
* Emitted when files are selected and uploaded
* @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)
*/
"update:modelValue"
],
setup(o, { emit: r }) {
const i = a(null), t = a([]), f = a(""), m = c(() => t.value.map((e) => ({ key: e.name, label: e.name }))), n = () => {
r("update:modelValue", o.multiple ? t.value : t.value[0]), o.directUpload && (t.value = []);
};
return {
fileInput: i,
files: t,
fileList: m,
fileInputModel: f,
remove: (e) => {
o.disabled || (t.value = t.value.filter((l) => l.name !== e), n());
},
clearAll: () => {
o.disabled || (t.value = [], n());
},
openFileDialog: () => {
var e, l;
(l = (e = i.value) == null ? void 0 : e.neonInput) == null || l.click();
},
onInput: (e) => {
if (e != null && e.target) {
const l = e.target.files, u = l ? Array.from(l).filter((p) => !t.value.find((d) => d.name === p.name)) : [];
t.value = o.multiple ? [...t.value, ...u] : u, n();
}
}
};
}
});
export {
h as default
};
//# sourceMappingURL=NeonFile.es.js.map