@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v3/OrStepper.vue_vue_type_script_lang-33639493.js

@@ -1,377 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import './components/OrButtonV2/OrButton.js';
-import { s as script$6 } from './OrButton.vue_vue_type_script_lang-0fb2b270.js';
-import { resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, normalizeProps, guardReactiveProps } from 'vue';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
-
-var script$5 = defineComponent({
-  name: 'OrStepperButtonOptions',
-  components: {
-    OrButton: script$6
-  },
-  props: {
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    hasConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    hasSkipButton: {
-      type: Boolean,
-      default: true
-    },
-    hasPreviousButton: {
-      type: Boolean,
-      default: true
-    },
-    completeIndex: {
-      type: Number,
-      default: 0
-    }
-  }
-});
-
-const _hoisted_1$4 = {
-  class: "text-right pt-md"
-};
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_button = resolveComponent("or-button");
-  return openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "buttons", {
-    option: _ctx.option,
-    onConfirm: () => _ctx.$emit('confirm'),
-    onPrevious: () => _ctx.$emit('previous'),
-    onSkip: () => _ctx.$emit('skip')
-  }, () => [_ctx.completeIndex !== 0 && _ctx.hasPreviousButton ? (openBlock(), createBlock(_component_or_button, {
-    key: 0,
-    content: "previous",
-    size: "small",
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('previous'))
-  })) : createCommentVNode("v-if", true), _ctx.hasSkipButton ? (openBlock(), createBlock(_component_or_button, {
-    key: 1,
-    content: "skip",
-    type: "outline",
-    size: "small",
-    onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('skip'))
-  })) : createCommentVNode("v-if", true), _ctx.hasConfirmButton ? (openBlock(), createBlock(_component_or_button, {
-    key: 2,
-    content: "confirm",
-    size: "small",
-    onClick: _cache[2] || (_cache[2] = $event => _ctx.$emit('confirm'))
-  })) : createCommentVNode("v-if", true)])]);
-}
-
-script$5.render = render$4;
-script$5.__file = "src/components/or-stepper/partials/OrStepperButtonOptions.vue";
-
-var script$4 = defineComponent({
-  name: 'StatusIcon',
-  props: {
-    statusType: {
-      type: String,
-      default: 'active'
-    }
-  },
-  computed: {
-    materialIcon() {
-      switch (this.statusType) {
-        case 'failed':
-          return 'close';
-        case 'done':
-          return 'done';
-        default:
-          return '';
-      }
-    }
-  }
-});
-
-const _hoisted_1$3 = {
-  class: "material-icons icon"
-};
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(['indication', _ctx.statusType])
-  }, [createElementVNode("span", _hoisted_1$3, toDisplayString(_ctx.materialIcon), 1 /* TEXT */)], 2 /* CLASS */);
-}
-
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-aea090a0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-aea090a0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.indication[data-v-aea090a0] {\n  display: flex;\n  width: var(--s-4);\n  height: var(--s-4);\n  border-radius: var(--s-3);\n}\n.indication.ready[data-v-aea090a0] {\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-primary);\n}\n.indication.active[data-v-aea090a0] {\n  background-color: var(--c-neutral-0);\n  border: 3px solid var(--c-primary);\n}\n.indication.selected[data-v-aea090a0] {\n  background-color: var(--c-primary);\n}\n.indication.done[data-v-aea090a0] {\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-primary);\n}\n.indication.done .icon[data-v-aea090a0] {\n  padding: 1px;\n  font-size: var(--fs-0);\n  color: var(--c-primary);\n}\n.indication.failed[data-v-aea090a0] {\n  background-color: var(--c-error);\n}\n.indication.failed .icon[data-v-aea090a0] {\n  padding: var(--s-1);\n  font-size: var(--fs-0);\n  color: var(--c-neutral-0);\n}";
-styleInject(css_248z);
-
-script$4.render = render$3;
-script$4.__scopeId = "data-v-aea090a0";
-script$4.__file = "src/components/or-stepper/partials/StatusIcon.vue";
-
-var script$3 = defineComponent({
-  name: 'OrStepperTitle',
-  components: {
-    StatusIcon: script$4
-  },
-  props: {
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    completeIndex: {
-      type: Number,
-      default: 0
-    },
-    type: {
-      type: String,
-      default: 'vertical'
-    },
-    index: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    statusType() {
-      if (this.index === this.completeIndex) return 'active';
-      if (this.index < this.completeIndex) return 'done';
-      return 'ready';
-    }
-  }
-});
-
-const _hoisted_1$2 = {
-  key: 0,
-  class: "flex-1 border-t-1 border-dashed border-y-primary bottom-8 group-first:hidden"
-};
-const _hoisted_2$1 = {
-  key: 1,
-  class: "flex-1 mr-2xs border-t-1 border-dashed border-y-primary group-last:hidden"
-};
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_status_icon = resolveComponent("status-icon");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(['flex w-full gap-xs items-center', {
-      'justify-around group': _ctx.type === 'horizontal'
-    }])
-  }, [_ctx.type === 'horizontal' ? (openBlock(), createElementBlock("hr", _hoisted_1$2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(_component_status_icon, {
-    "status-type": _ctx.statusType
-  }, null, 8 /* PROPS */, ["status-type"])]), createElementVNode("div", null, [renderSlot(_ctx.$slots, "label", {}, () => [createElementVNode("p", {
-    class: normalizeClass({
-      'font-bold': _ctx.completeIndex === _ctx.index
-    })
-  }, toDisplayString(_ctx.option.label), 3 /* TEXT, CLASS */)])]), _ctx.type === 'horizontal' ? (openBlock(), createElementBlock("hr", _hoisted_2$1)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-script$3.render = render$2;
-script$3.__file = "src/components/or-stepper/partials/OrStepperTitle.vue";
-
-var script$2 = defineComponent({
-  name: 'OrStepperOptionVertical',
-  components: {
-    OrStepperButtonOptions: script$5,
-    OrStepperTitle: script$3
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'vertical'
-    },
-    completeIndex: {
-      type: Number,
-      default: 0
-    },
-    index: {
-      type: Number,
-      default: 0
-    },
-    hasSkipButton: {
-      type: Boolean,
-      default: true
-    },
-    hasConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    hasPreviousButton: {
-      type: Boolean,
-      default: true
-    },
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    }
-  }
-});
-
-const _hoisted_1$1 = {
-  class: "group"
-};
-const _hoisted_2 = {
-  class: "min-h-[32px] w-full border-l-1 border-dashed border-x-primary ml-sm group-last:border-none"
-};
-const _hoisted_3 = {
-  key: 0,
-  class: "px-sm"
-};
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_stepper_title = resolveComponent("or-stepper-title");
-  const _component_or_stepper_button_options = resolveComponent("or-stepper-button-options");
-  return openBlock(), createElementBlock("li", _hoisted_1$1, [createVNode(_component_or_stepper_title, {
-    option: _ctx.option,
-    "complete-index": _ctx.completeIndex,
-    index: _ctx.index
-  }, {
-    icon: withCtx(scope => [renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(scope)))]),
-    label: withCtx(scope => [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(scope)))]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["option", "complete-index", "index"]), createElementVNode("div", _hoisted_2, [_ctx.completeIndex === _ctx.index ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, `content-${_ctx.index}`, {
-    option: _ctx.option
-  }), !_ctx.isReadOnly ? (openBlock(), createBlock(_component_or_stepper_button_options, {
-    key: 0,
-    option: _ctx.option,
-    "has-confirm-button": _ctx.hasConfirmButton,
-    "has-skip-button": _ctx.hasSkipButton,
-    "has-previous-button": _ctx.hasPreviousButton,
-    "complete-index": _ctx.completeIndex,
-    onConfirm: _cache[0] || (_cache[0] = $event => _ctx.$emit('confirm')),
-    onPrevious: _cache[1] || (_cache[1] = $event => _ctx.$emit('previous')),
-    onSkip: _cache[2] || (_cache[2] = $event => _ctx.$emit('skip'))
-  }, {
-    buttons: withCtx(scope => [renderSlot(_ctx.$slots, "buttons", normalizeProps(guardReactiveProps(scope)))]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["option", "has-confirm-button", "has-skip-button", "has-previous-button", "complete-index"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)])]);
-}
-
-script$2.render = render$1;
-script$2.__file = "src/components/or-stepper/partials/OrStepperOptionVertical.vue";
-
-var script$1 = defineComponent({
-  name: 'OrStepperOptionHorizontal',
-  components: {
-    OrStepperButtonOptions: script$5
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'vertical'
-    },
-    completeIndex: {
-      type: Number,
-      default: 0
-    },
-    index: {
-      type: Number,
-      default: 0
-    },
-    hasSkipButton: {
-      type: Boolean,
-      default: true
-    },
-    hasConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    hasPreviousButton: {
-      type: Boolean,
-      default: true
-    },
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    }
-  }
-});
-
-const _hoisted_1 = {
-  key: 0,
-  class: "py-md px-lg w-full"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_or_stepper_button_options = resolveComponent("or-stepper-button-options");
-  return _ctx.completeIndex === _ctx.index ? (openBlock(), createElementBlock("li", _hoisted_1, [renderSlot(_ctx.$slots, `content-${_ctx.index}`, {
-    option: _ctx.option
-  }), !_ctx.isReadOnly ? (openBlock(), createBlock(_component_or_stepper_button_options, {
-    key: 0,
-    option: _ctx.option,
-    "has-confirm-button": _ctx.hasConfirmButton,
-    "has-skip-button": _ctx.hasSkipButton,
-    "has-previous-button": _ctx.hasPreviousButton,
-    "complete-index": _ctx.completeIndex,
-    onConfirm: _cache[0] || (_cache[0] = $event => _ctx.$emit('confirm')),
-    onPrevious: _cache[1] || (_cache[1] = $event => _ctx.$emit('previous')),
-    onSkip: _cache[2] || (_cache[2] = $event => _ctx.$emit('skip'))
-  }, null, 8 /* PROPS */, ["option", "has-confirm-button", "has-skip-button", "has-previous-button", "complete-index"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-stepper/partials/OrStepperOptionHorizontal.vue";
-
-var script = defineComponent({
-  name: 'OrStepper',
-  components: {
-    OrStepperOptionVertical: script$2,
-    OrStepperOptionHorizontal: script$1,
-    OrStepperTitle: script$3
-  },
-  props: {
-    isReadOnly: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: 'vertical'
-    },
-    hasConfirmButton: {
-      type: Boolean,
-      default: true
-    },
-    hasSkipButton: {
-      type: Boolean,
-      default: true
-    },
-    hasPreviousButton: {
-      type: Boolean,
-      default: true
-    },
-    options: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['confirm', 'previous', 'skip'],
-  data() {
-    return {
-      completeIndex: 0
-    };
-  },
-  computed: {
-    optionComponent() {
-      return this.type === 'vertical' ? script$2 : script$1;
-    }
-  },
-  methods: {
-    updateCompleteIndex(index) {
-      if (index < 0) return;
-      this.completeIndex = index;
-    },
-    handlePrevious() {
-      this.updateCompleteIndex(this.completeIndex - 1);
-      this.$emit('previous', this.completeIndex);
-    },
-    handleConfirm() {
-      this.updateCompleteIndex(this.completeIndex + 1);
-      this.$emit('confirm', this.completeIndex);
-    },
-    handleSkip() {
-      this.updateCompleteIndex(this.completeIndex + 1);
-      this.$emit('skip', this.completeIndex);
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrSwitch.vue_vue_type_script_lang-3ef06bbd.js

@@ -1,78 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import './components/OrLoader/OrLoader.js';
-import { s as script$1 } from './OrLoader.vue_vue_type_script_lang-a1fed697.js';
-
-var script = defineComponent({
-  name: 'OrSwitch',
-  components: {
-    OrLoader: script$1
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: null,
-      default: null,
-      required: false
-    },
-    value: {
-      type: null,
-      default: null,
-      required: false
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    isArrayModelValue() {
-      return Array.isArray(this.modelValue);
-    },
-    isChecked() {
-      return this.isArrayModelValue ? this.modelValue.some(this.value) || this.modelValue.includes(this.value) : !!this.modelValue;
-    },
-    isInactive() {
-      return this.isLoading || this.isDisabled;
-    },
-    rootClasses() {
-      return ['or-switch', {
-        ['is-checked']: this.isChecked,
-        ['is-disabled']: this.isDisabled,
-        ['is-loading']: this.isLoading
-      }];
-    }
-  },
-  methods: {
-    onChange(_ref) {
-      let {
-        target
-      } = _ref;
-      if (this.isInactive) return;
-      const isChecked = target.checked;
-      if (this.isArrayModelValue) {
-        const newValue = [...this.modelValue];
-        isChecked ? newValue.push(this.value) : newValue.splice(newValue.indexOf(this.value), 1);
-        this.$emit('update:modelValue', newValue);
-      } else {
-        this.$emit('update:modelValue', isChecked);
-      }
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrSwitch.vue_vue_type_script_lang-9e9e15d1.js

@@ -1,91 +0,0 @@
-import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
-import { SwitchRoot, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle } from './components/OrSwitchV3/styles.js';
-import './components/OrLabelV3/OrLabel.js';
-import './components/OrLoaderV3/OrLoader.js';
-import { s as script$1 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { s as script$2 } from './OrLoader.vue_vue_type_script_lang-52edc8f8.js';
-import { LabelVariant } from './components/OrLabelV3/props.js';
-import { useIdAttribute } from './hooks/useIdAttribute.js';
-import { useControlAttributes } from './hooks/useControlAttributes.js';
-import { useProxyModelValue } from './hooks/useProxyModelValue.js';
-
-var script = defineComponent({
-  name: 'OrSwitch',
-  components: {
-    OrLabel: script$1,
-    OrLoader: script$2
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: [Boolean, Array],
-      default: undefined
-    },
-    value: {
-      type: String,
-      default: undefined
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    labelVariant: {
-      type: String,
-      default: LabelVariant.Toggle
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'focus', 'blur'],
-  expose: ['root', 'focus', 'blur'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    const control = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-switch-v3', ...SwitchRoot]);
-    const controlStyles = computed(() => [...SwitchControl, ...SwitchControlHandle]);
-    const loaderStyles = computed(() => [...SwitchLoader, ...SwitchLoaderHandle]);
-    // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes()
-    });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    // Methods
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    return {
-      root,
-      control,
-      rootStyles,
-      controlStyles,
-      loaderStyles,
-      controlAttributes,
-      proxyModelValue,
-      focus,
-      blur
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrTab.vue_vue_type_script_lang-c0fa2c25.js

@@ -1,34 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { Tab } from './components/OrTabV3/styles.js';
-
-var script = defineComponent({
-  name: 'OrTab',
-  props: {
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click', 'focus', 'blur'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-tab-v3', ...Tab]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrTab.vue_vue_type_script_lang-d9ee65b6.js

@@ -1,57 +0,0 @@
-import { defineComponent, unref } from 'vue-demi';
-import { v as v4 } from './v4-cf8987a3.js';
-
-var script = defineComponent({
-  name: 'OrTab',
-  inject: ['tabsInstance'],
-  props: {
-    title: {
-      type: String,
-      default: '',
-      required: true
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  },
-  computed: {
-    _uuid() {
-      return v4();
-    },
-    tabsUnref() {
-      return unref(this.tabsInstance);
-    },
-    index() {
-      return unref(this.tabsInstance).tabs.findIndex(instance => {
-        return this._uuid === instance._uuid;
-      });
-    },
-    isActive() {
-      return this.index === this.tabsUnref.activeIndex;
-    }
-  },
-  watch: {
-    isSelected: {
-      handler(nv) {
-        if (nv) {
-          this.tabsUnref.activeIndex = this.tabsUnref.tabs.findIndex(instance => instance.isSelected);
-        }
-      },
-      immediate: true
-    }
-  },
-  created() {
-    if (this.index === -1) {
-      this.tabsUnref.tabs.push(this);
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrTabHeaderItem.vue_vue_type_script_lang-e1a0b91f.js

@@ -1,60 +0,0 @@
-import { defineComponent, ref, computed, watch, nextTick } from 'vue-demi';
-
-var script = defineComponent({
-  name: 'OrTabHeaderItem',
-  rootClassName: 'or-tab-header-item',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    title: {
-      type: String,
-      default: '',
-      required: false
-    }
-  },
-  emits: ['click', 'select'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
-    const rootRef = ref(null);
-    // computed
-    const rootClasses = computed(() => ['or-tab-header-item', {
-      'is-active': props.isActive,
-      'is-disabled': props.isDisabled
-    }]);
-    // watchers
-    watch(() => props.isActive, nv => {
-      if (nv) {
-        nextTick(() => {
-          emit('select', rootRef.value);
-        });
-      }
-    }, {
-      immediate: true
-    });
-    // methods
-    function onClick() {
-      if (props.isDisabled || props.isActive) return;
-      emit('click');
-    }
-    return {
-      // refs
-      rootRef,
-      // computed
-      rootClasses,
-      // methods
-      onClick
-    };
-  }
-});
-
-export { script as s };