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

package/dist/bundled/v3/components/OrRangeSliderV3/OrRangeSlider.js

@@ -1 +1 @@
-export { s as default } from '../OrRangeSliderV3-facf6cc0.js';
+export { s as default } from '../OrRangeSliderV3-f12b32d8.js';

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

@@ -1 +1 @@
-export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-facf6cc0.js';
+export { s as OrRangeSliderV3 } from '../OrRangeSliderV3-f12b32d8.js';

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

@@ -1,2 +1,2 @@
-import '../OrSliderV3-b957c173.js';
-export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, o as RangeSliderLabelMarkOrientations, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-facf6cc0.js';
+import '../OrSliderV3-84949774.js';
+export { R as RangeSlider, j as RangeSliderBreakpointMark, k as RangeSliderBreakpointMarkColors, l as RangeSliderLabel, n as RangeSliderLabelMark, o as RangeSliderLabelMarkOrientations, m as RangeSliderLabelOrientations, d as RangeSliderOffset, e as RangeSliderOffsetOrientations, a as RangeSliderOrientations, b as RangeSliderRail, c as RangeSliderRailOrientations, h as RangeSliderThumb, i as RangeSliderThumbColors, f as RangeSliderTrack, g as RangeSliderTrackColors } from '../OrRangeSliderV3-f12b32d8.js';

package/dist/bundled/v3/components/{OrRangeSliderV3-facf6cc0.js → OrRangeSliderV3-f12b32d8.js}

@@ -1,7 +1,7 @@
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
 import { k as useElementBounding, b as useElementHover, l as useDraggable, m as clamp } from './OrAutocompleteV3-d460e38d.js';
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { S as SliderOrientation, a as SliderColor } from './OrSliderV3-b957c173.js';
+import { S as SliderOrientation, a as SliderColor } from './OrSliderV3-84949774.js';
 import { s as script$1 } from './OrTooltipV3-948be30a.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 
@@ -290,8 +290,7 @@ var script = defineComponent({
     const filler = ref();
     const thumbFrom = ref();
     const thumbTo = ref();
-    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-range-slider-thumb-v3', ...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...RangeSliderBreakpointMark, ...RangeSliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...RangeSliderLabelMark, ...RangeSliderLabelMarkOrientations[props.orientation]]);

package/dist/bundled/v3/components/OrSliderV3/OrSlider.js

@@ -1 +1 @@
-export { s as default } from '../OrSliderV3-b957c173.js';
+export { s as default } from '../OrSliderV3-84949774.js';

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

@@ -1 +1 @@
-export { s as OrSliderV3, a as SliderColor, S as SliderOrientation } from '../OrSliderV3-b957c173.js';
+export { s as OrSliderV3, a as SliderColor, S as SliderOrientation } from '../OrSliderV3-84949774.js';

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

@@ -1 +1 @@
-export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, o as SliderLabelMarkOrientations, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-b957c173.js';
+export { b as Slider, j as SliderBreakpointMark, k as SliderBreakpointMarkColors, l as SliderLabel, n as SliderLabelMark, o as SliderLabelMarkOrientations, m as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-84949774.js';

package/dist/bundled/v3/components/{OrSliderV3-b957c173.js → OrSliderV3-84949774.js}

@@ -268,8 +268,7 @@ var script = defineComponent({
       }
     });
     const thumb = ref();
-    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color], 'touch-none' // Required for proper work on mobile
-    ]);
+    const thumbStyles = computed(() => ['or-slider-thumb-v3', ...SliderThumb, ...SliderThumbColors[props.color]]);
     const breakpointMarkStyles = computed(() => [...SliderBreakpointMark, ...SliderBreakpointMarkColors[props.color]]);
     const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
     const labelMarkStyles = computed(() => [...SliderLabelMark, ...SliderLabelMarkOrientations[props.orientation]]);

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

@@ -81,7 +81,7 @@ export { s as OrRadio } from './OrRadio-5df370ed.js';
 export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRadioV3 } from './OrRadioV3-10dcf2cf.js';
-export { s as OrRangeSliderV3 } from './OrRangeSliderV3-facf6cc0.js';
+export { s as OrRangeSliderV3 } from './OrRangeSliderV3-f12b32d8.js';
 export { s as OrRatingV3, R as RatingVariant } from './OrRatingV3-e3260da7.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanelV3-be9935ce.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-b9db8633.js';
@@ -96,7 +96,7 @@ export { s as OrSidebarV3, S as SidebarPlacement } from './OrSidebarV3-da7f8e7c.
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeleton-0fc94226.js';
 export { a as OrSkeletonCircleV3, b as OrSkeletonRectV3, s as OrSkeletonTextV3 } from './OrSkeletonV3-77393e23.js';
 export { default as OrSlider } from './OrSlider/OrSlider.js';
-export { s as OrSliderV3, a as SliderColor, S as SliderOrientation } from './OrSliderV3-b957c173.js';
+export { s as OrSliderV3, a as SliderColor, S as SliderOrientation } from './OrSliderV3-84949774.js';
 export { s as OrSortingV3 } from './OrSortingV3-6cef8218.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatusV3-58c791a2.js';
 export { default as OrStepper } from './OrStepper/OrStepper.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';