'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var headerText = require('./headerText-2eeecf55.js');
var vue = require('vue');

var script = {
    components: {
        TsHeaderText: headerText.script,
    },
    props: {
        items: {
            type: Array,
            required: true,
        },
    },
    emits: ["update:selectedTab"],
    name: "TsTabs",
    setup(props, context) {
        const selectedTab = vue.ref("");
        const selectDefaultTab = () => {
            selectedTab.value = props.items[0]?.key;
        };
        vue.onMounted(() => {
            selectDefaultTab();
        });
        vue.watch(props.options, () => {
            selectDefaultTab();
        });
        vue.watch(selectedTab, () => {
            context.emit("update:selectedTab", selectedTab.value);
        });
        return {
            selectedTab,
        };
    },
};

const _hoisted_1 = { class: "w-full flex flex-col col-span-full" };
const _hoisted_2 = {
  class: /*#__PURE__*/vue.normalizeClass(` border-b-[1px] w-full px-3  border-gray-200 flex flex-row items-center justify-between mdlg:!px-0 `)
};
const _hoisted_3 = { class: "flex flex-row items-center space-x-2 mdlg:!space-x-5" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_header_text = vue.resolveComponent("ts-header-text");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    vue.createElementVNode("div", _hoisted_2, [
      vue.createElementVNode("div", _hoisted_3, [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item, index) => {
          return (vue.openBlock(), vue.createBlock(_component_ts_header_text, {
            size: "lg",
            key: index,
            onClick: vue.withModifiers($event => ($setup.selectedTab = item.key), ["stop"]),
            "custom-class": ` mdlg:border-b-[2px] border-b-[1.5px] px-3 mdlg:px-0 cursor-pointer ${
            $setup.selectedTab == item.key ? ' border-headerText ' : 'border-transparent '
          }   py-2 lg:!pb-2 mdlg:py-3 lg:pt-6`,
            color: `${
            $setup.selectedTab == item.key ? ' text-headerText' : 'text-headerText opacity-40'
          }`
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(item.value), 1 /* TEXT */)
            ]),
            _: 2 /* DYNAMIC */
          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "custom-class", "color"]))
        }), 128 /* KEYED_FRAGMENT */))
      ]),
      vue.renderSlot(_ctx.$slots, "extra")
    ])
  ]))
}

script.render = render;
script.__file = "src/components/TsTabs/index.vue";

exports["default"] = script;
