framework7-vue 6.3.15 → 7.0.0-beta.11

package/components/preloader.js

@@ -0,0 +1,81 @@
+import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createStaticVNode as _createStaticVNode } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "preloader-inner"
+};
+
+const _hoisted_2 = /*#__PURE__*/_createVNode("svg", {
+  viewBox: "0 0 36 36"
+}, [/*#__PURE__*/_createVNode("circle", {
+  cx: "18",
+  cy: "18",
+  r: "16"
+})], -1);
+
+const _hoisted_3 = {
+  key: 1,
+  class: "preloader-inner"
+};
+
+const _hoisted_4 = /*#__PURE__*/_createStaticVNode("<span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span>", 8);
+
+const _hoisted_12 = {
+  key: 2,
+  class: "preloader-inner"
+};
+
+const _hoisted_13 = /*#__PURE__*/_createVNode("span", {
+  class: "preloader-inner-circle"
+}, null, -1);
+
+const _hoisted_14 = {
+  key: 3,
+  class: "preloader-inner"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes,
+    style: _ctx.style
+  }, [_ctx.theme && _ctx.theme.md ? (_openBlock(), _createBlock("span", _hoisted_1, [_hoisted_2])) : _ctx.theme && _ctx.theme.ios ? (_openBlock(), _createBlock("span", _hoisted_3, [_hoisted_4])) : _ctx.theme && _ctx.theme.aurora ? (_openBlock(), _createBlock("span", _hoisted_12, [_hoisted_13])) : !_ctx.theme ? (_openBlock(), _createBlock("span", _hoisted_14)) : _createCommentVNode("", true)], 6);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+export default {
+  name: 'f7-preloader',
+  render,
+  props: {
+    size: [Number, String],
+    ...colorProps
+  },
+
+  setup(props) {
+    const theme = useTheme();
+    const classes = computed(() => classNames('preloader', colorClasses(props)));
+    const style = computed(() => {
+      const preloaderStyle = {};
+      let sizeComputed = props.size;
+
+      if (sizeComputed && typeof sizeComputed === 'string' && sizeComputed.indexOf('px') >= 0) {
+        sizeComputed = sizeComputed.replace('px', '');
+      }
+
+      if (sizeComputed) {
+        preloaderStyle.width = `${sizeComputed}px`;
+        preloaderStyle.height = `${sizeComputed}px`;
+        preloaderStyle['--f7-preloader-size'] = `${sizeComputed}px`;
+      }
+
+      return preloaderStyle;
+    });
+    return {
+      classes,
+      style,
+      theme
+    };
+  }
+
+};

package/components/progressbar.js

@@ -0,0 +1,49 @@
+import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("span", {
+    ref: "elRef",
+    class: _ctx.classes,
+    "data-progress": _ctx.progress
+  }, [_createVNode("span", {
+    style: _ctx.transformStyle
+  }, null, 4)], 10, ["data-progress"]);
+}
+
+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
+    };
+  }
+
+};

package/components/radio.js

