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

package/es/dialog/function-call.js

@@ -1,85 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { extend, inBrowser, withInstall } from "../utils";
-import { mountComponent, usePopupState } from "../utils/mount-component";
-import VanDialog from "./Dialog";
-let instance;
-function initInstance() {
-  const Wrapper = {
-    setup() {
-      const {
-        state,
-        toggle
-      } = usePopupState();
-      return () => _createVNode(VanDialog, _mergeProps(state, {
-        "onUpdate:show": toggle
-      }), null);
-    }
-  };
-  ({
-    instance
-  } = mountComponent(Wrapper));
-}
-function Dialog(options) {
-  if (!inBrowser) {
-    return Promise.resolve();
-  }
-  return new Promise((resolve, reject) => {
-    if (!instance) {
-      initInstance();
-    }
-    instance.open(extend({}, Dialog.currentOptions, options, {
-      callback: (action) => {
-        (action === "confirm" ? resolve : reject)(action);
-      }
-    }));
-  });
-}
-Dialog.defaultOptions = {
-  title: "",
-  width: "",
-  theme: null,
-  message: "",
-  overlay: true,
-  callback: null,
-  teleport: "body",
-  className: "",
-  allowHtml: false,
-  lockScroll: true,
-  transition: void 0,
-  beforeClose: null,
-  overlayClass: "",
-  overlayStyle: void 0,
-  messageAlign: "",
-  cancelButtonText: "",
-  cancelButtonColor: null,
-  confirmButtonText: "",
-  confirmButtonColor: null,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false
-};
-Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-Dialog.alert = Dialog;
-Dialog.confirm = (options) => Dialog(extend({
-  showCancelButton: true
-}, options));
-Dialog.close = () => {
-  if (instance) {
-    instance.toggle(false);
-  }
-};
-Dialog.setDefaultOptions = (options) => {
-  extend(Dialog.currentOptions, options);
-};
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-};
-Dialog.Component = withInstall(VanDialog);
-Dialog.install = (app) => {
-  app.use(Dialog.Component);
-  app.config.globalProperties.$dialog = Dialog;
-};
-export {
-  Dialog
-};

package/es/dialog/index.js

@@ -1,6 +0,0 @@
-import { Dialog } from "./function-call";
-var stdin_default = Dialog;
-export {
-  Dialog,
-  stdin_default as default
-};

package/es/dialog/index.less

@@ -1,140 +0,0 @@
-body {
-  --van-dialog-width: 320px;
-  --van-dialog-small-screen-width: 90%;
-  --van-dialog-font-size: var(--van-font-size-lg);
-  --van-dialog-transition: var(--van-duration-base);
-  --van-dialog-radius: 16px;
-  --van-dialog-background: var(--van-background-2);
-  --van-dialog-header-font-weight: var(--van-font-bold);
-  --van-dialog-header-line-height: 24px;
-  --van-dialog-header-padding-top: 26px;
-  --van-dialog-header-isolated-padding: var(--van-padding-lg) 0;
-  --van-dialog-message-padding: var(--van-padding-lg);
-  --van-dialog-message-font-size: var(--van-font-size-md);
-  --van-dialog-message-line-height: var(--van-line-height-md);
-  --van-dialog-message-max-height: 60vh;
-  --van-dialog-has-title-message-text-color: var(--van-gray-7);
-  --van-dialog-has-title-message-padding-top: var(--van-padding-xs);
-  --van-dialog-button-height: 48px;
-  --van-dialog-round-button-height: 36px;
-  --van-dialog-confirm-button-text-color: var(--van-primary-color);
-}
-
-.van-dialog {
-  top: 45%;
-  left: 50%;
-  width: var(--van-dialog-width);
-  overflow: hidden;
-  font-size: var(--van-dialog-font-size);
-  background: var(--van-dialog-background);
-  border-radius: var(--van-dialog-radius);
-  backface-visibility: hidden; // avoid blurry text after scale animation
-  transition: var(--van-dialog-transition);
-  transition-property: transform, opacity;
-
-  @media (max-width: 321px) {
-    width: var(--van-dialog-small-screen-width);
-  }
-
-  &__header {
-    color: var(--van-text-color);
-    padding-top: var(--van-dialog-header-padding-top);
-    font-weight: var(--van-dialog-header-font-weight);
-    line-height: var(--van-dialog-header-line-height);
-    text-align: center;
-
-    &--isolated {
-      padding: var(--van-dialog-header-isolated-padding);
-    }
-  }
-
-  &__content {
-    &--isolated {
-      display: flex;
-      align-items: center;
-      min-height: 104px;
-    }
-  }
-
-  &__message {
-    color: var(--van-text-color);
-    flex: 1;
-    max-height: var(--van-dialog-message-max-height);
-    padding: 26px var(--van-dialog-message-padding);
-    overflow-y: auto;
-    font-size: var(--van-dialog-message-font-size);
-    line-height: var(--van-dialog-message-line-height);
-
-    // allow newline character
-    white-space: pre-wrap;
-    text-align: center;
-    word-wrap: break-word;
-    -webkit-overflow-scrolling: touch;
-
-    &--has-title {
-      padding-top: var(--van-dialog-has-title-message-padding-top);
-      color: var(--van-dialog-has-title-message-text-color);
-    }
-
-    &--left {
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
-  }
-
-  &__footer {
-    display: flex;
-    overflow: hidden;
-    user-select: none;
-  }
-
-  &__confirm,
-  &__cancel {
-    flex: 1;
-    height: var(--van-dialog-button-height);
-    margin: 0;
-    border: 0;
-  }
-
-  &__confirm {
-    &,
-    &:active {
-      color: var(--van-dialog-confirm-button-text-color);
-    }
-  }
-
-  &--round-button {
-    .van-dialog__footer {
-      position: relative;
-      height: auto;
-      padding: var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md);
-    }
-
-    .van-dialog__message {
-      padding-bottom: var(--van-padding-md);
-      color: var(--van-text-color);
-    }
-
-    .van-dialog__confirm,
-    .van-dialog__cancel {
-      height: var(--van-dialog-round-button-height);
-    }
-
-    .van-dialog__confirm {
-      color: var(--van-white);
-    }
-  }
-
-  &-bounce-enter-from {
-    transform: translate3d(-50%, -50%, 0) scale(0.7);
-    opacity: 0;
-  }
-
-  &-bounce-leave-active {
-    transform: translate3d(-50%, -50%, 0) scale(0.9);
-    opacity: 0;
-  }
-}

