sprintify-ui 0.0.91 → 0.0.93

package/dist/sprintify-ui.es.js

@@ -1,5 +1,5 @@
 import Sl from "axios";
-import { defineComponent as H, inject as ke, resolveComponent as _e, openBlock as b, createBlock as te, withCtx as U, createElementVNode as v, normalizeClass as N, withModifiers as Ge, renderSlot as Q, createElementBlock as T, createCommentVNode as K, toDisplayString as G, h as Ee, unref as h, computed as C, ref as D, watch as Ae, Teleport as Et, createVNode as R, Transition as Re, TransitionGroup as Hr, Fragment as he, renderList as we, normalizeStyle as De, onMounted as xe, onBeforeMount as $l, withDirectives as Ne, vShow as tt, normalizeProps as Ze, guardReactiveProps as Xe, mergeProps as st, resolveDynamicComponent as Nt, createTextVNode as Ue, onBeforeUnmount as qt, cloneVNode as Bl, provide as ye, watchEffect as He, nextTick as qe, onUnmounted as ot, reactive as Cl, isRef as jt, withKeys as An, vModelText as Tn, useSlots as _l, createStaticVNode as Kr, getCurrentInstance as Il, pushScopeId as El, popScopeId as Al, createSlots as Tl, vModelSelect as Sn, readonly as on } from "vue";
+import { defineComponent as H, inject as ke, resolveComponent as _e, openBlock as b, createBlock as te, withCtx as U, createElementVNode as v, normalizeClass as N, withModifiers as Ge, renderSlot as Q, createElementBlock as T, createCommentVNode as K, toDisplayString as G, h as Ee, unref as h, computed as C, ref as D, watch as Ae, Teleport as Et, createVNode as R, Transition as Re, TransitionGroup as Hr, Fragment as he, renderList as we, normalizeStyle as je, onMounted as xe, onBeforeMount as $l, withDirectives as Ne, vShow as tt, normalizeProps as Ze, guardReactiveProps as Xe, mergeProps as st, resolveDynamicComponent as Nt, createTextVNode as Ue, onBeforeUnmount as qt, cloneVNode as Bl, provide as ye, watchEffect as He, nextTick as qe, onUnmounted as ot, reactive as Cl, isRef as jt, withKeys as An, vModelText as Tn, useSlots as _l, createStaticVNode as Kr, getCurrentInstance as Il, pushScopeId as El, popScopeId as Al, createSlots as Tl, vModelSelect as Sn, readonly as on } from "vue";
 import { useI18n as nt, createI18n as Ll } from "vue-i18n";
 import { defineStore as Xn } from "pinia";
 import xr from "qs";
