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

package/es/rate/Rate.mjs

@@ -0,0 +1,217 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent, ref } from "vue";
+import { addUnit, truthProp, numericProp, preventDefault, makeStringProp, makeNumberProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useRect, useCustomFieldValue } from "@vant/use";
+import { useRefs } from "../composables/use-refs.mjs";
+import { useTouch } from "../composables/use-touch.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("rate");
+function getRateStatus(value, index, allowHalf, readonly) {
+  if (value >= index) {
+    return {
+      status: "full",
+      value: 1
+    };
+  }
+  if (value + 0.5 >= index && allowHalf && !readonly) {
+    return {
+      status: "half",
+      value: 0.5
+    };
+  }
+  if (value + 1 >= index && allowHalf && readonly) {
+    const cardinal = 10 ** 10;
+    return {
+      status: "half",
+      value: Math.round((value - index + 1) * cardinal) / cardinal
+    };
+  }
+  return {
+    status: "void",
+    value: 0
+  };
+}
+const rateProps = {
+  size: numericProp,
+  icon: makeStringProp("star"),
+  color: String,
+  count: makeNumericProp(5),
+  gutter: numericProp,
+  readonly: Boolean,
+  disabled: Boolean,
+  voidIcon: makeStringProp("star-o"),
+  allowHalf: Boolean,
+  voidColor: String,
+  touchable: truthProp,
+  iconPrefix: String,
+  modelValue: makeNumberProp(0),
+  disabledColor: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: rateProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const touch = useTouch();
+    const [itemRefs, setItemRefs] = useRefs();
+    const groupRef = ref();
+    const untouchable = () => props.readonly || props.disabled || !props.touchable;
+    const list = computed(() => Array(+props.count).fill("").map((_, i) => getRateStatus(props.modelValue, i + 1, props.allowHalf, props.readonly)));
+    let ranges;
+    let groupRefRect;
+    let minRectTop = Number.MAX_SAFE_INTEGER;
+    let maxRectTop = Number.MIN_SAFE_INTEGER;
+    const updateRanges = () => {
+      groupRefRect = useRect(groupRef);
+      const rects = itemRefs.value.map(useRect);
+      ranges = [];
+      rects.forEach((rect, index) => {
+        minRectTop = Math.min(rect.top, minRectTop);
+        maxRectTop = Math.max(rect.top, maxRectTop);
+        if (props.allowHalf) {
+          ranges.push({
+            score: index + 0.5,
+            left: rect.left,
+            top: rect.top,
+            height: rect.height
+          }, {
+            score: index + 1,
+            left: rect.left + rect.width / 2,
+            top: rect.top,
+            height: rect.height
+          });
+        } else {
+          ranges.push({
+            score: index + 1,
+            left: rect.left,
+            top: rect.top,
+            height: rect.height
+          });
+        }
+      });
+    };
+    const getScoreByPosition = (x, y) => {
+      for (let i = ranges.length - 1; i > 0; i--) {
+        if (y >= groupRefRect.top && y <= groupRefRect.bottom) {
+          if (x > ranges[i].left && y >= ranges[i].top && y <= ranges[i].top + ranges[i].height) {
+            return ranges[i].score;
+          }
+        } else {
+          const curTop = y < groupRefRect.top ? minRectTop : maxRectTop;
+          if (x > ranges[i].left && ranges[i].top === curTop) {
+            return ranges[i].score;
+          }
+        }
+      }
+      return props.allowHalf ? 0.5 : 1;
+    };
+    const select = (index) => {
+      if (!props.disabled && !props.readonly && index !== props.modelValue) {
+        emit("update:modelValue", index);
+        emit("change", index);
+      }
+    };
+    const onTouchStart = (event) => {
+      if (untouchable()) {
+        return;
+      }
+      touch.start(event);
+      updateRanges();
+    };
+    const onTouchMove = (event) => {
+      if (untouchable()) {
+        return;
+      }
+      touch.move(event);
+      if (touch.isHorizontal()) {
+        const {
+          clientX,
+          clientY
+        } = event.touches[0];
+        preventDefault(event);
+        select(getScoreByPosition(clientX, clientY));
+      }
+    };
+    const renderStar = (item, index) => {
+      const {
+        icon,
+        size,
+        color,
+        count,
+        gutter,
+        voidIcon,
+        disabled,
+        voidColor,
+        allowHalf,
+        iconPrefix,
+        disabledColor
+      } = props;
+      const score = index + 1;
+      const isFull = item.status === "full";
+      const isVoid = item.status === "void";
+      const renderHalf = allowHalf && item.value > 0 && item.value < 1;
+      let style;
+      if (gutter && score !== +count) {
+        style = {
+          paddingRight: addUnit(gutter)
+        };
+      }
+      const onClickItem = (event) => {
+        updateRanges();
+        select(allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score);
+      };
+      return _createVNode("div", {
+        "key": index,
+        "ref": setItemRefs(index),
+        "role": "radio",
+        "style": style,
+        "class": bem("item"),
+        "tabindex": disabled ? void 0 : 0,
+        "aria-setsize": count,
+        "aria-posinset": score,
+        "aria-checked": !isVoid,
+        "onClick": onClickItem
+      }, [_createVNode(Icon, {
+        "size": size,
+        "name": isFull ? icon : voidIcon,
+        "class": bem("icon", {
+          disabled,
+          full: isFull
+        }),
+        "color": disabled ? disabledColor : isFull ? color : voidColor,
+        "classPrefix": iconPrefix
+      }, null), renderHalf && _createVNode(Icon, {
+        "size": size,
+        "style": {
+          width: item.value + "em"
+        },
+        "name": isVoid ? voidIcon : icon,
+        "class": bem("icon", ["half", {
+          disabled,
+          full: !isVoid
+        }]),
+        "color": disabled ? disabledColor : isVoid ? voidColor : color,
+        "classPrefix": iconPrefix
+      }, null)]);
+    };
+    useCustomFieldValue(() => props.modelValue);
+    return () => _createVNode("div", {
+      "ref": groupRef,
+      "role": "radiogroup",
+      "class": bem({
+        readonly: props.readonly,
+        disabled: props.disabled
+      }),
+      "tabindex": props.disabled ? void 0 : 0,
+      "aria-disabled": props.disabled,
+      "aria-readonly": props.readonly,
+      "onTouchstart": onTouchStart,
+      "onTouchmove": onTouchMove
+    }, [list.value.map(renderStar)]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/rate/index.mjs

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

package/es/row/Row.mjs

@@ -0,0 +1,91 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+const [name, bem] = createNamespace("row");
+const ROW_KEY = Symbol(name);
+const rowProps = {
+  tag: makeStringProp("div"),
+  wrap: truthProp,
+  align: String,
+  gutter: makeNumericProp(0),
+  justify: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: rowProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      children,
+      linkChildren
+    } = useChildren(ROW_KEY);
+    const groups = computed(() => {
+      const groups2 = [[]];
+      let totalSpan = 0;
+      children.forEach((child, index) => {
+        totalSpan += Number(child.span);
+        if (totalSpan > 24) {
+          groups2.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups2[groups2.length - 1].push(index);
+        }
+      });
+      return groups2;
+    });
+    const spaces = computed(() => {
+      const gutter = Number(props.gutter);
+      const spaces2 = [];
+      if (!gutter) {
+        return spaces2;
+      }
+      groups.value.forEach((group) => {
+        const averagePadding = gutter * (group.length - 1) / group.length;
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces2.push({
+              right: averagePadding
+            });
+          } else {
+            const left = gutter - spaces2[item - 1].right;
+            const right = averagePadding - left;
+            spaces2.push({
+              left,
+              right
+            });
+          }
+        });
+      });
+      return spaces2;
+    });
+    linkChildren({
+      spaces
+    });
+    return () => {
+      const {
+        tag,
+        wrap,
+        align,
+        justify
+      } = props;
+      return _createVNode(tag, {
+        "class": bem({
+          [`align-${align}`]: align,
+          [`justify-${justify}`]: justify,
+          nowrap: !wrap
+        })
+      }, {
+        default: () => {
+          var _a;
+          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+        }
+      });
+    };
+  }
+});
+export {
+  ROW_KEY,
+  stdin_default as default
+};

