framework7-vue/components/progressbar.js

Build full featured iOS & Android apps using Framework7 & Vue

import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["data-progress"];
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("span", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes),
    "data-progress": _ctx.progress
  }, [_createElementVNode("span", {
    style: _normalizeStyle(_ctx.transformStyle)
  }, null, 4)], 10, _hoisted_1);
}
import { computed, ref } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7 } from '../shared/f7.js';
export default {
  name: 'f7-progressbar',
  render,
  props: {
    progress: Number,
    infinite: Boolean,
    ...colorProps
  },
  setup(props) {
    const elRef = ref(null);
    const set = (newProgress, speed) => {
      if (!f7) return;
      f7.progressbar.set(elRef.value, newProgress, speed);
    };
    const transformStyle = computed(() => ({
      transform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : '',
      WebkitTransform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : ''
    }));
    const classes = computed(() => classNames('progressbar', {
      'progressbar-infinite': props.infinite
    }, colorClasses(props)));
    return {
      classes,
      set,
      transformStyle,
      elRef
    };
  }
};