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

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

@@ -1 +1 @@
-export { s as default } from '../OrTextareaV3-b142dda2.js';
+export { s as default } from '../OrTextareaV3-12467615.js';

package/dist/bundled/v3/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/v3/components/OrTextareaV3/index.js

@@ -1 +1 @@
-export { s as OrTextareaV3 } from '../OrTextareaV3-b142dda2.js';
+export { s as OrTextareaV3 } from '../OrTextareaV3-12467615.js';

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

@@ -1,2 +1,2 @@
 import '../OrInputBoxV3-efe30bd8.js';
-export { T as Textarea, a as TextareaControl, b as TextareaControlSizes } from '../OrTextareaV3-b142dda2.js';
+export { T as Textarea, a as TextareaControl, b as TextareaControlSizes } from '../OrTextareaV3-12467615.js';

package/dist/bundled/v3/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;
+};

package/dist/bundled/v3/components/{OrTextareaV3-b142dda2.js → OrTextareaV3-12467615.js}

@@ -9,6 +9,7 @@ import { s as script$4 } from './OrLabelV3-2715e117.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';
 
 const Textarea = [
@@ -17,8 +18,6 @@ const Textarea = [
 // Spacing
 'gap-xs'];
 const TextareaControl = [
-// Interactivity
-'resize-none',
 // Box
 'w-full',
 // Typography
@@ -28,10 +27,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*']
 };
 
 var script = defineComponent({
@@ -67,9 +66,9 @@ var script = defineComponent({
       type: String,
       default: () => InputBoxSize.M
     },
-    maxHeight: {
-      type: String,
-      default: undefined
+    rows: {
+      type: [Number, Object],
+      default: 2
     },
     label: {
       type: String,
@@ -112,7 +111,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('')
@@ -134,16 +145,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,
@@ -153,7 +169,7 @@ var script = defineComponent({
   }
 });
 
-const _hoisted_1 = ["name", "autocomplete", "placeholder", "required", "readonly", "disabled"];
+const _hoisted_1 = ["name", "rows", "autocomplete", "placeholder", "required", "readonly", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrInputBox = resolveComponent("OrInputBox");
@@ -184,10 +200,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, _ctx.attributes, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
       class: _ctx.controlStyles,
-      style: {
-        maxHeight: _ctx.maxHeight
-      },
+      style: _ctx.controlInlineStyles,
       name: _ctx.name,
+      rows: _ctx.rows,
       autocomplete: _ctx.autocomplete,
       placeholder: _ctx.placeholder,
       required: _ctx.required,

package/dist/bundled/v3/components/index.js

@@ -115,7 +115,7 @@ export { s as OrTeleport } from './OrTeleport-5a34b07f.js';
 export { default as OrTeleportV3 } from './OrTeleportV3/OrTeleport.js';
 export { s as OrTextV3 } from './OrTextV3-f2e88ff5.js';
 export { default as OrTextarea } from './OrTextarea/OrTextarea.js';
-export { s as OrTextareaV3 } from './OrTextareaV3-b142dda2.js';
+export { s as OrTextareaV3 } from './OrTextareaV3-12467615.js';
 export { OrTextbox, TextboxTypes } from './OrTextbox/index.js';
 export { s as OrTimeFormatV3 } from './OrTimeFormatV3-1a3d7a38.js';
 export { s as OrTimePickerV3 } from './OrTimePickerV3-cc7dd81b.js';