@onereach/ui-components 13.2.2 → 13.2.3-beta.4665.0

package/dist/bundled/v2/components/OrTextareaV3/OrTextarea.js

@@ -9,6 +9,7 @@ import { b as InputBoxSize, a as InputBoxVariant } from '../../types-945b6452.js
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
+import { isObject } from '../../utils/isObject.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -46,9 +47,9 @@ var script = defineComponent({
       type: String,
       default: () => InputBoxSize.M
     },
-    maxHeight: {
-      type: String,
-      default: undefined
+    rows: {
+      type: [Number, Object],
+      default: 2
     },
     label: {
       type: String,
@@ -91,7 +92,19 @@ var script = defineComponent({
     const root = ref();
     const rootStyles = computed(() => ['or-textarea-v3', ...Textarea, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
     const control = ref();
-    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size]]);
+    const controlStyles = computed(() => [...TextareaControl, ...TextareaControlSizes[props.size], ...(isObject(props.rows) ? ['resize-none'] : [])]);
+    const controlInlineStyles = computed(() => {
+      if (control.value) {
+        const paddingTop = Number(getComputedStyle(control.value).getPropertyValue('padding-top').match(/^(?<value>\d+)px$/).groups.value);
+        const paddingBottom = Number(getComputedStyle(control.value).getPropertyValue('padding-bottom').match(/^(?<value>\d+)px$/).groups.value);
+        const lineHeight = Number(getComputedStyle(control.value).getPropertyValue('line-height').match(/^(?<value>\d+)px$/).groups.value);
+        return {
+          minHeight: `${paddingTop + paddingBottom + (isObject(props.rows) ? props.rows.min : props.rows) * lineHeight}px`,
+          maxHeight: isObject(props.rows) && props.rows.max ? `${paddingTop + paddingBottom + props.rows.max * lineHeight}px` : undefined
+        };
+      }
+      return {};
+    });
     // State
     const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: ref('')
@@ -113,16 +126,21 @@ var script = defineComponent({
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
     // Effects
-    useTextareaAutosize({
-      element: control,
-      input: model
-    });
+    if (isObject(props.rows)) {
+      // Unluckily, `useTextareaAutosize` doesn't have a teardown function
+      // So, dynamically changed `rows` won't have any effect
+      useTextareaAutosize({
+        element: control,
+        input: model
+      });
+    }
     return {
       attributes,
       root,
       rootStyles,
       control,
       controlStyles,
+      controlInlineStyles,
       model,
       length,
       maxLength,
@@ -132,7 +150,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-5a0794ae]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-7988e64b]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -181,11 +199,10 @@ var __vue_render__ = function () {
     }],
     ref: 'control',
     class: _vm.controlStyles,
-    style: {
-      maxHeight: _vm.maxHeight
-    },
+    style: _vm.controlInlineStyles,
     attrs: {
       "name": _vm.name,
+      "rows": _vm.rows,
       "autocomplete": _vm.autocomplete,
       "placeholder": _vm.placeholder,
       "required": _vm.required,
@@ -262,7 +279,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-5a0794ae";
+const __vue_scope_id__ = "data-v-7988e64b";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrTextareaV3/OrTextarea.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { InputBoxSize } from '../or-input-box-v3';
-import { TextareaModelValue } from './types';
+import { TextareaModelValue, TextareaRows } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<TextareaModelValue>;
@@ -22,9 +22,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -72,6 +72,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     control: import("vue-demi").Ref<HTMLTextAreaElement | undefined>;
     controlStyles: import("vue-demi").ComputedRef<string[]>;
+    controlInlineStyles: import("vue-demi").ComputedRef<{
+        minHeight: string;
+        maxHeight: string | undefined;
+    } | {
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    }>;
     model: import("../../hooks").UseProxyModelValueReturn<string>;
     length: import("vue-demi").ComputedRef<number>;
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
@@ -98,9 +105,9 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<"m" | "s">;
         default: () => InputBoxSize;
     };
-    maxHeight: {
-        type: StringConstructor;
-        default: undefined;
+    rows: {
+        type: PropType<TextareaRows>;
+        default: number;
     };
     label: {
         type: StringConstructor;
@@ -143,7 +150,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     autocomplete: string;
     variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
-    maxHeight: string;
+    rows: TextareaRows;
     label: string;
     placeholder: string;
     hint: string;

package/dist/bundled/v2/components/OrTextareaV3/styles.js

@@ -6,8 +6,6 @@ const Textarea = [
 // Spacing
 'gap-xs'];
 const TextareaControl = [
-// Interactivity
-'resize-none',
 // Box
 'w-full',
 // Typography
@@ -17,10 +15,10 @@ const TextareaControl = [
 const TextareaControlSizes = {
   [InputBoxSize.M]: [
   // Spacing
-  'pt-sm+* md:pt-sm*'],
+  '!mx-0', 'px-md md:px-sm+', 'py-sm+* md:py-sm*'],
   [InputBoxSize.S]: [
   // Spacing
-  'pt-sm*']
+  '!mx-0', 'px-md md:px-sm+', 'py-sm*']
 };
 
 export { Textarea, TextareaControl, TextareaControlSizes };

package/dist/bundled/v2/components/OrTextareaV3/types.d.ts

@@ -1,2 +1,6 @@
 import { ModelValue } from '../../types';
 export type TextareaModelValue = ModelValue<string>;
+export type TextareaRows = number | {
+    min: number;
+    max?: number;
+};