ant-design-x-vue-next/es/bubble/EditableContent.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as g, ref as x, onMounted as N, createVNode as i, Fragment as T } from "vue";
import { Flex as k, Button as u } from "ant-design-vue";
import E from "../locale/useLocale.mjs";
const B = /* @__PURE__ */ g({
  name: "AXBubbleEditableContent",
  __name: "EditableContent",
  props: {
    content: null,
    prefixCls: null,
    okText: null,
    cancelText: null
  },
  emits: ["editConfirm", "editCancel"],
  setup(d, {
    emit: f
  }) {
    function m(t) {
      const e = getComputedStyle(t).display;
      return e === "block" || e === "flex" || e === "list-item" || e === "table";
    }
    function p(t) {
      var s;
      const e = [""], n = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
      for (; n.nextNode(); ) {
        const o = n.currentNode;
        if (o.nodeType === Node.TEXT_NODE) {
          e[e.length - 1] += o.textContent;
          continue;
        }
        o.tagName === "BR" && ((s = o.parentNode) == null ? void 0 : s.childElementCount) === 1 || (o.tagName === "BR" || m(o)) && e.push("");
      }
      return e.join(`
`);
    }
    const [r] = E("Bubble"), l = d, c = f, a = x(null);
    N(() => {
      const t = a.value;
      if (!t) return;
      t.textContent = l.content, t.focus();
      const e = window.getSelection();
      if (!e) return;
      const n = document.createRange();
      n.selectNodeContents(t), n.collapse(!1), e.removeAllRanges(), e.addRange(n);
    });
    const C = () => {
      a.value && c("editConfirm", p(a.value));
    }, b = () => c("editCancel");
    return () => {
      if (typeof l.content != "string")
        throw new Error("Content of editable Bubble should be string");
      return i(T, null, [i("div", {
        ref: (t) => {
          a.value = t;
        },
        contenteditable: "true"
      }, null), i(k, {
        class: `${l.prefixCls}-editing-opts`,
        gap: 8
      }, {
        default: () => [i(u, {
          type: "primary",
          shape: "round",
          size: "small",
          onClick: C
        }, {
          default: () => [l.okText || r.value.editableOk]
        }), i(u, {
          type: "text",
          shape: "round",
          size: "small",
          onClick: b
        }, {
          default: () => [l.cancelText || r.value.editableCancel]
        })]
      })]);
    };
  }
});
export {
  B as default
};