@onereach/ui-components 8.26.2-beta.4184.0 → 9.0.0

package/src/components/or-range-slider-v3/OrRangeSlider.vue

@@ -1,16 +1,16 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :disabled="disabled"
   >
     <div
-      ref="rail"
+      :ref="'rail'"
       :class="railStyles"
       :disabled="disabled"
     >
       <div
-        ref="offset"
+        :ref="'offset'"
         :class="offsetStyles"
         :style="offsetComputedStyles"
         :disabled="disabled"
@@ -25,7 +25,7 @@
         v-bind="tooltip"
       >
         <div
-          ref="thumbFrom"
+          :ref="'thumbFrom'"
           :class="thumbStyles"
           :disabled="disabled"
         />
@@ -41,7 +41,7 @@
       </OrTooltip>
 
       <div
-        ref="track"
+        :ref="'track'"
         :class="trackStyles"
         :style="trackComputedStyles"
         :disabled="disabled"
@@ -56,7 +56,7 @@
         v-bind="tooltip"
       >
         <div
-          ref="thumbTo"
+          :ref="'thumbTo'"
           :class="thumbStyles"
           :disabled="disabled"
         />
@@ -72,7 +72,7 @@
       </OrTooltip>
 
       <div
-        ref="filler"
+        :ref="'filler'"
         :class="['grow', ...offsetStyles]"
         :disabled="disabled"
       />

package/src/components/or-rating-v3/OrRating.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :disabled="disabled"
   >
     <div
       v-for="value of length"
-      ref="stars"
+      :ref="'stars'"
       :key="value"
       :class="starStyles"
       :activated="value <= Math.ceil(proxyModelValue)"

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -1,18 +1,18 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <or-label>
       {{ description }}
     </or-label>
     <div
-      ref="containerRef"
+      :ref="'containerRef'"
       :class="containerStyles"
       @click="handleEditorClick()"
     >
       <div
-        ref="toolbarRef"
+        :ref="'toolbarRef'"
         :class="toolbarContainerStyles"
       >
         <div
@@ -27,7 +27,7 @@
           >
             <or-icon-button
               v-if="item==='heading'"
-              ref="toolbarButtonRef"
+              :ref="'toolbarButtonRef'"
               :selected="isActive[item]"
               :disabled="!isFocused"
               :tooltip="{content: item, placement: 'top'}"
@@ -46,7 +46,7 @@
         </div>
         <or-icon-button
           v-if="countOfNotVisibleTools > 0"
-          ref="moreButtonRef"
+          :ref="'moreButtonRef'"
           :disabled="!isFocused"
           :icon="{icon: 'more_horiz', variant: 'inherit', size: 'm'}"
           class="px-sm"
@@ -56,7 +56,7 @@
       <div :class="['p-sm', { 'h-[calc(100%-32px)] md:h-[calc(100%-36px)]': fullHeight }]">
         <textarea
           v-show="disableMarkdown"
-          ref="textareaRef"
+          :ref="'textareaRef'"
           v-model="sourceValue"
           auto-focus
           :activated="disableMarkdown"
@@ -65,7 +65,7 @@
         />
         <div
           v-show="!disableMarkdown"
-          ref="editorRef"
+          :ref="'editorRef'"
           :class="editorInputStyles"
         />
         <slot name="files" />
@@ -73,7 +73,7 @@
     </div>
     <or-popover
       v-if="moreButtonRef"
-      ref="moreRef"
+      :ref="'moreRef'"
       :trigger="moreButtonRef && moreButtonRef.root"
       placement="top-end"
     >
@@ -90,7 +90,7 @@
     </or-popover>
     <or-menu
       v-if="toolbarButtonRef"
-      ref="menuRef"
+      :ref="'menuRef'"
       :trigger="toolbarButtonRef[getIndexOfHeading] && toolbarButtonRef[getIndexOfHeading].root"
       placement="bottom-start"
       class="bg-on-primary"
