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

package/src/components/or-slider-v3/OrSlider.vue

@@ -192,7 +192,6 @@ export default defineComponent({
       'or-slider-thumb-v3',
       ...Styles.SliderThumb,
       ...Styles.SliderThumbColors[props.color],
-      'touch-none', // Required for proper work on mobile
     ]);
 
     const breakpointMarkStyles = computed(() => [

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -32,8 +32,9 @@
         v-bind="attributes"
         v-model.trim="model"
         :class="controlStyles"
-        :style="{ maxHeight }"
+        :style="controlInlineStyles"
         :name="name"
+        :rows="rows"
         :autocomplete="autocomplete"
         :placeholder="placeholder"
         :required="required"
@@ -85,12 +86,13 @@
 import { useTextareaAutosize } from '@vueuse/core';
 import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
+import { isObject } from '../../utils';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { Textarea, TextareaControl, TextareaControlSizes } from './styles';
-import { TextareaModelValue } from './types';
+import { TextareaModelValue, TextareaRows } from './types';
 
 export default defineComponent({
   name: 'OrTextarea',
@@ -133,9 +135,9 @@ export default defineComponent({
       default: () => InputBoxSize.M,
     },
 
-    maxHeight: {
-      type: String,
-      default: undefined,
+    rows: {
+      type: [Number, Object] as PropType<TextareaRows>,
+      default: 2,
     },
 
     label: {
@@ -212,8 +214,25 @@ export default defineComponent({
     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('') });
 
@@ -235,10 +254,14 @@ export default defineComponent({
     }
 
     // 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,
@@ -248,6 +271,7 @@ export default defineComponent({
 
       control,
       controlStyles,
+      controlInlineStyles,
 
       model,
 

package/src/components/or-textarea-v3/styles.ts

@@ -9,9 +9,6 @@ export const Textarea: string[] = [
 ];
 
 export const TextareaControl: string[] = [
-  // Interactivity
-  'resize-none',
-
   // Box
   'w-full',
 
@@ -26,11 +23,17 @@ export const TextareaControl: string[] = [
 export const TextareaControlSizes: Record<InputBoxSize, string[]> = {
   [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*',
   ],
 };

package/src/components/or-textarea-v3/types.ts

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