vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/es/dropdown-item/DropdownItem.mjs

@@ -0,0 +1,180 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { reactive, Teleport, defineComponent } from "vue";
+import { truthProp, unknownProp, getZIndexStyle, createNamespace, makeArrayProp } from "../utils/index.mjs";
+import { DROPDOWN_KEY } from "../dropdown-menu/DropdownMenu.mjs";
+import { useParent } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { Cell } from "../cell/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+const [name, bem] = createNamespace("dropdown-item");
+const dropdownItemProps = {
+  title: String,
+  options: makeArrayProp(),
+  disabled: Boolean,
+  teleport: [String, Object],
+  lazyRender: truthProp,
+  modelValue: unknownProp,
+  titleClass: unknownProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: dropdownItemProps,
+  emits: ["open", "opened", "close", "closed", "change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const state = reactive({
+      showPopup: false,
+      transition: true,
+      showWrapper: false
+    });
+    const {
+      parent,
+      index
+    } = useParent(DROPDOWN_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <DropdownItem> must be a child component of <DropdownMenu>.");
+      }
+      return;
+    }
+    const getEmitter = (name2) => () => emit(name2);
+    const onOpen = getEmitter("open");
+    const onClose = getEmitter("close");
+    const onOpened = getEmitter("opened");
+    const onClosed = () => {
+      state.showWrapper = false;
+      emit("closed");
+    };
+    const onClickWrapper = (event) => {
+      if (props.teleport) {
+        event.stopPropagation();
+      }
+    };
+    const toggle = (show = !state.showPopup, options = {}) => {
+      if (show === state.showPopup) {
+        return;
+      }
+      state.showPopup = show;
+      state.transition = !options.immediate;
+      if (show) {
+        state.showWrapper = true;
+      }
+    };
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return props.title;
+      }
+      const match = props.options.find((option) => option.value === props.modelValue);
+      return match ? match.text : "";
+    };
+    const renderOption = (option) => {
+      const {
+        activeColor
+      } = parent.props;
+      const active = option.value === props.modelValue;
+      const onClick = () => {
+        state.showPopup = false;
+        if (option.value !== props.modelValue) {
+          emit("update:modelValue", option.value);
+          emit("change", option.value);
+        }
+      };
+      const renderIcon = () => {
+        if (active) {
+          return _createVNode(Icon, {
+            "class": bem("icon"),
+            "color": activeColor,
+            "name": "success"
+          }, null);
+        }
+      };
+      return _createVNode(Cell, {
+        "role": "menuitem",
+        "key": option.value,
+        "icon": option.icon,
+        "title": option.text,
+        "class": bem("option", {
+          active
+        }),
+        "style": {
+          color: active ? activeColor : ""
+        },
+        "tabindex": active ? 0 : -1,
+        "clickable": true,
+        "onClick": onClick
+      }, {
+        value: renderIcon
+      });
+    };
+    const renderContent = () => {
+      const {
+        offset
+      } = parent;
+      const {
+        zIndex,
+        overlay,
+        duration,
+        direction,
+        closeOnClickOverlay
+      } = parent.props;
+      const style = getZIndexStyle(zIndex);
+      if (direction === "down") {
+        style.top = `${offset.value}px`;
+      } else {
+        style.bottom = `${offset.value}px`;
+      }
+      return _withDirectives(_createVNode("div", {
+        "style": style,
+        "class": bem([direction]),
+        "onClick": onClickWrapper
+      }, [_createVNode(Popup, {
+        "show": state.showPopup,
+        "onUpdate:show": ($event) => state.showPopup = $event,
+        "role": "menu",
+        "class": bem("content"),
+        "overlay": overlay,
+        "position": direction === "down" ? "top" : "bottom",
+        "duration": state.transition ? duration : 0,
+        "lazyRender": props.lazyRender,
+        "overlayStyle": {
+          position: "absolute"
+        },
+        "aria-labelledby": `${parent.id}-${index.value}`,
+        "closeOnClickOverlay": closeOnClickOverlay,
+        "onOpen": onOpen,
+        "onClose": onClose,
+        "onOpened": onOpened,
+        "onClosed": onClosed
+      }, {
+        default: () => {
+          var _a;
+          return [props.options.map(renderOption), (_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      })]), [[_vShow, state.showWrapper]]);
+    };
+    useExpose({
+      state,
+      toggle,
+      renderTitle
+    });
+    return () => {
+      if (props.teleport) {
+        return _createVNode(Teleport, {
+          "to": props.teleport
+        }, {
+          default: () => [renderContent()]
+        });
+      }
+      return renderContent();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/dropdown-item/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _DropdownItem from "./DropdownItem.mjs";
+const DropdownItem = withInstall(_DropdownItem);
+var stdin_default = DropdownItem;
+export {
+  DropdownItem,
+  stdin_default as default
+};

package/es/dropdown-menu/DropdownMenu.mjs

@@ -0,0 +1,136 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, computed, defineComponent } from "vue";
+import { isDef, truthProp, numericProp, windowHeight, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { useId } from "../composables/use-id.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,
+  closeOnClickOutside: truthProp,
+  closeOnClickOverlay: truthProp
+};
+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 barStyle = computed(() => {
+      if (opened.value && isDef(props.zIndex)) {
+        return {
+          zIndex: +props.zIndex + 1
+        };
+      }
+    });
+    const onClickAway = () => {
+      if (props.closeOnClickOutside) {
+        children.forEach((item) => {
+          item.toggle(false);
+        });
+      }
+    };
+    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) {
+          updateOffset();
+          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,
+        "class": [bem("item", {
+          disabled
+        }), {
+          [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()])])]);
+    };
+    linkChildren({
+      id,
+      props,
+      offset
+    });
+    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
+        })
+      }, [children.map(renderTitle)]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  DROPDOWN_KEY,
+  stdin_default as default
+};

