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

package/src/components/or-progress/OrProgress.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import round from 'lodash/round';
 import { defineComponent, PropType } from 'vue-demi';
 import { OrProgressColors, OrProgressTypes } from './constants';
 
@@ -80,7 +80,6 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 1,
-      validator: (value?: any) => _.isNumber(value) && value != 0,
     },
     value: {
       type: Number,
@@ -91,13 +90,11 @@ export default defineComponent({
       type: Number,
       required: false,
       default: null,
-      validator: (value?: any) => _.isNumber(value) && value >= 0 && value <= 1,
     },
     precision: {
       type: Number,
       required: false,
       default: 2,
-      validator: (value?: any) => _.isNumber(value) && value >= -1,
     },
     type: {
       type: String as PropType<OrProgressTypes>,
@@ -134,7 +131,7 @@ export default defineComponent({
       return this.value ?? (this.progress ?? 0) * this.maxValue;
     },
     percent(): string {
-      return _.round(this.localProgress * 100, this.precision) + '%';
+      return round(this.localProgress * 100, this.precision) + '%';
     },
     isLinearType(): boolean {
       return this.type === OrProgressTypes.linear;
@@ -232,21 +229,21 @@ $list-of-colors: (primary, success, warning, error);
   color: $c-neutral-5;
 
   &.is-linear {
-    width: 100%;
     display: flex;
     flex-direction: column;
+    width: 100%;
     min-width: px-to-rem(160);
     max-width: px-to-rem(295);
   }
 
   .or-progress-header {
-    margin-bottom: px-to-rem(6);
     display: flex;
     flex-direction: row;
+    margin-bottom: px-to-rem(6);
 
     .label {
-      color: $c-neutral-6;
       font-weight: bold;
+      color: $c-neutral-6;
     }
 
     .percent {
@@ -255,13 +252,13 @@ $list-of-colors: (primary, success, warning, error);
   }
 
   .or-progress-linear {
-    height: $s-1;
-    border-radius: 1px;
-    background-color: $c-neutral-2;
     position: relative;
     display: block;
     width: 100%;
+    height: $s-1;
     overflow: hidden;
+    background-color: $c-neutral-2;
+    border-radius: 1px;
     transition-timing-function: ease;
     transition-duration: .3s;
     transition-property: height,opacity;
@@ -271,8 +268,8 @@ $list-of-colors: (primary, success, warning, error);
     .or-progress-bar {
       position: absolute;
       top: 0;
-      left: 0;
       bottom: 0;
+      left: 0;
       width: 100%;
       height: auto;
     }
@@ -282,9 +279,9 @@ $list-of-colors: (primary, success, warning, error);
 
       &::after {
         max-width: px-to-rem(112);
+        content: '';
         background-color: $c-neutral-5;
         border-radius: $s-1;
-        content: '';
       }
     }
 
@@ -329,22 +326,22 @@ $list-of-colors: (primary, success, warning, error);
 
       &,
       .half-circle {
-        width: 100%;
-        height: 100%;
         position: absolute;
         top: 0;
         left: 0;
+        width: 100%;
+        height: 100%;
       }
 
       .half-circle {
+        clip: rect(0, px-to-rem(12), px-to-rem(24), 0);
         border-style: solid;
         border-width: $s-1;
         border-radius: 50%;
-        clip: rect(0, px-to-rem(12), px-to-rem(24), 0);
 
         &.left-side {
-          transform: rotate(180deg);
           transition: visibility .2s linear .2s, transform .2s linear .2s;
+          transform: rotate(180deg);
         }
 
         &.right-side {

package/src/components/or-progress-v3/OrProgress.vue

@@ -98,7 +98,7 @@
 
 <script lang="ts">
 import { useElementBounding } from '@vueuse/core';
-import _ from 'lodash';
+import round from 'lodash/round';
 import { computed, defineComponent, PropType, ref, useSlots } from 'vue-demi';
 import { useResponsive } from '../../hooks';
 import { ProgressColor, ProgressType } from './props';
@@ -112,7 +112,6 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 1,
-      validator: (value?: any) => _.isNumber(value) && value != 0,
     },
     value: {
       type: Number,
@@ -123,13 +122,11 @@ export default defineComponent({
       type: Number,
       required: false,
       default: null,
-      validator: (value?: any) => _.isNumber(value) && value >= 0 && value <= 1,
     },
     precision: {
       type: Number,
       required: false,
       default: 2,
-      validator: (value?: any) => _.isNumber(value) && value >= -1,
     },
     type: {
       type: String as PropType<ProgressType>,
@@ -173,7 +170,7 @@ export default defineComponent({
 
     const localValue = computed(() => props.value ?? (props.progress ?? 0) * (props.maxValue ?? 1));
 
-    const percent = computed(() => _.round(localProgress.value * 100, props.precision) + '%');
+    const percent = computed(() => round(localProgress.value * 100, props.precision) + '%');
 
     const isLinearType = computed(() => props.type === ProgressType.Linear);
 

package/src/components/or-radio/OrRadio.vue

@@ -21,15 +21,9 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  inject,
-  computed,
-  PropType,
-  ComponentInternalInstance,
-} from 'vue-demi';
-
-import _ from 'lodash';
+import { defineComponent, inject, computed, PropType, ComponentInternalInstance } from 'vue-demi';
+import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 
 export default defineComponent({
   name: 'OrRadio',
@@ -84,12 +78,12 @@ export default defineComponent({
 
     const isChecked = computed<boolean>(() => {
       if (hasInjection.value) {
-        return _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue'], null), props.value) ||
-          _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue', 'value'], null), props.value);
+        return isEqual(get(radioGroupInstance, ['props', 'modelValue'], null), props.value) ||
+          isEqual(get(radioGroupInstance, ['props', 'modelValue', 'value'], null), props.value);
       }
 
-      return _.isEqual(props.modelValue, props.value) ||
-        _.isEqual(props.modelValue?.value, props.value);
+      return isEqual(props.modelValue, props.value) ||
+        isEqual(props.modelValue?.value, props.value);
     });
 
 
@@ -128,7 +122,9 @@ export default defineComponent({
       ];
     },
     localAttrs(): any {
-      return _.omit(this.$attrs, 'class');
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+      const { class: _, ...rest } = this.$attrs;
+      return rest;
     },
   },
 });

package/src/components/or-select/OrSelect.stories.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import Faker from 'faker';
 import { Story } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
@@ -53,12 +52,12 @@ const Template: Story = (args, { argTypes }) => ({
   },
 });
 
-const BASIC_OPTIONS = _.range(10).map(getTestOption);
+const BASIC_OPTIONS = Array.from(Array(10).keys()).map(getTestOption);
 
 export const Default = Template.bind({});
 Default.args = {
   modelValue: [],
-  options: _.range(10).map(getLongTestOption),
+  options: Array.from(Array(10).keys()).map(getLongTestOption),
 };
 
 export const Disabled = Template.bind({});
@@ -86,7 +85,7 @@ MultipleValuesDisabled.args = {
 export const WithLabelAndError = Template.bind({});
 WithLabelAndError.args = {
   modelValue: [],
-  options: _.range(10).map(getLongTestOption),
+  options: Array.from(Array(10).keys()).map(getLongTestOption),
   placeholder: Faker.commerce.productName(),
   label: Faker.commerce.productName(),
   error: Faker.commerce.productName(),
@@ -146,7 +145,7 @@ const DemoSimpleSearchTemplate: Story = () => ({
   data() {
     return {
       value: '',
-      options: _.range(10).map(getTestOption),
+      options: Array.from(Array(10).keys()).map(getTestOption),
       label: Faker.commerce.productName(),
       searchResult: null,
     };
@@ -189,7 +188,7 @@ const DemoSimpleWithSlotsTemplate: Story = () => ({
   data() {
     return {
       value: '',
-      options: _.range(10).map(getTestOption),
+      options: Array.from(Array(10).keys()).map(getTestOption),
       label: Faker.commerce.productName(),
     };
   },
@@ -215,7 +214,7 @@ const DemoSimpleSearchFunctionTemplate: Story = () => ({
   data() {
     return {
       value: '',
-      options: _.range(10).map(getTestOption),
+      options: Array.from(Array(10).keys()).map(getTestOption),
       label: Faker.commerce.productName(),
     };
   },
@@ -243,7 +242,7 @@ const DemoMultiTemplate: Story = () => ({
   data() {
     return {
       value: [],
-      options: _.range(10).map(getTestOption),
+      options: Array.from(Array(10).keys()).map(getTestOption),
       label: Faker.commerce.productName(),
     };
   },
@@ -314,7 +313,7 @@ const DemoValueNumberTemplate: Story = () => ({
   data() {
     return {
       value: undefined,
-      options: _.range(10).map((e, i) => ({
+      options: Array.from(Array(10).keys()).map((e, i) => ({
         value: i,
         label: Faker.commerce.productName(),
       })),

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 {