
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CFormWrapper":[{"name":"modelValue","type":"PropType<Record<string, any>>","required":true,"desc":""},{"name":"validation","type":"PropType<Validation>","required":false,"desc":""},{"name":"p_DeleteAuth","type":"boolean","required":false,"desc":"削除権限"},{"name":"mode","type":"PropType<'edit' | 'add'>","required":true,"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 ["db-form"].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: "DbFormの例",
                slug: "db-form",
                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%20%7D%20from%20'vue'%0Aimport%20%7B%20isNumber%20%7D%20from%20'is-what'%0Aimport%20%7B%20defaultsCompany%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20CFormContractor%20from%20'./helpers/CFormContractor.vue'%0Aimport%20CFormWrapper%20from%20'../CFormWrapper.vue'%0A%0A//%0Aconst%20localData%20=%20ref(defaultsCompany())%0A%0A/**%0A%20*%20%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E8%A1%A8%E7%A4%BA%E7%8A%B6%E6%85%8B%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B%0A%20*%20@example%20'add'%20:%20%E4%BF%9D%E5%AD%98%E7%A2%BA%E8%AA%8D%E3%81%A8%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E8%A1%A8%E7%A4%BA%0A%20*%20@example%20'edit'%20:%20%E7%B7%A8%E9%9B%86%E9%96%8B%E5%A7%8B%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8B%E3%82%89%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%AA%E3%82%8B%0A%20*/%0Aconst%20mode:%20'add'%20%7C%20'edit'%20=%20'edit'%0A%0A//%20%E4%BF%9D%E5%AD%98%E7%A2%BA%E8%AA%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%9F%E6%99%82%0Afunction%20save()%20%7B%0A%20%20console.log(%60%E3%81%93%E3%81%A1%E3%82%8C%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%97%E3%82%88%E3%81%86%20%E2%86%92%20%60,%20localData.value)%0A%7D%0A%0A//%20%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%BF%E3%83%BC%0Aconst%20validation%20=%20%7B%0A%20%20name:%20%7B%0A%20%20%20%20error:%20(val:%20any)%20=%3E%20%7B%0A%20%20%20%20%20%20if%20(!val)%20return%20'%E4%BC%9A%E7%A4%BE%E5%90%8D%E3%82%92%E8%A8%98%E5%85%A5%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84'%0A%20%20%20%20%20%20return%20null%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20tel:%20%7B%0A%20%20%20%20error:%20(val:%20any)%20=%3E%20%7B%0A%20%20%20%20%20%20if%20(!val)%20return%20'%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%0A%20%20%20%20%20%20return%20null%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20addressNum:%20%7B%0A%20%20%20%20error:%20(val:%20any)%20=%3E%20%7B%0A%20%20%20%20%20%20if%20(!val)%20return%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7%E3%82%92%E8%A8%98%E5%85%A5%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84'%0A%20%20%20%20%20%20if%20(!isNumber(Number(val)))%20return%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7%E3%81%AF%E6%95%B0%E5%AD%97%E3%81%AE%E3%81%BF'%0A%20%20%20%20%20%20if%20(String(val).length%20%3E%207)%20return%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7%E3%81%AF%E3%81%AA%E3%81%92%E3%83%BC%E3%82%88'%0A%20%20%20%20%20%20return%20null%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%7D%0A%0Aconst%20l%20=%20console.log%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCFormWrapper%0A%20%20%20%20:mode=%22mode%22%0A%20%20%20%20v-model=%22localData%22%0A%20%20%20%20:validation=%22validation%22%0A%20%20%20%20@save=%22()%20=%3E%20save()%22%0A%20%20%20%20@cancel=%22()%20=%3E%20l('%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E3%81%97%E3%81%9F')%22%0A%20%20%20%20@close=%22()%20=%3E%20l('%E9%96%89%E3%81%98%E3%82%8B%E3%81%97%E3%81%9F')%22%0A%20%20%20%20@edit=%22()%20=%3E%20l('%E7%B7%A8%E9%9B%86%E3%81%8A%E3%81%97%E3%81%9F')%22%0A%20%20%20%20:p_DeleteAuth=%22true%22%0A%20%20%3E%0A%20%20%20%20%3Ctemplate%20#default=%22%7B%20fieldProps,%20errorsPerField%20%7D%22%3E%0A%20%20%20%20%20%20%3CCFormContractor%0A%20%20%20%20%20%20%20%20v-model=%22localData%22%0A%20%20%20%20%20%20%20%20:fieldProps=%22fieldProps%22%0A%20%20%20%20%20%20%20%20:errorsPerField=%22errorsPerField%22%0A%20%20%20%20%20%20/%3E%0A%20%20%20%20%3C/template%3E%0A%20%20%3C/CFormWrapper%3E%0A%0A%20%20%3Cpre%20style=%22padding:%201rem%22%3E%7B%7B%20localData%20%7D%7D%3C/pre%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CFormWrapper-db-form.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CFormWrapper/examples/DbFormの例.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CFormWrapper" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CFormWrapper/CFormWrapper.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="CFormWrapper" :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>
      