framework7-vue 6.3.15 → 7.0.0-beta.11

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,28 +24,22 @@ 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);
 }
 
 import { computed, ref, watch, onMounted, onBeforeUnmount } 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-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"
 };
@@ -19,27 +17,28 @@ function render(_ctx, _cache) {
 }
 
 import { computed } from 'vue';
-import { classNames } from '../shared/utils';
-import { colorClasses, colorProps } from '../shared/mixins';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
 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/components/swipeout-actions.js

@@ -0,0 +1,39 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-swipeout-actions',
+  render,
+  props: {
+    left: Boolean,
+    right: Boolean,
+    side: String,
+    ...colorProps
+  },
+
+  setup(props) {
+    const side = computed(() => {
+      let sideComputed = props.side;
+
+      if (!sideComputed) {
+        if (props.left) sideComputed = 'left';
+        if (props.right) sideComputed = 'right';
+      }
+
+      return sideComputed;
+    });
+    const classes = computed(() => classNames(`swipeout-actions-${side.value}`, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/swipeout-button.js

@@ -0,0 +1,49 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("a", {
+    href: _ctx.href || '#',
+    "data-confirm": _ctx.confirmText || undefined,
+    "data-confirm-title": _ctx.confirmTitle || undefined,
+    class: _ctx.classes,
+    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"]);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-swipeout-button',
+  render,
+  props: {
+    text: String,
+    confirmTitle: String,
+    confirmText: String,
+    overswipe: Boolean,
+    close: Boolean,
+    delete: Boolean,
+    href: String,
+    ...colorProps
+  },
+  emits: ['click'],
+
+  setup(props, {
+    emit
+  }) {
+    const onClick = e => {
+      emit('click', e);
+    };
+
+    const classes = computed(() => classNames({
+      'swipeout-overswipe': props.overswipe,
+      'swipeout-delete': props.delete,
+      'swipeout-close': props.close
+    }, colorClasses(props)));
+    return {
+      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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
+import { useTab } from '../shared/use-tab.js';
+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/components/tabs.js

@@ -0,0 +1,59 @@
+import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
+
+function render(_ctx, _cache) {
+  return _ctx.animated || _ctx.swipeable ? (_openBlock(), _createBlock("div", {
+    key: 0,
+    ref: "elRef",
+    class: _ctx.classNames(_ctx.wrapClasses, _ctx.classes)
+  }, [_createVNode("div", {
+    class: _ctx.tabsClasses
+  }, [_renderSlot(_ctx.$slots, "default")], 2)], 2)) : (_openBlock(), _createBlock("div", {
+    key: 1,
+    ref: "elRef",
+    class: _ctx.classNames(_ctx.tabsClasses, _ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2));
+}
+
+import { computed, ref, onMounted } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-tabs',
+  render,
+  props: {
+    animated: Boolean,
+    swipeable: Boolean,
+    routable: Boolean,
+    swiperParams: {
+      type: Object,
+      default: undefined
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
+    onMounted(() => {
+      if (!props.swipeable || !props.swiperParams) return;
+      if (!elRef.value) return;
+      elRef.value.f7SwiperParams = props.swiperParams;
+    });
+    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,
+      classes,
+      wrapClasses,
+      tabsClasses,
+      classNames
+    };
+  }
+
+};