framework7-vue/components/card.js

Build full featured iOS & Android apps using Framework7 & Vue

import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = ["data-animate", "data-hide-navbar-on-open", "data-hide-toolbar-on-open", "data-hide-statusbar-on-open", "data-scrollable-el", "data-swipe-to-close", "data-close-by-backdrop-click", "data-backdrop", "data-backdrop-el"];
function render(_ctx, _cache) {
  const _component_f7_card_header = _resolveComponent("f7-card-header");
  const _component_f7_card_content = _resolveComponent("f7-card-content");
  const _component_f7_card_footer = _resolveComponent("f7-card-footer");
  return _openBlock(), _createElementBlock("div", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes),
    "data-animate": typeof _ctx.animate === 'undefined' ? _ctx.animate : _ctx.animate.toString(),
    "data-hide-navbar-on-open": typeof _ctx.hideNavbarOnOpen === 'undefined' ? _ctx.hideNavbarOnOpen : _ctx.hideNavbarOnOpen.toString(),
    "data-hide-toolbar-on-open": typeof _ctx.hideToolbarOnOpen === 'undefined' ? _ctx.hideToolbarOnOpen : _ctx.hideToolbarOnOpen.toString(),
    "data-hide-statusbar-on-open": typeof _ctx.hideStatusbarOnOpen === 'undefined' ? _ctx.hideStatusbarOnOpen : _ctx.hideStatusbarOnOpen.toString(),
    "data-scrollable-el": _ctx.scrollableEl,
    "data-swipe-to-close": typeof _ctx.swipeToClose === 'undefined' ? _ctx.swipeToClose : _ctx.swipeToClose.toString(),
    "data-close-by-backdrop-click": typeof _ctx.closeByBackdropClick === 'undefined' ? _ctx.closeByBackdropClick : _ctx.closeByBackdropClick.toString(),
    "data-backdrop": typeof _ctx.backdrop === 'undefined' ? _ctx.backdrop : _ctx.backdrop.toString(),
    "data-backdrop-el": _ctx.backdropEl
  }, [_ctx.hasHeader ? (_openBlock(), _createBlock(_component_f7_card_header, {
    key: 0
  }, {
    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")]),
    _: 3
  })) : _createCommentVNode("", true), _ctx.hasContent ? (_openBlock(), _createBlock(_component_f7_card_content, {
    key: 1,
    padding: _ctx.padding
  }, {
    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")]),
    _: 3
  }, 8, ["padding"])) : _createCommentVNode("", true), _ctx.hasFooter ? (_openBlock(), _createBlock(_component_f7_card_footer, {
    key: 2
  }, {
    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")]),
    _: 3
  })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
}
import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7, f7ready } from '../shared/f7.js';
import f7CardHeader from './card-header.js';
import f7CardContent from './card-content.js';
import f7CardFooter from './card-footer.js';
export default {
  name: 'f7-card',
  render,
  components: {
    f7CardHeader,
    f7CardContent,
    f7CardFooter
  },
  props: {
    title: [String, Number],
    content: [String, Number],
    footer: [String, Number],
    raised: Boolean,
    outline: Boolean,
    outlineIos: Boolean,
    outlineMd: Boolean,
    headerDivider: Boolean,
    footerDivider: Boolean,
    expandable: Boolean,
    expandableAnimateWidth: Boolean,
    expandableOpened: Boolean,
    animate: {
      type: Boolean,
      default: undefined
    },
    hideNavbarOnOpen: {
      type: Boolean,
      default: undefined
    },
    hideToolbarOnOpen: {
      type: Boolean,
      default: undefined
    },
    hideStatusbarOnOpen: {
      type: Boolean,
      default: undefined
    },
    scrollableEl: {
      type: String,
      default: undefined
    },
    swipeToClose: {
      type: Boolean,
      default: undefined
    },
    closeByBackdropClick: {
      type: Boolean,
      default: undefined
    },
    backdrop: {
      type: Boolean,
      default: undefined
    },
    backdropEl: {
      type: String,
      default: undefined
    },
    padding: {
      type: Boolean,
      default: true
    },
    ...colorProps
  },
  emits: ['card:beforeopen', 'card:open', 'card:opened', 'card:close', 'card:closed', 'update:expandableOpened'],
  setup(props, {
    emit,
    slots
  }) {
    const elRef = ref(null);
    const open = () => {
      if (!elRef.value) return;
      f7.card.open(elRef.value);
    };
    const close = () => {
      if (!elRef.value) return;
      f7.card.close(elRef.value);
    };
    const onBeforeOpen = (el, prevent) => {
      if (elRef.value !== el) return;
      emit('card:beforeopen', el, prevent);
    };
    const onOpen = el => {
      if (elRef.value !== el) return;
      emit('card:open', el);
      emit('update:expandableOpened', true);
    };
    const onOpened = (el, pageEl) => {
      if (elRef.value !== el) return;
      emit('card:opened', el, pageEl);
    };
    const onClose = el => {
      if (elRef.value !== el) return;
      emit('card:close', el);
    };
    const onClosed = (el, pageEl) => {
      if (elRef.value !== el) return;
      emit('card:closed', el, pageEl);
      emit('update:expandableOpened', false);
    };
    onMounted(() => {
      if (!props.expandable || !elRef.value) return;
      f7ready(() => {
        if (props.expandable && props.expandableOpened) {
          f7.card.open(elRef.value, false);
        }
        f7.on('cardBeforeOpen', onBeforeOpen);
        f7.on('cardOpen', onOpen);
        f7.on('cardOpened', onOpened);
        f7.on('cardClose', onClose);
        f7.on('cardClosed', onClosed);
      });
    });
    onBeforeUnmount(() => {
      f7.off('cardBeforeOpen', onBeforeOpen);
      f7.off('cardOpen', onOpen);
      f7.off('cardOpened', onOpened);
      f7.off('cardClose', onClose);
      f7.off('cardClosed', onClosed);
    });
    watch(() => props.expandableOpened, value => {
      if (value) {
        open();
      } else {
        close();
      }
    });
    const hasHeader = computed(() => props.title || slots.header);
    const hasContent = computed(() => props.content || slots.content);
    const hasFooter = computed(() => props.footer || slots.footer);
    const classes = computed(() => classNames('card', {
      'card-raised': props.raised,
      'card-outline': props.outline,
      'card-outline-ios': props.outlineIos,
      'card-outline-md': props.outlineMd,
      'card-expandable': props.expandable,
      'card-expandable-animate-width': props.expandableAnimateWidth,
      'card-header-divider': props.headerDivider,
      'card-footer-divider': props.footerDivider
    }, colorClasses(props)));
    return {
      elRef,
      classes,
      hasHeader,
      hasContent,
      hasFooter
    };
  }
};