@opensig/opendesign/lib/_components/in-textarea/InTextarea.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const icons = require("../../_utils/icons.js");
const useInput = require("../../_headless/use-input.js");
const index = require("../../locale/index.js");
require("../../scrollbar/index.js");
const vScrollbar = require("../../scrollbar/vScrollbar.js");
const _hoisted_1 = ["for"];
const _hoisted_2 = ["date-value"];
const _hoisted_3 = ["id", "value", "placeholder", "readonly", "disabled", "rows", "cols"];
const _hoisted_4 = ["innerHTML"];
const _hoisted_5 = { key: 1 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "InTextarea",
  props: types.inTextareaProps,
  emits: ["update:modelValue", "change", "input", "focus", "blur", "clear", "pressEnter"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const slots = vue.useSlots();
    const { t } = index.useI18n();
    const { modelValue, inputOnOutlimit, maxLength, minLength, showLength } = vue.toRefs(props);
    const {
      displayValue,
      clearValue: clear,
      isValid,
      inputValueLength,
      isShowLength,
      isOutLengthLimit,
      handleBlur,
      handleInput,
      handleFocus,
      handleClear,
      inputEl
    } = useInput.useInput({
      emits,
      maxLength,
      minLength,
      showLength,
      inputOnOutlimit,
      modelValue,
      defaultValue: props.defaultValue ?? "",
      emitUpdate: (value) => {
        emits("update:modelValue", value);
      },
      format: props.format,
      validate: props.validate,
      valueOnInvalidChange: props.valueOnInvalidChange
    });
    const resizeValue = vue.computed(() => {
      if (props.autoSize || props.disabled) {
        return "none";
      } else {
        if (props.resize === "h") {
          return "horizontal";
        } else if (props.resize === "v") {
          return "vertical";
        }
        return props.resize;
      }
    });
    const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly);
    const focus = () => {
      var _a;
      (_a = inputEl.value) == null ? void 0 : _a.focus();
    };
    const blur = () => {
      var _a;
      (_a = inputEl.value) == null ? void 0 : _a.blur();
    };
    const mirrorValue = vue.computed(() => {
      return displayValue.value;
    });
    const scrollbarProps = vue.computed(() => {
      if (props.scrollbar === true) {
        return {
          showType: "hover",
          size: "small"
        };
      }
      return props.scrollbar;
    });
    __expose({
      inputEl,
      focus,
      blur,
      clear
    });
    return (_ctx, _cache) => {
      var _a, _b;
      return vue.openBlock(), vue.createElementBlock("label", {
        class: vue.normalizeClass(["o_textarea", {
          "o_textarea-clearable": isClearable.value && vue.unref(displayValue) !== "",
          "o_textarea-disabled": props.disabled,
          "o_textarea-readonly": props.readonly,
          "o_textarea-invalid": !vue.unref(isValid),
          "o_textarea-auto-size": props.autoSize,
          "o_textarea-limit": props.maxLength
        }]),
        for: props.textareaId
      }, [
        ((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
          "div",
          {
            key: 0,
            class: "o_textarea-prefix",
            onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
            }, ["prevent"]))
          },
          [
            vue.renderSlot(_ctx.$slots, "prefix")
          ],
          32
          /* NEED_HYDRATION */
        )) : vue.createCommentVNode("v-if", true),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(["o_textarea-wrap", {
            "o_textarea-wrap-auto-size": props.autoSize
          }]),
          "date-value": mirrorValue.value
        }, [
          vue.withDirectives(vue.createElementVNode("textarea", {
            id: props.textareaId,
            ref_key: "inputEl",
            ref: inputEl,
            value: vue.unref(displayValue),
            class: "o_textarea-textarea",
            placeholder: props.placeholder,
            readonly: props.readonly,
            disabled: props.disabled,
            rows: props.rows,
            cols: props.cols,
            style: vue.normalizeStyle({
              resize: resizeValue.value
            }),
            onFocus: _cache[1] || (_cache[1] = //@ts-ignore
            (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
            onBlur: _cache[2] || (_cache[2] = //@ts-ignore
            (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
            onInput: _cache[3] || (_cache[3] = //@ts-ignore
            (...args) => vue.unref(handleInput) && vue.unref(handleInput)(...args))
          }, null, 44, _hoisted_3), [
            [vue.unref(vScrollbar.vScrollbar), scrollbarProps.value]
          ]),
          isClearable.value ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 0,
              class: "o_textarea-icon o_textarea-clear",
              onClick: _cache[4] || (_cache[4] = //@ts-ignore
              (...args) => vue.unref(handleClear) && vue.unref(handleClear)(...args)),
              onMousedown: _cache[5] || (_cache[5] = vue.withModifiers(() => {
              }, ["prevent"]))
            },
            [
              vue.createVNode(vue.unref(icons.IconClose), { class: "o_textarea-clear-icon" })
            ],
            32
            /* NEED_HYDRATION */
          )) : vue.createCommentVNode("v-if", true),
          vue.unref(isShowLength) ? (vue.openBlock(), vue.createElementBlock(
            "div",
            {
              key: 1,
              class: vue.normalizeClass(["o_textarea-icon o_textarea-count", { "o_textarea-count-error": vue.unref(isOutLengthLimit) }])
            },
            [
              vue.renderSlot(_ctx.$slots, "length", { length: vue.unref(inputValueLength) }, () => [
                props.maxLength ?? props.minLength ? (vue.openBlock(), vue.createElementBlock("span", {
                  key: 0,
                  innerHTML: vue.unref(t)("input.limit", vue.unref(inputValueLength), props.maxLength ?? props.minLength)
                }, null, 8, _hoisted_4)) : (vue.openBlock(), vue.createElementBlock(
                  "span",
                  _hoisted_5,
                  vue.toDisplayString(vue.unref(inputValueLength)),
                  1
                  /* TEXT */
                ))
              ])
            ],
            2
            /* CLASS */
          )) : vue.createCommentVNode("v-if", true)
        ], 10, _hoisted_2),
        ((_b = slots.suffix) == null ? void 0 : _b.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
          "div",
          {
            key: 1,
            class: "o_textarea-suffix",
            onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {
            }, ["prevent"]))
          },
          [
            vue.renderSlot(_ctx.$slots, "suffix")
          ],
          32
          /* NEED_HYDRATION */
        )) : vue.createCommentVNode("v-if", true)
      ], 10, _hoisted_1);
    };
  }
});
module.exports = _sfc_main;