ContactList.mjs 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { defineComponent, createVNode as _createVNode } from "vue";
  2. import { createNamespace, unknownProp } from "../utils/index.mjs";
  3. import { Tag } from "../tag/index.mjs";
  4. import { Icon } from "../icon/index.mjs";
  5. import { Cell } from "../cell/index.mjs";
  6. import { Radio } from "../radio/index.mjs";
  7. import { Button } from "../button/index.mjs";
  8. import { RadioGroup } from "../radio-group/index.mjs";
  9. const [name, bem, t] = createNamespace("contact-list");
  10. const contactListProps = {
  11. list: Array,
  12. addText: String,
  13. modelValue: unknownProp,
  14. defaultTagText: String
  15. };
  16. var stdin_default = defineComponent({
  17. name,
  18. props: contactListProps,
  19. emits: ["add", "edit", "select", "update:modelValue"],
  20. setup(props, {
  21. emit
  22. }) {
  23. const renderItem = (item, index) => {
  24. const onClick = () => {
  25. emit("update:modelValue", item.id);
  26. emit("select", item, index);
  27. };
  28. const renderRightIcon = () => _createVNode(Radio, {
  29. "class": bem("radio"),
  30. "name": item.id,
  31. "iconSize": 18
  32. }, null);
  33. const renderEditIcon = () => _createVNode(Icon, {
  34. "name": "edit",
  35. "class": bem("edit"),
  36. "onClick": (event) => {
  37. event.stopPropagation();
  38. emit("edit", item, index);
  39. }
  40. }, null);
  41. const renderContent = () => {
  42. const nodes = [`${item.name}\uFF0C${item.tel}`];
  43. if (item.isDefault && props.defaultTagText) {
  44. nodes.push(_createVNode(Tag, {
  45. "type": "primary",
  46. "round": true,
  47. "class": bem("item-tag")
  48. }, {
  49. default: () => [props.defaultTagText]
  50. }));
  51. }
  52. return nodes;
  53. };
  54. return _createVNode(Cell, {
  55. "key": item.id,
  56. "isLink": true,
  57. "center": true,
  58. "class": bem("item"),
  59. "titleClass": bem("item-title"),
  60. "onClick": onClick
  61. }, {
  62. icon: renderEditIcon,
  63. title: renderContent,
  64. "right-icon": renderRightIcon
  65. });
  66. };
  67. return () => _createVNode("div", {
  68. "class": bem()
  69. }, [_createVNode(RadioGroup, {
  70. "modelValue": props.modelValue,
  71. "class": bem("group")
  72. }, {
  73. default: () => [props.list && props.list.map(renderItem)]
  74. }), _createVNode("div", {
  75. "class": [bem("bottom"), "van-safe-area-bottom"]
  76. }, [_createVNode(Button, {
  77. "round": true,
  78. "block": true,
  79. "type": "primary",
  80. "class": bem("add"),
  81. "text": props.addText || t("addContact"),
  82. "onClick": () => emit("add")
  83. }, null)])]);
  84. }
  85. });
  86. export {
  87. contactListProps,
  88. stdin_default as default
  89. };