@onereach/ui-components 4.6.0 → 4.6.1-beta.2762.0

package/src/components/or-select/partials/OrSelectContent.stories.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import Faker from 'faker';
 import { Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
@@ -40,8 +39,8 @@ const Template: Story = (args, { argTypes }) => ({
   },
 });
 
-const BASIC_OPTIONS = _.range(10).map(getTestOption);
-const LARGE_OPTIONS = _.range(10).map(getLongTestOption);
+const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
+const LARGE_OPTIONS = Array.from(Array(10).keys()).map(getLongTestOption);
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/or-select/partials/OrSelectInput.stories.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import Faker from 'faker';
 import { Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
@@ -34,8 +33,8 @@ const Template: Story = (args, { argTypes }) => ({
   },
 });
 
-const BASIC_OPTIONS = _.range(10).map(getTestOption);
-const LARGE_OPTIONS = _.range(10).map(getLongTestOption);
+const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
+const LARGE_OPTIONS = Array.from(Array(10).keys()).map(getLongTestOption);
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import { isEmpty } from '../../../utils/isEmpty';
 import { defineComponent } from 'vue-demi';
 
 import { OrIcon } from '../../or-icon';
@@ -79,7 +79,9 @@ export default defineComponent({
     },
 
     isEmptyValue(): boolean {
-      return _.isNumber(this.value) ? false : _.isEmpty(this.value);
+      return typeof this.value === 'number'
+        ? false
+        : isEmpty(this.value);
     },
   },
   methods: {

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

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import keyBy from 'lodash/keyBy';
 import { defineComponent } from 'vue-demi';
 
 import { OrChip } from '../../or-chips';
@@ -47,7 +47,7 @@ export default defineComponent({
   emits: ['delete-value'],
   computed: {
     optionsByKey(): Record<Option['value'], Option> {
-      return _.keyBy(this.options, 'value');
+      return keyBy(this.options, 'value');
     },
 
     states(): Record<string, boolean> {

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

@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { useDraggable } from '@vueuse/core';
-import _ from 'lodash';
 import { defineComponent, PropType, ref } from 'vue-demi';
 import { OrSidebarSide } from './constants';
 
@@ -43,13 +42,11 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 0,
-      validator: (value?: any) => _.isNumber(value) && value >= 0,
     },
     minimumWidth: {
       type: Number,
       required: false,
       default: 350,
-      validator: (value?: any) => _.isNumber(value) && value >= 0,
     },
     /**
      * User may put the component on the right or the left side of a container.
@@ -61,7 +58,6 @@ export default defineComponent({
     side: {
       type: String as PropType<OrSidebarSide>,
       default: OrSidebarSide.right,
-      validator: (value?: any) => _.includes(_.values(OrSidebarSide), value),
     },
   },
 
@@ -133,21 +129,21 @@ $active-border: 1px solid $c-neutral-2;
 $resizing-border: $s-1 solid $c-primary;
 
 .or-sidebar {
+  position: relative;
   display: flex;
   flex-direction: column;
-  background-color: $c-neutral-0;
   flex-shrink: 0;
-  position: relative;
-  padding: 0;
   min-height: 0;
+  padding: 0;
+  background-color: $c-neutral-0;
 
   .or-sidebar-resize {
     position: absolute;
     top: 0;
     bottom: 0;
-    cursor: ew-resize;
     z-index: 1;
     width: 12px;
+    cursor: ew-resize;
   }
 
   &.or-sidebar-right {
@@ -180,8 +176,8 @@ $resizing-border: $s-1 solid $c-primary;
 
   &-main {
     display: flex;
-    flex-grow: 1;
     flex-direction: column;
+    flex-grow: 1;
     min-height: 0;
   }
 
@@ -191,8 +187,8 @@ $resizing-border: $s-1 solid $c-primary;
 
   &-content {
     flex-grow: 1;
-    overflow: auto;
     padding: $s-4;
+    overflow: auto;
   }
 
   &-footer {

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

@@ -57,7 +57,6 @@
 
 <script lang="ts">
 import { useDraggable, useElementBounding } from '@vueuse/core';
-import _ from 'lodash';
 import { computed, defineComponent, PropType, ref, useSlots, watch } from 'vue-demi';
 import { OrSidebarCollapseButton } from './partials';
 import { OrSidebarPlacement } from './props';
@@ -74,17 +73,14 @@ export default defineComponent({
     width: {
       type: Number,
       default: 320,
-      validator: (value?: any) => _.isNumber(value) && value >= 0,
     },
     minimumWidth: {
       type: Number,
       default: 256,
-      validator: (value?: any) => _.isNumber(value) && value >= 0,
     },
     maximumWidth: {
       type: Number,
       default: 384,
-      validator: (value?: any) => _.isNumber(value) && value >= 0,
     },
     /**
      * User may put the component on the right or the left side of a container.
@@ -96,7 +92,6 @@ export default defineComponent({
     side: {
       type: String as PropType<OrSidebarPlacement>,
       default: OrSidebarPlacement.right,
-      validator: (value?: any) => _.includes(_.values(OrSidebarPlacement), value),
     },
     draggable: {
       type: Boolean,

package/src/components/or-sidebar-v3/partials/or-sidebar-collapse-button/OrSidebarCollapseButton.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrSidebarPlacement } from '../../props';
@@ -42,7 +41,6 @@ export default defineComponent({
     side: {
       type: String as PropType<OrSidebarPlacement>,
       default: OrSidebarPlacement.right,
-      validator: (value?: any) => _.includes(_.values(OrSidebarPlacement), value),
     },
   },
 

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

@@ -9,7 +9,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
-import _ from 'lodash';
 
 export default defineComponent({
   name: 'OrSkeletonCircle',
@@ -33,7 +32,7 @@ export default defineComponent({
     },
     rootStyle(): Record<string, string | number> {
       const size = this.radius ?? 40; // 40px - medium OrAvatar
-      const sizeStyle = _.isNumber(size) ? pxToRem(size) : size;
+      const sizeStyle = typeof size === 'number' ? pxToRem(size) : size;
 
       return {
         'width': sizeStyle,

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

@@ -9,7 +9,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
-import _ from 'lodash';
 
 export default defineComponent({
   name: 'OrSkeletonRect',
@@ -41,8 +40,8 @@ export default defineComponent({
       const height = this.height ?? 36; // 36px - default OrInput height
 
       return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
-        'height': _.isNumber(height) ? pxToRem(height) : height,
+        'width': typeof width === 'number' ? pxToRem(width) : width,
+        'height': typeof height === 'number' ? pxToRem(height) : height,
       };
     },
   },

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

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
-import _ from 'lodash';
+import range from 'lodash/range';
 import { OrSkeletonTextSizes } from '../constants';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
 
@@ -55,11 +55,11 @@ export default defineComponent({
       const width = this.width ?? '100%';
 
       return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
+        'width': typeof width === 'number' ? pxToRem(width) : width,
       };
     },
     lineKeys(): number[] {
-      return _.range(this.linesCount);
+      return range(this.linesCount);
     },
   },
 });

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

@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { computed, defineComponent, ref } from 'vue-demi';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
 import { SkeletonAnimated, SkeletonCircle, SkeletonRoot } from '../styles';
@@ -48,7 +47,9 @@ export default defineComponent({
 
     const rootStyle = computed(() => {
       const size = props.size ?? 40; // 40px - medium OrAvatar
-      const sizeStyle = _.isNumber(size) ? pxToRem(size) : size;
+      const sizeStyle = typeof size === 'number'
+        ? pxToRem(size)
+        : size;
 
       return {
         'width': sizeStyle,

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

@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
 import { computed, defineComponent, ref } from 'vue-demi';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
 import { SkeletonAnimated, SkeletonRect, SkeletonRoot } from '../styles';
@@ -57,8 +56,8 @@ export default defineComponent({
       const height = props.height ?? 36; // 36px - default OrInput height
 
       return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
-        'height': _.isNumber(height) ? pxToRem(height) : height,
+        'width': typeof width === 'number' ? pxToRem(width) : width,
+        'height': typeof height === 'number' ? pxToRem(height) : height,
       };
     });
 

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

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import range from 'lodash/range';
 import { computed, defineComponent, ref } from 'vue-demi';
 import { pxToRem } from '../../../utils/functions/px-to-rem';
 import { SkeletonAnimated, SkeletonRoot, SkeletonText, SkeletonTextContainerRoot } from '../styles';
@@ -72,7 +72,7 @@ export default defineComponent({
       const width = props.width ?? '100%';
 
       return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
+        'width': typeof width === 'number' ? pxToRem(width) : width,
       };
     });
 
@@ -89,13 +89,13 @@ export default defineComponent({
       const margin = ((props.lineHeight ?? 24) - height) / 2;
 
       return {
-        'height': _.isNumber(height) ? pxToRem(height) : height,
-        'margin': `${_.isNumber(margin) ? pxToRem(margin) : margin} 0`,
+        'height': typeof height === 'number' ? pxToRem(height) : height,
+        'margin': `${typeof margin === 'number' ? pxToRem(margin) : margin} 0`,
       };
     });
 
     // State
-    const lineKeys = computed(() => _.range(props.linesCount));
+    const lineKeys = computed(() => range(props.linesCount));
 
     return {
       root,

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

@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
-import _ from 'lodash';
 import { OrLoader } from '../or-loader';
 
 export default defineComponent({
@@ -58,29 +57,26 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     isLoading: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
   },
   emits: ['update:modelValue'],
   computed: {
     isArrayModelValue(): boolean {
-      return _.isArray(this.modelValue);
+      return Array.isArray(this.modelValue);
     },
     isChecked(): boolean {
       return this.isArrayModelValue
-        ? _.some(this.modelValue, this.value) || _.includes(this.modelValue, this.value)
+        ? this.modelValue.some(this.value) || this.modelValue.includes(this.value)
         : !!this.modelValue;
     },
     isInactive(): boolean {

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-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,
     },
   },
 });