vant/lib/popover/Popover.js

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name2 in all)
    __defProp(target, name2, { get: all[name2], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
  default: () => stdin_default,
  popoverProps: () => popoverProps
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_popperjs = require("@vant/popperjs");
var import_utils = require("../utils");
var import_use = require("@vant/use");
var import_use_scope_id = require("../composables/use-scope-id");
var import_use_sync_prop_ref = require("../composables/use-sync-prop-ref");
var import_icon = require("../icon");
var import_popup = require("../popup");
const [name, bem] = (0, import_utils.createNamespace)("popover");
const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
const popoverProps = {
  show: Boolean,
  theme: (0, import_utils.makeStringProp)("light"),
  overlay: Boolean,
  actions: (0, import_utils.makeArrayProp)(),
  actionsDirection: (0, import_utils.makeStringProp)("vertical"),
  trigger: (0, import_utils.makeStringProp)("click"),
  duration: import_utils.numericProp,
  showArrow: import_utils.truthProp,
  placement: (0, import_utils.makeStringProp)("bottom"),
  iconPrefix: String,
  overlayClass: import_utils.unknownProp,
  overlayStyle: Object,
  closeOnClickAction: import_utils.truthProp,
  closeOnClickOverlay: import_utils.truthProp,
  closeOnClickOutside: import_utils.truthProp,
  offset: {
    type: Array,
    default: () => [0, 8]
  },
  teleport: {
    type: [String, Object],
    default: "body"
  }
};
var stdin_default = (0, import_vue.defineComponent)({
  name,
  props: popoverProps,
  emits: ["select", "touchstart", "update:show"],
  setup(props, {
    emit,
    slots,
    attrs
  }) {
    let popper;
    const popupRef = (0, import_vue.ref)();
    const wrapperRef = (0, import_vue.ref)();
    const popoverRef = (0, import_vue.ref)();
    const show = (0, import_use_sync_prop_ref.useSyncPropRef)(() => props.show, (value) => emit("update:show", value));
    const getPopoverOptions = () => ({
      placement: props.placement,
      modifiers: [{
        name: "computeStyles",
        options: {
          adaptive: false,
          gpuAcceleration: false
        }
      }, (0, import_utils.extend)({}, import_popperjs.offsetModifier, {
        options: {
          offset: props.offset
        }
      })]
    });
    const createPopperInstance = () => {
      if (wrapperRef.value && popoverRef.value) {
        return (0, import_popperjs.createPopper)(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
      }
      return null;
    };
    const updateLocation = () => {
      (0, import_vue.nextTick)(() => {
        if (!show.value) {
          return;
        }
        if (!popper) {
          popper = createPopperInstance();
          if (import_utils.inBrowser) {
            window.addEventListener("animationend", updateLocation);
            window.addEventListener("transitionend", updateLocation);
          }
        } else {
          popper.setOptions(getPopoverOptions());
        }
      });
    };
    const updateShow = (value) => {
      show.value = value;
    };
    const onClickWrapper = () => {
      if (props.trigger === "click") {
        show.value = !show.value;
      }
    };
    const onClickAction = (action, index) => {
      if (action.disabled) {
        return;
      }
      emit("select", action, index);
      if (props.closeOnClickAction) {
        show.value = false;
      }
    };
    const onClickAway = () => {
      if (show.value && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
        show.value = false;
      }
    };
    const renderActionContent = (action, index) => {
      if (slots.action) {
        return slots.action({
          action,
          index
        });
      }
      return [action.icon && (0, import_vue.createVNode)(import_icon.Icon, {
        "name": action.icon,
        "classPrefix": props.iconPrefix,
        "class": bem("action-icon")
      }, null), (0, import_vue.createVNode)("div", {
        "class": [bem("action-text"), {
          [import_utils.BORDER_BOTTOM]: props.actionsDirection === "vertical"
        }]
      }, [action.text])];
    };
    const renderAction = (action, index) => {
      const {
        icon,
        color,
        disabled,
        className
      } = action;
      return (0, import_vue.createVNode)("div", {
        "role": "menuitem",
        "class": [bem("action", {
          disabled,
          "with-icon": icon
        }), {
          [import_utils.BORDER_RIGHT]: props.actionsDirection === "horizontal"
        }, className],
        "style": {
          color
        },
        "tabindex": disabled ? void 0 : 0,
        "aria-disabled": disabled || void 0,
        "onClick": () => onClickAction(action, index)
      }, [renderActionContent(action, index)]);
    };
    (0, import_vue.onMounted)(() => {
      updateLocation();
      (0, import_vue.watchEffect)(() => {
        var _a;
        popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
      });
    });
    (0, import_vue.onBeforeUnmount)(() => {
      if (popper) {
        if (import_utils.inBrowser) {
          window.removeEventListener("animationend", updateLocation);
          window.removeEventListener("transitionend", updateLocation);
        }
        popper.destroy();
        popper = null;
      }
    });
    (0, import_vue.watch)(() => [show.value, props.offset, props.placement], updateLocation);
    (0, import_use.useClickAway)([wrapperRef, popupRef], onClickAway, {
      eventName: "touchstart"
    });
    return () => {
      var _a;
      return (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.createVNode)("span", {
        "ref": wrapperRef,
        "class": bem("wrapper"),
        "onClick": onClickWrapper
      }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
        "ref": popoverRef,
        "show": show.value,
        "class": bem([props.theme]),
        "position": "",
        "transition": "van-popover-zoom",
        "lockScroll": false,
        "onUpdate:show": updateShow
      }, attrs, (0, import_use_scope_id.useScopeId)(), (0, import_utils.pick)(props, popupProps)), {
        default: () => [props.showArrow && (0, import_vue.createVNode)("div", {
          "class": bem("arrow")
        }, null), (0, import_vue.createVNode)("div", {
          "role": "menu",
          "class": bem("content", props.actionsDirection)
        }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
      })]);
    };
  }
});