framework7-vue 7.0.9 → 8.0.0-beta.1

package/components/popover.js

@@ -1,20 +1,16 @@
 import { createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
   class: "popover-angle"
 }, null, -1);
-
 const _hoisted_2 = {
   class: "popover-inner"
 };
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, [_hoisted_1, _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default")])], 2);
 }
-
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -33,6 +29,10 @@ export default {
       type: [String, Object],
       default: undefined
     },
+    angle: {
+      type: Boolean,
+      default: undefined
+    },
     backdrop: {
       type: Boolean,
       default: undefined
@@ -64,43 +64,36 @@ export default {
     ...colorProps
   },
   emits: ['popover:open', 'popover:opened', 'popover:close', 'popover:closed', 'update:opened'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
-    const f7Popover = ref(null); // eslint-disable-next-line
-
+    const f7Popover = ref(null);
+    // eslint-disable-next-line
     let isOpened = props.opened;
     let isClosing = false;
     const elRef = ref(null);
-
     const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('popover:open', instance);
       emit('update:opened', true);
     };
-
     const onOpened = instance => {
       emit('popover:opened', instance);
     };
-
     const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('popover:close', instance);
     };
-
     const onClosed = instance => {
       isClosing = false;
       emit('popover:closed', instance);
       emit('update:opened', false);
     };
