123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- import { ref, computed, defineComponent, createVNode as _createVNode } from "vue";
- import { isDef, truthProp, numericProp, windowHeight, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
- import { useId } from "../composables/use-id.mjs";
- import { useExpose } from "../composables/use-expose.mjs";
- import { useRect, useChildren, useClickAway, useScrollParent, useEventListener } from "@vant/use";
- const [name, bem] = createNamespace("dropdown-menu");
- const dropdownMenuProps = {
- overlay: truthProp,
- zIndex: numericProp,
- duration: makeNumericProp(0.2),
- direction: makeStringProp("down"),
- activeColor: String,
- autoLocate: Boolean,
- closeOnClickOutside: truthProp,
- closeOnClickOverlay: truthProp,
- swipeThreshold: numericProp
- };
- const DROPDOWN_KEY = Symbol(name);
- var stdin_default = defineComponent({
- name,
- props: dropdownMenuProps,
- setup(props, {
- slots
- }) {
- const id = useId();
- const root = ref();
- const barRef = ref();
- const offset = ref(0);
- const {
- children,
- linkChildren
- } = useChildren(DROPDOWN_KEY);
- const scrollParent = useScrollParent(root);
- const opened = computed(() => children.some((item) => item.state.showWrapper));
- const scrollable = computed(() => props.swipeThreshold && children.length > +props.swipeThreshold);
- const barStyle = computed(() => {
- if (opened.value && isDef(props.zIndex)) {
- return {
- zIndex: +props.zIndex + 1
- };
- }
- });
- const close = () => {
- children.forEach((item) => {
- item.toggle(false);
- });
- };
- const onClickAway = () => {
- if (props.closeOnClickOutside) {
- close();
- }
- };
- const updateOffset = () => {
- if (barRef.value) {
- const rect = useRect(barRef);
- if (props.direction === "down") {
- offset.value = rect.bottom;
- } else {
- offset.value = windowHeight.value - rect.top;
- }
- }
- };
- const onScroll = () => {
- if (opened.value) {
- updateOffset();
- }
- };
- const toggleItem = (active) => {
- children.forEach((item, index) => {
- if (index === active) {
- item.toggle();
- } else if (item.state.showPopup) {
- item.toggle(false, {
- immediate: true
- });
- }
- });
- };
- const renderTitle = (item, index) => {
- const {
- showPopup
- } = item.state;
- const {
- disabled,
- titleClass
- } = item;
- return _createVNode("div", {
- "id": `${id}-${index}`,
- "role": "button",
- "tabindex": disabled ? void 0 : 0,
- "data-allow-mismatch": "attribute",
- "class": [bem("item", {
- disabled,
- grow: scrollable.value
- }), {
- [HAPTICS_FEEDBACK]: !disabled
- }],
- "onClick": () => {
- if (!disabled) {
- toggleItem(index);
- }
- }
- }, [_createVNode("span", {
- "class": [bem("title", {
- down: showPopup === (props.direction === "down"),
- active: showPopup
- }), titleClass],
- "style": {
- color: showPopup ? props.activeColor : ""
- }
- }, [_createVNode("div", {
- "class": "van-ellipsis"
- }, [item.renderTitle()])])]);
- };
- useExpose({
- close
- });
- linkChildren({
- id,
- props,
- offset,
- updateOffset
- });
- useClickAway(root, onClickAway);
- useEventListener("scroll", onScroll, {
- target: scrollParent,
- passive: true
- });
- return () => {
- var _a;
- return _createVNode("div", {
- "ref": root,
- "class": bem()
- }, [_createVNode("div", {
- "ref": barRef,
- "style": barStyle.value,
- "class": bem("bar", {
- opened: opened.value,
- scrollable: scrollable.value
- })
- }, [children.map(renderTitle)]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
- };
- }
- });
- export {
- DROPDOWN_KEY,
- stdin_default as default,
- dropdownMenuProps
- };
|