@onereach/ui-components 2.64.0-beta.1939.0 → 2.64.0

package/dist/bundled/v3/OrSkeletonText.vue_vue_type_script_lang-6c15a5dd.js

@@ -1,131 +0,0 @@
-import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import _ from 'lodash';
-import { d as defineComponent } from './runtime-core.esm-bundler-d2b749cd.js';
-
-var script$2 = defineComponent({
-  name: 'OrSkeletonCircle',
-  props: {
-    isAnimated: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    radius: {
-      type: [Number, String],
-      required: false,
-      default: 40
-    }
-  },
-  computed: {
-    rootClasses() {
-      return {
-        'is-animated': this.isAnimated
-      };
-    },
-    rootStyle() {
-      var _a;
-      const size = (_a = this.radius) !== null && _a !== void 0 ? _a : 40; // 40px - medium OrAvatar
-      const sizeStyle = _.isNumber(size) ? pxToRem(size) : size;
-      return {
-        'width': sizeStyle,
-        'min-width': sizeStyle,
-        'height': sizeStyle,
-        'min-height': sizeStyle
-      };
-    }
-  }
-});
-
-var script$1 = defineComponent({
-  name: 'OrSkeletonRect',
-  props: {
-    isAnimated: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '100%'
-    },
-    height: {
-      type: [Number, String],
-      required: false,
-      default: 36
-    }
-  },
-  computed: {
-    rootClasses() {
-      return {
-        'is-animated': this.isAnimated
-      };
-    },
-    rootStyle() {
-      var _a, _b;
-      const width = (_a = this.width) !== null && _a !== void 0 ? _a : '100%';
-      const height = (_b = this.height) !== null && _b !== void 0 ? _b : 36; // 36px - default OrInput height
-      return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
-        'height': _.isNumber(height) ? pxToRem(height) : height
-      };
-    }
-  }
-});
-
-var OrSkeletonTextSizes;
-(function (OrSkeletonTextSizes) {
-  OrSkeletonTextSizes["headline1"] = "headline-1";
-  OrSkeletonTextSizes["headline2"] = "headline-2";
-  OrSkeletonTextSizes["headline3"] = "headline-3";
-  OrSkeletonTextSizes["body1"] = "body-1";
-  OrSkeletonTextSizes["body2"] = "body-2";
-  OrSkeletonTextSizes["button"] = "button";
-  OrSkeletonTextSizes["caption"] = "caption";
-})(OrSkeletonTextSizes || (OrSkeletonTextSizes = {}));
-
-var script = defineComponent({
-  name: 'OrSkeletonText',
-  props: {
-    isAnimated: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    linesCount: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '100%'
-    },
-    size: {
-      type: String,
-      required: false,
-      default: OrSkeletonTextSizes.body1
-    }
-  },
-  computed: {
-    skeletonClasses() {
-      var _a;
-      return [`or-skeleton-text-${(_a = this.size) !== null && _a !== void 0 ? _a : OrSkeletonTextSizes.body1}`, {
-        'is-animated': this.isAnimated
-      }];
-    },
-    rootStyle() {
-      var _a;
-      const width = (_a = this.width) !== null && _a !== void 0 ? _a : '100%';
-      return {
-        'width': _.isNumber(width) ? pxToRem(width) : width
-      };
-    },
-    lineKeys() {
-      return _.range(this.linesCount);
-    }
-  }
-});
-
-export { OrSkeletonTextSizes as O, script$1 as a, script as b, script$2 as s };

package/dist/bundled/v3/OrSkeletonText.vue_vue_type_script_lang-fff544e0.js

