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

package/es/cascader/Cascader.mjs

@@ -0,0 +1,227 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, nextTick, defineComponent } from "vue";
+import { extend, truthProp, numericProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { Tab } from "../tab/index.mjs";
+import { Tabs } from "../tabs/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem, t] = createNamespace("cascader");
+const cascaderProps = {
+  title: String,
+  options: makeArrayProp(),
+  closeable: truthProp,
+  swipeable: truthProp,
+  closeIcon: makeStringProp("cross"),
+  showHeader: truthProp,
+  modelValue: numericProp,
+  fieldNames: Object,
+  placeholder: String,
+  activeColor: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: cascaderProps,
+  emits: ["close", "change", "finish", "clickTab", "update:modelValue"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const tabs = ref([]);
+    const activeTab = ref(0);
+    const {
+      text: textKey,
+      value: valueKey,
+      children: childrenKey
+    } = extend({
+      text: "text",
+      value: "value",
+      children: "children"
+    }, props.fieldNames);
+    const getSelectedOptionsByValue = (options, value) => {
+      for (const option of options) {
+        if (option[valueKey] === value) {
+          return [option];
+        }
+        if (option[childrenKey]) {
+          const selectedOptions = getSelectedOptionsByValue(option[childrenKey], value);
+          if (selectedOptions) {
+            return [option, ...selectedOptions];
+          }
+        }
+      }
+    };
+    const updateTabs = () => {
+      const {
+        options,
+        modelValue
+      } = props;
+      if (modelValue !== void 0) {
+        const selectedOptions = getSelectedOptionsByValue(options, modelValue);
+        if (selectedOptions) {
+          let optionsCursor = options;
+          tabs.value = selectedOptions.map((option) => {
+            const tab = {
+              options: optionsCursor,
+              selected: option
+            };
+            const next = optionsCursor.find((item) => item[valueKey] === option[valueKey]);
+            if (next) {
+              optionsCursor = next[childrenKey];
+            }
+            return tab;
+          });
+          if (optionsCursor) {
+            tabs.value.push({
+              options: optionsCursor,
+              selected: null
+            });
+          }
+          nextTick(() => {
+            activeTab.value = tabs.value.length - 1;
+          });
+          return;
+        }
+      }
+      tabs.value = [{
+        options,
+        selected: null
+      }];
+    };
+    const onSelect = (option, tabIndex) => {
+      if (option.disabled) {
+        return;
+      }
+      tabs.value[tabIndex].selected = option;
+      if (tabs.value.length > tabIndex + 1) {
+        tabs.value = tabs.value.slice(0, tabIndex + 1);
+      }
+      if (option[childrenKey]) {
+        const nextTab = {
+          options: option[childrenKey],
+          selected: null
+        };
+        if (tabs.value[tabIndex + 1]) {
+          tabs.value[tabIndex + 1] = nextTab;
+        } else {
+          tabs.value.push(nextTab);
+        }
+        nextTick(() => {
+          activeTab.value++;
+        });
+      }
+      const selectedOptions = tabs.value.map((tab) => tab.selected).filter(Boolean);
+      emit("update:modelValue", option[valueKey]);
+      const params = {
+        value: option[valueKey],
+        tabIndex,
+        selectedOptions
+      };
+      emit("change", params);
+      if (!option[childrenKey]) {
+        emit("finish", params);
+      }
+    };
+    const onClose = () => emit("close");
+    const onClickTab = ({
+      name: name2,
+      title
+    }) => emit("clickTab", name2, title);
+    const renderHeader = () => props.showHeader ? _createVNode("div", {
+      "class": bem("header")
+    }, [_createVNode("h2", {
+      "class": bem("title")
+    }, [slots.title ? slots.title() : props.title]), props.closeable ? _createVNode(Icon, {
+      "name": props.closeIcon,
+      "class": [bem("close-icon"), HAPTICS_FEEDBACK],
+      "onClick": onClose
+    }, null) : null]) : null;
+    const renderOption = (option, selectedOption, tabIndex) => {
+      const {
+        disabled
+      } = option;
+      const selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
+      const color = option.color || (selected ? props.activeColor : void 0);
+      const Text = slots.option ? slots.option({
+        option,
+        selected
+      }) : _createVNode("span", null, [option[textKey]]);
+      return _createVNode("li", {
+        "role": "menuitemradio",
+        "class": [bem("option", {
+          selected,
+          disabled
+        }), option.className],
+        "style": {
+          color
+        },
+        "tabindex": disabled ? void 0 : selected ? 0 : -1,
+        "aria-checked": selected,
+        "aria-disabled": disabled || void 0,
+        "onClick": () => onSelect(option, tabIndex)
+      }, [Text, selected ? _createVNode(Icon, {
+        "name": "success",
+        "class": bem("selected-icon")
+      }, null) : null]);
+    };
+    const renderOptions = (options, selectedOption, tabIndex) => _createVNode("ul", {
+      "role": "menu",
+      "class": bem("options")
+    }, [options.map((option) => renderOption(option, selectedOption, tabIndex))]);
+    const renderTab = (tab, tabIndex) => {
+      const {
+        options,
+        selected
+      } = tab;
+      const placeholder = props.placeholder || t("select");
+      const title = selected ? selected[textKey] : placeholder;
+      return _createVNode(Tab, {
+        "title": title,
+        "titleClass": bem("tab", {
+          unselected: !selected
+        })
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_a = slots["options-top"]) == null ? void 0 : _a.call(slots, {
+            tabIndex
+          }), renderOptions(options, selected, tabIndex), (_b = slots["options-bottom"]) == null ? void 0 : _b.call(slots, {
+            tabIndex
+          })];
+        }
+      });
+    };
+    const renderTabs = () => _createVNode(Tabs, {
+      "active": activeTab.value,
+      "onUpdate:active": ($event) => activeTab.value = $event,
+      "shrink": true,
+      "animated": true,
+      "class": bem("tabs"),
+      "color": props.activeColor,
+      "swipeable": props.swipeable,
+      "onClickTab": onClickTab
+    }, {
+      default: () => [tabs.value.map(renderTab)]
+    });
+    updateTabs();
+    watch(() => props.options, updateTabs, {
+      deep: true
+    });
+    watch(() => props.modelValue, (value) => {
+      if (value !== void 0) {
+        const values = tabs.value.map((tab) => {
+          var _a;
+          return (_a = tab.selected) == null ? void 0 : _a[valueKey];
+        });
+        if (values.includes(value)) {
+          return;
+        }
+      }
+      updateTabs();
+    });
+    return () => _createVNode("div", {
+      "class": bem()
+    }, [renderHeader(), renderTabs()]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/cascader/index.mjs

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

package/es/cell/Cell.d.ts

@@ -110,10 +110,10 @@ declare const _default: import("vue").DefineComponent<{
     replace: BooleanConstructor;
 }>>, {
     replace: boolean;
+    required: boolean;
     center: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
 }>;
 export default _default;

package/es/cell/Cell.mjs

@@ -0,0 +1,116 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { isDef, extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
+import { useRoute, routeProps } from "../composables/use-route.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("cell");
+const cellSharedProps = {
+  icon: String,
+  size: String,
+  title: numericProp,
+  value: numericProp,
+  label: numericProp,
+  center: Boolean,
+  isLink: Boolean,
+  border: truthProp,
+  required: Boolean,
+  iconPrefix: String,
+  valueClass: unknownProp,
+  labelClass: unknownProp,
+  titleClass: unknownProp,
+  titleStyle: null,
+  arrowDirection: String,
+  clickable: {
+    type: Boolean,
+    default: null
+  }
+};
+const cellProps = extend({}, cellSharedProps, routeProps);
+var stdin_default = defineComponent({
+  name,
+  props: cellProps,
+  setup(props, {
+    slots
+  }) {
+    const route = useRoute();
+    const renderLabel = () => {
+      const showLabel = slots.label || isDef(props.label);
+      if (showLabel) {
+        return _createVNode("div", {
+          "class": [bem("label"), props.labelClass]
+        }, [slots.label ? slots.label() : props.label]);
+      }
+    };
+    const renderTitle = () => {
+      if (slots.title || isDef(props.title)) {
+        return _createVNode("div", {
+          "class": [bem("title"), props.titleClass],
+          "style": props.titleStyle
+        }, [slots.title ? slots.title() : _createVNode("span", null, [props.title]), renderLabel()]);
+      }
+    };
+    const renderValue = () => {
+      const slot = slots.value || slots.default;
+      const hasValue = slot || isDef(props.value);
+      if (hasValue) {
+        return _createVNode("div", {
+          "class": [bem("value"), props.valueClass]
+        }, [slot ? slot() : _createVNode("span", null, [props.value])]);
+      }
+    };
+    const renderLeftIcon = () => {
+      if (slots.icon) {
+        return slots.icon();
+      }
+      if (props.icon) {
+        return _createVNode(Icon, {
+          "name": props.icon,
+          "class": bem("left-icon"),
+          "classPrefix": props.iconPrefix
+        }, null);
+      }
+    };
+    const renderRightIcon = () => {
+      if (slots["right-icon"]) {
+        return slots["right-icon"]();
+      }
+      if (props.isLink) {
+        const name2 = props.arrowDirection ? `arrow-${props.arrowDirection}` : "arrow";
+        return _createVNode(Icon, {
+          "name": name2,
+          "class": bem("right-icon")
+        }, null);
+      }
+    };
+    return () => {
+      var _a, _b;
+      const {
+        size,
+        center,
+        border,
+        isLink,
+        required
+      } = props;
+      const clickable = (_a = props.clickable) != null ? _a : isLink;
+      const classes = {
+        center,
+        required,
+        clickable,
+        borderless: !border
+      };
+      if (size) {
+        classes[size] = !!size;
+      }
+      return _createVNode("div", {
+        "class": bem(classes),
+        "role": clickable ? "button" : void 0,
+        "tabindex": clickable ? 0 : void 0,
+        "onClick": route
+      }, [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_b = slots.extra) == null ? void 0 : _b.call(slots)]);
+    };
+  }
+});
+export {
+  cellSharedProps,
+  stdin_default as default
+};

package/es/cell/index.d.ts

@@ -54,10 +54,10 @@ export declare const Cell: import("../utils").WithInstall<import("vue").DefineCo
     replace: BooleanConstructor;
 }>>, {
     replace: boolean;
+    required: boolean;
     center: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
 }>>;
 export default Cell;

