@onereach/ui-components 16.2.0 → 16.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "16.2.0",
+  "version": "16.2.2",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.5.3",
-    "@onereach/styles": "^16.2.0",
+    "@onereach/styles": "^16.2.2",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -180,5 +180,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "193146e520f67ddf3e68b7dd5eb4a6f0b31122c5"
+  "gitHead": "b638e919d134289845bb498c2fc4ebabbf6df897"
 }

package/src/components/or-expansion-panel-v3/styles.ts

@@ -81,16 +81,16 @@ export const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]> =
     'dark:theme-foreground-default-dark',
 
     // Theme (hover)
-    'hover:md:theme-foreground-primary-hover',
-    'dark:hover:md:theme-foreground-primary-hover-dark',
+    'hover:theme-foreground-primary',
+    'dark:hover:theme-foreground-primary-dark',
 
     // Theme (focus)
-    'focus-visible:md:theme-foreground-primary-hover',
-    'dark:focus-visible:md:theme-foreground-primary-hover-dark',
+    'focus-visible:theme-foreground-primary',
+    'dark:focus-visible:theme-foreground-primary-dark',
 
     // Theme (active)
-    'active:theme-foreground-primary-hover',
-    'dark:active:theme-foreground-primary-hover-dark',
+    'active:theme-foreground-primary',
+    'dark:active:theme-foreground-primary-dark',
   ],
 
   'danger': [
@@ -99,12 +99,12 @@ export const ExpansionPanelHeaderColors: Record<ExpansionPanelColor, string[]> =
     'dark:theme-foreground-error-dark',
 
     // Theme (hover)
-    'hover:md:theme-foreground-error-hover',
-    'dark:hover:md:theme-foreground-error-hover-dark',
+    'hover:theme-foreground-error-hover',
+    'dark:hover:theme-foreground-error-hover-dark',
 
     // Theme (focus)
-    'focus-visible:md:theme-foreground-error-hover',
-    'dark:focus-visible:md:theme-foreground-error-hover-dark',
+    'focus-visible:theme-foreground-error-hover',
+    'dark:focus-visible:theme-foreground-error-hover-dark',
 
     // Theme (active)
     'active:theme-foreground-error-hover',

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -12,8 +12,12 @@
     <template v-if="icon">
       <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
     </template>
-
-    <div :class="['truncate', 'w-full']">
+    <div
+      ref="content"
+      :class="['truncate', 'w-full']"
+      @mouseover="tooltip && tooltip.open()"
+      @mouseout="tooltip && tooltip.close()"
+    >
       <slot />
     </div>
 
@@ -26,13 +30,22 @@
         @click.stop="$emit('close')"
       />
     </template>
+    <OrToolip
+      v-if="isToolitpShown"
+      ref="tooltip"
+      :content="tooltipText"
+      :trigger="root"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useIntersectionObserver } from '@vueuse/core';
+
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrTooltipV3 as OrToolip } from '../or-tooltip-v3';
 import { MenuItem } from './styles';
 
 export default defineComponent({
@@ -41,6 +54,7 @@ export default defineComponent({
   components: {
     OrIcon,
     OrIconButton,
+    OrToolip,
   },
 
   props: {
@@ -63,6 +77,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    tooltipText: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: [
@@ -80,6 +99,12 @@ export default defineComponent({
   setup() {
     // Refs
     const root = ref<HTMLElement>();
+    const content = ref<HTMLDivElement>();
+    const tooltip = ref<InstanceType<typeof OrToolip>>();
+    const isRootVisible = ref(false);
+    const { stop } = useIntersectionObserver(root, ([{ isIntersecting }]) => {
+      isRootVisible.value = isIntersecting;
+    });
 
     // Styles
     const rootStyles = computed(() => [
@@ -87,9 +112,22 @@ export default defineComponent({
       ...MenuItem,
     ]);
 
+    // Toolip display logic
+    const isToolitpShown = computed<boolean>(() => {
+      if (isRootVisible.value) {
+        return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;
+      }
+      return false;
+    });
+
     return {
+      content,
       root,
+      tooltip,
       rootStyles,
+      isToolitpShown,
+      isRootVisible,
+      stop,
     };
   },
 });

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

@@ -145,6 +145,7 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :tooltip-text="option.label"
                   :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                   :disabled="option.disabled"
                 >
@@ -169,6 +170,7 @@
                   v-for="(option, i) in group"
                   :key="i"
                   :class="dropdownItemStyles"
+                  :tooltip-text="option.label"
                   :selected="proxyModelValue === option.value"
                   :disabled="option.disabled"
                   @click.stop="selectOption(option.value)"
@@ -190,6 +192,7 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :tooltip-text="option.label"
                 :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 :disabled="option.disabled"
                 @click.stop="!option.disabled && toggleOption(option.value)"
@@ -219,6 +222,7 @@
                 :key="i"
                 :class="dropdownItemStyles"
                 :selected="proxyModelValue === option.value"
+                :tooltip-text="option.label"
                 :disabled="option.disabled"
                 @click.stop="selectOption(option.value); close()"
               >

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

@@ -19,21 +19,35 @@
       </template>
 
       <template v-else>
-        <span class="truncate">
-          {{ selectionLabel }}
-        </span>
+        <div class="flex">
+          <div
+            ref="selectionLabelRef"
+            class="truncate w-full"
+            @mouseenter="openTooltip"
+            @mouseleave="tooltipRef && tooltipRef.close()"
+          >
+            {{ selectionLabel }}
+          </div>
+          <OrTooltip
+            v-if="isContentTruncated"
+            ref="tooltipRef"
+            :content="selectionLabel"
+            :trigger="selectionLabelRef"
+          />
+        </div>
       </template>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, toRefs } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRefs, watch, nextTick } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { isEmpty, isEqual } from '../../../../utils';
 import { SelectItem, SelectModelValue } from '../../types';
 import OrSelectControlInput from '../or-select-control-input/OrSelectControlInput.vue';
 import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
+import { OrTooltipV3 as OrTooltip } from '../../../or-tooltip-v3';
 import { SelectSingleControlInput } from './styles';
 
 export default defineComponent({
@@ -42,6 +56,7 @@ export default defineComponent({
   components: {
     OrSelectPlaceholder,
     OrSelectControlInput,
+    OrTooltip,
   },
 
   model: {
@@ -101,6 +116,9 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLDivElement>();
     const searchControl = ref<InstanceType<typeof OrSelectControlInput>>();
+    const selectionLabelRef = ref<HTMLDialogElement>();
+    const tooltipRef = ref<InstanceType<typeof OrTooltip>>();
+    const isContentTruncated = ref(false);
 
     // Props
     const { modelValue, model, options } = toRefs(props);
@@ -120,10 +138,34 @@ export default defineComponent({
       return selection.value?.label;
     });
 
+    /* NOTE: using watch here due to async action.
+    Computed don't work since we need not just to track the data but to analyze UI after the re-render */
+    watch(model, async () => {
+      await nextTick();
+      if (selectionLabelRef.value) {
+        isContentTruncated.value = selectionLabelRef.value.scrollWidth > selectionLabelRef.value.clientWidth;
+      }
+    });
+
+    watch(
+      () => props.isOpen,
+      () => {
+        tooltipRef.value?.close();
+      },
+    );
+
     const focused = computed(() => {
       return searchControl.value?.focused;
     });
 
+    const openTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.open();
+    };
+
+    const closeTooltip = () => {
+      if (tooltipRef.value) tooltipRef.value.close();
+    };
+
     // Styles
     const rootStyles = computed(() => ([
       'or-select-single-control-v3',
@@ -147,6 +189,11 @@ export default defineComponent({
       selectionLabel,
       focus,
       focused,
+      isContentTruncated,
+      selectionLabelRef,
+      tooltipRef,
+      openTooltip,
+      closeTooltip,
     };
   },
 });

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -2,8 +2,8 @@
   <div
     :ref="'root'"
     :class="rootStyles"
-    @mouseover="!externalControl && open()"
-    @mouseout="!externalControl && close()"
+    @mouseover="!hasExternalControl && open()"
+    @mouseout="!hasExternalControl && close()"
   >
     <slot />
 
@@ -13,7 +13,7 @@
         :custom-styles="popoverStyles"
         :is-open="state === 'open'"
         :variant="'popover'"
-        :trigger="root"
+        :trigger="localTrigger"
         :placement="placement"
         :fallback-placement="fallbackPlacement"
         :offset="offset"
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { FlipOptions } from '@floating-ui/dom';
+import { FlipOptions, ReferenceElement } from '@floating-ui/dom';
 import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { usePopoverState } from '../../hooks';
 import { OrPopoverV3 as OrPopover, PopoverOffset, PopoverPlacement } from '../or-popover-v3';
@@ -75,10 +75,16 @@ export default defineComponent({
       default: 250,
     },
 
+    // Left for backward compatibility since `trigger` prop covers similar tasks in a more neat way
     externalControl: {
       type: Boolean,
       default: false,
     },
+
+    trigger: {
+      type: Object as PropType<ReferenceElement>,
+      default: undefined,
+    },
   },
 
   emits: [
@@ -99,9 +105,22 @@ export default defineComponent({
   ],
 
   setup(props, context) {
+    if (props.externalControl) {
+      console.warn('Property externalControl is deprecated for OrTooltipV3. Use trigger prop to pass the ref to external control.');
+    }
     // Refs
     const root = ref<HTMLElement>();
 
+    // Computed trigger based on availability of trigger passed from outside
+    const localTrigger = computed<ReferenceElement | undefined>(() => {
+      return props.trigger ?? root.value;
+    });
+
+    // Used instead of `externalControl`
+    const hasExternalControl = computed<boolean>(() => {
+      return props.trigger !== undefined || props.externalControl;
+    });
+
     // Styles
     const rootStyles = computed(() => [
       'or-tooltip-v3',
@@ -124,6 +143,8 @@ export default defineComponent({
 
     return {
       root,
+      localTrigger,
+      hasExternalControl,
       rootStyles,
       popoverStyles,
       bodyStyles,