framework7-vue/components/button.js

Build full featured iOS & Android apps using Framework7 & Vue

import { resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, renderSlot as _renderSlot, createElementVNode as _createElementVNode, Fragment as _Fragment, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
const _hoisted_1 = {
  key: 1
};
const _hoisted_2 = {
  key: 1
};
function render(_ctx, _cache) {
  const _component_f7_preloader = _resolveComponent("f7-preloader");
  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps({
    ref: "elRef",
    class: _ctx.classesComputed
  }, _ctx.attrs), {
    default: _withCtx(() => [_ctx.preloader ? (_openBlock(), _createElementBlock(_Fragment, {
      key: 0
    }, [_createVNode(_component_f7_preloader, {
      size: _ctx.preloaderSize,
      color: _ctx.preloaderColor
    }, null, 8, ["size", "color"]), _createElementVNode("span", null, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
      key: 0,
      icon: _ctx.icon
    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")])], 64)) : (_openBlock(), _createElementBlock(_Fragment, {
      key: 1
    }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
      key: 0,
      icon: _ctx.icon
    }, null, 8, ["icon"])) : _createCommentVNode("", true), _ctx.text ? (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.text), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 64))]),
    _: 3
  }, 16, ["class"]);
}
import { ref, computed } from 'vue';
import { classNames, extend, isStringProp } from '../shared/utils.js';
import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses, iconProps, colorProps, actionsProps, routerProps } from '../shared/mixins.js';
import { useTooltip } from '../shared/use-tooltip.js';
import { useIcon } from '../shared/use-icon.js';
import { useRouteProps } from '../shared/use-route-props.js';
import f7Preloader from './preloader.js';
import f7UseIcon from './use-icon.js';
export default {
  name: 'f7-button',
  render,
  components: {
    f7Preloader,
    f7UseIcon
  },
  props: {
    text: String,
    tabLink: [Boolean, String],
    tabLinkActive: Boolean,
    type: String,
    href: {
      type: [String, Boolean],
      default: '#'
    },
    target: String,
    round: Boolean,
    roundMd: Boolean,
    roundIos: Boolean,
    fill: Boolean,
    fillMd: Boolean,
    fillIos: Boolean,
    tonal: Boolean,
    tonalMd: Boolean,
    tonalIos: Boolean,
    large: Boolean,
    largeMd: Boolean,
    largeIos: Boolean,
    small: Boolean,
    smallMd: Boolean,
    smallIos: Boolean,
    raised: Boolean,
    raisedMd: Boolean,
    raisedIos: Boolean,
    outline: Boolean,
    outlineMd: Boolean,
    outlineIos: Boolean,
    active: Boolean,
    disabled: Boolean,
    tooltip: String,
    tooltipTrigger: String,
    preloader: Boolean,
    preloaderSize: [Number, String],
    preloaderColor: String,
    loading: Boolean,
    ...iconProps,
    ...colorProps,
    ...actionsProps,
    ...routerProps
  },
  setup(props) {
    const elRef = ref(null);
    useTooltip(elRef, props);
    useRouteProps(elRef, props);
    const icon = computed(() => useIcon(props));
    const tag = computed(() => props.type === 'submit' || props.type === 'reset' || props.type === 'button' ? 'button' : 'a');
    const attrs = computed(() => {
      const {
        href,
        tabLink,
        target,
        type
      } = props;
      let hrefComputed = href;
      if (href === true) hrefComputed = '#';
      if (href === false || tag.value === 'button') hrefComputed = undefined; // no href attribute
      return extend({
        href: hrefComputed,
        target,
        type,
        'data-tab': isStringProp(tabLink) && tabLink || undefined
      }, routerAttrs(props), actionsAttrs(props));
    });
    const classesComputed = computed(() => {
      const {
        tabLink,
        tabLinkActive,
        round,
        roundMd,
        roundIos,
        fill,
        fillMd,
        fillIos,
        tonal,
        tonalMd,
        tonalIos,
        large,
        largeMd,
        largeIos,
        small,
        smallMd,
        smallIos,
        raised,
        raisedMd,
        raisedIos,
        outline,
        outlineMd,
        outlineIos,
        active,
        disabled,
        preloader,
        loading
      } = props;
      return classNames('button', {
        'tab-link': tabLink || tabLink === '',
        'tab-link-active': tabLinkActive,
        'button-round': round,
        'button-round-ios': roundIos,
        'button-round-md': roundMd,
        'button-fill': fill,
        'button-fill-ios': fillIos,
        'button-fill-md': fillMd,
        'button-tonal': tonal,
        'button-tonal-ios': tonalIos,
        'button-tonal-md': tonalMd,
        'button-large': large,
        'button-large-ios': largeIos,
        'button-large-md': largeMd,
        'button-small': small,
        'button-small-ios': smallIos,
        'button-small-md': smallMd,
        'button-raised': raised,
        'button-raised-ios': raisedIos,
        'button-raised-md': raisedMd,
        'button-active': active,
        'button-outline': outline,
        'button-outline-ios': outlineIos,
        'button-outline-md': outlineMd,
        'button-preloader': preloader,
        'button-loading': loading,
        disabled
      }, colorClasses(props), routerClasses(props), actionsClasses(props));
    });
    return {
      tag,
      elRef,
      attrs,
      classesComputed,
      icon
    };
  }
};