framework7-vue 6.3.4 → 7.0.0-beta.3

package/components/app.js

@@ -0,0 +1,292 @@
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  const _component_routable_modals = _resolveComponent("routable-modals");
+
+  return _openBlock(), _createBlock("div", {
+    id: "framework7-root",
+    ref: "elRef",
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default"), _createVNode(_component_routable_modals)], 2);
+}
+
+import { ref, onMounted, computed, toRaw } from 'vue';
+import { classNames, noUndefinedProps } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+import RoutableModals from './routable-modals';
+import { f7init, f7 } from '../shared/f7';
+export default {
+  name: 'f7-app',
+  render,
+  components: {
+    RoutableModals
+  },
+  inheritAttrs: false,
+  props: {
+    id: {
+      type: String,
+      default: undefined
+    },
+    name: {
+      type: String,
+      default: undefined
+    },
+    version: {
+      type: String,
+      default: undefined
+    },
+    theme: {
+      type: String,
+      default: undefined
+    },
+    language: {
+      type: String,
+      default: undefined
+    },
+    routes: {
+      type: Array,
+      default: () => []
+    },
+    store: Object,
+    autoDarkMode: {
+      type: Boolean,
+      default: undefined
+    },
+    lazyModulesPath: {
+      type: String,
+      default: undefined
+    },
+    initOnDeviceReady: {
+      type: Boolean,
+      default: undefined
+    },
+    iosTranslucentBars: {
+      type: Boolean,
+      default: undefined
+    },
+    iosTranslucentModals: {
+      type: Boolean,
+      default: undefined
+    },
+    userAgent: {
+      type: String,
+      default: undefined
+    },
+    url: {
+      type: String,
+      default: undefined
+    },
+    // components
+    accordion: {
+      type: Object,
+      default: () => undefined
+    },
+    actions: {
+      type: Object,
+      default: () => undefined
+    },
+    areaChart: {
+      type: Object,
+      default: () => undefined
+    },
+    autocomplete: {
+      type: Object,
+      default: () => undefined
+    },
+    calendar: {
+      type: Object,
+      default: () => undefined
+    },
+    card: {
+      type: Object,
+      default: () => undefined
+    },
+    colorPicker: {
+      type: Object,
+      default: () => undefined
+    },
+    dialog: {
+      type: Object,
+      default: () => undefined
+    },
+    form: {
+      type: Object,
+      default: () => undefined
+    },
+    gauge: {
+      type: Object,
+      default: () => undefined
+    },
+    grid: {
+      type: Object,
+      default: () => undefined
+    },
+    infiniteScroll: {
+      type: Object,
+      default: () => undefined
+    },
+    input: {
+      type: Object,
+      default: () => undefined
+    },
+    lazy: {
+      type: Object,
+      default: () => undefined
+    },
+    listIndex: {
+      type: Object,
+      default: () => undefined
+    },
+    loginScreen: {
+      type: Object,
+      default: () => undefined
+    },
+    messagebar: {
+      type: Object,
+      default: () => undefined
+    },
+    messages: {
+      type: Object,
+      default: () => undefined
+    },
+    navbar: {
+      type: Object,
+      default: () => undefined
+    },
+    notification: {
+      type: Object,
+      default: () => undefined
+    },
+    panel: {
+      type: Object,
+      default: () => undefined
+    },
+    photoBrowser: {
+      type: Object,
+      default: () => undefined
+    },
+    picker: {
+      type: Object,
+      default: () => undefined
+    },
+    pieChart: {
+      type: Object,
+      default: () => undefined
+    },
+    popover: {
+      type: Object,
+      default: () => undefined
+    },
+    popup: {
+      type: Object,
+      default: () => undefined
+    },
+    range: {
+      type: Object,
+      default: () => undefined
+    },
+    searchbar: {
+      type: Object,
+      default: () => undefined
+    },
+    sheet: {
+      type: Object,
+      default: () => undefined
+    },
+    smartSelect: {
+      type: Object,
+      default: () => undefined
+    },
+    sortable: {
+      type: Object,
+      default: () => undefined
+    },
+    statusbar: {
+      type: Object,
+      default: () => undefined
+    },
+    stepper: {
+      type: Object,
+      default: () => undefined
+    },
+    swipeout: {
+      type: Object,
+      default: () => undefined
+    },
+    textEditor: {
+      type: Object,
+      default: () => undefined
+    },
+    toast: {
+      type: Object,
+      default: () => undefined
+    },
+    toolbar: {
+      type: Object,
+      default: () => undefined
+    },
+    tooltip: {
+      type: Object,
+      default: () => undefined
+    },
+    view: {
+      type: Object,
+      default: () => undefined
+    },
+    virtualList: {
+      type: Object,
+      default: () => undefined
+    },
+    // modules
+    clicks: {
+      type: Object,
+      default: () => undefined
+    },
+    serviceWorker: {
+      type: Object,
+      default: () => undefined
+    },
+    touch: {
+      type: Object,
+      default: () => undefined
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    const routes = toRaw(props.routes);
+
+    if (!f7 || typeof window === 'undefined') {
+      f7init(elRef.value, noUndefinedProps({ ...props,
+        routes
+      }), false);
+    }
+
+    onMounted(() => {
+      const parentEl = elRef.value && elRef.value.parentNode;
+      /* eslint-disable no-restricted-globals */
+
+      if (typeof document !== 'undefined' && parentEl && parentEl !== document.body && parentEl.parentNode === document.body) {
+        parentEl.style.height = '100%';
+      }
+      /* eslint-enable no-restricted-globals */
+
+
+      if (f7) {
+        f7.init(elRef.value);
+        return;
+      }
+
+      f7init(elRef.value, noUndefinedProps({ ...props,
+        routes
+      }), true);
+    });
+    const classes = computed(() => classNames('framework7-root', colorClasses(props)));
+    return {
+      classes,
+      elRef
+    };
+  }
+
+};

package/{esm/components → components}/appbar.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 { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 
 function render(_ctx, _cache) {
@@ -18,8 +16,8 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-appbar',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     noShadow: Boolean,
     noHairline: Boolean,
     inner: {
@@ -27,21 +25,20 @@ export default {
       default: true
     },
     innerClass: String,
-    innerClassName: String
-  }, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      return classNames('appbar', {
-        'no-shadow': props.noShadow,
-        'no-hairline': props.noHairline
-      }, colorClasses(props));
-    });
-    var innerClasses = computed(function () {
-      return classNames('appbar-inner', props.innerClass, props.innerClassName);
-    });
+    innerClassName: String,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('appbar', {
+      'no-shadow': props.noShadow,
+      'no-hairline': props.noHairline
+    }, colorClasses(props)));
+    const innerClasses = computed(() => classNames('appbar-inner', props.innerClass, props.innerClassName));
     return {
-      classes: classes,
-      innerClasses: innerClasses
+      classes,
+      innerClasses
     };
   }
+
 };