-
     watch(() => props.opened, value => {
       if (!f7Popover.value) return;
-
       if (value) {
         f7Popover.value.open();
       } else {
@@ -123,6 +116,7 @@ export default {
         closeByBackdropClick,
         closeByOutsideClick,
         closeOnEscape,
+        angle,
         backdrop,
         backdropEl,
         containerEl,
@@ -132,13 +126,13 @@ export default {
       if (typeof closeByBackdropClick !== 'undefined') popoverParams.closeByBackdropClick = closeByBackdropClick;
       if (typeof closeByOutsideClick !== 'undefined') popoverParams.closeByOutsideClick = closeByOutsideClick;
       if (typeof closeOnEscape !== 'undefined') popoverParams.closeOnEscape = closeOnEscape;
+      if (typeof angle !== 'undefined') popoverParams.angle = angle;
       if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
       if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;
       if (typeof verticalPosition !== 'undefined') popoverParams.verticalPosition = verticalPosition;
       f7ready(() => {
         f7Popover.value = f7.popover.create(popoverParams);
-
         if (props.opened) {
           f7Popover.value.open(targetEl, false);
         }
@@ -148,7 +142,6 @@ export default {
       if (f7Popover.value) {
         f7Popover.value.destroy();
       }
-
       f7Popover.value = null;
     });
     const classes = computed(() => classNames('popover', modalStateClasses({
@@ -160,5 +153,4 @@ export default {
       classes
     };
   }
-
 };

package/components/popup.js

@@ -1,12 +1,10 @@
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
     class: _normalizeClass(_ctx.classes)
   }, [_renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -54,59 +52,48 @@ export default {
     ...colorProps
   },
   emits: ['popup:swipestart', 'popup:swipemove', 'popup:swipeend', 'popup:swipeclose', 'popup:open', 'popup:opened', 'popup:close', 'popup:closed', 'update:opened'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
-    const f7Popup = ref(null); // eslint-disable-next-line
-
+    const f7Popup = ref(null);
+    // eslint-disable-next-line
     let isOpened = props.opened;
     let isClosing = false;
     const elRef = ref(null);
-
     const onSwipeStart = instance => {
       emit('popup:swipestart', instance);
     };
-
     const onSwipeMove = instance => {
       emit('popup:swipemove', instance);
     };
-
     const onSwipeEnd = instance => {
       emit('popup:swipeend', instance);
     };
-
     const onSwipeClose = instance => {
       emit('popup:swipeclose', instance);
     };
-
     const onOpen = instance => {
       isOpened = true;
       isClosing = false;
       emit('popup:open', instance);
       emit('update:opened', true);
     };
-
     const onOpened = instance => {
       emit('popup:opened', instance);
     };
-
     const onClose = instance => {
       isOpened = false;
       isClosing = true;
       emit('popup:close', instance);
     };
-
     const onClosed = instance => {
       isClosing = false;
       emit('popup:closed', instance);
       emit('update:opened', false);
     };
-
     watch(() => props.opened, value => {
       if (!f7Popup.value) return;
-
       if (value) {
         f7Popup.value.open();
       } else {
@@ -148,9 +135,8 @@ export default {
       if (typeof containerEl !== 'undefined') popupParams.containerEl = containerEl;
       f7ready(() => {
         f7Popup.value = f7.popup.create(popupParams);
-
         if (props.opened) {
-          f7Popup.value.open(false);
+          f7Popup.value.open(false, true);
         }
       });
     });
@@ -158,7 +144,6 @@ export default {
       if (f7Popup.value) {
         f7Popup.value.destroy();
       }
-
       f7Popup.value = null;
     });
     const classes = computed(() => classNames('popup', {
@@ -173,5 +158,4 @@ export default {
       classes
     };
   }
-
 };

package/components/preloader.js

@@ -3,7 +3,6 @@ const _hoisted_1 = {
   key: 0,
   class: "preloader-inner"
 };
-
 const _hoisted_2 = /*#__PURE__*/_createElementVNode("svg", {
   viewBox: "0 0 36 36"
 }, [/*#__PURE__*/_createElementVNode("circle", {
@@ -11,38 +10,23 @@ const _hoisted_2 = /*#__PURE__*/_createElementVNode("svg", {
   cy: "18",
   r: "16"
 })], -1);
-
 const _hoisted_3 = [_hoisted_2];
 const _hoisted_4 = {
   key: 1,
   class: "preloader-inner"
 };
-
 const _hoisted_5 = /*#__PURE__*/_createStaticVNode("<span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span><span class=\"preloader-inner-line\"></span>", 8);
-
 const _hoisted_13 = [_hoisted_5];
 const _hoisted_14 = {
   key: 2,
   class: "preloader-inner"
 };
-
-const _hoisted_15 = /*#__PURE__*/_createElementVNode("span", {
-  class: "preloader-inner-circle"
-}, null, -1);
-
-const _hoisted_16 = [_hoisted_15];
-const _hoisted_17 = {
-  key: 3,
-  class: "preloader-inner"
-};
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes),
     style: _normalizeStyle(_ctx.style)
-  }, [_ctx.theme && _ctx.theme.md ? (_openBlock(), _createElementBlock("span", _hoisted_1, _hoisted_3)) : _ctx.theme && _ctx.theme.ios ? (_openBlock(), _createElementBlock("span", _hoisted_4, _hoisted_13)) : _ctx.theme && _ctx.theme.aurora ? (_openBlock(), _createElementBlock("span", _hoisted_14, _hoisted_16)) : !_ctx.theme ? (_openBlock(), _createElementBlock("span", _hoisted_17)) : _createCommentVNode("", true)], 6);
+  }, [_ctx.theme && _ctx.theme.md ? (_openBlock(), _createElementBlock("span", _hoisted_1, _hoisted_3)) : _ctx.theme && _ctx.theme.ios ? (_openBlock(), _createElementBlock("span", _hoisted_4, _hoisted_13)) : !_ctx.theme ? (_openBlock(), _createElementBlock("span", _hoisted_14)) : _createCommentVNode("", true)], 6);
 }
-
 import { computed } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -54,24 +38,22 @@ export default {
     size: [Number, String],
     ...colorProps
   },
-
   setup(props) {
     const theme = useTheme();
-    const classes = computed(() => classNames('preloader', colorClasses(props)));
+    const classes = computed(() => classNames('preloader', {
+      preloader: true
+    }, colorClasses(props)));
     const style = computed(() => {
       const preloaderStyle = {};
       let sizeComputed = props.size;
-
       if (sizeComputed && typeof sizeComputed === 'string' && sizeComputed.indexOf('px') >= 0) {
         sizeComputed = sizeComputed.replace('px', '');
       }
-
       if (sizeComputed) {
         preloaderStyle.width = `${sizeComputed}px`;
         preloaderStyle.height = `${sizeComputed}px`;
         preloaderStyle['--f7-preloader-size'] = `${sizeComputed}px`;
       }
-
       return preloaderStyle;
     });
     return {
@@ -80,5 +62,4 @@ export default {
       theme
     };
   }
-
 };

package/components/progressbar.js

@@ -1,6 +1,5 @@
 import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-progress"];
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("span", {
     ref: "elRef",
@@ -10,7 +9,6 @@ function render(_ctx, _cache) {
     style: _normalizeStyle(_ctx.transformStyle)
   }, null, 4)], 10, _hoisted_1);
 }
-
 import { computed, ref } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -23,15 +21,12 @@ export default {
     infinite: Boolean,
     ...colorProps
   },
-
   setup(props) {
     const elRef = ref(null);
-
     const set = (newProgress, speed) => {
       if (!f7) return;
       f7.progressbar.set(elRef.value, newProgress, speed);
     };
-
     const transformStyle = computed(() => ({
       transform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : '',
       WebkitTransform: props.progress ? `translate3d(${-100 + props.progress}%, 0, 0)` : ''
@@ -46,5 +41,4 @@ export default {
       elRef
     };
   }
-
 };

package/components/radio.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-radio"
 }, 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 } from 'vue';
 import { classNames } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -40,18 +37,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);
     };
-
     const classes = computed(() => classNames({
       radio: true,
       disabled: props.disabled
@@ -62,5 +56,4 @@ export default {
       onChange
     };
   }
-
 };

package/components/range.js

@@ -1,6 +1,5 @@
 import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = ["name"];
-
 function render(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "elRef",
@@ -12,7 +11,6 @@ function render(_ctx, _cache) {
     name: _ctx.name
   }, null, 8, _hoisted_1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
 }
-
 import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { classNames, noUndefinedProps } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -86,7 +84,6 @@ export default {
     ...colorProps
   },
   emits: ['range:change', 'range:changed', 'rangeChange', 'rangeChanged', 'update:value'],
-
   setup(props, _ref) {
     let {
       emit
@@ -96,7 +93,6 @@ export default {
     watch(() => props.value, newValue => {
       if (!f7Range) return;
       const rangeValue = f7Range.value;
-
       if (Array.isArray(newValue) && Array.isArray(rangeValue)) {
         if (rangeValue[0] !== newValue[0] || rangeValue[1] !== newValue[1]) {
           f7Range.setValue(newValue);
@@ -116,13 +112,11 @@ export default {
               emit('range:change', val);
               emit('rangeChange', val);
             },
-
             changed(range, val) {
               emit('range:changed', val);
               emit('rangeChanged', val);
               emit('update:value', val);
             }
-
           }
         }));
       });
@@ -142,5 +136,4 @@ export default {
       classes
     };
   }
-
 };

package/components/routable-modals.js

@@ -2,7 +2,6 @@ import { ref, onMounted, onBeforeUnmount, onUpdated, toRaw, h } from 'vue';
 import { f7events, f7routers, f7 } from '../shared/f7.js';
 export default {
   name: 'f7-routable-modals',
-
   setup() {
     const elRef = ref(null);
     const modals = ref([]);
@@ -11,7 +10,6 @@ export default {
       routerData.value = {
         modals,
         el: elRef.value,
-
         setModals(newModals) {
           newModals.forEach(modal => {
             // eslint-disable-next-line
@@ -19,7 +17,6 @@ export default {
           });
           modals.value = [...newModals];
         }
-
       };
       f7routers.modals = routerData.value;
     });
@@ -32,9 +29,7 @@ export default {
       f7routers.modals = null;
       routerData.value = null;
     });
-
     const getComponent = modal => toRaw(modal.component);
-
     const getProps = modal => {
       const {
         component: modalComponent,
@@ -48,7 +43,6 @@ export default {
       });
       return passProps;
     };
-
     return () => {
       return h('div', {
         ref: elRef,
@@ -61,5 +55,4 @@ export default {
       })]);
     };
   }
-
 };

package/components/row.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';
@@ -37,19 +35,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);
@@ -69,5 +64,4 @@ export default {
       elRef
     };
   }
