ContactEdit.mjs 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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", "change-default"],
  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": "danger",
  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. "size": 24,
  65. "onChange": (checked) => emit("change-default", checked)
  66. }, null);
  67. const renderSetDefault = () => {
  68. if (props.showSetDefault) {
  69. return _createVNode(Cell, {
  70. "title": props.setDefaultLabel,
  71. "class": bem("switch-cell"),
  72. "border": false
  73. }, {
  74. "right-icon": renderSwitch
  75. });
  76. }
  77. };
  78. watch(() => props.contactInfo, (value) => extend(contact, DEFAULT_CONTACT, value));
  79. return () => _createVNode(Form, {
  80. "class": bem(),
  81. "onSubmit": onSave
  82. }, {
  83. default: () => [_createVNode("div", {
  84. "class": bem("fields")
  85. }, [_createVNode(Field, {
  86. "modelValue": contact.name,
  87. "onUpdate:modelValue": ($event) => contact.name = $event,
  88. "clearable": true,
  89. "label": t("name"),
  90. "rules": [{
  91. required: true,
  92. message: t("nameEmpty")
  93. }],
  94. "maxlength": "30",
  95. "placeholder": t("name")
  96. }, null), _createVNode(Field, {
  97. "modelValue": contact.tel,
  98. "onUpdate:modelValue": ($event) => contact.tel = $event,
  99. "clearable": true,
  100. "type": "tel",
  101. "label": t("tel"),
  102. "rules": [{
  103. validator: props.telValidator,
  104. message: t("telInvalid")
  105. }],
  106. "placeholder": t("tel")
  107. }, null)]), renderSetDefault(), renderButtons()]
  108. });
  109. }
  110. });
  111. export {
  112. stdin_default as default
  113. };