@xenknight/framework7 0.0.2

package/components/messages/messages-md.less

@@ -0,0 +1,140 @@
+.md {
+  .messages-title,
+  .message-header,
+  .message-footer,
+  .message-name {
+    b {
+      font-weight: 500;
+    }
+  }
+  .message-header,
+  .message-name {
+    margin-bottom: 2px;
+  }
+  .message-footer {
+    margin-top: 2px;
+  }
+  .message-text-header {
+    margin-bottom: 4px;
+  }
+  .message-text-footer {
+    margin-top: 4px;
+  }
+
+  .message-image {
+    margin: calc(-1 * var(--f7-message-bubble-padding-vertical))
+      calc(-1 * var(--f7-message-bubble-padding-horizontal));
+    &,
+    img {
+      border-radius: var(--f7-message-bubble-border-radius);
+    }
+  }
+  .message-received {
+    margin-left: calc(8px + var(--f7-safe-area-left));
+    .message-name,
+    .message-header,
+    .message-footer {
+      margin-left: 16px;
+    }
+    &.message-first:not(.message-last) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-left-radius: 4px;
+      }
+    }
+    &.message-last:not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-top-left-radius: 4px;
+      }
+    }
+    &:not(.message-last):not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
+      }
+    }
+    .message-avatar + .message-content {
+      margin-left: 8px;
+    }
+  }
+  .message-sent {
+    margin-right: calc(8px + var(--f7-safe-area-right));
+    .message-name,
+    .message-header,
+    .message-footer {
+      margin-right: 16px;
+    }
+    &.message-first:not(.message-last) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-right-radius: 4px;
+      }
+    }
+    &.message-last:not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-top-right-radius: 4px;
+      }
+    }
+    &:not(.message-last):not(.message-first) {
+      .message-bubble,
+      .message-image,
+      .message-image img {
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+    }
+    .message-avatar + .message-content {
+      margin-right: var(--f7-message-bubble-padding-horizontal);
+    }
+  }
+
+  // Rules
+  .message + .message:not(.message-first) {
+    margin-top: 2px;
+  }
+
+  // Typing
+  .message-typing-indicator {
+    > div {
+      width: 6px;
+      height: 6px;
+      + div {
+        .ltr({
+          margin-left: 6px;
+        });
+        .rtl({
+          margin-right: 6px;
+        });
+      }
+    }
+    > div:nth-child(1) {
+      animation: md-message-typing-indicator 900ms infinite;
+    }
+    > div:nth-child(2) {
+      animation: md-message-typing-indicator 900ms 150ms infinite;
+    }
+    > div:nth-child(3) {
+      animation: md-message-typing-indicator 900ms 300ms infinite;
+    }
+  }
+}
+
+@keyframes md-message-typing-indicator {
+  0% {
+    transform: translateY(0%);
+  }
+  25% {
+    transform: translateY(-5px);
+  }
+  50% {
+    transform: translateY(0%);
+  }
+}

package/components/messages/messages-rtl.css

