@gyenno/nutui-taro/dist/packages/_es/index.taro-72b18dbf.js

京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { c as createComponent } from "./component-25dcca32.js";
import { reactive, computed, watch, watchEffect, toRefs, resolveComponent, openBlock, createElementBlock, createBlock, mergeProps, createCommentVNode, createTextVNode, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, renderSlot, vShow } from "vue";
import OverLay from "./Overlay.js";
import { Close } from "@nutui/icons-vue-taro";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
const popupProps = {
  visible: {
    type: Boolean,
    default: false
  },
  zIndex: {
    type: [Number, String],
    default: 2e3
  },
  duration: {
    type: [Number, String],
    default: 0.3
  },
  lockScroll: {
    type: Boolean,
    default: true
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  position: {
    type: String,
    default: "center"
  },
  transition: {
    type: String,
    default: ""
  },
  style: {
    type: Object,
    default: {}
  },
  popClass: {
    type: String,
    default: ""
  },
  closeable: {
    type: Boolean,
    default: false
  },
  closeIconPosition: {
    type: String,
    default: "top-right"
  },
  closeIcon: {
    type: String,
    default: "close"
  },
  destroyOnClose: {
    type: Boolean,
    default: true
  },
  teleport: {
    type: [String, Element],
    default: "body"
  },
  overlay: {
    type: Boolean,
    default: true
  },
  round: {
    type: Boolean,
    default: false
  },
  teleportDisable: {
    type: Boolean,
    default: false
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: false
  },
  overlayClass: {
    type: String,
    default: ""
  },
  overlayStyle: {
    type: Object,
    default: {}
  }
};
const initIndex = 2e3;
let _zIndex = initIndex;
const component = (componentName2, components) => {
  return {
    components,
    props: {
      ...popupProps
    },
    emits: ["click-pop", "click-close-icon", "open", "close", "opend", "closed", "click-overlay", "update:visible"],
    setup(props, { emit }) {
      const state = reactive({
        zIndex: props.zIndex,
        showSlot: true,
        closed: props.closeable
      });
      const classes = computed(() => {
        const prefixCls = componentName2;
        return {
          [prefixCls]: true,
          ["round"]: props.round,
          [`nut-popup--${props.position}`]: true,
          [`nut-popup--${props.position}--safebottom`]: props.position === "bottom" && props.safeAreaInsetBottom,
          [props.popClass]: true
        };
      });
      const popStyle = computed(() => {
        return {
          zIndex: state.zIndex,
          transitionDuration: `${props.duration}s`,
          ...props.style
        };
      });
      const transitionName = computed(() => {
        return props.transition ? props.transition : `nut-popup-slide-${props.position}`;
      });
      const open = () => {
        if (props.zIndex !== initIndex) {
          _zIndex = Number(props.zIndex);
        }
        emit("update:visible", true);
        state.zIndex = ++_zIndex;
        if (props.destroyOnClose) {
          state.showSlot = true;
        }
        emit("open");
      };
      const close = () => {
        emit("update:visible", false);
        emit("close");
        if (props.destroyOnClose) {
          setTimeout(() => {
            state.showSlot = false;
          }, +props.duration * 1e3);
        }
      };
      const onClick = (e) => {
        emit("click-pop", e);
      };
      const onClickCloseIcon = (e) => {
        e.stopPropagation();
        emit("click-close-icon", e);
        emit("update:visible", false);
      };
      const onClickOverlay = (e) => {
        emit("click-overlay", e);
        if (props.closeOnClickOverlay) {
          emit("update:visible", false);
        }
      };
      const onOpened = (e) => {
        emit("opend", e);
      };
      const onClosed = (e) => {
        emit("closed", e);
      };
      watch(
        () => props.visible,
        (val) => {
          props.visible ? open() : close();
        }
      );
      watchEffect(() => {
        state.closed = props.closeable;
      });
      return {
        ...toRefs(state),
        popStyle,
        transitionName,
        classes,
        onClick,
        onClickCloseIcon,
        onClickOverlay,
        onOpened,
        onClosed
      };
    }
  };
};
const { componentName, create } = createComponent("popup");
const _sfc_main = create(
  component(componentName, {
    [OverLay.name]: OverLay,
    Close
  })
);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_nut_overlay = resolveComponent("nut-overlay");
  const _component_Close = resolveComponent("Close");
  return openBlock(), createElementBlock("div", null, [
    _ctx.overlay ? (openBlock(), createBlock(_component_nut_overlay, mergeProps({
      key: 0,
      visible: _ctx.visible,
      "close-on-click-overlay": _ctx.closeOnClickOverlay,
      "z-index": _ctx.zIndex,
      "lock-scroll": _ctx.lockScroll,
      duration: _ctx.duration,
      "overlay-class": _ctx.overlayClass,
      "overlay-style": _ctx.overlayStyle,
      onClick: _ctx.onClickOverlay
    }, _ctx.$attrs), null, 16, ["visible", "close-on-click-overlay", "z-index", "lock-scroll", "duration", "overlay-class", "overlay-style", "onClick"])) : createCommentVNode("", true),
    createTextVNode(),
    createVNode(Transition, {
      name: _ctx.transitionName,
      onAfterEnter: _ctx.onOpened,
      onAfterLeave: _ctx.onClosed
    }, {
      default: withCtx(() => [
        withDirectives(createElementVNode("view", {
          class: normalizeClass(_ctx.classes),
          style: normalizeStyle(_ctx.popStyle),
          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
        }, [
          _ctx.showSlot ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
          createTextVNode(),
          _ctx.closed ? (openBlock(), createElementBlock("view", {
            key: 1,
            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickCloseIcon && _ctx.onClickCloseIcon(...args)),
            class: normalizeClass(["nut-popup__close-icon", "nut-popup__close-icon--" + _ctx.closeIconPosition])
          }, [
            renderSlot(_ctx.$slots, "close-icon", {}, () => [
              createVNode(_component_Close, { height: "12px" })
            ])
          ], 2)) : createCommentVNode("", true)
        ], 6), [
          [vShow, _ctx.visible]
        ])
      ]),
      _: 3
    }, 8, ["name", "onAfterEnter", "onAfterLeave"])
  ]);
}
const Popup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  Popup as P,
  popupProps as p
};