vant 4.0.0-alpha.2 → 4.0.0-beta.0

package/es/checkbox-group/CheckboxGroup.mjs

@@ -0,0 +1,71 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, defineComponent } from "vue";
+import { numericProp, createNamespace, makeArrayProp } from "../utils/index.mjs";
+import { useChildren, useCustomFieldValue } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+const [name, bem] = createNamespace("checkbox-group");
+const checkboxGroupProps = {
+  max: numericProp,
+  disabled: Boolean,
+  iconSize: numericProp,
+  direction: String,
+  modelValue: makeArrayProp(),
+  checkedColor: String
+};
+const CHECKBOX_GROUP_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: checkboxGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      children,
+      linkChildren
+    } = useChildren(CHECKBOX_GROUP_KEY);
+    const updateValue = (value) => emit("update:modelValue", value);
+    const toggleAll = (options = {}) => {
+      if (typeof options === "boolean") {
+        options = {
+          checked: options
+        };
+      }
+      const {
+        checked,
+        skipDisabled
+      } = options;
+      const checkedChildren = children.filter((item) => {
+        if (!item.props.bindGroup) {
+          return false;
+        }
+        if (item.props.disabled && skipDisabled) {
+          return item.checked.value;
+        }
+        return checked != null ? checked : !item.checked.value;
+      });
+      const names = checkedChildren.map((item) => item.name);
+      updateValue(names);
+    };
+    watch(() => props.modelValue, (value) => emit("change", value));
+    useExpose({
+      toggleAll
+    });
+    useCustomFieldValue(() => props.modelValue);
+    linkChildren({
+      props,
+      updateValue
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem([props.direction])
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  CHECKBOX_GROUP_KEY,
+  stdin_default as default
+};

package/es/checkbox-group/index.mjs

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

package/es/circle/Circle.mjs

@@ -0,0 +1,152 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, computed, defineComponent } from "vue";
+import { raf, cancelRaf } from "@vant/use";
+import { isObject, truthProp, numericProp, getSizeStyle, makeStringProp, makeNumberProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("circle");
+let uid = 0;
+const format = (rate) => Math.min(Math.max(+rate, 0), 100);
+function getPath(clockwise, viewBoxSize) {
+  const sweepFlag = clockwise ? 1 : 0;
+  return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
+}
+const circleProps = {
+  text: String,
+  size: numericProp,
+  fill: makeStringProp("none"),
+  rate: makeNumericProp(100),
+  speed: makeNumericProp(0),
+  color: [String, Object],
+  clockwise: truthProp,
+  layerColor: String,
+  currentRate: makeNumberProp(0),
+  strokeWidth: makeNumericProp(40),
+  strokeLinecap: String,
+  startPosition: makeStringProp("top")
+};
+var stdin_default = defineComponent({
+  name,
+  props: circleProps,
+  emits: ["update:currentRate"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const id = `van-circle-${uid++}`;
+    const viewBoxSize = computed(() => +props.strokeWidth + 1e3);
+    const path = computed(() => getPath(props.clockwise, viewBoxSize.value));
+    const svgStyle = computed(() => {
+      const ROTATE_ANGLE_MAP = {
+        top: 0,
+        right: 90,
+        bottom: 180,
+        left: 270
+      };
+      const angleValue = ROTATE_ANGLE_MAP[props.startPosition];
+      if (angleValue) {
+        return {
+          transform: `rotate(${angleValue}deg)`
+        };
+      }
+    });
+    watch(() => props.rate, (rate) => {
+      let rafId;
+      const startTime = Date.now();
+      const startRate = props.currentRate;
+      const endRate = format(rate);
+      const duration = Math.abs((startRate - endRate) * 1e3 / +props.speed);
+      const animate = () => {
+        const now = Date.now();
+        const progress = Math.min((now - startTime) / duration, 1);
+        const rate2 = progress * (endRate - startRate) + startRate;
+        emit("update:currentRate", format(parseFloat(rate2.toFixed(1))));
+        if (endRate > startRate ? rate2 < endRate : rate2 > endRate) {
+          rafId = raf(animate);
+        }
+      };
+      if (props.speed) {
+        if (rafId) {
+          cancelRaf(rafId);
+        }
+        rafId = raf(animate);
+      } else {
+        emit("update:currentRate", endRate);
+      }
+    }, {
+      immediate: true
+    });
+    const renderHover = () => {
+      const PERIMETER = 3140;
+      const {
+        strokeWidth,
+        currentRate,
+        strokeLinecap
+      } = props;
+      const offset = PERIMETER * currentRate / 100;
+      const color = isObject(props.color) ? `url(#${id})` : props.color;
+      const style = {
+        stroke: color,
+        strokeWidth: `${+strokeWidth + 1}px`,
+        strokeLinecap,
+        strokeDasharray: `${offset}px ${PERIMETER}px`
+      };
+      return _createVNode("path", {
+        "d": path.value,
+        "style": style,
+        "class": bem("hover"),
+        "stroke": color
+      }, null);
+    };
+    const renderLayer = () => {
+      const style = {
+        fill: props.fill,
+        stroke: props.layerColor,
+        strokeWidth: `${props.strokeWidth}px`
+      };
+      return _createVNode("path", {
+        "class": bem("layer"),
+        "style": style,
+        "d": path.value
+      }, null);
+    };
+    const renderGradient = () => {
+      const {
+        color
+      } = props;
+      if (!isObject(color)) {
+        return;
+      }
+      const Stops = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => _createVNode("stop", {
+        "key": index,
+        "offset": key,
+        "stop-color": color[key]
+      }, null));
+      return _createVNode("defs", null, [_createVNode("linearGradient", {
+        "id": id,
+        "x1": "100%",
+        "y1": "0%",
+        "x2": "0%",
+        "y2": "0%"
+      }, [Stops])]);
+    };
+    const renderText = () => {
+      if (slots.default) {
+        return slots.default();
+      }
+      if (props.text) {
+        return _createVNode("div", {
+          "class": bem("text")
+        }, [props.text]);
+      }
+    };
+    return () => _createVNode("div", {
+      "class": bem(),
+      "style": getSizeStyle(props.size)
+    }, [_createVNode("svg", {
+      "viewBox": `0 0 ${viewBoxSize.value} ${viewBoxSize.value}`,
+      "style": svgStyle.value
+    }, [renderGradient(), renderLayer(), renderHover()]), renderText()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/circle/index.mjs

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

package/es/col/Col.mjs

@@ -0,0 +1,63 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { numericProp, createNamespace, makeNumericProp, makeStringProp } from "../utils/index.mjs";
+import { useParent } from "@vant/use";
+import { ROW_KEY } from "../row/Row.mjs";
+const [name, bem] = createNamespace("col");
+const colProps = {
+  tag: makeStringProp("div"),
+  span: makeNumericProp(0),
+  offset: numericProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: colProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      parent,
+      index
+    } = useParent(ROW_KEY);
+    const style = computed(() => {
+      if (!parent) {
+        return;
+      }
+      const {
+        spaces
+      } = parent;
+      if (spaces && spaces.value && spaces.value[index.value]) {
+        const {
+          left,
+          right
+        } = spaces.value[index.value];
+        return {
+          paddingLeft: left ? `${left}px` : null,
+          paddingRight: right ? `${right}px` : null
+        };
+      }
+    });
+    return () => {
+      const {
+        tag,
+        span,
+        offset
+      } = props;
+      return _createVNode(tag, {
+        "style": style.value,
+        "class": bem({
+          [span]: span,
+          [`offset-${offset}`]: offset
+        })
+      }, {
+        default: () => {
+          var _a;
+          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/col/index.mjs

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

package/es/collapse/Collapse.mjs

@@ -0,0 +1,81 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+const [name, bem] = createNamespace("collapse");
+const COLLAPSE_KEY = Symbol(name);
+const collapseProps = {
+  border: truthProp,
+  accordion: Boolean,
+  modelValue: {
+    type: [String, Number, Array],
+    default: ""
+  }
+};
+function validateModelValue(modelValue, accordion) {
+  if (accordion && Array.isArray(modelValue)) {
+    console.error('[Vant] Collapse: "v-model" should not be Array in accordion mode');
+    return false;
+  }
+  if (!accordion && !Array.isArray(modelValue)) {
+    console.error('[Vant] Collapse: "v-model" should be Array in non-accordion mode');
+    return false;
+  }
+  return true;
+}
+var stdin_default = defineComponent({
+  name,
+  props: collapseProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(COLLAPSE_KEY);
+    const updateName = (name2) => {
+      emit("change", name2);
+      emit("update:modelValue", name2);
+    };
+    const toggle = (name2, expanded) => {
+      const {
+        accordion,
+        modelValue
+      } = props;
+      if (accordion) {
+        updateName(name2 === modelValue ? "" : name2);
+      } else if (expanded) {
+        updateName(modelValue.concat(name2));
+      } else {
+        updateName(modelValue.filter((activeName) => activeName !== name2));
+      }
+    };
+    const isExpanded = (name2) => {
+      const {
+        accordion,
+        modelValue
+      } = props;
+      if (process.env.NODE_ENV !== "production" && !validateModelValue(modelValue, accordion)) {
+        return false;
+      }
+      return accordion ? modelValue === name2 : modelValue.includes(name2);
+    };
+    linkChildren({
+      toggle,
+      isExpanded
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": [bem(), {
+          [BORDER_TOP_BOTTOM]: props.border
+        }]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  COLLAPSE_KEY,
+  stdin_default as default
+};

package/es/collapse/index.mjs

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

package/es/collapse-item/CollapseItem.d.ts

@@ -107,11 +107,11 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
 }>>, {
+    required: boolean;
     center: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     readonly: boolean;
     lazyRender: boolean;

package/es/collapse-item/CollapseItem.mjs

@@ -0,0 +1,134 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { ref, watch, computed, nextTick, defineComponent } from "vue";
+import { cellSharedProps } from "../cell/Cell.mjs";
+import { pick, extend, truthProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { COLLAPSE_KEY } from "../collapse/Collapse.mjs";
+import { raf, doubleRaf, useParent } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { useLazyRender } from "../composables/use-lazy-render.mjs";
+import { Cell } from "../cell/index.mjs";
+const [name, bem] = createNamespace("collapse-item");
+const CELL_SLOTS = ["icon", "title", "value", "label", "right-icon"];
+const collapseItemProps = extend({}, cellSharedProps, {
+  name: numericProp,
+  isLink: truthProp,
+  disabled: Boolean,
+  readonly: Boolean,
+  lazyRender: truthProp
+});
+var stdin_default = defineComponent({
+  name,
+  props: collapseItemProps,
+  setup(props, {
+    slots
+  }) {
+    const wrapperRef = ref();
+    const contentRef = ref();
+    const {
+      parent,
+      index
+    } = useParent(COLLAPSE_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <CollapseItem> must be a child component of <Collapse>.");
+      }
+      return;
+    }
+    const name2 = computed(() => {
+      var _a;
+      return (_a = props.name) != null ? _a : index.value;
+    });
+    const expanded = computed(() => parent.isExpanded(name2.value));
+    const show = ref(expanded.value);
+    const lazyRender = useLazyRender(() => show.value || !props.lazyRender);
+    const onTransitionEnd = () => {
+      if (!expanded.value) {
+        show.value = false;
+      } else if (wrapperRef.value) {
+        wrapperRef.value.style.height = "";
+      }
+    };
+    watch(expanded, (value, oldValue) => {
+      if (oldValue === null) {
+        return;
+      }
+      if (value) {
+        show.value = true;
+      }
+      const tick = value ? nextTick : raf;
+      tick(() => {
+        if (!contentRef.value || !wrapperRef.value) {
+          return;
+        }
+        const {
+          offsetHeight
+        } = contentRef.value;
+        if (offsetHeight) {
+          const contentHeight = `${offsetHeight}px`;
+          wrapperRef.value.style.height = value ? "0" : contentHeight;
+          doubleRaf(() => {
+            if (wrapperRef.value) {
+              wrapperRef.value.style.height = value ? contentHeight : "0";
+            }
+          });
+        } else {
+          onTransitionEnd();
+        }
+      });
+    });
+    const toggle = (newValue = !expanded.value) => {
+      parent.toggle(name2.value, newValue);
+    };
+    const onClickTitle = () => {
+      if (!props.disabled && !props.readonly) {
+        toggle();
+      }
+    };
+    const renderTitle = () => {
+      const {
+        border,
+        disabled,
+        readonly
+      } = props;
+      const attrs = pick(props, Object.keys(cellSharedProps));
+      if (readonly) {
+        attrs.isLink = false;
+      }
+      if (disabled || readonly) {
+        attrs.clickable = false;
+      }
+      return _createVNode(Cell, _mergeProps({
+        "role": "button",
+        "class": bem("title", {
+          disabled,
+          expanded: expanded.value,
+          borderless: !border
+        }),
+        "aria-expanded": String(expanded.value),
+        "onClick": onClickTitle
+      }, attrs), pick(slots, CELL_SLOTS));
+    };
+    const renderContent = lazyRender(() => {
+      var _a;
+      return _withDirectives(_createVNode("div", {
+        "ref": wrapperRef,
+        "class": bem("wrapper"),
+        "onTransitionend": onTransitionEnd
+      }, [_createVNode("div", {
+        "ref": contentRef,
+        "class": bem("content")
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[_vShow, show.value]]);
+    });
+    useExpose({
+      toggle
+    });
+    return () => _createVNode("div", {
+      "class": [bem({
+        border: index.value && props.border
+      })]
+    }, [renderTitle(), renderContent()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/collapse-item/index.d.ts

@@ -69,11 +69,11 @@ export declare const CollapseItem: import("../utils").WithInstall<import("vue").
         default: true;
     };
 }>>, {
+    required: boolean;
     center: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     readonly: boolean;
     lazyRender: boolean;

package/es/collapse-item/index.mjs

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

package/es/composables/use-expose.mjs

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from "vue";
+import { extend } from "../utils/index.mjs";
+function useExpose(apis) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    extend(instance.proxy, apis);
+  }
+}
+export {
+  useExpose
+};

package/es/composables/use-lock-scroll.mjs

@@ -0,0 +1,53 @@
+import { watch, onBeforeUnmount, onDeactivated } from "vue";
+import { getScrollParent, onMountedOrActivated } from "@vant/use";
+import { useTouch } from "./use-touch.mjs";
+import { preventDefault } from "../utils/index.mjs";
+let totalLockCount = 0;
+const BODY_LOCK_CLASS = "van-overflow-hidden";
+function useLockScroll(rootRef, shouldLock) {
+  const touch = useTouch();
+  const onTouchMove = (event) => {
+    touch.move(event);
+    const direction = touch.deltaY.value > 0 ? "10" : "01";
+    const el = getScrollParent(event.target, rootRef.value);
+    const { scrollHeight, offsetHeight, scrollTop } = el;
+    let status = "11";
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? "00" : "01";
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = "10";
+    }
+    if (status !== "11" && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      preventDefault(event, true);
+    }
+  };
+  const lock = () => {
+    document.addEventListener("touchstart", touch.start);
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+    totalLockCount++;
+  };
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener("touchstart", touch.start);
+      document.removeEventListener("touchmove", onTouchMove);
+      totalLockCount--;
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+  const init = () => shouldLock() && lock();
+  const destroy = () => shouldLock() && unlock();
+  onMountedOrActivated(init);
+  onDeactivated(destroy);
+  onBeforeUnmount(destroy);
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock();
+  });
+}
+export {
+  useLockScroll
+};

package/es/composables/use-placeholder.mjs

@@ -0,0 +1,14 @@
+import { createVNode as _createVNode } from "vue";
+import { useHeight } from "./use-height.mjs";
+function usePlaceholder(contentRef, bem) {
+  const height = useHeight(contentRef);
+  return (renderContent) => _createVNode("div", {
+    "class": bem("placeholder"),
+    "style": {
+      height: height.value ? `${height.value}px` : void 0
+    }
+  }, [renderContent()]);
+}
+export {
+  usePlaceholder
+};