@xenknight/framework7-vue 0.0.2

package/components/nav-left.js

@@ -0,0 +1,66 @@
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  const _component_f7_link = _resolveComponent("f7-link");
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.backLink ? (_openBlock(), _createBlock(_component_f7_link, {
+    key: 0,
+    href: _ctx.backLinkUrl || '#',
+    back: "",
+    icon: "icon-back",
+    force: _ctx.backLinkForce || undefined,
+    class: _normalizeClass(!_ctx.text ? 'icon-only' : undefined),
+    text: _ctx.text,
+    onClick: _ctx.onBackClick
+  }, null, 8, ["href", "force", "class", "text", "onClick"])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTheme } from '../shared/use-theme.js';
+import f7Link from './link.js';
+export default {
+  name: 'f7-nav-left',
+  render,
+  components: {
+    f7Link
+  },
+  props: {
+    backLink: [Boolean, String],
+    backLinkUrl: String,
+    backLinkForce: Boolean,
+    backLinkShowText: {
+      type: Boolean,
+      default: undefined
+    },
+    sliding: Boolean,
+    ...colorProps
+  },
+  emits: ['back:click', 'click:back'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const onBackClick = event => {
+      emit('back:click', event);
+      emit('click:back', event);
+    };
+    const theme = useTheme();
+    const text = computed(() => {
+      let needBackLinkText = props.backLinkShowText;
+      if (typeof needBackLinkText === 'undefined') needBackLinkText = !theme.value.md;
+      if (props.backLink) {
+        return props.backLink !== true && needBackLinkText ? props.backLink : undefined;
+      }
+      return undefined;
+    });
+    const classes = computed(() => classNames('left', {
+      sliding: props.sliding
+    }, colorClasses(props)));
+    return {
+      classes,
+      onBackClick,
+      text
+    };
+  }
+};

package/components/nav-right.d.ts

