import { s as script$1 } from './normalText-66005fcf.mjs';
import { ref, onMounted, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode } from 'vue';

var script = {
    components: {
        TsNormalText: script$1,
    },
    props: {
        stepItems: {
            required: true,
        },
    },
    emits: ["update:selectedStep"],
    name: "TsStepFlow",
    setup(props, context) {
        const selectedStep = ref("");
        onMounted(() => {
            if (props.stepItems.length > 0) {
                selectedStep.value = props.stepItems[0].key;
            }
        });
        watch(selectedStep, () => {
            context.emit("update:selectedStep", selectedStep.value);
        });
        return {
            selectedStep,
        };
    },
};

const _hoisted_1 = { class: "w-full col-span-full flex justify-between flex-row items-center border-b-[1px] mdlg:!border-[1px] mdlg:!border-r-[1px] mdlg:!border-l-[1px] border-r-0 border-l-0 border-gray-200 mdlg:rounded-t-[4px] mdlg:rounded-b-[0px]" };
const _hoisted_2 = ["onClick"];

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = resolveComponent("ts-normal-text");

  return (openBlock(), createElementBlock("div", _hoisted_1, [
    (openBlock(true), createElementBlock(Fragment, null, renderList($props.stepItems, (step, index) => {
      return (openBlock(), createElementBlock("div", {
        key: index,
        onClick: $event => ($setup.selectedStep = step.key),
        class: normalizeClass(`py-3 flex flex-row w-full items-center cursor-pointer justify-center space-x-2 ${
        $setup.selectedStep == step.key ? 'border-b-[1px] border-primaryPurple' : ''
      }  `)
      }, [
        createVNode(_component_ts_normal_text, {
          color: `${
          $setup.selectedStep == step.key ? 'text-primaryPurple ' : 'text-paragraphTextLight'
        }`
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(index + 1), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color"]),
        createElementVNode("span", {
          class: normalizeClass(`h-[4px] w-[4px] rounded-full ${
          $setup.selectedStep == step.key ? 'bg-primaryPurple ' : 'bg-paragraphTextLight'
        } hidden md:!inline-block`)
        }, null, 2 /* CLASS */),
        createVNode(_component_ts_normal_text, {
          color: `${
          $setup.selectedStep == step.key ? 'text-primaryPurple ' : 'text-paragraphTextLight'
        }`,
          customClass: 'hidden md:!inline-block'
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(step.value), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color"])
      ], 10 /* CLASS, PROPS */, _hoisted_2))
    }), 128 /* KEYED_FRAGMENT */))
  ]))
}

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

export { script as default };
