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

package/src/components/or-date-time-picker/OrDateTimePicker.vue

@@ -221,7 +221,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import padStart from 'lodash/padStart';
 import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
 import { OrFloating } from '../or-floating';
@@ -350,7 +350,7 @@ export default defineComponent({
     inputHours: {
       get: function (): string {
         if (!this.modelValue) return '';
-        return _.padStart('' + this.modelValue.getHours(), 2, '0');
+        return padStart('' + this.modelValue.getHours(), 2, '0');
       },
       set: function (val: string): void {
         let hours = +val;
@@ -369,7 +369,7 @@ export default defineComponent({
     inputMinutes: {
       get: function (): string {
         if (!this.modelValue) return '';
-        return _.padStart('' + this.modelValue.getMinutes(), 2, '0');
+        return padStart('' + this.modelValue.getMinutes(), 2, '0');
       },
       set: function (val: string): void {
         let minutes = +val;
@@ -390,15 +390,15 @@ export default defineComponent({
     },
     dateValue(): string {
       if (!this.modelValue) return '';
-      const year = _.padStart('' + this.modelValue.getFullYear(), 4, '0');
-      const month = _.padStart('' + (this.modelValue.getMonth() + 1), 2, '0');
-      const day = _.padStart('' + this.modelValue.getDate(), 2, '0');
+      const year = padStart('' + this.modelValue.getFullYear(), 4, '0');
+      const month = padStart('' + (this.modelValue.getMonth() + 1), 2, '0');
+      const day = padStart('' + this.modelValue.getDate(), 2, '0');
       return `${year}-${month}-${day}`;
     },
     timeValue(): string {
       if (!this.modelValue) return '';
-      const hours = _.padStart('' + this.modelValue.getHours(), 2, '0');
-      const minutes = _.padStart('' + this.modelValue.getMinutes(), 2, '0');
+      const hours = padStart('' + this.modelValue.getHours(), 2, '0');
+      const minutes = padStart('' + this.modelValue.getMinutes(), 2, '0');
       return `${hours}:${minutes}`;
     },
     isInactive(): boolean {

package/src/components/or-date-time-picker/partials/OrDateTimePickerCalendarItem.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import _ from 'lodash';
+import padStart from 'lodash/padStart';
 import { defineComponent, PropType } from 'vue-demi';
 import { OrDateTimePickerItemTypes } from '../constants';
 
@@ -49,9 +49,9 @@ export default defineComponent({
         case OrDateTimePickerItemTypes.day:
           return '' + this.value?.getDate();
         case OrDateTimePickerItemTypes.hours:
-          return _.padStart('' + this.value?.getHours(), 2, '0');
+          return padStart('' + this.value?.getHours(), 2, '0');
         case OrDateTimePickerItemTypes.minutes:
-          return _.padStart('' + this.value?.getMinutes(), 2, '0');
+          return padStart('' + this.value?.getMinutes(), 2, '0');
         default:
           throw new Error('Unknown type');
       }

package/src/components/or-hint/OrHint.vue

@@ -8,9 +8,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
 
-// lodash
-import _ from 'lodash';
-
 export default defineComponent({
   name: 'OrHint',
 
@@ -19,8 +16,6 @@ export default defineComponent({
       type: String as PropType<string>,
       default: '',
       required: true,
-
-      validator: _.isString,
     },
   },
 });

package/src/components/or-icon/OrIcon.vue

@@ -29,7 +29,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue-demi';
-import _ from 'lodash';
 
 import { OrIconColors, OrIconType } from './constants';
 import { OrTooltipContent } from '../or-tooltip';
@@ -113,7 +112,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;
     },
   },
   methods: {

package/src/components/or-label/OrLabel.vue

@@ -16,7 +16,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
-import _ from 'lodash';
 
 /**
  * TODO: Using "v-bind=$attrs" on label might not work for things like "aria-label"
@@ -47,7 +46,10 @@ 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-list/OrList.vue

@@ -90,8 +90,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import { v4 as uuidv4 } from 'uuid';
+import Sortable, { SortableEvent, SortableOptions } from 'sortablejs';
+import { OrLabel } from '../or-label';
+import { OrButtonV2 as OrButton, OrIconButton } from '../or-button-v2';
+import { OrIcon } from '../or-icon';
+import { OrError } from '../or-error';
 
-// interfaces
 export interface Item {
   vforkey?: string | undefined;
   [key: string]: any;
@@ -104,19 +111,6 @@ function getItemWithUUID(data: Record<string, any>): Item {
   };
 }
 
-import _ from 'lodash';
-
-import { v4 as uuidv4 } from 'uuid';
-
-// components
-import { OrLabel } from '../or-label';
-import { OrButtonV2 as OrButton, OrIconButton } from '../or-button-v2';
-import { OrIcon } from '../or-icon';
-import { OrError } from '../or-error';
-
-// sortable
-import Sortable, { SortableEvent, SortableOptions } from 'sortablejs';
-
 export default defineComponent({
   name: 'OrList',
   components: {
@@ -134,62 +128,53 @@ export default defineComponent({
     modelValue: {
       type: Array as PropType<Item[]>,
       required: true,
-      validator: _.isArray,
     },
     label: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     buttonLabel: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     itemProps: {
       type: Object as PropType<Record<string, any>>,
       default: () => ({}),
       required: false,
-      validator: _.isObject,
     },
     handle: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
     canAdd: {
       type: Boolean as PropType<boolean>,
       default: true,
       required: false,
-      validator: _.isBoolean,
     },
     canDelete: {
       type: Boolean as PropType<boolean>,
       default: true,
       required: false,
-      validator: _.isBoolean,
     },
     canDrag: {
       type: Boolean as PropType<boolean>,
       default: true,
       required: false,
-      validator: _.isBoolean,
     },
   },
   emits: ['update:modelValue', 'item-before-add', 'item-added', 'item-before-delete', 'item-deleted', 'item-before-move', 'item-move'],
   data(props) {
     return {
       sortableInstance: null as Sortable | null,
-      items: _.cloneDeep(props.modelValue).map(getItemWithUUID),
+      items: cloneDeep(props.modelValue).map(getItemWithUUID),
     };
   },
   computed: {
@@ -209,8 +194,8 @@ export default defineComponent({
   },
   watch: {
     modelValue(newModelValue) {
-      if (_.isEqual(newModelValue, this.items)) return;
-      this.items = _.cloneDeep(newModelValue).map(getItemWithUUID);
+      if (isEqual(newModelValue, this.items)) return;
+      this.items = cloneDeep(newModelValue).map(getItemWithUUID);
     },
     items: {
       handler(newItems) {
@@ -265,7 +250,7 @@ export default defineComponent({
     onUpdate({ oldIndex, newIndex }: SortableEvent): void {
       if (this.isDisabled) return;
       this.$emit('item-before-move', this.items);
-      const result = _.cloneDeep(this.items);
+      const result = cloneDeep(this.items);
       result.splice(newIndex as number, 0, result.splice(oldIndex as number, 1)[0]);
       this.$emit('item-move', result);
       this.items = result;

package/src/components/or-list-of-inputs/OrListOfInputs.vue

@@ -73,7 +73,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
-import _ from 'lodash';
 
 import { OrList } from '../or-list';
 import { OrInput } from '../or-input';
@@ -97,43 +96,36 @@ export default defineComponent({
       type: Array as PropType<Record<string, any>[]>,
       default: () => [],
       required: true,
-      validator: _.isArray,
     },
     buttonLabel: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     label: {
       type: String as PropType<string>,
       default: '',
       required: false,
-      validator: _.isString,
     },
     inputProps: {
       type: Object as PropType<Record<string, any>>,
       default: () => ({ value: '' }),
       required: false,
-      validator: _.isObject,
     },
     canDrag: {
       type: Boolean as PropType<boolean>,
       default: true,
       required: false,
-      validator: _.isBoolean,
     },
     canDelete: {
       type: Boolean as PropType<boolean>,
       default: true,
       required: false,
-      validator: _.isBoolean,
     },
     isDisabled: {
       type: Boolean as PropType<boolean>,
       default: false,
       required: false,
-      validator: _.isBoolean,
     },
   },
   emits: ['update:modelValue', 'item-before-add', 'item-added', 'item-before-delete', 'item-deleted'],

package/src/components/or-loader/OrLoader.vue

@@ -34,8 +34,9 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi';
+import { isEmpty } from '../../utils/isEmpty';
 import { LoaderViews } from './constants';
-import _ from 'lodash';
+
 
 export default defineComponent({
   name: 'OrLoader',
@@ -72,10 +73,10 @@ export default defineComponent({
       return this.type === LoaderViews.linear;
     },
     isEmptyLinearDescription(): boolean {
-      return _.isEmpty(this.linearDescription);
+      return isEmpty(this.linearDescription);
     },
     isEmptyLinearTitle(): boolean {
-      return _.isEmpty(this.linearTitle);
+      return isEmpty(this.linearTitle);
     },
   },
 });

package/src/components/or-modal/OrModal.stories.ts

@@ -9,7 +9,6 @@ import { OrCollapse } from '../or-collapse';
 import { OrSelect } from '../or-select';
 import { OrInput } from '../or-input';
 import { getTestOption } from '../or-select/stories.helpers';
-import _ from 'lodash';
 
 export default {
   title: 'Components/OrModal',
@@ -212,5 +211,5 @@ WithLongContent.args = {
       handler: () => {},
     },
   ],
-  options: _.range(10).map(getTestOption),
+  options: Array.from(Array(10).keys()).map(getTestOption),
 };

package/src/components/or-modal/OrModal.vue

@@ -48,7 +48,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, watch, onBeforeUnmount } from 'vue-demi';
-import _ from 'lodash';
 import { OrIconButton } from '../or-button-v2';
 import { OrOverlay } from '../or-overlay';
 import { OrModalSizes } from './constants';
@@ -66,18 +65,15 @@ export default defineComponent({
       type: String,
       required: false,
       default: null,
-      validator: _.isString,
     },
     showClose: {
       type: Boolean,
       default: true,
-      validator: _.isBoolean,
     },
     closeOnClickOutside: {
       type: Boolean,
       required: false,
       default: false,
-      validator: _.isBoolean,
     },
     size: {
       type: String as PropType<keyof typeof OrModalSizes>,
@@ -87,18 +83,15 @@ export default defineComponent({
     isOpen: {
       type: Boolean,
       required: true,
-      validator: _.isBoolean,
     },
     isWithoutOverlay: {
       type: Boolean,
       required: false,
       default: false,
-      validator: _.isBoolean,
     },
     trapFocus: {
       type: Boolean,
       default: true,
-      validator: _.isBoolean,
     },
   },
   emits: ['close'],
@@ -108,7 +101,7 @@ export default defineComponent({
     let trap: UseFocusTrapReturn = useFocusTrap(container, {
       immediate: props.trapFocus,
       fallbackFocus: '.container',
-      allowOutsideClick: true
+      allowOutsideClick: true,
     });
 
     const handleClose = () => emit('close');

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