
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CModalConfirmation":[{"name":"firstLabel","type":"string","required":false,"desc":""},{"name":"secondLabel","type":"string","required":false,"desc":""},{"name":"message","type":"string","required":true,"desc":""},{"name":"inputProps","type":"PropType<{ [key in string]: any }>","required":false,"desc":"objectでinput用のpropsを格納する"},{"name":"spinnerSize","type":"string","required":false,"desc":"設定するとspinnerが設置されてボタンがなくなる"},{"name":"isAlert","type":"boolean","required":false,"desc":""},{"name":"imageSrc","type":"string","required":false,"desc":""}]}
        let route = useRoute()
        let router = useRouter()
        let focusId = computed(() => route.query.focus && route.hash.slice(1))
        let shouldRender = (slug) => {
          return !route.query.focus || slug === focusId.value
        }
        let hiddenCount = computed(() => {
          return ["basic","email","spinner"].filter((slug) => !shouldRender(slug)).length
        })

        let showAll = () => {
          router.push({ query: {}, hash: route.hash })
        }

        let openInEditor = (file) => {
           fetch('/__open-in-editor?file=' + encodeURIComponent(file))
        }
        let examples = [
          {
                title: "Basic",
                slug: "basic",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20lang=%22ts%22%20setup%3E%0Aimport%20%7B%20openModalConfirmation%20%7D%20from%20'../helpers'%0A%0Aasync%20function%20openDefault()%20%7B%0A%20%20const%20result%20=%20await%20openModalConfirmation(%7B%0A%20%20%20%20title:%20'%E7%99%BB%E9%8C%B2%E5%AE%8C%E4%BA%86',%0A%20%20%20%20message:%20'%E7%99%BB%E9%8C%B2%E3%81%8C%E5%AE%8C%E4%BA%86%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F',%0A%20%20%20%20isAlert:%20true,%0A%20%20%20%20imageSrc:%20'/image/brown_logo-2.png',%0A%20%20%7D)%0A%7D%0Aasync%20function%20open()%20%7B%0A%20%20const%20result%20=%20await%20openModalConfirmation(%7B%0A%20%20%20%20title:%20'%E7%99%BA%E6%B3%A8%E7%A2%BA%E8%AA%8D',%0A%20%20%20%20message:%20'%E3%82%A2%E3%82%B5%E3%83%92%E3%83%9A%E3%83%B3%E3%81%B8%E5%B7%A5%E4%BA%8B%E4%BE%9D%E9%A0%BC%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%BE%E3%81%99%E3%81%8C%E3%82%88%E3%82%8D%E3%81%97%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F',%0A%20%20%7D)%0A%0A%20%20if%20(result.ok)%20%7B%0A%20%20%20%20console.log(%60OK%20%E6%8A%BC%E3%81%97%E3%81%9F%60)%0A%20%20%7D%0A%0A%20%20if%20(!result.ok)%20%7B%0A%20%20%20%20console.log(%60%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E6%8A%BC%E3%81%97%E3%81%9F%60)%0A%20%20%7D%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cbutton%20@click=%22()%20=%3E%20open()%22%3Eopen%3C/button%3E%0A%20%20%3Cbutton%20@click=%22()%20=%3E%20openDefault()%22%3EopenAlert%3C/button%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CModalConfirmation-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CModalConfirmation/examples/Basic.vue") 
                  : undefined 
              },{
                title: "Email",
                slug: "email",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20lang=%22ts%22%20setup%3E%0Aimport%20%7B%20openModalConfirmation%20%7D%20from%20'../helpers'%0A%0Aasync%20function%20open()%20%7B%0A%20%20const%20result%20=%20await%20openModalConfirmation(%7B%0A%20%20%20%20firstLabel:%20'%E9%80%81%E4%BF%A1%E3%81%99%E3%82%8B',%0A%20%20%20%20title:%20'%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E5%86%8D%E8%A8%AD%E5%AE%9A',%0A%20%20%20%20message:%20'%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%9F%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%B8%E3%80%81%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E5%86%8D%E8%A8%AD%E5%AE%9A%E7%94%A8%E3%81%AEURL%E3%82%92%E9%80%81%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82',%0A%20%20%20%20//%20input%E3%81%AB%E4%B8%8E%E3%81%88%E3%82%8Bprops%E3%81%AE%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%0A%20%20%20%20inputProps:%20%7B%20p_Title:%20'%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9'%20%7D,%0A%20%20%7D)%0A%0A%20%20if%20(result.ok)%20%7B%0A%20%20%20%20console.log(%60OK%20%E6%8A%BC%E3%81%97%E3%81%9F%60)%0A%0A%20%20%20%20const%20email%20=%20result.value%0A%20%20%20%20console.log(%60email%20%E2%86%92%20%60,%20email)%0A%20%20%7D%0A%0A%20%20if%20(!result.ok)%20%7B%0A%20%20%20%20console.log(%60%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E6%8A%BC%E3%81%97%E3%81%9F%60)%0A%0A%20%20%20%20const%20email%20=%20result.value%0A%20%20%20%20console.log(%60email%20%E2%86%92%20%60,%20email)%0A%20%20%7D%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cbutton%20@click=%22()%20=%3E%20open()%22%3Eopen%3C/button%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CModalConfirmation-email.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CModalConfirmation/examples/Email.vue") 
                  : undefined 
              },{
                title: "Spinner",
                slug: "spinner",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20lang=%22ts%22%20setup%3E%0Aimport%20%7B%20openModalSpinner%20%7D%20from%20'../helpers'%0A%0Afunction%20openDefault()%20%7B%0A%20%20const%20hide%20=%20openModalSpinner()%0A%0A%20%20setTimeout(()%20=%3E%20hide(),%201000)%0A%7D%0A%0Afunction%20open()%20%7B%0A%20%20const%20hide%20=%20openModalSpinner(%7B%0A%20%20%20%20title:%20'%E8%AA%AD%E8%BE%BC%E4%B8%AD!!!!!',%0A%20%20%20%20//%20message:%20'%E5%B0%91%E3%80%85%E3%81%8A%E5%BE%85%E3%81%A1%E4%B8%8B%E3%81%95%E3%81%84!!!!!!!!!!',%0A%20%20%20%20spinnerSize:%20'60',%0A%20%20%20%20imageSrc:%20'/image/brown_logo-2.png',%0A%20%20%7D)%0A%0A%20%20setTimeout(()%20=%3E%20hide(),%201000)%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cbutton%20@click=%22()%20=%3E%20openDefault()%22%3Eopen%20-%20default%3C/button%3E%0A%0A%20%20%3Cbutton%20@click=%22()%20=%3E%20open()%22%3Eopen%20-%20other%20text%3C/button%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CModalConfirmation-spinner.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CModalConfirmation/examples/Spinner.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CModalConfirmation" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CModalConfirmation/CModalConfirmation.vue')" />
          <div v-if="hiddenCount > 0" class="hidden-examples-info">
            {{ hiddenCount }} example{{ hiddenCount > 1 ? "s" : null }} hidden, <a class="viteplay-link" type="button" @click.prevent="showAll">show all</a>
          </div>
          <PropsTable componentName="CModalConfirmation" :componentProps="componentProps" />
          <template  
            v-for="example in examples" 
            :key="example.slug">
            <Example 
              v-if="shouldRender(example.slug)"
              :example="example" 
              :componentProps="componentProps" />
          </template>
        </template>

<style scoped>
.hidden-examples-info {
  margin: 20px 0;
}
</style>
      