import { createVNode as _createVNode } from "vue";
// Styles
import "./VBtn.sass"; // Composables

import { makeDensityProps, useDensity } from "../../composables/density.mjs";
import { makeBorderProps, useBorder } from "../../composables/border.mjs";
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
import { makePositionProps, usePosition } from "../../composables/position.mjs";
import { makeTagProps } from "../../composables/tag.mjs";
import { useTheme } from "../../composables/theme.mjs";
import { useColor } from "../../composables/color.mjs"; // Directives

import { Ripple } from "../../directives/ripple/index.mjs"; // Components

import VIcon from "../VIcon/VIcon.mjs"; // Utilities

import { computed, defineComponent, withDirectives } from 'vue';
import { makeProps, useDirective } from "../../util/index.mjs";
import { makeSizeProps, useSize } from "../../composables/size.mjs";
export default defineComponent({
  name: 'VBtn',
  props: makeProps({
    text: Boolean,
    flat: Boolean,
    plain: Boolean,
    icon: [Boolean, String],
    block: Boolean,
    color: {
      type: String,
      default: 'primary'
    },
    disabled: Boolean,
    ...makeBorderProps(),
    ...makeRoundedProps(),
    ...makeDensityProps(),
    ...makeDimensionProps(),
    ...makeElevationProps(),
    ...makePositionProps(),
    ...makeSizeProps(),
    ...makeTagProps({
      tag: 'button'
    })
  }),

  setup(props, {
    slots
  }) {
    const {
      themeClasses
    } = useTheme();
    const {
      borderClasses
    } = useBorder(props, 'v-btn');
    const {
      roundedClasses
    } = useRounded(props, 'v-btn');
    const {
      densityClasses
    } = useDensity(props, 'v-btn');
    const {
      dimensionStyles
    } = useDimension(props);
    const {
      elevationClasses
    } = useElevation(props);
    const {
      positionClasses,
      positionStyles
    } = usePosition(props, 'v-btn');
    const {
      sizeClasses
    } = useSize(props, 'v-btn');
    const isContained = computed(() => {
      return !(props.text || props.plain || props.icon || props.outlined || props.border !== false);
    });
    const isElevated = computed(() => {
      return isContained.value && !(props.disabled || props.flat);
    });
    const {
      colorClasses,
      colorStyles
    } = useColor(computed(() => ({
      [isContained.value ? 'background' : 'text']: props.color
    })));
    return () => withDirectives(_createVNode(props.tag, {
      "type": "button",
      "class": ['v-btn', {
        'v-btn--contained': isContained.value,
        'v-btn--elevated': isElevated.value,
        'v-btn--icon': !!props.icon,
        'v-btn--plain': props.plain,
        'v-btn--block': props.block,
        'v-btn--disabled': props.disabled
      }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value],
      "style": [colorStyles.value, dimensionStyles.value, positionStyles.value],
      "disabled": props.disabled
    }, {
      default: () => [_createVNode("span", {
        "class": "v-btn__overlay"
      }, null), typeof props.icon === 'boolean' ? slots.default == null ? void 0 : slots.default() : _createVNode(VIcon, {
        "icon": props.icon,
        "size": props.size
      }, null, 8, ["icon", "size"])],
      _: 1
    }, 8, ["class", "style", "disabled"]), [useDirective(Ripple, {
      value: !props.disabled,
      modifiers: {
        center: !!props.icon
      }
    })]);
  }

});
//# sourceMappingURL=VBtn.mjs.map