framework7-vue 6.3.4 → 7.0.0-beta.3

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

@@ -1,11 +1,9 @@
-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 { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "stepper-input-wrap"
 };
-var _hoisted_2 = {
+const _hoisted_2 = {
   key: 1,
   class: "stepper-value"
 };
@@ -16,9 +14,7 @@ function render(_ctx, _cache) {
     class: _ctx.classes
   }, [_createVNode("div", {
     class: "stepper-button-minus",
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.onMinusClick && _ctx.onMinusClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onMinusClick && _ctx.onMinusClick(...args))
   }), _ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createBlock("div", _hoisted_1, [_createVNode("input", {
     id: _ctx.inputId,
     name: _ctx.name,
@@ -28,17 +24,11 @@ function render(_ctx, _cache) {
     step: _ctx.inputType === 'number' ? _ctx.step : undefined,
     value: _ctx.value,
     readonly: _ctx.inputReadonly,
-    onInput: _cache[2] || (_cache[2] = function () {
-      return _ctx.onInput && _ctx.onInput.apply(_ctx, arguments);
-    }),
-    onChange: _cache[3] || (_cache[3] = function () {
-      return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
-    })
+    onInput: _cache[2] || (_cache[2] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+    onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
   }, null, 40, ["id", "name", "type", "min", "max", "step", "value", "readonly"])])) : _createCommentVNode("", true), !_ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createBlock("div", _hoisted_2, _toDisplayString(_ctx.value), 1)) : _createCommentVNode("", true), _createVNode("div", {
     class: "stepper-button-plus",
-    onClick: _cache[4] || (_cache[4] = function () {
-      return _ctx.onPlusClick && _ctx.onPlusClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onPlusClick && _ctx.onPlusClick(...args))
   })], 2);
 }
 
