@onereach/ui-components 3.1.0-beta.2483.0 → 3.1.0-beta.2496.0

package/dist/bundled/v3/OrTextbox.vue_vue_type_script_lang-5657d588.js

@@ -1,354 +0,0 @@
-import { defineComponent, ref, computed, getCurrentInstance } from 'vue-demi';
-import { pxToRem } from './utils/functions/px-to-rem.js';
-import { setStyle, requestAF, getCS, reflow, cancelAF } from './utils/functions/dom.js';
-import { TextboxTypes } from './components/OrTextbox/constants.js';
-import _ from 'lodash';
-import './components/OrLabel/OrLabel.js';
-import './components/OrIconButtonV2/OrIconButton.js';
-import './components/OrHint/OrHint.js';
-import './components/OrError/OrError.js';
-import './components/OrCollapse/OrCollapse.js';
-import useToggle from './hooks/useToggle.js';
-import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-95601b40.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-4a3f6358.js';
-import { s as script$3 } from './OrHint.vue_vue_type_script_lang-5d628c6c.js';
-import { s as script$4 } from './OrError.vue_vue_type_script_lang-450321b8.js';
-import { s as script$5 } from './OrCollapse.vue_vue_type_script_lang-5137ca99.js';
-
-var script = defineComponent({
-  name: 'OrTextbox',
-  components: {
-    OrLabel: script$1,
-    OrIconButton: script$2,
-    OrHint: script$3,
-    OrError: script$4,
-    OrCollapse: script$5
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    id: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    placeholder: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    type: {
-      type: String,
-      default: TextboxTypes.text,
-      required: false,
-      validator: _.isString
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    error: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    hint: {
-      type: String,
-      default: '',
-      required: false,
-      validator: _.isString
-    },
-    minValue: {
-      type: [Number, undefined],
-      default: undefined,
-      required: false,
-      validator: _.isNumber
-    },
-    maxValue: {
-      type: [Number, undefined],
-      default: undefined,
-      required: false,
-      validator: _.isNumber
-    },
-    stepValue: {
-      type: [Number, undefined],
-      default: undefined,
-      required: false,
-      validator: _.isNumber
-    },
-    maxLength: {
-      type: [Number, undefined],
-      default: undefined,
-      required: false,
-      validator: _.isNumber
-    },
-    height: {
-      type: [Number, String, undefined],
-      default: undefined,
-      required: false,
-      validator: value => _.isNumber(value) || _.isString(value) || _.isUndefined(value)
-    },
-    maxWidth: {
-      type: [Number, String, undefined],
-      default: undefined,
-      required: false,
-      validator: value => _.isNumber(value) || _.isString(value) || _.isUndefined(value)
-    },
-    isSmall: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    },
-    isRequired: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    },
-    isReadonly: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false,
-      required: false,
-      validator: _.isBoolean
-    }
-  },
-  emits: ['focus', 'blur', 'update:modelValue', 'input', 'clear'],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    console.warn('OrTextbox is being deprecated, consider using OrTextboxV2.');
-    const {
-      isActiveToggle,
-      toggle
-    } = useToggle();
-    // refs
-    const isFocused = ref(false);
-    const reqAF = ref(null);
-    const inputRef = ref(null);
-    const localValue = computed(() => {
-      if (props.minValue !== undefined && +props.modelValue < props.minValue) {
-        return props.minValue.toString();
-      }
-      if (props.maxValue !== undefined && +props.modelValue > props.maxValue) {
-        return props.maxValue.toString();
-      }
-      if (props.maxLength && props.modelValue.length > props.maxLength) {
-        return props.modelValue.slice(0, -(props.modelValue.length - props.maxLength));
-      }
-      return props.modelValue;
-    });
-    const localType = computed(() => isActiveToggle.value ? TextboxTypes.text : props.type);
-    const localId = computed(() => {
-      var _a;
-      return props.id || `input-${(_a = getCurrentInstance()) === null || _a === void 0 ? void 0 : _a.uid}`;
-    });
-    const hasValue = computed(() => !!localValue.value.length);
-    const counterString = computed(() => props.maxLength && props.maxLength > 0 ? `${localValue.value.length} / ${props.maxLength}` : '');
-    const isInactive = computed(() => props.isDisabled || props.isReadonly);
-    const isPasswordType = computed(() => props.type === TextboxTypes.password);
-    const isTextareaType = computed(() => props.type === TextboxTypes.textarea);
-    const isSearchType = computed(() => props.type === TextboxTypes.search);
-    const isShowError = computed(() => !!props.error && props.isInvalid);
-    const isShowInfo = computed(() => isShowError.value || !!props.hint || !!props.maxLength);
-    const isShowHint = computed(() => !!props.hint && !isShowError.value);
-    const currentButtonIcon = computed(() => {
-      if (isPasswordType.value) {
-        return isActiveToggle.value ? 'visibility' : 'visibility_off';
-      }
-      if (isSearchType.value) {
-        return hasValue.value ? 'close' : 'search';
-      }
-      return '';
-    });
-    const rootClasses = computed(() => ['or-textbox', {
-      'is-show-info': isShowInfo.value,
-      'is-small': props.isSmall,
-      'has-counter': !!props.maxLength,
-      'has-label': !!props.label || !!slots['label-default']
-    }]);
-    const inputClasses = computed(() => ({
-      'or-textbox--input': !isTextareaType.value,
-      'or-textbox--input-textarea': isTextareaType.value,
-      'is-disabled': props.isDisabled,
-      'is-readonly': props.isReadonly,
-      'is-focused': isFocused.value,
-      'is-required': props.isRequired,
-      'has-error': props.isInvalid
-    }));
-    function onClickButton() {
-      // pw logic
-      if (isPasswordType.value) return toggle();
-      // search type logic
-      if (isSearchType.value && localValue.value.length) return clearable();
-    }
-    function calcTextareaHeight() {
-      var _a;
-      if (isTextareaType.value && inputRef.value) {
-        setStyle(inputRef.value, 'height', 0);
-        setStyle(inputRef.value, 'height', pxToRem((_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.scrollHeight));
-      }
-    }
-    function onInput(event) {
-      if (isInactive.value) return;
-      if (isTextareaType.value) calcTextareaHeight();
-      emit('update:modelValue', event.target.value);
-      emit('input', event.target.value);
-    }
-    function onFocus(event) {
-      var _a;
-      isFocused.value = true;
-      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
-      emit('focus', event);
-    }
-    function onBlur(event) {
-      var _a;
-      isFocused.value = false;
-      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.blur();
-      emit('blur', event);
-    }
-    function clearable() {
-      var _a;
-      emit('update:modelValue', '');
-      emit('clear');
-      (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    return {
-      // refs
-      inputRef,
-      reqAF,
-      // computed
-      rootClasses,
-      inputClasses,
-      localValue,
-      localType,
-      localId,
-      hasValue,
-      counterString,
-      isShowError,
-      isShowInfo,
-      isShowHint,
-      isInactive,
-      isTextareaType,
-      isSearchType,
-      isPasswordType,
-      currentButtonIcon,
-      // methods
-      onClickButton,
-      onInput,
-      onFocus,
-      onBlur
-    };
-  },
-  computed: {
-    maxWidthStyle() {
-      if (!this.maxWidth) return {};
-      const permittedUnits = ['px', '%', 'em', 'rem', 'vw'];
-      if (_.isString(this.maxWidth) && this.maxWidth !== '') {
-        const unit = this.maxWidth.replace(/[^a-z,%]/gi, '');
-        const isIncludedUnit = permittedUnits.includes(unit);
-        if (!isIncludedUnit && typeof this.maxWidth !== 'number') {
-          console.warn('The max-width unit doesn\'t include in the permitted unit list', permittedUnits);
-        }
-        return isIncludedUnit ? {
-          maxWidth: this.maxWidth
-        } : {
-          maxWidth: pxToRem(parseInt(this.maxWidth))
-        };
-      }
-      return _.isNumber(this.maxWidth) && this.maxWidth > 0 ? {
-        maxWidth: pxToRem(this.maxWidth)
-      } : {};
-    },
-    heightStyle() {
-      if (!this.height) return {};
-      const permittedUnits = ['px', 'em', 'rem', 'vh'];
-      if (_.isString(this.height) && this.height !== '') {
-        const unit = this.height.replace(/[^a-z]/gi, '');
-        const isIncludedUnit = permittedUnits.includes(unit);
-        if (!isIncludedUnit && typeof this.height !== 'number') {
-          console.warn('The height unit doesn\'t include in the permitted unit list', permittedUnits);
-        }
-        return isIncludedUnit ? {
-          height: this.height
-        } : {
-          height: pxToRem(parseInt(this.height))
-        };
-      }
-      return _.isNumber(this.height) && this.height > 0 ? {
-        height: pxToRem(this.height)
-      } : {};
-    },
-    rootStyle() {
-      return {
-        ...this.maxWidthStyle
-      };
-    },
-    inputStyle() {
-      return {
-        ...this.heightStyle
-      };
-    }
-  },
-  methods: {
-    focus() {
-      var _a;
-      (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
-    },
-    beforeEnter(el) {
-      setStyle(el, 'opacity', 0);
-    },
-    enter(el) {
-      const {
-        scrollHeight,
-        parentElement
-      } = el;
-      this.reqAF = requestAF(() => {
-        const pt = parseFloat(getCS(parentElement).paddingTop);
-        const pb = parseFloat(getCS(parentElement).paddingBottom);
-        const height = scrollHeight + pt + pb;
-        if (parentElement) {
-          reflow(parentElement);
-          setStyle(parentElement, 'height', pxToRem(height));
-        }
-        setStyle(el, 'opacity', 1);
-      });
-    },
-    leave(el) {
-      this.reqAF = requestAF(() => {
-        el.style.opacity = '0';
-      });
-    },
-    cancelRequestAF() {
-      cancelAF(this.reqAF);
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrToastContainer.vue_vue_type_script_lang-089b5e9b.js

@@ -1,147 +0,0 @@
-import { useToggle } from '@vueuse/core';
-import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
-import useQueue from './components/OrToastV3/composable/useQueue.js';
-import useToastEventBus from './components/OrToastV3/composable/useToastEventBus.js';
-import script$2 from './components/OrToastV3/OrToast.js';
-import { P as PositionsX, a as PositionsY, T as TransitionType } from './props-7be029c7.js';
-import { ToastContainer, ToastContainerPositions } from './components/OrToastV3/styles.js';
-import './components/OrTeleportV3/OrTeleport.js';
-import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
-
-var script = defineComponent({
-  name: 'OrToastContainer',
-  components: {
-    OrTeleport: script$1,
-    OrToast: script$2
-  },
-  props: {
-    includeHeaderHeight: {
-      type: Boolean,
-      default: true
-    },
-    position: {
-      type: Object,
-      default: {
-        positionX: PositionsX.Right,
-        positionY: PositionsY.Bottom
-      }
-    },
-    transition: {
-      type: String,
-      default: TransitionType.Slide
-    }
-  },
-  setup(props) {
-    const {
-      on,
-      off
-    } = useToastEventBus();
-    const {
-      queue: queueRef,
-      addItem,
-      removeItem,
-      clearAll,
-      getItem
-    } = useQueue();
-    const [isActive, toggle] = useToggle(false);
-    const classes = computed(() => {
-      var _a;
-      return ['or-toast-container-v3', ...ToastContainer, ...ToastContainerPositions[`${props.position.positionX}-${props.position.positionY}`], {
-        'position--top--with-header': ((_a = props.position) === null || _a === void 0 ? void 0 : _a.positionY) === PositionsY.Top && props.includeHeaderHeight
-      }];
-    });
-    const transitionName = computed(() => {
-      var _a;
-      return `or-toast--position-${(_a = props.position) === null || _a === void 0 ? void 0 : _a.positionX} or-toast--transition-${props.transition}`;
-    });
-    // State
-    const queue = computed(() => {
-      return queueRef.value.map(({
-        value
-      }) => value);
-    });
-    // Methods
-    function createToast(toastConfiguration) {
-      const caller = () => {
-        var _a;
-        addItem(toastConfiguration);
-        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
-      };
-      if (!isActive.value) {
-        // before create toast we need change isActive props, to render or-teleport,
-        // in other case first item will not be animated
-        toggle(true);
-        nextTick(caller);
-      } else {
-        caller();
-      }
-    }
-    function toastUpdate(toast) {
-      const toastItem = getItem(item => {
-        return item.hash === toast.hash;
-      });
-      if (toastItem) toastItem.value = toast;
-    }
-    function toastRemove(toast) {
-      removeItem(item => {
-        var _a, _b, _c;
-        if (item.hash === toast.hash) {
-          (_b = (_a = item.toastBehaviour) === null || _a === void 0 ? void 0 : _a.onToastClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-          (_c = item.timer) === null || _c === void 0 ? void 0 : _c.stop();
-          return true;
-        }
-        return false;
-      });
-    }
-    function onToastEnter(toast) {
-      var _a;
-      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.pause();
-    }
-    function onToastLeave(toast) {
-      var _a;
-      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.resume();
-    }
-    function onClick(toastBehaviour) {
-      var _a;
-      (_a = toastBehaviour.onToastClick) === null || _a === void 0 ? void 0 : _a.call(toastBehaviour);
-    }
-    function onToastHidden() {
-      toggle(queue.value.length > 0);
-    }
-    // Effects
-    onBeforeMount(() => {
-      on('toastNotify', createToast);
-      on('toastClose', toastRemove);
-      on('toastUpdate', toastUpdate);
-      on('toastCloseAll', clearAll);
-    });
-    onBeforeUnmount(() => {
-      off('toastNotify', createToast);
-      off('toastClose', toastRemove);
-      off('toastUpdate', toastUpdate);
-      off('toastCloseAll', clearAll);
-    });
-    return {
-      on,
-      off,
-      classes,
-      transitionName,
-      isActive,
-      toggle,
-      addItem,
-      removeItem,
-      clearAll,
-      getItem,
-      queue,
-      createToast,
-      toastUpdate,
-      toastRemove,
-      onToastEnter,
-      onToastLeave,
-      onClick,
-      onToastHidden
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrToastContainer.vue_vue_type_script_lang-c5bf66be.js

@@ -1,135 +0,0 @@
-import script$1 from './components/OrToast/OrToast.js';
-import script$2 from './components/OrTeleport/OrTeleport.js';
-import { defineComponent, nextTick } from 'vue-demi';
-import { useToggle } from '@vueuse/core';
-import useQueue from './components/OrToast/composable/useQueue.js';
-import useToastEventBus from './components/OrToast/composable/useToastEventBus.js';
-import { PositionsX, PositionsY, TransitionType } from './components/OrToast/constants.js';
-
-var script = defineComponent({
-  name: 'OrToastContainer',
-  components: {
-    OrToast: script$1,
-    OrTeleport: script$2
-  },
-  props: {
-    includeHeaderHeight: {
-      type: Boolean,
-      default: true
-    },
-    position: {
-      type: Object,
-      default: () => ({
-        positionX: PositionsX.right,
-        positionY: PositionsY.bottom
-      })
-    },
-    transition: {
-      type: String,
-      default: TransitionType.slide
-    }
-  },
-  setup() {
-    const {
-      on,
-      off
-    } = useToastEventBus();
-    const {
-      queue,
-      addItem,
-      removeItem,
-      clearAll,
-      getItem
-    } = useQueue();
-    const [isActive, toggle] = useToggle(false);
-    return {
-      on,
-      off,
-      isActive,
-      toggle,
-      queue,
-      addItem,
-      removeItem,
-      clearAll,
-      getItem
-    };
-  },
-  computed: {
-    getQueue() {
-      return this.queue.map(i => i.value);
-    },
-    classes() {
-      var _a, _b, _c;
-      return [`position--${(_a = this.position) === null || _a === void 0 ? void 0 : _a.positionX}`, `position--${(_b = this.position) === null || _b === void 0 ? void 0 : _b.positionY}`, {
-        'position--top--with-header': ((_c = this.position) === null || _c === void 0 ? void 0 : _c.positionY) === PositionsY.top && this.includeHeaderHeight
-      }];
-    },
-    transitionName() {
-      var _a;
-      return `or-toast--position-${(_a = this.position) === null || _a === void 0 ? void 0 : _a.positionX} or-toast--transition-${this.transition}`;
-    }
-  },
-  beforeMount() {
-    this.on('toastNotify', this.createToast);
-    this.on('toastClose', this.toastRemove);
-    this.on('toastUpdate', this.toastUpdate);
-    this.on('toastCloseAll', this.clearAll);
-  },
-  beforeDestroy() {
-    this.off('toastNotify', this.createToast);
-    this.off('toastClose', this.toastRemove);
-    this.off('toastUpdate', this.toastUpdate);
-    this.off('toastCloseAll', this.clearAll);
-  },
-  methods: {
-    createToast(toastConfiguration) {
-      const caller = () => {
-        var _a;
-        this.addItem(toastConfiguration);
-        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(this.toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
-      };
-      if (!this.isActive) {
-        // before create toast we need change isActive props, to render or-teleport,
-        // in other case first item will not be animated
-        this.toggle(true);
-        nextTick(caller);
-      } else {
-        caller();
-      }
-    },
-    toastUpdate(toast) {
-      const toastItem = this.getItem(item => {
-        return item.hash === toast.hash;
-      });
-      if (toastItem) toastItem.value = toast;
-    },
-    toastRemove(toast) {
-      this.removeItem(item => {
-        var _a, _b, _c;
-        if (item.hash === toast.hash) {
-          (_b = (_a = item.toastBehaviour) === null || _a === void 0 ? void 0 : _a.onToastClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-          (_c = item.timer) === null || _c === void 0 ? void 0 : _c.stop();
-          return true;
-        }
-        return false;
-      });
-    },
-    onToastEnter(toast) {
-      var _a;
-      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.pause();
-    },
-    onToastLeave(toast) {
-      var _a;
-      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.resume();
-    },
-    onClick(toastBehaviour) {
-      var _a;
-      (_a = toastBehaviour.onToastClick) === null || _a === void 0 ? void 0 : _a.call(toastBehaviour);
-    },
-    onToastHidden() {
-      this.toggle(this.queue.length > 0);
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrTooltip.vue_vue_type_script_lang-703eaacb.js

@@ -1,72 +0,0 @@
-import { useDebounceFn, useElementHover } from '@vueuse/core';
-import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { TooltipRoot, TooltipBody, TooltipBodyPlacements } from './components/OrTooltipV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-a9419b58.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-
-var script = defineComponent({
-  name: 'OrTooltip',
-  components: {
-    OrPopover: script$1
-  },
-  props: {
-    text: {
-      type: String,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    }
-  },
-  emits: ['update:state'],
-  expose: ['root', 'open', 'close'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const popover = ref();
-    const popoverRoot = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    // Styles
-    const rootStyles = computed(() => ['or-tooltip-v3', ...TooltipRoot]);
-    const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
-    // Methods
-    const open = useDebounceFn(() => {
-      if (hover.value) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          popoverInstance.open();
-        }
-      }
-    }, 250);
-    const close = useDebounceFn(() => {
-      if (!hover.value) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          popoverInstance.close();
-        }
-      }
-    }, 250);
-    // Effects
-    // #region Hover
-    const hover = useElementHover(root);
-    watch(hover, value => {
-      value ? open() : close();
-    });
-    // #endregion
-    return {
-      root,
-      popover,
-      popoverRoot,
-      rootStyles,
-      bodyStyles,
-      open,
-      close
-    };
-  }
-});
-
-export { script as s };