PickerGroup.mjs 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { defineComponent, Comment, Fragment, createVNode as _createVNode } from "vue";
  2. import { flat, pick, extend, makeArrayProp, makeNumericProp, createNamespace, truthProp } from "../utils/index.mjs";
  3. import { useChildren } from "@vant/use";
  4. import { useSyncPropRef } from "../composables/use-sync-prop-ref.mjs";
  5. import { Tab } from "../tab/index.mjs";
  6. import { Tabs } from "../tabs/index.mjs";
  7. import Toolbar, { pickerToolbarProps, pickerToolbarSlots } from "../picker/PickerToolbar.mjs";
  8. const [name, bem] = createNamespace("picker-group");
  9. const PICKER_GROUP_KEY = Symbol(name);
  10. const pickerGroupProps = extend({
  11. tabs: makeArrayProp(),
  12. activeTab: makeNumericProp(0),
  13. nextStepText: String,
  14. showToolbar: truthProp
  15. }, pickerToolbarProps);
  16. var stdin_default = defineComponent({
  17. name,
  18. props: pickerGroupProps,
  19. emits: ["confirm", "cancel", "update:activeTab"],
  20. setup(props, {
  21. emit,
  22. slots
  23. }) {
  24. const activeTab = useSyncPropRef(() => props.activeTab, (value) => emit("update:activeTab", value));
  25. const {
  26. children,
  27. linkChildren
  28. } = useChildren(PICKER_GROUP_KEY);
  29. linkChildren();
  30. const showNextButton = () => +activeTab.value < props.tabs.length - 1 && props.nextStepText;
  31. const onConfirm = () => {
  32. if (showNextButton()) {
  33. activeTab.value = +activeTab.value + 1;
  34. } else {
  35. emit("confirm", children.map((item) => item.confirm()));
  36. }
  37. };
  38. const onCancel = () => emit("cancel");
  39. return () => {
  40. var _a, _b;
  41. let childNodes = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) == null ? void 0 : _b.filter((node) => node.type !== Comment).map((node) => {
  42. if (node.type === Fragment) {
  43. return node.children;
  44. }
  45. return node;
  46. });
  47. if (childNodes) {
  48. childNodes = flat(childNodes);
  49. }
  50. const confirmButtonText = showNextButton() ? props.nextStepText : props.confirmButtonText;
  51. return _createVNode("div", {
  52. "class": bem()
  53. }, [props.showToolbar ? _createVNode(Toolbar, {
  54. "title": props.title,
  55. "cancelButtonText": props.cancelButtonText,
  56. "confirmButtonText": confirmButtonText,
  57. "onConfirm": onConfirm,
  58. "onCancel": onCancel
  59. }, pick(slots, pickerToolbarSlots)) : null, _createVNode(Tabs, {
  60. "active": activeTab.value,
  61. "onUpdate:active": ($event) => activeTab.value = $event,
  62. "class": bem("tabs"),
  63. "shrink": true,
  64. "animated": true,
  65. "lazyRender": false
  66. }, {
  67. default: () => [props.tabs.map((title, index) => _createVNode(Tab, {
  68. "title": title,
  69. "titleClass": bem("tab-title")
  70. }, {
  71. default: () => [childNodes == null ? void 0 : childNodes[index]]
  72. }))]
  73. })]);
  74. };
  75. }
  76. });
  77. export {
  78. PICKER_GROUP_KEY,
  79. stdin_default as default,
  80. pickerGroupProps
  81. };