@oruga-ui/oruga-next/dist/esm/upload.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useTemplateRef, useModel, ref, watch, useAttrs, computed, createElementBlock, openBlock, normalizeClass, unref, renderSlot, createElementVNode, withModifiers, mergeProps } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { isTrueish } from "./helpers.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useInputHandler } from "./useInputHandler-Cv7NmM5J.mjs";
import { i as injectField } from "./fieldInjection-DJwnFcxS.mjs";
const _hoisted_1 = ["multiple", "accept", "disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "OUpload",
    configField: "upload",
    inheritAttrs: false
  },
  __name: "Upload",
  props: /* @__PURE__ */ mergeModels({
    override: { type: Boolean, default: void 0 },
    modelValue: { default: void 0 },
    multiple: {},
    variant: { default: () => getDefault("upload.variant") },
    disabled: { type: Boolean, default: false },
    accept: { default: void 0 },
    dragDrop: { type: Boolean, default: false },
    expanded: { type: Boolean, default: () => getDefault("upload.expanded", false) },
    native: { type: Boolean, default: true },
    useHtml5Validation: { type: Boolean, default: () => getDefault("useHtml5Validation", true) },
    customValidity: { type: [String, Function], default: "" },
    rootClass: {},
    expandedClass: {},
    variantClass: {},
    draggableClass: {},
    disabledClass: {},
    hoveredClass: {}
  }, {
    "modelValue": { default: void 0 },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["update:model-value", "focus", "blur", "invalid"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const inputRef = useTemplateRef("inputElement");
    const { checkHtml5Validity, onFocus, onBlur, onInvalid, isValid, setFocus } = useInputHandler(inputRef, emits, props);
    const { parentField } = injectField();
    const vmodel = useModel(__props, "modelValue");
    const dragDropFocus = ref(false);
    watch(vmodel, (value) => {
      if (!value || Array.isArray(value) && value.length === 0) {
        if (inputRef.value) inputRef.value.value = "";
      }
      if (!isValid.value && !props.dragDrop) checkHtml5Validity();
    });
    function onFileChange(event) {
      var _a;
      if (props.disabled) return;
      if (props.dragDrop) updateDragDropFocus(false);
      const value = event.target.files || ((_a = event.dataTransfer) == null ? void 0 : _a.files) || [];
      if (value.length === 0) {
        if (!vmodel.value) return;
        if (props.native) vmodel.value = void 0;
      }
      if (isTrueish(props.multiple)) {
        const values = props.native || !vmodel.value || !Array.isArray(vmodel.value) ? [] : [...vmodel.value];
        for (let i = 0; i < value.length; i++) {
          const file = value[i];
          if (checkType(file)) values.push(file);
        }
        vmodel.value = values;
      } else {
        if (props.dragDrop && value.length !== 1) return;
        else {
          const file = value[0];
          if (checkType(file)) vmodel.value = file;
          else if (vmodel.value) {
            vmodel.value = void 0;
            clearInput();
          } else {
            clearInput();
            checkHtml5Validity();
            return;
          }
        }
      }
      if (!props.dragDrop) checkHtml5Validity();
    }
    function clearInput() {
      if (inputRef.value) inputRef.value.value = "";
    }
    function updateDragDropFocus(focus) {
      if (!props.disabled) dragDropFocus.value = focus;
    }
    function checkType(file) {
      if (!props.accept) return true;
      const types = props.accept.split(",");
      if (types.length === 0) return true;
      for (let i = 0; i < types.length; i++) {
        const type = types[i].trim();
        if (type) {
          if (type.substring(0, 1) === ".") {
            const extension = file.name.toLowerCase().slice(-type.length);
            if (extension === type.toLowerCase()) return true;
          } else {
            if (file.type.match(type)) return true;
          }
        }
      }
      return false;
    }
    function onClick(event) {
      if (props.disabled) return;
      if (!props.dragDrop) {
        event.preventDefault();
        if (inputRef.value) inputRef.value.click();
      }
    }
    const attrs = useAttrs();
    const inputBind = computed(() => {
      var _a;
      return {
        ...(_a = parentField == null ? void 0 : parentField.value) == null ? void 0 : _a.inputAttrs,
        ...attrs
      };
    });
    const rootClasses = defineClasses(
      ["rootClass", "o-upload"],
      [
        "expandedClass",
        "o-upload--expanded",
        null,
        computed(() => props.expanded)
      ],
      [
        "disabledClass",
        "o-upload--disabled",
        null,
        computed(() => props.disabled)
      ]
    );
    const draggableClasses = defineClasses(
      ["draggableClass", "o-upload__draggable"],
      [
        "hoveredClass",
        "o-upload__draggable--hovered",
        null,
        computed(() => !props.variant && dragDropFocus.value)
      ],
      [
        "variantClass",
        "o-upload__draggable--hovered-",
        computed(() => props.variant),
        computed(() => !!props.variant && dragDropFocus.value)
      ]
    );
    __expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("label", {
        "data-oruga": "upload",
        class: normalizeClass(unref(rootClasses))
      }, [
        !_ctx.dragDrop ? renderSlot(_ctx.$slots, "default", {
          key: 0,
          onclick: onClick
        }) : (openBlock(), createElementBlock("div", {
          key: 1,
          class: normalizeClass(unref(draggableClasses)),
          role: "button",
          tabindex: "0",
          onMouseenter: _cache[0] || (_cache[0] = ($event) => updateDragDropFocus(true)),
          onMouseleave: _cache[1] || (_cache[1] = ($event) => updateDragDropFocus(false)),
          onDragover: _cache[2] || (_cache[2] = withModifiers(($event) => updateDragDropFocus(true), ["prevent"])),
          onDragleave: _cache[3] || (_cache[3] = withModifiers(($event) => updateDragDropFocus(false), ["prevent"])),
          onDragenter: _cache[4] || (_cache[4] = withModifiers(($event) => updateDragDropFocus(true), ["prevent"])),
          onDrop: withModifiers(onFileChange, ["prevent"])
        }, [
          renderSlot(_ctx.$slots, "default", { onclick: onClick })
        ], 34)),
        createElementVNode("input", mergeProps(inputBind.value, {
          ref: "inputElement",
          type: "file",
          "data-oruga-input": "file",
          multiple: props.multiple,
          accept: _ctx.accept,
          disabled: _ctx.disabled,
          onChange: onFileChange,
          onFocus: _cache[5] || (_cache[5] = //@ts-ignore
          (...args) => unref(onFocus) && unref(onFocus)(...args)),
          onBlur: _cache[6] || (_cache[6] = //@ts-ignore
          (...args) => unref(onBlur) && unref(onBlur)(...args)),
          onInvalid: _cache[7] || (_cache[7] = //@ts-ignore
          (...args) => unref(onInvalid) && unref(onInvalid)(...args))
        }), null, 16, _hoisted_1)
      ], 2);
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main as OUpload,
  index as default
};
//# sourceMappingURL=upload.mjs.map