@@ -48,8 +38,8 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { f7ready, f7 } from '../shared/f7';
 export default {
   name: 'f7-stepper',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     init: {
       type: Boolean,
       default: true
@@ -130,29 +120,32 @@ export default {
     raised: Boolean,
     raisedMd: Boolean,
     raisedIos: Boolean,
-    raisedAurora: Boolean
-  }, colorProps),
+    raisedAurora: Boolean,
+    ...colorProps
+  },
   emits: ['input', 'change', 'stepper:minusclick', 'stepper:plusclick', 'stepper:change', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7Stepper = null;
-    var elRef = ref(null);
 
-    var increment = function increment() {
+  setup(props, {
+    emit
+  }) {
+    let f7Stepper = null;
+    const elRef = ref(null);
+
+    const increment = () => {
       if (!f7Stepper) return;
       f7Stepper.increment();
     };
 
-    var decrement = function decrement() {
+    const decrement = () => {
       if (!f7Stepper) return;
       f7Stepper.decrement();
     };
 
-    var setValue = function setValue(newValue) {
+    const setValue = newValue => {
       if (f7Stepper && f7Stepper.setValue) f7Stepper.setValue(newValue);
     };
 
-    var getValue = function getValue() {
+    const getValue = () => {
       if (f7Stepper && f7Stepper.getValue) {
         return f7Stepper.getValue();
       }
@@ -160,30 +153,28 @@ export default {
       return undefined;
     };
 
-    var onInput = function onInput(event) {
+    const onInput = event => {
       emit('input', event, f7Stepper);
     };
 
-    var onChange = function onChange(event) {
+    const onChange = event => {
       emit('change', event, f7Stepper);
     };
 
-    var onMinusClick = function onMinusClick(event) {
+    const onMinusClick = event => {
       emit('stepper:minusclick', event, f7Stepper);
     };
 
-    var onPlusClick = function onPlusClick(event) {
+    const onPlusClick = event => {
       emit('stepper:plusclick', event, f7Stepper);
     };
 
-    watch(function () {
-      return props.value;
-    }, function (newValue) {
+    watch(() => props.value, newValue => {
       if (!f7Stepper) return;
       f7Stepper.setValue(newValue);
     });
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         if (!props.init || !elRef.value) return;
         f7Stepper = f7.stepper.create(noUndefinedProps({
           el: elRef.value,
@@ -199,57 +190,57 @@ export default {
           decimalPoint: props.decimalPoint,
           buttonsEndInputMode: props.buttonsEndInputMode,
           on: {
-            change: function change(stepper, newValue) {
+            change(stepper, newValue) {
               emit('stepper:change', newValue);
               emit('update:value', newValue);
             }
+
           }
         }));
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Stepper && f7Stepper.destroy) {
         f7Stepper.destroy();
       }
 
       f7Stepper = null;
     });
-    var classes = computed(function () {
-      return classNames('stepper', {
-        disabled: props.disabled,
-        'stepper-round': props.round,
-        'stepper-round-ios': props.roundIos,
-        'stepper-round-md': props.roundMd,
-        'stepper-round-aurora': props.roundAurora,
-        'stepper-fill': props.fill,
-        'stepper-fill-ios': props.fillIos,
-        'stepper-fill-md': props.fillMd,
-        'stepper-fill-aurora': props.fillAurora,
-        'stepper-large': props.large,
-        'stepper-large-ios': props.largeIos,
-        'stepper-large-md': props.largeMd,
-        'stepper-large-aurora': props.largeAurora,
-        'stepper-small': props.small,
-        'stepper-small-ios': props.smallIos,
-        'stepper-small-md': props.smallMd,
-        'stepper-small-aurora': props.smallAurora,
-        'stepper-raised': props.raised,
-        'stepper-raised-ios': props.raisedIos,
-        'stepper-raised-md': props.raisedMd,
-        'stepper-raised-aurora': props.raisedAurora
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('stepper', {
+      disabled: props.disabled,
+      'stepper-round': props.round,
+      'stepper-round-ios': props.roundIos,
+      'stepper-round-md': props.roundMd,
+      'stepper-round-aurora': props.roundAurora,
+      'stepper-fill': props.fill,
+      'stepper-fill-ios': props.fillIos,
+      'stepper-fill-md': props.fillMd,
+      'stepper-fill-aurora': props.fillAurora,
+      'stepper-large': props.large,
+      'stepper-large-ios': props.largeIos,
+      'stepper-large-md': props.largeMd,
+      'stepper-large-aurora': props.largeAurora,
+      'stepper-small': props.small,
+      'stepper-small-ios': props.smallIos,
+      'stepper-small-md': props.smallMd,
+      'stepper-small-aurora': props.smallAurora,
+      'stepper-raised': props.raised,
+      'stepper-raised-ios': props.raisedIos,
+      'stepper-raised-md': props.raisedMd,
+      'stepper-raised-aurora': props.raisedAurora
+    }, colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes,
-      increment: increment,
-      decrement: decrement,
-      setValue: setValue,
-      getValue: getValue,
-      onInput: onInput,
-      onChange: onChange,
-      onMinusClick: onMinusClick,
-      onPlusClick: onPlusClick
+      elRef,
+      classes,
+      increment,
+      decrement,
+      setValue,
+      getValue,
+      onInput,
+      onChange,
+      onMinusClick,
+      onPlusClick
     };
   }
+
 };

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

@@ -1,11 +1,9 @@
-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 { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "subnavbar-inner"
 };
-var _hoisted_2 = {
+const _hoisted_2 = {
   key: 0,
   class: "subnavbar-title"
 };
@@ -23,23 +21,24 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-subnavbar',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     sliding: Boolean,
     title: String,
     inner: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      return classNames('subnavbar', {
-        sliding: props.sliding
-      }, colorClasses(props));
-    });
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('subnavbar', {
+      sliding: props.sliding
+    }, colorClasses(props)));
     return {
-      classes: classes
+      classes
     };
   }
+
 };

package/{esm/components → components}/swipeout-actions.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 } from "vue";
 
 function render(_ctx, _cache) {
@@ -13,15 +11,17 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-swipeout-actions',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     left: Boolean,
     right: Boolean,
-    side: String
-  }, colorProps),
-  setup: function setup(props) {
-    var side = computed(function () {
-      var sideComputed = props.side;
+    side: String,
+    ...colorProps
+  },
+
+  setup(props) {
+    const side = computed(() => {
+      let sideComputed = props.side;
 
       if (!sideComputed) {
         if (props.left) sideComputed = 'left';
@@ -30,11 +30,10 @@ export default {
 
       return sideComputed;
     });
-    var classes = computed(function () {
-      return classNames("swipeout-actions-" + side.value, colorClasses(props));
-    });
+    const classes = computed(() => classNames(`swipeout-actions-${side.value}`, colorClasses(props)));
     return {
-      classes: classes
+      classes
     };
   }
+
 };

package/{esm/components → components}/swipeout-button.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 { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
 function render(_ctx, _cache) {
@@ -8,9 +6,7 @@ function render(_ctx, _cache) {
     "data-confirm": _ctx.confirmText || undefined,
     "data-confirm-title": _ctx.confirmTitle || undefined,
     class: _ctx.classes,
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "default")], 10, ["href", "data-confirm", "data-confirm-title"]);
 }
 
@@ -19,34 +15,35 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-swipeout-button',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     text: String,
     confirmTitle: String,
     confirmText: String,
     overswipe: Boolean,
     close: Boolean,
     delete: Boolean,
-    href: String
-  }, colorProps),
+    href: String,
+    ...colorProps
+  },
   emits: ['click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
 
-    var onClick = function onClick(e) {
+  setup(props, {
+    emit
+  }) {
+    const onClick = e => {
       emit('click', e);
     };
 
-    var classes = computed(function () {
-      return classNames({
-        'swipeout-overswipe': props.overswipe,
-        'swipeout-delete': props.delete,
-        'swipeout-close': props.close
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames({
+      'swipeout-overswipe': props.overswipe,
+      'swipeout-delete': props.delete,
+      'swipeout-close': props.close
+    }, colorClasses(props)));
     return {
-      classes: classes,
-      onClick: onClick
+      classes,
+      onClick
     };
   }
+
 };

package/components/tab.js

@@ -0,0 +1,130 @@
+import { resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    ref: "elRef",
+    class: _ctx.classes
+  }, [_ctx.tabContent ? (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.getComponent(_ctx.tabContent)), _mergeProps({
+    key: 0,
+    key: _ctx.tabContent.id
+  }, _ctx.getProps(_ctx.tabContent)), null, 16)) : _renderSlot(_ctx.$slots, "default", {
+    key: 1
+  })], 2);
+}
+
+import { computed, ref, inject, onMounted, onBeforeUnmount, onUpdated, toRaw } from 'vue';
+import { classNames, getComponentId } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7';
+import { useTab } from '../shared/use-tab';
+export default {
+  name: 'f7-tab',
+  render,
+  props: {
+    tabActive: Boolean,
+    ...colorProps
+  },
+  emits: ['tab:show', 'tab:hide'],
+
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+    const routerData = ref(null);
+    const route = inject('f7route', null);
+    const router = inject('f7route', null);
+    let initialTabContent = null;
+
+    if (!routerData.value && route && route.route && route.route.tab && route.route.tab.id === props.id) {
+      const {
+        component,
+        asyncComponent,
+        options: tabRouteOptions
+      } = route.route.tab;
+
+      if (component || asyncComponent) {
+        const parentProps = route.route.options && route.route.options.props;
+        initialTabContent = {
+          id: getComponentId(),
+          component: component || asyncComponent,
+          isAsync: !!asyncComponent,
+          props: { ...(parentProps || {}),
+            ...(tabRouteOptions && tabRouteOptions.props || {}),
+            f7router: router,
+            f7route: route,
+            ...route.params
+          }
+        };
+      }
+    }
+
+    const tabContent = ref(initialTabContent || null);
+
+    const setTabContent = newContent => {
+      tabContent.value = newContent;
+    };
+
+    if (f7 && !routerData.value) {
+      routerData.value = {
+        setTabContent
+      };
+      f7routers.tabs.push(routerData.value);
+    }
+
+    onMounted(() => {
+      if (elRef.value && initialTabContent) {
+        elRef.value.f7RouterTabLoaded = true;
+      }
+
+      f7ready(() => {
+        if (!routerData.value) {
+          routerData.value = {
+            el: elRef.value,
+            setTabContent
+          };
+          f7routers.tabs.push(routerData.value);
+        } else {
+          routerData.value.el = elRef.value;
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!routerData.value) return;
+      f7routers.tabs.splice(f7routers.tabs.indexOf(routerData.value), 1);
+      routerData.value = null;
+    });
+    onUpdated(() => {
+      if (!routerData.value || !f7) return;
+      f7events.emit('tabRouterDidUpdate', routerData.value);
+    });
+    useTab(elRef, emit);
+    const classes = computed(() => classNames('tab', {
+      'tab-active': props.tabActive
+    }, colorClasses(props)));
+
+    const getComponent = content => toRaw(content.component);
+
+    const getProps = content => {
+      const {
+        component: tabComponent,
+        props: tabProps
+      } = content;
+      let keys = [];
+      const passProps = {};
+      if (tabComponent && tabComponent.props) keys = Object.keys(tabComponent.props);
+      keys.forEach(key => {
+        if (key in tabProps) passProps[key] = tabProps[key];
+      });
+      return passProps;
+    };
+
+    return {
+      elRef,
+      classes,
+      tabContent,
+      getComponent,
+      getProps
+    };
+  }
+
+};

package/{esm/components → components}/tabs.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, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 
 function render(_ctx, _cache) {
@@ -21,44 +19,41 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-tabs',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     animated: Boolean,
     swipeable: Boolean,
     routable: Boolean,
     swiperParams: {
       type: Object,
       default: undefined
-    }
-  }, colorProps),
-  setup: function setup(props) {
-    var elRef = ref(null);
-    onMounted(function () {
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    onMounted(() => {
       if (!props.swipeable || !props.swiperParams) return;
       if (!elRef.value) return;
       elRef.value.f7SwiperParams = props.swiperParams;
     });
-    var classes = computed(function () {
-      return classNames(colorClasses(props));
-    });
-    var wrapClasses = computed(function () {
-      return classNames({
-        'tabs-animated-wrap': props.animated,
-        'tabs-swipeable-wrap': props.swipeable
-      });
-    });
-    var tabsClasses = computed(function () {
-      return classNames({
-        tabs: true,
-        'tabs-routable': props.routable
-      });
-    });
+    const classes = computed(() => classNames(colorClasses(props)));
+    const wrapClasses = computed(() => classNames({
+      'tabs-animated-wrap': props.animated,
+      'tabs-swipeable-wrap': props.swipeable
+    }));
+    const tabsClasses = computed(() => classNames({
+      tabs: true,
+      'tabs-routable': props.routable
+    }));
     return {
-      elRef: elRef,
-      classes: classes,
-      wrapClasses: wrapClasses,
-      tabsClasses: tabsClasses,
-      classNames: classNames
+      elRef,
+      classes,
+      wrapClasses,
+      tabsClasses,
+      classNames
     };
   }
+
 };