framework7-vue/components/actions-button.js

Build full featured iOS & Android apps using Framework7 & Vue

import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = {
  key: 0,
  class: "actions-button-media"
};
const _hoisted_2 = {
  class: "actions-button-text"
};
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes),
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
  }, [_ctx.hasMedia ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "media")])) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "default")])], 2);
}
import { computed, ref } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7 } from '../shared/f7.js';
export default {
  name: 'f7-actions-button',
  render,
  props: {
    strong: Boolean,
    close: {
      type: Boolean,
      default: true
    },
    ...colorProps
  },
  emits: ['click'],
  setup(props, {
    slots,
    emit
  }) {
    const elRef = ref(null);
    const onClick = e => {
      if (elRef.value && props.close && f7) {
        f7.actions.close(f7.$(elRef.value).parents('.actions-modal'));
      }
      emit('click', e);
    };
    const hasMedia = computed(() => slots && !!slots.media);
    const classes = computed(() => classNames({
      'actions-button': true,
      'actions-button-strong': props.strong
    }, colorClasses(props)));
    return {
      classes,
      elRef,
      hasMedia,
      onClick
    };
  }
};