import { defineComponent, ref, computed, h, provide } from 'vue';
import useModelToggle, { useModelToggleEmits } from '../../../composables/private/use-model-toggle.mjs';
import { hMergeSlot, hSlot } from '../../../utils/private/render.mjs';
import { fabKey } from '../../../utils/config.mjs';
import useFab from './use-fab.mjs';
import Btn from '../btn/index.mjs';
import Icon from '../icon/index.mjs';
import defaultProps from './defaultProps.mjs';

var Fab = defineComponent({
  name: "VcFab",
  props: defaultProps,
  emits: useModelToggleEmits,
  setup(props, { slots }) {
    const triggerRef = ref(null);
    const showing = ref(props.modelValue === true);
    const { formClass, labelProps } = useFab(props, showing);
    const hideOnRouteChange = computed(() => props.persistent !== true);
    const { hide, toggle } = useModelToggle({
      showing,
      hideOnRouteChange
    });
    const classes = computed(() => `vc-fab z-fab row inline justify-center vc-fab--align-${props.verticalActionsAlign} ${formClass.value}` + (showing.value === true ? " vc-fab--opened" : ""));
    const actionClass = computed(() => `vc-fab__actions flex no-wrap inline vc-fab__actions--${props.direction}`);
    function getTriggerContent() {
      const child = [];
      props.hideIcon !== true && child.push(h("div", { class: "vc-fab__icon-holder" }, [
        h(Icon, {
          class: "vc-fab__icon absolute-full",
          name: props.icon
        }),
        h(Icon, {
          class: "vc-fab__active-icon absolute-full",
          name: props.activeIcon
        })
      ]));
      props.label !== "" && child[labelProps.value.action](h("div", labelProps.value.data, [props.label]));
      return hMergeSlot(slots.tooltip, child);
    }
    provide(fabKey, {
      showing,
      onChildClick(evt) {
        props.hideActionOnClick && hide(evt);
        if (triggerRef.value !== null) {
          triggerRef.value.$el.focus();
        }
      }
    });
    return () => h("div", {
      class: classes.value
    }, [
      h(Btn, {
        ref: triggerRef,
        class: formClass.value,
        ...props,
        noWrap: true,
        stack: props.stacked,
        align: void 0,
        icon: void 0,
        label: void 0,
        noCaps: true,
        fab: true,
        flat: props.flat,
        size: props.size,
        "aria-expanded": showing.value === true ? "true" : "false",
        "aria-haspopup": "true",
        onClick: toggle
      }, getTriggerContent),
      h("div", { class: actionClass.value }, hSlot(slots.default))
    ]);
  }
});

export { Fab as default };
//# sourceMappingURL=fab.mjs.map
