kui-vue/components/input/textarea.jsx

A lightweight desktop UI component library suitable for Vue.js 2.

import { defineComponent, watch, ref } from "vue";
import { withInstall } from "../utils/vue";
const TextArea = defineComponent({
  name: "TextArea",
  props: {
    value: [String, Number, Object, Array],
    theme: String,
    size: String,
    disabled: Boolean,
  },
  setup(ps, { attrs, emit, listeners }) {
    const currentValue = ref(ps.value);
    watch(
      () => ps.value,
      (v) => {
        currentValue.value = v;
      }
    );

    return () => {
      const { theme, disabled, size } = ps;
      const props = {
        class: [
          "k-textarea",
          {
            [`k-textarea-${theme}`]: theme == "light",
            "k-textarea-sm": size == "small",
            "k-textarea-lg": size == "large",
          },
        ],
        attrs: {
          ...attrs,
          disabled,
        },
        domProps: {
          value: currentValue.value,
        },
        on: {
          ...listeners,
          input: (e) => {
            const v = e.target.value;
            // currentValue.value = v;
            emit("input", v);
          },
        },
        // onInput: (e) => {
        //   // todo: not update value
        //   const v = e.target.value;
        //   currentValue.value = v;
        //   emit("update:value", v);
        // },
      };
      return <textarea {...props} />;
    };
  },
});
export default withInstall(TextArea);