@@ -156,42 +156,42 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onBeforeUnmount, onMounted, watch, ComponentPublicInstance, PropType, nextTick } from 'vue-demi';
-import { useFocusTrap, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
-import { onClickOutside, useResizeObserver, useDebounceFn } from '@vueuse/core';
-import { serialize, deserialize } from './utils/markdown';
+import { onClickOutside, useDebounceFn, useResizeObserver } from '@vueuse/core';
+import { UseFocusTrapReturn, useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { ComponentPublicInstance, PropType, computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue-demi';
+import { deserialize, serialize } from './utils/markdown';
 
+import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
+import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrMenuV3 as OrMenu } from '../or-menu-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
-import { OrInputV3 as OrInput } from '../or-input-v3';
-import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 
 import {
   EditorContainer,
-  ToolbarContainer,
+  EditorInput,
   Toolbar,
-  ToolbarButtonFocused,
   ToolbarButton,
-  EditorInput,
+  ToolbarButtonFocused,
+  ToolbarContainer,
 } from './styles';
 
 import { Formats, Tools } from './props';
 
 import { Editor, mergeAttributes } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import Link from '@tiptap/extension-link';
-import Highlight from '@tiptap/extension-highlight';
-import Heading, { Level } from '@tiptap/extension-heading';
-import Placeholder from '@tiptap/extension-placeholder';
-import Paragraph from '@tiptap/extension-paragraph';
+import Blockquote from '@tiptap/extension-blockquote';
 import BulletList from '@tiptap/extension-bullet-list';
+import Heading, { Level } from '@tiptap/extension-heading';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
 import OrderedList from '@tiptap/extension-ordered-list';
-import Blockquote from '@tiptap/extension-blockquote';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import Underline from '@tiptap/extension-underline';
+import StarterKit from '@tiptap/starter-kit';
 
 import codemirrorNode from './utils/codemirror/codemirrorNode';
 

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

@@ -1,8 +1,8 @@
 <template>
   <OrInput
-    ref="root"
-    v-model.trim="draftModelValue"
+    :ref="'root'"
     v-bind="controlAttributes"
+    v-model.trim="draftModelValue"
     :class="rootStyles"
     :type="'search'"
     :size="size"

package/src/components/or-segmented-control-v3/OrSegmentedControl.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <OrSegmentedControlItem

package/src/components/or-segmented-control-v3/partials/or-segmented-control-item/OrSegmentedControlItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :selected="selected"
     :disabled="disabled"

package/src/components/or-select/partials/OrSelectMain.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     class="or-select-main"
     :class="{ open: isOpen }"
   >
@@ -76,22 +76,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
+import { defineComponent, ref } from 'vue-demi';
 
-import OrSelectInput from './OrSelectInput.vue';
-import OrSelectContent from './OrSelectContent.vue';
-import { Option, ModelValueArray } from '../types';
+import { OrFloating } from '../../or-floating';
 import {
-  OR_SELECT_VALUE_PROP,
+  OR_SELECT_NO_RESULTS_END_TEXT_PROP,
+  OR_SELECT_NO_RESULTS_START_TEXT_PROP,
+  OR_SELECT_NO_RESULTS_TITLE_PROP,
   OR_SELECT_OPTIONS_PROP,
   OR_SELECT_PLACEHOLDER_PROP,
-  OR_SELECT_NO_RESULTS_TITLE_PROP,
-  OR_SELECT_NO_RESULTS_START_TEXT_PROP,
-  OR_SELECT_NO_RESULTS_END_TEXT_PROP,
   OR_SELECT_UPDATE_SEARCH_TEXT_PROP,
+  OR_SELECT_VALUE_PROP,
 } from '../constants';
-import { OrFloating } from '../../or-floating';
+import { ModelValueArray, Option } from '../types';
+import OrSelectContent from './OrSelectContent.vue';
+import OrSelectInput from './OrSelectInput.vue';
 
 export default defineComponent({
   name: 'OrSelect',

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -19,7 +19,7 @@
     </template>
 
     <OrInputBox
-      ref="inputBox"
+      :ref="'inputBox'"
       v-dropdown-open="toggle"
       v-dropdown-close="close"
       :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
@@ -31,7 +31,7 @@
     >
       <div
         :id="controlId"
-        ref="control"
+        :ref="'control'"
         :class="controlStyles"
         :tabindex="!disabled ? 0 : null"
         :disabled="disabled"
@@ -44,7 +44,7 @@
         >
           <template v-if="multiple">
             <OrSelectMultipleControl
-              ref="multipleControl"
+              :ref="'multipleControl'"
               v-model="searchText"
               :model="proxyModelValue"
               :options="options"
@@ -67,7 +67,7 @@
 
           <template v-else>
             <OrSelectSingleControl
-              ref="singleControl"
+              :ref="'singleControl'"
               v-model="searchText"
               :model="proxyModelValue"
               :options="options"
@@ -99,7 +99,7 @@
       </div>
 
       <OrPopover
-        ref="popover"
+        :ref="'popover'"
         :class="dropdownStyles"
         :custom-styles="dropdownStyles"
         :variant="'auto'"
@@ -111,7 +111,7 @@
       >
         <template v-if="popoverState === 'open' && enableSearch && isMobile">
           <OrInput
-            ref="searchControl"
+            :ref="'searchControl'"
             v-model="searchText"
             :class="searchControlStyles"
             :type="'search'"

package/src/components/or-select-v3/partials/or-select-control-input/OrSelectControlInput.vue

@@ -1,6 +1,6 @@
 <template>
   <input
-    ref="root"
+    :ref="'root'"
     v-model="proxyModelValue"
     :style="controlInlineStyles"
     :class="controlStyles"

package/src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <OrTags
       v-show="!isEmpty || enableSearch"
-      ref="tags"
+      :ref="'tags'"
       :items="selection"
       class="grow"
       :disabled="disabled"
@@ -31,7 +31,7 @@
       >
         <div class="inline-flex w-fit max-w-full">
           <OrSelectControlInput
-            ref="searchControl"
+            :ref="'searchControl'"
             v-model="searchModelValue"
             :placeholder="isEmpty ? placeholder: ''"
             :readonly="readonly"
@@ -55,10 +55,10 @@ import { useProxyModelValue } from '../../../../hooks';
 import { isEqualValue } from '../../../../utils';
 import { OrTagsV3 as OrTags, Tag, TagsOverflow } from '../../../or-tags-v3';
 import { SelectOption, SelectValue } from '../../types';
+import { castToMultipleValue } from '../../utils/castToMultipleValue';
 import { OrSelectControlInput } from '../or-select-control-input';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectMultipleControlRoot } from './styles';
-import { castToMultipleValue } from '../../utils/castToMultipleValue';
 
 export default defineComponent({
   name: 'OrSelectMultipleControl',

package/src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :disabled="disabled"
   >

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <template v-if="isOpen && enableSearch">
       <OrSelectControlInput
-        ref="searchControl"
+        :ref="'searchControl'"
         v-model="searchModelValue"
         :placeholder="isEmpty ? placeholder : selectionLabel"
       />

package/src/components/or-sidebar-v3/OrSidebar.vue

@@ -12,7 +12,7 @@
     @resize="$emit('resize', $event)"
   >
     <div
-      ref="root"
+      :ref="'root'"
       :class="rootStyles"
     >
       <template v-if="$slots.header">

package/src/components/or-skeleton-v3/or-skeleton-circle-v3/OrSkeletonCircle.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :style="rootStyle"
   />

package/src/components/or-skeleton-v3/or-skeleton-rect-v3/OrSkeletonRect.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :style="rootStyle"
   />

package/src/components/or-skeleton-v3/or-skeleton-text-v3/OrSkeletonText.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="containerStyles"
     :style="containerStyle"
   >

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

@@ -1,11 +1,11 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :disabled="disabled"
   >
     <div
-      ref="rail"
+      :ref="'rail'"
       :class="railStyles"
       :disabled="disabled"
     >
@@ -24,7 +24,7 @@
         v-bind="tooltip"
       >
         <div
-          ref="thumb"
+          :ref="'thumb'"
           :class="thumbStyles"
           :disabled="disabled"
         />

package/src/components/or-sorting-v3/OrSorting.vue

@@ -1,32 +1,29 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <OrButton
-      ref="sortButton"
-      variant="link"
-      color="primary"
-      @click="sortMenu.toggle()"
+      :ref="'sortButton'"
+      :variant="'link'"
+      :color="'primary'"
+      @click="sortMenu && sortMenu.toggle()"
     >
-      <span
-        :class="sortLabelStyles"
-      >
+      <span :class="sortLabelStyles">
         {{ sortLabel }}
       </span>
+
       <OrIcon
         v-if="sortMenu"
         :icon="sortMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
       />
     </OrButton>
+
     <OrMenu
-      ref="sortMenu"
+      :ref="'sortMenu'"
       :trigger="sortButton && sortButton.root"
-      placement="bottom-start"
-      :offset="{
-        mainAxis: 8,
-        crossAxis: -8,
-      }"
+      :placement="'bottom-start'"
+      :offset="{ mainAxis: 8, crossAxis: -8 }"
     >
       <OrMenuItem
         v-for="item in options"

package/src/components/or-status-v3/OrStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <div :class="indicatorStyles" />

package/src/components/or-switch-v3/OrSwitch.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <template v-if="!loading">
       <input
-        ref="control"
-        v-model="proxyModelValue"
+        :ref="'control'"
         v-bind="controlAttributes"
+        v-model="proxyModelValue"
         :class="controlStyles"
         :type="'checkbox'"
         :value="value"

package/src/components/or-tab-v3/OrTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :selected="selected"
     :invalid="invalid"

package/src/components/or-tabs-v3/OrTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="containerStyles">
     <div
-      ref="root"
+      :ref="'root'"
       :class="rootStyles"
     >
       <OrTab
@@ -23,7 +23,7 @@
 
       <template v-if="tabs.hidden.length > 0">
         <OrTab
-          ref="overflowTab"
+          :ref="'overflowTab'"
           @click.stop="overflowMenu && overflowMenu.toggle()"
         >
           <OrIcon
@@ -33,7 +33,7 @@
         </OrTab>
 
         <OrMenu
-          ref="overflowMenu"
+          :ref="'overflowMenu'"
           :trigger="overflowTabRoot"
         >
           <OrMenuItem

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -19,7 +19,7 @@
     </template>
 
     <OrInputBox
-      ref="inputBox"
+      :ref="'inputBox'"
       :class="['interactivity-select']"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :invalid="!!error"
@@ -30,7 +30,7 @@
       @focus="activate"
     >
       <OrTags
-        ref="tags"
+        :ref="'tags'"
         :class="['grow']"
         :items="tagsItems"
         :disabled="disabled"
@@ -52,9 +52,9 @@
         >
           <div class="inline-flex w-fit max-w-full">
             <input
-              ref="control"
-              v-model.trim="draftModelValue"
+              :ref="'control'"
               v-bind="controlAttributes"
+              v-model.trim="draftModelValue"
               :class="controlStyles"
               :style="controlInlineStyles"
               :type="'text'"

package/src/components/or-tag-v3/OrTag.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
     :tabindex="!disabled && variant === 'button' ? 0 : null"
     :disabled="disabled"

package/src/components/or-tags-v3/OrTags.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <div
       v-if="localItems.length > 0"
-      ref="container"
+      :ref="'container'"
       :class="containerStyles"
     >
       <OrTag
@@ -31,7 +31,7 @@
 
     <template v-if="overflow === 'hidden' && overflowItems.length > 0">
       <OrButton
-        ref="overflowButton"
+        :ref="'overflowButton'"
         :class="overflowButtonStyles"
         :type="'button'"
         :variant="'link'"
@@ -43,7 +43,7 @@
       </OrButton>
 
       <OrPopover
-        ref="overflowPopover"
+        :ref="'overflowPopover'"
         :class="popoverStyles"
         :custom-styles="popoverStyles"
         :trigger="overflowButtonRoot"

package/src/components/or-text-v3/OrText.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="root"
+    :ref="'root'"
     :class="rootStyles"
   >
     <div :class="mainTextStyles">