package/es/dropdown-menu/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _DropdownMenu from "./DropdownMenu.mjs";
+const DropdownMenu = withInstall(_DropdownMenu);
+var stdin_default = DropdownMenu;
+export {
+  DropdownMenu,
+  stdin_default as default
+};

package/es/empty/Empty.d.ts

@@ -1,4 +1,4 @@
-import { PropType, type ExtractPropTypes } from 'vue';
+import { type PropType, type ExtractPropTypes } from 'vue';
 import { Numeric } from '../utils';
 declare const emptyProps: {
     image: {

package/es/empty/Empty.mjs

@@ -0,0 +1,322 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { useId } from "../composables/use-id.mjs";
+import { getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("empty");
+const emptyProps = {
+  image: makeStringProp("default"),
+  imageSize: [Number, String, Array],
+  description: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: emptyProps,
+  setup(props, {
+    slots
+  }) {
+    const renderDescription = () => {
+      const description = slots.description ? slots.description() : props.description;
+      if (description) {
+        return _createVNode("p", {
+          "class": bem("description")
+        }, [description]);
+      }
+    };
+    const renderBottom = () => {
+      if (slots.default) {
+        return _createVNode("div", {
+          "class": bem("bottom")
+        }, [slots.default()]);
+      }
+    };
+    const baseId = useId();
+    const getId = (num) => `${baseId}-${num}`;
+    const getUrlById = (num) => `url(#${getId(num)})`;
+    const renderStop = (color, offset, opacity) => _createVNode("stop", {
+      "stop-color": color,
+      "offset": `${offset}%`,
+      "stop-opacity": opacity
+    }, null);
+    const renderStops = (fromColor, toColor) => [renderStop(fromColor, 0), renderStop(toColor, 100)];
+    const renderShadow = (id) => [_createVNode("defs", null, [_createVNode("radialGradient", {
+      "id": getId(id),
+      "cx": "50%",
+      "cy": "54%",
+      "fx": "50%",
+      "fy": "54%",
+      "r": "297%",
+      "gradientTransform": "matrix(-.16 0 0 -.33 .58 .72)"
+    }, [renderStop("#EBEDF0", 0), renderStop("#F2F3F5", 100, 0.3)])]), _createVNode("ellipse", {
+      "fill": getUrlById(id),
+      "opacity": ".8",
+      "cx": "80",
+      "cy": "140",
+      "rx": "46",
+      "ry": "8"
+    }, null)];
+    const renderBuilding = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId("a"),
+      "x1": "64%",
+      "y1": "100%",
+      "x2": "64%"
+    }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
+      "opacity": ".8"
+    }, [_createVNode("path", {
+      "d": "M36 131V53H16v20H2v58h34z",
+      "fill": getUrlById("a")
+    }, null), _createVNode("path", {
+      "d": "M123 15h22v14h9v77h-31V15z",
+      "fill": getUrlById("a")
+    }, null)])];
+    const renderCloud = () => [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId("b"),
+      "x1": "64%",
+      "y1": "97%",
+      "x2": "64%",
+      "y2": "0%"
+    }, [renderStop("#F2F3F5", 0, 0.3), renderStop("#F2F3F5", 100)])]), _createVNode("g", {
+      "opacity": ".8"
+    }, [_createVNode("path", {
+      "d": "M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z",
+      "fill": getUrlById("b")
+    }, null), _createVNode("path", {
+      "d": "M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z",
+      "fill": getUrlById("b")
+    }, null)])];
+    const renderNetwork = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "id": getId(1),
+      "x1": "64%",
+      "y1": "100%",
+      "x2": "64%"
+    }, [renderStop("#FFF", 0, 0.5), renderStop("#F2F3F5", 100)]), _createVNode("linearGradient", {
+      "id": getId(2),
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "84%"
+    }, [renderStop("#EBEDF0", 0), renderStop("#DCDEE0", 100, 0)]), _createVNode("linearGradient", {
+      "id": getId(3),
+      "x1": "100%",
+      "x2": "100%",
+      "y2": "100%"
+    }, [renderStops("#EAEDF0", "#DCDEE0")]), _createVNode("radialGradient", {
+      "id": getId(4),
+      "cx": "50%",
+      "cy": "0%",
+      "fx": "50%",
+      "fy": "0%",
+      "r": "100%",
+      "gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
+    }, [renderStop("#EBEDF0", 0), renderStop("#FFF", 100, 0)])]), _createVNode("g", {
+      "fill": "none"
+    }, [renderBuilding(), _createVNode("path", {
+      "fill": getUrlById(4),
+      "d": "M0 139h160v21H0z"
+    }, null), _createVNode("path", {
+      "d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
+      "fill": getUrlById(2)
+    }, null), _createVNode("g", {
+      "opacity": ".6",
+      "stroke-linecap": "round",
+      "stroke-width": "7"
+    }, [_createVNode("path", {
+      "d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M53 36a34 34 0 0 0 0 48",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
+      "stroke": getUrlById(3)
+    }, null), _createVNode("path", {
+      "d": "M106 84a34 34 0 0 0 0-48",
+      "stroke": getUrlById(3)
+    }, null)]), _createVNode("g", {
+      "transform": "translate(31 105)"
+    }, [_createVNode("rect", {
+      "fill": "#EBEDF0",
+      "width": "98",
+      "height": "34",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": "#FFF",
+      "x": "9",
+      "y": "8",
+      "width": "80",
+      "height": "18",
+      "rx": "1.1"
+    }, null), _createVNode("rect", {
+      "fill": "#EBEDF0",
+      "x": "15",
+      "y": "12",
+      "width": "18",
+      "height": "6",
+      "rx": "1.1"
+    }, null)])])]);
+    const renderMaterial = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(5)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "95%",
+      "y1": "48%",
+      "x2": "5.5%",
+      "y2": "51%",
+      "id": getId(6)
+    }, [renderStops("#EAEDF1", "#DCDEE0")]), _createVNode("linearGradient", {
+      "y1": "45%",
+      "x2": "100%",
+      "y2": "54%",
+      "id": getId(7)
+    }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), _createVNode("g", {
+      "transform": "translate(36 50)",
+      "fill": "none"
+    }, [_createVNode("g", {
+      "transform": "translate(8)"
+    }, [_createVNode("rect", {
+      "fill": "#EBEDF0",
+      "opacity": ".6",
+      "x": "38",
+      "y": "13",
+      "width": "36",
+      "height": "53",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": getUrlById(5),
+      "width": "64",
+      "height": "66",
+      "rx": "2"
+    }, null), _createVNode("rect", {
+      "fill": "#FFF",
+      "x": "6",
+      "y": "6",
+      "width": "52",
+      "height": "55",
+      "rx": "1"
+    }, null), _createVNode("g", {
+      "transform": "translate(15 17)",
+      "fill": getUrlById(6)
+    }, [_createVNode("rect", {
+      "width": "34",
+      "height": "6",
+      "rx": "1"
+    }, null), _createVNode("path", {
+      "d": "M0 14h34v6H0z"
+    }, null), _createVNode("rect", {
+      "y": "28",
+      "width": "34",
+      "height": "6",
+      "rx": "1"
+    }, null)])]), _createVNode("rect", {
+      "fill": getUrlById(7),
+      "y": "61",
+      "width": "88",
+      "height": "28",
+      "rx": "1"
+    }, null), _createVNode("rect", {
+      "fill": "#F7F8FA",
+      "x": "29",
+      "y": "72",
+      "width": "30",
+      "height": "6",
+      "rx": "1"
+    }, null)])]);
+    const renderError = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(8)
+    }, [renderStops("#EAEDF1", "#DCDEE0")])]), renderBuilding(), renderCloud(), renderShadow("c"), _createVNode("path", {
+      "d": "m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z",
+      "fill": getUrlById(8)
+    }, null)]);
+    const renderSearch = () => _createVNode("svg", {
+      "viewBox": "0 0 160 160"
+    }, [_createVNode("defs", null, [_createVNode("linearGradient", {
+      "x1": "50%",
+      "y1": "100%",
+      "x2": "50%",
+      "id": getId(9)
+    }, [renderStops("#EEE", "#D8D8D8")]), _createVNode("linearGradient", {
+      "x1": "100%",
+      "y1": "50%",
+      "y2": "50%",
+      "id": getId(10)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(11)
+    }, [renderStops("#F2F3F5", "#DCDEE0")]), _createVNode("linearGradient", {
+      "x1": "50%",
+      "x2": "50%",
+      "y2": "100%",
+      "id": getId(12)
+    }, [renderStops("#FFF", "#F7F8FA")])]), renderBuilding(), renderCloud(), renderShadow("d"), _createVNode("g", {
+      "transform": "rotate(-45 113 -4)",
+      "fill": "none"
+    }, [_createVNode("rect", {
+      "fill": getUrlById(9),
+      "x": "24",
+      "y": "52.8",
+      "width": "5.8",
+      "height": "19",
+      "rx": "1"
+    }, null), _createVNode("rect", {
+      "fill": getUrlById(10),
+      "x": "22.1",
+      "y": "67.3",
+      "width": "9.9",
+      "height": "28",
+      "rx": "1"
+    }, null), _createVNode("circle", {
+      "stroke": getUrlById(11),
+      "stroke-width": "8",
+      "cx": "27",
+      "cy": "27",
+      "r": "27"
+    }, null), _createVNode("circle", {
+      "fill": getUrlById(12),
+      "cx": "27",
+      "cy": "27",
+      "r": "16"
+    }, null), _createVNode("path", {
+      "d": "M37 7c-8 0-15 5-16 12",
+      "stroke": getUrlById(11),
+      "stroke-width": "3",
+      "opacity": ".5",
+      "stroke-linecap": "round",
+      "transform": "rotate(45 29 13)"
+    }, null)])]);
+    const renderImage = () => {
+      var _a;
+      if (slots.image) {
+        return slots.image();
+      }
+      const PRESET_IMAGES = {
+        error: renderError,
+        search: renderSearch,
+        network: renderNetwork,
+        default: renderMaterial
+      };
+      return ((_a = PRESET_IMAGES[props.image]) == null ? void 0 : _a.call(PRESET_IMAGES)) || _createVNode("img", {
+        "src": props.image
+      }, null);
+    };
+    return () => _createVNode("div", {
+      "class": bem()
+    }, [_createVNode("div", {
+      "class": bem("image"),
+      "style": getSizeStyle(props.imageSize)
+    }, [renderImage()]), renderDescription(), renderBottom()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/empty/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Empty from "./Empty.mjs";
+const Empty = withInstall(_Empty);
+var stdin_default = Empty;
+export {
+  Empty,
+  stdin_default as default
+};