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

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -1,7 +1,7 @@
 <template>
   <OrOverlay
-    v-if="state === 'open'"
-    :fullscreen="true"
+    v-if="isActive"
+    fullscreen
   >
     <div
       ref="root"
@@ -17,7 +17,6 @@
 
       <div :class="['grow', 'overflow-y-auto', 'overflow-x-hidden']">
         <slot />
-
         <div
           v-if="confirmationText"
           :class="inputBoxStyles"
@@ -68,8 +67,7 @@
 <script lang="ts">
 import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { ButtonColor, OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
@@ -88,11 +86,6 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
     titleText: {
       type: String,
       required: false,
@@ -101,21 +94,25 @@ export default defineComponent({
 
     confirmButtonText: {
       type: String,
+      required: false,
       default: 'Confirm',
     },
 
     cancelButtonText: {
       type: String,
+      required: false,
       default: 'Cancel',
     },
 
     confirmType: {
       type: String as PropType<ConfirmType>,
+      required: false,
       default: ConfirmType.C,
     },
 
     loading: {
       type: Boolean,
+      required: false,
       default: false,
     },
 
@@ -127,21 +124,31 @@ export default defineComponent({
 
     confirmationText: {
       type: String,
-      default: undefined,
+      required: false,
+      default: null,
     },
 
     textConfirmationLabel: {
       type: String,
-      default: undefined,
+      required: false,
+      default: null,
     },
 
     textConfirmationPlaceholder: {
       type: String,
-      default: undefined,
+      required: false,
+      default: null,
     },
 
     textConfirmationError: {
       type: String,
+      required: false,
+      default: null,
+    },
+
+    isOpen: {
+      type: Boolean,
+      required: false,
       default: undefined,
     },
   },
@@ -154,12 +161,12 @@ export default defineComponent({
 
   expose: [
     'root',
-
+    'isActive',
     'open',
     'close',
   ],
 
-  setup(props, context) {
+  setup(props, { emit }) {
     // Refs
     const root = ref<HTMLElement>();
     const confirmationInput = ref<InstanceType<typeof OrInput>>();
@@ -167,7 +174,7 @@ export default defineComponent({
 
     // State
     const touched = ref(false);
-    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref<string>('');
 
@@ -184,12 +191,25 @@ export default defineComponent({
     );
 
     // Methods
-    function confirm(): void {
-      if (!props.disabled && !isInvalid.value) {
-        context.emit('confirm');
+    function open(): void {
+      isActive.value = true;
+      emit('open');
+    }
+
+    function close(): void {
+      // In case if component opened by isOpen -  only event can be emited, app will catch it and flip reference
+      if (props.isOpen === true) {
+        emit('close');
+      } else {
+        isActive.value = false;
+        emit('close');
       }
     }
 
+    function confirm(): void {
+      if (!props.disabled && !isInvalid.value) emit('confirm');
+    }
+
     function onInputFocus(): void {
       isInputActive.value = true;
     }
@@ -200,15 +220,20 @@ export default defineComponent({
     }
 
     // Events
+    watch(() => props.isOpen, (value) => {
+      // In case if component opened by isOpen - no need to emmit events, we need just sync local state
+      if (value != undefined) {
+        isActive.value = value;
+      }
+    }, { immediate: true });
+
     watch(escape, (val) => {
       if (val) close();
     });
 
-    watch(state, (value) => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
+    watch(isActive, () => {
+      confirmationValue.value = '';
+      touched.value = false;
     });
 
     // types here are used for fixing TS2349
@@ -261,7 +286,7 @@ export default defineComponent({
       isInvalid,
       isConfirmationButtonDisabled,
       touched,
-      state,
+      isActive,
       isInputActive,
       escape,
       rootStyles,

package/src/components/or-date-picker-v3/OrDatePicker.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="Date">
@@ -78,7 +78,7 @@
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click="$emit('update:modelValue', undefined)"
+            @click.stop="$emit('update:modelValue', undefined)"
           />
         </template>
 

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-date-time-picker-v3/OrDateTimePicker.vue

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

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/OrDateTimePickerDateSelect.vue

@@ -23,7 +23,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="dateFilter && !dateFilter(value)"
-        @click="proxyModelValue = value"
+        @click.stop="proxyModelValue = value"
       >
         {{ formatDay(value) }}
       </OrButton>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -5,7 +5,7 @@
   >
     <OrIconButton
       :icon="'chevron_left'"
-      @click="goToPreviousMonth()"
+      @click.stop="goToPreviousMonth()"
     />
 
     <div :class="['layout-row-reverse', 'gap-md']">
@@ -13,7 +13,7 @@
         ref="yearButton"
         :variant="'link'"
         :color="'inherit'"
-        @click="monthMenu.close(); yearMenu.open()"
+        @click.stop="monthMenu.close(); yearMenu.open()"
       >
         {{ formatYear(proxyModelValue) }} <OrIcon :icon="yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
@@ -22,7 +22,7 @@
         ref="monthButton"
         :variant="'link'"
         :color="'inherit'"
-        @click="yearMenu.close(); monthMenu.open()"
+        @click.stop="yearMenu.close(); monthMenu.open()"
       >
         {{ formatMonth(proxyModelValue) }} <OrIcon :icon="monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
@@ -36,7 +36,7 @@
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
           :disabled="yearFilter && !yearFilter(value)"
-          @click="proxyModelValue = value; yearMenu.close()"
+          @click.stop="proxyModelValue = value; yearMenu.close()"
         >
           {{ formatYear(value) }}
         </OrMenuItem>
@@ -51,7 +51,7 @@
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
           :disabled="monthFilter && !monthFilter(value)"
-          @click="proxyModelValue = value; monthMenu.close()"
+          @click.stop="proxyModelValue = value; monthMenu.close()"
         >
           {{ formatMonth(value) }}
         </OrMenuItem>
@@ -60,7 +60,7 @@
 
     <OrIconButton
       :icon="'chevron_right'"
-      @click="goToNextMonth()"
+      @click.stop="goToNextMonth()"
     />
   </div>
 </template>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue

@@ -5,14 +5,14 @@
   >
     <OrButton
       :variant="'outlined'"
-      @click="$emit('apply')"
+      @click.stop="$emit('apply')"
     >
       Done
     </OrButton>
 
     <OrButton
       :variant="'text'"
-      @click="$emit('reset')"
+      @click.stop="$emit('reset')"
     >
       Cancel
     </OrButton>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -11,7 +11,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="hoursFilter && !hoursFilter(value)"
-        @click="proxyModelValue = value"
+        @click.stop="proxyModelValue = value"
       >
         {{ formatHours(value) }}
       </OrButton>
@@ -27,7 +27,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="minutesFilter && !minutesFilter(value)"
-        @click="proxyModelValue = value"
+        @click.stop="proxyModelValue = value"
       >
         {{ formatMinutes(value) }}
       </OrButton>

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