@matechat/core/Input/index.js

前端智能化场景解决方案UI库，轻松构建你的AI应用。

import "./index.css";
import { defineComponent as k, inject as T, computed as M, withDirectives as j, createElementBlock as p, openBlock as u, normalizeClass as $, unref as o, isRef as z, vModelText as W, nextTick as A, createElementVNode as C, ref as S, reactive as O, createCommentVNode as g, createBlock as K, toDisplayString as x, normalizeStyle as R, watch as U, provide as X, renderSlot as v, createVNode as w } from "vue";
import { useMcI18n as F } from "@matechat/core/Locale";
var _ = /* @__PURE__ */ ((t) => (t.Simple = "simple", t.Full = "full", t))(_ || {}), P = /* @__PURE__ */ ((t) => (t.Bordered = "bordered", t.BorderLess = "borderless", t))(P || {}), E = /* @__PURE__ */ ((t) => (t.Simple = "simple", t.Full = "full", t))(E || {}), y = /* @__PURE__ */ ((t) => (t.Enter = "enter", t.ShiftEnter = "shiftEnter", t))(y || {});
const Y = {
  value: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String
  },
  disabled: {
    type: Boolean,
    default: !1
  },
  displayType: {
    type: String,
    default: "full"
    /* Full */
  },
  variant: {
    type: String,
    default: "bordered"
    /* Bordered */
  },
  sendBtnVariant: {
    type: String,
    default: "full"
    /* Full */
  },
  loading: {
    type: Boolean,
    default: !1
  },
  showCount: {
    type: Boolean,
    default: !1
  },
  maxLength: {
    type: Number
  },
  submitShortKey: {
    type: [String, null],
    default: "enter"
    /* Enter */
  }
}, q = ["change", "submit", "cancel", "focus", "blur"], B = "mc-input", G = ["placeholder", "disabled", "maxlength"], H = /* @__PURE__ */ k({
  __name: "textarea",
  setup(t) {
    const { t: s } = F(), { inputValue: n, rootProps: e, rootEmits: i } = T(B), a = M(() => {
      let r = "", m = "";
      return e.submitShortKey === y.Enter && (r = "Enter", m = "Shift + Enter"), e.submitShortKey === y.ShiftEnter && (r = "Shift + Enter", m = "Enter"), e.placeholder ?? (r ? s("Input.pleaseEnterPlaceholder", { enterKey: r, shiftEnterKey: m }) : s("Input.pleaseEnter"));
    });
    let c = !1;
    const d = () => {
      A(() => {
        i("change", n.value);
      });
    }, h = () => {
      c || d();
    }, l = () => {
      c = !0;
    }, b = () => {
      c = !1, d();
    }, f = (r) => {
      if (e.submitShortKey === null)
        return;
      (e.submitShortKey === y.Enter ? !r.shiftKey : e.submitShortKey === y.ShiftEnter ? r.shiftKey : !1) && r.key === "Enter" && !c && (r.preventDefault(), i("submit", n.value), n.value = "", i("change", n.value));
    }, L = (r) => {
      i("focus", r);
    }, N = (r) => {
      i("blur", r);
    };
    return (r, m) => j((u(), p("textarea", {
      "onUpdate:modelValue": m[0] || (m[0] = (D) => z(n) ? n.value = D : null),
      placeholder: a.value,
      disabled: o(e).disabled,
      maxlength: o(e).maxLength,
      class: $([
        "mc-textarea",
        { "mc-textarea-simple": o(e).displayType === o(_).Simple, "mc-textarea-disabled": o(e).disabled }
      ]),
      onInput: h,
      onCompositionstart: l,
      onCompositionend: b,
      onKeydown: f,
      onFocus: L,
      onBlur: N
    }, null, 42, G)), [
      [W, o(n)]
    ]);
  }
}), I = (t, s) => {
  const n = t.__vccOpts || t;
  for (const [e, i] of s)
    n[e] = i;
  return n;
}, J = {}, Q = {
  width: "16px",
  height: "16px",
  viewBox: "0 0 16 16",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg"
};
function e1(t, s) {
  return u(), p("svg", Q, s[0] || (s[0] = [
    C(
      "g",
      {
        stroke: "none",
        "stroke-width": "1",
        fill: "none",
        "fill-rule": "evenodd"
      },
      [
        C("path", { d: "M8,12 C8.27614237,12 8.5,12.2238576 8.5,12.5 L8.5,14.5 C8.5,14.7761424 8.27614237,15 8,15 C7.72385763,15 7.5,14.7761424 7.5,14.5 L7.5,12.5 C7.5,12.2238576 7.72385763,12 8,12 Z M11.0495421,11.3466838 L12.2251126,12.9647178 C12.3874251,13.1881217 12.3379006,13.5008065 12.1144968,13.663119 C11.8910929,13.8254314 11.5784081,13.775907 11.4160956,13.5525031 L10.2405251,11.9344691 C10.0782127,11.7110652 10.1277371,11.3983804 10.351141,11.236068 C10.5745449,11.0737556 10.8872297,11.12328 11.0495421,11.3466838 Z M5.64885899,11.236068 C5.87226287,11.3983804 5.92178728,11.7110652 5.75947486,11.9344691 L4.58390436,13.5525031 C4.42159194,13.775907 4.10890711,13.8254314 3.88550323,13.663119 C3.66209936,13.5008065 3.61257495,13.1881217 3.77488736,12.9647178 L4.95045787,11.3466838 C5.11277028,11.12328 5.42545512,11.0737556 5.64885899,11.236068 Z M12.4342628,8.91504822 L14.3363759,9.53308221 C14.5990029,9.61841489 14.7427283,9.90049196 14.6573956,10.163119 C14.5720629,10.425746 14.2899859,10.5694714 14.0273589,10.4841387 L12.1252458,9.86610473 C11.8626188,9.78077205 11.7188934,9.49869498 11.8042261,9.23606798 C11.8895588,8.97344097 12.1716358,8.82971553 12.4342628,8.91504822 Z M4.19577393,9.23606798 C4.28110662,9.49869498 4.13738118,9.78077205 3.87475417,9.86610473 L1.97264114,10.4841387 C1.71001414,10.5694714 1.42793707,10.425746 1.34260439,10.163119 C1.2572717,9.90049196 1.40099714,9.61841489 1.66362415,9.53308221 L3.56573718,8.91504822 C3.82836418,8.82971553 4.11044125,8.97344097 4.19577393,9.23606798 Z M14.6573956,5.83688104 C14.7427283,6.09950804 14.5990029,6.38158511 14.3363759,6.46691779 L12.4342628,7.08495178 C12.1716358,7.17028447 11.8895588,7.02655903 11.8042261,6.76393202 C11.7188934,6.50130502 11.8626188,6.21922795 12.1252458,6.13389527 L14.0273589,5.51586128 C14.2899859,5.43052859 14.5720629,5.57425403 14.6573956,5.83688104 Z M1.97264114,5.51586128 L3.87475417,6.13389527 C4.13738118,6.21922795 4.28110662,6.50130502 4.19577393,6.76393202 C4.11044125,7.02655903 3.82836418,7.17028447 3.56573718,7.08495178 L1.66362415,6.46691779 C1.40099714,6.38158511 1.2572717,6.09950804 1.34260439,5.83688104 C1.42793707,5.57425403 1.71001414,5.43052859 1.97264114,5.51586128 Z M12.1144968,2.33688104 C12.3379006,2.49919345 12.3874251,2.81187829 12.2251126,3.03528216 L11.0495421,4.65331615 C10.8872297,4.87672003 10.5745449,4.92624444 10.351141,4.76393202 C10.1277371,4.60161961 10.0782127,4.28893477 10.2405251,4.0655309 L11.4160956,2.44749691 C11.5784081,2.22409304 11.8910929,2.17456862 12.1144968,2.33688104 Z M4.58390436,2.44749691 L5.75947486,4.0655309 C5.92178728,4.28893477 5.87226287,4.60161961 5.64885899,4.76393202 C5.42545512,4.92624444 5.11277028,4.87672003 4.95045787,4.65331615 L3.77488736,3.03528216 C3.61257495,2.81187829 3.66209936,2.49919345 3.88550323,2.33688104 C4.10890711,2.17456862 4.42159194,2.22409304 4.58390436,2.44749691 Z M8,1 C8.27614237,1 8.5,1.22385763 8.5,1.5 L8.5,3.5 C8.5,3.77614237 8.27614237,4 8,4 C7.72385763,4 7.5,3.77614237 7.5,3.5 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z" })
      ],
      -1
      /* CACHED */
    )
  ]));
}
const t1 = /* @__PURE__ */ I(J, [["render", e1]]), n1 = {}, o1 = {
  width: "16px",
  height: "16px",
  viewBox: "0 0 16 16",
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg"
};
function s1(t, s) {
  return u(), p("svg", o1, s[0] || (s[0] = [
    C(
      "g",
      {
        stroke: "none",
        "stroke-width": "1",
        fill: "none",
        "fill-rule": "evenodd"
      },
      [
        C("path", { d: "M13.5105149,2.56164948 C14.1211149,2.35546948 14.7829149,2.68328948 14.9892149,3.29376948 C15.0349149,3.42925948 15.0552149,3.57159948 15.0495149,3.71368948 L15.0495149,3.71368948 L15.0351149,3.85546948 L13.6575149,12.2717195 C13.5237149,13.0892195 12.7524149,13.6435195 11.9348149,13.5097195 C11.8542149,13.4965195 11.7751149,13.4768195 11.6980149,13.4508195 L11.6980149,13.4508195 L11.5840149,13.4071195 L9.3049349,12.4260195 L8.4482449,13.5422195 C8.1958049,13.8708195 7.8205549,14.0786195 7.4128449,14.1207195 L7.4128449,14.1207195 L7.2585449,14.1286195 C6.4787649,14.1286195 5.8381349,13.5337195 5.7653849,12.7731195 L5.7653849,12.7731195 L5.7585449,12.6286195 L5.7602549,10.5258195 L5.7756349,10.4384195 L5.7944349,10.3824195 L5.8266649,10.3168995 L5.8735349,10.2503695 L5.9177249,10.2039195 L12.6909149,3.89392948 L2.3403349,7.38903948 C2.2329149,7.42529948 2.1418449,7.49676948 2.0808149,7.59063948 L2.0808149,7.59063948 L2.0412649,7.66497948 C1.9440949,7.89044948 2.0258749,8.14788948 2.2236349,8.27917948 L2.2236349,8.27917948 L2.3029749,8.32214948 L4.4799849,9.26177948 C4.7333949,9.37121948 4.8503449,9.66546948 4.7409649,9.91894948 C4.6435549,10.1443495 4.4003949,10.2616595 4.1694349,10.2081295 L4.1694349,10.2081295 L4.0837449,10.1798795 L1.9072249,9.24047948 C1.1462449,8.91284948 0.795166898,8.03039948 1.1225549,7.26953948 C1.2700249,6.92755948 1.5380849,6.65435948 1.8730449,6.50018948 L1.8730449,6.50018948 L2.0205049,6.44158948 Z M6.7578149,11.3299195 L6.7585449,12.6286195 L6.7666013,12.7185103 C6.80894095,12.9517898 7.0131049,13.1286195 7.2585449,13.1286195 C7.3828149,13.1286195 7.5014649,13.0824195 7.5925349,13.0008195 L7.5925349,13.0008195 L7.6550349,12.9332195 L8.3569349,12.0179195 L6.7578149,11.3299195 Z M13.9888149,4.05090948 L7.1599149,10.4129195 L11.9795149,12.4886195 C11.9980149,12.4966195 12.0173149,12.5035195 12.0369149,12.5093195 L12.0369149,12.5093195 L12.0964149,12.5228195 C12.3386149,12.5624195 12.5686149,12.4209195 12.6482149,12.1975195 L12.6482149,12.1975195 L12.6706149,12.1101195 L13.9888149,4.05090948 Z" })
      ],
      -1
      /* CACHED */
    )
  ]));
}
const l1 = /* @__PURE__ */ I(n1, [["render", s1]]), r1 = ["disabled"], i1 = { class: "mc-button-content" }, a1 = { key: 2 }, u1 = /* @__PURE__ */ k({
  __name: "button",
  setup(t) {
    const { t: s } = F(), { inputValue: n, rootProps: e, rootEmits: i } = T(
      B
    ), a = S(!1), c = S(!1), d = O({
      top: "0px",
      left: "0px"
    }), h = M(() => ({
      "mc-button": !0,
      "mc-button-loading": e.loading,
      mousedown: a.value,
      "mc-button-simple": e.sendBtnVariant === E.Simple
    })), l = (f) => {
      d.left = f.offsetX + "px", d.top = f.offsetY + "px", c.value = !0, setTimeout(() => {
        c.value = !1;
      }, 300);
    }, b = (f) => {
      l(f), e.loading ? i("cancel") : (i("submit", n.value), n.value = "", i("change", n.value));
    };
    return (f, L) => (u(), p("button", {
      disabled: o(e).disabled || !o(e).loading && !o(n),
      class: $(h.value),
      onClick: b,
      onMousedown: L[0] || (L[0] = () => a.value = !0),
      onMouseup: L[1] || (L[1] = () => a.value = !1)
    }, [
      C("span", i1, [
        o(e).loading ? (u(), K(t1, { key: 0 })) : (u(), K(l1, { key: 1 })),
        o(e).sendBtnVariant === o(E).Full ? (u(), p(
          "span",
          a1,
          x(o(e).loading ? o(s)("Input.pauseAnswer") : o(s)("Input.send")),
          1
          /* TEXT */
        )) : g("v-if", !0)
      ]),
      c.value ? (u(), p(
        "div",
        {
          key: 0,
          class: "mc-button-water-wave",
          style: R(d)
        },
        null,
        4
        /* STYLE */
      )) : g("v-if", !0)
    ], 42, r1));
  }
}), Z = /* @__PURE__ */ I(u1, [["__scopeId", "data-v-8b1b116f"]]), c1 = { class: "mc-input-content" }, p1 = {
  key: 0,
  class: "mc-input-foot"
}, d1 = { class: "mc-input-foot-left" }, f1 = {
  key: 0,
  class: "mc-input-foot-count"
}, V = /* @__PURE__ */ k({
  __name: "Input",
  props: Y,
  emits: q,
  setup(t, { expose: s, emit: n }) {
    const e = t, i = n, a = S(""), c = M(() => ({
      "mc-input": !0,
      "mc-input-disabled": e.disabled,
      "mc-input-simple": e.displayType === _.Simple,
      "mc-input-borderless": e.variant === P.BorderLess
    })), d = () => {
      a.value = "";
    }, h = () => a.value;
    return U(
      () => e.value,
      () => {
        a.value = e.value;
      },
      { immediate: !0 }
    ), s({ clearInput: d, getInput: h }), X(B, { inputValue: a, rootProps: e, rootEmits: i }), (l, b) => (u(), p(
      "div",
      {
        class: $(c.value)
      },
      [
        v(l.$slots, "head"),
        C("div", c1, [
          v(l.$slots, "prefix"),
          w(H),
          v(l.$slots, "suffix"),
          l.displayType === o(_).Simple ? v(l.$slots, "button", { key: 0 }, () => [
            w(Z)
          ]) : g("v-if", !0)
        ]),
        l.displayType === o(_).Full ? (u(), p("div", p1, [
          C("div", d1, [
            v(l.$slots, "extra"),
            l.showCount ? (u(), p(
              "span",
              f1,
              x(a.value.length) + x(l.maxLength ?? !1 ? `/${l.maxLength}` : ""),
              1
              /* TEXT */
            )) : g("v-if", !0)
          ]),
          v(l.$slots, "button", {}, () => [
            w(Z)
          ])
        ])) : g("v-if", !0)
      ],
      2
      /* CLASS */
    ));
  }
});
V.install = (t) => {
  t.component("McInput", V);
};
export {
  V as McInput
};