import { createVNode as _createVNode } from "vue";
import "./styles/input-control.css";
import { computed, ref, watchEffect } from "vue";
import { pick, propsFactory, useRender } from "@veno-ui/utils";
import { genericComponent } from "../../utils";
import { Icon } from "../icon";
import { Button } from "../button";
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant";
import { makeShapeProps, useShape } from "../../composables/shape";
import { useProxiedModel } from "../../composables/proxied-model";
const makeInputControlProps = propsFactory({
  /**
   * @zh 后置内联图标
   */
  appendInnerIcon: [String, Object],
  /**
   * @zh 是否可清除
   */
  clearable: Boolean,
  /**
   * @zh 清除图标
   */
  clearIcon: {
    type: [String, Object],
    default: "$clear"
  },
  /**
   * @zh 是否禁用
   */
  disabled: Boolean,
  /**
   * @zh 前置内联图标
   */
  prependInnerIcon: [String, Object],
  /**
   * @zh 前缀
   */
  prefix: String,
  /**
   * @zh 前缀图标
   */
  prefixIcon: [String, Object],
  /**
   * @zh 后缀
   */
  suffix: String,
  /**
   * @zh 后缀图标
   */
  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(() => {
      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"
      }, [slots["prepend-inner"]?.(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"
      }, [slots.prefix?.(slotProps.value) ?? props.prefix, props.prefixIcon && _createVNode(Icon, {
        "onClick": (e) => emit("click:prefix", e),
        "icon": props.prefixIcon
      }, null)]), slots.default?.({
        ...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), slots.suffix?.(slotProps.value) ?? props.suffix])]), hasClear && _createVNode("div", {
        "class": ["ve-input-control__clearable", {
          "ve-input-control__clearable--has-append-inner": hasAppendInner
        }]
      }, [slots.clear?.(slotProps.value) ?? _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), slots["append-inner"]?.(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
