@xenknight/framework7-vue 0.0.2

package/components/messagebar.d.ts

@@ -0,0 +1,117 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Messagebar: DefineComponent<
+  {
+    
+    sheetVisible: {
+      type: BooleanConstructor;
+    },
+
+    attachmentsVisible: {
+      type: BooleanConstructor;
+    },
+
+    top: {
+      type: BooleanConstructor;
+    },
+
+    maxHeight: {
+      type: NumberConstructor;
+    },
+
+    sendLink: {
+      type: StringConstructor;
+    },
+
+    value: {
+      type: StringConstructor | NumberConstructor | ArrayConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    textareaId: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    resizable: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    bottomOffset: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    topOffset: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    resizePage: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    placeholder: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("change" | "input" | "focus" | "blur" | "submit" | "send" | "click" | "messagebar:attachmentdelete" | "messagebar:attachmentclick" | "messagebar:resizepage" | "update:value")[],
+  "change" | "input" | "focus" | "blur" | "submit" | "send" | "click" | "messagebar:attachmentdelete" | "messagebar:attachmentclick" | "messagebar:resizepage" | "update:value"
+>;
+
+export default Messagebar;
+  

package/components/messagebar.js

@@ -0,0 +1,193 @@
+import { h, computed, ref, onMounted, onBeforeUnmount, watch, onUpdated } from 'vue';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import Link from './link.js';
+import Input from './input.js';
+export default {
+  name: 'f7-messagebar',
+  props: {
+    sheetVisible: Boolean,
+    attachmentsVisible: Boolean,
+    top: Boolean,
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    bottomOffset: {
+      type: Number,
+      default: 0
+    },
+    topOffset: {
+      type: Number,
+      default: 0
+    },
+    maxHeight: Number,
+    resizePage: {
+      type: Boolean,
+      default: true
+    },
+    sendLink: String,
+    value: [String, Number, Array],
+    disabled: Boolean,
+    readonly: Boolean,
+    textareaId: [Number, String],
+    name: String,
+    placeholder: {
+      type: String,
+      default: 'Message'
+    },
+    init: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['change', 'input', 'focus', 'blur', 'submit', 'send', 'click', 'messagebar:attachmentdelete', 'messagebar:attachmentclick', 'messagebar:resizepage', 'update:value'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const elRef = ref(null);
+    const areaElRef = ref(null);
+    let f7Messagebar = null;
+    let updateSheetVisible = false;
+    let updateAttachmentsVisible = false;
+    const onChange = event => {
+      emit('change', event);
+    };
+    const onInput = event => {
+      emit('input', event);
+      emit('update:value', event.target.value);
+    };
+    const onFocus = event => {
+      emit('focus', event);
+    };
+    const onBlur = event => {
+      emit('blur', event);
+    };
+    const onClick = event => {
+      const inputValue = areaElRef.value.$el;
+      const clear = f7Messagebar ? () => {
+        f7Messagebar.clear();
+      } : () => {};
+      emit('submit', inputValue, clear);
+      emit('send', inputValue, clear);
+      emit('click', event);
+    };
+    const onAttachmentDelete = (instance, attachmentEl, attachmentElIndex) => {
+      emit('messagebar:attachmentdelete', instance, attachmentEl, attachmentElIndex);
+    };
+    const onAttachmentClick = (instance, attachmentEl, attachmentElIndex) => {
+      emit('messagebar:attachmentclick', instance, attachmentEl, attachmentElIndex);
+    };
+    const onResizePage = instance => {
+      emit('messagebar:resizepage', instance);
+    };
+    watch(() => props.sheetVisible, () => {
+      if (!props.resizable || !f7Messagebar) return;
+      updateSheetVisible = true;
+    });
+    watch(() => props.attachmentsVisible, () => {
+      if (!props.resizable || !f7Messagebar) return;
+      updateAttachmentsVisible = true;
+    });
+    onMounted(() => {
+      if (!props.init) return;
+      if (!elRef.value) return;
+      const params = noUndefinedProps({
+        el: elRef.value,
+        top: props.top,
+        resizePage: props.resizePage,
+        bottomOffset: props.bottomOffset,
+        topOffset: props.topOffset,
+        maxHeight: props.maxHeight,
+        on: {
+          attachmentDelete: onAttachmentDelete,
+          attachmentClick: onAttachmentClick,
+          resizePage: onResizePage
+        }
+      });
+      f7ready(() => {
+        f7Messagebar = f7.messagebar.create(params);
+      });
+    });
+    onUpdated(() => {
+      if (!f7Messagebar) return;
+      if (updateSheetVisible) {
+        updateSheetVisible = false;
+        f7Messagebar.sheetVisible = props.sheetVisible;
+        f7Messagebar.resizePage();
+      }
+      if (updateAttachmentsVisible) {
+        updateAttachmentsVisible = false;
+        f7Messagebar.attachmentsVisible = props.attachmentsVisible;
+        f7Messagebar.resizePage();
+      }
+    });
+    onBeforeUnmount(() => {
+      if (f7Messagebar && f7Messagebar.destroy) f7Messagebar.destroy();
+      f7Messagebar = null;
+    });
+    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;
+      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(vnode => {
+          if (typeof vnode === 'undefined') return;
+          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;
+          } else if (tag && (tag.indexOf('messagebar-sheet') >= 0 || tag === 'F7MessagebarSheet' || tag === 'f7-messagebar-sheet')) {
+            messagebarSheetEl = vnode;
+          } else {
+            innerEndEls.push(vnode);
+          }
+        });
+      }
+      return h('div', {
+        class: classes.value,
+        ref: elRef
+      }, [slotsBeforeInner && slotsBeforeInner(), h('div', {
+        class: 'toolbar-inner'
+      }, [slotsInnerStart && slotsInnerStart(), h('div', {
+        class: 'messagebar-area'
+      }, [slotsBeforeArea && slotsBeforeArea(), messagebarAttachmentsEl, h(Input, {
+        inputId: props.textareaId,
+        ref: areaElRef,
+        type: 'textarea',
+        wrap: false,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        name: props.name,
+        readonly: props.readonly,
+        resizable: props.resizable,
+        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.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagesTitle: DefineComponent<
+  {
+    
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default MessagesTitle;
+  

package/components/messages-title.js

@@ -0,0 +1,22 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_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-messages-title',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('messages-title', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/messages.d.ts

@@ -0,0 +1,116 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Messages: DefineComponent<
+  {
+    
+    firstMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    lastMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    tailMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    sameNameMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    sameHeaderMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    sameFooterMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    sameAvatarMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    customClassMessageRule: {
+      type: FunctionConstructor;
+    },
+
+    renderMessage: {
+      type: FunctionConstructor;
+    },
+
+    autoLayout: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    messages: {
+      type: ArrayConstructor;
+    },
+
+    newMessagesFirst: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    scrollMessages: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    scrollMessagesOnEdge: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    typing: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default Messages;
+  

package/components/messages.js

@@ -0,0 +1,134 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount, onBeforeUpdate, onUpdated, watch } from 'vue';
+import { classNames, getChildren, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-messages',
+  render,
+  props: {
+    autoLayout: {
+      type: Boolean,
+      default: false
+    },
+    messages: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    newMessagesFirst: {
+      type: Boolean,
+      default: false
+    },
+    scrollMessages: {
+      type: Boolean,
+      default: true
+    },
+    scrollMessagesOnEdge: {
+      type: Boolean,
+      default: true
+    },
+    typing: {
+      type: Boolean,
+      default: false
+    },
+    firstMessageRule: Function,
+    lastMessageRule: Function,
+    tailMessageRule: Function,
+    sameNameMessageRule: Function,
+    sameHeaderMessageRule: Function,
+    sameFooterMessageRule: Function,
+    sameAvatarMessageRule: Function,
+    customClassMessageRule: Function,
+    renderMessage: Function,
+    init: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    let f7Messages = null;
+    let childrenBeforeUpdated = null;
+    const elRef = ref(null);
+    onMounted(() => {
+      if (!props.init) return;
+      f7ready(() => {
+        f7Messages = f7.messages.create(noUndefinedProps({
+          el: elRef.value,
+          autoLayout: props.autoLayout,
+          messages: props.messages,
+          newMessagesFirst: props.newMessagesFirst,
+          scrollMessages: props.scrollMessages,
+          scrollMessagesOnEdge: props.scrollMessagesOnEdge,
+          firstMessageRule: props.firstMessageRule,
+          lastMessageRule: props.lastMessageRule,
+          tailMessageRule: props.tailMessageRule,
+          sameNameMessageRule: props.sameNameMessageRule,
+          sameHeaderMessageRule: props.sameHeaderMessageRule,
+          sameFooterMessageRule: props.sameFooterMessageRule,
+          sameAvatarMessageRule: props.sameAvatarMessageRule,
+          customClassMessageRule: props.customClassMessageRule,
+          renderMessage: props.renderMessage
+        }));
+        if (f7Messages && props.typing) {
+          f7Messages.showTyping();
+        }
+      });
+    });
+    onBeforeUpdate(() => {
+      if (!props.init || !elRef.value) return;
+      const children = elRef.value.children;
+      if (!children) return;
+      childrenBeforeUpdated = children.length;
+      for (let i = 0; i < children.length; i += 1) {
+        children[i].classList.add('message-appeared');
+      }
+      const childrenAfterUpdate = getChildren(slots);
+      if (f7Messages && props.scrollMessages && childrenBeforeUpdated !== childrenAfterUpdate) {
+        f7Messages.setScrollData();
+      }
+    });
+    onUpdated(() => {
+      if (!props.init) return;
+      if (!elRef.value) return;
+      const children = elRef.value.children;
+      if (!children) return;
+      const childerAftterUpdated = children.length;
+      for (let i = 0; i < children.length; i += 1) {
+        if (!children[i].classList.contains('message-appeared')) {
+          children[i].classList.add('message-appear-from-bottom');
+        }
+      }
+      if (f7Messages && f7Messages.layout && props.autoLayout) {
+        f7Messages.layout();
+      }
+      if (childerAftterUpdated !== childrenBeforeUpdated && f7Messages && f7Messages.scroll && f7Messages.scrollData && props.scrollMessages) {
+        f7Messages.scrollWithEdgeCheck(true);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (f7Messages && f7Messages.destroy) f7Messages.destroy();
+      f7Messages = null;
+    });
+    watch(() => props.typing, newValue => {
+      if (!f7Messages) return;
+      if (newValue) f7Messages.showTyping();else f7Messages.hideTyping();
+    });
+    const classes = computed(() => classNames('messages', colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/nav-left.d.ts

@@ -0,0 +1,68 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const NavLeft: DefineComponent<
+  {
+    
+    backLink: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    backLinkUrl: {
+      type: StringConstructor;
+    },
+
+    backLinkForce: {
+      type: BooleanConstructor;
+    },
+
+    sliding: {
+      type: BooleanConstructor;
+    },
+
+    backLinkShowText: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("back:click" | "click:back")[],
+  "back:click" | "click:back"
+>;
+
+export default NavLeft;
+