import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import './chunks/d4058887.js';
import { b as useState } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './kun-edit-tag.js';
import './kun-icon-close.js';
import { r as rn } from './chunks/f484978b.js';

const KunTagInput = () => {
  const [tags, setTags] = useProp("tags");
  const [maxSize] = useProp("maxSize");
  const [currentTag, setCurrentTag] = useState("");

  const deleteTag = tag => {
    const s1 = rn(tags, draft => {
      const index = tags.findIndex(item => item === tag);

      if (index > -1) {
        draft.splice(index, 1);
      }
    });
    setTags(s1);
  };

  const addTag = () => {
    if (currentTag !== "") {
      if (tags.indexOf(currentTag) < 0) {
        setTags(tags.concat(currentTag));
      }

      setCurrentTag("");
    }
  };

  const changeInput = event => {
    const {
      value
    } = event.target;
    setCurrentTag(value);
  };

  return h("host", null, h("style", null, mockStyle), h("div", {
    className: "flex "
  }, h("div", null, tags.map(item => h("kun-edit-tag", {
    className: "mr-4",
    content: item,
    onDeleteTag: () => deleteTag(item)
  }))), tags.length < maxSize && h("div", {
    className: "inline-flex w-1/3 justify-end items-center"
  }, h("input", {
    type: "text",
    className: "border-b-2  px-2 focus:shadow-outline focus:bg-blue-100 mr-3",
    value: currentTag,
    oninput: changeInput
  }), h("button", {
    classNamee: "px-4 bg-gray-300 hover:bg-gray-400 text-gray-800",
    onclick: addTag,
    type: "button"
  }, "\u6DFB\u52A0"))));
};

KunTagInput.props = {
  max: {
    type: Number,
    value: 5
  }
};
var kunTagInput = getComponentOrDefine("kun-tag-input", KunTagInput);

export default kunTagInput;
//# sourceMappingURL=kun-tag-input.js.map