@@ -1,192 +0,0 @@
-import _ from 'lodash';
-import { p as pxToRem } from './px-to-rem-0b26b83e.js';
-import { u as useClassAttribute } from './useClassAttribute-1af05c57.js';
-import { d as defineComponent, c as computed } from './runtime-core.esm-bundler-d2b749cd.js';
-import { r as ref } from './reactivity.esm-bundler-942db00f.js';
-
-const SkeletonRoot = [
-// Position
-'relative',
-// Layout
-'overflow-hidden',
-// Box
-'p-0',
-// Borders
-'border-0',
-// Theme
-'bg-skeletons-gradient', 'dark:bg-skeletons-gradient-dark',
-// Background
-'bg-repeat'];
-const SkeletonTextContainerRoot = [
-// Layout
-'flex', 'flex-col',
-// Box
-'h-auto'];
-const SkeletonCircle = [
-// Box
-'rounded-full'];
-const SkeletonRect = [
-// Box
-'rounded-md'];
-const SkeletonText = [
-// Box
-'w-full', 'rounded-md'];
-const SkeletonAnimated = [
-// Background
-'bg-[length:200%]',
-// Animation
-'animate-skeleton-loader'];
-
-var script$2 = defineComponent({
-  name: 'OrSkeletonCircle',
-  inheritAttrs: false,
-  props: {
-    animated: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    size: {
-      type: [Number, String],
-      required: false,
-      default: 40
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-circle', ...SkeletonRoot, ...SkeletonCircle, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
-    const rootStyle = computed(() => {
-      var _a;
-      const size = (_a = props.size) !== null && _a !== void 0 ? _a : 40; // 40px - medium OrAvatar
-      const sizeStyle = _.isNumber(size) ? pxToRem(size) : size;
-      return {
-        'width': sizeStyle,
-        'min-width': sizeStyle,
-        'height': sizeStyle,
-        'min-height': sizeStyle
-      };
-    });
-    return {
-      root,
-      rootStyles,
-      rootStyle
-    };
-  }
-});
-
-var script$1 = defineComponent({
-  name: 'OrSkeletonRect',
-  inheritAttrs: false,
-  props: {
-    animated: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '100%'
-    },
-    height: {
-      type: [Number, String],
-      required: false,
-      default: 36
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-skeleton', 'or-skeleton-rect', ...SkeletonRoot, ...SkeletonRect, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
-    const rootStyle = computed(() => {
-      var _a, _b;
-      const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
-      const height = (_b = props.height) !== null && _b !== void 0 ? _b : 36; // 36px - default OrInput height
-      return {
-        'width': _.isNumber(width) ? pxToRem(width) : width,
-        'height': _.isNumber(height) ? pxToRem(height) : height
-      };
-    });
-    return {
-      root,
-      rootStyles,
-      rootStyle
-    };
-  }
-});
-
-var script = defineComponent({
-  name: 'OrSkeletonText',
-  inheritAttrs: false,
-  props: {
-    animated: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    linesCount: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    width: {
-      type: [Number, String],
-      required: false,
-      default: '100%'
-    },
-    fontSize: {
-      type: Number,
-      required: false,
-      default: 16
-    },
-    lineHeight: {
-      type: Number,
-      required: false,
-      default: 24
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const classAttribute = useClassAttribute();
-    const containerStyles = computed(() => ['or-skeleton-text-root', ...SkeletonTextContainerRoot, classAttribute.value]);
-    const containerStyle = computed(() => {
-      var _a;
-      const width = (_a = props.width) !== null && _a !== void 0 ? _a : '100%';
-      return {
-        'width': _.isNumber(width) ? pxToRem(width) : width
-      };
-    });
-    const rowStyles = computed(() => ['or-skeleton', 'or-skeleton-text', ...SkeletonRoot, ...SkeletonText, ...(props.animated ? SkeletonAnimated : []), classAttribute.value]);
-    const rowStyle = computed(() => {
-      var _a, _b;
-      const height = (_a = props.fontSize) !== null && _a !== void 0 ? _a : 16;
-      const margin = (((_b = props.lineHeight) !== null && _b !== void 0 ? _b : 24) - height) / 2;
-      return {
-        'height': _.isNumber(height) ? pxToRem(height) : height,
-        'margin': `${_.isNumber(margin) ? pxToRem(margin) : margin} 0`
-      };
-    });
-    // State
-    const lineKeys = computed(() => _.range(props.linesCount));
-    return {
-      root,
-      containerStyles,
-      containerStyle,
-      rowStyles,
-      rowStyle,
-      lineKeys
-    };
-  }
-});
-
-export { script$1 as a, script as b, script$2 as s };

package/dist/bundled/v3/OrSlider.vue_vue_type_script_lang-fb9375f1.js

@@ -1,228 +0,0 @@
-import { onClickOutside, useDraggable } from '@vueuse/core';
-import { e as addClass, f as removeClass } from './dom-055820ba.js';
-import './OrIcon-43111b25.js';
-import { d as defineComponent } from './runtime-core.esm-bundler-d2b749cd.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-94e4c38e.js';
-import { r as ref } from './reactivity.esm-bundler-942db00f.js';
-
-var script = defineComponent({
-  name: 'OrSlider',
-  components: {
-    OrIcon: script$1
-  },
-  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;
-    }
-  }
-});
-
-export { script as s };