@@ -0,0 +1,50 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const NavRight: DefineComponent<
+  {
+    
+    sliding: {
+      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,
+  
+>;
+
+export default NavRight;
+  

package/components/nav-right.js

@@ -0,0 +1,25 @@
+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-nav-right',
+  render,
+  props: {
+    sliding: Boolean,
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('right', {
+      sliding: props.sliding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/nav-title-large.d.ts

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

package/components/nav-title-large.js

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

package/components/nav-title.d.ts

@@ -0,0 +1,58 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const NavTitle: DefineComponent<
+  {
+    
+    title: {
+      type: StringConstructor;
+    },
+
+    subtitle: {
+      type: StringConstructor;
+    },
+
+    sliding: {
+      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,
+  
+>;
+
+export default NavTitle;
+  

package/components/nav-title.js

@@ -0,0 +1,31 @@
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "subtitle"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default"), _createTextVNode(" " + _toDisplayString(_ctx.title) + " ", 1), _ctx.subtitle ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.subtitle), 1)) : _createCommentVNode("", true)], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-nav-title',
+  render,
+  props: {
+    title: String,
+    subtitle: String,
+    sliding: Boolean,
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('title', {
+      sliding: props.sliding
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/navbar.d.ts

@@ -0,0 +1,110 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Navbar: DefineComponent<
+  {
+    
+    backLink: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    backLinkUrl: {
+      type: StringConstructor;
+    },
+
+    backLinkForce: {
+      type: BooleanConstructor;
+    },
+
+    title: {
+      type: StringConstructor;
+    },
+
+    subtitle: {
+      type: StringConstructor;
+    },
+
+    hidden: {
+      type: BooleanConstructor;
+    },
+
+    innerClass: {
+      type: StringConstructor;
+    },
+
+    innerClassName: {
+      type: StringConstructor;
+    },
+
+    large: {
+      type: BooleanConstructor;
+    },
+
+    largeTransparent: {
+      type: BooleanConstructor;
+    },
+
+    transparent: {
+      type: BooleanConstructor;
+    },
+
+    titleLarge: {
+      type: StringConstructor;
+    },
+
+    backLinkShowText: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    sliding: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    outline: {
+      type: any;
+      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,
+  ("navbar:hide" | "navbar:show" | "navbar:expand" | "navbar:collapse" | "navbar:transparentshow" | "navbar:transparenthide" | "click:back" | "back:click")[],
+  "navbar:hide" | "navbar:show" | "navbar:expand" | "navbar:collapse" | "navbar:transparentshow" | "navbar:transparenthide" | "click:back" | "back:click"
+>;
+
+export default Navbar;
+  

package/components/navbar.js

@@ -0,0 +1,248 @@
+import { createElementVNode as _createElementVNode, renderSlot as _renderSlot, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
+  class: "navbar-bg"
+}, null, -1);
+const _hoisted_2 = {
+  key: 3,
+  className: "title-large"
+};
+const _hoisted_3 = {
+  className: "title-large-text"
+};
+function render(_ctx, _cache) {
+  const _component_f7_nav_left = _resolveComponent("f7-nav-left");
+  const _component_f7_nav_title = _resolveComponent("f7-nav-title");
+  const _component_f7_nav_right = _resolveComponent("f7-nav-right");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_hoisted_1, _renderSlot(_ctx.$slots, "before-inner"), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.innerClasses)
+  }, [_ctx.hasLeft ? (_openBlock(), _createBlock(_component_f7_nav_left, {
+    key: 0,
+    "back-link": _ctx.backLink,
+    "back-link-url": _ctx.backLinkUrl,
+    "back-link-force": _ctx.backLinkForce,
+    "back-link-show-text": _ctx.backLinkShowText,
+    "onBack:click": _ctx.onBackClick
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "nav-left"), _renderSlot(_ctx.$slots, "left")]),
+    _: 3
+  }, 8, ["back-link", "back-link-url", "back-link-force", "back-link-show-text", "onBack:click"])) : _createCommentVNode("", true), _ctx.hasTitle ? (_openBlock(), _createBlock(_component_f7_nav_title, {
+    key: 1,
+    title: _ctx.title,
+    subtitle: _ctx.subtitle
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "title")]),
+    _: 3
+  }, 8, ["title", "subtitle"])) : _createCommentVNode("", true), _ctx.hasRight ? (_openBlock(), _createBlock(_component_f7_nav_right, {
+    key: 2
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "nav-right"), _renderSlot(_ctx.$slots, "right")]),
+    _: 3
+  })) : _createCommentVNode("", true), _ctx.hasLargeTitle ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createElementVNode("div", _hoisted_3, [_createTextVNode(_toDisplayString(_ctx.largeTitle) + " ", 1), _renderSlot(_ctx.$slots, "title-large")])])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2), _renderSlot(_ctx.$slots, "after-inner")], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { useTheme } from '../shared/use-theme.js';
+import f7NavLeft from './nav-left.js';
+import f7NavTitle from './nav-title.js';
+import f7NavRight from './nav-right.js';
+export default {
+  name: 'f7-navbar',
+  render,
+  components: {
+    f7NavLeft,
+    f7NavTitle,
+    f7NavRight
+  },
+  props: {
+    backLink: [Boolean, String],
+    backLinkUrl: String,
+    backLinkForce: Boolean,
+    backLinkShowText: {
+      type: Boolean,
+      default: undefined
+    },
+    sliding: {
+      type: Boolean,
+      default: true
+    },
+    title: String,
+    subtitle: String,
+    hidden: Boolean,
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    innerClass: String,
+    innerClassName: String,
+    large: Boolean,
+    largeTransparent: Boolean,
+    transparent: Boolean,
+    titleLarge: String,
+    ...colorProps
+  },
+  emits: ['navbar:hide', 'navbar:show', 'navbar:expand', 'navbar:collapse', 'navbar:transparentshow', 'navbar:transparenthide', 'click:back', 'back:click'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    let routerPositionClass = '';
+    let largeCollapsed = false;
+    let routerNavbarRole = null;
+    let routerNavbarRoleDetailRoot = false;
+    let routerNavbarMasterStack = false;
+    let transparentVisible = false;
+    const elRef = ref(null);
+    const theme = useTheme();
+    const onHide = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      emit('navbar:hide');
+    };
+    const onShow = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      emit('navbar:show');
+    };
+    const onExpand = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      largeCollapsed = false;
+      emit('navbar:expand');
+    };
+    const onCollapse = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      largeCollapsed = true;
+      emit('navbar:collapse');
+    };
+    const onNavbarTransparentShow = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      transparentVisible = true;
+      emit('navbar:transparentshow');
+    };
+    const onNavbarTransparentHide = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      transparentVisible = false;
+      emit('navbar:transparenthide');
+    };
+    const onNavbarPosition = (navbarEl, position) => {
+      if (elRef.value !== navbarEl) return;
+      routerPositionClass = position ? `navbar-${position}` : '';
+    };
+    const onNavbarRole = (navbarEl, rolesData) => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarRole = rolesData.role;
+      routerNavbarRoleDetailRoot = rolesData.detailRoot;
+    };
+    const onNavbarMasterStack = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarMasterStack = true;
+    };
+    const onNavbarMasterUnstack = navbarEl => {
+      if (elRef.value !== navbarEl) return;
+      routerNavbarMasterStack = false;
+    };
+    const hide = animate => {
+      if (!f7) return;
+      f7.navbar.hide(elRef.value, animate);
+    };
+    const show = animate => {
+      if (!f7) return;
+      f7.navbar.show(elRef.value, animate);
+    };
+    const size = () => {
+      if (!f7) return;
+      f7.navbar.size(elRef.value);
+    };
+    const onBackClick = event => {
+      emit('back:click', event);
+      emit('click:back', event);
+    };
+    onMounted(() => {
+      if (!elRef.value) return;
+      f7ready(() => {
+        f7.navbar.size(elRef.value);
+        f7.on('navbarShow', onShow);
+        f7.on('navbarHide', onHide);
+        f7.on('navbarCollapse', onCollapse);
+        f7.on('navbarExpand', onExpand);
+        f7.on('navbarPosition', onNavbarPosition);
+        f7.on('navbarRole', onNavbarRole);
+        f7.on('navbarMasterStack', onNavbarMasterStack);
+        f7.on('navbarMasterUnstack', onNavbarMasterUnstack);
+        f7.on('navbarTransparentShow', onNavbarTransparentShow);
+        f7.on('navbarTransparentHide', onNavbarTransparentHide);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!f7) return;
+      f7.off('navbarShow', onShow);
+      f7.off('navbarHide', onHide);
+      f7.off('navbarCollapse', onCollapse);
+      f7.off('navbarExpand', onExpand);
+      f7.off('navbarPosition', onNavbarPosition);
+      f7.off('navbarRole', onNavbarRole);
+      f7.off('navbarMasterStack', onNavbarMasterStack);
+      f7.off('navbarMasterUnstack', onNavbarMasterUnstack);
+      f7.off('navbarTransparentShow', onNavbarTransparentShow);
+      f7.off('navbarTransparentHide', onNavbarTransparentHide);
+    });
+    const addLeftTitleClass = computed(() => theme.value && theme.value.ios && f7 && !f7.params.navbar.iosCenterTitle);
+    const addCenterTitleClass = computed(() => theme.value && theme.value.md && f7 && f7.params.navbar.mdCenterTitle);
+    const isLarge = computed(() => props.large || props.largeTransparent);
+    const isTransparent = computed(() => props.transparent || isLarge.value && props.largeTransparent);
+    const isTransparentVisible = computed(() => isTransparent.value && transparentVisible);
+    const classes = computed(() => classNames('navbar', routerPositionClass, {
+      'navbar-hidden': props.hidden,
+      'navbar-large': isLarge.value,
+      'navbar-large-collapsed': isLarge.value && largeCollapsed,
+      'navbar-transparent': isTransparent.value,
+      'navbar-transparent-visible': isTransparentVisible.value,
+      'navbar-master': routerNavbarRole === 'master',
+      'navbar-master-detail': routerNavbarRole === 'detail',
+      'navbar-master-detail-root': routerNavbarRoleDetailRoot === true,
+      'navbar-master-stacked': routerNavbarMasterStack === true,
+      'no-outline': !props.outline
+    }, colorClasses(props)));
+    const largeTitle = computed(() => {
+      let largeTitleText = props.titleLarge;
+      if (!largeTitleText && props.large && props.title) largeTitleText = props.title;
+      return largeTitleText;
+    });
+    const hasLeft = computed(() => {
+      return props.backLink || slots['nav-left'] || slots.left;
+    });
+    const hasTitle = computed(() => {
+      return props.title || props.subtitle || slots.title;
+    });
+    const hasRight = computed(() => {
+      return slots['nav-right'] || slots.right;
+    });
+    const hasLargeTitle = computed(() => {
+      return largeTitle.value || slots['title-large'];
+    });
+    const innerClasses = computed(() => {
+      return classNames('navbar-inner', props.innerClass, props.innerClassName, {
+        sliding: props.sliding,
+        'navbar-inner-left-title': addLeftTitleClass.value,
+        'navbar-inner-centered-title': addCenterTitleClass.value
+      });
+    });
+    return {
+      elRef,
+      classes,
+      innerClasses,
+      hide,
+      show,
+      size,
+      largeTitle,
+      hasLeft,
+      hasTitle,
+      hasRight,
+      hasLargeTitle,
+      onBackClick
+    };
+  }
+};