feat: add showByDefault option to useTemplate

cypress/components/ShowByDefault.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { TemplateProvider, useTemplate } from '../../src/index'
+
+const props = defineProps<{
+  showByDefault: boolean
+}>()
+
+const text = 'Hello World!'
+useTemplate({ component: () => h('div', text) }, {
+  showByDefault: props.showByDefault,
+})
+</script>
+
+<template>
+  <TemplateProvider />
+</template>

cypress/components/index.cy.ts

@@ -2,6 +2,7 @@ import { defineAsyncComponent, h, reactive, ref } from 'vue'
 import { TemplateProvider, defineTemplate, useTemplate } from '../../src/index'
 import DialogConfirmPreview from './DialogConfirmPreview.vue'
 import HideOnUnmounted from './HideOnUnmounted.vue'
+import ShowByDefault from './ShowByDefault.vue'
 
 describe('test useTemplate()', () => {
   it('hello world - createTemplatePlugin', () => {
@@ -196,6 +197,28 @@ describe('test useTemplate()', () => {
 })
 
 describe('test useTemplate() options', () => {
+  it('showByDefault: false', () => {
+    cy.contains('Hello World!').should('not.exist')
+
+    cy.mount(ShowByDefault, {
+      props: {
+        showByDefault: false,
+      },
+    }).as('container')
+
+    cy.contains('Hello World!').should('not.exist')
+  })
+  it('showByDefault: true', () => {
+    cy.contains('Hello World!').should('not.exist')
+
+    cy.mount(ShowByDefault, {
+      props: {
+        showByDefault: true,
+      },
+    }).as('container')
+
+    cy.contains('Hello World!').should('exist')
+  })
   it('hideOnUnmounted: false', () => {
     cy.mount(HideOnUnmounted, {
       props: {

src/types.ts

@@ -26,7 +26,10 @@ export interface Provider {
 
 export type UseTemplate = <T extends Component>(
   template: Template<T>,
-  options?: { hideOnUnmounted?: boolean }
+  options?: {
+    showByDefault?: boolean
+    hideOnUnmounted?: boolean
+  }
 ) => {
   show: () => Promise<void>
   hide: () => Promise<void>

src/useTemplate.ts

@@ -28,6 +28,7 @@ export function defineTemplate<T extends Component>(template: Template<T>) {
 export const useTemplate: UseTemplate = <T extends Component>(
   template: Template<T>,
   options: Parameters<UseTemplate>[1] = {
+    showByDefault: false,
     hideOnUnmounted: true,
   },
 ): ReturnType<UseTemplate> => {
@@ -36,6 +37,9 @@ export const useTemplate: UseTemplate = <T extends Component>(
   if (_nextTick)
     checkError()
 
+  if (options?.showByDefault)
+    show()
+
   if (options?.hideOnUnmounted)
     tryOnUnmounted(hide)