framework7-vue/components/tab.js

Build full featured iOS & Android apps using Framework7 & Vue

import { resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
function render(_ctx, _cache) {
  return _ctx.isSwiper ? (_openBlock(), _createElementBlock("swiper-slide", {
    key: 0,
    ref: "elRef",
    class: _normalizeClass(_ctx.classes)
  }, [_ctx.tabContent ? (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.getComponent(_ctx.tabContent)), _mergeProps({
    key: _ctx.tabContent.id
  }, _ctx.getProps(_ctx.tabContent)), null, 16)) : _renderSlot(_ctx.$slots, "default", {
    key: 1
  })], 2)) : (_openBlock(), _createElementBlock("div", {
    key: 1,
    ref: "elRef",
    class: _normalizeClass(_ctx.classes)
  }, [_ctx.tabContent ? (_openBlock(), _createBlock(_resolveDynamicComponent(_ctx.getComponent(_ctx.tabContent)), _mergeProps({
    key: _ctx.tabContent.id
  }, _ctx.getProps(_ctx.tabContent)), null, 16)) : _renderSlot(_ctx.$slots, "default", {
    key: 1
  })], 2));
}
import { computed, ref, inject, onMounted, onBeforeUnmount, onUpdated, toRaw } from 'vue';
import { classNames, getComponentId } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7ready, f7routers, f7, f7events } from '../shared/f7.js';
import { useTab } from '../shared/use-tab.js';
export default {
  name: 'f7-tab',
  render,
  props: {
    tabActive: Boolean,
    ...colorProps
  },
  emits: ['tab:show', 'tab:hide'],
  setup(props, {
    emit
  }) {
    const elRef = ref(null);
    const routerData = ref(null);
    const route = inject('f7route', null);
    const router = inject('f7route', null);
    const isSwiper = inject('TabsSwipeableContext', false);
    let initialTabContent = null;
    if (!routerData.value && route && route.route && route.route.tab && route.route.tab.id === props.id) {
      const {
        component,
        asyncComponent,
        options: tabRouteOptions
      } = route.route.tab;
      if (component || asyncComponent) {
        const parentProps = route.route.options && route.route.options.props;
        initialTabContent = {
          id: getComponentId(),
          component: component || asyncComponent,
          isAsync: !!asyncComponent,
          props: {
            ...(parentProps || {}),
            ...(tabRouteOptions && tabRouteOptions.props || {}),
            f7router: router,
            f7route: route,
            ...route.params
          }
        };
      }
    }
    const tabContent = ref(initialTabContent || null);
    const setTabContent = newContent => {
      tabContent.value = newContent;
    };
    if (f7 && !routerData.value) {
      routerData.value = {
        setTabContent
      };
      f7routers.tabs.push(routerData.value);
    }
    onMounted(() => {
      if (elRef.value && initialTabContent) {
        elRef.value.f7RouterTabLoaded = true;
      }
      f7ready(() => {
        if (!routerData.value) {
          routerData.value = {
            el: elRef.value,
            setTabContent
          };
          f7routers.tabs.push(routerData.value);
        } else {
          routerData.value.el = elRef.value;
        }
      });
    });
    onBeforeUnmount(() => {
      if (!routerData.value) return;
      f7routers.tabs.splice(f7routers.tabs.indexOf(routerData.value), 1);
      routerData.value = null;
    });
    onUpdated(() => {
      if (!routerData.value || !f7) return;
      f7events.emit('tabRouterDidUpdate', routerData.value);
    });
    useTab(elRef, emit);
    const classes = computed(() => classNames('tab', {
      'tab-active': props.tabActive
    }, colorClasses(props)));
    const getComponent = content => toRaw(content.component);
    const getProps = content => {
      const {
        component: tabComponent,
        props: tabProps
      } = content;
      let keys = [];
      const passProps = {};
      if (tabComponent && tabComponent.props) keys = Object.keys(tabComponent.props);
      keys.forEach(key => {
        if (key in tabProps) passProps[key] = tabProps[key];
      });
      return passProps;
    };
    return {
      elRef,
      classes,
      tabContent,
      getComponent,
      getProps,
      isSwiper
    };
  }
};