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

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.d.ts

@@ -1,9 +1,13 @@
-import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
+import { type PropType, type InjectionKey, type ExtractPropTypes, type ComponentPublicInstance } from 'vue';
 import { type Numeric } from '../utils';
 export declare type CollapseProvide = {
     toggle: (name: Numeric, expanded: boolean) => void;
     isExpanded: (name: Numeric) => boolean;
 };
+export declare type CollapseToggleAllOptions = boolean | {
+    expanded?: boolean;
+    skipDisabled?: boolean;
+};
 export declare const COLLAPSE_KEY: InjectionKey<CollapseProvide>;
 declare const collapseProps: {
     border: {
@@ -17,6 +21,9 @@ declare const collapseProps: {
     };
 };
 export declare type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+export declare type CollapseInstance = ComponentPublicInstance<{
+    toggleAll: (options?: boolean | CollapseToggleAllOptions) => void;
+}>;
 declare const _default: import("vue").DefineComponent<{
     border: {
         type: BooleanConstructor;

package/es/collapse/Collapse.mjs

@@ -0,0 +1,108 @@
+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";
+import { useExpose } from "../composables/use-expose.mjs";
+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,
+      children
+    } = 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 toggleAll = (options = {}) => {
+      if (props.accordion) {
+        return;
+      }
+      if (typeof options === "boolean") {
+        options = {
+          expanded: options
+        };
+      }
+      const {
+        expanded,
+        skipDisabled
+      } = options;
+      const expandedChildren = children.filter((item) => {
+        if (item.disabled && skipDisabled) {
+          return item.expanded.value;
+        }
+        return expanded != null ? expanded : !item.expanded.value;
+      });
+      const names = expandedChildren.map((item) => item.itemName.value);
+      updateName(names);
+    };
+    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);
+    };
+    useExpose({
+      toggleAll
+    });
+    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.d.ts

@@ -27,7 +27,7 @@ export declare const Collapse: import("../utils").WithInstall<import("vue").Defi
     accordion: boolean;
 }>>;
 export default Collapse;
-export type { CollapseProps } from './Collapse';
+export type { CollapseProps, CollapseInstance, CollapseToggleAllOptions, } from './Collapse';
 declare module 'vue' {
     interface GlobalComponents {
         VanCollapse: typeof Collapse;

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,136 @@
+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,
+      expanded,
+      itemName: name2
+    });
+    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-global-z-index.d.ts

@@ -0,0 +1,4 @@
+/** the global z-index is automatically incremented after reading */
+export declare const useGlobalZIndex: () => number;
+/** reset the global z-index */
+export declare const setGlobalZIndex: (val: number) => void;

package/es/composables/use-global-z-index.mjs

@@ -0,0 +1,9 @@
+let globalZIndex = 2e3;
+const useGlobalZIndex = () => ++globalZIndex;
+const setGlobalZIndex = (val) => {
+  globalZIndex = val;
+};
+export {
+  setGlobalZIndex,
+  useGlobalZIndex
+};

package/es/composables/use-height.d.ts

@@ -1,2 +1,2 @@
 import { Ref } from 'vue';
-export declare const useHeight: (element: Element | Ref<Element | undefined>) => Ref<number | undefined>;
+export declare const useHeight: (element: Element | Ref<Element | undefined>, withSafeArea?: boolean) => Ref<number | undefined>;

package/es/composables/use-height.mjs

@@ -0,0 +1,22 @@
+import { useRect } from "@vant/use";
+import { ref, onMounted, nextTick } from "vue";
+import { onPopupReopen } from "./on-popup-reopen.mjs";
+const useHeight = (element, withSafeArea) => {
+  const height = ref();
+  const setHeight = () => {
+    height.value = useRect(element).height;
+  };
+  onMounted(() => {
+    nextTick(setHeight);
+    if (withSafeArea) {
+      for (let i = 1; i <= 3; i++) {
+        setTimeout(setHeight, 100 * i);
+      }
+    }
+  });
+  onPopupReopen(() => nextTick(setHeight));
+  return height;
+};
+export {
+  useHeight
+};

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

@@ -0,0 +1,55 @@
+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 DIRECTION_UP = "01";
+  const DIRECTION_DOWN = "10";
+  const onTouchMove = (event) => {
+    touch.move(event);
+    const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP;
+    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, true);
+  return (renderContent) => _createVNode("div", {
+    "class": bem("placeholder"),
+    "style": {
+      height: height.value ? `${height.value}px` : void 0
+    }
+  }, [renderContent()]);
+}
+export {
+  usePlaceholder
+};

package/es/composables/use-visibility-change.mjs

@@ -0,0 +1,27 @@
+import { inBrowser } from "../utils/index.mjs";
+import { onDeactivated, onBeforeUnmount } from "vue";
+import { onMountedOrActivated } from "@vant/use";
+function useVisibilityChange(target, onChange) {
+  if (!inBrowser || !window.IntersectionObserver) {
+    return;
+  }
+  const observer = new IntersectionObserver((entries) => {
+    onChange(entries[0].intersectionRatio > 0);
+  }, { root: document.body });
+  const observe = () => {
+    if (target.value) {
+      observer.observe(target.value);
+    }
+  };
+  const unobserve = () => {
+    if (target.value) {
+      observer.unobserve(target.value);
+    }
+  };
+  onDeactivated(unobserve);
+  onBeforeUnmount(unobserve);
+  onMountedOrActivated(observe);
+}
+export {
+  useVisibilityChange
+};

package/es/config-provider/ConfigProvider.d.ts

@@ -5,6 +5,7 @@ export declare type ConfigProviderProvide = {
     iconPrefix?: string;
 };
 export declare const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide>;
+export declare type ThemeVars = PropType<Record<string, Numeric>>;
 declare const configProviderProps: {
     tag: {
         type: PropType<keyof HTMLElementTagNameMap>;
@@ -14,7 +15,10 @@ declare const configProviderProps: {
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 };
 export declare type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
@@ -27,7 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tag: {
@@ -38,7 +45,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ConfigProviderTheme>;
         default: ConfigProviderTheme;
     };
-    themeVars: PropType<Record<string, Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: ThemeVars;
+    themeVarsDark: ThemeVars;
+    themeVarsLight: ThemeVars;
     iconPrefix: StringConstructor;
 }>>, {
     tag: keyof HTMLElementTagNameMap;