import { computed, withDirectives, createVNode, resolveDirective } from "vue";
import "./styles/button.scss";
import { makePaperProps, usePaper } from "../../composables/paper/index.mjs";
import { makeRouterProps, useLink } from "../../composables/router/index.mjs";
import { makeLoadingProps, useLoading } from "../../composables/loading/index.mjs";
import { makeDisabledProps, useDisabled } from "../../composables/disabled/index.mjs";
import { makeGroupItemProps, useGroupItem } from "../../composables/group/index.mjs";
import { ProgressCircular } from "../progress/progress-circular.mjs";
import { Ripple } from "../../directives/ripple/index.mjs";
import { ButtonToggleKey } from "../button-toggle/button-toggle.mjs";
import { genOverlays } from "../../composables/variant/index.mjs";
import { ExpandXTransition } from "../transition/expand-transition.mjs";
import { Icon } from "../icon/icon.mjs";
import { propsFactory } from "../../utils/dist/index.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const makeButtonProps = propsFactory({
  type: {
    type: String,
    default: "button"
  },
  icon: [Boolean, String, Object],
  prependIcon: [String, Object],
  appendIcon: [String, Object],
  stacked: Boolean,
  block: Boolean,
  text: [String, Number],
  ripple: {
    type: Boolean,
    default: true
  },
  overlay: {
    type: Boolean,
    default: true
  },
  ...makeDisabledProps(),
  ...makeLoadingProps(),
  ...makeRouterProps(),
  ...makeGroupItemProps(),
  ...makePaperProps({
    tag: "button",
    shape: "rounded-sm",
    variant: "contained"
  })
}, "button");
const Button = defineComponent({
  name: "VeButton",
  directives: {
    Ripple
  },
  props: makeButtonProps(),
  emits: {
    click: (_event) => true
  },
  setup(props, {
    attrs,
    slots,
    emit
  }) {
    const group = useGroupItem(props, ButtonToggleKey, false);
    const {
      paperClasses,
      paperStyles
    } = usePaper(props);
    const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled || props.loading);
    const {
      loadingClasses
    } = useLoading(props);
    const {
      disabledClasses
    } = useDisabled(computed(() => ({
      disabled: (group == null ? void 0 : group.disabled.value) || props.disabled
    })));
    const link = useLink(props, attrs);
    const handleClick = (e) => {
      if (isDisabled.value) {
        e.preventDefault();
        return;
      }
      link.navigate ? link.navigate() : group == null ? void 0 : group.toggle();
      emit("click", e);
    };
    return () => {
      var _a;
      const Tag = link.isLink.value ? "a" : props.tag;
      const hasPrependIcon = !props.icon && props.prependIcon;
      const hasPrependLoading = !hasPrependIcon && props.loading && (slots.default || props.text);
      const hasIconOnly = props.icon && typeof props.icon !== "boolean";
      const hasDefault = !hasIconOnly && (slots.default || props.text);
      const hasAppendIcon = !props.icon && props.appendIcon;
      return withDirectives(createVNode(Tag, {
        "role": link.isLink.value ? void 0 : "button",
        "aria-disabled": props.disabled || void 0,
        "type": link.isLink.value ? void 0 : props.type,
        "class": ["ve-button", group == null ? void 0 : group.selectedClass.value, paperClasses.value, disabledClasses.value, loadingClasses.value, {
          "ve-button--active": (_a = link.isExactActive) == null ? void 0 : _a.value,
          "ve-button--block": props.block,
          "ve-button--stacked": props.stacked,
          "ve-button--icon": !hasIconOnly && !!props.icon,
          "ve-button--icon-only": hasIconOnly
        }],
        "style": paperStyles.value,
        "disabled": props.disabled || void 0,
        "href": link.href.value,
        "onClick": handleClick
      }, {
        default: () => {
          var _a2, _b;
          return [genOverlays(props.overlay, "ve-button"), createVNode(ExpandXTransition, null, {
            default: () => [hasPrependLoading && createVNode(Icon, {
              "class": "ve-button__icon",
              "icon": createVNode(ProgressCircular, {
                "color": "currentColor",
                "indeterminate": true
              }, null),
              "size": props.size,
              "start": true
            }, null)]
          }), hasPrependIcon && createVNode(Icon, {
            "class": "ve-button__icon",
            "icon": props.loading ? createVNode(ProgressCircular, {
              "color": "currentColor",
              "indeterminate": true
            }, null) : props.prependIcon,
            "size": props.size,
            "start": true
          }, null), hasDefault && createVNode("span", {
            "class": "ve-button__wrapper"
          }, [(_b = (_a2 = slots.default) == null ? void 0 : _a2.call(slots)) != null ? _b : props.text]), hasIconOnly && createVNode(Icon, {
            "class": "ve-button__icon",
            "icon": props.loading ? createVNode(ProgressCircular, {
              "color": "currentColor",
              "indeterminate": true
            }, null) : props.icon,
            "size": props.size
          }, null), hasAppendIcon && createVNode(Icon, {
            "class": "ve-button__icon",
            "icon": props.appendIcon,
            "size": props.size,
            "end": true
          }, null)];
        }
      }), [[resolveDirective("ripple"), !isDisabled.value && props.ripple, null]]);
    };
  }
});
export {
  Button,
  makeButtonProps
};
//# sourceMappingURL=button.mjs.map
