@onereach/ui-components 2.68.0-beta.2053.0 → 2.68.0-beta.2056.0

package/dist/bundled/v2/OrSlider-b0afe7f3.js

@@ -1,373 +0,0 @@
-import { defineComponent, ref } from 'vue-demi';
-import { onClickOutside, useDraggable } from '@vueuse/core';
-import { f as addClass, h as removeClass } from './dom-28f5f62a.js';
-import { O as OrIcon } from './OrIcon-db65d58a.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { c as createInjector } from './browser-82dea9ed.js';
-
-var script = defineComponent({
-  name: 'OrSlider',
-  components: {
-    OrIcon
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: null,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    tabindex: {
-      type: Number,
-      default: 0
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 100
-    },
-    step: {
-      type: Number,
-      default: 10
-    },
-    snapToSteps: {
-      type: Boolean,
-      default: false
-    },
-    showMarker: {
-      type: Boolean,
-      default: false
-    },
-    markerValue: {
-      type: Number,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props) {
-    const slider = ref(null);
-    const isActive = ref(false);
-    onClickOutside(slider, () => {
-      isActive.value = false;
-    });
-    return {
-      slider,
-      initialValue: props.modelValue,
-      isActive,
-      localValue: props.modelValue
-    };
-  },
-  computed: {
-    classes() {
-      return [{
-        'is-disabled': this.disabled
-      }, {
-        'is-active': this.isActive.valueOf()
-      }, {
-        'has-icon': this.hasIcon
-      }, {
-        'has-marker': this.showMarker
-      }];
-    },
-    hasIcon() {
-      return Boolean(this.$slots.icon) || Boolean(this.icon);
-    },
-    fillStyle() {
-      return {
-        transform: 'scaleX(' + this.relativeValue(this.localValue) + ')'
-      };
-    },
-    thumbStyle() {
-      return {
-        left: this.relativeValue(this.localValue) * 100 + '%'
-      };
-    },
-    markerText() {
-      // non-strict check also on undefined
-      return this.markerValue == null ? this.modelValue : this.markerValue;
-    },
-    snapPoints() {
-      const points = [];
-      let point = this.step * Math.ceil(this.moderatedMin / this.step);
-      while (point <= this.moderatedMax) {
-        points.push(point);
-        point += this.step;
-      }
-      return points;
-    },
-    moderatedMin() {
-      return this.max > this.min ? this.min : 0;
-    },
-    moderatedMax() {
-      return this.max > this.min ? this.max : 100;
-    }
-  },
-  watch: {
-    modelValue() {
-      this.setValue(this.modelValue);
-    }
-  },
-  mounted() {
-    useDraggable(this.$refs.thumb, {
-      onStart: (position, event) => this.onDragStart(event),
-      onMove: (position, event) => this.dragUpdate(event),
-      onEnd: this.onDragStop
-    });
-    const value = this.moderateValue(this.localValue ? this.localValue : 0);
-    this.setValue(value);
-  },
-  methods: {
-    focus() {
-      this.$el.focus();
-    },
-    reset() {
-      this.setValue(this.initialValue);
-    },
-    setValueWithSnap(value) {
-      value = this.moderateValue(value);
-      if (this.snapToSteps) {
-        value = this.getNearestSnapPoint(value);
-      }
-      this.setValue(value);
-    },
-    setValue(value) {
-      value = this.moderateValue(value);
-      if (value === this.localValue) {
-        return;
-      }
-      this.localValue = value;
-      this.$emit('update:modelValue', value);
-    },
-    incrementValue() {
-      this.setValueWithSnap(this.localValue + this.step);
-    },
-    decrementValue() {
-      this.setValueWithSnap(this.localValue - this.step);
-    },
-    getTrackOffset() {
-      let el = this.$refs.track;
-      let offset = el.offsetLeft;
-      while (el.offsetParent) {
-        el = el.offsetParent;
-        offset += el.offsetLeft;
-      }
-      return offset;
-    },
-    onDragStart(e) {
-      if (this.disabled) {
-        return;
-      }
-      if (!this.isActive) {
-        this.isActive = true;
-      }
-      addClass(document.body, 'or-slider--is-dragging');
-      this.dragUpdate(e);
-    },
-    dragUpdate(e) {
-      var _a;
-      const trackLength = (_a = this.$refs.track) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-      const relativeValue = (e.pageX - this.getTrackOffset()) / trackLength;
-      const value = this.moderateValue(this.moderatedMin + relativeValue * (this.moderatedMax - this.moderatedMin));
-      this.setValue(Math.round(value));
-    },
-    onDragStop() {
-      // todo find better solution! for smooth animation
-      setTimeout(() => this.isActive = false, 200);
-      if (this.snapToSteps && this.modelValue % this.step !== 0) {
-        this.setValueWithSnap(this.modelValue);
-      }
-      removeClass(document.body, 'or-slider--is-dragging');
-    },
-    getNearestSnapPoint(value) {
-      const previousSnapPoint = Math.floor(value / this.step) * this.step;
-      const nextSnapPoint = previousSnapPoint + this.step;
-      const midpoint = (previousSnapPoint + nextSnapPoint) / 2;
-      if (previousSnapPoint < this.moderatedMin) {
-        if (nextSnapPoint > this.moderatedMax) {
-          return value;
-        }
-        return nextSnapPoint;
-      }
-      if (value >= midpoint && nextSnapPoint <= this.moderatedMax) {
-        return nextSnapPoint;
-      }
-      return previousSnapPoint;
-    },
-    relativeValue(value) {
-      return (value - this.moderatedMin) / (this.moderatedMax - this.moderatedMin);
-    },
-    moderateValue(value) {
-      if (value < this.moderatedMin) {
-        return this.moderatedMin;
-      }
-      if (value > this.moderatedMax) {
-        return this.moderatedMax;
-      }
-      return value;
-    }
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "slider",
-    staticClass: "or-slider",
-    class: _vm.classes,
-    attrs: {
-      "role": "slider",
-      "aria-valuemax": _vm.moderatedMax,
-      "aria-valuemin": _vm.moderatedMin,
-      "aria-valuenow": _vm.localValue,
-      "tabindex": _vm.disabled ? null : _vm.tabindex || '0'
-    },
-    on: {
-      "focus": function ($event) {
-        _vm.isActive = true;
-      },
-      "keydown": [function ($event) {
-        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
-          return null;
-        }
-        $event.preventDefault();
-        return _vm.decrementValue.apply(null, arguments);
-      }, function ($event) {
-        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) {
-          return null;
-        }
-        if ('button' in $event && $event.button !== 0) {
-          return null;
-        }
-        $event.preventDefault();
-        return _vm.decrementValue.apply(null, arguments);
-      }, function ($event) {
-        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) {
-          return null;
-        }
-        if ('button' in $event && $event.button !== 2) {
-          return null;
-        }
-        $event.preventDefault();
-        return _vm.incrementValue.apply(null, arguments);
-      }, function ($event) {
-        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) {
-          return null;
-        }
-        $event.preventDefault();
-        return _vm.incrementValue.apply(null, arguments);
-      }]
-    }
-  }, [_vm.name ? _c('input', {
-    staticClass: "or-slider__hidden-input",
-    attrs: {
-      "type": "hidden",
-      "name": _vm.name
-    },
-    domProps: {
-      "value": _vm.modelValue
-    }
-  }) : _vm._e(), _vm._v(" "), _vm.hasIcon ? _c('div', {
-    staticClass: "or-slider__icon"
-  }, [_vm._t("icon", function () {
-    return [_c('or-icon', {
-      attrs: {
-        "icon": _vm.icon,
-        "color": "neutral-5"
-      }
-    })];
-  })], 2) : _vm._e(), _vm._v(" "), _c('div', {
-    ref: "track",
-    staticClass: "or-slider__track",
-    on: {
-      "pointerdown": _vm.onDragStart,
-      "pointerup": _vm.onDragStop
-    }
-  }, [_c('div', {
-    staticClass: "or-slider__track-background"
-  }, [_vm.snapToSteps ? _c('div', _vm._l(_vm.snapPoints, function (point) {
-    return _c('span', {
-      key: point,
-      staticClass: "or-slider__snap-point",
-      style: {
-        left: 100 * _vm.relativeValue(point) + '%'
-      }
-    });
-  }), 0) : _vm._e()]), _vm._v(" "), _c('div', {
-    staticClass: "or-slider__track-fill",
-    style: _vm.fillStyle
-  }), _vm._v(" "), _c('div', {
-    ref: "thumb",
-    staticClass: "or-slider__thumb",
-    style: _vm.thumbStyle
-  }, [_vm.showMarker ? _c('div', {
-    staticClass: "or-slider__marker"
-  }, [_c('svg', {
-    attrs: {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "viewBox": "0 0 24 24",
-      "width": "36",
-      "height": "36"
-    }
-  }, [_c('path', {
-    attrs: {
-      "d": "M11 .5c-1.7.2-3.4.9-4.7 2-1.1.9-2 2-2.5 3.2-1.2 2.4-1.2 5.1-.1 7.7 1.1 2.6 2.8 5 5.3 7.5 1.2 1.2 2.8 2.7 3 2.7 0 0 .3-.2.6-.5 3.2-2.7 5.6-5.6 7.1-8.5.8-1.5 1.1-2.6 1.3-3.8.2-1.4 0-2.9-.5-4.3-1.2-3.2-4.1-5.4-7.5-5.8-.5-.2-1.5-.2-2-.2z"
-    }
-  })]), _vm._v(" "), _c('span', {
-    staticClass: "or-slider__marker-text"
-  }, [_vm._v(_vm._s(_vm.markerText))])]) : _vm._e()])])]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = function (inject) {
-  if (!inject) return;
-  inject("data-v-26784114_0", {
-    source: "@keyframes spinAround-data-v-26784114{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-26784114{from{opacity:1}to{opacity:0}}.or-slider[data-v-26784114]{display:flex;align-items:center;outline:0}.or-slider:not(.is-disabled).is-active:not(.has-marker) .or-slider__thumb[data-v-26784114]::before,.or-slider:not(.is-disabled).is-dragging:not(.has-marker) .or-slider__thumb[data-v-26784114]::before{transform:scale(1)}.or-slider:not(.is-disabled).is-active .or-slider__marker[data-v-26784114],.or-slider:not(.is-disabled).is-dragging .or-slider__marker[data-v-26784114]{opacity:1;transform:scale(1) translateY(-26px)}.or-slider:not(.is-disabled).is-active .or-slider__marker-text[data-v-26784114],.or-slider:not(.is-disabled).is-dragging .or-slider__marker-text[data-v-26784114]{color:#fff}.or-slider:not(.is-disabled).is-active .or-slider__snap-point[data-v-26784114],.or-slider:not(.is-disabled).is-dragging .or-slider__snap-point[data-v-26784114]{opacity:1}.or-slider:not(.is-disabled).is-active .or-slider__icon[data-v-26784114]  .or-icon,.or-slider:not(.is-disabled).is-dragging .or-slider__icon[data-v-26784114]  .or-icon{color:var(--c-primary)}.or-slider.is-disabled .or-slider__icon[data-v-26784114]{opacity:.6}.or-slider.is-disabled .or-slider__track[data-v-26784114]{cursor:default}.or-slider.is-disabled .or-slider__track-fill[data-v-26784114]{background-color:transparent}.or-slider.is-disabled .or-slider__thumb[data-v-26784114]{background-color:#ddd;border:var(--s-1) solid #fff}.or-slider__icon[data-v-26784114]{display:flex;margin-right:var(--s-4)}.or-slider__track[data-v-26784114]{position:relative;display:flex;align-items:center;width:100%;height:18px;margin:0 auto;cursor:pointer}.or-slider__track-background[data-v-26784114],.or-slider__track-fill[data-v-26784114]{position:absolute;top:calc((18px - 3px)/ 2);left:0;display:block;height:3px;content:\"\"}.or-slider__track-background[data-v-26784114]{width:100%;background-color:var(--c-neutral-1-darken-5)}.or-slider__snap-point[data-v-26784114]{position:absolute;z-index:1;width:var(--s-1);height:3px;background-color:var(--c-neutral-6);opacity:0;transition:opacity .2s ease}.or-slider__track-fill[data-v-26784114]{width:100%;background-color:var(--c-primary);transform-origin:left}.or-slider__thumb[data-v-26784114]{position:relative;left:0;z-index:1;display:block;width:14px;height:14px;margin-left:calc(-14px / 2);cursor:inherit;background-color:var(--c-primary);border-radius:50%}.or-slider__thumb[data-v-26784114]::before{position:absolute;display:block;width:36px;height:36px;margin-top:calc((14px - 36px)/ 2);margin-left:calc((14px - 36px)/ 2);content:\"\";background-color:rgba(33,150,243,.38);border-radius:50%;transition:transform .2s ease;transform:scale(0);transform-origin:center}.or-slider__marker[data-v-26784114]{position:absolute;width:36px;height:36px;margin-top:calc((14px - 36px)/ 2);margin-left:calc((14px - 36px)/ 2);user-select:none;opacity:0;transition:all .2s ease;transform:scale(0) translateY(0)}.or-slider__marker svg[data-v-26784114]{width:36px;height:36px;fill:var(--c-primary)}.or-slider__marker-text[data-v-26784114]{position:absolute;top:var(--s-2);left:0;width:36px;font-size:var(--fs-1);font-weight:var(--fs-1);color:var(--c-primary);text-align:center;transition:color .2s ease}",
-    map: undefined,
-    media: undefined
-  }), inject("data-v-26784114_1", {
-    source: ".or-slider--is-dragging{touch-action:none;user-select:none}",
-    map: undefined,
-    media: undefined
-  });
-};
-/* scoped */
-const __vue_scope_id__ = "data-v-26784114";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
-var __vue_component__$1 = __vue_component__;
-
-export { __vue_component__$1 as _ };

