'use strict';

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

var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
require('../../../utils/index.cjs');
var index$1 = require('../../input/index.cjs');
var index = require('../style/index.cjs');
var props = require('./props.cjs');
var KeyCode = require('../../../utils/KeyCode.cjs');
var _class = require('../../../utils/dom/class.cjs');

var Editable = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "Editable",
  inheritAttrs: false,
  props: props.editableProps(),
  // emits: ['save', 'cancel', 'end', 'change'],
  setup(props, {
    emit,
    slots,
    attrs
  }) {
    const {
      prefixCls
    } = vue.toRefs(props);
    const state = vue.reactive({
      current: props.value || "",
      lastKeyCode: void 0,
      inComposition: false,
      cancelFlag: false
    });
    vue.watch(() => props.value, (current) => {
      state.current = current;
    });
    const textArea = vue.ref();
    vue.onMounted(() => {
      var _a;
      if (textArea.value) {
        const resizableTextArea = (_a = textArea.value) == null ? void 0 : _a.resizableTextArea;
        const innerTextArea = resizableTextArea == null ? void 0 : resizableTextArea.textArea;
        innerTextArea.focus();
        const {
          length
        } = innerTextArea.value;
        innerTextArea.setSelectionRange(length, length);
      }
    });
    function saveTextAreaRef(node) {
      textArea.value = node;
    }
    function onChange({
      target: {
        value
      }
    }) {
      state.current = value.replace(/[\r\n]/g, "");
      emit("change", state.current);
    }
    function onCompositionStart() {
      state.inComposition = true;
    }
    function onCompositionEnd() {
      state.inComposition = false;
    }
    function onKeyDown(e) {
      const {
        keyCode
      } = e;
      if (keyCode === KeyCode.KeyCode.ENTER)
        e.preventDefault();
      if (state.inComposition)
        return;
      state.lastKeyCode = keyCode;
    }
    function onKeyUp(e) {
      const {
        keyCode,
        ctrlKey,
        altKey,
        metaKey,
        shiftKey
      } = e;
      if (state.lastKeyCode === keyCode && !state.inComposition && !ctrlKey && !altKey && !metaKey && !shiftKey) {
        if (keyCode === KeyCode.KeyCode.ENTER) {
          confirmChange();
          emit("end");
        } else if (keyCode === KeyCode.KeyCode.ESC) {
          state.current = props.originContent;
          emit("cancel");
        }
      }
    }
    function onBlur() {
      confirmChange();
    }
    function confirmChange() {
      emit("save", state.current.trim());
    }
    const [wrapSSR, hashId] = index.default(prefixCls);
    return () => {
      const textAreaClassName = _class.classNames({
        [`${prefixCls.value}`]: true,
        [`${prefixCls.value}-edit-content`]: true,
        [`${prefixCls.value}-rtl`]: props.direction === "rtl",
        [props.component ? `${prefixCls.value}-${props.component}` : ""]: true
      }, attrs.class, hashId.value);
      return wrapSSR(vue.createVNode("div", {
        ...attrs,
        "class": textAreaClassName
      }, [vue.createVNode(index$1.Textarea, {
        "ref": saveTextAreaRef,
        "maxlength": props.maxlength,
        "value": state.current,
        "onChange": onChange,
        "onKeydown": onKeyDown,
        "onKeyup": onKeyUp,
        "onCompositionstart": onCompositionStart,
        "onCompositionend": onCompositionEnd,
        "onBlur": onBlur,
        "rows": 1,
        "autoSize": props.autoSize === void 0 || props.autoSize
      }, null), slots.enterIcon ? slots.enterIcon({
        className: `${props.prefixCls}-edit-content-confirm`
      }) : vue.createVNode(iconsVue.EnterOutlined, {
        "class": `${props.prefixCls}-edit-content-confirm`
      }, null)]));
    };
  }
});

exports.default = Editable;
//# sourceMappingURL=Editable.cjs.map