package/es/row/index.mjs

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

package/es/search/Search.mjs

@@ -0,0 +1,118 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { ref, defineComponent } from "vue";
+import { pick, extend, truthProp, preventDefault, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { fieldSharedProps } from "../field/Field.mjs";
+import { useId } from "../composables/use-id.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+import { Field } from "../field/index.mjs";
+const [name, bem, t] = createNamespace("search");
+const searchProps = extend({}, fieldSharedProps, {
+  label: String,
+  shape: makeStringProp("square"),
+  leftIcon: makeStringProp("search"),
+  clearable: truthProp,
+  actionText: String,
+  background: String,
+  showAction: Boolean
+});
+var stdin_default = defineComponent({
+  name,
+  props: searchProps,
+  emits: ["blur", "focus", "clear", "search", "cancel", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const id = useId();
+    const filedRef = ref();
+    const onCancel = () => {
+      if (!slots.action) {
+        emit("update:modelValue", "");
+        emit("cancel");
+      }
+    };
+    const onKeypress = (event) => {
+      const ENTER_CODE = 13;
+      if (event.keyCode === ENTER_CODE) {
+        preventDefault(event);
+        emit("search", props.modelValue);
+      }
+    };
+    const getInputId = () => props.id || `${id}-input`;
+    const renderLabel = () => {
+      if (slots.label || props.label) {
+        return _createVNode("label", {
+          "class": bem("label"),
+          "for": getInputId()
+        }, [slots.label ? slots.label() : props.label]);
+      }
+    };
+    const renderAction = () => {
+      if (props.showAction) {
+        const text = props.actionText || t("cancel");
+        return _createVNode("div", {
+          "class": bem("action"),
+          "role": "button",
+          "tabindex": 0,
+          "onClick": onCancel
+        }, [slots.action ? slots.action() : text]);
+      }
+    };
+    const blur = () => {
+      var _a;
+      return (_a = filedRef.value) == null ? void 0 : _a.blur();
+    };
+    const focus = () => {
+      var _a;
+      return (_a = filedRef.value) == null ? void 0 : _a.focus();
+    };
+    const onBlur = (event) => emit("blur", event);
+    const onFocus = (event) => emit("focus", event);
+    const onClear = (event) => emit("clear", event);
+    const onClickInput = (event) => emit("clickInput", event);
+    const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
+    const onClickRightIcon = (event) => emit("clickRightIcon", event);
+    const fieldPropNames = Object.keys(fieldSharedProps);
+    const renderField = () => {
+      const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
+        id: getInputId()
+      });
+      const onInput = (value) => emit("update:modelValue", value);
+      return _createVNode(Field, _mergeProps({
+        "ref": filedRef,
+        "type": "search",
+        "class": bem("field"),
+        "border": false,
+        "onBlur": onBlur,
+        "onFocus": onFocus,
+        "onClear": onClear,
+        "onKeypress": onKeypress,
+        "onClickInput": onClickInput,
+        "onClickLeftIcon": onClickLeftIcon,
+        "onClickRightIcon": onClickRightIcon,
+        "onUpdate:modelValue": onInput
+      }, fieldAttrs), pick(slots, ["left-icon", "right-icon"]));
+    };
+    useExpose({
+      focus,
+      blur
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem({
+          "show-action": props.showAction
+        }),
+        "style": {
+          background: props.background
+        }
+      }, [(_a = slots.left) == null ? void 0 : _a.call(slots), _createVNode("div", {
+        "class": bem("content", props.shape)
+      }, [renderLabel(), renderField()]), renderAction()]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/search/index.css

@@ -1 +1 @@
-body{--van-search-padding: 10px var(--van-padding-sm);--van-search-background: var(--van-background-2);--van-search-content-background: var(--van-gray-1);--van-search-input-height: 34px;--van-search-label-padding: 0 5px;--van-search-label-color: var(--van-text-color);--van-search-label-font-size: var(--van-font-size-md);--van-search-left-icon-color: var(--van-gray-6);--van-search-action-padding: 0 var(--van-padding-xs);--van-search-action-text-color: var(--van-text-color);--van-search-action-font-size: var(--van-font-size-md)}.van-search{display:flex;align-items:center;box-sizing:border-box;padding:var(--van-search-padding);background:var(--van-search-background)}.van-search__content{display:flex;flex:1;padding-left:var(--van-padding-sm);background:var(--van-search-content-background);border-radius:var(--van-radius-sm)}.van-search__content--round{border-radius:var(--van-radius-max)}.van-search__label{padding:var(--van-search-label-padding);color:var(--van-search-label-color);font-size:var(--van-search-label-font-size);line-height:var(--van-search-input-height)}.van-search__field{flex:1;padding:5px var(--van-padding-xs) 5px 0;background-color:transparent}.van-search__field .van-field__left-icon{color:var(--van-search-left-icon-color)}.van-search--show-action{padding-right:0}.van-search input::-webkit-search-decoration,.van-search input::-webkit-search-cancel-button,.van-search input::-webkit-search-results-button,.van-search input::-webkit-search-results-decoration{display:none}.van-search__action{padding:var(--van-search-action-padding);color:var(--van-search-action-text-color);font-size:var(--van-search-action-font-size);line-height:var(--van-search-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.van-search__action:active{background-color:var(--van-active-color)}
+body{--van-search-padding: 10px var(--van-padding-sm);--van-search-background: var(--van-background-2);--van-search-content-background: var(--van-background);--van-search-input-height: 34px;--van-search-label-padding: 0 5px;--van-search-label-color: var(--van-text-color);--van-search-label-font-size: var(--van-font-size-md);--van-search-left-icon-color: var(--van-gray-6);--van-search-action-padding: 0 var(--van-padding-xs);--van-search-action-text-color: var(--van-text-color);--van-search-action-font-size: var(--van-font-size-md)}.van-search{display:flex;align-items:center;box-sizing:border-box;padding:var(--van-search-padding);background:var(--van-search-background)}.van-search__content{display:flex;flex:1;padding-left:var(--van-padding-sm);background:var(--van-search-content-background);border-radius:var(--van-radius-sm)}.van-search__content--round{border-radius:var(--van-radius-max)}.van-search__label{padding:var(--van-search-label-padding);color:var(--van-search-label-color);font-size:var(--van-search-label-font-size);line-height:var(--van-search-input-height)}.van-search__field{flex:1;padding:5px var(--van-padding-xs) 5px 0;background-color:transparent}.van-search__field .van-field__left-icon{color:var(--van-search-left-icon-color)}.van-search--show-action{padding-right:0}.van-search input::-webkit-search-decoration,.van-search input::-webkit-search-cancel-button,.van-search input::-webkit-search-results-button,.van-search input::-webkit-search-results-decoration{display:none}.van-search__action{padding:var(--van-search-action-padding);color:var(--van-search-action-text-color);font-size:var(--van-search-action-font-size);line-height:var(--van-search-input-height);cursor:pointer;-webkit-user-select:none;user-select:none}.van-search__action:active{background-color:var(--van-active-color)}

package/es/search/index.mjs

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

package/es/share-sheet/ShareSheet.mjs

@@ -0,0 +1,122 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { pick, extend, truthProp, makeArrayProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
+const iconMap = {
+  qq: "qq",
+  link: "link-o",
+  weibo: "weibo",
+  qrcode: "qr",
+  poster: "photo-o",
+  wechat: "wechat",
+  "weapp-qrcode": "miniprogram-o",
+  "wechat-moments": "wechat-moments"
+};
+const [name, bem, t] = createNamespace("share-sheet");
+const shareSheetProps = extend({}, popupSharedProps, {
+  title: String,
+  round: truthProp,
+  options: makeArrayProp(),
+  cancelText: String,
+  description: String,
+  closeOnPopstate: truthProp,
+  safeAreaInsetBottom: truthProp
+});
+var stdin_default = defineComponent({
+  name,
+  props: shareSheetProps,
+  emits: ["cancel", "select", "update:show"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const updateShow = (value) => emit("update:show", value);
+    const onCancel = () => {
+      updateShow(false);
+      emit("cancel");
+    };
+    const onSelect = (option, index) => emit("select", option, index);
+    const renderHeader = () => {
+      const title = slots.title ? slots.title() : props.title;
+      const description = slots.description ? slots.description() : props.description;
+      if (title || description) {
+        return _createVNode("div", {
+          "class": bem("header")
+        }, [title && _createVNode("h2", {
+          "class": bem("title")
+        }, [title]), description && _createVNode("span", {
+          "class": bem("description")
+        }, [description])]);
+      }
+    };
+    const renderIcon = (icon) => {
+      if (iconMap[icon]) {
+        return _createVNode("div", {
+          "class": bem("icon", [icon])
+        }, [_createVNode(Icon, {
+          "name": iconMap[icon] || icon
+        }, null)]);
+      }
+      return _createVNode("img", {
+        "src": icon,
+        "class": bem("image-icon")
+      }, null);
+    };
+    const renderOption = (option, index) => {
+      const {
+        name: name2,
+        icon,
+        className,
+        description
+      } = option;
+      return _createVNode("div", {
+        "role": "button",
+        "tabindex": 0,
+        "class": [bem("option"), className, HAPTICS_FEEDBACK],
+        "onClick": () => onSelect(option, index)
+      }, [renderIcon(icon), name2 && _createVNode("span", {
+        "class": bem("name")
+      }, [name2]), description && _createVNode("span", {
+        "class": bem("option-description")
+      }, [description])]);
+    };
+    const renderOptions = (options, border) => _createVNode("div", {
+      "class": bem("options", {
+        border
+      })
+    }, [options.map(renderOption)]);
+    const renderRows = () => {
+      const {
+        options
+      } = props;
+      if (Array.isArray(options[0])) {
+        return options.map((item, index) => renderOptions(item, index !== 0));
+      }
+      return renderOptions(options);
+    };
+    const renderCancelButton = () => {
+      var _a;
+      const cancelText = (_a = props.cancelText) != null ? _a : t("cancel");
+      if (slots.cancel || cancelText) {
+        return _createVNode("button", {
+          "type": "button",
+          "class": bem("cancel"),
+          "onClick": onCancel
+        }, [slots.cancel ? slots.cancel() : cancelText]);
+      }
+    };
+    return () => _createVNode(Popup, _mergeProps({
+      "class": bem(),
+      "position": "bottom",
+      "onUpdate:show": updateShow
+    }, pick(props, popupInheritKeys)), {
+      default: () => [renderHeader(), renderRows(), renderCancelButton()]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/share-sheet/index.mjs

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

package/es/sidebar/Sidebar.mjs

@@ -0,0 +1,44 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+const [name, bem] = createNamespace("sidebar");
+const SIDEBAR_KEY = Symbol(name);
+const sidebarProps = {
+  modelValue: makeNumericProp(0)
+};
+var stdin_default = defineComponent({
+  name,
+  props: sidebarProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(SIDEBAR_KEY);
+    const getActive = () => +props.modelValue;
+    const setActive = (value) => {
+      if (value !== getActive()) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    linkChildren({
+      getActive,
+      setActive
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "role": "tablist",
+        "class": bem()
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  SIDEBAR_KEY,
+  stdin_default as default
+};

package/es/sidebar/index.mjs

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