vue-admin-core/es/formily/editable/src/index.mjs

A Component Library for Vue 3

import { defineComponent, ref, onBeforeUnmount, h } from 'vue';
import { observer } from '@formily/reactive-vue';
import { reaction } from '@formily/reactive';
import { isVoidField } from '@formily/core';
import { useField } from '@formily/vue';
import { ElPopover } from 'element-plus';
import { Edit, ChatDotRound, Close } from '@element-plus/icons-vue';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';
import '../../form-item/index.mjs';
import '../../__builtins__/shared/index.mjs';
import { FormBaseItem } from '../../form-item/src/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

const getParentPattern = (fieldRef) => {
  var _a, _b;
  const field = fieldRef.value;
  return ((_a = field == null ? void 0 : field.parent) == null ? void 0 : _a.pattern) || ((_b = field == null ? void 0 : field.form) == null ? void 0 : _b.pattern);
};
const getFormItemProps = (fieldRef) => {
  const field = fieldRef.value;
  if (isVoidField(field))
    return {};
  if (!field)
    return {};
  const takeMessage = () => {
    if (field.selfErrors.length)
      return field.selfErrors[0];
    if (field.selfWarnings.length)
      return field.selfWarnings[0];
    if (field.selfSuccesses.length)
      return field.selfSuccesses[0];
  };
  return {
    feedbackStatus: field.validateStatus === "validating" ? "pending" : field.validateStatus,
    feedbackText: takeMessage(),
    extra: field.description
  };
};
const EditableInner = observer(
  defineComponent({
    name: "FEditable",
    setup(props, { attrs, slots }) {
      const fieldRef = useField();
      const innerRef = ref(document.body);
      const prefixCls = `${stylePrefix}-editable`;
      const setEditable = (payload) => {
        const pattern = getParentPattern(fieldRef);
        if (pattern !== "editable")
          return;
        fieldRef.value.setPattern(payload ? "editable" : "readPretty");
      };
      const dispose = reaction(
        () => {
          const pattern = getParentPattern(fieldRef);
          return pattern;
        },
        (pattern) => {
          if (pattern === "editable") {
            fieldRef.value.setPattern("readPretty");
          }
        },
        {
          fireImmediately: true
        }
      );
      onBeforeUnmount(dispose);
      return () => {
        const field = fieldRef.value;
        const editable = field.pattern === "editable";
        const pattern = getParentPattern(fieldRef);
        const itemProps = getFormItemProps(fieldRef);
        const recover = () => {
          var _a, _b;
          if (editable && !((_b = (_a = fieldRef.value) == null ? void 0 : _a.errors) == null ? void 0 : _b.length)) {
            setEditable(false);
          }
        };
        const onClick = (e) => {
          const target = e.target;
          const close = innerRef.value.querySelector(`.${prefixCls}-close-btn`);
          if ((target == null ? void 0 : target.contains(close)) || (close == null ? void 0 : close.contains(target))) {
            recover();
          } else if (!editable) {
            setTimeout(() => {
              setEditable(true);
              setTimeout(() => {
                var _a;
                (_a = innerRef.value.querySelector("input")) == null ? void 0 : _a.focus();
              });
            });
          }
        };
        const renderEditHelper = () => {
          if (editable)
            return null;
          return h(
            FormBaseItem,
            {
              hasIcon: true,
              ...attrs,
              ...itemProps
            },
            {
              default: () => {
                return h(
                  pattern === "editable" ? Edit : ChatDotRound,
                  {
                    class: [`${prefixCls}-edit-btn`]
                  },
                  {}
                );
              }
            }
          );
        };
        const renderCloseHelper = () => {
          if (!editable)
            return null;
          return h(
            FormBaseItem,
            {
              hasIcon: true,
              ...attrs
            },
            {
              default: () => {
                return h(
                  Close,
                  {
                    class: [`${prefixCls}-close-btn`]
                  },
                  {}
                );
              }
            }
          );
        };
        return h(
          "div",
          {
            class: prefixCls,
            ref: innerRef,
            onClick
          },
          h(
            "div",
            {
              class: `${prefixCls}-content`
            },
            [
              h(
                FormBaseItem,
                {
                  ...attrs,
                  ...itemProps
                },
                slots
              ),
              renderEditHelper(),
              renderCloseHelper()
            ]
          )
        );
      };
    }
  })
);
const EditablePopover = observer(
  defineComponent({
    name: "FEditablePopover",
    setup(props, { attrs, slots }) {
      const fieldRef = useField();
      const prefixCls = `${stylePrefix}-editable`;
      const visible = ref(false);
      return () => {
        const field = fieldRef.value;
        const pattern = getParentPattern(fieldRef);
        return h(
          ElPopover,
          {
            ...attrs,
            class: [prefixCls].concat(attrs.class),
            title: attrs.title || field.title,
            value: visible.value,
            trigger: "click",
            onInput: (value) => {
              visible.value = value;
            }
          },
          {
            default: slots.default,
            reference: () => h(
              "div",
              { class: prefixCls },
              h(
                FormBaseItem,
                { class: [`${prefixCls}-trigger`] },
                {
                  default: () => h(
                    "div",
                    {
                      class: [`${prefixCls}-content`]
                    },
                    [
                      h(
                        "span",
                        {
                          class: [`${prefixCls}-preview`]
                        },
                        attrs.title || field.title
                      ),
                      h(
                        pattern === "editable" ? Edit : ChatDotRound,
                        {
                          class: [`${prefixCls}-edit-btn`]
                        },
                        {}
                      )
                    ]
                  )
                }
              )
            )
          }
        );
      };
    }
  })
);
const Editable = composeExport(EditableInner, {
  Popover: EditablePopover
});

export { Editable, Editable as default };
//# sourceMappingURL=index.mjs.map