import { ref, watchEffect, computed, createVNode } from "vue";
import "./styles/input-control.scss";
import { makeVariantProps, useVariant, genOverlays } from "../../composables/variant/index.mjs";
import { makeShapeProps, useShape } from "../../composables/shape/index.mjs";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { Icon } from "../icon/icon.mjs";
import { Button } from "../button/button.mjs";
import { propsFactory, useRender, pick } from "../../utils/dist/index.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
const makeInputControlProps = propsFactory({
  appendInnerIcon: [String, Object],
  clearable: Boolean,
  clearIcon: {
    type: [String, Object],
    default: "$clear"
  },
  disabled: Boolean,
  prependInnerIcon: [String, Object],
  prefix: String,
  prefixIcon: [String, Object],
  suffix: String,
  suffixIcon: [String, Object],
  ...makeVariantProps({
    variant: "contained"
  }),
  ...makeShapeProps({
    shape: "rounded-sm"
  })
}, "input-control");
function filterInputControlSlots(slots) {
  return pick(slots, InputControlSlots);
}
const InputControlEmits = {
  "click:clear": (_event) => true,
  "click:prepend-inner": (_event) => true,
  "click:prefix": (_event) => true,
  "click:suffix": (_event) => true,
  "click:append-inner": (_event) => true,
  "click:control": (_event) => true,
  "update:active": (_active) => true,
  "update:modelValue": (_modelValue) => true
};
const InputControlSlots = ["prepend-inner", "prefix", "default", "suffix", "append-inner", "clear"];
const InputControl = genericComponent()({
  name: "VeInputControl",
  props: {
    active: Boolean,
    dirty: Boolean,
    ...makeInputControlProps()
  },
  emits: InputControlEmits,
  setup(props, {
    slots,
    emit
  }) {
    const isActive = useProxiedModel(props, "active");
    const isFocused = ref(false);
    const controlRef = ref();
    const inputRef = ref();
    const {
      variantClasses,
      colorClasses,
      colorStyles
    } = useVariant(props);
    const {
      shapeClasses
    } = useShape(props);
    watchEffect(() => isActive.value = isFocused.value || props.dirty);
    function focus() {
      isFocused.value = true;
    }
    function blur() {
      isFocused.value = false;
    }
    const slotProps = computed(() => ({
      isActive: isActive.value,
      isDirty: props.dirty,
      isFocused: isFocused.value,
      controlRef,
      inputRef,
      focus,
      blur
    }));
    function onClick(e) {
      if (e.target !== document.activeElement) {
        e.preventDefault();
      }
      emit("click:control", e);
    }
    useRender(() => {
      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
      const hasPrependInner = !!(props.prependInnerIcon || slots["prepend-inner"]);
      const hasPrefix = !!(props.prefix || props.prefixIcon || slots.prefix);
      const hasSuffix = !!(props.suffix || props.suffixIcon || slots.suffix);
      const hasClear = !!(props.clearable || slots.clear);
      const hasAppendInner = !!(props.appendInnerIcon || slots["append-inner"]);
      return createVNode("div", {
        "class": ["ve-input-control", {
          "ve-input-control--active": isActive.value,
          "ve-input-control--disabled": props.disabled,
          "ve-input-control--dirty": props.dirty,
          "ve-input-control--focused": isFocused.value,
          "ve-input-control--prepended": hasPrependInner,
          "ve-input-control--prefixed": hasPrefix,
          "ve-input-control--suffixed": hasSuffix,
          "ve-input-control--appended": hasClear || hasAppendInner
        }, colorClasses.value, variantClasses.value, shapeClasses.value],
        "style": colorStyles.value,
        "onClick": onClick
      }, [genOverlays(false, "ve-input-control"), hasPrependInner && createVNode("div", {
        "class": "ve-input-control__prepend-inner"
      }, [(_a = slots["prepend-inner"]) == null ? void 0 : _a.call(slots, slotProps.value), props.prependInnerIcon && createVNode(Icon, {
        "onClick": (e) => emit("click:prepend-inner", e),
        "icon": props.prependInnerIcon
      }, null)]), createVNode("div", {
        "class": "ve-input-control__input"
      }, [hasPrefix && createVNode("span", {
        "class": "ve-input-control__prefix"
      }, [(_c = (_b = slots.prefix) == null ? void 0 : _b.call(slots, slotProps.value)) != null ? _c : props.prefix, props.prefixIcon && createVNode(Icon, {
        "onClick": (e) => emit("click:prefix", e),
        "icon": props.prefixIcon
      }, null)]), (_d = slots.default) == null ? void 0 : _d.call(slots, {
        ...slotProps.value,
        props: {
          class: "ve-native-control"
        }
      }), hasSuffix && createVNode("span", {
        "class": "ve-input-control__suffix"
      }, [props.suffixIcon && createVNode(Icon, {
        "onClick": (e) => emit("click:suffix", e),
        "icon": props.suffixIcon
      }, null), (_f = (_e = slots.suffix) == null ? void 0 : _e.call(slots, slotProps.value)) != null ? _f : props.suffix])]), hasClear && createVNode("div", {
        "class": ["ve-input-control__clearable", {
          "ve-input-control__clearable--has-append-inner": hasAppendInner
        }]
      }, [(_h = (_g = slots.clear) == null ? void 0 : _g.call(slots, slotProps.value)) != null ? _h : createVNode(Button, {
        "icon": props.clearIcon,
        "ripple": false,
        "shape": "circle",
        "size": "1em",
        "onClick": (e) => emit("click:clear", e),
        "variant": "text"
      }, null)]), hasAppendInner && createVNode("div", {
        "class": "ve-input-control__append-inner"
      }, [props.appendInnerIcon && createVNode(Icon, {
        "icon": props.appendInnerIcon,
        "onClick": (e) => emit("click:append-inner", e)
      }, null), (_i = slots["append-inner"]) == null ? void 0 : _i.call(slots, slotProps.value)])]);
    });
    return {
      inputRef,
      controlRef
    };
  }
});
function filterInputControlProps(attrs) {
  return pick(attrs, Object.keys(InputControl.props));
}
export {
  InputControl,
  InputControlEmits,
  InputControlSlots,
  filterInputControlProps,
  filterInputControlSlots,
  makeInputControlProps
};
//# sourceMappingURL=input-control.mjs.map
