framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/list.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 { computed, ref, onMounted, onBeforeUnmount, h, provide, toRaw } from 'vue';
 import { classNames, extend } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -7,7 +5,7 @@ import { f7, f7ready } from '../shared/f7';
 import { useTab } from '../shared/use-tab';
 export default {
   name: 'f7-list',
-  props: _extends({
+  props: {
     inset: Boolean,
     xsmallInset: Boolean,
     smallInset: Boolean,
@@ -49,68 +47,75 @@ export default {
     inlineLabels: Boolean,
     // Virtual List
     virtualList: Boolean,
-    virtualListParams: Object
-  }, colorProps),
+    virtualListParams: Object,
+    ...colorProps
+  },
   emits: ['submit', 'sortable:enable', 'sortable:disable', 'sortable:sort', 'virtual:itembeforeinsert', 'virtual:beforeclear', 'virtual:itemsbeforeinsert', 'virtual:itemsafterinsert', 'tab:hide', 'tab:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var f7VirtualList = null;
-    var elRef = ref(null);
 
-    var onSubmit = function onSubmit(event) {
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let f7VirtualList = null;
+    const elRef = ref(null);
+
+    const onSubmit = event => {
       emit('submit', event);
     };
 
-    var onSortableEnable = function onSortableEnable(el) {
+    const onSortableEnable = el => {
       if (elRef.value !== el) return;
       emit('sortable:enable');
     };
 
-    var onSortableDisable = function onSortableDisable(el) {
+    const onSortableDisable = el => {
       if (elRef.value !== el) return;
       emit('sortable:disable');
     };
 
-    var onSortableSort = function onSortableSort(el, sortData, listEl) {
+    const onSortableSort = (el, sortData, listEl) => {
       if (elRef.value !== listEl) return;
       emit('sortable:sort', sortData);
     };
 
     useTab(elRef, emit);
-    onMounted(function () {
-      f7ready(function () {
+    onMounted(() => {
+      f7ready(() => {
         f7.on('sortableEnable', onSortableEnable);
         f7.on('sortableDisable', onSortableDisable);
         f7.on('sortableSort', onSortableSort);
         if (!props.virtualList) return;
-        var vlParams = props.virtualListParams || {};
+        const vlParams = props.virtualListParams || {};
         if (!vlParams.renderItem && !vlParams.renderExternal) return;
         if (vlParams.items) vlParams.items = toRaw(vlParams.items);
         f7VirtualList = f7.virtualList.create(extend({
           el: elRef.value,
           on: {
-            itemBeforeInsert: function itemBeforeInsert(itemEl, item) {
-              var vl = this;
+            itemBeforeInsert(itemEl, item) {
+              const vl = this;
               emit('virtual:itembeforeinsert', vl, itemEl, item);
             },
-            beforeClear: function beforeClear(fragment) {
-              var vl = this;
+
+            beforeClear(fragment) {
+              const vl = this;
               emit('virtual:beforeclear', vl, fragment);
             },
-            itemsBeforeInsert: function itemsBeforeInsert(fragment) {
-              var vl = this;
+
+            itemsBeforeInsert(fragment) {
+              const vl = this;
               emit('virtual:itemsbeforeinsert', vl, fragment);
             },
-            itemsAfterInsert: function itemsAfterInsert(fragment) {
-              var vl = this;
+
+            itemsAfterInsert(fragment) {
+              const vl = this;
               emit('virtual:itemsafterinsert', vl, fragment);
             }
+
           }
         }, vlParams));
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (!f7) return;
       f7.off('sortableEnable', onSortableEnable);
       f7.off('sortableDisable', onSortableDisable);
@@ -119,66 +124,62 @@ export default {
       if (f7VirtualList.destroy) f7VirtualList.destroy();
       f7VirtualList = null;
     });
-    var classes = computed(function () {
-      return classNames('list', {
-        inset: props.inset,
-        'xsmall-inset': props.xsmallInset,
-        'small-inset': props.smallInset,
-        'medium-inset': props.mediumInset,
-        'large-inset': props.largeInset,
-        'xlarge-inset': props.xlargeInset,
-        'media-list': props.mediaList,
-        'simple-list': props.simpleList,
-        'links-list': props.linksList,
-        'menu-list': props.menuList,
-        sortable: props.sortable,
-        'sortable-tap-hold': props.sortableTapHold,
-        'sortable-enabled': props.sortableEnabled,
-        'sortable-opposite': props.sortableOpposite,
-        'accordion-list': props.accordionList,
-        'accordion-opposite': props.accordionOpposite,
-        'contacts-list': props.contactsList,
-        'virtual-list': props.virtualList,
-        tab: props.tab,
-        'tab-active': props.tabActive,
-        'no-hairlines': props.noHairlines,
-        'no-hairlines-md': props.noHairlinesMd,
-        'no-hairlines-ios': props.noHairlinesIos,
-        'no-hairlines-aurora': props.noHairlinesAurora,
-        'no-hairlines-between': props.noHairlinesBetween,
-        'no-hairlines-between-md': props.noHairlinesBetweenMd,
-        'no-hairlines-between-ios': props.noHairlinesBetweenIos,
-        'no-hairlines-between-aurora': props.noHairlinesBetweenAurora,
-        'form-store-data': props.formStoreData,
-        'inline-labels': props.inlineLabels,
-        'no-chevron': props.noChevron,
-        'chevron-center': props.chevronCenter
-      }, colorClasses(props));
-    });
-    var ListTag = computed(function () {
-      return props.form ? 'form' : 'div';
-    });
-    var ListContext = computed(function () {
-      return {
-        listIsMedia: props.mediaList,
-        listIsSimple: props.simpleList,
-        listIsSortable: props.sortable,
-        listIsSortableOpposite: props.sortableOpposite
-      };
-    });
+    const classes = computed(() => classNames('list', {
+      inset: props.inset,
+      'xsmall-inset': props.xsmallInset,
+      'small-inset': props.smallInset,
+      'medium-inset': props.mediumInset,
+      'large-inset': props.largeInset,
+      'xlarge-inset': props.xlargeInset,
+      'media-list': props.mediaList,
+      'simple-list': props.simpleList,
+      'links-list': props.linksList,
+      'menu-list': props.menuList,
+      sortable: props.sortable,
+      'sortable-tap-hold': props.sortableTapHold,
+      'sortable-enabled': props.sortableEnabled,
+      'sortable-opposite': props.sortableOpposite,
+      'accordion-list': props.accordionList,
+      'accordion-opposite': props.accordionOpposite,
+      'contacts-list': props.contactsList,
+      'virtual-list': props.virtualList,
+      tab: props.tab,
+      'tab-active': props.tabActive,
+      'no-hairlines': props.noHairlines,
+      'no-hairlines-md': props.noHairlinesMd,
+      'no-hairlines-ios': props.noHairlinesIos,
+      'no-hairlines-aurora': props.noHairlinesAurora,
+      'no-hairlines-between': props.noHairlinesBetween,
+      'no-hairlines-between-md': props.noHairlinesBetweenMd,
+      'no-hairlines-between-ios': props.noHairlinesBetweenIos,
+      'no-hairlines-between-aurora': props.noHairlinesBetweenAurora,
+      'form-store-data': props.formStoreData,
+      'inline-labels': props.inlineLabels,
+      'no-chevron': props.noChevron,
+      'chevron-center': props.chevronCenter
+    }, colorClasses(props)));
+    const ListTag = computed(() => props.form ? 'form' : 'div');
+    const ListContext = computed(() => ({
+      listIsMedia: props.mediaList,
+      listIsSimple: props.simpleList,
+      listIsSortable: props.sortable,
+      listIsSortableOpposite: props.sortableOpposite
+    }));
     provide('ListContext', ListContext);
-    return function () {
-      var slotsList = slots.list,
-          slotsDefault = slots.default;
-      var rootChildrenBeforeList = [];
-      var rootChildrenAfterList = [];
-      var ulChildren = slotsList || [];
-      var wasUlChild = false;
+    return () => {
+      const {
+        list: slotsList,
+        default: slotsDefault
+      } = slots;
+      const rootChildrenBeforeList = [];
+      const rootChildrenAfterList = [];
+      const ulChildren = slotsList || [];
+      let wasUlChild = false;
 
       if (slotsDefault) {
-        slotsDefault().forEach(function (vnode) {
+        slotsDefault().forEach(vnode => {
           if (typeof vnode === 'undefined') return;
-          var tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
 
           if (tag && typeof tag === 'symbol') {
             wasUlChild = true;
@@ -196,8 +197,9 @@ export default {
         ref: elRef,
         class: classes.value,
         'data-sortable-move-elements': typeof props.sortableMoveElements !== 'undefined' ? props.sortableMoveElements.toString() : undefined,
-        onSubmit: onSubmit
+        onSubmit
       }, [slots['before-list'] && slots['before-list'](), rootChildrenBeforeList, ulChildren.length > 0 && h('ul', ulChildren), slots['after-list'] && slots['after-list'](), rootChildrenAfterList]);
     };
   }
+
 };

package/components/login-screen-title.js

@@ -0,0 +1,25 @@
+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';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-login-screen-title',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('login-screen-title', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/login-screen.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) {
@@ -16,8 +14,8 @@ import { f7ready, f7 } from '../shared/f7';
 import { modalStateClasses } from '../shared/modal-state-classes';
 export default {
   name: 'f7-login-screen',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     opened: Boolean,
     animate: {
       type: Boolean,
@@ -26,43 +24,44 @@ export default {
     containerEl: {
       type: [String, Object],
       default: undefined
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['loginscreen:open', 'loginscreen:opened', 'loginscreen:close', 'loginscreen:closed', 'update:opened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var f7LoginScreen = ref(null); // eslint-disable-next-line
 
-    var isOpened = props.opened;
-    var isClosing = false;
-    var elRef = ref(null);
+  setup(props, {
+    emit
+  }) {
+    const f7LoginScreen = ref(null); // eslint-disable-next-line
+
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
 
-    var onOpen = function onOpen(instance) {
+    const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('loginscreen:open', instance);
       emit('update:opened', true);
     };
 
-    var onOpened = function onOpened(instance) {
+    const onOpened = instance => {
       emit('loginscreen:opened', instance);
     };
 
-    var onClose = function onClose(instance) {
+    const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('loginscreen:close', instance);
     };
 
-    var onClosed = function onClosed(instance) {
+    const onClosed = instance => {
       isClosing = false;
       emit('loginscreen:closed', instance);
       emit('update:opened', false);
     };
 
-    watch(function () {
-      return props.opened;
-    }, function (value) {
+    watch(() => props.opened, value => {
       if (!f7LoginScreen.value) return;
 
       if (value) {
@@ -71,10 +70,10 @@ export default {
         f7LoginScreen.value.close();
       }
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!elRef.value) return;
-      f7ready(function () {
-        var loginScreenParams = {
+      f7ready(() => {
+        const loginScreenParams = {
           el: elRef.value,
           on: {
             open: onOpen,
@@ -99,22 +98,21 @@ export default {
         }
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7LoginScreen.value) {
         f7LoginScreen.value.destroy();
       }
 
       f7LoginScreen.value = null;
     });
-    var classes = computed(function () {
-      return classNames('login-screen', modalStateClasses({
-        isOpened: isOpened,
-        isClosing: isClosing
-      }), colorClasses(props));
-    });
+    const classes = computed(() => classNames('login-screen', modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

package/{esm/components → components}/menu-dropdown-item.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, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 
 function render(_ctx, _cache) {
@@ -7,9 +5,7 @@ function render(_ctx, _cache) {
     ref: "elRef",
     class: _ctx.classes
   }, _ctx.attrs, {
-    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")], 16);
 }
 
@@ -19,31 +15,32 @@ import { colorClasses, colorProps, routerProps, routerAttrs, routerClasses, acti
 import { useRouteProps } from '../shared/use-route-props';
 export default {
   name: 'f7-menu-dropdown-item',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     text: String,
     link: Boolean,
     href: String,
     target: String,
-    divider: Boolean
-  }, colorProps, routerProps, actionsProps),
+    divider: Boolean,
+    ...colorProps,
+    ...routerProps,
+    ...actionsProps
+  },
   emits: ['click'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = ref(null);
 
-    var onClick = function onClick(e) {
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
+
+    const onClick = e => {
       emit('click', e);
     };
 
     useRouteProps(elRef, props);
-    var isLink = computed(function () {
-      return props.link || props.href || props.href === '';
-    });
-    var tag = computed(function () {
-      return isLink.value ? 'a' : 'div';
-    });
-    var classes = computed(function () {
+    const isLink = computed(() => props.link || props.href || props.href === '');
+    const tag = computed(() => isLink.value ? 'a' : 'div');
+    const classes = computed(() => {
       return classNames({
         'menu-dropdown-link': isLink.value && !props.divider,
         'menu-dropdown-item': !isLink.value && !props.divider,
@@ -52,20 +49,23 @@ export default {
         'menu-close': typeof props.menuClose === 'undefined'
       });
     });
-    var attrs = computed(function () {
-      var hrefComputed = props.href;
+    const attrs = computed(() => {
+      let hrefComputed = props.href;
       if (typeof hrefComputed === 'undefined' && props.link) hrefComputed = '#';
-      return _extends({
+      return {
         href: hrefComputed,
-        target: props.target
-      }, routerAttrs(props), actionsAttrs(props));
+        target: props.target,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
     });
     return {
-      classes: classes,
-      attrs: attrs,
-      tag: tag,
-      onClick: onClick,
-      elRef: elRef
+      classes,
+      attrs,
+      tag,
+      onClick,
+      elRef
     };
   }
+
 };

package/{esm/components → components}/menu-dropdown.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 } from "vue";
 
 function render(_ctx, _cache) {
@@ -18,24 +16,27 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-menu-dropdown',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     contentHeight: String,
     position: String,
     left: Boolean,
     center: Boolean,
-    right: Boolean
-  }, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      var positionComputed = props.position || 'left';
+    right: Boolean,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => {
+      let positionComputed = props.position || 'left';
       if (props.left) positionComputed = 'left';
       if (props.center) positionComputed = 'center';
       if (props.right) positionComputed = 'right';
-      return classNames('menu-dropdown', "menu-dropdown-" + positionComputed, colorClasses(props));
+      return classNames('menu-dropdown', `menu-dropdown-${positionComputed}`, colorClasses(props));
     });
     return {
-      classes: classes
+      classes
     };
   }
+
 };