framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/block.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) {
@@ -15,8 +13,8 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { useTab } from '../shared/use-tab';
 export default {
   name: 'f7-block',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     inset: Boolean,
     xsmallInset: Boolean,
     smallInset: Boolean,
@@ -32,32 +30,37 @@ export default {
     noHairlines: Boolean,
     noHairlinesMd: Boolean,
     noHairlinesIos: Boolean,
-    noHairlinesAurora: Boolean
-  }, colorProps),
+    noHairlinesAurora: Boolean,
+    ...colorProps
+  },
   emits: ['tab:hide', 'tab:show'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var elRef = ref(null);
+
+  setup(props, {
+    emit
+  }) {
+    const elRef = ref(null);
     useTab(elRef, emit);
-    var classes = computed(function () {
-      var inset = props.inset,
-          xsmallInset = props.xsmallInset,
-          smallInset = props.smallInset,
-          mediumInset = props.mediumInset,
-          largeInset = props.largeInset,
-          xlargeInset = props.xlargeInset,
-          strong = props.strong,
-          accordionList = props.accordionList,
-          accordionOpposite = props.accordionOpposite,
-          tabs = props.tabs,
-          tab = props.tab,
-          tabActive = props.tabActive,
-          noHairlines = props.noHairlines,
-          noHairlinesMd = props.noHairlinesMd,
-          noHairlinesIos = props.noHairlinesIos,
-          noHairlinesAurora = props.noHairlinesAurora;
+    const classes = computed(() => {
+      const {
+        inset,
+        xsmallInset,
+        smallInset,
+        mediumInset,
+        largeInset,
+        xlargeInset,
+        strong,
+        accordionList,
+        accordionOpposite,
+        tabs,
+        tab,
+        tabActive,
+        noHairlines,
+        noHairlinesMd,
+        noHairlinesIos,
+        noHairlinesAurora
+      } = props;
       return classNames('block', {
-        inset: inset,
+        inset,
         'xsmall-inset': xsmallInset,
         'small-inset': smallInset,
         'medium-inset': mediumInset,
@@ -66,8 +69,8 @@ export default {
         'block-strong': strong,
         'accordion-list': accordionList,
         'accordion-opposite': accordionOpposite,
-        tabs: tabs,
-        tab: tab,
+        tabs,
+        tab,
         'tab-active': tabActive,
         'no-hairlines': noHairlines,
         'no-hairlines-md': noHairlinesMd,
@@ -76,8 +79,9 @@ export default {
       }, colorClasses(props));
     });
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

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

@@ -1,38 +1,34 @@
-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 { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, renderSlot as _renderSlot, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 1
 };
-var _hoisted_2 = {
+const _hoisted_2 = {
   key: 1
 };
 
 function render(_ctx, _cache) {
-  var _component_f7_preloader = _resolveComponent("f7-preloader");
+  const _component_f7_preloader = _resolveComponent("f7-preloader");
 
-  var _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
 
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
     ref: "elRef",
     class: _ctx.classesComputed
   }, _ctx.attrs), {
-    default: _withCtx(function () {
-      return [_ctx.preloader ? (_openBlock(), _createBlock(_Fragment, {
-        key: 0
-      }, [_createVNode(_component_f7_preloader, {
-        size: _ctx.preloaderSize,
-        color: _ctx.preloaderColor
-      }, null, 8, ["size", "color"]), _createVNode("span", null, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
-        key: 0,
-        icon: _ctx.icon
-      }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_1, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])], 64)) : (_openBlock(), _createBlock(_Fragment, {
-        key: 1
-      }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
-        key: 0,
-        icon: _ctx.icon
-      }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 64))];
-    }),
+    default: _withCtx(() => [_ctx.preloader ? (_openBlock(), _createBlock(_Fragment, {
+      key: 0
+    }, [_createVNode(_component_f7_preloader, {
+      size: _ctx.preloaderSize,
+      color: _ctx.preloaderColor
+    }, null, 8, ["size", "color"]), _createVNode("span", null, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_1, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])], 64)) : (_openBlock(), _createBlock(_Fragment, {
+      key: 1
+    }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createBlock("span", _hoisted_2, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 64))]),
     _: 3
   }, 16, ["class"]);
 }
@@ -47,12 +43,12 @@ import f7Preloader from './preloader';
 import f7UseIcon from './use-icon';
 export default {
   name: 'f7-button',
-  render: render,
+  render,
   components: {
-    f7Preloader: f7Preloader,
-    f7UseIcon: f7UseIcon
+    f7Preloader,
+    f7UseIcon
   },
-  props: _extends({
+  props: {
     text: String,
     tabLink: [Boolean, String],
     tabLinkActive: Boolean,
@@ -93,65 +89,70 @@ export default {
     preloader: Boolean,
     preloaderSize: [Number, String],
     preloaderColor: String,
-    loading: Boolean
-  }, iconProps, colorProps, actionsProps, routerProps),
-  setup: function setup(props) {
-    var elRef = ref(null);
+    loading: Boolean,
+    ...iconProps,
+    ...colorProps,
+    ...actionsProps,
+    ...routerProps
+  },
+
+  setup(props) {
+    const elRef = ref(null);
     useTooltip(elRef, props);
     useRouteProps(elRef, props);
-    var icon = computed(function () {
-      return useIcon(props);
-    });
-    var tag = computed(function () {
-      return props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a';
-    });
-    var attrs = computed(function () {
-      var href = props.href,
-          tabLink = props.tabLink,
-          target = props.target,
-          type = props.type;
-      var hrefComputed = href;
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a');
+    const attrs = computed(() => {
+      const {
+        href,
+        tabLink,
+        target,
+        type
+      } = props;
+      let hrefComputed = href;
       if (href === true) hrefComputed = '#';
       if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
 
       return extend({
         href: hrefComputed,
-        target: target,
-        type: type,
+        target,
+        type,
         'data-tab': isStringProp(tabLink) && tabLink || undefined
       }, routerAttrs(props), actionsAttrs(props));
     });
-    var classesComputed = computed(function () {
-      var tabLink = props.tabLink,
-          tabLinkActive = props.tabLinkActive,
-          round = props.round,
-          roundMd = props.roundMd,
-          roundIos = props.roundIos,
-          roundAurora = props.roundAurora,
-          fill = props.fill,
-          fillMd = props.fillMd,
-          fillIos = props.fillIos,
-          fillAurora = props.fillAurora,
-          large = props.large,
-          largeMd = props.largeMd,
-          largeIos = props.largeIos,
-          largeAurora = props.largeAurora,
-          small = props.small,
-          smallMd = props.smallMd,
-          smallIos = props.smallIos,
-          smallAurora = props.smallAurora,
-          raised = props.raised,
-          raisedMd = props.raisedMd,
-          raisedIos = props.raisedIos,
-          raisedAurora = props.raisedAurora,
-          outline = props.outline,
-          outlineMd = props.outlineMd,
-          outlineIos = props.outlineIos,
-          outlineAurora = props.outlineAurora,
-          active = props.active,
-          disabled = props.disabled,
-          preloader = props.preloader,
-          loading = props.loading;
+    const classesComputed = computed(() => {
+      const {
+        tabLink,
+        tabLinkActive,
+        round,
+        roundMd,
+        roundIos,
+        roundAurora,
+        fill,
+        fillMd,
+        fillIos,
+        fillAurora,
+        large,
+        largeMd,
+        largeIos,
+        largeAurora,
+        small,
+        smallMd,
+        smallIos,
+        smallAurora,
+        raised,
+        raisedMd,
+        raisedIos,
+        raisedAurora,
+        outline,
+        outlineMd,
+        outlineIos,
+        outlineAurora,
+        active,
+        disabled,
+        preloader,
+        loading
+      } = props;
       return classNames('button', {
         'tab-link': tabLink || tabLink === '',
         'tab-link-active': tabLinkActive,
@@ -182,15 +183,16 @@ export default {
         'button-outline-md': outlineMd,
         'button-preloader': preloader,
         'button-loading': loading,
-        disabled: disabled
+        disabled
       }, colorClasses(props), routerClasses(props), actionsClasses(props));
     });
     return {
-      tag: tag,
-      elRef: elRef,
-      attrs: attrs,
-      classesComputed: classesComputed,
-      icon: icon
+      tag,
+      elRef,
+      attrs,
+      classesComputed,
+      icon
     };
   }
+
 };

package/components/card-content.js

@@ -0,0 +1,32 @@
+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-card-content',
+  render,
+  props: {
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-content', {
+      'card-content-padding': props.padding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/card-footer.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-card-footer',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-footer', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/card-header.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-card-header',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('card-header', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

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

@@ -1,13 +1,11 @@
-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, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 
 function render(_ctx, _cache) {
-  var _component_f7_card_header = _resolveComponent("f7-card-header");
+  const _component_f7_card_header = _resolveComponent("f7-card-header");
 
-  var _component_f7_card_content = _resolveComponent("f7-card-content");
+  const _component_f7_card_content = _resolveComponent("f7-card-content");
 
-  var _component_f7_card_footer = _resolveComponent("f7-card-footer");
+  const _component_f7_card_footer = _resolveComponent("f7-card-footer");
 
   return _openBlock(), _createBlock("div", {
     ref: "elRef",
@@ -24,24 +22,18 @@ function render(_ctx, _cache) {
   }, [_ctx.hasHeader ? (_openBlock(), _createBlock(_component_f7_card_header, {
     key: 0
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")]),
     _: 3
   })) : _createCommentVNode("", true), _ctx.hasContent ? (_openBlock(), _createBlock(_component_f7_card_content, {
     key: 1,
     padding: _ctx.padding
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")]),
     _: 3
   }, 8, ["padding"])) : _createCommentVNode("", true), _ctx.hasFooter ? (_openBlock(), _createBlock(_component_f7_card_footer, {
     key: 2
   }, {
-    default: _withCtx(function () {
-      return [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")];
-    }),
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")]),
     _: 3
   })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 10, ["data-animate", "data-hide-navbar-on-open", "data-hide-toolbar-on-open", "data-hide-statusbar-on-open", "data-scrollable-el", "data-swipe-to-close", "data-close-by-backdrop-click", "data-backdrop", "data-backdrop-el"]);
 }
@@ -55,13 +47,13 @@ import f7CardContent from './card-content';
 import f7CardFooter from './card-footer';
 export default {
   name: 'f7-card',
-  render: render,
+  render,
   components: {
-    f7CardHeader: f7CardHeader,
-    f7CardContent: f7CardContent,
-    f7CardFooter: f7CardFooter
+    f7CardHeader,
+    f7CardContent,
+    f7CardFooter
   },
-  props: _extends({
+  props: {
     title: [String, Number],
     content: [String, Number],
     footer: [String, Number],
@@ -110,54 +102,57 @@ export default {
     padding: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['card:beforeopen', 'card:open', 'card:opened', 'card:close', 'card:closed', 'update:expandableOpened'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var elRef = ref(null);
 
-    var open = function open() {
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const elRef = ref(null);
+
+    const open = () => {
       if (!elRef.value) return;
       f7.card.open(elRef.value);
     };
 
-    var close = function close() {
+    const close = () => {
       if (!elRef.value) return;
       f7.card.close(elRef.value);
     };
 
-    var onBeforeOpen = function onBeforeOpen(el, prevent) {
+    const onBeforeOpen = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('card:beforeopen', el, prevent);
     };
 
-    var onOpen = function onOpen(el) {
+    const onOpen = el => {
       if (elRef.value !== el) return;
       emit('card:open', el);
       emit('update:expandableOpened', true);
     };
 
-    var onOpened = function onOpened(el, pageEl) {
+    const onOpened = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:opened', el, pageEl);
     };
 
-    var onClose = function onClose(el) {
+    const onClose = el => {
       if (elRef.value !== el) return;
       emit('card:close', el);
     };
 
-    var onClosed = function onClosed(el, pageEl) {
+    const onClosed = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:closed', el, pageEl);
       emit('update:expandableOpened', false);
     };
 
-    onMounted(function () {
+    onMounted(() => {
       if (!props.expandable || !elRef.value) return;
-      f7ready(function () {
+      f7ready(() => {
         if (props.expandable && props.expandableOpened) {
           f7.card.open(elRef.value, false);
         }
@@ -169,46 +164,37 @@ export default {
         f7.on('cardClosed', onClosed);
       });
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       f7.off('cardBeforeOpen', onBeforeOpen);
       f7.off('cardOpen', onOpen);
       f7.off('cardOpened', onOpened);
       f7.off('cardClose', onClose);
       f7.off('cardClosed', onClosed);
     });
-    watch(function () {
-      return props.expandableOpened;
-    }, function (value) {
+    watch(() => props.expandableOpened, value => {
       if (value) {
         open();
       } else {
         close();
       }
     });
-    var hasHeader = computed(function () {
-      return props.title || slots.header;
-    });
-    var hasContent = computed(function () {
-      return props.content || slots.content;
-    });
-    var hasFooter = computed(function () {
-      return props.footer || slots.footer;
-    });
-    var classes = computed(function () {
-      return classNames('card', {
-        'card-outline': props.outline,
-        'card-expandable': props.expandable,
-        'card-expandable-animate-width': props.expandableAnimateWidth,
-        'no-shadow': props.noShadow,
-        'no-border': props.noBorder
-      }, colorClasses(props));
-    });
+    const hasHeader = computed(() => props.title || slots.header);
+    const hasContent = computed(() => props.content || slots.content);
+    const hasFooter = computed(() => props.footer || slots.footer);
+    const classes = computed(() => classNames('card', {
+      'card-outline': props.outline,
+      'card-expandable': props.expandable,
+      'card-expandable-animate-width': props.expandableAnimateWidth,
+      'no-shadow': props.noShadow,
+      'no-border': props.noBorder
+    }, colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes,
-      hasHeader: hasHeader,
-      hasContent: hasContent,
-      hasFooter: hasFooter
+      elRef,
+      classes,
+      hasHeader,
+      hasContent,
+      hasFooter
     };
   }
+
 };