@onereach/ui-components 12.0.1-beta.4595.0 → 12.0.2-beta.4597.0

package/src/components/or-search-v3/OrSearch.vue

@@ -5,9 +5,9 @@
     v-model="draft"
     :class="rootStyles"
     :type="'search'"
+    :variant="variant"
     :size="size"
     :placeholder="placeholder"
-    :disable-default-styles="disableDefaultStyles"
     @input="$emit('input', $event)"
     @keydown="$emit('keydown', $event)"
     @keyup="$emit('keyup', $event)"
@@ -20,7 +20,7 @@
 import { watchDebounced } from '@vueuse/core';
 import { PropType, computed, defineComponent, reactive, ref, toRef, watch } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
-import { InputBoxSize } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant } from '../or-input-box-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { SearchModelValue } from './types';
 
@@ -42,9 +42,14 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
     },
 
     placeholder: {
@@ -56,11 +61,6 @@ export default defineComponent({
       type: Number,
       default: 500,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -96,6 +96,7 @@ export default defineComponent({
 
     const rootStyles = computed(() => [
       'or-search-v3',
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     // State

package/src/components/or-select-v3/OrSelect.vue

@@ -24,18 +24,18 @@
       :ref="'inputBox'"
       v-dropdown-open="toggle"
       v-dropdown-close="close"
-      :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0'), { 'outline-none': variant === 'embedded' }]"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
+      :tabindex="!disabled ? 0 : null"
     >
       <div
         :id="controlId"
         :ref="'control'"
         :class="controlStyles"
-        :tabindex="!disabled ? 0 : null"
         :disabled="disabled"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
@@ -105,7 +105,7 @@
         :class="dropdownStyles"
         :custom-styles="dropdownStyles"
         :variant="'auto'"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom'"
         :offset="0"
         :full-width="true"
@@ -267,6 +267,7 @@
 </template>
 
 <script lang="ts">
+import { ReferenceElement } from '@floating-ui/dom';
 import { computed, defineComponent, getCurrentInstance, PropType, ref, toRefs, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { searchItemsByLabel } from '../../helpers';
@@ -279,7 +280,7 @@ import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
@@ -346,9 +347,19 @@ export default defineComponent({
       default: () => TagsOverflow.Hidden,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -386,11 +397,6 @@ export default defineComponent({
       default: false,
     },
 
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-
     enableSearch: {
       type: Boolean,
       default: false,
@@ -461,6 +467,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-select-v3',
       ...Select,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const controlStyles = computed(() => [

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -23,7 +23,7 @@
     <OrInputBox
       :ref="'inputBox'"
       :class="['interactivity-select']"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
@@ -139,12 +139,12 @@
 <script lang="ts">
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { PropType, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes, useResponsive } from '../../hooks';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '../../hooks';
 import { exclude, include, toArray } from '../../utils';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { TagColor } from '../or-tag-v3';
@@ -176,6 +176,11 @@ export default defineComponent({
       default: () => [],
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     label: {
       type: String,
       default: undefined,
@@ -216,11 +221,6 @@ export default defineComponent({
       default: false,
     },
 
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-
     overflow: {
       type: String as PropType<`${TagsOverflow}`>,
       default: () => TagsOverflow.Hidden,
@@ -270,10 +270,12 @@ export default defineComponent({
     // Props
     const { modelValue, overflow, placeholder, disabled, readonly, saveOnBlur } = toRefs(props);
     const { isMobile } = useResponsive();
+
     // Styles
     const rootStyles = computed(() => [
       'or-tag-input-v3',
       ...TagInput,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const controlStyles = computed(() => [

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

@@ -21,7 +21,7 @@
     </template>
 
     <OrInputBox
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -87,7 +87,7 @@ import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-d
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-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';
@@ -123,6 +123,11 @@ export default defineComponent({
       default: 'off',
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
       default: () => InputBoxSize.M,
@@ -167,11 +172,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -204,6 +204,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-textarea-v3',
       ...Textarea,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const control = ref<HTMLTextAreaElement>();

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -23,7 +23,7 @@
       :ref="'inputBox'"
       v-dropdown-open="openPopover"
       v-dropdown-close="closePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -48,7 +48,7 @@
         :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -120,6 +120,7 @@
 </template>
 
 <script lang="ts">
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useLocale, useProxyModelValue, useTimeFormat } from '../../hooks';
@@ -129,7 +130,7 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import * as Styles from './styles';
@@ -188,9 +189,19 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -222,11 +233,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -253,6 +259,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-time-picker-v3',
       ...Styles.TimePicker,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const inputBox = ref<InstanceType<typeof OrInputBox>>();

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -23,7 +23,7 @@
       :ref="'inputBox'"
       v-dropdown-open="() => openPopover('from')"
       v-dropdown-close="closePopover"
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+      :variant="variant"
       :size="size"
       :invalid="!!error"
       :readonly="readonly"
@@ -63,7 +63,7 @@
         :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
-        :trigger="inputBoxRoot"
+        :trigger="anchor || inputBoxRoot"
         :placement="'bottom-start'"
         :fallback-placement="'start'"
         @close="reset()"
@@ -159,6 +159,7 @@
 </template>
 
 <script lang="ts">
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useLocale, useProxyModelValue, useResponsive, useTimeFormat } from '../../hooks';
@@ -168,7 +169,7 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import * as Styles from './styles';
@@ -218,9 +219,19 @@ export default defineComponent({
       default: undefined,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
+    },
+
+    anchor: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
     },
 
     label: {
@@ -252,11 +263,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   emits: [
@@ -283,6 +289,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-time-range-picker-v3',
       ...Styles.TimeRangePicker,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const inputBox = ref<InstanceType<typeof OrInputBox>>();