framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/messagebar.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 { h, computed, ref, onMounted, onBeforeUnmount, watch, onUpdated } from 'vue';
 import { classNames, noUndefinedProps } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
@@ -8,7 +6,7 @@ import Link from './link';
 import Input from './input';
 export default {
   name: 'f7-messagebar',
-  props: _extends({
+  props: {
     sheetVisible: Boolean,
     attachmentsVisible: Boolean,
     top: Boolean,
@@ -42,73 +40,72 @@ export default {
     init: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['change', 'input', 'focus', 'blur', 'submit', 'send', 'click', 'messagebar:attachmentdelete', 'messagebar:attachmentclick', 'messagebar:resizepage', 'update:value'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit,
-        slots = _ref.slots;
-    var elRef = ref(null);
-    var areaElRef = ref(null);
-    var f7Messagebar = null;
-    var updateSheetVisible = false;
-    var updateAttachmentsVisible = false;
-
-    var onChange = function onChange(event) {
+
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const elRef = ref(null);
+    const areaElRef = ref(null);
+    let f7Messagebar = null;
+    let updateSheetVisible = false;
+    let updateAttachmentsVisible = false;
+
+    const onChange = event => {
       emit('change', event);
     };
 
-    var onInput = function onInput(event) {
+    const onInput = event => {
       emit('input', event);
       emit('update:value', event.target.value);
     };
 
-    var onFocus = function onFocus(event) {
+    const onFocus = event => {
       emit('focus', event);
     };
 
-    var onBlur = function onBlur(event) {
+    const onBlur = event => {
       emit('blur', event);
     };
 
-    var onClick = function onClick(event) {
-      var inputValue = areaElRef.value.$el;
-      var clear = f7Messagebar ? function () {
+    const onClick = event => {
+      const inputValue = areaElRef.value.$el;
+      const clear = f7Messagebar ? () => {
         f7Messagebar.clear();
-      } : function () {};
+      } : () => {};
       emit('submit', inputValue, clear);
       emit('send', inputValue, clear);
       emit('click', event);
     };
 
-    var onAttachmentDelete = function onAttachmentDelete(instance, attachmentEl, attachmentElIndex) {
+    const onAttachmentDelete = (instance, attachmentEl, attachmentElIndex) => {
       emit('messagebar:attachmentdelete', instance, attachmentEl, attachmentElIndex);
     };
 
-    var onAttachmentClick = function onAttachmentClick(instance, attachmentEl, attachmentElIndex) {
+    const onAttachmentClick = (instance, attachmentEl, attachmentElIndex) => {
       emit('messagebar:attachmentclick', instance, attachmentEl, attachmentElIndex);
     };
 
-    var onResizePage = function onResizePage(instance) {
+    const onResizePage = instance => {
       emit('messagebar:resizepage', instance);
     };
 
-    watch(function () {
-      return props.sheetVisible;
-    }, function () {
+    watch(() => props.sheetVisible, () => {
       if (!props.resizable || !f7Messagebar) return;
       updateSheetVisible = true;
     });
-    watch(function () {
-      return props.attachmentsVisible;
-    }, function () {
+    watch(() => props.attachmentsVisible, () => {
       if (!props.resizable || !f7Messagebar) return;
       updateAttachmentsVisible = true;
     });
-    onMounted(function () {
+    onMounted(() => {
       if (!props.init) return;
       if (!elRef.value) return;
-      var params = noUndefinedProps({
+      const params = noUndefinedProps({
         el: elRef.value,
         top: props.top,
         resizePage: props.resizePage,
@@ -121,11 +118,11 @@ export default {
           resizePage: onResizePage
         }
       });
-      f7ready(function () {
+      f7ready(() => {
         f7Messagebar = f7.messagebar.create(params);
       });
     });
-    onUpdated(function () {
+    onUpdated(() => {
       if (!f7Messagebar) return;
 
       if (updateSheetVisible) {
@@ -140,35 +137,35 @@ export default {
         f7Messagebar.resizePage();
       }
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Messagebar && f7Messagebar.destroy) f7Messagebar.destroy();
       f7Messagebar = null;
     });
-    var classes = computed(function () {
-      return classNames('toolbar', 'messagebar', {
-        'messagebar-attachments-visible': props.attachmentsVisible,
-        'messagebar-sheet-visible': props.sheetVisible
-      }, colorClasses(props));
-    });
-    return function () {
-      var valueProps = {};
+    const classes = computed(() => classNames('toolbar', 'messagebar', {
+      'messagebar-attachments-visible': props.attachmentsVisible,
+      'messagebar-sheet-visible': props.sheetVisible
+    }, colorClasses(props)));
+    return () => {
+      const valueProps = {};
       if ('value' in props) valueProps.value = props.value;
-      var slotsDefault = slots.default,
-          slotsBeforeInner = slots['before-inner'],
-          slotsAfterInner = slots['after-inner'],
-          slotsSendLink = slots['send-link'],
-          slotsInnerStart = slots['inner-start'],
-          slotsInnerEnd = slots['inner-end'],
-          slotsBeforeArea = slots['before-area'],
-          slotsAfterArea = slots['after-area'];
-      var innerEndEls = [];
-      var messagebarAttachmentsEl;
-      var messagebarSheetEl;
+      const {
+        default: slotsDefault,
+        'before-inner': slotsBeforeInner,
+        'after-inner': slotsAfterInner,
+        'send-link': slotsSendLink,
+        'inner-start': slotsInnerStart,
+        'inner-end': slotsInnerEnd,
+        'before-area': slotsBeforeArea,
+        'after-area': slotsAfterArea
+      } = slots;
+      const innerEndEls = [];
+      let messagebarAttachmentsEl;
+      let messagebarSheetEl;
 
       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 && (tag.indexOf('messagebar-attachments') >= 0 || tag === 'F7MessagebarAttachments' || tag === 'f7-messagebar-attachments')) {
             messagebarAttachmentsEl = vnode;
@@ -187,7 +184,7 @@ export default {
         class: 'toolbar-inner'
       }, [slotsInnerStart && slotsInnerStart(), h('div', {
         class: 'messagebar-area'
-      }, [slotsBeforeArea && slotsBeforeArea(), messagebarAttachmentsEl, h(Input, _extends({
+      }, [slotsBeforeArea && slotsBeforeArea(), messagebarAttachmentsEl, h(Input, {
         id: props.textareaId,
         ref: areaElRef,
         type: 'textarea',
@@ -197,13 +194,15 @@ export default {
         name: props.name,
         readonly: props.readonly,
         resizable: props.resizable,
-        onInput: onInput,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur
-      }, valueProps)), slotsAfterArea && slotsAfterArea()]), (props.sendLink && props.sendLink.length > 0 || slotsSendLink) && h(Link, {
-        onClick: onClick
+        onInput,
+        onChange,
+        onFocus,
+        onBlur,
+        ...valueProps
+      }), slotsAfterArea && slotsAfterArea()]), (props.sendLink && props.sendLink.length > 0 || slotsSendLink) && h(Link, {
+        onClick
       }, [slotsSendLink ? slotsSendLink() : props.sendLink]), slotsInnerEnd && slotsInnerEnd(), innerEndEls]), slotsAfterInner && slotsAfterInner(), messagebarSheetEl]);
     };
   }
+
 };

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

package/{esm/components → components}/messages.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,17 +13,19 @@ import { colorClasses, colorProps } from '../shared/mixins';
 import { f7ready, f7 } from '../shared/f7';
 export default {
   name: 'f7-messages',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     autoLayout: {
       type: Boolean,
       default: false
     },
     messages: {
       type: Array,
-      default: function _default() {
+
+      default() {
         return [];
       }
+
     },
     newMessagesFirst: {
       type: Boolean,
@@ -55,16 +55,19 @@ export default {
     init: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots;
-    var f7Messages = null;
-    var childrenBeforeUpdated = null;
-    var elRef = ref(null);
-    onMounted(function () {
+    },
+    ...colorProps
+  },
+
+  setup(props, {
+    slots
+  }) {
+    let f7Messages = null;
+    let childrenBeforeUpdated = null;
+    const elRef = ref(null);
+    onMounted(() => {
       if (!props.init) return;
-      f7ready(function () {
+      f7ready(() => {
         f7Messages = f7.messages.create(noUndefinedProps({
           el: elRef.value,
           autoLayout: props.autoLayout,
@@ -88,30 +91,30 @@ export default {
         }
       });
     });
-    onBeforeUpdate(function () {
+    onBeforeUpdate(() => {
       if (!props.init || !elRef.value) return;
-      var children = elRef.value.children;
+      const children = elRef.value.children;
       if (!children) return;
       childrenBeforeUpdated = children.length;
 
-      for (var i = 0; i < children.length; i += 1) {
+      for (let i = 0; i < children.length; i += 1) {
         children[i].classList.add('message-appeared');
       }
 
-      var childrenAfterUpdate = getChildren(slots);
+      const childrenAfterUpdate = getChildren(slots);
 
       if (f7Messages && props.scrollMessages && childrenBeforeUpdated !== childrenAfterUpdate) {
         f7Messages.setScrollData();
       }
     });
-    onUpdated(function () {
+    onUpdated(() => {
       if (!props.init) return;
       if (!elRef.value) return;
-      var children = elRef.value.children;
+      const children = elRef.value.children;
       if (!children) return;
-      var childerAftterUpdated = children.length;
+      const childerAftterUpdated = children.length;
 
-      for (var i = 0; i < children.length; i += 1) {
+      for (let i = 0; i < children.length; i += 1) {
         if (!children[i].classList.contains('message-appeared')) {
           children[i].classList.add('message-appear-from-bottom');
         }
@@ -125,22 +128,19 @@ export default {
         f7Messages.scrollWithEdgeCheck(true);
       }
     });
-    onBeforeUnmount(function () {
+    onBeforeUnmount(() => {
       if (f7Messages && f7Messages.destroy) f7Messages.destroy();
       f7Messages = null;
     });
-    watch(function () {
-      return props.typing;
-    }, function (newValue) {
+    watch(() => props.typing, newValue => {
       if (!f7Messages) return;
       if (newValue) f7Messages.showTyping();else f7Messages.hideTyping();
     });
-    var classes = computed(function () {
-      return classNames('messages', colorClasses(props));
-    });
+    const classes = computed(() => classNames('messages', colorClasses(props)));
     return {
-      elRef: elRef,
-      classes: classes
+      elRef,
+      classes
     };
   }
+
 };

package/{esm/components → components}/nav-left.js

@@ -1,9 +1,7 @@
-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, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
 
 function render(_ctx, _cache) {
-  var _component_f7_link = _resolveComponent("f7-link");
+  const _component_f7_link = _resolveComponent("f7-link");
 
   return _openBlock(), _createBlock("div", {
     class: _ctx.classes
@@ -26,11 +24,11 @@ import { useTheme } from '../shared/use-theme';
 import f7Link from './link';
 export default {
   name: 'f7-nav-left',
-  render: render,
+  render,
   components: {
-    f7Link: f7Link
+    f7Link
   },
-  props: _extends({
+  props: {
     backLink: [Boolean, String],
     backLinkUrl: String,
     backLinkForce: Boolean,
@@ -38,20 +36,22 @@ export default {
       type: Boolean,
       default: undefined
     },
-    sliding: Boolean
-  }, colorProps),
+    sliding: Boolean,
+    ...colorProps
+  },
   emits: ['back:click', 'click:back'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
 
-    var onBackClick = function onBackClick(event) {
+  setup(props, {
+    emit
+  }) {
+    const onBackClick = event => {
       emit('back:click', event);
       emit('click:back', event);
     };
 
-    var theme = useTheme();
-    var text = computed(function () {
-      var needBackLinkText = props.backLinkShowText;
+    const theme = useTheme();
+    const text = computed(() => {
+      let needBackLinkText = props.backLinkShowText;
       if (typeof needBackLinkText === 'undefined') needBackLinkText = !theme.value.md;
 
       if (props.backLink) {
@@ -60,15 +60,14 @@ export default {
 
       return undefined;
     });
-    var classes = computed(function () {
-      return classNames('left', {
-        sliding: props.sliding
-      }, colorClasses(props));
-    });
+    const classes = computed(() => classNames('left', {
+      sliding: props.sliding
+    }, colorClasses(props)));
     return {
-      classes: classes,
-      onBackClick: onBackClick,
-      text: text
+      classes,
+      onBackClick,
+      text
     };
   }
+
 };

package/components/nav-right.js

@@ -0,0 +1,29 @@
+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-nav-right',
+  render,
+  props: {
+    sliding: Boolean,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('right', {
+      sliding: props.sliding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/{esm/components → components}/nav-title-large.js

@@ -1,7 +1,5 @@
-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";
-var _hoisted_1 = {
+const _hoisted_1 = {
   class: "title-large-text"
 };
 
@@ -16,14 +14,15 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-nav-title-large',
-  render: render,
-  props: _extends({}, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      return classNames('title-large', colorClasses(props));
-    });
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('title-large', colorClasses(props)));
     return {
-      classes: classes
+      classes
     };
   }
+
 };

package/{esm/components → components}/nav-title.js

@@ -1,7 +1,5 @@
-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, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "subtitle"
 };
@@ -17,20 +15,21 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-nav-title',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     title: String,
     subtitle: String,
-    sliding: Boolean
-  }, colorProps),
-  setup: function setup(props) {
-    var classes = computed(function () {
-      return classNames('title', {
-        sliding: props.sliding
-      }, colorClasses(props));
-    });
+    sliding: Boolean,
+    ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('title', {
+      sliding: props.sliding
+    }, colorClasses(props)));
     return {
-      classes: classes
+      classes
     };
   }
+
 };