@onereach/ui-components 4.6.1-beta.2771.0 → 4.6.1

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

@@ -11,8 +11,6 @@
 <script lang="ts">
 import { defineComponent, PropType, unref } from 'vue-demi';
 import { v4 as uuidv4 } from 'uuid';
-// lodash
-import _ from 'lodash';
 
 export default defineComponent({
   name: 'OrTab',
@@ -24,21 +22,18 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '',
       required: true,
-      validator: _.isString,
     },
 
     isSelected: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
 
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
   },
 

package/src/components/or-tab-header-item/OrTabHeaderItem.vue

@@ -14,17 +14,7 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  computed,
-  watch,
-  ref,
-  nextTick,
-  PropType,
-} from 'vue-demi';
-
-// lodash
-import _ from 'lodash';
+import { defineComponent, computed, watch, ref, nextTick, PropType } from 'vue-demi';
 
 export default defineComponent({
   name: 'OrTabHeaderItem',
@@ -36,24 +26,18 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-
-      validator: _.isBoolean,
     },
 
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-
-      validator: _.isBoolean,
     },
 
     title: {
       type: String as PropType<string>,
       default: '',
       required: false,
-
-      validator: _.isString,
     },
   },
 

package/src/components/or-textbox/OrTextbox.vue

@@ -142,13 +142,7 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  computed,
-  getCurrentInstance,
-  PropType,
-} from 'vue-demi';
+import { defineComponent, ref, computed, getCurrentInstance, PropType } from 'vue-demi';
 import { useToggle } from '../../hooks';
 import { pxToRem } from '../../utils/functions/px-to-rem';
 import {
@@ -159,7 +153,6 @@ import {
   setStyle,
 } from '../../utils/functions/dom';
 import { TextboxTypes } from './constants';
-import _ from 'lodash';
 import { OrLabel } from '../or-label';
 import { OrIconButton } from '../or-button-v2';
 import { OrHint } from '../or-hint';
@@ -185,111 +178,91 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     id: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     placeholder: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     type: {
       type: String as PropType<TextboxTypes>,
       default: TextboxTypes.text,
       required: false,
-      validator: _.isString,
     },
     label: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     error: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     hint: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     minValue: {
       type: [Number, undefined] as PropType<number | undefined>,
       default: undefined,
       required: false,
-      validator: _.isNumber,
     },
     maxValue: {
       type: [Number, undefined] as PropType<number | undefined>,
       default: undefined,
       required: false,
-      validator: _.isNumber,
     },
     stepValue: {
       type: [Number, undefined] as PropType<number | undefined>,
       default: undefined,
       required: false,
-      validator: _.isNumber,
     },
     maxLength: {
       type: [Number, undefined] as PropType<number | undefined>,
       default: undefined,
       required: false,
-      validator: _.isNumber,
     },
     height: {
       type: [Number, String, undefined] as PropType<number | string | undefined>,
       default: undefined,
       required: false,
-      validator: (value: number | string | undefined): boolean =>
-        _.isNumber(value) || _.isString(value) || _.isUndefined(value),
     },
     maxWidth: {
       type: [Number, String, undefined] as PropType<number | string | undefined>,
       default: undefined,
       required: false,
-      validator: (value: number | string | undefined): boolean =>
-        _.isNumber(value) || _.isString(value) || _.isUndefined(value),
     },
     isSmall: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     isRequired: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     isReadonly: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     isInvalid: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
   },
   emits: ['focus', 'blur', 'update:modelValue', 'input', 'clear'],
