Vue 💩

<script setup lang="ts" generic="T">
import { ref } from 'vue';


/*

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  icon: String,
  isOpen: {
    type: Boolean,
    default: true
  },
});
*/


export interface Props<T> {
  title: T;
  icon: string;
  isOpen: boolean;
}

export const props = defineProps<Props<T>>()

const emit = defineEmits<{
  iconClick: [list: T[]]
}>()


const isOpen = ref(props.isOpen);

</script>


<template>
  <div>
    <div
      class="flex justify-between bg-slate-800 text-white p-3"
      @click="isOpen = !isOpen"
    >
      {{ title }}
      <div
          @click.stop="emit('iconClick', [])"
      >{{icon}}</div>
    </div>

    <div class="p-3 bg-slate-200" v-if="isOpen">
      <slot />
    </div>
  </div>
</template>



// ------



<script setup lang="ts">
// src/App.vue
import Panel from './components/Panel.vue';

function doSomething() {
  window.alert('hello')
}
</script>

<template>
  <Panel title="one">
    content one
  </Panel>

  <Panel
    title="two"
    icon="😅"
    :isOpen="false"
    @iconClick="doSomething"
  >
    content two
  </Panel>
</template>