package/es/dialog/style/less.d.ts

@@ -1 +0,0 @@
-export {};

package/es/dialog/style/less.js

@@ -1,10 +0,0 @@
-import "../../style/base.less";
-import "../../action-bar/index.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../../loading/index.less";
-import "../../button/index.less";
-import "../../action-bar-button/index.less";
-import "../../overlay/index.less";
-import "../../popup/index.less";
-import "../index.less";

package/es/divider/Divider.js

@@ -1,31 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { defineComponent } from "vue";
-import { truthProp, makeStringProp, createNamespace } from "../utils";
-const [name, bem] = createNamespace("divider");
-const dividerProps = {
-  dashed: Boolean,
-  hairline: truthProp,
-  contentPosition: makeStringProp("center")
-};
-var stdin_default = defineComponent({
-  name,
-  props: dividerProps,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      var _a;
-      return _createVNode("div", {
-        "role": "separator",
-        "class": bem({
-          dashed: props.dashed,
-          hairline: props.hairline,
-          [`content-${props.contentPosition}`]: !!slots.default
-        })
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/divider/index.js

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

package/es/divider/index.less

@@ -1,73 +0,0 @@
-body {
-  --van-divider-margin: var(--van-padding-md) 0;
-  --van-divider-text-color: var(--van-text-color-2);
-  --van-divider-font-size: var(--van-font-size-md);
-  --van-divider-line-height: 24px;
-  --van-divider-border-color: var(--van-border-color);
-  --van-divider-content-padding: var(--van-padding-md);
-  --van-divider-content-left-width: 10%;
-  --van-divider-content-right-width: 10%;
-}
-
-.van-divider {
-  display: flex;
-  align-items: center;
-  margin: var(--van-divider-margin);
-  color: var(--van-divider-text-color);
-  font-size: var(--van-divider-font-size);
-  line-height: var(--van-divider-line-height);
-  border-color: var(--van-divider-border-color);
-  border-style: solid;
-  border-width: 0;
-
-  &::before,
-  &::after {
-    display: block;
-    flex: 1;
-    box-sizing: border-box;
-    height: 1px;
-    border-color: inherit;
-    border-style: inherit;
-    border-width: var(--van-border-width) 0 0;
-  }
-
-  &::before {
-    content: '';
-  }
-
-  &--hairline {
-    &::before,
-    &::after {
-      transform: scaleY(0.5);
-    }
-  }
-
-  &--dashed {
-    border-style: dashed;
-  }
-
-  &--content-center,
-  &--content-left,
-  &--content-right {
-    &::before {
-      margin-right: var(--van-divider-content-padding);
-    }
-
-    &::after {
-      margin-left: var(--van-divider-content-padding);
-      content: '';
-    }
-  }
-
-  &--content-left {
-    &::before {
-      max-width: var(--van-divider-content-left-width);
-    }
-  }
-
-  &--content-right {
-    &::after {
-      max-width: var(--van-divider-content-right-width);
-    }
-  }
-}

package/es/divider/style/less.d.ts

@@ -1 +0,0 @@
-export {};

package/es/divider/style/less.js

@@ -1,2 +0,0 @@
-import "../../style/base.less";
-import "../index.less";

package/es/dropdown-item/DropdownItem.js

@@ -1,180 +0,0 @@
-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";
-import { DROPDOWN_KEY } from "../dropdown-menu/DropdownMenu";
-import { useParent } from "@vant/use";
-import { useExpose } from "../composables/use-expose";
-import { Cell } from "../cell";
-import { Icon } from "../icon";
-import { Popup } from "../popup";
-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.js

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

package/es/dropdown-item/index.less

@@ -1,41 +0,0 @@
-body {
-  --van-dropdown-item-z-index: 10;
-}
-
-.van-dropdown-item {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: var(--van-dropdown-item-z-index);
-  overflow: hidden;
-
-  &__icon {
-    display: block;
-    line-height: inherit;
-  }
-
-  &__option {
-    text-align: left;
-
-    &--active {
-      color: var(--van-dropdown-menu-option-active-color);
-
-      .van-dropdown-item__icon {
-        color: var(--van-dropdown-menu-option-active-color);
-      }
-    }
-  }
-
-  &--up {
-    top: 0;
-  }
-
-  &--down {
-    bottom: 0;
-  }
-
-  &__content {
-    position: absolute;
-    max-height: var(--van-dropdown-menu-content-max-height);
-  }
-}

package/es/dropdown-item/style/less.d.ts

@@ -1 +0,0 @@
-export {};

package/es/dropdown-item/style/less.js

@@ -1,8 +0,0 @@
-import "../../style/base.less";
-import "../../badge/index.less";
-import "../../icon/index.less";
-import "../../cell/index.less";
-import "../../overlay/index.less";
-import "../../popup/index.less";
-import "../../dropdown-menu/index.less";
-import "../index.less";