@@ -456,7 +429,7 @@ export default defineComponent({
       if (!this.maxWidth) return {};
       const permittedUnits = ['px', '%', 'em', 'rem', 'vw'];
 
-      if (_.isString(this.maxWidth) && this.maxWidth !== '') {
+      if (typeof this.maxWidth === 'string' && this.maxWidth !== '') {
         const unit = (this.maxWidth as string).replace(/[^a-z,%]/gi, '');
         const isIncludedUnit = permittedUnits.includes(unit);
 
@@ -472,7 +445,7 @@ export default defineComponent({
           : { maxWidth: pxToRem(parseInt(this.maxWidth)) };
       }
 
-      return _.isNumber(this.maxWidth) && this.maxWidth as number > 0
+      return typeof this.maxWidth === 'number' && this.maxWidth as number > 0
         ? { maxWidth: pxToRem(this.maxWidth as number) }
         : {};
     },
@@ -480,7 +453,7 @@ export default defineComponent({
       if (!this.height) return {};
       const permittedUnits = ['px', 'em', 'rem', 'vh'];
 
-      if (_.isString(this.height) && this.height !== '') {
+      if (typeof this.height === 'string' && this.height !== '') {
         const unit = (this.height as string).replace(/[^a-z]/gi, '');
         const isIncludedUnit = permittedUnits.includes(unit);
 
@@ -496,7 +469,7 @@ export default defineComponent({
           : { height: pxToRem(parseInt(this.height)) };
       }
 
-      return _.isNumber(this.height) && this.height as number > 0
+      return typeof this.height === 'number' && this.height as number > 0
         ? { height: pxToRem(this.height as number) }
         : {};
     },

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

@@ -43,7 +43,7 @@
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
-        @close="reset()"
+        @update:state:closed-automatically="reset()"
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Time">
@@ -72,7 +72,7 @@
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click="$emit('update:modelValue', undefined)"
+            @click.stop="$emit('update:modelValue', undefined)"
           />
         </template>
 

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

@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue-demi';
-import _ from 'lodash';
+import isNil from 'lodash/isNil';
 import OrTooltipContent from './or-tooltip-content/OrTooltipContent.vue';
 import { OrFloating, OrFloatingPlacements } from '../or-floating';
 
@@ -123,10 +123,10 @@ export default defineComponent({
 
   methods: {
     show(): void {
-      if (_.isNil(this.isVisible)) this.isShown = true;
+      if (isNil(this.isVisible)) this.isShown = true;
     },
     hide(): void {
-      if (_.isNil(this.isVisible)) this.isShown = false;
+      if (isNil(this.isVisible)) this.isShown = false;
     },
   },
 });

package/src/components/or-tooltip/or-tooltip-content/OrTooltipContent.vue

@@ -13,7 +13,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
-import _ from 'lodash';
 
 export default defineComponent({
   name: 'OrTooltipContent',
@@ -23,13 +22,11 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       required: false,
       default: true,
-      validator: _.isBoolean,
     },
     content: {
       type: String,
       required: false,
       default: '',
-      validator: _.isString,
     },
   },
 });

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

@@ -2,21 +2,18 @@
   <div
     ref="root"
     :class="rootStyles"
-    @mouseenter="open()"
-    @mouseleave="close()"
   >
     <slot />
 
     <template v-if="text">
       <OrPopover
-        :is-open="state === 'open'"
+        ref="popover"
         :variant="'popover'"
         :trigger="root"
         :placement="placement"
         :full-width="false"
         :disable-default-styles="true"
-        @open="open()"
-        @close="close()"
+        @update:state="$emit('update:state', $event)"
       >
         <div :class="bodyStyles">
           {{ text }}
@@ -27,12 +24,11 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
+import { useDebounceFn, useElementHover } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, watch } from 'vue-demi';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipPlacement } from './props';
 import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
-import { refDebounced } from '@vueuse/core';
 
 export default defineComponent({
   name: 'OrTooltip',
@@ -42,39 +38,34 @@ export default defineComponent({
   },
 
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
     text: {
       type: String,
       default: undefined,
     },
 
     placement: {
-      type: String as PropType<TooltipPlacement>,
+      type: String as PropType<`${TooltipPlacement}`>,
       default: TooltipPlacement.Bottom,
     },
   },
 
   emits: [
-    'open',
-    'close',
+    'update:state',
   ],
 
   expose: [
     'root',
-
     'open',
     'close',
-    'toggle',
   ],
 
-  setup(props, context) {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
 
+    const popover = ref<InstanceType<typeof OrPopover>>();
+    const popoverRoot = computed(() => popover.value?.root);
+
     // Styles
     const rootStyles = computed(() => [
       'or-tooltip-v3',
@@ -86,17 +77,44 @@ export default defineComponent({
       ...TooltipBodyPlacements[props.placement],
     ]);
 
-    // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    // Methods
+    const open = useDebounceFn(() => {
+      if (hover.value) {
+        const popoverInstance = popover.value;
+
+        if (popoverInstance) {
+          (popoverInstance.open as () => void)();
+        }
+      }
+    }, 250);
+
+    const close = useDebounceFn(() => {
+      if (!hover.value) {
+        const popoverInstance = popover.value;
+
+        if (popoverInstance) {
+          (popoverInstance.close as () => void)();
+        }
+      }
+    }, 250);
+
+    // Effects
+    // #region Hover
+    const hover = useElementHover(root);
+
+    watch(hover, (value) => {
+      value ? open() : close();
+    });
+    // #endregion
 
     return {
       root,
+      popover,
+      popoverRoot,
       rootStyles,
       bodyStyles,
-      state: refDebounced(state, 250),
       open,
       close,
-      toggle,
     };
   },
 });

package/src/hooks/index.ts

@@ -2,7 +2,6 @@ export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
 export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
-export { usePopoverState } from './usePopoverState';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
 export { useValidationAttributes } from './useValidationAttributes';

package/src/utils/functions/dom.ts

@@ -1,4 +1,5 @@
-import _ from 'lodash';
+import isElement from 'lodash/isElement';
+import get from 'lodash/get';
 
 const WINDOW = typeof window !== 'undefined' ? window : null;
 
@@ -16,9 +17,10 @@ export const requestAF = (
   (WINDOW as any)?.oRequestAnimationFrame ||
   // Fallback, but not a true polyfill
   // Only needed for Opera Mini
-  ((cb: ()=> void) => setTimeout(cb, 16))
+  ((cb: () => void) => setTimeout(cb, 16))
 ).bind(WINDOW);
 
+// eslint-disable-next-line no-unsafe-optional-chaining
 export const cancelAF = (WINDOW?.cancelAnimationFrame || (WINDOW as any)?.mozCancelAnimationFrame).bind(WINDOW);
 
 // Remove a node from DOM
@@ -26,7 +28,7 @@ export const removeNode = (el: HTMLElement): void => { el && el.parentNode && el
 
 // Determine if an HTML element is visible - Faster than CSS check
 export const isVisible = (el: HTMLElement): boolean => {
-  if (!_.isElement(el) || !el.parentNode || !contains(document.body, el)) {
+  if (!isElement(el) || !el.parentNode || !contains(document.body, el)) {
     // Note this can fail for shadow dom elements since they
     // are not a direct descendant of document.body
     return false;
@@ -47,20 +49,20 @@ export const isVisible = (el: HTMLElement): boolean => {
 // Cause/wait-for an element to reflow its content (adjusting its height/width)
 export const reflow = (el: HTMLElement): number | null => {
   // Requesting an elements offsetHeight will trigger a reflow of the element content
-  return _.get(el, ['offsetHeight'], null);
+  return get(el, ['offsetHeight'], null);
 };
 
 // Select all elements matching selector. Returns `[]` if none found
 export const selectAll = (selector: string, root?: HTMLElement | undefined): Element[] =>
-  [...(root && _.isElement(root) ? root : document).querySelectorAll(selector)];
+  [...(root && isElement(root) ? root : document).querySelectorAll(selector)];
 
 // Select a single element, returns `null` if not found
 export const select = (selector: string, root?: HTMLElement | undefined): Element | null =>
-  (root && _.isElement(root) ? root : document).querySelector(selector) || null;
+  (root && isElement(root) ? root : document).querySelector(selector) || null;
 
 // Returns true if the parent element contains the child element
 export const contains = (parent: HTMLElement, child: HTMLElement): boolean =>
-  parent && _.isFunction(parent.contains) ? parent.contains(child) : false;
+  parent && typeof parent.contains === 'function' ? parent.contains(child) : false;
 
 // Get an element given an ID
 export const getById = (id: string): HTMLElement | null =>
@@ -70,7 +72,7 @@ export const getById = (id: string): HTMLElement | null =>
 export const addClass = (el: HTMLElement, className: string): void => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) {
+  if (className && isElement(el) && el.classList) {
     el.classList.add(className);
   }
 };
@@ -79,51 +81,51 @@ export const addClass = (el: HTMLElement, className: string): void => {
 export const removeClass = (el: HTMLElement, className: string): void => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) el.classList.remove(className);
+  if (className && isElement(el) && el.classList) el.classList.remove(className);
 };
 
 // Test if an element has a class
 export const hasClass = (el: HTMLElement, className: string): boolean => {
   // We are checking for `el.classList` existence here since IE 11
   // returns `undefined` for some elements (e.g. SVG elements)
-  if (className && _.isElement(el) && el.classList) return el.classList.contains(className);
+  if (className && isElement(el) && el.classList) return el.classList.contains(className);
 
   return false;
 };
 
 // Set an attribute on an element
 export const setAttr = (el: HTMLElement, attr: string, value: any): void => {
-  if (attr && _.isElement(el)) {
+  if (attr && isElement(el)) {
     el.setAttribute(attr, value);
   }
 };
 
 // Remove an attribute from an element
 export const removeAttr = (el: HTMLElement, attr: string): void => {
-  if (attr && _.isElement(el)) {
+  if (attr && isElement(el)) {
     el.removeAttribute(attr);
   }
 };
 
 // Get an attribute value from an element
 export const getAttr = (el: HTMLElement, attr: string): string | null =>
-  (attr && _.isElement(el) ? el.getAttribute(attr) : null);
+  (attr && isElement(el) ? el.getAttribute(attr) : null);
 
 // Determine if an attribute exists on an element
 // Returns `true` or `false`, or `null` if element not found
 export const hasAttr = (el: HTMLElement, attr: string): boolean | null =>
-  (attr && _.isElement(el) ? el.hasAttribute(attr) : null);
+  (attr && isElement(el) ? el.hasAttribute(attr) : null);
 
 // Set an style property on an element
 export const setStyle = (el: HTMLElement, prop: any, value: any): void => {
-  if (prop && _.isElement(el)) {
+  if (prop && isElement(el)) {
     el.style[prop] = value;
   }
 };
 
 // Remove an style property from an element
 export const removeStyle = (el: HTMLElement, prop: any): void => {
-  if (prop && _.isElement(el)) {
+  if (prop && isElement(el)) {
     el.style[prop] = '';
   }
 };
@@ -131,14 +133,14 @@ export const removeStyle = (el: HTMLElement, prop: any): void => {
 // Get an style property value from an element
 // Returns `null` if not found
 export const getStyle = (el: HTMLElement, prop: any): string | null =>
-  (prop && _.isElement(el) ? el.style[prop] || null : null);
+  (prop && isElement(el) ? el.style[prop] || null : null);
 
 // Return the Bounding Client Rect of an element
-export const getBCR = (el: HTMLElement): DOMRect | null => (_.isElement(el) ? el.getBoundingClientRect() : null);
+export const getBCR = (el: HTMLElement): DOMRect | null => (isElement(el) ? el.getBoundingClientRect() : null);
 
 // Get computed style object for an element
 export const getCS = (el: HTMLElement): CSSStyleDeclaration | Record<string, string> =>
-  _.get(WINDOW, 'getComputedStyle', null) && _.isElement(el)
+  get(WINDOW, 'getComputedStyle', null) && isElement(el)
     ? getComputedStyle(el)
     : {};
 
@@ -149,7 +151,7 @@ export const offset = (el: HTMLElement): { top: number; left: number; } => {
     left: 0,
   };
 
-  if (!_.isElement(el) || el.getClientRects().length === 0) {
+  if (!isElement(el) || el.getClientRects().length === 0) {
     return _offset;
   }
 
@@ -157,8 +159,8 @@ export const offset = (el: HTMLElement): { top: number; left: number; } => {
   if (bcr) {
     const win = el.ownerDocument.defaultView;
 
-    _offset.top = bcr.top + _.get(win, 'pageYOffset', 0);
-    _offset.left = bcr.left + _.get(win, 'pageXOffset', 0);
+    _offset.top = bcr.top + get(win, 'pageYOffset', 0);
+    _offset.left = bcr.left + get(win, 'pageXOffset', 0);
   }
 
   return _offset;
@@ -171,7 +173,7 @@ export const position = (el: HTMLElement): { top: number; left: number; } => {
     left: 0,
   };
 
-  if (!_.isElement(el)) {
+  if (!isElement(el)) {
     return _offset;
   }
 

package/src/utils/isEmpty.ts

@@ -0,0 +1 @@
+export const isEmpty = (val: any) => val == null || !(Object.keys(val) || val).length;

package/dist/bundled/v2/hooks/usePopoverState.d.ts

@@ -1,8 +0,0 @@
-import { Ref, SetupContext } from 'vue-demi';
-export interface PopoverState {
-    state: Ref<'open' | 'closed'>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-export declare function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('open' | 'close' | any)[]>): PopoverState;

package/dist/bundled/v2/hooks/usePopoverState.js

@@ -1,37 +0,0 @@
-import { ref, watch } from 'vue-demi';
-
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
-// TODO: Use `defineEmits` after migration to Vue 3
-function usePopoverState(isOpen, context) {
-  // State
-  const state = ref(isOpen.value ? 'open' : 'closed');
-  watch(isOpen, value => {
-    state.value = value ? 'open' : 'closed';
-  });
-  watch(state, value => {
-    switch (value) {
-      case 'open':
-        return context.emit('open');
-      case 'closed':
-        return context.emit('close');
-    }
-  });
-  // Methods
-  function open() {
-    state.value = 'open';
-  }
-  function close() {
-    state.value = 'closed';
-  }
-  function toggle() {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-  return {
-    state,
-    open,
-    close,
-    toggle
-  };
-}
-
-export { usePopoverState };