@xenknight/framework7-vue 0.0.2

package/components/message.js

@@ -0,0 +1,169 @@
+import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  class: "message-content"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "message-image"
+};
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 1,
+  class: "message-text-header"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "message-typing-indicator"
+};
+const _hoisted_6 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
+const _hoisted_7 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
+const _hoisted_8 = /*#__PURE__*/_createElementVNode("div", null, null, -1);
+const _hoisted_9 = [_hoisted_6, _hoisted_7, _hoisted_8];
+const _hoisted_10 = {
+  key: 3,
+  class: "message-text-footer"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes),
+    onClick: _cache[6] || (_cache[6] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "start"), _ctx.hasAvatar ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: "message-avatar",
+    style: _normalizeStyle({
+      backgroundImage: _ctx.avatar && `url(${_ctx.avatar})`
+    }),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onAvatarClick && _ctx.onAvatarClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "avatar")], 4)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "content-start"), _ctx.hasName ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: "message-name",
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.onNameClick && _ctx.onNameClick(...arguments);
+    })
+  }, [_createTextVNode(_toDisplayString(_ctx.name) + " ", 1), _renderSlot(_ctx.$slots, "name")])) : _createCommentVNode("", true), _ctx.hasHeader ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: "message-header",
+    onClick: _cache[2] || (_cache[2] = function () {
+      return _ctx.onHeaderClick && _ctx.onHeaderClick(...arguments);
+    })
+  }, [_createTextVNode(_toDisplayString(_ctx.header) + " ", 1), _renderSlot(_ctx.$slots, "header")])) : _createCommentVNode("", true), _createElementVNode("div", {
+    class: "message-bubble",
+    onClick: _cache[4] || (_cache[4] = function () {
+      return _ctx.onBubbleClick && _ctx.onBubbleClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "bubble-start"), _ctx.hasImage ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "image", {}, () => [_createElementVNode("img", {
+    src: _ctx.image
+  }, null, 8, _hoisted_3)])])) : _createCommentVNode("", true), _ctx.hasTextHeader ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_createTextVNode(_toDisplayString(_ctx.textHeader) + " ", 1), _renderSlot(_ctx.$slots, "text-header")])) : _createCommentVNode("", true), _ctx.hasText ? (_openBlock(), _createElementBlock("div", {
+    key: 2,
+    class: "message-text",
+    onClick: _cache[3] || (_cache[3] = function () {
+      return _ctx.onTextClick && _ctx.onTextClick(...arguments);
+    })
+  }, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _ctx.typing ? (_openBlock(), _createElementBlock("div", _hoisted_5, _hoisted_9)) : _createCommentVNode("", true)])) : _createCommentVNode("", true), _ctx.hasTextFooter ? (_openBlock(), _createElementBlock("div", _hoisted_10, [_createTextVNode(_toDisplayString(_ctx.textFooter) + " ", 1), _renderSlot(_ctx.$slots, "text-footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "bubble-end"), _renderSlot(_ctx.$slots, "default")]), _ctx.hasFooter ? (_openBlock(), _createElementBlock("div", {
+    key: 2,
+    class: "message-footer",
+    onClick: _cache[5] || (_cache[5] = function () {
+      return _ctx.onFooterClick && _ctx.onFooterClick(...arguments);
+    })
+  }, [_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, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    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.d.ts

@@ -0,0 +1,56 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagebarAttachment: DefineComponent<
+  {
+    
+    image: {
+      type: StringConstructor;
+    },
+
+    deletable: {
+      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,
+  ("attachment:click" | "attachment:delete")[],
+  "attachment:click" | "attachment:delete"
+>;
+
+export default MessagebarAttachment;
+  

package/components/messagebar-attachment.js

@@ -0,0 +1,52 @@
+import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = ["src"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes),
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }, [_ctx.image ? (_openBlock(), _createElementBlock("img", {
+    key: 0,
+    src: _ctx.image
+  }, null, 8, _hoisted_1)) : _createCommentVNode("", true), _ctx.deletable ? (_openBlock(), _createElementBlock("span", {
+    key: 1,
+    class: "messagebar-attachment-delete",
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onDeleteClick && _ctx.onDeleteClick(...arguments);
+    })
+  })) : _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, _ref) {
+    let {
+      emit
+    } = _ref;
+    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.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagebarAttachments: 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 MessagebarAttachments;
+  

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

package/components/messagebar-sheet-image.d.ts

@@ -0,0 +1,55 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagebarSheetImage: DefineComponent<
+  {
+    
+    image: {
+      type: StringConstructor;
+    },
+
+    checked: {
+      type: BooleanConstructor;
+    },
+
+    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,
+  ("checked" | "unchecked" | "change" | "update:checked")[],
+  "checked" | "unchecked" | "change" | "update:checked"
+>;
+
+export default MessagebarSheetImage;
+  

package/components/messagebar-sheet-image.js

@@ -0,0 +1,48 @@
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = ["checked"];
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("i", {
+  class: "icon icon-checkbox"
+}, null, -1);
+const _hoisted_3 = ["src"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("label", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("input", {
+    type: "checkbox",
+    checked: _ctx.checked,
+    onChange: _cache[0] || (_cache[0] = function () {
+      return _ctx.onChange && _ctx.onChange(...arguments);
+    })
+  }, null, 40, _hoisted_1), _hoisted_2, _ctx.image ? (_openBlock(), _createElementBlock("img", {
+    key: 0,
+    src: _ctx.image
+  }, null, 8, _hoisted_3)) : _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-sheet-image',
+  render,
+  props: {
+    image: String,
+    checked: Boolean,
+    ...colorProps
+  },
+  emits: ['checked', 'unchecked', 'change', 'update:checked'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    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)));
+    return {
+      classes,
+      onChange
+    };
+  }
+};

package/components/messagebar-sheet-item.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagebarSheetItem: 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 MessagebarSheetItem;
+  

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

package/components/messagebar-sheet.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const MessagebarSheet: 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 MessagebarSheet;
+  

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