import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useEvent } from './chunks/d4058887.js';
import { b as useState } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';

var style = ":host {\n}\n\n.kun-search-input-button {\n  font-size: 16px;\n  padding: 8px 8px;\n}\n";

const KunSearchInput = () => {
  const [value, setValue] = useState("");
  const mySubmitEvent = useEvent("MySubmit", {
    bubbles: true,
    composed: true
  });

  const changeSetValue = event => {
    const a = event.target;
    setValue(a.value);
  };

  const onEnter = event => {
    if (event.code === "Enter") {
      const a = event.target;
      mySubmitEvent(a.value);
      event.preventDefault();
      event.stopPropagation();
    }
  };

  return h("host", null, h("style", null, style), h("div", {
    className: "w-full"
  }, h("form", {
    className: "w-full"
  }, h("div", {
    className: "flex items-center border-b border-b-2 border-orange-500 py-2"
  }, h("input", {
    className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none",
    value: value,
    type: "text",
    onkeydown: onEnter,
    placeholder: "\u641C\u7D22\u4E00\u4E0B",
    onchange: changeSetValue,
    "aria-label": ""
  }), h("button", {
    className: "flex-shrink-0 bg-orange-400 hover:bg-orange-500 border-none hover:border-orange-500 text-sm border-4 text-white py-1 px-2 rounded kun-search-input-button",
    onclick: () => mySubmitEvent(value),
    type: "button"
  }, "\u9A6C\u4E0A\u641C\u7D22")))));
};

KunSearchInput.props = {
  message: {
    type: String,
    value: "kun-search-input",
    reflect: true,
    event: {
      type: "changeMessage"
    }
  }
};
var kunSearchInput = getComponentOrDefine("kun-search-input", KunSearchInput);

export default kunSearchInput;
//# sourceMappingURL=kun-search-input.js.map
