
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CAdminTable":[{"name":"tableInfo","type":"PropType<TableInfo<any>>","required":true,"desc":""},{"name":"p_Title","type":"PropType<string>","required":false,"desc":""},{"name":"p_TitleAlign","type":"PropType<string>","required":false,"desc":""},{"name":"p_Addable","type":"PropType<boolean>","required":false,"desc":""},{"name":"p_SearchPosition","type":"PropType<'top-right' | 'top-left' | 'hide'>","required":false,"desc":""},{"name":"p_EditType","type":"PropType<'icon' | 'row-click'>","required":false,"desc":""},{"name":"p_TableType","type":"PropType<'normal' | 'mini'>","required":false,"desc":""},{"name":"p_ShowSelection","type":"boolean","required":false,"desc":""},{"name":"P_SortState","type":"PropType<SortState>","required":false,"desc":""},{"name":"p_ExtensibleLang","type":"PropType<Record<string, string>>","required":false,"desc":""},{"name":"p_OpenModalOnRowClickMode","type":"boolean","required":false,"desc":""},{"name":"p_PagerPosition","type":"PropType<'bottom-left' | 'bottom-center' | 'bottom-right'>","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-click-icon-to-edit","basic-click-row-to-edit","check-table","data-added-from-another-collection","data-from-multiple-collections","extra-buttons","filter-content","no-results","pager-position-select","parse-value","search-input-position","selection-checkboxes","show-component-in-table","show-component-with-custom-props","sort-state","title-value-edit","type-mini","type-custom","change-editable-on-c-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: "Basic — click icon to edit",
                slug: "basic-click-icon-to-edit",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20:p_Addable=%22true%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-basic-click-icon-to-edit.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Basic — click icon to edit.vue") 
                  : undefined 
              },{
                title: "Basic — click row to edit",
                slug: "basic-click-row-to-edit",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_EditType=%22row-click%22%0A%20%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-basic-click-row-to-edit.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Basic — click row to edit.vue") 
                  : undefined 
              },{
                title: "CheckTable",
                slug: "check-table",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20%7B%20dbUsers,%20User%20%7D%20from%20'./helpers/dbUsers'%0Aimport%20DbFormCheck%20from%20'./helpers/DbFormCheck.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E5%90%8D%E5%89%8D'%20%7D,%0A%20%20%7B%20id:%20'companyId',%20label:%20'%E4%BC%9A%E7%A4%BEID'%20%7D,%0A%20%20%7B%20id:%20'companyName',%20label:%20'%E4%BC%9A%E7%A4%BE%E5%90%8D'%20%7D,%0A%5D%0A%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0Aconst%20tableInfo:%20TableInfo%3CUser%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbUsers,%0A%20%20componentForm:%20markRaw(DbFormCheck),%0A%20%20mapRow:%20(row)%20=%3E%20%7B%0A%20%20%20%20const%20company%20=%20dbCompanies.doc(row.companyId).data%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20...row,%0A%20%20%20%20%20%20companyName:%20company?.name%20%7C%7C%20'%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E3%81%8A%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F',%0A%20%20%20%20%7D%0A%20%20%7D,%0A%20%20afterFetch:%20async%20()%20=%3E%20%7B%0A%20%20%20%20dbCompanies.fetch()%0A%20%20%20%20return%200%0A%20%20%7D,%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%20scoped%3E%3C/style%3E"),
                iframeUrl: "/__iframe/CAdminTable-check-table.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/CheckTable.vue") 
                  : undefined 
              },{
                title: "Data added from another Collection",
                slug: "data-added-from-another-collection",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20%7B%20dbUsers,%20User%20%7D%20from%20'./helpers/dbUsers'%0Aimport%20DbFormUser%20from%20'./helpers/DbFormUser.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E5%90%8D%E5%89%8D'%20%7D,%0A%20%20%7B%20id:%20'companyId',%20label:%20'%E4%BC%9A%E7%A4%BEID'%20%7D,%0A%20%20%7B%20id:%20'companyName',%20label:%20'%E4%BC%9A%E7%A4%BE%E5%90%8D'%20%7D,%0A%5D%0A%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0Aconst%20tableInfo:%20TableInfo%3CUser%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbUsers,%0A%20%20componentForm:%20markRaw(DbFormUser),%0A%20%20mapRow:%20(row)%20=%3E%20%7B%0A%20%20%20%20const%20company%20=%20dbCompanies.doc(row.companyId).data%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20...row,%0A%20%20%20%20%20%20companyName:%20company?.name%20%7C%7C%20'%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E3%81%8A%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F',%0A%20%20%20%20%7D%0A%20%20%7D,%0A%20%20afterFetch:%20async%20()%20=%3E%20%7B%0A%20%20%20%20dbCompanies.fetch()%0A%20%20%20%20return%200%0A%20%20%7D,%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%20scoped%3E%3C/style%3E"),
                iframeUrl: "/__iframe/CAdminTable-data-added-from-another-collection.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Data added from another Collection.vue") 
                  : undefined 
              },{
                title: "Data from Multiple Collections",
                slug: "data-from-multiple-collections",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20Company,%20dbCompanies%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20%7B%20dbUsers,%20User%20%7D%20from%20'./helpers/dbUsers'%0Aimport%20DbFormUserOrCompany%20from%20'./helpers/DbFormUserOrCompany.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'id',%20label:%20'ID'%20%7D,%0A%20%20%7B%20id:%20'name',%20label:%20'%E5%90%8D%E5%89%8D'%20%7D,%0A%20%20%7B%20id:%20'companyId',%20label:%20'%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E4%BC%9A%E7%A4%BEID'%20%7D,%0A%20%20%7B%20id:%20'companyName',%20label:%20'%E4%BC%9A%E7%A4%BE%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%9A%E7%A4%BE%E3%81%AETEL'%20%7D,%0A%5D%0A%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0A%0Aconst%20tableInfo:%20TableInfo%3CUser%20%7C%20Company%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20%5BdbUsers,%20dbCompanies%5D,%0A%20%20componentForm:%20markRaw(DbFormUserOrCompany),%0A%20%20//%20mapRow:%20(row)%20=%3E%20%7B%0A%20%20//%20%20%20return%20row%0A%20%20//%20%7D,%0A%20%20//%20afterFetch:%20async%20(map)%20=%3E%20%7B%0A%20%20//%20%20%20return%200%0A%20%20//%20%7D,%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%20scoped%3E%3C/style%3E"),
                iframeUrl: "/__iframe/CAdminTable-data-from-multiple-collections.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Data from Multiple Collections.vue") 
                  : undefined 
              },{
                title: "Extra Buttons",
                slug: "extra-buttons",
                docs: {"content":"<p>追加したいボタンなどは、default slot内に置けば、一番上の段に現れます。</p>\n","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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0Aimport%20%7B%20openModalConfirmation%20%7D%20from%20'../../CModalConfirmation/helpers'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%0Afunction%20openModal()%20%7B%0A%20%20openModalConfirmation(%7B%0A%20%20%20%20title:%20'hello',%0A%20%20%20%20message:%20%60it's%20me%60,%0A%20%20%7D)%0A%7D%0A%3C/script%3E%0A%0A%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20:p_Addable=%22true%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%3E%0A%20%20%20%20%3Cbutton%20style=%22margin-left:%20auto%22%20@click=%22()%20=%3E%20openModal()%22%3Eopen%20modal%3C/button%3E%0A%20%20%3C/CAdminTable%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-extra-buttons.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Extra Buttons.vue") 
                  : undefined 
              },{
                title: "Filter Content",
                slug: "filter-content",
                docs: {"content":"<p>filterOptionsにフィルタの設定を書くとフィルタが出現します。\nフィルタの仕方なども詳しく設定が可能です。</p>\n","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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0Aimport%20%7B%20openModalConfirmation%20%7D%20from%20'../../CModalConfirmation/helpers'%0Aimport%20CInput%20from%20'../../CInput/CInput.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20filterStartYear%20=%20new%20Date().getFullYear()%0Aconst%20filterStartMonth%20=%20new%20Date().getMonth()%20+%201%0A%0Aconst%20filterEndYear%20=%20new%20Date().getFullYear()%0Aconst%20filterEndMonth%20=%20new%20Date().getMonth()%20+%201%0A%0Aconst%20startDate%20=%20new%20Date(%60$%7BfilterStartYear%7D/$%7BfilterStartMonth%7D/1%60)%0Aconst%20endDate%20=%20new%20Date(filterEndYear,%20filterEndMonth,%200,%2023,%2059,%2059)%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%20%20filterOptions:%20%7B%0A%20%20%20%20name:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20component:%20CInput,%0A%20%20%20%20%20%20%20%20defaultValue:%20'',%0A%20%20%20%20%20%20%20%20type:%20'text',%0A%20%20%20%20%20%20%20%20compareFn:%20(userInput,%20cellVal)%20=%3E%20new%20Date(cellVal)%20===%20userInput,%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%20%20dateCreated:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20component:%20CInput,%0A%20%20%20%20%20%20%20%20defaultValue:%20startDate,%0A%20%20%20%20%20%20%20%20type:%20'date',%0A%20%20%20%20%20%20%20%20compareFn:%20(userInput,%20cellVal)%20=%3E%20new%20Date(cellVal)%20%3E%20userInput,%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label:%20'%EF%BD%9E',%0A%20%20%20%20%20%20%20%20component:%20CInput,%0A%20%20%20%20%20%20%20%20defaultValue:%20endDate,%0A%20%20%20%20%20%20%20%20type:%20'date',%0A%20%20%20%20%20%20%20%20compareFn:%20(userInput,%20cellVal)%20=%3E%20new%20Date(cellVal)%20%3C%20userInput,%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%7D,%0A%7D%0A%3C/script%3E%0A%0A%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20:p_Addable=%22true%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%3E%0A%20%20%3C/CAdminTable%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-filter-content.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Filter Content.vue") 
                  : undefined 
              },{
                title: "No Results",
                slug: "no-results",
                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%20markRaw%20%7D%20from%20'vue'%0Aimport%20CInput%20from%20'../../CInput/CInput.vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompaniesEmty,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D',%20component:%20markRaw(CInput)%20%7D,%0A%20%20%7B%20id:%20'address',%20label:%20'%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C',%20component:%20markRaw(CInput)%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7',%20component:%20markRaw(CInput)%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D',%20component:%20markRaw(CInput)%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0',%20component:%20markRaw(CInput)%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81',%20component:%20markRaw(CInput)%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompaniesEmty,%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-no-results.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/No Results.vue") 
                  : undefined 
              },{
                title: "PagerPositionSelect",
                slug: "pager-position-select",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3C!--%20p_PagerPosition:%20%22bottom-left%22%7C%22bottom-center%22%7C%22bottom-right%22%20--%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_PagerPosition=%22bottom-left%22%0A%20%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-pager-position-select.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/PagerPositionSelect.vue") 
                  : undefined 
              },{
                title: "Parse Value",
                slug: "parse-value",
                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%20markRaw%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%0A%20%20%20%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7%5Cn%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C',%0A%20%20%20%20parseValue:%20(val,%20ctx)%20=%3E%20%7B%0A%20%20%20%20%20%20const%20formData:%20Company%20=%20ctx.formData%0A%20%20%20%20%20%20return%20%60$%7BformData.addressNum%7D%5Cn$%7BformData.addressPref%7D%60%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'statusContract',%0A%20%20%20%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81',%0A%20%20%20%20parseValue:%20(status)%20=%3E%20%7B%0A%20%20%20%20%20%20return%20status%20?%20'%E5%A5%91%E7%B4%84%E6%B8%88%E3%81%BF%20%E2%9C%85'%20:%20'-'%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'dateCreated',%0A%20%20%20%20label:%20'%E4%BD%9C%E6%88%90%E6%97%A5',%0A%20%20%20%20parseValue:%20(date:%20Date)%20=%3E%20%7B%0A%20%20%20%20%20%20return%20date.toLocaleDateString()%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-parse-value.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Parse Value.vue") 
                  : undefined 
              },{
                title: "Search input position",
                slug: "search-input-position",
                docs: {"content":"<p>検索入力欄を左揃えにするのに <code>p_SearchPosition=&quot;top-left&quot;</code></p>\n","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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0Aimport%20%7B%20openModalConfirmation%20%7D%20from%20'../../CModalConfirmation/helpers'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%0Afunction%20openModal()%20%7B%0A%20%20openModalConfirmation(%7B%0A%20%20%20%20title:%20'hello',%0A%20%20%20%20message:%20%60it's%20me%60,%0A%20%20%7D)%0A%7D%0A%3C/script%3E%0A%0A%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_SearchPosition=%22top-left%22%0A%20%20%3E%0A%20%20%20%20%3Cbutton%20style=%22margin-left:%20auto%22%20@click=%22()%20=%3E%20openModal()%22%3Eopen%20modal%3C/button%3E%0A%20%20%3C/CAdminTable%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-search-input-position.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Search input position.vue") 
                  : undefined 
              },{
                title: "Selection Checkboxes",
                slug: "selection-checkboxes",
                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%20markRaw,%20onMounted,%20ref%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20isSelecting%20=%20ref(false)%0Aconst%20selectedRows%20=%20ref%3CCompany%5B%5D%3E(%5B%5D)%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'1090px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%E9%81%B8%E6%8A%9E%E8%82%A2%E3%82%92%E8%A1%A8%E7%A4%BA%20%3Cinput%20v-model=%22isSelecting%22%20type=%22checkbox%22%20/%3E%0A%0A%20%20%3CCAdminTable%0A%20%20%20%20v-model:selectedRows=%22selectedRows%22%0A%20%20%20%20:p_ShowSelection=%22isSelecting%22%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_EditType=%22row-click%22%0A%20%20/%3E%0A%0A%20%20%3Cpre%3E%0A%20selectedRows:%20%7B%7B%20selectedRows%20%7D%7D%0A%20%20%3C/pre%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-selection-checkboxes.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Selection Checkboxes.vue") 
                  : undefined 
              },{
                title: "Show Component in Table",
                slug: "show-component-in-table",
                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%20markRaw%20%7D%20from%20'vue'%0Aimport%20CInput%20from%20'../../CInput/CInput.vue'%0Aimport%20MDIcon%20from%20'../../MDIcon/MDIcon.vue'%0Aimport%20CToggle%20from%20'../../CToggle/CToggle.vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema:%20any%5B%5D%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'addressNum',%0A%20%20%20%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7',%0A%20%20%20%20mode:%20'edit',%0A%20%20%20%20component:%20markRaw(CInput),%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20label:%20'icon',%0A%20%20%20%20mode:%20'edit',%0A%20%20%20%20component:%20markRaw(MDIcon),%0A%20%20%20%20name:%20'visibility',%0A%20%20%20%20events:%20%7B%0A%20%20%20%20%20%20click:%20(pointerEvent,%20ctx)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20const%20formData:%20Company%20=%20ctx.formData%0A%20%20%20%20%20%20%20%20//%20console.log(%60formData%20%E2%86%92%20%60,%20formData)%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20label:%20'toggle',%0A%20%20%20%20mode:%20'edit',%0A%20%20%20%20component:%20markRaw(CToggle),%0A%20%20%20%20events:%20%7B%0A%20%20%20%20%20%20'update:modelValue':%20(bool,%20ctx)%20=%3E%20%7B%0A%20%20%20%20%20%20%20%20//%20console.log(%60bool%20%E2%86%92%20%60,%20bool)%0A%20%20%20%20%20%20%20%20const%20formData:%20Company%20=%20ctx.formData%0A%20%20%20%20%20%20%20%20//%20console.log(%60formData%20%E2%86%92%20%60,%20formData)%0A%0A%20%20%20%20%20%20%20%20//%20%E4%BE%8B)%0A%20%20%20%20%20%20%20%20//%20dbCompanies.doc(formData.id).merge(%7B%20/*%20...%20*/%20%7D)%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-show-component-in-table.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Show Component in Table.vue") 
                  : undefined 
              },{
                title: "Show Component with custom props",
                slug: "show-component-with-custom-props",
                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%20markRaw%20%7D%20from%20'vue'%0Aimport%20WlIconText%20from%20'../../WlIconText/WlIconText.vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema:%20any%5B%5D%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'statusContract',%0A%20%20%20%20label:%20'status',%0A%20%20%20%20component:%20markRaw(WlIconText),%0A%20%20%20%20dynamicProps:%20%5B'color',%20'name',%20'p_Text'%5D,%0A%20%20%20%20mode:%20'edit',%0A%20%20%20%20name:%20(val)%20=%3E%20(val%20?%20'mail'%20:%20'visibility'),%0A%20%20%20%20color:%20(val)%20=%3E%20(val%20?%20'accent'%20:%20'primary'),%0A%20%20%20%20p_Text:%20(val,%20%7B%20formData%20%7D)%20=%3E%0A%20%20%20%20%20%20val%0A%20%20%20%20%20%20%20%20?%20'OK'%0A%20%20%20%20%20%20%20%20:%20formData.addressPref.endsWith('%E7%9C%8C')%0A%20%20%20%20%20%20%20%20?%20%60$%7BformData.addressPref%7D%E7%9F%A5%E4%BA%8B%E3%81%B8%E9%80%A3%E7%B5%A1%60%0A%20%20%20%20%20%20%20%20:%20%60$%7BformData.addressPref%7D%E3%81%AF%E7%84%A1%E8%A6%96%E3%81%A7%E3%81%84%E3%81%84%60,%0A%20%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-show-component-with-custom-props.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Show Component with custom props.vue") 
                  : undefined 
              },{
                title: "Sort State",
                slug: "sort-state",
                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%20FormContext%20%7D%20from%20'blitzar'%0Aimport%20%7B%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20SortState,%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20Payment,%20Invoice,%20dbPayments,%20dbInvoices%20%7D%20from%20'./helpers/dbPaymentsAndInvoices'%0Aimport%20%7B%20InvoiceState,%20PaymentState%20%7D%20from%20'./helpers/dbPaymentsAndInvoices'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%0A%20%20%20%20id:%20'date',%0A%20%20%20%20label:%20'date',%0A%20%20%20%20parseValue:%20(_date:%20undefined,%20context:%20FormContext)%20=%3E%20%7B%0A%20%20%20%20%20%20const%20%7B%20paymentDate,%20invoiceDate%20%7D%20=%20context.formData%0A%20%20%20%20%20%20return%20paymentDate%20%7C%7C%20invoiceDate%0A%20%20%20%20%7D,%0A%20%20%20%20sortable:%20false,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'state',%0A%20%20%20%20label:%20'state',%0A%20%20%20%20parseValue:%20(state:%20PaymentState%20%7C%20InvoiceState)%20=%3E%20%7B%0A%20%20%20%20%20%20if%20(state%20===%20'default'%20%7C%7C%20state%20===%20'request')%20return%20'%E5%85%A5%E9%87%91'%0A%20%20%20%20%20%20return%20'%E8%AB%8B%E6%B1%82'%0A%20%20%20%20%7D,%0A%20%20%20%20sortable:%20false,%0A%20%20%7D,%0A%20%20%7B%20id:%20'id',%20label:%20'id',%20sortable:%20false%20%7D,%0A%20%20%7B%20id:%20'companyId',%20label:%20'companyId',%20sortable:%20false%20%7D,%0A%20%20%7B%20id:%20'name',%20label:%20'name',%20sortable:%20false%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CPayment%20%7C%20Invoice%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20%5BdbInvoices,%20dbPayments%5D,%0A%7D%0A%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'860px'%0A%7D)%0A%0Aconst%20sortState:%20SortState%20=%20%5B%0A%20%20%7B%0A%20%20%20%20id:%20'_date',%0A%20%20%20%20direction:%20'desc',%0A%20%20%20%20parseValue:%20(_date:%20undefined,%20context)%20=%3E%20%7B%0A%20%20%20%20%20%20const%20%7B%20paymentDate,%20invoiceDate%20%7D%20=%20context.formData%0A%20%20%20%20%20%20return%20paymentDate%20%7C%7C%20invoiceDate%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'state',%0A%20%20%20%20direction:%20'asc',%0A%20%20%20%20parseValue:%20(state:%20PaymentState%20%7C%20InvoiceState)%20=%3E%20%7B%0A%20%20%20%20%20%20if%20(state%20===%20'default'%20%7C%7C%20state%20===%20'request')%20return%201%0A%20%20%20%20%20%20return%202%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20id:%20'id',%0A%20%20%20%20direction:%20'desc',%0A%20%20%20%20parseValue:%20(id:%20string)%20=%3E%20%7B%0A%20%20%20%20%20%20return%20id.split('-').slice(1).join('-')%0A%20%20%20%20%7D,%0A%20%20%7D,%0A%5D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:P_SortState=%22sortState%22%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_TableType=%22mini%22%0A%20%20%20%20p_EditType=%22row-click%22%0A%20%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-sort-state.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Sort State.vue") 
                  : undefined 
              },{
                title: "TitleValueEdit",
                slug: "title-value-edit",
                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%20markRaw%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0Aimport%20%7B%20variableTitle%20%7D%20from%20'./helpers/variableTitle'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20:p_Addable=%22true%22%20:p_Title=%22variableTitle%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-title-value-edit.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/TitleValueEdit.vue") 
                  : undefined 
              },{
                title: "Type Mini",
                slug: "type-mini",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7',%20sortable:%20false%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'860px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_TableType=%22mini%22%0A%20%20%20%20p_EditType=%22row-click%22%0A%20%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-type-mini.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/Type Mini.vue") 
                  : undefined 
              },{
                title: "TypeCustom",
                slug: "type-custom",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormContractor%20from%20'./helpers/DbFormContractor.vue'%0Aimport%20%7B%20CustomStylePropType%20%7D%20from%20'../customStyle.types'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7',%20sortable:%20false%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormContractor),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'860px'%0A%7D)%0Aconst%20customData:%20CustomStylePropType%20=%20%7B%0A%20%20table:%20%7B%20height:%20'300px',%20overflowY:%20'auto'%20%7D,%0A%20%20td:%20%7B%20padding:%20'0'%20%7D,%0A%20%20th:%20%7B%20padding:%20'0',%20fontWeight:%20'normal'%20%7D,%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%0A%20%20%20%20:tableInfo=%22tableInfo%22%0A%20%20%20%20:p_Addable=%22true%22%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%0A%20%20%20%20p_TableType=%22custom%22%0A%20%20%20%20p_EditType=%22row-click%22%0A%20%20%20%20:p_CustomStyle=%22customData%22%0A%20%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-type-custom.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/TypeCustom.vue") 
                  : undefined 
              },{
                title: "changeEditableOnCForm",
                slug: "change-editable-on-c-form",
                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%20markRaw,%20onMounted%20%7D%20from%20'vue'%0Aimport%20CAdminTable%20from%20'../CAdminTable.vue'%0Aimport%20%7B%20TableInfo%20%7D%20from%20'../tableInfo'%0Aimport%20%7B%20dbCompanies,%20Company%20%7D%20from%20'./helpers/dbCompanies'%0Aimport%20DbFormChangeEditableVue%20from%20'./helpers/DbFormChangeEditable.vue'%0A%0Aconst%20schema%20=%20%5B%0A%20%20%7B%20id:%20'name',%20label:%20'%E4%BC%81%E6%A5%AD%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'addressNum',%20label:%20'%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7'%20%7D,%0A%20%20%7B%20id:%20'tel',%20label:%20'%E4%BC%81%E6%A5%AD%E9%9B%BB%E8%A9%B1%E7%95%AA%E5%8F%B7',%20sortable:%20false%20%7D,%0A%20%20%7B%20id:%20'personInCharge',%20label:%20'%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D'%20%7D,%0A%20%20%7B%20id:%20'licenseCount',%20label:%20'%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E6%95%B0'%20%7D,%0A%20%20%7B%20id:%20'statusContract',%20label:%20'%E5%A5%91%E7%B4%84%E7%8A%B6%E6%B3%81'%20%7D,%0A%20%20%7B%20id:%20'meta.serial',%20label:%20'%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC'%20%7D,%0A%20%20%7B%20id:%20'dateCreated',%20label:%20'%E7%99%BB%E9%8C%B2%E6%97%A5'%20%7D,%0A%5D%0A%0Aconst%20tableInfo:%20TableInfo%3CCompany%3E%20=%20%7B%0A%20%20schemaColumns:%20schema,%0A%20%20db:%20dbCompanies,%0A%20%20componentForm:%20markRaw(DbFormChangeEditableVue),%0A%7D%0AonMounted(()%20=%3E%20%7B%0A%20%20const%20target%20=%20document.querySelector('.admin-table')?.parentNode%20??%20null%0A%0A%20%20//%20@ts-ignore%0A%20%20if%20(target)%20target.style.width%20=%20'860px'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCAdminTable%20:tableInfo=%22tableInfo%22%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%BC%A2%E5%AD%97english%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CAdminTable-change-editable-on-c-form.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/examples/changeEditableOnCForm.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CAdminTable" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CAdminTable/CAdminTable.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="CAdminTable" :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>
      