package/es/cell/index.mjs

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

package/es/cell-group/CellGroup.mjs

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent } from "vue";
+import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from "../utils/index.mjs";
+const [name, bem] = createNamespace("cell-group");
+const cellGroupProps = {
+  title: String,
+  inset: Boolean,
+  border: truthProp
+};
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props: cellGroupProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const renderGroup = () => {
+      var _a;
+      return _createVNode("div", _mergeProps({
+        "class": [bem({
+          inset: props.inset
+        }), {
+          [BORDER_TOP_BOTTOM]: props.border && !props.inset
+        }]
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+    const renderTitle = () => _createVNode("div", {
+      "class": bem("title", {
+        inset: props.inset
+      })
+    }, [slots.title ? slots.title() : props.title]);
+    return () => {
+      if (props.title || slots.title) {
+        return _createVNode(_Fragment, null, [renderTitle(), renderGroup()]);
+      }
+      return renderGroup();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/cell-group/index.mjs

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

package/es/checkbox/Checkbox.mjs

@@ -0,0 +1,81 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { watch, computed, defineComponent } from "vue";
+import { createNamespace, extend, pick, truthProp } from "../utils/index.mjs";
+import { CHECKBOX_GROUP_KEY } from "../checkbox-group/CheckboxGroup.mjs";
+import { useParent, useCustomFieldValue } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import Checker, { checkerProps } from "./Checker.mjs";
+const [name, bem] = createNamespace("checkbox");
+const checkboxProps = extend({}, checkerProps, {
+  bindGroup: truthProp
+});
+var stdin_default = defineComponent({
+  name,
+  props: checkboxProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      parent
+    } = useParent(CHECKBOX_GROUP_KEY);
+    const setParentValue = (checked2) => {
+      const {
+        name: name2
+      } = props;
+      const {
+        max,
+        modelValue
+      } = parent.props;
+      const value = modelValue.slice();
+      if (checked2) {
+        const overlimit = max && value.length >= max;
+        if (!overlimit && !value.includes(name2)) {
+          value.push(name2);
+          if (props.bindGroup) {
+            parent.updateValue(value);
+          }
+        }
+      } else {
+        const index = value.indexOf(name2);
+        if (index !== -1) {
+          value.splice(index, 1);
+          if (props.bindGroup) {
+            parent.updateValue(value);
+          }
+        }
+      }
+    };
+    const checked = computed(() => {
+      if (parent && props.bindGroup) {
+        return parent.props.modelValue.indexOf(props.name) !== -1;
+      }
+      return !!props.modelValue;
+    });
+    const toggle = (newValue = !checked.value) => {
+      if (parent && props.bindGroup) {
+        setParentValue(newValue);
+      } else {
+        emit("update:modelValue", newValue);
+      }
+    };
+    watch(() => props.modelValue, (value) => emit("change", value));
+    useExpose({
+      toggle,
+      props,
+      checked
+    });
+    useCustomFieldValue(() => props.modelValue);
+    return () => _createVNode(Checker, _mergeProps({
+      "bem": bem,
+      "role": "checkbox",
+      "parent": parent,
+      "checked": checked.value,
+      "onToggle": toggle
+    }, props), pick(slots, ["default", "icon"]));
+  }
+});
+export {
+  stdin_default as default
+};

package/es/checkbox/Checker.mjs

@@ -0,0 +1,107 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, computed, defineComponent } from "vue";
+import { extend, addUnit, truthProp, numericProp, unknownProp, makeStringProp, makeRequiredProp } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const checkerProps = {
+  name: unknownProp,
+  shape: makeStringProp("round"),
+  disabled: Boolean,
+  iconSize: numericProp,
+  modelValue: unknownProp,
+  checkedColor: String,
+  labelPosition: String,
+  labelDisabled: Boolean
+};
+var stdin_default = defineComponent({
+  props: extend({}, checkerProps, {
+    bem: makeRequiredProp(Function),
+    role: String,
+    parent: Object,
+    checked: Boolean,
+    bindGroup: truthProp
+  }),
+  emits: ["click", "toggle"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const iconRef = ref();
+    const getParentProp = (name) => {
+      if (props.parent && props.bindGroup) {
+        return props.parent.props[name];
+      }
+    };
+    const disabled = computed(() => getParentProp("disabled") || props.disabled);
+    const direction = computed(() => getParentProp("direction"));
+    const iconStyle = computed(() => {
+      const checkedColor = props.checkedColor || getParentProp("checkedColor");
+      if (checkedColor && props.checked && !disabled.value) {
+        return {
+          borderColor: checkedColor,
+          backgroundColor: checkedColor
+        };
+      }
+    });
+    const onClick = (event) => {
+      const {
+        target
+      } = event;
+      const icon = iconRef.value;
+      const iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
+      if (!disabled.value && (iconClicked || !props.labelDisabled)) {
+        emit("toggle");
+      }
+      emit("click", event);
+    };
+    const renderIcon = () => {
+      const {
+        bem,
+        shape,
+        checked
+      } = props;
+      const iconSize = props.iconSize || getParentProp("iconSize");
+      return _createVNode("div", {
+        "ref": iconRef,
+        "class": bem("icon", [shape, {
+          disabled: disabled.value,
+          checked
+        }]),
+        "style": {
+          fontSize: addUnit(iconSize)
+        }
+      }, [slots.icon ? slots.icon({
+        checked,
+        disabled: disabled.value
+      }) : _createVNode(Icon, {
+        "name": "success",
+        "style": iconStyle.value
+      }, null)]);
+    };
+    const renderLabel = () => {
+      if (slots.default) {
+        return _createVNode("span", {
+          "class": props.bem("label", [props.labelPosition, {
+            disabled: disabled.value
+          }])
+        }, [slots.default()]);
+      }
+    };
+    return () => {
+      const nodes = props.labelPosition === "left" ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()];
+      return _createVNode("div", {
+        "role": props.role,
+        "class": props.bem([{
+          disabled: disabled.value,
+          "label-disabled": props.labelDisabled
+        }, direction.value]),
+        "tabindex": disabled.value ? void 0 : 0,
+        "aria-checked": props.checked,
+        "onClick": onClick
+      }, [nodes]);
+    };
+  }
+});
+export {
+  checkerProps,
+  stdin_default as default
+};

package/es/checkbox/index.mjs

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