framework7-vue 6.3.15 → 7.0.0-beta.11

package/components/menu-item.js

@@ -0,0 +1,132 @@
+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";
+const _hoisted_1 = {
+  key: 0,
+  class: "menu-item-content"
+};
+
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
+    ref: "elRef",
+    class: _ctx.classes
+  }, _ctx.attrs, {
+    onClick: _ctx.onClick
+  }), {
+    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"]);
+}
+
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, routerProps, routerAttrs, routerClasses, actionsProps, actionsClasses, actionsAttrs, iconProps } from '../shared/mixins.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import { useIcon } from '../shared/use-icon.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-menu-item',
+  render,
+  components: {
+    f7UseIcon
+  },
+  props: {
+    text: String,
+    iconOnly: Boolean,
+    href: String,
+    link: Boolean,
+    target: String,
+    dropdown: Boolean,
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps,
+    ...routerProps,
+    ...actionsProps,
+    ...iconProps
+  },
+  emits: ['click', 'menu:opened', 'menu:closed'],
+
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const elRef = ref(null);
+    useTooltip(elRef, props);
+
+    const onClick = e => {
+      emit('click', e);
+    };
+
+    const onOpened = el => {
+      if (elRef.value !== el) return;
+      emit('menu:opened', el);
+    };
+
+    const onClosed = el => {
+      if (elRef.value !== el) return;
+      emit('menu:closed', el);
+    };
+
+    useRouteProps(elRef, props);
+
+    const attachEvents = () => {
+      f7ready(() => {
+        f7.on('menuOpened', onOpened);
+        f7.on('menuClosed', onClosed);
+      });
+    };
+
+    const detachEvents = () => {
+      f7.off('menuOpened', onOpened);
+      f7.off('menuClosed', onOpened);
+    };
+
+    onMounted(() => attachEvents());
+    onBeforeUnmount(() => detachEvents());
+    const icon = computed(() => useIcon(props));
+    const tag = computed(() => {
+      const isLink = props.link || props.href || props.href === '';
+      return isLink ? 'a' : 'div';
+    });
+    const classes = computed(() => {
+      let iconOnlyComputed;
+
+      if (props.iconOnly || !props.text && !slots.text) {
+        iconOnlyComputed = true;
+      } else {
+        iconOnlyComputed = false;
+      }
+
+      const isDropdown = props.dropdown || props.dropdown === '';
+      return classNames({
+        'menu-item': true,
+        'menu-item-dropdown': isDropdown,
+        'icon-only': iconOnlyComputed
+      }, colorClasses(props), routerClasses(props), actionsClasses(props));
+    });
+    const attrs = computed(() => {
+      let hrefComputed = props.href;
+      if (typeof hrefComputed === 'undefined' && props.link) hrefComputed = '#';
+      return {
+        href: hrefComputed,
+        target: props.target,
+        ...routerAttrs(props),
+        ...actionsAttrs(props)
+      };
+    });
+    return {
+      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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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/components/messagebar-attachment.js

@@ -0,0 +1,52 @@
+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] = (...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] = (...args) => _ctx.onDeleteClick && _ctx.onDeleteClick(...args))
+  })) : _createCommentVNode("", true), _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-messagebar-attachment',
+  render,
+  props: {
+    image: String,
+    deletable: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['attachment:click', 'attachment:delete'],
+
+  setup(props, {
+    emit
+  }) {
+    const onClick = event => {
+      emit('attachment:click', event);
+    };
+
+    const onDeleteClick = event => {
+      emit('attachment:delete', event);
+    };
+
+    const classes = computed(() => classNames('messagebar-attachment', colorClasses(props)));
+    return {
+      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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+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.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-messagebar-sheet',
+  render,
+  props: { ...colorProps
+  },
+
+  setup(props) {
+    const classes = computed(() => classNames('messagebar-sheet', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+
+};