@@ -0,0 +1,62 @@
+import { createVNode as _createVNode, renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+const _hoisted_1 = /*#__PURE__*/_createVNode("i", {
+  class: "icon-radio"
+}, null, -1);
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("label", {
+    class: _ctx.classes
+  }, [_createVNode("input", {
+    ref: "inputElRef",
+    type: "radio",
+    name: _ctx.name,
+    value: _ctx.value,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly,
+    checked: _ctx.checked,
+    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+  }, null, 40, ["name", "value", "disabled", "readonly", "checked"]), _hoisted_1, _renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { ref, computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-radio',
+  render,
+  props: {
+    checked: Boolean,
+    name: [Number, String],
+    value: {
+      type: [Number, String, Boolean],
+      default: undefined
+    },
+    disabled: Boolean,
+    readonly: Boolean,
+    ...colorProps
+  },
+  emits: ['update:checked', 'change'],
+
+  setup(props, {
+    emit
+  }) {
+    const inputElRef = ref(null);
+
+    const onChange = event => {
+      emit('update:checked', event.target.checked);
+      emit('change', event);
+    };
+
+    const classes = computed(() => classNames({
+      radio: true,
+      disabled: props.disabled
+    }, colorClasses(props)));
+    return {
+      inputElRef,
+      classes,
+      onChange
+    };
+  }
+
+};

package/{esm/components → components}/range.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
 
 function render(_ctx, _cache) {
@@ -15,13 +13,13 @@ function render(_ctx, _cache) {
 }
 
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { classNames, noUndefinedProps } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
-import { f7ready, f7 } from '../shared/f7';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
 export default {
   name: 'f7-range',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     init: {
       type: Boolean,
       default: true
@@ -83,18 +81,19 @@ export default {
     name: String,
     input: Boolean,
     inputId: String,
-    disabled: Boolean
-  }, colorProps),
+    disabled: Boolean,
+    ...colorProps
+  },
   emits: ['range:change', 'range:changed', 'rangeChange', 'rangeChanged', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Range = null;
-    var elRef = ref(null);
-    watch(function () {
-      return props.value;
-    }, function (newValue) {
+
+  setup(props, {
+    emit
+  }) {
+    let f7Range = null;
+    const elRef = ref(null);
+    watch(() => props.value, newValue => {
       if (!f7Range) return;
-      var rangeValue = f7Range.value;
+      const rangeValue = f7Range.value;
 
       if (Array.isArray(newValue) && Array.isArray(rangeValue)) {
         if (rangeValue[0] !== newValue[0] || rangeValue[1] !== newValue[1]) {
@@ -104,41 +103,42 @@ export default {
         f7Range.setValue(newValue);
       }
     });
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (!props.init || !elRef.value) return;
-        f7Range = f7.range.create(noUndefinedProps(_extends({
-          el: elRef.value
-        }, props, {
+        f7Range = f7.range.create(noUndefinedProps({
+          el: elRef.value,
+          ...props,
           on: {
-            change: function change(range, val) {
+            change(range, val) {
               emit('range:change', val);
               emit('rangeChange', val);
             },
-            changed: function changed(range, val) {
+
+            changed(range, val) {
               emit('range:changed', val);
               emit('rangeChanged', val);
               emit('update:value', val);
             }
+
           }
-        })));
+        }));
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Range && f7Range.destroy) f7Range.destroy();
       f7Range = null;
     });
-    var classes = computed(function () {
-      return classNames('range-slider', {
-        'range-slider-horizontal': !props.vertical,
-        'range-slider-vertical': props.vertical,
-        'range-slider-vertical-reversed': props.vertical && props.verticalReversed,
-        disabled: props.disabled
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('range-slider', {
+      'range-slider-horizontal': !props.vertical,
+      'range-slider-vertical': props.vertical,
+      'range-slider-vertical-reversed': props.vertical && props.verticalReversed,
+      disabled: props.disabled
+    }, colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

package/components/routable-modals.js

@@ -0,0 +1,65 @@
+import { ref, onMounted, onBeforeUnmount, onUpdated, toRaw, h } from 'vue';
+import { f7events, f7routers, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-routable-modals',
+
+  setup() {
+    const elRef = ref(null);
+    const modals = ref([]);
+    const routerData = ref(null);
+    onMounted(() => {
+      routerData.value = {
+        modals,
+        el: elRef.value,
+
+        setModals(newModals) {
+          newModals.forEach(modal => {
+            // eslint-disable-next-line
+            modal.component = toRaw(modal.component);
+          });
+          modals.value = [...newModals];
+        }
+
+      };
+      f7routers.modals = routerData.value;
+    });
+    onUpdated(() => {
+      if (!routerData.value || !f7) return;
+      f7events.emit('modalsRouterDidUpdate', routerData.value);
+    });
+    onBeforeUnmount(() => {
+      if (!routerData.value) return;
+      f7routers.modals = null;
+      routerData.value = null;
+    });
+
+    const getComponent = modal => toRaw(modal.component);
+
+    const getProps = modal => {
+      const {
+        component: modalComponent,
+        props: modalProps
+      } = modal;
+      let keys = [];
+      const passProps = {};
+      if (modalComponent && modalComponent.props) keys = Object.keys(modalComponent.props);
+      keys.forEach(key => {
+        if (key in modalProps) passProps[key] = modalProps[key];
+      });
+      return passProps;
+    };
+
+    return () => {
+      return h('div', {
+        ref: elRef,
+        class: 'framework7-modals'
+      }, [...modals.value.map(modal => {
+        return h(getComponent(modal), {
+          key: modal.id,
+          ...getProps(modal)
+        });
+      })]);
+    };
+  }
+
+};

package/components/row.js

@@ -0,0 +1,72 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "resize-handler"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _ctx.classes
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createBlock("span", _hoisted_1)) : _createCommentVNode("", true)]),
+    _: 3
+  }, 8, ["class"]);
+}
+
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-row',
+  render,
+  props: {
+    noGap: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    resizable: Boolean,
+    resizableFixed: Boolean,
+    resizableAbsolute: Boolean,
+    resizableHandler: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['grid:resize'],
+
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onResize = el => {
+      if (el === elRef.value) {
+        emit('grid:resize');
+      }
+    };
+
+    onMounted(() => {
+      f7ready(() => {
+        f7.on('gridResize', onResize);
+      });
+    });
+    onBeforeUnmount(() => {
+      f7.off('gridResize', onResize);
+    });
+    const classes = computed(() => classNames('row', {
+      'no-gap': props.noGap,
+      resizable: props.resizable,
+      'resizable-fixed': props.resizableFixed,
+      'resizable-absolute': props.resizableAbsolute
+    }, colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+
+};