
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CInput":[{"name":"id","type":"string","required":false,"desc":"id\n@example id: 'inputId'"},{"name":"type","type":"string","required":false,"desc":"@see https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#input_types"},{"name":"modelValue","type":"string | number | boolean | Date","required":false,"desc":"値\n@example modelValue: ''"},{"name":"p_Title","type":"string","required":false,"desc":"タイトル\n@example p_Title: 'メールアドレス'"},{"name":"p_Maxlength","type":"number","required":false,"desc":"マックスレングス\n@example p_Maxlength: 10"},{"name":"p_Placeholder","type":"string","required":false,"desc":"プレスホルダー\n@example p_Placeholder: '名前を入力してください'"},{"name":"disabled","type":"boolean","required":false,"desc":"制御\n@example disabled: true"},{"name":"p_Error","type":"boolean","required":false,"desc":"エラー\n@example p_Error: true"},{"name":"p_Debounce","type":"number","required":false,"desc":"Adds a debounce. Awaits the number given (in ms) before the input text is emitted.\n@example p_Debounce: 500"},{"name":"p_CalendarId","type":"string","required":false,"desc":"カレンダーid\n@example p_CalendarId: 'calendarId1'"},{"name":"p_CalendarBtnId","type":"string","required":false,"desc":"カレンダーボタンid\n@example p_CalendarBtnId: 'calendarBtnId2'"},{"name":"p_Caution","type":"string","required":false,"desc":"注意文：nullの場合は非表示\n@example p_Caution: '※注意分'"},{"name":"p_SmallMode","type":"boolean","required":false,"desc":"スモールモード\n@example p_SmallMode: true"},{"name":"max","type":"number","required":false,"desc":"numberの最大値\n@example max: 1000"},{"name":"min","type":"number","required":false,"desc":"numberの最小値\n@example min: 0"},{"name":"step","type":"number","required":false,"desc":"numberの数字刻み\n@example step: 1"},{"name":"pattern","type":"number","required":false,"desc":"text時の入力制限\n@example pattern: 1"},{"name":"inputmode","type":"string","required":false,"desc":"/**\n   inputmode\n@example inputmode: numeric"},{"name":"p_AutoPosition","type":"boolean","required":false,"desc":"表示位置の調整可否のフラグ\n@example p_AutoPosition: true"}]}
        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","caution","date","debounce","disabled","error","number","password","search","small-mode","title"].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":"<p>こちらは基本の入力欄であって、常にこちらを使用ください。</p>\n","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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20p_Placeholder=%22%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Basic.vue") 
                  : undefined 
              },{
                title: "Caution",
                slug: "caution",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20p_Title=%22%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%22%20p_Caution=%22%E2%80%BB%E5%BF%85%E9%A0%88%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-caution.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Caution.vue") 
                  : undefined 
              },{
                title: "Date",
                slug: "date",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20dayOne%20=%20ref('')%0Aconst%20dayTow%20=%20ref('')%0Aconst%20dayThree%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cdiv%20class=%22_container%22%3E%0A%20%20%20%20%3CCInput%0A%20%20%20%20%20%20id=%22targetId1%22%0A%20%20%20%20%20%20v-model=%22dayOne%22%0A%20%20%20%20%20%20p_CalendarId=%22calendar1%22%0A%20%20%20%20%20%20p_CalendarBtnId=%22calendarBtn1%22%0A%20%20%20%20%20%20type=%22calendar%22%0A%20%20%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB1%22%0A%20%20%20%20%20%20p_Placeholder=%22%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%0A%20%20%20%20/%3E%0A%20%20%20%20%3CCInput%0A%20%20%20%20%20%20id=%22targetId2%22%0A%20%20%20%20%20%20v-model=%22dayTow%22%0A%20%20%20%20%20%20p_CalendarId=%22calendar2%22%0A%20%20%20%20%20%20p_CalendarBtnId=%22calendarBtn2%22%0A%20%20%20%20%20%20type=%22calendar%22%0A%20%20%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB2%22%0A%20%20%20%20/%3E%0A%20%20%20%20%3CCInput%0A%20%20%20%20%20%20id=%22targetId3%22%0A%20%20%20%20%20%20v-model=%22dayThree%22%0A%20%20%20%20%20%20p_CalendarId=%22calendar3%22%0A%20%20%20%20%20%20p_CalendarBtnId=%22calendarBtn3%22%0A%20%20%20%20%20%20type=%22calendar%22%0A%20%20%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB3%22%0A%20%20%20%20/%3E%0A%20%20%3C/div%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A._container%20%7B%0A%20%20display:%20grid;%0A%20%20grid-template-columns:%20200px%20200px%20200px;%0A%20%20gap:%200px%2010px;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CInput-date.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Date.vue") 
                  : undefined 
              },{
                title: "Debounce",
                slug: "debounce",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20:p_Debounce=%221000%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-debounce.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Debounce.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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20:disabled=%22true%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-disabled.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Disabled.vue") 
                  : undefined 
              },{
                title: "Error",
                slug: "error",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20:p_Error=%22true%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-error.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Error.vue") 
                  : undefined 
              },{
                title: "Number",
                slug: "number",
                docs: {"content":"<p>こちらは基本の入力欄であって、常にこちらを使用ください。</p>\n","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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%0A%20%20%20%20v-model=%22text%22%0A%20%20%20%20type=%22number%22%0A%20%20%20%20:max=%2210%22%0A%20%20%20%20:min=%220%22%0A%20%20%20%20p_Placeholder=%22%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%22%0A%20%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-number.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Number.vue") 
                  : undefined 
              },{
                title: "Password",
                slug: "password",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20type=%22password%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-password.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Password.vue") 
                  : undefined 
              },{
                title: "Search",
                slug: "search",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20type=%22search%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-search.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Search.vue") 
                  : undefined 
              },{
                title: "SmallMode",
                slug: "small-mode",
                docs: {"content":"<p>こちらは基本の入力欄であって、常にこちらを使用ください。</p>\n","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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20:p_SmallMode=%22true%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-small-mode.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/SmallMode.vue") 
                  : undefined 
              },{
                title: "Title",
                slug: "title",
                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%20CInput%20from%20'../CInput.vue'%0A%0Aconst%20text%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCInput%20v-model=%22text%22%20p_Title=%22%E3%82%A4%E3%83%B3%E3%83%97%E3%83%83%E3%83%88%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%22%20/%3E%0A%20%20model:%7B%7B%20text%20%7D%7D%0A%3C/template%3E"),
                iframeUrl: "/__iframe/CInput-title.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/examples/Title.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CInput" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CInput/CInput.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="CInput" :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>
      