
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CToast":[{"name":"p_message","type":"string","required":true,"desc":"toast表示するメッセージ\n@example p_message: 'テストを開始しました'"},{"name":"p_icon","type":"PropType<MDIconType>","required":false,"desc":"toastのicon\n@example 'cached'"},{"name":"p_duration","type":"number","required":false,"desc":"表示される期間をミリ秒単位で指定\n@example p_duration: '5000'"},{"name":"p_clickDelete","type":"boolean","required":false,"desc":"Toastをクリックして閉じる\n@example p_closable: true"},{"name":"p_onClose","type":"Function","required":false,"desc":"Toastが閉じられたときに実行される特定の関数を定義\n@example p_onClose: handleClose"},{"name":"p_position","type":"PropType<Position>","required":false,"desc":"Toast表示位置設定"},{"name":"p_animationType","type":"PropType<'slide' | 'fade'>","required":false,"desc":"Toastアニメーションの設定"}]}
        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","test"].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%20setup%20lang=%22ts%22%3E%0Aimport%20%7B%20ref,%20createApp,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CButton%20from%20'../../CButton/CButton.vue'%0Aimport%20%7B%20useCToastPlugin,%20Position%20%7D%20from%20'../index'%0A%0Aconst%20checkbox%20=%20ref(false)%0A%0Aconst%20showToast%20=%20(position:%20Position)%20=%3E%20%7B%0A%20%20useCToastPlugin(%0A%20%20%20%20'%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8%E8%A1%A8%E7%A4%BA%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8',%0A%20%20%20%20position,%0A%20%20%20%200,%0A%20%20%20%20CButton%0A%20%20)%0A%20%20checkbox.value%20=%20true%0A%20%20setTimeout(()%20=%3E%20%7B%0A%20%20%20%20checkbox.value%20=%20false%0A%20%20%7D,%205000)%0A%7D%0A%0Aconst%20test%20=%20()%20=%3E%20%7B%0A%20%20console.log('test')%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cdiv%0A%20%20%20%20style=%22width:%20100%25;%20height:%20100vh;%20display:%20flex;%20justify-content:%20center;%20align-items:%20center%22%0A%20%20%3E%0A%20%20%20%20?%0A%20%20%20%20%3CCButton%20@click=%22test()%22%3Eaaaaaa%3C/CButton%3E%0A%20%20%20%20%3CCButton%20@click=%22test()%22%3E%E2%86%91%3C/CButton%3E%0A%20%20%20%20%3CCButton%20@click=%22()%20=%3E%20showToast('bottom')%22%3E%E2%86%93%3C/CButton%3E%0A%20%20%20%20%3CCButton%20@click=%22()%20=%3E%20showToast('right')%22%3E%E2%86%92%3C/CButton%3E%0A%20%20%20%20%3CCButton%20@click=%22()%20=%3E%20showToast('left')%22%3E%E2%86%90%3C/CButton%3E%0A%20%20%3C/div%3E%0A%20%20%3C!--%20%3CCToast%20v-if=%22checkbox%22%20p_message=%22aaaa%22%20:p_closable=%22true%22%3E%3C/CToast%3E%20--%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A/*%20:root%20%7B%0A%20%20--q-primary:%20#5e421d;%0A%7D%20*/%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CToast-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CToast/examples/Basic.vue") 
                  : undefined 
              },{
                title: "test",
                slug: "test",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0A%0Aconst%20show%20=%20ref(true)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cbutton%20@click=%22show%20=%20!show%22%3EToggle%20Slide%20+%20Fade%3C/button%3E%0A%20%20%3CTransition%20name=%22fade%22%3E%0A%20%20%20%20%3Cp%20v-if=%22show%22%3Ehello%3C/p%3E%0A%20%20%20%20%3Cdiv%20v-if=%22show%22%3Ep_message%3C/div%3E%0A%0A%20%20%20%20%3Cdiv%20v-if=%22show%22%20class=%22test%22%20@click=%22hideToast%22%3E%0A%20%20%20%20%20%20%3Cdiv%3E%7B%7B%20'aaaa'%20%7D%7D%3C/div%3E%0A%20%20%20%20%3C/div%3E%0A%20%20%3C/Transition%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A.test%20%7B%0A%20%20padding:%2010px;%0A%20%20font-size:%2016px;%0A%20%20color:%20#333;%0A%20%20background-color:%20#f0f0f0;%0A%20%20box-shadow:%200%202px%204px%20rgba(0,%200,%200,%200.2);%0A%20%20border-radius:%204px;%0A%20%20margin:%2010px;%0A%7D%0A.fade-enter-active%20%7B%0A%20%20transition:%20opacity%201s%20ease;%0A%7D%0A.fade-enter-from%20%7B%0A%20%20opacity:%200;%0A%7D%0A.fade-leave-active%20%7B%0A%20%20transition:%20opacity%201s%20ease;%0A%7D%0A%0A.fade-leave-to%20%7B%0A%20%20opacity:%200;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CToast-test.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CToast/examples/test.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CToast" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CToast/CToast.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="CToast" :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>
      