fashion-ssr-vue3/components/business/category/leftSlider.vue

<!-- @format -->

<script lang="ts" setup>
defineProps({
  topLevel: {
    type: Object,
    default: () => {},
  },
  list: {
    type: Array as any,
    default: () => [],
  },
})
const emit = defineEmits(['onSelect'])
const selectedValue = defineModel('selectedValue')
function onHandleTopLevel(topLevel: any) {
  selectedValue.value = topLevel.key
  emit('onSelect', topLevel.key)
}
function onHandleChildLevel(childLevel: any) {
  selectedValue.value = childLevel.key
  emit('onSelect', childLevel.key)
}
</script>

<template>
  <div>
    <div
      class="!fw-700 text-20px text-#333 !mb-40px cursor-pointer hover:text-#B06B3C"
      :class="selectedValue === topLevel.key ? 'text-#B06B3C' : ''"
      @click="onHandleTopLevel(topLevel)"
    >
      {{ topLevel.label }}({{ topLevel.entityQty }})
    </div>
    <div class="gap-28px flex flex-col pl-10px text-#333">
      <div
        v-for="item in list"
        :key="item.key"
        :class="selectedValue === item.key && 'text-#B06B3C'"
        class="cursor-pointer hover:text-#B06B3C"
        @click="onHandleChildLevel(item)"
      >
        {{ item.title }} ({{ item.entityQty }})
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>