framework7-vue 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/menu-item.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, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
-var _hoisted_1 = {
+const _hoisted_1 = {
   key: 0,
   class: "menu-item-content"
 };
 
 function render(_ctx, _cache) {
-  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",
@@ -15,12 +13,10 @@ function render(_ctx, _cache) {
   }, _ctx.attrs, {
     onClick: _ctx.onClick
   }), {
-    default: _withCtx(function () {
-      return [_ctx.text || _ctx.$slots.text || _ctx.icon ? (_openBlock(), _createBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
-        key: 0,
-        icon: _ctx.icon
-      }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "text")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")];
-    }),
+    default: _withCtx(() => [_ctx.text || _ctx.$slots.text || _ctx.icon ? (_openBlock(), _createBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+      key: 0,
+      icon: _ctx.icon
+    }, null, 8, ["icon"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "text")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")]),
     _: 3
   }, 16, ["class", "onClick"]);
 }
@@ -35,11 +31,11 @@ import { useTooltip } from '../shared/use-tooltip';
 import f7UseIcon from './use-icon';
 export default {
   name: 'f7-menu-item',
-  render: render,
+  render,
   components: {
-    f7UseIcon: f7UseIcon
+    f7UseIcon
   },
-  props: _extends({
+  props: {
     text: String,
     iconOnly: Boolean,
     href: String,
@@ -47,58 +43,58 @@ export default {
     target: String,
     dropdown: Boolean,
     tooltip: String,
-    tooltipTrigger: String
-  }, colorProps, routerProps, actionsProps, iconProps),
+    tooltipTrigger: String,
+    ...colorProps,
+    ...routerProps,
+    ...actionsProps,
+    ...iconProps
+  },
   emits: ['click', 'menu:opened', 'menu:closed'],
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots,
-        emit = _ref.emit;
-    var elRef = ref(null);
+
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const elRef = ref(null);
     useTooltip(elRef, props);
 
-    var onClick = function onClick(e) {
+    const onClick = e => {
       emit('click', e);
     };
 
-    var onOpened = function onOpened(el) {
+    const onOpened = el => {
       if (elRef.value !== el) return;
       emit('menu:opened', el);
     };
 
-    var onClosed = function onClosed(el) {
+    const onClosed = el => {
       if (elRef.value !== el) return;
       emit('menu:closed', el);
     };
 
     useRouteProps(elRef, props);
 
-    var attachEvents = function attachEvents() {
-      f7ready(function () {
+    const attachEvents = () => {
+      f7ready(() => {
         f7.on('menuOpened', onOpened);
         f7.on('menuClosed', onClosed);
       });
     };
 
-    var detachEvents = function detachEvents() {
+    const detachEvents = () => {
       f7.off('menuOpened', onOpened);
       f7.off('menuClosed', onOpened);
     };
 
-    onMounted(function () {
-      return attachEvents();
-    });
-    onBeforeUnmount(function () {
-      return detachEvents();
-    });
-    var icon = computed(function () {
-      return useIcon(props);
-    });
-    var tag = computed(function () {
-      var isLink = props.link || props.href || props.href === '';
+    onMounted(() => attachEvents());
+    onBeforeUnmount(() => detachEvents());
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => {
+      const isLink = props.link || props.href || props.href === '';
       return isLink ? 'a' : 'div';
     });
-    var classes = computed(function () {
-      var iconOnlyComputed;
+    const classes = computed(() => {
+      let iconOnlyComputed;
 
       if (props.iconOnly || !props.text && !slots.text) {
         iconOnlyComputed = true;
@@ -106,28 +102,31 @@ export default {
         iconOnlyComputed = false;
       }
 
-      var isDropdown = props.dropdown || props.dropdown === '';
+      const isDropdown = props.dropdown || props.dropdown === '';
       return classNames({
         'menu-item': true,
         'menu-item-dropdown': isDropdown,
         'icon-only': iconOnlyComputed
       }, colorClasses(props), routerClasses(props), actionsClasses(props));
     });
-    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 {
-      tag: tag,
-      classes: classes,
-      attrs: attrs,
-      icon: icon,
-      onClick: onClick,
-      elRef: elRef
+      tag,
+      classes,
+      attrs,
+      icon,
+      onClick,
+      elRef
     };
   }
+
 };

package/components/menu.js

@@ -0,0 +1,28 @@
+import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  class: "menu-inner"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes
+  }, [_createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")])], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-menu',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('menu', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};

package/components/message.js

@@ -0,0 +1,167 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+const _hoisted_1 = {
+  class: "message-content"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "message-image"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "message-text-header"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "message-typing-indicator"
+};
+
+const _hoisted_5 = /*#__PURE__*/_createVNode("div", null, null, -1);
+
+const _hoisted_6 = /*#__PURE__*/_createVNode("div", null, null, -1);
+
+const _hoisted_7 = /*#__PURE__*/_createVNode("div", null, null, -1);
+
+const _hoisted_8 = {
+  key: 3,
+  class: "message-text-footer"
+};
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("div", {
+    class: _ctx.classes,
+    onClick: _cache[7] || (_cache[7] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+  }, [_renderSlot(_ctx.$slots, "start"), _ctx.hasAvatar ? (_openBlock(), _createBlock("div", {
+    key: 0,
+    class: "message-avatar",
+    style: {
+      backgroundImage: _ctx.avatar && `url(${_ctx.avatar})`
+    },
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onAvatarClick && _ctx.onAvatarClick(...args))
+  }, [_renderSlot(_ctx.$slots, "avatar")], 4)) : _createCommentVNode("", true), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "content-start"), _ctx.hasName ? (_openBlock(), _createBlock("div", {
+    key: 0,
+    class: "message-name",
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onNameClick && _ctx.onNameClick(...args))
+  }, [_createTextVNode(_toDisplayString(_ctx.name) + " ", 1), _renderSlot(_ctx.$slots, "name")])) : _createCommentVNode("", true), _ctx.hasHeader ? (_openBlock(), _createBlock("div", {
+    key: 1,
+    class: "message-header",
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onHeaderClick && _ctx.onHeaderClick(...args))
+  }, [_createTextVNode(_toDisplayString(_ctx.header) + " ", 1), _renderSlot(_ctx.$slots, "header")])) : _createCommentVNode("", true), _createVNode("div", {
+    class: "message-bubble",
+    onClick: _cache[5] || (_cache[5] = (...args) => _ctx.onBubbleClick && _ctx.onBubbleClick(...args))
+  }, [_renderSlot(_ctx.$slots, "bubble-start"), _ctx.hasImage ? (_openBlock(), _createBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "image", {}, () => [_createVNode("img", {
+    src: _ctx.image
+  }, null, 8, ["src"])])])) : _createCommentVNode("", true), _ctx.hasTextHeader ? (_openBlock(), _createBlock("div", _hoisted_3, [_createTextVNode(_toDisplayString(_ctx.textHeader) + " ", 1), _renderSlot(_ctx.$slots, "text-header")])) : _createCommentVNode("", true), _ctx.hasText ? (_openBlock(), _createBlock("div", {
+    key: 2,
+    class: "message-text",
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onTextClick && _ctx.onTextClick(...args))
+  }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _ctx.typing ? (_openBlock(), _createBlock("div", _hoisted_4, [_hoisted_5, _hoisted_6, _hoisted_7])) : _createCommentVNode("", true)])) : _createCommentVNode("", true), _ctx.hasTextFooter ? (_openBlock(), _createBlock("div", _hoisted_8, [_createTextVNode(_toDisplayString(_ctx.textFooter) + " ", 1), _renderSlot(_ctx.$slots, "text-footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "bubble-end"), _renderSlot(_ctx.$slots, "default")]), _ctx.hasFooter ? (_openBlock(), _createBlock("div", {
+    key: 2,
+    class: "message-footer",
+    onClick: _cache[6] || (_cache[6] = (...args) => _ctx.onFooterClick && _ctx.onFooterClick(...args))
+  }, [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "end")], 2);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-message',
+  render,
+  props: {
+    text: String,
+    name: String,
+    avatar: String,
+    type: {
+      type: String,
+      default: 'sent'
+    },
+    image: String,
+    header: String,
+    footer: String,
+    textHeader: String,
+    textFooter: String,
+    first: Boolean,
+    last: Boolean,
+    tail: Boolean,
+    sameName: Boolean,
+    sameHeader: Boolean,
+    sameFooter: Boolean,
+    sameAvatar: Boolean,
+    typing: Boolean,
+    ...colorProps
+  },
+  emits: ['click', 'click:name', 'click:text', 'click:avatar', 'click:header', 'click:footer', 'click:bubble'],
+
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const onClick = event => {
+      emit('click', event);
+    };
+
+    const onNameClick = event => {
+      emit('click:name', event);
+    };
+
+    const onTextClick = event => {
+      emit('click:text', event);
+    };
+
+    const onAvatarClick = event => {
+      emit('click:avatar', event);
+    };
+
+    const onHeaderClick = event => {
+      emit('click:header', event);
+    };
+
+    const onFooterClick = event => {
+      emit('click:footer', event);
+    };
+
+    const onBubbleClick = event => {
+      emit('click:bubble', event);
+    };
+
+    const classes = computed(() => classNames('message', {
+      'message-sent': props.type === 'sent',
+      'message-received': props.type === 'received',
+      'message-typing': props.typing,
+      'message-first': props.first,
+      'message-last': props.last,
+      'message-tail': props.tail,
+      'message-same-name': props.sameName,
+      'message-same-header': props.sameHeader,
+      'message-same-footer': props.sameFooter,
+      'message-same-avatar': props.sameAvatar
+    }, colorClasses(props)));
+    const hasAvatar = computed(() => slots.avatar || props.avatar);
+    const hasName = computed(() => slots.name || props.name);
+    const hasHeader = computed(() => slots.header || props.header);
+    const hasImage = computed(() => slots.image || props.image);
+    const hasTextHeader = computed(() => slots['text-header'] || props.textHeader);
+    const hasText = computed(() => slots.text || props.text || props.typing);
+    const hasTextFooter = computed(() => slots['text-footer'] || props.textFooter);
+    const hasFooter = computed(() => slots.footer || props.footer);
+    return {
+      classes,
+      onClick,
+      onNameClick,
+      onTextClick,
+      onAvatarClick,
+      onHeaderClick,
+      onFooterClick,
+      onBubbleClick,
+      hasAvatar,
+      hasName,
+      hasHeader,
+      hasImage,
+      hasTextHeader,
+      hasText,
+      hasTextFooter,
+      hasFooter
+    };
+  }
+
+};

package/{esm/components → components}/messagebar-attachment.js

@@ -1,22 +1,16 @@
-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 { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
 
 function render(_ctx, _cache) {
   return _openBlock(), _createBlock("div", {
     class: _ctx.classes,
-    onClick: _cache[2] || (_cache[2] = function () {
-      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [_ctx.image ? (_openBlock(), _createBlock("img", {
     key: 0,
     src: _ctx.image
   }, null, 8, ["src"])) : _createCommentVNode("", true), _ctx.deletable ? (_openBlock(), _createBlock("span", {
     key: 1,
     class: "messagebar-attachment-delete",
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.onDeleteClick && _ctx.onDeleteClick.apply(_ctx, arguments);
-    })
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onDeleteClick && _ctx.onDeleteClick(...args))
   })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
 }
 
@@ -25,33 +19,34 @@ import { classNames } from '../shared/utils';
 import { colorClasses, colorProps } from '../shared/mixins';
 export default {
   name: 'f7-messagebar-attachment',
-  render: render,
-  props: _extends({
+  render,
+  props: {
     image: String,
     deletable: {
       type: Boolean,
       default: true
-    }
-  }, colorProps),
+    },
+    ...colorProps
+  },
   emits: ['attachment:click', 'attachment:delete'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
 
-    var onClick = function onClick(event) {
+  setup(props, {
+    emit
+  }) {
+    const onClick = event => {
       emit('attachment:click', event);
     };
 
-    var onDeleteClick = function onDeleteClick(event) {
+    const onDeleteClick = event => {
       emit('attachment:delete', event);
     };
 
-    var classes = computed(function () {
-      return classNames('messagebar-attachment', colorClasses(props));
-    });
+    const classes = computed(() => classNames('messagebar-attachment', colorClasses(props)));
     return {
-      classes: classes,
-      onClick: onClick,
-      onDeleteClick: onDeleteClick
+      classes,
+      onClick,
+      onDeleteClick
     };
   }
+
 };

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

package/components/messagebar-sheet-image.js

@@ -0,0 +1,51 @@
+import { createVNode as _createVNode, renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+const _hoisted_1 = /*#__PURE__*/_createVNode("i", {
+  class: "icon icon-checkbox"
+}, null, -1);
+
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock("label", {
+    class: _ctx.classes,
+    style: _ctx.styles
+  }, [_createVNode("input", {
+    type: "checkbox",
+    checked: _ctx.checked,
+    onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+  }, null, 40, ["checked"]), _hoisted_1, _renderSlot(_ctx.$slots, "default")], 6);
+}
+
+import { computed } from 'vue';
+import { classNames } from '../shared/utils';
+import { colorClasses, colorProps } from '../shared/mixins';
+export default {
+  name: 'f7-messagebar-sheet-image',
+  render,
+  props: {
+    image: String,
+    checked: Boolean,
+    ...colorProps
+  },
+  emits: ['checked', 'unchecked', 'change', 'update:checked'],
+
+  setup(props, {
+    emit
+  }) {
+    const onChange = event => {
+      if (event.target.checked) emit('checked', event);else emit('unchecked', event);
+      emit('update:checked', event.target.checked);
+      emit('change', event);
+    };
+
+    const classes = computed(() => classNames('messagebar-sheet-image', 'checkbox', colorClasses(props)));
+    const styles = computed(() => ({
+      backgroundImage: props.image && `url(${props.image})`
+    }));
+    return {
+      classes,
+      styles,
+      onChange
+    };
+  }
+
+};

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

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