framework7 6.3.4 → 7.0.0-beta.3

package/components/popup/popup.less

@@ -18,8 +18,8 @@
   z-index: 11000;
   overflow: hidden;
   border-radius: var(--f7-popup-border-radius);
-  .theme-dark &,
-  &.theme-dark {
+  .dark &,
+  &.dark {
     background: #000;
   }
   &.modal-in,
@@ -105,14 +105,14 @@ html.with-modal-popup-push-closing {
   }
 
   .if-dark-theme({
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         content: '';
         position: absolute;
@@ -155,9 +155,9 @@ html.with-modal-popup-push {
     opacity: 0;
   }
   .if-dark-theme({
-    &.theme-dark .popup:after,
-    .theme-dark .popup:after,
-    .theme-dark.popup:after {
+    &.dark .popup:after,
+    .dark .popup:after,
+    .dark.popup:after {
       background: rgba(255,255,255,0.05);
     }
   });
@@ -187,14 +187,14 @@ html.with-modal-popup-push {
 
 .if-dark-theme({
   html.with-modal-popup-push-closing {
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
       }

package/components/popup/popup.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(o,p){void 0===p&&(p=!0);var e=o.$,s=o.utils,t=o.getDevice,a=o.getSupport,r=(o.Class,o.Modal),l=(o.ConstructorMethods,o.ModalMethods),n=s.extend,i=s.now,c=s.nextTick;class u extends r{constructor(o,p){const s=n({on:{}},o.params.popup,p);super(o,s);const r=this,l=getWindow(),u=getDocument(),d=a(),m=t();let h,f,g,v;if(r.params=s,h=r.params.el?e(r.params.el).eq(0):e(r.params.content).filter((o=>1===o.nodeType)).eq(0),h&&h.length>0&&h[0].f7Modal)return h[0].f7Modal;if(0===h.length)return r.destroy();function y(o){const p=o.target,s=e(p);if(!(!m.desktop&&m.cordova&&(l.Keyboard&&l.Keyboard.isVisible||l.cordova.plugins&&l.cordova.plugins.Keyboard&&l.cordova.plugins.Keyboard.isVisible))&&0===s.closest(r.el).length&&r.params&&r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===p){let o=!0;r.$el.nextAll(".popup.modal-in").each((p=>{const e=p.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===r.backdropEl&&(o=!1)})),o&&r.close()}}function w(o){27===o.keyCode&&r.params.closeOnEscape&&r.close()}function b(p){return(o.height-2*p)/o.height}r.params.backdrop&&r.params.backdropEl?f=e(r.params.backdropEl):r.params.backdrop&&(f=r.$containerEl.children(".popup-backdrop"),0===f.length&&(f=e('<div class="popup-backdrop"></div>'),r.$containerEl.append(f))),n(r,{app:o,push:h.hasClass("popup-push")||r.params.push,$el:h,el:h[0],$backdropEl:f,backdropEl:f&&f[0],type:"popup",$htmlEl:e("html")}),r.params.push&&h.addClass("popup-push");let k,C,E,$,M,T,x,B,P,S,H,A=!0,D=!1,q=!1;function K(o){!D&&A&&r.params.swipeToClose&&(r.params.swipeHandler&&0===e(o.target).closest(r.params.swipeHandler).length||(D=!0,q=!1,k={x:"touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchstart"===o.type?o.targetTouches[0].pageY:o.pageY},$=i(),E=void 0,r.params.swipeHandler||"touchstart"!==o.type||(T=e(o.target).closest(".page-content")[0])))}function O(p){if(!D)return;if(C={x:"touchmove"===p.type?p.targetTouches[0].pageX:p.pageX,y:"touchmove"===p.type?p.targetTouches[0].pageY:p.pageY},void 0===E&&(E=!!(E||Math.abs(C.x-k.x)>Math.abs(C.y-k.y))),E)return D=!1,void(q=!1);M=k.y-C.y,v&&g&&M>0&&(M=0);const e=M<0?"to-bottom":"to-top";if(h.transition(0),"string"==typeof r.params.swipeToClose&&e!==r.params.swipeToClose)return h.transform(""),void h.transition("");if(q)r.emit("local::swipeMove popupSwipeMove",r),r.$el.trigger("popup:swipemove");else{if(v&&g&&(S=h[0].offsetHeight,H=h.prevAll(".popup.modal-in").eq(0),0===H.length&&(H=o.$el.children(".view, .views"))),T&&(x=T.scrollTop,P=T.scrollHeight,B=T.offsetHeight,!(P===B||"to-bottom"===e&&0===x||"to-top"===e&&x===P-B)))return h.transform(""),h.transition(""),D=!1,void(q=!1);q=!0,r.emit("local::swipeStart popupSwipeStart",r),r.$el.trigger("popup:swipestart")}if(p.preventDefault(),v&&g){const o=1-Math.abs(M/S),p=1-(1-b(g))*o;H.hasClass("popup")?H.hasClass("popup-push")?H.transition(0).forEach((e=>{e.style.setProperty("transform",`translate3d(0, calc(-1 * ${o} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${p})`,"important")})):H.transition(0).forEach((o=>{o.style.setProperty("transform",`translate3d(0, 0px , 0px) scale(${p})`,"important")})):H.transition(0).forEach((o=>{o.style.setProperty("transform",`translate3d(0,0,0) scale(${p})`,"important")}))}h.transition(0).transform(`translate3d(0,${-M}px,0)`)}function X(){if(D=!1,!q)return;r.emit("local::swipeEnd popupSwipeEnd",r),r.$el.trigger("popup:swipeend"),q=!1,A=!1,h.transition(""),v&&g&&H.transition("").transform("");const o=M<=0?"to-bottom":"to-top";if("string"==typeof r.params.swipeToClose&&o!==r.params.swipeToClose)return h.transform(""),void(A=!0);const p=Math.abs(M),e=(new Date).getTime()-$;e<300&&p>20||e>=300&&p>100?c((()=>{"to-bottom"===o?h.addClass("swipe-close-to-bottom"):h.addClass("swipe-close-to-top"),h.transform(""),r.emit("local::swipeclose popupSwipeClose",r),r.$el.trigger("popup:swipeclose"),r.close(),A=!0})):(A=!0,h.transform(""))}const Y=!!d.passiveListener&&{passive:!0};let z;r.params.swipeToClose&&(h.on(o.touchEvents.start,K,Y),o.on("touchmove",O),o.on("touchend:passive",X),r.once("popupDestroy",(()=>{h.off(o.touchEvents.start,K,Y),o.off("touchmove",O),o.off("touchend:passive",X)})));const N=()=>{const p=v;r.push&&(v=r.push&&(o.width<630||o.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&!p?L():v&&p?r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",b(g)):!v&&p&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},L=()=>{o.off("resize",N),r.push&&(v=r.push&&(o.width<630||o.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&(g=parseInt(h.css("--f7-popup-push-offset"),10),Number.isNaN(g)&&(g=0),g&&(h.addClass("popup-push"),r.$htmlEl.addClass("with-modal-popup-push"),r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",b(g)))),o.on("resize",N)};return r.on("open",(()=>{z=!1,r.params.closeOnEscape&&e(u).on("keydown",w),h.prevAll(".popup.modal-in").addClass("popup-behind"),L()})),r.on("opened",(()=>{h.removeClass("swipe-close-to-bottom swipe-close-to-top"),r.params.closeByBackdropClick&&o.on("click",y)})),r.on("close",(()=>{z=r.$el.prevAll(".popup-push.modal-in").length>0,r.params.closeOnEscape&&e(u).off("keydown",w),r.params.closeByBackdropClick&&o.off("click",y),h.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl.addClass("with-modal-popup-push-closing")),o.off("resize",N)})),r.on("closed",(()=>{h.removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push-closing"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),h[0].f7Modal=r,r}}var d={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:u},create(){this.popup=l({app:this,constructor:u,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(o,p={}){this.popup.open(p.popup,p.animate,o)},".popup-close":function(o,p={}){this.popup.close(p.popup,p.animate,o)}}};if(p){if(o.prototype.modules&&o.prototype.modules[d.name])return;o.use(d),o.instance&&(o.instance.useModuleParams(d,o.instance.params),o.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/preloader/preloader.js

@@ -1 +1,115 @@
-(function framework7ComponentLoader(e,r){void 0===r&&(r=!0);var o=e.$,n=e.utils,a=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,n.bindMethods),t=n.iosPreloaderContent,d=n.mdPreloaderContent,i=n.auroraPreloaderContent,l={init:function(e){var r={iosPreloaderContent:t,mdPreloaderContent:d,auroraPreloaderContent:i},n=o(e);0===n.length||n.children(".preloader-inner").length>0||n.children(".preloader-inner-line").length>0||n.append(r[this.theme+"PreloaderContent"])},visible:!1,show:function(e){void 0===e&&(e="white");if(!l.visible){var r={iosPreloaderContent:t,mdPreloaderContent:d,auroraPreloaderContent:i}[this.theme+"PreloaderContent"]||"";o("html").addClass("with-modal-preloader"),this.$el.append('\n      <div class="preloader-backdrop"></div>\n      <div class="preloader-modal">\n        <div class="preloader color-'+e+'">'+r+"</div>\n      </div>\n    "),l.visible=!0}},showIn:function(e,r){void 0===r&&(r="white");var n={iosPreloaderContent:t,mdPreloaderContent:d,auroraPreloaderContent:i}[this.theme+"PreloaderContent"]||"";o(e||"html").addClass("with-modal-preloader"),o(e||this.$el).append('\n      <div class="preloader-backdrop"></div>\n      <div class="preloader-modal">\n        <div class="preloader color-'+r+'">'+n+"</div>\n      </div>\n    ")},hide:function(){l.visible&&(o("html").removeClass("with-modal-preloader"),this.$el.find(".preloader-backdrop, .preloader-modal").remove(),l.visible=!1)},hideIn:function(e){o(e||"html").removeClass("with-modal-preloader"),o(e||this.$el).find(".preloader-backdrop, .preloader-modal").remove()}},s={name:"preloader",create:function(){a(this,{preloader:l})},on:{photoBrowserOpen:function(e){var r=this;e.$el.find(".preloader").each((function(e){r.preloader.init(e)}))},tabMounted:function(e){var r=this;o(e).find(".preloader").each((function(e){r.preloader.init(e)}))},pageInit:function(e){var r=this;e.$el.find(".preloader").each((function(e){r.preloader.init(e)}))}},vnode:{preloader:{insert:function(e){var r=e.elm;this.preloader.init(r)}}}};if(r){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import { bindMethods, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils';
+const Preloader = {
+  init(el) {
+    const app = this;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent,
+      auroraPreloaderContent
+    };
+    const $el = $(el);
+    if ($el.length === 0 || $el.children('.preloader-inner').length > 0 || $el.children('.preloader-inner-line').length > 0) return;
+    $el.append(preloaders[`${app.theme}PreloaderContent`]);
+  },
+
+  // Modal
+  visible: false,
+
+  show(color = 'white') {
+    const app = this;
+    if (Preloader.visible) return;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent,
+      auroraPreloaderContent
+    };
+    const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
+    $('html').addClass('with-modal-preloader'); // prettier-ignore
+
+    app.$el.append(`
+      <div class="preloader-backdrop"></div>
+      <div class="preloader-modal">
+        <div class="preloader color-${color}">${preloaderInner}</div>
+      </div>
+    `);
+    Preloader.visible = true;
+  },
+
+  showIn(el, color = 'white') {
+    const app = this;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent,
+      auroraPreloaderContent
+    };
+    const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
+    $(el || 'html').addClass('with-modal-preloader'); // prettier-ignore
+
+    $(el || app.$el).append(`
+      <div class="preloader-backdrop"></div>
+      <div class="preloader-modal">
+        <div class="preloader color-${color}">${preloaderInner}</div>
+      </div>
+    `);
+  },
+
+  hide() {
+    const app = this;
+    if (!Preloader.visible) return;
+    $('html').removeClass('with-modal-preloader');
+    app.$el.find('.preloader-backdrop, .preloader-modal').remove();
+    Preloader.visible = false;
+  },
+
+  hideIn(el) {
+    const app = this;
+    $(el || 'html').removeClass('with-modal-preloader');
+    $(el || app.$el).find('.preloader-backdrop, .preloader-modal').remove();
+  }
+
+};
+export default {
+  name: 'preloader',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      preloader: Preloader
+    });
+  },
+
+  on: {
+    photoBrowserOpen(pb) {
+      const app = this;
+      pb.$el.find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    },
+
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    }
+
+  },
+  vnode: {
+    preloader: {
+      insert(vnode) {
+        const app = this;
+        const preloaderEl = vnode.elm;
+        app.preloader.init(preloaderEl);
+      }
+
+    }
+  }
+};

package/components/preloader/preloader.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,r){void 0===r&&(r=!0);var o=e.$,a=e.utils,d=(e.getDevice,e.getSupport,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,a.bindMethods),t=a.iosPreloaderContent,n=a.mdPreloaderContent,l=a.auroraPreloaderContent;const i={init(e){const r={iosPreloaderContent:t,mdPreloaderContent:n,auroraPreloaderContent:l},a=o(e);0===a.length||a.children(".preloader-inner").length>0||a.children(".preloader-inner-line").length>0||a.append(r[`${this.theme}PreloaderContent`])},visible:!1,show(e="white"){if(i.visible)return;const r={iosPreloaderContent:t,mdPreloaderContent:n,auroraPreloaderContent:l}[`${this.theme}PreloaderContent`]||"";o("html").addClass("with-modal-preloader"),this.$el.append(`\n        <div class="preloader-backdrop"></div>\n        <div class="preloader-modal">\n          <div class="preloader color-${e}">${r}</div>\n        </div>\n      `),i.visible=!0},showIn(e,r="white"){const a={iosPreloaderContent:t,mdPreloaderContent:n,auroraPreloaderContent:l}[`${this.theme}PreloaderContent`]||"";o(e||"html").addClass("with-modal-preloader"),o(e||this.$el).append(`\n        <div class="preloader-backdrop"></div>\n        <div class="preloader-modal">\n          <div class="preloader color-${r}">${a}</div>\n        </div>\n      `)},hide(){i.visible&&(o("html").removeClass("with-modal-preloader"),this.$el.find(".preloader-backdrop, .preloader-modal").remove(),i.visible=!1)},hideIn(e){o(e||"html").removeClass("with-modal-preloader"),o(e||this.$el).find(".preloader-backdrop, .preloader-modal").remove()}};var s={name:"preloader",create(){d(this,{preloader:i})},on:{photoBrowserOpen(e){const r=this;e.$el.find(".preloader").each((e=>{r.preloader.init(e)}))},tabMounted(e){const r=this;o(e).find(".preloader").each((e=>{r.preloader.init(e)}))},pageInit(e){const r=this;e.$el.find(".preloader").each((e=>{r.preloader.init(e)}))}},vnode:{preloader:{insert(e){const r=e.elm;this.preloader.init(r)}}}};if(r){if(e.prototype.modules&&e.prototype.modules[s.name])return;e.use(s),e.instance&&(e.instance.useModuleParams(s,e.instance.params),e.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/progressbar/progressbar-rtl.css

@@ -1 +1 @@
-.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .theme-dark,.ios.theme-dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .theme-dark,.aurora.theme-dark{--f7-progressbar-bg-color:#444}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;left:0;top:0;transform:translate3d(-100%,0,0);transition-duration:150ms}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left center;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}
+.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;left:0;top:0;transform:translate3d(-100%,0,0);transition-duration:150ms}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left center;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}

package/components/progressbar/progressbar.css

@@ -1 +1 @@
-.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .theme-dark,.ios.theme-dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .theme-dark,.aurora.theme-dark{--f7-progressbar-bg-color:#444}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;left:0;top:0;transform:translate3d(-100%,0,0);transition-duration:150ms}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left center;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}
+.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.aurora{--f7-progressbar-height:6px;--f7-progressbar-border-radius:3px;--f7-progressbar-bg-color:#dbdbdb}.aurora .dark,.aurora.dark{--f7-progressbar-bg-color:#444}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;left:0;top:0;transform:translate3d(-100%,0,0);transition-duration:150ms}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left center;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color))}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@keyframes progressbar-in{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes progressbar-out{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:ios-progressbar-infinite-multicolor 3s linear infinite}@keyframes ios-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes ios-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.6)}50%{transform:translateX(100%) scaleX(1)}100%{transform:translateX(100%) scaleX(1)}}@keyframes md-progressbar-infinite-2{0%{transform:translateX(-100%) scaleX(1)}40%{transform:translateX(-100%) scaleX(1)}75%{transform:translateX(60%) scaleX(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}.aurora .progressbar,.aurora .progressbar span,.aurora .progressbar-infinite,.aurora .progressbar-infinite:before{box-shadow:0px 0px 0px 1px rgba(0,0,0,.05) inset}.aurora .progressbar-infinite:before{animation:aurora-progressbar-infinite 1s linear infinite}.aurora .progressbar-infinite:after{display:none}.aurora .progressbar-infinite.color-multi:before{width:400%;background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#5856d6,#34aadc,#007aff,#5ac8fa,#4cd964);background-size:25% 100%;background-repeat:repeat-x;animation:aurora-progressbar-infinite-multicolor 3s linear infinite}@keyframes aurora-progressbar-infinite{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(100%,0,0)}}@keyframes aurora-progressbar-infinite-multicolor{0%{transform:translate3d(0%,0,0)}100%{transform:translate3d(-50%,0,0)}}

package/components/progressbar/progressbar.js

@@ -1 +1,166 @@
-(function framework7ComponentLoader(r,e){void 0===e&&(e=!0);var s=r.$,n=r.utils,t=(r.getDevice,r.getSupport,r.Class,r.Modal,r.ConstructorMethods,r.ModalMethods,n.bindMethods),a={set:function(){for(var r=this,e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];var a=n[0],o=n[1],i=n[2];if("number"==typeof n[0]&&(o=n[0],i=n[1],a=r.$el),null==o)return a;o||(o=0);var p=s(a||r.$el);if(0===p.length)return a;var g,l=Math.min(Math.max(o,0),100);if(0===(g=p.hasClass("progressbar")?p.eq(0):p.children(".progressbar")).length||g.hasClass("progressbar-infinite"))return g;var f=g.children("span");return 0===f.length&&(f=s("<span></span>"),g.append(f)),f.transition(void 0!==i?i:"").transform("translate3d("+(-100+l)+"%,0,0)"),g[0]},show:function(){for(var r=this,e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];var a=n[0],o=n[1],i=n[2],p="determined";2===n.length?"string"!=typeof n[0]&&"object"!=typeof n[0]||"string"!=typeof n[1]?"number"==typeof n[0]&&"string"==typeof n[1]&&(o=n[0],i=n[1],a=r.$el):(a=n[0],i=n[1],o=n[2],p="infinite"):1===n.length?"number"==typeof n[0]?(a=r.$el,o=n[0]):"string"==typeof n[0]&&(p="infinite",a=r.$el,i=n[0]):0===n.length&&(p="infinite",a=r.$el);var g,l=s(a);if(0!==l.length)return l.hasClass("progressbar")||l.hasClass("progressbar-infinite")?g=l:0===(g=l.children(".progressbar:not(.progressbar-out), .progressbar-infinite:not(.progressbar-out)")).length&&(g=s('\n          <span class="progressbar'+("infinite"===p?"-infinite":"")+(i?" color-"+i:"")+' progressbar-in">\n            '+("infinite"===p?"":"<span></span>")+"\n          </span>"),l.append(g)),void 0!==o&&r.progressbar.set(g,o),g[0]},hide:function(r,e){void 0===e&&(e=!0);var n,t=s(r||this.$el);if(0!==t.length)return 0===(n=t.hasClass("progressbar")||t.hasClass("progressbar-infinite")?t:t.children(".progressbar, .progressbar-infinite")).length||!n.hasClass("progressbar-in")||n.hasClass("progressbar-out")||n.removeClass("progressbar-in").addClass("progressbar-out").animationEnd((function(){e&&n.remove()})),n}},o={name:"progressbar",create:function(){t(this,{progressbar:a})},on:{tabMounted:function(r){var e=this;s(r).find(".progressbar").each((function(r){var n=s(r);e.progressbar.set(n,n.attr("data-progress"))}))},pageInit:function(r){var e=this;r.$el.find(".progressbar").each((function(r){var n=s(r);e.progressbar.set(n,n.attr("data-progress"))}))}},vnode:{progressbar:{insert:function(r){var e=r.elm;this.progressbar.set(e,e.getAttribute("data-progress"))},update:function(r){var e=r.elm;this.progressbar.set(e,e.getAttribute("data-progress"))}}}};if(e){if(r.prototype.modules&&r.prototype.modules[o.name])return;r.use(o),r.instance&&(r.instance.useModuleParams(o,r.instance.params),r.instance.useModule(o))}return o}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7';
+import { bindMethods } from '../../shared/utils';
+const Progressbar = {
+  set(...args) {
+    const app = this;
+    let [el, progress, duration] = args;
+
+    if (typeof args[0] === 'number') {
+      [progress, duration] = args;
+      el = app.$el;
+    }
+
+    if (typeof progress === 'undefined' || progress === null) return el;
+    if (!progress) progress = 0;
+    const $el = $(el || app.$el);
+
+    if ($el.length === 0) {
+      return el;
+    }
+
+    const progressNormalized = Math.min(Math.max(progress, 0), 100);
+    let $progressbarEl;
+    if ($el.hasClass('progressbar')) $progressbarEl = $el.eq(0);else {
+      $progressbarEl = $el.children('.progressbar');
+    }
+
+    if ($progressbarEl.length === 0 || $progressbarEl.hasClass('progressbar-infinite')) {
+      return $progressbarEl;
+    }
+
+    let $progressbarLine = $progressbarEl.children('span');
+
+    if ($progressbarLine.length === 0) {
+      $progressbarLine = $('<span></span>');
+      $progressbarEl.append($progressbarLine);
+    }
+
+    $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${-100 + progressNormalized}%,0,0)`);
+    return $progressbarEl[0];
+  },
+
+  show(...args) {
+    const app = this; // '.page', 50, 'multi'
+
+    let [el, progress, color] = args;
+    let type = 'determined';
+
+    if (args.length === 2) {
+      if ((typeof args[0] === 'string' || typeof args[0] === 'object') && typeof args[1] === 'string') {
+        // '.page', 'multi'
+        [el, color, progress] = args;
+        type = 'infinite';
+      } else if (typeof args[0] === 'number' && typeof args[1] === 'string') {
+        // 50, 'multi'
+        [progress, color] = args;
+        el = app.$el;
+      }
+    } else if (args.length === 1) {
+      if (typeof args[0] === 'number') {
+        el = app.$el;
+        progress = args[0];
+      } else if (typeof args[0] === 'string') {
+        type = 'infinite';
+        el = app.$el;
+        color = args[0];
+      }
+    } else if (args.length === 0) {
+      type = 'infinite';
+      el = app.$el;
+    }
+
+    const $el = $(el);
+    if ($el.length === 0) return undefined;
+    let $progressbarEl;
+
+    if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) {
+      $progressbarEl = $el;
+    } else {
+      $progressbarEl = $el.children('.progressbar:not(.progressbar-out), .progressbar-infinite:not(.progressbar-out)');
+
+      if ($progressbarEl.length === 0) {
+        $progressbarEl = $(`
+          <span class="progressbar${type === 'infinite' ? '-infinite' : ''}${color ? ` color-${color}` : ''} progressbar-in">
+            ${type === 'infinite' ? '' : '<span></span>'}
+          </span>`);
+        $el.append($progressbarEl);
+      }
+    }
+
+    if (typeof progress !== 'undefined') {
+      app.progressbar.set($progressbarEl, progress);
+    }
+
+    return $progressbarEl[0];
+  },
+
+  hide(el, removeAfterHide = true) {
+    const app = this;
+    const $el = $(el || app.$el);
+    if ($el.length === 0) return undefined;
+    let $progressbarEl;
+
+    if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) {
+      $progressbarEl = $el;
+    } else {
+      $progressbarEl = $el.children('.progressbar, .progressbar-infinite');
+    }
+
+    if ($progressbarEl.length === 0 || !$progressbarEl.hasClass('progressbar-in') || $progressbarEl.hasClass('progressbar-out')) {
+      return $progressbarEl;
+    }
+
+    $progressbarEl.removeClass('progressbar-in').addClass('progressbar-out').animationEnd(() => {
+      if (removeAfterHide) {
+        $progressbarEl.remove();
+      }
+    });
+    return $progressbarEl;
+  }
+
+};
+export default {
+  name: 'progressbar',
+
+  create() {
+    const app = this;
+    bindMethods(app, {
+      progressbar: Progressbar
+    });
+  },
+
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.progressbar').each(progressbarEl => {
+        const $progressbarEl = $(progressbarEl);
+        app.progressbar.set($progressbarEl, $progressbarEl.attr('data-progress'));
+      });
+    },
+
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.progressbar').each(progressbarEl => {
+        const $progressbarEl = $(progressbarEl);
+        app.progressbar.set($progressbarEl, $progressbarEl.attr('data-progress'));
+      });
+    }
+
+  },
+  vnode: {
+    progressbar: {
+      insert(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        app.progressbar.set(el, el.getAttribute('data-progress'));
+      },
+
+      update(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        app.progressbar.set(el, el.getAttribute('data-progress'));
+      }
+
+    }
+  }
+};

package/components/progressbar/progressbar.umd.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(s,e){void 0===e&&(e=!0);var r=s.$,t=s.utils,n=(s.getDevice,s.getSupport,s.Class,s.Modal,s.ConstructorMethods,s.ModalMethods,t.bindMethods);const a={set(...s){const e=this;let[t,n,a]=s;if("number"==typeof s[0]&&([n,a]=s,t=e.$el),null==n)return t;n||(n=0);const o=r(t||e.$el);if(0===o.length)return t;const i=Math.min(Math.max(n,0),100);let p;if(p=o.hasClass("progressbar")?o.eq(0):o.children(".progressbar"),0===p.length||p.hasClass("progressbar-infinite"))return p;let l=p.children("span");return 0===l.length&&(l=r("<span></span>"),p.append(l)),l.transition(void 0!==a?a:"").transform(`translate3d(${-100+i}%,0,0)`),p[0]},show(...s){const e=this;let[t,n,a]=s,o="determined";2===s.length?"string"!=typeof s[0]&&"object"!=typeof s[0]||"string"!=typeof s[1]?"number"==typeof s[0]&&"string"==typeof s[1]&&([n,a]=s,t=e.$el):([t,a,n]=s,o="infinite"):1===s.length?"number"==typeof s[0]?(t=e.$el,n=s[0]):"string"==typeof s[0]&&(o="infinite",t=e.$el,a=s[0]):0===s.length&&(o="infinite",t=e.$el);const i=r(t);if(0===i.length)return;let p;return i.hasClass("progressbar")||i.hasClass("progressbar-infinite")?p=i:(p=i.children(".progressbar:not(.progressbar-out), .progressbar-infinite:not(.progressbar-out)"),0===p.length&&(p=r(`\n            <span class="progressbar${"infinite"===o?"-infinite":""}${a?` color-${a}`:""} progressbar-in">\n              ${"infinite"===o?"":"<span></span>"}\n            </span>`),i.append(p))),void 0!==n&&e.progressbar.set(p,n),p[0]},hide(s,e=!0){const t=r(s||this.$el);if(0===t.length)return;let n;return n=t.hasClass("progressbar")||t.hasClass("progressbar-infinite")?t:t.children(".progressbar, .progressbar-infinite"),0===n.length||!n.hasClass("progressbar-in")||n.hasClass("progressbar-out")||n.removeClass("progressbar-in").addClass("progressbar-out").animationEnd((()=>{e&&n.remove()})),n}};var o={name:"progressbar",create(){n(this,{progressbar:a})},on:{tabMounted(s){const e=this;r(s).find(".progressbar").each((s=>{const t=r(s);e.progressbar.set(t,t.attr("data-progress"))}))},pageInit(s){const e=this;s.$el.find(".progressbar").each((s=>{const t=r(s);e.progressbar.set(t,t.attr("data-progress"))}))}},vnode:{progressbar:{insert(s){const e=s.elm;this.progressbar.set(e,e.getAttribute("data-progress"))},update(s){const e=s.elm;this.progressbar.set(e,e.getAttribute("data-progress"))}}}};if(e){if(s.prototype.modules&&s.prototype.modules[o.name])return;s.use(o),s.instance&&(s.instance.useModuleParams(o,s.instance.params),s.instance.useModule(o))}return o}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))