
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"NewDropdown":[{"name":"p_Options","type":"PropType<{\n  value: any;\n  label: string;\n}[]>","required":false,"desc":"選択肢\nhideFlagがtrueの時optionで選択できない\n@example p_Options: [\n   *{label: \"test\", value: 'test1', hideFlag: false},\n   *{label: \"test\", value: 'test2', hideFlag: false},\n   *{label: \"test\", value: 'test3', hideFlag: false},\n   *]"},{"name":"modelValue","type":"PropType<string | number | null | undefined>","required":false,"desc":"v-modelの値\n@example modelValue: ''"},{"name":"p_Title","type":"string","required":false,"desc":"タイトル\n@example p_Title: 'メールアドレス'"},{"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_ParentElement","type":"string","required":false,"desc":"外側の要素名\n@example p_ParentElement: #id"},{"name":"p_SmallMode","type":"boolean","required":false,"desc":"スモールモード\n@example p_SmallMode: 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","disabled","error","small-mode"].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%20NewDropdown%20from%20'../NewDropdown.vue'%0Aimport%20%7B%20ref,%20watch,%20computed%20%7D%20from%20'vue'%0Aimport%20CInput%20from%20'../../CInput/CInput.vue'%0A%0Aconst%20testflg%20=%20ref(false)%0A%0Aconst%20options%20=%20computed(()%20=%3E%20%5B%0A%20%20%7B%20label:%20'test%200',%20value:%20'value0'%20%7D,%0A%20%20%7B%0A%20%20%20%20label:%0A%20%20%20%20%20%20'test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2',%0A%20%20%20%20value:%20'value-long',%0A%20%20%7D,%0A%20%20%7B%20label:%20'test%201',%20value:%20'value1'%20%7D,%0A%20%20%7B%20label:%20'test%202',%20value:%20'value2'%20%7D,%0A%20%20%7B%20label:%20'%E3%81%84%E3%81%AA%E3%81%84%E3%82%88',%20value:%20'value3',%20hideFlag:%20testflg.value%20%7D,%0A%20%20%7B%20label:%20'test%204',%20value:%20'value4'%20%7D,%0A%20%20%7B%20label:%20'test%205',%20value:%20'value5'%20%7D,%0A%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%20%20%7B%20label:%20'test'%20+%20Math.random().toString(),%20value:%20Math.random().toString()%20%7D,%0A%5D)%0A%0Aconst%20model%20=%20ref('value0')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3Cpre%3E%20model:%7B%7B%20model%20%7D%7D%3C/pre%3E%0A%20%20%3CNewDropdown%20v-model=%22model%22%20:p_Options=%22options%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%3C/style%3E"),
                iframeUrl: "/__iframe/NewDropdown-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/NewDropdown/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%20NewDropdown%20from%20'../NewDropdown.vue'%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0A%0Aconst%20options%20=%20%5B%0A%20%20%7B%20label:%20'test1',%20value:%20'value1'%20%7D,%0A%20%20%7B%20label:%20'test2',%20value:%20'value2'%20%7D,%0A%20%20%7B%20label:%20'test3',%20value:%20'value3'%20%7D,%0A%5D%0Aconst%20value%20=%20ref('value1')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20model:%7B%7B%20value%20%7D%7D%0A%20%20%3CNewDropdown%20v-model=%22value%22%20:p_Options=%22options%22%20:disabled=%22true%22%20:p_Error=%22false%22%20/%3E%0A%3C/template%3E"),
                iframeUrl: "/__iframe/NewDropdown-disabled.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/NewDropdown/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%20NewDropdown%20from%20'../NewDropdown.vue'%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0A%0Aconst%20options%20=%20%5B%0A%20%20%7B%20label:%20'%E6%9C%AA%E5%85%A5%E9%87%91',%20value:%20'%E6%9C%AA%E5%85%A5%E9%87%91'%20%7D,%0A%20%20%7B%20label:%20'%E4%BB%A3%E7%90%86%E5%BA%97%E5%85%A5%E9%87%91%E7%A2%BA%E8%AA%8D',%20value:%20'%E4%BB%A3%E7%90%86%E5%BA%97%E5%85%A5%E9%87%91%E7%A2%BA%E8%AA%8D'%20%7D,%0A%20%20%7B%20label:%20'%E6%94%AF%E6%89%95%E6%B8%88%EF%BC%88%E4%BD%8F%E5%AE%85%E7%AE%A1%E7%90%86%E3%81%AB%E6%94%AF%E6%89%95%E3%81%84%EF%BC%89',%20value:%20'%E6%94%AF%E6%89%95%E6%B8%88%EF%BC%88%E4%BD%8F%E5%AE%85%E7%AE%A1%E7%90%86%E3%81%AB%E6%94%AF%E6%89%95%E3%81%84%EF%BC%89'%20%7D,%0A%5D%0A%0Aconst%20value%20=%20ref('value1')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20model:%7B%7B%20value%20%7D%7D%0A%20%20%3CNewDropdown%0A%20%20%20%20:p_Options=%22options%22%0A%20%20%20%20v-model=%22value%22%0A%20%20%20%20:disabled=%22false%22%0A%20%20%20%20:p_Error=%22true%22%0A%20%20%20%20class=%22test%22%0A%20%20/%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A.test%20%7B%0A%20%20width:%20190px;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/NewDropdown-error.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/NewDropdown/examples/Error.vue") 
                  : undefined 
              },{
                title: "SmallMode",
                slug: "small-mode",
                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%20NewDropdown%20from%20'../NewDropdown.vue'%0Aimport%20%7B%20ref,%20watch,%20computed%20%7D%20from%20'vue'%0Aimport%20CInput%20from%20'../../CInput/CInput.vue'%0A%0Aconst%20hideFlagVal%20=%20ref(true)%0Aconst%20model%20=%20ref('')%0A%0Aconst%20options%20=%20computed(()%20=%3E%20%5B%0A%20%20%7B%20label:%20'%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3',%20value:%20'value1'%20%7D,%0A%20%20%7B%20label:%20'%E3%83%95%E3%83%83%E7%B4%A0',%20value:%20'value2'%20%7D,%0A%20%20%7B%20label:%20'%E9%81%AE%E7%86%B1',%20value:%20'value3'%20%7D,%0A%20%20%7B%20label:%20'%E9%9D%9E%E8%A1%A8%E7%A4%BA',%20value:%20'valueDisable',%20hideFlag:%20hideFlagVal.value%20%7D,%0A%5D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20model%20:%20%7B%7B%20model%20%7D%7D%0A%20%20%3Cdiv%20class=%22test%22%3E%0A%20%20%20%20%3CNewDropdown%20v-model=%22model%22%20:p_Options=%22options%22%20:p_SmallMode=%22true%22%20/%3E%0A%20%20%3C/div%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A.test%20%7B%0A%20%20width:%2080px;%0A%20%20margin-left:%20300px;%0A%20%20margin-bottom:%2010px;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/NewDropdown-small-mode.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/NewDropdown/examples/SmallMode.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="NewDropdown" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/NewDropdown/NewDropdown.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="NewDropdown" :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>
      