@oruga-ui/oruga-next/dist/cjs/upload.cjs

UI components for Vue.js and CSS framework agnostic

"use strict";
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const helpers = require("./helpers.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useInputHandler = require("./useInputHandler-DDJU6Lju.cjs");
const fieldInjection = require("./fieldInjection-aGL6GpMR.cjs");
const _hoisted_1 = ["multiple", "accept", "disabled"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    isOruga: true,
    name: "OUpload",
    configField: "upload",
    inheritAttrs: false
  },
  __name: "Upload",
  props: /* @__PURE__ */ vue.mergeModels({
    override: { type: Boolean, default: void 0 },
    modelValue: { default: void 0 },
    multiple: {},
    variant: { default: () => config.getDefault("upload.variant") },
    disabled: { type: Boolean, default: false },
    accept: { default: void 0 },
    dragDrop: { type: Boolean, default: false },
    expanded: { type: Boolean, default: () => config.getDefault("upload.expanded", false) },
    native: { type: Boolean, default: true },
    useHtml5Validation: { type: Boolean, default: () => config.getDefault("useHtml5Validation", true) },
    customValidity: { type: [String, Function], default: "" },
    rootClass: {},
    expandedClass: {},
    variantClass: {},
    draggableClass: {},
    disabledClass: {},
    hoveredClass: {}
  }, {
    "modelValue": { default: void 0 },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["update:model-value", "focus", "blur", "invalid"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const inputRef = vue.useTemplateRef("inputElement");
    const { checkHtml5Validity, onFocus, onBlur, onInvalid, isValid, setFocus } = useInputHandler.useInputHandler(inputRef, emits, props);
    const { parentField } = fieldInjection.injectField();
    const vmodel = vue.useModel(__props, "modelValue");
    const dragDropFocus = vue.ref(false);
    vue.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 (helpers.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 = vue.useAttrs();
    const inputBind = vue.computed(() => {
      var _a;
      return {
        ...(_a = parentField == null ? void 0 : parentField.value) == null ? void 0 : _a.inputAttrs,
        ...attrs
      };
    });
    const rootClasses = defineClasses.defineClasses(
      ["rootClass", "o-upload"],
      [
        "expandedClass",
        "o-upload--expanded",
        null,
        vue.computed(() => props.expanded)
      ],
      [
        "disabledClass",
        "o-upload--disabled",
        null,
        vue.computed(() => props.disabled)
      ]
    );
    const draggableClasses = defineClasses.defineClasses(
      ["draggableClass", "o-upload__draggable"],
      [
        "hoveredClass",
        "o-upload__draggable--hovered",
        null,
        vue.computed(() => !props.variant && dragDropFocus.value)
      ],
      [
        "variantClass",
        "o-upload__draggable--hovered-",
        vue.computed(() => props.variant),
        vue.computed(() => !!props.variant && dragDropFocus.value)
      ]
    );
    __expose({ checkHtml5Validity, focus: setFocus, value: vmodel });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("label", {
        "data-oruga": "upload",
        class: vue.normalizeClass(vue.unref(rootClasses))
      }, [
        !_ctx.dragDrop ? vue.renderSlot(_ctx.$slots, "default", {
          key: 0,
          onclick: onClick
        }) : (vue.openBlock(), vue.createElementBlock("div", {
          key: 1,
          class: vue.normalizeClass(vue.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] = vue.withModifiers(($event) => updateDragDropFocus(true), ["prevent"])),
          onDragleave: _cache[3] || (_cache[3] = vue.withModifiers(($event) => updateDragDropFocus(false), ["prevent"])),
          onDragenter: _cache[4] || (_cache[4] = vue.withModifiers(($event) => updateDragDropFocus(true), ["prevent"])),
          onDrop: vue.withModifiers(onFileChange, ["prevent"])
        }, [
          vue.renderSlot(_ctx.$slots, "default", { onclick: onClick })
        ], 34)),
        vue.createElementVNode("input", vue.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) => vue.unref(onFocus) && vue.unref(onFocus)(...args)),
          onBlur: _cache[6] || (_cache[6] = //@ts-ignore
          (...args) => vue.unref(onBlur) && vue.unref(onBlur)(...args)),
          onInvalid: _cache[7] || (_cache[7] = //@ts-ignore
          (...args) => vue.unref(onInvalid) && vue.unref(onInvalid)(...args))
        }), null, 16, _hoisted_1)
      ], 2);
    };
  }
});
const index = {
  install(app) {
    config.registerComponent(app, _sfc_main);
  }
};
exports.OUpload = _sfc_main;
exports.default = index;
//# sourceMappingURL=upload.cjs.map