@opensig/opendesign/es/dropdown/ODropdown.vue.mjs

<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>

import { defineComponent, ref, watch, provide, createElementBlock, openBlock, renderSlot, createVNode, unref, withCtx, createElementVNode, normalizeClass } from "vue";
import { OPopup } from "../popup/index.mjs";
import { dropdownProps } from "./types.mjs";
import { dropdownInjectKey } from "./provide.mjs";
import { isUndefined } from "../_utils/is.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ODropdown",
  props: dropdownProps,
  emits: ["update:visible", "visible-change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const dropdownRef = ref();
    const isVisible = ref(props.visible ?? props.defaultVisible);
    watch(
      () => props.visible,
      (val) => {
        if (!isUndefined(val)) {
          isVisible.value = val;
        }
      }
    );
    const updateVisible = (val) => {
      isVisible.value = val;
      emits("update:visible", val);
      emits("visible-change", val);
    };
    watch(isVisible, (val) => {
      updateVisible(val);
    });
    provide(dropdownInjectKey, { updateVisible });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "dropdownRef",
          ref: dropdownRef,
          class: "o-dropdown"
        },
        [
          renderSlot(_ctx.$slots, "default"),
          createVNode(unref(OPopup), {
            visible: isVisible.value,
            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isVisible.value = $event),
            transition: props.transition,
            "unmount-on-hide": props.unmountOnHide,
            position: props.optionPosition,
            wrapper: props.optionsWrapper,
            target: dropdownRef.value,
            trigger: props.trigger,
            offset: 4,
            "adjust-min-width": props.optionWidthMode === "min-width",
            "adjust-width": props.optionWidthMode === "width"
          }, {
            default: withCtx(() => [
              createElementVNode(
                "ul",
                {
                  class: normalizeClass(["o-dropdown-list", [props.optionWrapClass]])
                },
                [
                  renderSlot(_ctx.$slots, "dropdown")
                ],
                2
                /* CLASS */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["visible", "transition", "unmount-on-hide", "position", "wrapper", "target", "trigger", "adjust-min-width", "adjust-width"])
        ],
        512
        /* NEED_PATCH */
      );
    };
  }
});
export {
  _sfc_main as default
};