core/packages-private/vapor-e2e-test/interop/App.vue

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import VaporComp from './components/VaporComp.vue'
import VaporCompA from '../transition/components/VaporCompA.vue'
import VdomComp from '../transition/components/VdomComp.vue'
import VaporSlot from '../transition/components/VaporSlot.vue'
import { defineVaporAsyncComponent, h } from 'vue'
import VdomFoo from './components/VdomFoo.vue'

const msg = ref('hello')
const passSlot = ref(true)

const toggleVapor = ref(true)
const interopComponent = shallowRef(VdomComp)
function toggleInteropComponent() {
  interopComponent.value =
    interopComponent.value === VaporCompA ? VdomComp : VaporCompA
}

const items = ref(['a', 'b', 'c'])
const enterClick = () => items.value.push('d', 'e')
import SimpleVaporComp from './components/SimpleVaporComp.vue'

const disabled = ref(true)
const duration = typeof process !== 'undefined' && process.env.CI ? 200 : 50

const AsyncVDomFoo = defineVaporAsyncComponent({
  loader: () => {
    return new Promise(r => {
      setTimeout(() => {
        r(VdomFoo as any)
      }, duration)
    })
  },
  loadingComponent: () => h('span', 'loading...'),
})
</script>

<template>
  <input v-model="msg" />
  <button class="toggle-vdom-slot-in-vapor" @click="passSlot = !passSlot">
    toggle #test slot
  </button>
  <VaporComp :msg="msg">
    <template #default="{ foo }">
      <div>slot prop: {{ foo }}</div>
      <div>component prop: {{ msg }}</div>
    </template>

    <template #test v-if="passSlot">A test slot</template>
  </VaporComp>

  <!-- transition interop -->
  <div>
    <div class="trans-vapor">
      <button @click="toggleVapor = !toggleVapor">
        toggle vapor component
      </button>
      <div>
        <Transition>
          <VaporCompA v-if="toggleVapor" />
        </Transition>
      </div>
    </div>
    <div class="trans-vdom-vapor-out-in">
      <button @click="toggleInteropComponent">
        switch between vdom/vapor component out-in mode
      </button>
      <div>
        <Transition name="fade" mode="out-in">
          <component :is="interopComponent"></component>
        </Transition>
      </div>
    </div>
  </div>
  <!-- transition-group interop -->
  <div>
    <div class="trans-group-vapor">
      <button @click="enterClick">insert items</button>
      <div>
        <transition-group name="test">
          <VaporSlot v-for="item in items" :key="item">
            <div>{{ item }}</div>
          </VaporSlot>
        </transition-group>
      </div>
    </div>
  </div>
  <!-- teleport -->
  <div class="teleport">
    <div class="teleport-target"></div>
    <div class="render-vapor-comp">
      <button @click="disabled = !disabled">toggle</button>
      <Teleport to=".teleport-target" defer :disabled="disabled">
        <SimpleVaporComp />
      </Teleport>
    </div>
  </div>
  <!-- teleport end-->
  <!-- async component  -->
  <div class="async-component-interop">
    <div class="with-vdom-component">
      <AsyncVDomFoo />
    </div>
  </div>
  <!-- async component end -->
</template>