@@ -0,0 +1 @@
+:root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:10px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:rgba(0, 0, 0, 0.45);--f7-message-header-text-color:rgba(0, 0, 0, 0.45);--f7-message-footer-text-color:rgba(0, 0, 0, 0.45);--f7-message-name-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:transparent;--f7-messages-title-text-color:rgba(255, 255, 255, 0.54);--f7-message-header-text-color:rgba(255, 255, 255, 0.54);--f7-message-name-text-color:rgba(255, 255, 255, 0.54);--f7-message-footer-text-color:rgba(255, 255, 255, 0.54)}.md{--f7-messages-content-bg-color:transparent;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{text-align:center;width:100%;line-height:1;color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight)}.message{max-width:70%;box-sizing:border-box;display:flex;align-items:flex-end;position:relative;z-index:1;transform:translate3d(0,0,0)}.message-avatar{border-radius:var(--f7-message-avatar-border-radius);position:relative;background-size:cover;align-self:flex-end;flex-shrink:0;width:var(--f7-message-avatar-size);height:var(--f7-message-avatar-size)}.message-content{position:relative;display:flex;flex-direction:column}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{box-sizing:border-box;word-break:break-word;display:flex;flex-direction:column;position:relative;line-height:var(--f7-message-bubble-line-height);font-size:var(--f7-message-bubble-font-size);border-radius:var(--f7-message-bubble-border-radius);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);min-height:var(--f7-message-bubble-min-height)}.message-image img{display:block;max-width:100%;height:auto;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);opacity:var(--f7-message-text-header-opacity);font-size:var(--f7-message-text-header-font-size)}.message-text-footer{color:var(--f7-message-text-footer-text-color);opacity:var(--f7-message-text-footer-opacity);font-size:var(--f7-message-text-footer-font-size)}.message-text{text-align:left}.message-sent{text-align:right;flex-direction:row;align-self:flex-start}.message-sent .message-bubble{color:var(--f7-message-sent-text-color);background:var(--f7-message-sent-bg-color,var(--f7-theme-color))}.message-sent .message-content{align-items:flex-start}.message-received{flex-direction:row-reverse;align-self:flex-end}.message-received .message-bubble{color:var(--f7-message-received-text-color);background:var(--f7-message-received-bg-color)}.message-received .message-content{align-items:flex-end}.message:not(.message-last) .message-avatar{opacity:0}.message:not(.message-first) .message-name{display:none}.message.message-same-name .message-name{display:none}.message.message-same-header .message-header{display:none}.message.message-same-footer .message-footer{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{display:inline-block;position:relative;background:var(--f7-message-typing-indicator-bg-color);opacity:var(--f7-message-typing-indicator-opacity);vertical-align:middle;border-radius:50%}@keyframes message-appear-from-bottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@keyframes message-appear-from-top{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.ios .message-image:first-child{margin-top:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(10px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%}.ios .message-received .message-image{margin-left:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0px}.ios .message-sent{margin-right:calc(10px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%}.ios .message-sent .message-image{margin-right:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius)}.ios .message-sent.message-tail .message-bubble{-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0px}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{content:'';position:absolute;background:var(--f7-message-received-bg-color);border-radius:50%}.ios .message-received.message-typing .message-content:after{width:11px;height:11px;left:4px;bottom:0px}.ios .message-received.message-typing .message-content:before{width:6px;height:6px;left:-1px;bottom:-4px}.ios .message-typing-indicator>div{width:9px;height:9px}.ios .message-typing-indicator>div+div{margin-right:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s 150ms infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(-1 * var(--f7-message-bubble-padding-vertical)) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{width:6px;height:6px}.md .message-typing-indicator>div+div{margin-right:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s 150ms infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0%)}25%{transform:translateY(-5px)}50%{transform:translateY(0%)}}

package/components/messages/messages-vars.less

@@ -0,0 +1,82 @@
+:root {
+  --f7-message-text-header-opacity: 0.65;
+  --f7-message-text-header-font-size: 12px;
+  --f7-message-text-footer-opacity: 0.65;
+  --f7-message-text-footer-font-size: 12px;
+  --f7-message-bubble-line-height: 1.2;
+  --f7-message-header-font-size: 12px;
+  --f7-message-footer-font-size: 11px;
+  --f7-message-name-font-size: 12px;
+  --f7-message-name-font-weight: inherit;
+  --f7-message-avatar-border-radius: 50%;
+  --f7-messages-title-font-weight: inherit;
+
+  .light-vars({
+    --f7-message-typing-indicator-bg-color: #000;
+  });
+  .dark-vars({
+    --f7-message-typing-indicator-bg-color: #fff;
+  });
+}
+.ios-vars({
+  --f7-message-text-header-text-color: inherit;
+  --f7-message-text-footer-text-color: inherit;
+  --f7-messages-title-font-size: 11px;
+  --f7-message-avatar-size: 29px;
+  --f7-message-margin: 10px;
+  --f7-message-bubble-min-height: 32px;
+  --f7-message-bubble-font-size: 17px;
+  --f7-message-bubble-border-radius: 16px;
+  --f7-message-bubble-padding-vertical: 6px;
+  --f7-message-bubble-padding-horizontal: 16px;
+  --f7-message-typing-indicator-opacity: 0.35;
+  /*
+  --f7-message-sent-bg-color: var(--f7-theme-color);
+  */
+  --f7-message-sent-text-color: #fff;
+  .light-vars({
+    --f7-messages-content-bg-color: #fff;
+    --f7-message-received-text-color: #000;
+    --f7-message-received-bg-color: #e5e5ea;
+
+    --f7-messages-title-text-color: rgba(0,0,0,0.45);
+    --f7-message-header-text-color: rgba(0,0,0,0.45);
+    --f7-message-footer-text-color: rgba(0,0,0,0.45);
+    --f7-message-name-text-color: rgba(0,0,0,0.45);
+  });
+  .dark-vars({
+    --f7-message-received-bg-color: #252525;
+    --f7-message-received-text-color: #fff;
+    --f7-messages-content-bg-color: transparent;
+
+    --f7-messages-title-text-color: rgba(255,255,255,0.54);
+    --f7-message-header-text-color: rgba(255,255,255,0.54);
+    --f7-message-name-text-color: rgba(255,255,255,0.54);
+    --f7-message-footer-text-color: rgba(255,255,255,0.54);
+  });
+});
+.md-vars({
+  --f7-messages-content-bg-color: transparent;
+  --f7-messages-title-font-size: 12px;
+  --f7-message-avatar-size: 32px;
+  --f7-message-margin: 16px;
+  --f7-message-bubble-min-height: 40px;
+  --f7-message-bubble-font-size: 16px;
+  --f7-message-bubble-border-radius: 20px;
+  --f7-message-bubble-padding-vertical: 10px;
+  --f7-message-bubble-padding-horizontal: 16px;
+  --f7-message-typing-indicator-opacity: 0.6;
+});
+
+.md-color-vars({
+  --f7-message-sent-bg-color: var(--f7-md-primary);
+  --f7-message-sent-text-color: var(--f7-md-on-primary);
+  --f7-message-received-bg-color: var(--f7-md-surface-variant);
+  --f7-message-received-text-color: var(--f7-md-on-surface);
+  --f7-message-text-header-text-color: var(--f7-md-on-surface-variant);
+  --f7-message-text-footer-text-color: var(--f7-md-on-surface-variant);
+  --f7-messages-title-text-color: var(--f7-md-on-surface-variant);
+  --f7-message-header-text-color: var(--f7-md-on-surface-variant);
+  --f7-message-footer-text-color: var(--f7-md-on-surface-variant);
+  --f7-message-name-text-color: var(--f7-md-on-surface-variant);
+});

package/components/messages/messages.css

@@ -0,0 +1 @@
+:root{--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}:root .dark,:root.dark{--f7-message-typing-indicator-bg-color:#fff}.ios{--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:10px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:rgba(0, 0, 0, 0.45);--f7-message-header-text-color:rgba(0, 0, 0, 0.45);--f7-message-footer-text-color:rgba(0, 0, 0, 0.45);--f7-message-name-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:transparent;--f7-messages-title-text-color:rgba(255, 255, 255, 0.54);--f7-message-header-text-color:rgba(255, 255, 255, 0.54);--f7-message-name-text-color:rgba(255, 255, 255, 0.54);--f7-message-footer-text-color:rgba(255, 255, 255, 0.54)}.md{--f7-messages-content-bg-color:transparent;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}.md,.md .dark,.md [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}.messages,.messages-content{background:var(--f7-messages-content-bg-color)}.messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}.message,.messages-title{margin-top:var(--f7-message-margin)}.message:last-child,.messages-title:last-child{margin-bottom:var(--f7-message-margin)}.messages-title{text-align:center;width:100%;line-height:1;color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight)}.message{max-width:70%;box-sizing:border-box;display:flex;align-items:flex-end;position:relative;z-index:1;transform:translate3d(0,0,0)}.message-avatar{border-radius:var(--f7-message-avatar-border-radius);position:relative;background-size:cover;align-self:flex-end;flex-shrink:0;width:var(--f7-message-avatar-size);height:var(--f7-message-avatar-size)}.message-content{position:relative;display:flex;flex-direction:column}.message-footer,.message-header,.message-name{line-height:1}.message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}.message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}.message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}.message-bubble{box-sizing:border-box;word-break:break-word;display:flex;flex-direction:column;position:relative;line-height:var(--f7-message-bubble-line-height);font-size:var(--f7-message-bubble-font-size);border-radius:var(--f7-message-bubble-border-radius);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);min-height:var(--f7-message-bubble-min-height)}.message-image img{display:block;max-width:100%;height:auto;width:auto}.message-text-footer,.message-text-header{line-height:1}.message-text-header{color:var(--f7-message-text-header-text-color);opacity:var(--f7-message-text-header-opacity);font-size:var(--f7-message-text-header-font-size)}.message-text-footer{color:var(--f7-message-text-footer-text-color);opacity:var(--f7-message-text-footer-opacity);font-size:var(--f7-message-text-footer-font-size)}.message-text{text-align:left}.message-sent{text-align:right;flex-direction:row-reverse;align-self:flex-end}.message-sent .message-bubble{color:var(--f7-message-sent-text-color);background:var(--f7-message-sent-bg-color,var(--f7-theme-color))}.message-sent .message-content{align-items:flex-end}.message-received{flex-direction:row}.message-received .message-bubble{color:var(--f7-message-received-text-color);background:var(--f7-message-received-bg-color)}.message-received .message-content{align-items:flex-start}.message:not(.message-last) .message-avatar{opacity:0}.message:not(.message-first) .message-name{display:none}.message.message-same-name .message-name{display:none}.message.message-same-header .message-header{display:none}.message.message-same-footer .message-footer{display:none}.message-appear-from-bottom{animation:message-appear-from-bottom .3s}.message-appear-from-top{animation:message-appear-from-top .3s}.message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}.message-typing-indicator>div{display:inline-block;position:relative;background:var(--f7-message-typing-indicator-bg-color);opacity:var(--f7-message-typing-indicator-opacity);vertical-align:middle;border-radius:50%}@keyframes message-appear-from-bottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@keyframes message-appear-from-top{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}.ios .message-footer b,.ios .message-header b,.ios .message-name b,.ios .messages-title b{font-weight:600}.ios .message-header,.ios .message-name{margin-bottom:3px}.ios .message-footer{margin-top:3px}.ios .message-bubble{min-width:48px}.ios .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.ios .message-image:first-child{margin-top:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-image:last-child{margin-bottom:calc(-1 * var(--f7-message-bubble-padding-vertical))}.ios .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}.ios .message-text-header{margin-bottom:3px}.ios .message-text-footer{margin-top:3px}.ios .message-received{margin-left:calc(10px + var(--f7-safe-area-left))}.ios .message-received .message-footer,.ios .message-received .message-header,.ios .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}.ios .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%}.ios .message-received .message-image{margin-left:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}.ios .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%}.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0px}.ios .message-sent{margin-right:calc(10px + var(--f7-safe-area-right))}.ios .message-sent .message-footer,.ios .message-sent .message-header,.ios .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}.ios .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%}.ios .message-sent .message-image{margin-right:calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px))}.ios .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius)}.ios .message-sent.message-tail .message-bubble{-webkit-mask-box-image:url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%}.ios .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0px}.ios .message+.message:not(.message-first){margin-top:1px}.ios .message-received.message-typing .message-content:after,.ios .message-received.message-typing .message-content:before{content:'';position:absolute;background:var(--f7-message-received-bg-color);border-radius:50%}.ios .message-received.message-typing .message-content:after{width:11px;height:11px;left:4px;bottom:0px}.ios .message-received.message-typing .message-content:before{width:6px;height:6px;left:-1px;bottom:-4px}.ios .message-typing-indicator>div{width:9px;height:9px}.ios .message-typing-indicator>div+div{margin-left:4px}.ios .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}.ios .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s 150ms infinite}.ios .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}.md .message-footer b,.md .message-header b,.md .message-name b,.md .messages-title b{font-weight:500}.md .message-header,.md .message-name{margin-bottom:2px}.md .message-footer{margin-top:2px}.md .message-text-header{margin-bottom:4px}.md .message-text-footer{margin-top:4px}.md .message-image{margin:calc(-1 * var(--f7-message-bubble-padding-vertical)) calc(-1 * var(--f7-message-bubble-padding-horizontal))}.md .message-image,.md .message-image img{border-radius:var(--f7-message-bubble-border-radius)}.md .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}.md .message-received .message-footer,.md .message-received .message-header,.md .message-received .message-name{margin-left:16px}.md .message-received.message-first:not(.message-last) .message-bubble,.md .message-received.message-first:not(.message-last) .message-image,.md .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}.md .message-received.message-last:not(.message-first) .message-bubble,.md .message-received.message-last:not(.message-first) .message-image,.md .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}.md .message-received:not(.message-last):not(.message-first) .message-bubble,.md .message-received:not(.message-last):not(.message-first) .message-image,.md .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}.md .message-received .message-avatar+.message-content{margin-left:8px}.md .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}.md .message-sent .message-footer,.md .message-sent .message-header,.md .message-sent .message-name{margin-right:16px}.md .message-sent.message-first:not(.message-last) .message-bubble,.md .message-sent.message-first:not(.message-last) .message-image,.md .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}.md .message-sent.message-last:not(.message-first) .message-bubble,.md .message-sent.message-last:not(.message-first) .message-image,.md .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}.md .message-sent:not(.message-last):not(.message-first) .message-bubble,.md .message-sent:not(.message-last):not(.message-first) .message-image,.md .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}.md .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}.md .message+.message:not(.message-first){margin-top:2px}.md .message-typing-indicator>div{width:6px;height:6px}.md .message-typing-indicator>div+div{margin-left:6px}.md .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}.md .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s 150ms infinite}.md .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}@keyframes md-message-typing-indicator{0%{transform:translateY(0%)}25%{transform:translateY(-5px)}50%{transform:translateY(0%)}}

package/components/messages/messages.d.ts

@@ -0,0 +1,162 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Messages {
+  interface Messages extends Framework7EventsClass<Events> {
+    /** Object with passed initialization parameters */
+    params: Parameters;
+    /** Messages container HTML element (<div class="messages">) */
+    el: HTMLElement;
+    /** Dom7 element with messages HTML element */
+    $el: Dom7Array;
+    /** Array with messages */
+    messages: Message[];
+
+    /** Show typing message indicator */
+    showTyping(message: Message): void;
+    /** Hide typing message indicator */
+    hideTyping(): void;
+    /** Add new message to the end or to the beginning depending on method parameter */
+    addMessage(message: Message, method: 'append' | 'prepend', animate?: boolean): Messages;
+    /** Add multiple messages per once. */
+    addMessages(messages: Message[], method: 'append' | 'prepend', animate?: boolean): Messages;
+    /** Remove message */
+    removeMessage(message: Message): Messages;
+    /** Remove multiple messages */
+    removeMessages(messages: Message[]): Messages;
+    /** Scroll messages to top/bottom depending on newMessagesFirst parameter */
+    scroll(durationMS: number, position: number): Messages;
+    /** Render messages HTML depending on messages array */
+    renderMessages(): Messages;
+    /** Force messages auto layout */
+    layout(): Messages;
+    /** Clear/remove all the messages */
+    clear(): Messages;
+    /** Destroy messages instance */
+    destroy(): void;
+  }
+
+  interface Message {
+    /** Message text. */
+    text: string;
+    /** Single message header. */
+    header: string;
+    /** Single message footer. */
+    footer: string;
+    /** Sender name. */
+    name: string;
+    /** Sender avatar URL string. */
+    avatar: string;
+    /** Message type - sent or received. (default sent) */
+    type?: string;
+    /** Message text header. */
+    textHeader: string;
+    /** Message text footer. */
+    textFooter: string;
+    /** Message image HTML string, e.g. <img src="path/to/image">. Can be used instead of imageSrc parameter. */
+    image: string;
+    /** Message image URL string. Can be used instead of image parameter. */
+    imageSrc: string;
+    /** Defines whether it should be rendered as a message or as a messages title. */
+    isTitle: boolean;
+  }
+
+  interface Parameters {
+    /** Enable Auto Layout to add all required additional classes automatically based on passed conditions. (default true) */
+    autoLayout?: boolean;
+    /** Enable if you want to use new messages on top, instead of having them on bottom. (default false) */
+    newMessagesFirst?: boolean;
+    /** Enable/disable messages autoscrolling when adding new message. (default true) */
+    scrollMessages?: boolean;
+    /** If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view. (default true) */
+    scrollMessagesOnEdge?: boolean;
+    /** Array with initial messages. Each message in array should be presented as an object with single message parameters. */
+    messages?: Message[];
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+
+    /** Function to render single message. Must return full message HTML string. */
+    renderMessage?: (message: Message) => string;
+
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-first class will be added to message. */
+    firstMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-last class will be added to message. */
+    lastMessageRule?: (message: Message, previousMessage: Message, nextMessage: Message) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-tail class will be added to message. */
+    tailMessageRule?: (message: Message, previousMessage: Message, nextMessage: Message) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-name class will be added to message. */
+    sameNameMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-header class will be added to message. */
+    sameHeaderMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-footer class will be added to message. */
+    sameFooterMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => boolean;
+    /** Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-avatar class will be added to message. */
+    sameAvatarMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => boolean;
+    /** Function that must return additional message classes as string, based on required condition depending on previous and next messages.. */
+    customClassMessageRule?: (
+      message: Message,
+      previousMessage: Message,
+      nextMessage: Message,
+    ) => string;
+  }
+
+  interface Events {
+    /** Event will be triggered right before Messages instance will be destroyed */
+    beforeDestroy(messages: Messages): void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered right before Messages instance will be destroyed */
+    'messages:beforedestroy': void;
+  }
+
+  interface AppMethods {
+    messages: {
+      /** create Messages instance */
+      create(parameters: Parameters): Messages;
+
+      /** destroy Messages instance */
+      destroy(el: HTMLElement | CSSSelector | Messages): void;
+
+      /** get Messages instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Messages;
+    };
+  }
+  interface AppParams {
+    messages?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered right before Messages instance will be destroyed */
+    messagesBeforeDestroy(messages: Messages): void;
+  }
+}
+
+declare const MessagesComponent: Framework7Plugin;
+
+export default MessagesComponent;

package/components/messages/messages.js

@@ -0,0 +1,65 @@
+import $ from '../../shared/dom7.js';
+import Messages from './messages-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'messages',
+  static: {
+    Messages
+  },
+  create() {
+    const app = this;
+    app.messages = ConstructorMethods({
+      defaultSelector: '.messages',
+      constructor: Messages,
+      app,
+      domProp: 'f7Messages',
+      addMethods: 'renderMessages layout scroll clear removeMessage removeMessages addMessage addMessages'.split(' ')
+    });
+  },
+  on: {
+    tabBeforeRemove(tabEl) {
+      const app = this;
+      $(tabEl).find('.messages-init').each(messagesEl => {
+        app.messages.destroy(messagesEl);
+      });
+    },
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.messages-init').each(messagesEl => {
+        app.messages.create({
+          el: messagesEl
+        });
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.messages-init').each(messagesEl => {
+        app.messages.destroy(messagesEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.messages-init').each(messagesEl => {
+        app.messages.create({
+          el: messagesEl
+        });
+      });
+    }
+  },
+  vnode: {
+    'messages-init': {
+      insert(vnode) {
+        const app = this;
+        const messagesEl = vnode.elm;
+        app.messages.create({
+          el: messagesEl
+        });
+      },
+      destroy(vnode) {
+        const app = this;
+        const messagesEl = vnode.elm;
+        app.messages.destroy(messagesEl);
+      }
+    }
+  }
+};