ContactEdit.mjs 3.2 KB

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