import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './kun-loading.js';

const style = `
    .horizontal {
        display: flex;
        flex-direction: row;
    }
    
    .mt-18 {
        margin-top: 24px
    }
    .vertical {
        display:flex;
        flex-direction:column;
    }
    `;

const WebComponent1 = () => {
  const [tabs] = useProp("tabs");
  const onClickTab = useEvent("MyTab", {
    bubbles: true,
    composed: true
  });

  const clickD = name => {
    onClickTab({
      key: name
    });
  };

  return h("host", {
    shadowDom: true
  }, h("style", null, style), h("div", {
    className: "vertical"
  }, h("div", {
    className: "flex inline-flex justify-start"
  }, tabs.map(tab => h("kun-tab", {
    key: tab.key,
    selected: tab.selected,
    message: tab.name,
    onclick: () => clickD(tab.key)
  }))), h("div", {
    className: "mt-18"
  }, h("slot", null))));
};

WebComponent1.props = {
  tabs: {
    type: Array,
    value: [{
      key: "learning",
      name: "正在学习",
      selected: true
    }, {
      key: "plan",
      name: "学习计划",
      selected: false
    }]
  }
};
var kunTabs = getComponentOrDefine("kun-tabs", WebComponent1);

export default kunTabs;
//# sourceMappingURL=kun-tabs.js.map