-
 };

package/components/searchbar.d.ts

@@ -5,14 +5,6 @@ import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
 declare const Searchbar: DefineComponent<
   {
     
-    noShadow: {
-      type: BooleanConstructor;
-    },
-
-    noHairline: {
-      type: BooleanConstructor;
-    },
-
     value: {
       type: StringConstructor | NumberConstructor | ArrayConstructor;
     },
@@ -33,6 +25,11 @@ declare const Searchbar: DefineComponent<
       type: StringConstructor | ObjectConstructor;
     },
 
+    outline: {
+      type: any;
+      default: boolean;
+    },
+
     form: {
       type: BooleanConstructor;
       default: boolean;

package/components/searchbar.js

@@ -6,11 +6,9 @@ const _hoisted_2 = {
   class: "searchbar-input-wrap"
 };
 const _hoisted_3 = ["value", "placeholder", "spellcheck"];
-
 const _hoisted_4 = /*#__PURE__*/_createElementVNode("i", {
   class: "searchbar-icon"
 }, null, -1);
-
 function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
     ref: "elRef",
@@ -48,9 +46,8 @@ function render(_ctx, _cache) {
       })
     }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")]),
     _: 3
-  }, 8, ["class", "onSubmit"]);
+  }, 40, ["class", "onSubmit"]);
 }
