@aotearoan/neon/dist/components/user-input/file/NeonFile.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as s, ref as n, computed as c } from "vue";
import { NeonSize as y } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as g } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonState as S } from "../../../common/enums/NeonState.es.js";
import v from "../button/NeonButton.vue.es.js";
import F from "../input/NeonInput.vue.es.js";
import N from "../list/NeonList.vue.es.js";
const U = s({
  name: "NeonFile",
  components: {
    NeonButton: v,
    NeonInput: F,
    NeonList: N
  },
  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: S.Ready },
    /**
     * The file component color
     */
    color: { type: String, default: g.LowContrast },
    /**
     * The label of the file component button
     */
    label: { type: String, default: null },
    /**
     * The icon of the file component button
     */
    icon: { type: String, default: null }
  },
  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(t, { emit: r }) {
    const i = n(null), l = n([]), f = n(""), m = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
      r("update:modelValue", t.multiple ? l.value : l.value[0]), t.directUpload && (l.value = []);
    };
    return {
      fileInput: i,
      files: l,
      fileList: m,
      fileInputModel: f,
      remove: (e) => {
        t.disabled || (l.value = l.value.filter((o) => o.name !== e), a());
      },
      clearAll: () => {
        t.disabled || (l.value = [], a());
      },
      openFileDialog: () => {
        var e;
        (e = i.value) == null || e.click();
      },
      onInput: (e) => {
        if (e != null && e.target) {
          const o = e.target.files, u = o ? Array.from(o).filter((d) => !l.value.find((p) => p.name === d.name)) : [];
          l.value = t.multiple ? [...l.value, ...u] : u, a();
        }
      }
    };
  }
});
export {
  U as default
};
//# sourceMappingURL=NeonFile.es.js.map