
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CCheckbox":[{"name":"p_Label","type":"string","required":false,"desc":"*radioの項目に表示するテキスト\n@example p_Label: 'text'"},{"name":"p_HoverEffect","type":"boolean","required":false,"desc":"*hover時のエフェクト表示フラグ\n@example p_HoverEffect: true"},{"name":"p_CheckboxType","type":"string","required":false,"desc":"クリックの有効無効\n@example p_Checkbox: false"},{"name":"value","type":"string","required":false,"desc":"*radioの項目に表示するテキスト\n@example p_Label: 'text'"},{"name":"disabled","type":"boolean","required":false,"desc":"クリックの有効無効\n@example disabled: false"},{"name":"modelValue","type":"boolean | array","required":false,"desc":"v-modelの値\n@example modelValue: false or ['test1', 'test2']"}]}
        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","disabled","mini"].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%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CCheckbox%20from%20'../CCheckbox.vue'%0Aconst%20checkboxArray%20=%20ref(%5B%5D)%0Aconst%20checkboxBool%20=%20ref(false)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cdiv%20style=%22margin:%2020px%200%22%3E%0A%20%20%20%20%3Cdiv%20style=%22font-weight:%20bold%22%3E%7B%7B%20'Array'%20%7D%7D%3C/div%3E%0A%20%20%20%20%3CCCheckbox%20p_Label=%22test1%22%20v-model=%22checkboxArray%22%20/%3E%0A%20%20%20%20%3CCCheckbox%20p_Label=%22test2%22%20v-model=%22checkboxArray%22%20/%3E%0A%20%20%20%20%3CCCheckbox%20p_Label=%22test3%22%20v-model=%22checkboxArray%22%20/%3E%0A%20%20%20%20model:%7B%7B%20checkboxArray%20%7D%7D%0A%20%20%3C/div%3E%0A%0A%20%20%3Cdiv%20style=%22margin:%2020px%200%22%3E%0A%20%20%20%20%3Cdiv%20style=%22font-weight:%20bold%22%3E%7B%7B%20'boolean'%20%7D%7D%3C/div%3E%0A%20%20%20%20%3CCCheckbox%20p_Label=%22%E3%83%86%E3%82%B9%E3%83%88%22%20v-model=%22checkboxBool%22%20/%3E%0A%20%20%20%20model:%7B%7B%20checkboxBool%20%7D%7D%0A%20%20%3C/div%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20#5e421d;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CCheckbox-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCheckbox/examples/Basic.vue") 
                  : undefined 
              },{
                title: "disabled",
                slug: "disabled",
                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'%0Aimport%20CCheckbox%20from%20'../CCheckbox.vue'%0A%0Aconst%20checkboxBool%20=%20ref(false)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCCheckbox%20p_Label=%22%E3%83%86%E3%82%B9%E3%83%88%22%20:disabled=%22true%22%20v-model=%22checkboxBool%22%20/%3E%0A%20%20model:%7B%7B%20checkboxBool%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CCheckbox-disabled.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCheckbox/examples/disabled.vue") 
                  : undefined 
              },{
                title: "mini",
                slug: "mini",
                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'%0Aimport%20CCheckbox%20from%20'../CCheckbox.vue'%0Aconst%20checkboxBool%20=%20ref(false)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCCheckbox%0A%20%20%20%20p_Label=%22%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%22%0A%20%20%20%20:p_HoverEffect=%22false%22%0A%20%20%20%20p_CheckboxType=%22mini%22%0A%20%20%20%20v-model=%22checkboxBool%22%0A%20%20/%3E%0A%20%20model:%7B%7B%20checkboxBool%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CCheckbox-mini.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCheckbox/examples/mini.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CCheckbox" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCheckbox/CCheckbox.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="CCheckbox" :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>
      