@opensig/opendesign/es/upload/UploadSelect.vue.mjs

import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, renderSlot, unref, createBlock, createVNode, createElementVNode, createCommentVNode, toDisplayString, withCtx, createTextVNode } from "vue";
import { IconAdd } from "../_utils/icons.mjs";
import _sfc_main$1 from "../button/OButton.vue.mjs";
import slot from "./slot.mjs";
import { useI18n } from "../locale/index.mjs";
const _hoisted_1 = { class: "o-upload-drag-label" };
const _hoisted_2 = {
  key: 0,
  class: "o-upload-select-extra"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "UploadSelect",
  props: {
    draggable: { type: Boolean },
    dragLabel: {},
    dragHoverLabel: {},
    btnLabel: {},
    disabled: { type: Boolean }
  },
  emits: ["to-select", "selected"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { t } = useI18n();
    const onSelectClick = () => {
      if (props.disabled) {
        return;
      }
      emits("to-select");
    };
    const isDragging = ref(false);
    let dragCnt = 0;
    const onDragEnter = (e) => {
      e.preventDefault();
      if (props.disabled) {
        return;
      }
      dragCnt++;
    };
    const onDragOver = (e) => {
      e.preventDefault();
      if (!isDragging.value && !props.disabled) {
        isDragging.value = true;
      }
    };
    const onDragLeave = () => {
      if (props.disabled) {
        return;
      }
      dragCnt--;
      if (dragCnt === 0) {
        isDragging.value = false;
      }
    };
    const onDrap = (e) => {
      var _a;
      e.preventDefault();
      if (props.disabled) {
        return;
      }
      const files = (_a = e.dataTransfer) == null ? void 0 : _a.files;
      if (files && files.length > 0) {
        emits("selected", files);
      }
      isDragging.value = false;
      dragCnt = 0;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-upload-select", {
            "o-upload-select-drag": props.draggable
          }]),
          onClick: onSelectClick
        },
        [
          renderSlot(_ctx.$slots, unref(slot).names.select, {}, () => [
            props.draggable ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass(["o-upload-drag", {
                  "o-upload-drag-dragging": isDragging.value,
                  "o-upload-drag-disabled": props.disabled
                }]),
                onDragenter: onDragEnter,
                onDragover: onDragOver,
                onDragleave: onDragLeave,
                onDrop: onDrap
              },
              [
                renderSlot(_ctx.$slots, unref(slot).names.selectDrag, {}, () => [
                  createVNode(unref(IconAdd), { class: "o-upload-drag-icon" }),
                  createElementVNode(
                    "div",
                    _hoisted_1,
                    toDisplayString(!isDragging.value ? props.dragLabel ?? unref(t)("upload.drag") : props.dragHoverLabel ?? unref(t)("upload.dragHover")),
                    1
                    /* TEXT */
                  ),
                  _ctx.$slots[unref(slot).names.selectDragExtra] ? (openBlock(), createElementBlock("div", _hoisted_2, [
                    renderSlot(_ctx.$slots, unref(slot).names.selectDragExtra)
                  ])) : createCommentVNode("v-if", true)
                ])
              ],
              34
              /* CLASS, NEED_HYDRATION */
            )) : (openBlock(), createBlock(_sfc_main$1, {
              key: 1,
              color: "primary",
              round: "pill",
              disabled: props.disabled,
              icon: unref(IconAdd)
            }, {
              default: withCtx(() => [
                createTextVNode(
                  toDisplayString(props.btnLabel ?? unref(t)("upload.buttonLabel")),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            }, 8, ["disabled", "icon"]))
          ])
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};