package/dist/bundled/v2/OrStepper-1b86595d.js

@@ -1,179 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import __vue_component__$2 from './components/OrStepperOptionVertical/OrStepperOptionVertical.js';
-import __vue_component__$3 from './components/OrStepperOptionHorizontal/OrStepperOptionHorizontal.js';
-import __vue_component__$4 from './components/OrStepperTitle/OrStepperTitle.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrStepper',
-  components: {
-    OrStepperOptionVertical: __vue_component__$2,
-    OrStepperOptionHorizontal: __vue_component__$3,
-    OrStepperTitle: __vue_component__$4
-  },
-  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' ? __vue_component__$2 : __vue_component__$3;
-    }
-  },
-  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);
-    }
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', [_vm.type === 'horizontal' ? _c('div', {
-    staticClass: "w-full flex flex-row flex-1"
-  }, _vm._l(_vm.options, function (option, index) {
-    return _c('or-stepper-title', {
-      key: option.label,
-      attrs: {
-        "index": index,
-        "option": option,
-        "complete-index": _vm.completeIndex,
-        "type": _vm.type
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.$emit('click', index);
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "icon",
-        fn: function (scope) {
-          return [_vm._t("icon", null, null, scope)];
-        }
-      }, {
-        key: "label",
-        fn: function (scope) {
-          return [_vm._t("label", null, null, scope)];
-        }
-      }], null, true)
-    });
-  }), 1) : _vm._e(), _vm._v(" "), _c('ol', {
-    staticClass: "h-full w-full overflow-y-auto overflow-x-hidden",
-    class: {
-      'flex ': _vm.type === 'horizontal'
-    }
-  }, _vm._l(_vm.options, function (option, index) {
-    return _c(_vm.optionComponent, {
-      key: option.label,
-      tag: "component",
-      attrs: {
-        "index": index,
-        "option": option,
-        "complete-index": _vm.completeIndex,
-        "is-read-only": _vm.isReadOnly,
-        "has-confirm-button": _vm.hasConfirmButton,
-        "has-skip-button": _vm.hasSkipButton,
-        "has-previous-button": _vm.hasPreviousButton
-      },
-      on: {
-        "confirm": _vm.handleConfirm,
-        "previous": _vm.handlePrevious,
-        "skip": _vm.handleSkip,
-        "click": function ($event) {
-          return _vm.$emit('click', index);
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "content-" + index,
-        fn: function (scope) {
-          return [_vm._t("content-" + index, null, null, scope)];
-        }
-      }, {
-        key: "buttons",
-        fn: function (scope) {
-          return [_vm._t("buttons", null, null, scope)];
-        }
-      }, {
-        key: "icon",
-        fn: function (scope) {
-          return [_vm._t("icon", null, null, scope)];
-        }
-      }, {
-        key: "label",
-        fn: function (scope) {
-          return [_vm._t("label", null, null, scope)];
-        }
-      }], null, true)
-    });
-  }), 1)]);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-var __vue_component__$1 = __vue_component__;
-
-export { __vue_component__$1 as _ };