@opensig/opendesign/lib/upload/UploadSelect.vue.js

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
const vue = require("vue");
const icons = require("../_utils/icons.js");
const OButton_vue_vue_type_script_setup_true_lang = require("../button/OButton.vue.js");
const slot = require("./slot.js");
const index = require("../locale/index.js");
const _hoisted_1 = { class: "o-upload-drag-label" };
const _hoisted_2 = {
  key: 0,
  class: "o-upload-select-extra"
};
const _sfc_main = /* @__PURE__ */ vue.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 } = index.useI18n();
    const onSelectClick = () => {
      if (props.disabled) {
        return;
      }
      emits("to-select");
    };
    const isDragging = vue.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 vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-upload-select", {
            "o-upload-select-drag": props.draggable
          }]),
          onClick: onSelectClick
        },
        [
          vue.renderSlot(_ctx.$slots, vue.unref(slot).names.select, {}, () => [
            props.draggable ? (vue.openBlock(), vue.createElementBlock(
              "div",
              {
                key: 0,
                class: vue.normalizeClass(["o-upload-drag", {
                  "o-upload-drag-dragging": isDragging.value,
                  "o-upload-drag-disabled": props.disabled
                }]),
                onDragenter: onDragEnter,
                onDragover: onDragOver,
                onDragleave: onDragLeave,
                onDrop: onDrap
              },
              [
                vue.renderSlot(_ctx.$slots, vue.unref(slot).names.selectDrag, {}, () => [
                  vue.createVNode(vue.unref(icons.IconAdd), { class: "o-upload-drag-icon" }),
                  vue.createElementVNode(
                    "div",
                    _hoisted_1,
                    vue.toDisplayString(!isDragging.value ? props.dragLabel ?? vue.unref(t)("upload.drag") : props.dragHoverLabel ?? vue.unref(t)("upload.dragHover")),
                    1
                    /* TEXT */
                  ),
                  _ctx.$slots[vue.unref(slot).names.selectDragExtra] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                    vue.renderSlot(_ctx.$slots, vue.unref(slot).names.selectDragExtra)
                  ])) : vue.createCommentVNode("v-if", true)
                ])
              ],
              34
              /* CLASS, NEED_HYDRATION */
            )) : (vue.openBlock(), vue.createBlock(OButton_vue_vue_type_script_setup_true_lang, {
              key: 1,
              disabled: props.disabled,
              icon: vue.unref(icons.IconAdd)
            }, {
              default: vue.withCtx(() => [
                vue.createTextVNode(
                  vue.toDisplayString(props.btnLabel ?? vue.unref(t)("upload.buttonLabel")),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            }, 8, ["disabled", "icon"]))
          ])
        ],
        2
        /* CLASS */
      );
    };
  }
});
module.exports = _sfc_main;