@@ -1739,7 +1739,7 @@ Available fill gap methods: `).concat(Z, "."));
           if (B) {
             var Z = a(B);
             Z.map(function(ae) {
-              d.fillGapSelectors.indexOf(ae) === -1 && (d.fillGapSelectors.push(ae), d.scroll || je(ae));
+              d.fillGapSelectors.indexOf(ae) === -1 && (d.fillGapSelectors.push(ae), d.scroll || Fe(ae));
             });
           }
         }, ee = function(B) {
@@ -1778,13 +1778,13 @@ Available fill gap methods: `).concat(Z, "."));
           s(B) && B.getAttribute("data-scroll-lock-locked") === "true" && (B.style.overflow = B.getAttribute("data-scroll-lock-saved-inline-overflow-property"), B.style.overflowY = B.getAttribute("data-scroll-lock-saved-inline-overflow-y-property"), B.removeAttribute("data-scroll-lock-saved-overflow-property"), B.removeAttribute("data-scroll-lock-saved-inline-overflow-property"), B.removeAttribute("data-scroll-lock-saved-inline-overflow-y-property"), B.removeAttribute("data-scroll-lock-locked"));
         }, ie = function() {
           d.fillGapSelectors.map(function(B) {
-            je(B);
+            Fe(B);
           });
         }, pe = function() {
           d.fillGapSelectors.map(function(B) {
             Oe(B);
           });
-        }, je = function(B) {
+        }, Fe = function(B) {
           var Z = document.querySelectorAll(B), ae = d.lockableSelectors.indexOf(B) !== -1;
           m(Z, function(ue) {
             Te(ue, ae);
@@ -1841,15 +1841,15 @@ Available fill gap methods: `).concat(Z, "."));
                 down: Z - p > ue,
                 left: ae + p < lt,
                 right: ae - p > lt
-              }, xl = function wr(Fe) {
+              }, xl = function wr(De) {
                 var kl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-                if (Fe) {
-                  var kn = E(Fe, ht, !1);
-                  if (F(Fe))
+                if (De) {
+                  var kn = E(De, ht, !1);
+                  if (F(De))
                     return !1;
-                  if (kl || O(Fe) && E(Fe, ht) || L(Fe, ht)) {
+                  if (kl || O(De) && E(De, ht) || L(De, ht)) {
                     var Ht = !1;
-                    I(Fe) && t(Fe) ? (ut.up && M(Fe) || ut.down && w(Fe)) && (Ht = !0) : M(Fe) && w(Fe) ? (ut.left && I(Fe) || ut.right && t(Fe)) && (Ht = !0) : (Ut.up && M(Fe) || Ut.down && w(Fe) || Ut.left && I(Fe) || Ut.right && t(Fe)) && (Ht = !0), Ht && (kn ? wr(kn, !0) : B.cancelable && B.preventDefault());
+                    I(De) && t(De) ? (ut.up && M(De) || ut.down && w(De)) && (Ht = !0) : M(De) && w(De) ? (ut.left && I(De) || ut.right && t(De)) && (Ht = !0) : (Ut.up && M(De) || Ut.down && w(De) || Ut.left && I(De) || Ut.right && t(De)) && (Ht = !0), Ht && (kn ? wr(kn, !0) : B.cancelable && B.preventDefault());
                   } else
                     wr(kn);
                 } else
@@ -2108,7 +2108,7 @@ const Za = {
     }, [
       v("div", {
         class: "animate-shimmer absolute inset-0 -translate-x-full border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent",
-        style: De({
+        style: je({
           animationDelay: e.delay
         })
       }, null, 4),
@@ -2708,7 +2708,7 @@ const ds = { class: "relative" }, fs = { class: "relative" }, ms = ["value", "pl
             h(l),
             e.detailsPosition == "left" ? "order-1 text-right" : "order-2 text-left"
           ]]),
-          style: De({
+          style: je({
             marginLeft: e.detailsPosition == "right" ? h(o) : "0",
             marginRight: e.detailsPosition == "left" ? h(o) : "0"
           })
@@ -2760,7 +2760,7 @@ const ds = { class: "relative" }, fs = { class: "relative" }, ms = ["value", "pl
         class: "shrink-0",
         "aria-label": a.full_name + `
 ` + a.email,
-        style: De({
+        style: je({
           marginLeft: s === 0 ? "0" : "-" + h(n)
         })
       }, [
@@ -2808,7 +2808,7 @@ const ds = { class: "relative" }, fs = { class: "relative" }, ms = ["value", "pl
     }), o = C(() => r.size == "base" ? "px-2.5 py-0.5 text-xs" : r.size == "lg" ? "px-3 py-0.5 text-sm" : "px-2.5 py-0.5 text-xs"), a = C(() => r.size == "base" ? "h-3 w-3 mr-1 -ml-0.5" : r.size == "lg" ? "h-4 w-4 mr-1 -ml-0.5" : "h-3 w-3 mr-1 -ml-0.5");
     return (s, i) => (b(), T("span", {
       class: N(["inline-flex items-center rounded-full font-medium", [h(n), h(o)]]),
-      style: De(h(l))
+      style: je(h(l))
     }, [
       e.icon ? (b(), te(h(be), {
         key: 0,
@@ -3174,11 +3174,11 @@ const Qs = /* @__PURE__ */ ze(Us, [["render", Ws]]), Ys = ["type", "disabled", "
     }
     return (f, k) => (b(), T("div", {
       class: "flex flex-wrap",
-      style: De({ margin: "-" + e.spacing })
+      style: je({ margin: "-" + e.spacing })
     }, [
       (b(!0), T(he, null, we(h(a), (y) => (b(), T("div", {
         key: y.value,
-        style: De({ padding: e.spacing })
+        style: je({ padding: e.spacing })
       }, [
         v("button", {
           type: e.buttonType,
@@ -3859,13 +3859,13 @@ list should be an Array.`), u.length === 0)
           var q, P, X, ie, pe = this.length - x;
           switch ((!A || pe < (A = Number(A))) && (A = pe), V = String(V || "utf8").toLowerCase()) {
             case "hex":
-              q = function(je, Te, Oe, Ce) {
+              q = function(Fe, Te, Oe, Ce) {
                 Oe = Number(Oe) || 0;
-                var Be = je.length - Oe;
+                var Be = Fe.length - Oe;
                 (!Ce || Be < (Ce = Number(Ce))) && (Ce = Be), ee((Be = Te.length) % 2 == 0, "Invalid hex string"), Be / 2 < Ce && (Ce = Be / 2);
                 for (var Je = 0; Je < Ce; Je++) {
                   var kt = parseInt(Te.substr(2 * Je, 2), 16);
-                  ee(!isNaN(kt), "Invalid hex string"), je[Oe + Je] = kt;
+                  ee(!isNaN(kt), "Invalid hex string"), Fe[Oe + Je] = kt;
                 }
                 return w._charsWritten = 2 * Je, Je;
               }(this, u, x, A);
@@ -3897,20 +3897,20 @@ list should be an Array.`), u.length === 0)
             return "";
           switch (u) {
             case "hex":
-              V = function(pe, je, Te) {
+              V = function(pe, Fe, Te) {
                 var Oe = pe.length;
-                (!je || je < 0) && (je = 0), (!Te || Te < 0 || Oe < Te) && (Te = Oe);
-                for (var Ce = "", Be = je; Be < Te; Be++)
+                (!Fe || Fe < 0) && (Fe = 0), (!Te || Te < 0 || Oe < Te) && (Te = Oe);
+                for (var Ce = "", Be = Fe; Be < Te; Be++)
                   Ce += W(pe[Be]);
                 return Ce;
               }(ie, x, A);
               break;
             case "utf8":
             case "utf-8":
-              V = function(pe, je, Te) {
+              V = function(pe, Fe, Te) {
                 var Oe = "", Ce = "";
                 Te = Math.min(pe.length, Te);
-                for (var Be = je; Be < Te; Be++)
+                for (var Be = Fe; Be < Te; Be++)
                   pe[Be] <= 127 ? (Oe += oe(Ce) + String.fromCharCode(pe[Be]), Ce = "") : Ce += "%" + pe[Be].toString(16);
                 return Oe + oe(Ce);
               }(ie, x, A);
@@ -3926,8 +3926,8 @@ list should be an Array.`), u.length === 0)
             case "ucs-2":
             case "utf16le":
             case "utf-16le":
-              V = function(pe, je, Te) {
-                for (var Oe = pe.slice(je, Te), Ce = "", Be = 0; Be < Oe.length; Be += 2)
+              V = function(pe, Fe, Te) {
+                for (var Oe = pe.slice(Fe, Te), Ce = "", Be = 0; Be < Oe.length; Be += 2)
                   Ce += String.fromCharCode(Oe[Be] + 256 * Oe[Be + 1]);
                 return Ce;
               }(ie, x, A);
@@ -5893,7 +5893,7 @@ const Eu = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Au = { class: "min
                     }, {
                       default: U(() => [
                         Ne(v("div", {
-                          style: De({
+                          style: je({
                             maxWidth: h(s)
                           }),
                           class: N(["pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-xl sm:rounded-t-none", [h(o).animationClasses.value]])
@@ -6029,8 +6029,8 @@ const Eu = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Au = { class: "min
       const X = i.resolve({
         path: s.path,
         params: s.params
-      }), ie = $e.formatQueryString(P), pe = X.fullPath + "?" + ie, je = se();
-      if ($e.formatQueryString(je) != ie) {
+      }), ie = $e.formatQueryString(P), pe = X.fullPath + "?" + ie, Fe = se();
+      if ($e.formatQueryString(Fe) != ie) {
         if (!k.value) {
           i.replace(pe);
           return;
@@ -6086,7 +6086,7 @@ const Eu = { class: "flex min-h-full w-full pt-20 sm:pt-0" }, Au = { class: "min
     }
     function ce(P = !1, X = !0) {
       var Je;
-      const ie = re.value.split(/[?#]/), pe = ie[0], je = (Je = ie[1]) != null ? Je : null, Te = $e.parseQueryString(je), Oe = kr(
+      const ie = re.value.split(/[?#]/), pe = ie[0], Fe = (Je = ie[1]) != null ? Je : null, Te = $e.parseQueryString(Fe), Oe = kr(
         Ve(I.value),
         Ve(n.urlQuery),
         Ve(Te)
@@ -6612,7 +6612,7 @@ const Qo = /* @__PURE__ */ ze(Wu, [["render", Zu], ["__scopeId", "data-v-945515f
         v("div", tc, [
           v("div", {
             class: "overflow-x-auto overflow-y-auto",
-            style: De({ maxHeight: e.maxHeight ? e.maxHeight + "px" : void 0 })
+            style: je({ maxHeight: e.maxHeight ? e.maxHeight + "px" : void 0 })
           }, [
             v("div", nc, [
               v("div", rc, [
@@ -6680,7 +6680,7 @@ const Qo = /* @__PURE__ */ ze(Wu, [["render", Zu], ["__scopeId", "data-v-945515f
                       v("td", {
                         colspan: h(O),
                         class: N(["sticky z-[1] p-0", [oe]]),
-                        style: De({
+                        style: je({
                           top: $.value + "px"
                         })
                       }, [
@@ -7768,7 +7768,7 @@ const Pc = /* @__PURE__ */ ze(Mc, [["render", Dc]]), Vc = { class: "flex justify
           ref_key: "dropdown",
           ref: o,
           class: "z-menu",
-          style: De(h(z))
+          style: je(h(z))
         }, [
           R(Re, {
             "enter-active-class": e.animated ? "duration-100 transition  ease-out" : "",
@@ -9598,6 +9598,10 @@ const ef = { class: "absolute inset-0 flex h-full w-full items-center justify-ce
     closeOnOutsideClick: {
       default: !0,
       type: Boolean
+    },
+    maxWidth: {
+      default: "512px",
+      type: String
     }
   },
   emits: ["update:modelValue"],
@@ -9660,12 +9664,15 @@ const ef = { class: "absolute inset-0 flex h-full w-full items-center justify-ce
                       default: U(() => [
                         e.modelValue ? (b(), T("div", {
                           key: 0,
-                          class: N(["pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:max-w-lg sm:rounded-xl sm:shadow-xl", [h(o).animationClasses.value]])
+                          class: N(["pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:rounded-xl sm:shadow-xl", [h(o).animationClasses.value]]),
+                          style: je({
+                            maxWidth: e.maxWidth
+                          })
                         }, [
                           Q(a.$slots, "default", {
                             close: h(o).close
                           })
-                        ], 2)) : K("", !0)
+                        ], 6)) : K("", !0)
                       ]),
                       _: 3
                     })
@@ -10016,7 +10023,7 @@ function sm(e, r, n, l, o, a) {
     v("circle", {
       stroke: "currentColor",
       "stroke-dasharray": `${e.circumference} ${e.circumference}`,
-      style: De({ strokeDashoffset: e.strokeDashoffset }),
+      style: je({ strokeDashoffset: e.strokeDashoffset }),
       "stroke-width": e.stroke,
       fill: "transparent",
       r: e.normalizedRadius,
@@ -10028,7 +10035,7 @@ function sm(e, r, n, l, o, a) {
       "alignment-baseline": "middle",
       x: e.radius,
       y: e.radius + e.fontSize / 10,
-      style: De({ fontSize: e.fontSize + "px", fontWeight: 600 })
+      style: je({ fontSize: e.fontSize + "px", fontWeight: 600 })
     }, G(Math.round(e.progress * 100)) + "% ", 13, am)
   ], 8, rm);
 }
@@ -10157,7 +10164,7 @@ const im = /* @__PURE__ */ ze(nm, [["render", sm], ["__scopeId", "data-v-e5ae83e
         ref_key: "content",
         ref: n,
         class: "overflow-hidden whitespace-pre-line",
-        style: De(h(l) ? void 0 : h(a))
+        style: je(h(l) ? void 0 : h(a))
       }, [
         Q(i.$slots, "default")
       ], 4),
@@ -10518,7 +10525,7 @@ const Nm = /* @__PURE__ */ ze(Mm, [["render", Vm]]), qm = { class: "inline-flex
               "relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ",
               h(a)
             ]),
-            style: De({
+            style: je({
               width: h(k) + "px",
               height: h(m) + "px"
             }),
@@ -10527,7 +10534,7 @@ const Nm = /* @__PURE__ */ ze(Mm, [["render", Vm]]), qm = { class: "inline-flex
             default: U(() => [
               v("span", {
                 "aria-hidden": "true",
-                style: De({
+                style: je({
                   height: h(s) + "px",
                   width: h(s) + "px",
                   transform: `translateX(${h(y)}px)`
@@ -10672,7 +10679,7 @@ const Zm = /* @__PURE__ */ ze(Km, [["render", Jm]]), Xm = { role: "presentation"
       ]);
     };
   }
-}), rp = ["value", "name", "placeholder", "disabled", "required"], op = /* @__PURE__ */ H({
+}), rp = ["value", "name", "placeholder", "disabled", "required", "rows"], op = /* @__PURE__ */ H({
   __name: "BaseTextareaAutoresize",
   props: {
     modelValue: {
@@ -10695,6 +10702,10 @@ const Zm = /* @__PURE__ */ ze(Km, [["render", Jm]]), Xm = { role: "presentation"
       default: 100,
       type: Number
     },
+    rows: {
+      default: 1,
+      type: Number
+    },
     submitOnEnter: {
       default: !1,
       type: Boolean
@@ -10734,7 +10745,7 @@ const Zm = /* @__PURE__ */ ze(Km, [["render", Jm]]), Xm = { role: "presentation"
       ref_key: "wrapper",
       ref: k,
       class: "wrapper grid",
-      style: De({ maxHeight: e.maxHeight + "px" })
+      style: je({ maxHeight: e.maxHeight + "px" })
     }, [
       v("textarea", {
         value: e.modelValue,
@@ -10746,8 +10757,8 @@ const Zm = /* @__PURE__ */ ze(Km, [["render", Jm]]), Xm = { role: "presentation"
           l,
           h(m) ? "border-red-500" : "border-slate-300"
         ]]),
-        style: De({ maxHeight: e.maxHeight + "px", gridArea: o }),
-        rows: "1",
+        style: je({ maxHeight: e.maxHeight + "px", gridArea: o }),
+        rows: e.rows,
         onInput: E,
         onKeyup: $,
         onKeydown: L,
@@ -10758,7 +10769,7 @@ const Zm = /* @__PURE__ */ ze(Km, [["render", Jm]]), Xm = { role: "presentation"
           l,
           h(m) ? "border-red-500" : "border-slate-300"
         ]]),
-        style: De({
+        style: je({
           content: a,
           maxHeight: e.maxHeight + "px",
           gridArea: o

package/dist/types/src/components/BaseModalCenter.vue.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             modelValue: boolean;
+            maxWidth: string;
             backdropClass: string;
             closeOnOutsideClick: boolean;
             verticalAlign: string;
@@ -24,9 +25,13 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
+            maxWidth: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "backdropClass" | "closeOnOutsideClick" | "verticalAlign">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "maxWidth" | "backdropClass" | "closeOnOutsideClick" | "verticalAlign">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -57,10 +62,15 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
+            maxWidth: {
+                default: string;
+                type: StringConstructor;
+            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
             modelValue: boolean;
+            maxWidth: string;
             backdropClass: string;
             closeOnOutsideClick: boolean;
             verticalAlign: string;
@@ -101,6 +111,10 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
+        maxWidth: {
+            default: string;
+            type: StringConstructor;
+        };
     }>> & {
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
@@ -124,10 +138,15 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
+    maxWidth: {
+        default: string;
+        type: StringConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
     modelValue: boolean;
+    maxWidth: string;
     backdropClass: string;
     closeOnOutsideClick: boolean;
     verticalAlign: string;

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         type: NumberConstructor;
     };
+    rows: {
+        default: number;
+        type: NumberConstructor;
+    };
     /**
      * Setting this to true will trigger the 'submit' event while pressing Enter.
      * Users will be able to add a line break while pressing Shift + Enter.
@@ -56,6 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
         type: NumberConstructor;
     };
+    rows: {
+        default: number;
+        type: NumberConstructor;
+    };
     /**
      * Setting this to true will trigger the 'submit' event while pressing Enter.
      * Users will be able to add a line break while pressing Shift + Enter.
@@ -84,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     hasError: boolean;
     maxHeight: number;
+    rows: number;
     submitOnEnter: boolean;
 }>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.91",
+  "version": "0.0.93",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseModalCenter.vue

@@ -51,7 +51,10 @@
               >
                 <div
                   v-if="modelValue"
-                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:max-w-lg sm:rounded-xl sm:shadow-xl"
+                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:rounded-xl sm:shadow-xl"
+                  :style="{
+                    maxWidth: maxWidth,
+                  }"
                   :class="[modal.animationClasses.value]"
                 >
                   <slot :close="modal.close" />
@@ -93,6 +96,10 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  maxWidth: {
+    default: '512px',
+    type: String,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseTextareaAutoresize.vue

@@ -16,7 +16,7 @@
         hasErrorInternal ? 'border-red-500' : 'border-slate-300',
       ]"
       :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
-      rows="1"
+      :rows="rows"
       @input="onInput"
       @keyup="onKeyUp"
       @keydown="onKeyDown"
@@ -72,6 +72,10 @@ const props = defineProps({
     default: 100,
     type: Number,
   },
+  rows: {
+    default: 1,
+    type: Number,
+  },
   /**
    * Setting this to true will trigger the 'submit' event while pressing Enter.
    * Users will be able to add a line break while pressing Shift + Enter.