ContactEdit.mjs 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { watch, reactive, defineComponent, createVNode as _createVNode } from "vue";
  2. import { isMobile, createNamespace, extend } from "../utils/index.mjs";
  3. import { Cell } from "../cell/index.mjs";
  4. import { Form } from "../form/index.mjs";
  5. import { Field } from "../field/index.mjs";
  6. import { Button } from "../button/index.mjs";
  7. import { Switch } from "../switch/index.mjs";
  8. const [name, bem, t] = createNamespace("contact-edit");
  9. const DEFAULT_CONTACT = {
  10. tel: "",
  11. name: ""
  12. };
  13. const contactEditProps = {
  14. isEdit: Boolean,
  15. isSaving: Boolean,
  16. isDeleting: Boolean,
  17. showSetDefault: Boolean,
  18. setDefaultLabel: String,
  19. contactInfo: {
  20. type: Object,
  21. default: () => extend({}, DEFAULT_CONTACT)
  22. },
  23. telValidator: {
  24. type: Function,
  25. default: isMobile
  26. }
  27. };
  28. var stdin_default = defineComponent({
  29. name,
  30. props: contactEditProps,
  31. emits: ["save", "delete", "changeDefault"],
  32. setup(props, {
  33. emit
  34. }) {
  35. const contact = reactive(extend({}, DEFAULT_CONTACT, props.contactInfo));
  36. const onSave = () => {
  37. if (!props.isSaving) {
  38. emit("save", contact);
  39. }
  40. };
  41. const onDelete = () => emit("delete", contact);
  42. const renderButtons = () => _createVNode("div", {
  43. "class": bem("buttons")
  44. }, [_createVNode(Button, {
  45. "block": true,
  46. "round": true,
  47. "type": "primary",
  48. "text": t("save"),
  49. "class": bem("button"),
  50. "loading": props.isSaving,
  51. "nativeType": "submit"
  52. }, null), props.isEdit && _createVNode(Button, {
  53. "block": true,
  54. "round": true,
  55. "text": t("delete"),
  56. "class": bem("button"),
  57. "loading": props.isDeleting,
  58. "onClick": onDelete
  59. }, null)]);
  60. const renderSwitch = () => _createVNode(Switch, {
  61. "modelValue": contact.isDefault,
  62. "onUpdate:modelValue": ($event) => contact.isDefault = $event,
  63. "onChange": (checked) => emit("changeDefault", checked)
  64. }, null);
  65. const renderSetDefault = () => {
  66. if (props.showSetDefault) {
  67. return _createVNode(Cell, {
  68. "title": props.setDefaultLabel,
  69. "class": bem("switch-cell"),
  70. "border": false
  71. }, {
  72. "right-icon": renderSwitch
  73. });
  74. }
  75. };
  76. watch(() => props.contactInfo, (value) => extend(contact, DEFAULT_CONTACT, value));
  77. return () => _createVNode(Form, {
  78. "class": bem(),
  79. "onSubmit": onSave
  80. }, {
  81. default: () => [_createVNode("div", {
  82. "class": bem("fields")
  83. }, [_createVNode(Field, {
  84. "modelValue": contact.name,
  85. "onUpdate:modelValue": ($event) => contact.name = $event,
  86. "clearable": true,
  87. "label": t("name"),
  88. "rules": [{
  89. required: true,
  90. message: t("nameEmpty")
  91. }],
  92. "maxlength": "30",
  93. "placeholder": t("name")
  94. }, null), _createVNode(Field, {
  95. "modelValue": contact.tel,
  96. "onUpdate:modelValue": ($event) => contact.tel = $event,
  97. "clearable": true,
  98. "type": "tel",
  99. "label": t("tel"),
  100. "rules": [{
  101. validator: props.telValidator,
  102. message: t("telInvalid")
  103. }],
  104. "placeholder": t("tel")
  105. }, null)]), renderSetDefault(), renderButtons()]
  106. });
  107. }
  108. });
  109. export {
  110. contactEditProps,
  111. stdin_default as default
  112. };