vue-admin-core/lib/formily/editable/src/index.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var reactiveVue = require('@formily/reactive-vue');
var reactive = require('@formily/reactive');
var core = require('@formily/core');
var vue$1 = require('@formily/vue');
var elementPlus = require('element-plus');
var iconsVue = require('@element-plus/icons-vue');
var index = require('../../__builtins__/configs/index.js');
require('../../form-item/index.js');
require('../../__builtins__/shared/index.js');
var index$1 = require('../../form-item/src/index.js');
var utils = require('../../__builtins__/shared/utils.js');

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 (core.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 = reactiveVue.observer(
  vue.defineComponent({
    name: "FEditable",
    setup(props, { attrs, slots }) {
      const fieldRef = vue$1.useField();
      const innerRef = vue.ref(document.body);
      const prefixCls = `${index.stylePrefix}-editable`;
      const setEditable = (payload) => {
        const pattern = getParentPattern(fieldRef);
        if (pattern !== "editable")
          return;
        fieldRef.value.setPattern(payload ? "editable" : "readPretty");
      };
      const dispose = reactive.reaction(
        () => {
          const pattern = getParentPattern(fieldRef);
          return pattern;
        },
        (pattern) => {
          if (pattern === "editable") {
            fieldRef.value.setPattern("readPretty");
          }
        },
        {
          fireImmediately: true
        }
      );
      vue.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 vue.h(
            index$1.FormBaseItem,
            {
              hasIcon: true,
              ...attrs,
              ...itemProps
            },
            {
              default: () => {
                return vue.h(
                  pattern === "editable" ? iconsVue.Edit : iconsVue.ChatDotRound,
                  {
                    class: [`${prefixCls}-edit-btn`]
                  },
                  {}
                );
              }
            }
          );
        };
        const renderCloseHelper = () => {
          if (!editable)
            return null;
          return vue.h(
            index$1.FormBaseItem,
            {
              hasIcon: true,
              ...attrs
            },
            {
              default: () => {
                return vue.h(
                  iconsVue.Close,
                  {
                    class: [`${prefixCls}-close-btn`]
                  },
                  {}
                );
              }
            }
          );
        };
        return vue.h(
          "div",
          {
            class: prefixCls,
            ref: innerRef,
            onClick
          },
          vue.h(
            "div",
            {
              class: `${prefixCls}-content`
            },
            [
              vue.h(
                index$1.FormBaseItem,
                {
                  ...attrs,
                  ...itemProps
                },
                slots
              ),
              renderEditHelper(),
              renderCloseHelper()
            ]
          )
        );
      };
    }
  })
);
const EditablePopover = reactiveVue.observer(
  vue.defineComponent({
    name: "FEditablePopover",
    setup(props, { attrs, slots }) {
      const fieldRef = vue$1.useField();
      const prefixCls = `${index.stylePrefix}-editable`;
      const visible = vue.ref(false);
      return () => {
        const field = fieldRef.value;
        const pattern = getParentPattern(fieldRef);
        return vue.h(
          elementPlus.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: () => vue.h(
              "div",
              { class: prefixCls },
              vue.h(
                index$1.FormBaseItem,
                { class: [`${prefixCls}-trigger`] },
                {
                  default: () => vue.h(
                    "div",
                    {
                      class: [`${prefixCls}-content`]
                    },
                    [
                      vue.h(
                        "span",
                        {
                          class: [`${prefixCls}-preview`]
                        },
                        attrs.title || field.title
                      ),
                      vue.h(
                        pattern === "editable" ? iconsVue.Edit : iconsVue.ChatDotRound,
                        {
                          class: [`${prefixCls}-edit-btn`]
                        },
                        {}
                      )
                    ]
                  )
                }
              )
            )
          }
        );
      };
    }
  })
);
const Editable = utils.composeExport(EditableInner, {
  Popover: EditablePopover
});

exports.Editable = Editable;
exports.default = Editable;
//# sourceMappingURL=index.js.map