framework7-vue 7.0.9 → 8.0.0-beta.1

package/components/button.d.ts

@@ -37,10 +37,6 @@ declare const Button: DefineComponent<
       type: BooleanConstructor;
     },
 
-    roundAurora: {
-      type: BooleanConstructor;
-    },
-
     fill: {
       type: BooleanConstructor;
     },
@@ -53,39 +49,39 @@ declare const Button: DefineComponent<
       type: BooleanConstructor;
     },
 
-    fillAurora: {
+    tonal: {
       type: BooleanConstructor;
     },
 
-    large: {
+    tonalMd: {
       type: BooleanConstructor;
     },
 
-    largeMd: {
+    tonalIos: {
       type: BooleanConstructor;
     },
 
-    largeIos: {
+    large: {
       type: BooleanConstructor;
     },
 
-    largeAurora: {
+    largeMd: {
       type: BooleanConstructor;
     },
 
-    small: {
+    largeIos: {
       type: BooleanConstructor;
     },
 
-    smallMd: {
+    small: {
       type: BooleanConstructor;
     },
 
-    smallIos: {
+    smallMd: {
       type: BooleanConstructor;
     },
 
-    smallAurora: {
+    smallIos: {
       type: BooleanConstructor;
     },
 
@@ -101,10 +97,6 @@ declare const Button: DefineComponent<
       type: BooleanConstructor;
     },
 
-    raisedAurora: {
-      type: BooleanConstructor;
-    },
-
     outline: {
       type: BooleanConstructor;
     },
@@ -117,10 +109,6 @@ declare const Button: DefineComponent<
       type: BooleanConstructor;
     },
 
-    outlineAurora: {
-      type: BooleanConstructor;
-    },
-
     active: {
       type: BooleanConstructor;
     },
@@ -178,10 +166,6 @@ declare const Button: DefineComponent<
       type: StringConstructor;
     },
 
-    iconAurora: {
-      type: StringConstructor;
-    },
-
     iconColor: {
       type: StringConstructor;
     },

package/components/button.js

@@ -5,12 +5,9 @@ const _hoisted_1 = {
 const _hoisted_2 = {
   key: 1
 };
-
 function render(_ctx, _cache) {
   const _component_f7_preloader = _resolveComponent("f7-preloader");
-
   const _component_f7_use_icon = _resolveComponent("f7-use-icon");
-
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
     ref: "elRef",
     class: _ctx.classesComputed
@@ -32,7 +29,6 @@ function render(_ctx, _cache) {
     _: 3
   }, 16, ["class"]);
 }
-
 import { ref, computed } from 'vue';
 import { classNames, extend, isStringProp } from '../shared/utils.js';
 import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses, iconProps, colorProps, actionsProps, routerProps } from '../shared/mixins.js';
@@ -61,27 +57,24 @@ export default {
     round: Boolean,
     roundMd: Boolean,
     roundIos: Boolean,
-    roundAurora: Boolean,
     fill: Boolean,
     fillMd: Boolean,
     fillIos: Boolean,
-    fillAurora: Boolean,
+    tonal: Boolean,
+    tonalMd: Boolean,
+    tonalIos: Boolean,
     large: Boolean,
     largeMd: Boolean,
     largeIos: Boolean,
-    largeAurora: Boolean,
     small: Boolean,
     smallMd: Boolean,
     smallIos: Boolean,
-    smallAurora: Boolean,
     raised: Boolean,
     raisedMd: Boolean,
     raisedIos: Boolean,
-    raisedAurora: Boolean,
     outline: Boolean,
     outlineMd: Boolean,
     outlineIos: Boolean,
-    outlineAurora: Boolean,
     active: Boolean,
     disabled: Boolean,
     tooltip: String,
@@ -95,7 +88,6 @@ export default {
     ...actionsProps,
     ...routerProps
   },
-
   setup(props) {
     const elRef = ref(null);
     useTooltip(elRef, props);
@@ -112,7 +104,6 @@ export default {
       let hrefComputed = href;
       if (href === true) hrefComputed = '#';
       if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
-
       return extend({
         href: hrefComputed,
         target,
@@ -127,27 +118,24 @@ export default {
         round,
         roundMd,
         roundIos,
-        roundAurora,
         fill,
         fillMd,
         fillIos,
-        fillAurora,
+        tonal,
+        tonalMd,
+        tonalIos,
         large,
         largeMd,
         largeIos,
-        largeAurora,
         small,
         smallMd,
         smallIos,
-        smallAurora,
         raised,
         raisedMd,
         raisedIos,
-        raisedAurora,
         outline,
         outlineMd,
         outlineIos,
-        outlineAurora,
         active,
         disabled,
         preloader,
@@ -158,28 +146,25 @@ export default {
         'tab-link-active': tabLinkActive,
         'button-round': round,
         'button-round-ios': roundIos,
-        'button-round-aurora': roundAurora,
         'button-round-md': roundMd,
         'button-fill': fill,
         'button-fill-ios': fillIos,
-        'button-fill-aurora': fillAurora,
         'button-fill-md': fillMd,
+        'button-tonal': tonal,
+        'button-tonal-ios': tonalIos,
+        'button-tonal-md': tonalMd,
         'button-large': large,
         'button-large-ios': largeIos,
-        'button-large-aurora': largeAurora,
         'button-large-md': largeMd,
         'button-small': small,
         'button-small-ios': smallIos,
-        'button-small-aurora': smallAurora,
         'button-small-md': smallMd,
         'button-raised': raised,
         'button-raised-ios': raisedIos,
-        'button-raised-aurora': raisedAurora,
         'button-raised-md': raisedMd,
         'button-active': active,
         'button-outline': outline,
         'button-outline-ios': outlineIos,
-        'button-outline-aurora': outlineAurora,
         'button-outline-md': outlineMd,
         'button-preloader': preloader,
         'button-loading': loading,
@@ -194,5 +179,4 @@ export default {
       icon
     };
   }
-
 };

package/components/card-content.js

@@ -1,11 +1,9 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -19,7 +17,6 @@ export default {
     },
     ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('card-content', {
       'card-content-padding': props.padding
@@ -28,5 +25,4 @@ export default {
       classes
     };
   }
-
 };

package/components/card-footer.js

@@ -1,25 +1,22 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_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-card-footer',
   render,
-  props: { ...colorProps
+  props: {
+    ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('card-footer', colorClasses(props)));
     return {
       classes
     };
   }
-
 };

package/components/card-header.js

@@ -1,25 +1,22 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_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-card-header',
   render,
-  props: { ...colorProps
+  props: {
+    ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('card-header', colorClasses(props)));
     return {
       classes
     };
   }
-
 };

package/components/card.d.ts

@@ -17,27 +17,39 @@ declare const Card: DefineComponent<
       type: StringConstructor | NumberConstructor;
     },
 
+    raised: {
+      type: BooleanConstructor;
+    },
+
     outline: {
       type: BooleanConstructor;
     },
 
-    expandable: {
+    outlineIos: {
       type: BooleanConstructor;
     },
 
-    expandableAnimateWidth: {
+    outlineMd: {
       type: BooleanConstructor;
     },
 
-    expandableOpened: {
+    headerDivider: {
       type: BooleanConstructor;
     },
 
-    noShadow: {
+    footerDivider: {
       type: BooleanConstructor;
     },
 
-    noBorder: {
+    expandable: {
+      type: BooleanConstructor;
+    },
+
+    expandableAnimateWidth: {
+      type: BooleanConstructor;
+    },
+
+    expandableOpened: {
       type: BooleanConstructor;
     },
 

package/components/card.js

@@ -1,13 +1,9 @@
 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, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["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"];
-
 function render(_ctx, _cache) {
   const _component_f7_card_header = _resolveComponent("f7-card-header");
-
   const _component_f7_card_content = _resolveComponent("f7-card-content");
-
   const _component_f7_card_footer = _resolveComponent("f7-card-footer");
-
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes),
@@ -38,7 +34,6 @@ function render(_ctx, _cache) {
     _: 3
   })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
 }
-
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -58,7 +53,12 @@ export default {
     title: [String, Number],
     content: [String, Number],
     footer: [String, Number],
+    raised: Boolean,
     outline: Boolean,
+    outlineIos: Boolean,
+    outlineMd: Boolean,
+    headerDivider: Boolean,
+    footerDivider: Boolean,
     expandable: Boolean,
     expandableAnimateWidth: Boolean,
     expandableOpened: Boolean,
@@ -98,8 +98,6 @@ export default {
       type: String,
       default: undefined
     },
-    noShadow: Boolean,
-    noBorder: Boolean,
     padding: {
       type: Boolean,
       default: true
@@ -107,58 +105,48 @@ export default {
     ...colorProps
   },
   emits: ['card:beforeopen', 'card:open', 'card:opened', 'card:close', 'card:closed', 'update:expandableOpened'],
-
   setup(props, _ref) {
     let {
       emit,
       slots
     } = _ref;
     const elRef = ref(null);
-
     const open = () => {
       if (!elRef.value) return;
       f7.card.open(elRef.value);
     };
-
     const close = () => {
       if (!elRef.value) return;
       f7.card.close(elRef.value);
     };
-
     const onBeforeOpen = (el, prevent) => {
       if (elRef.value !== el) return;
       emit('card:beforeopen', el, prevent);
     };
-
     const onOpen = el => {
       if (elRef.value !== el) return;
       emit('card:open', el);
       emit('update:expandableOpened', true);
     };
-
     const onOpened = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:opened', el, pageEl);
     };
-
     const onClose = el => {
       if (elRef.value !== el) return;
       emit('card:close', el);
     };
-
     const onClosed = (el, pageEl) => {
       if (elRef.value !== el) return;
       emit('card:closed', el, pageEl);
       emit('update:expandableOpened', false);
     };
-
     onMounted(() => {
       if (!props.expandable || !elRef.value) return;
       f7ready(() => {
         if (props.expandable && props.expandableOpened) {
           f7.card.open(elRef.value, false);
         }
-
         f7.on('cardBeforeOpen', onBeforeOpen);
         f7.on('cardOpen', onOpen);
         f7.on('cardOpened', onOpened);
@@ -184,11 +172,14 @@ export default {
     const hasContent = computed(() => props.content || slots.content);
     const hasFooter = computed(() => props.footer || slots.footer);
     const classes = computed(() => classNames('card', {
+      'card-raised': props.raised,
       'card-outline': props.outline,
+      'card-outline-ios': props.outlineIos,
+      'card-outline-md': props.outlineMd,
       'card-expandable': props.expandable,
       'card-expandable-animate-width': props.expandableAnimateWidth,
-      'no-shadow': props.noShadow,
-      'no-border': props.noBorder
+      'card-header-divider': props.headerDivider,
+      'card-footer-divider': props.footerDivider
     }, colorClasses(props)));
     return {
       elRef,
@@ -198,5 +189,4 @@ export default {
       hasFooter
     };
   }
-
 };

package/components/checkbox.js

@@ -1,10 +1,8 @@
 import { createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["name", "value", "disabled", "readonly", "checked"];
-
 const _hoisted_2 = /*#__PURE__*/_createElementVNode("i", {
   class: "icon-checkbox"
 }, null, -1);
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("label", {
     class: _normalizeClass(_ctx.classes)
@@ -21,7 +19,6 @@ function render(_ctx, _cache) {
     })
   }, null, 40, _hoisted_1), _hoisted_2, _renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { ref, computed, onMounted, watch } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -41,18 +38,15 @@ export default {
     ...colorProps
   },
   emits: ['update:checked', 'change'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     const inputElRef = ref(null);
-
     const onChange = event => {
       emit('update:checked', event.target.checked);
       emit('change', event);
     };
-
     onMounted(() => {
       if (inputElRef.value) {
         inputElRef.value.indeterminate = !!props.indeterminate;
@@ -73,5 +67,4 @@ export default {
       onChange
     };
   }
-
 };

package/components/chip.d.ts

@@ -57,10 +57,6 @@ declare const Chip: DefineComponent<
       type: StringConstructor;
     },
 
-    iconAurora: {
-      type: StringConstructor;
-    },
-
     iconColor: {
       type: StringConstructor;
     },

package/components/chip.js

@@ -3,10 +3,8 @@ const _hoisted_1 = {
   key: 1,
   class: "chip-label"
 };
-
 function render(_ctx, _cache) {
   const _component_f7_use_icon = _resolveComponent("f7-use-icon");
-
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
@@ -24,7 +22,6 @@ function render(_ctx, _cache) {
     })
   })) : _createCommentVNode("", true)], 2);
 }
-
 import { ref, computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps, iconProps } from '../shared/mixins.js';
@@ -50,18 +47,15 @@ export default {
     ...colorProps
   },
   emits: ['delete'],
-
   setup(props, _ref) {
     let {
       slots,
       emit
     } = _ref;
     const elRef = ref(null);
-
     const onDeleteClick = event => {
       emit('delete', event);
     };
-
     useTooltip(elRef, props);
     const icon = computed(() => useIcon(props));
     const mediaClasses = computed(() => classNames('chip-media', props.mediaTextColor && `text-color-${props.mediaTextColor}`, props.mediaBgColor && `bg-color-${props.mediaBgColor}`));
@@ -84,5 +78,4 @@ export default {
       onDeleteClick
     };
   }
-
 };

package/components/col.js

@@ -3,17 +3,15 @@ const _hoisted_1 = {
   key: 0,
   class: "resize-handler"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, {
-    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createElementBlock("span", _hoisted_1)) : _createCommentVNode("", true)]),
-    _: 3
-  }, 8, ["class"]);
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.resizable && _ctx.resizableHandler ? (_openBlock(), _createElementBlock("span", _hoisted_1)) : _createCommentVNode("v-if", true)]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]);
 }
-
 import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -55,19 +53,16 @@ export default {
     ...colorProps
   },
   emits: ['grid:resize'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     const elRef = ref(null);
-
     const onResize = el => {
       if (el === elRef.value) {
         emit('grid:resize');
       }
     };
-
     onMounted(() => {
       f7ready(() => {
         f7.on('gridResize', onResize);
@@ -93,5 +88,4 @@ export default {
       elRef
     };
   }
-
 };

package/components/fab-backdrop.js

@@ -1,25 +1,22 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_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-fab-backdrop',
   render,
-  props: { ...colorProps
+  props: {
+    ...colorProps
   },
-
   setup(props) {
     const classes = computed(() => classNames('fab-backdrop', colorClasses(props)));
     return {
       classes
     };
   }
-
 };

package/components/fab-button.js

@@ -4,7 +4,6 @@ const _hoisted_2 = {
   key: 0,
   class: "fab-label"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("a", {
     ref: "elRef",
@@ -15,7 +14,6 @@ function render(_ctx, _cache) {
     })
   }, [_renderSlot(_ctx.$slots, "default"), _ctx.label ? (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.label), 1)) : _createCommentVNode("", true)], 10, _hoisted_1);
 }
-
 import { computed, ref } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -32,17 +30,14 @@ export default {
     ...colorProps
   },
   emits: ['click'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     const elRef = ref(null);
-
     const onClick = e => {
       emit('click', e);
     };
-
     useTooltip(elRef, props);
     const classes = computed(() => classNames({
       'fab-close': props.fabClose,
@@ -54,5 +49,4 @@ export default {
       elRef
     };
   }
-
 };