-
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
 import { classNames, noUndefinedProps } from '../shared/utils.js';
 import { colorClasses, colorProps } from '../shared/mixins.js';
@@ -59,8 +56,10 @@ export default {
   name: 'f7-searchbar',
   render,
   props: {
-    noShadow: Boolean,
-    noHairline: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
     form: {
       type: Boolean,
       default: true
@@ -109,7 +108,7 @@ export default {
     },
     searchGroupTitle: {
       type: String,
-      default: '.item-divider, .list-group-title'
+      default: '.list-group-title'
     },
     foundEl: {
       type: [String, Object],
@@ -159,68 +158,54 @@ export default {
     ...colorProps
   },
   emits: ['change', 'input', 'focus', 'blur', 'submit', 'click:clear', 'click:disable', 'searchbar:search', 'searchbar:clear', 'searchbar:enable', 'searchbar:disable', 'update:value'],
-
   setup(props, _ref) {
     let {
       emit
     } = _ref;
     let f7Searchbar = null;
     const elRef = ref(null);
-
     const search = query => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.search(query);
     };
-
     const enable = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.enable();
     };
-
     const disable = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.disable();
     };
-
     const toggle = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.toggle();
     };
-
     const clear = () => {
       if (!f7Searchbar) return undefined;
       return f7Searchbar.clear();
     };
-
     const onChange = event => {
       emit('change', event);
     };
-
     const onInput = event => {
       emit('input', event);
       emit('update:value', event.target.value);
     };
-
     const onFocus = event => {
       emit('focus', event);
     };
-
     const onBlur = event => {
       emit('blur', event);
     };
-
     const onSubmit = event => {
       emit('submit', event);
     };
-
     const onClearButtonClick = event => {
       emit('click:clear', event);
     };
-
     const onDisableButtonClick = event => {
       emit('click:disable', event);
     };
-
     onMounted(() => {
       if (!props.init) return;
       f7ready(() => {
@@ -250,19 +235,15 @@ export default {
             search(searchbar, query, previousQuery) {
               emit('searchbar:search', searchbar, query, previousQuery);
             },
-
             clear(searchbar, previousQuery) {
               emit('searchbar:clear', searchbar, previousQuery);
             },
-
             enable(searchbar) {
               emit('searchbar:enable', searchbar);
             },
-
             disable(searchbar) {
               emit('searchbar:disable', searchbar);
             }
-
           }
         });
         Object.keys(params).forEach(key => {
@@ -279,8 +260,7 @@ export default {
     });
     const classes = computed(() => classNames('searchbar', {
       'searchbar-inline': props.inline,
-      'no-shadow': props.noShadow,
-      'no-hairline': props.noHairline,
+      'no-outline': !props.outline,
       'searchbar-expandable': props.expandable
     }, colorClasses(props)));
     const tag = computed(() => props.form ? 'form' : 'div');
@@ -302,5 +282,4 @@ export default {
       onDisableButtonClick
     };
   }
-
 };