
        <script setup>
        import { Playground } from "@viteplay/vue"
                
        
            let modules_0 = {}
            import  module_0_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CPager/CPager.vue"
              modules_0["../CPager.vue"] = module_0_0
              
import * as  module_0_1 from "vue"
              modules_0["vue"] = module_0_1
              
import * as  module_0_2 from "vue"
              modules_0["vue"] = module_0_2
              
            

            let modules_1 = {}
            import  module_1_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CPager/CPager.vue"
              modules_1["../CPager.vue"] = module_1_0
              
import * as  module_1_1 from "vue"
              modules_1["vue"] = module_1_1
              
import * as  module_1_2 from "vue"
              modules_1["vue"] = module_1_2
              
            

            let modules_2 = {}
            import  module_2_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CPager/CPager.vue"
              modules_2["../CPager.vue"] = module_2_0
              
import * as  module_2_1 from "vue"
              modules_2["vue"] = module_2_1
              
import * as  module_2_2 from "vue"
              modules_2["vue"] = module_2_2
              
            
        </script>
        <template>
          <div>
            <h1>CPager</h1>
            
            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_0" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CPager%20from%20'../CPager.vue'%0Aimport%20%7B%20ref,%20watch%20%7D%20from%20'vue'%0Aconst%20testValue%20=%20%5B%5D%0Afor%20(let%20i%20=%201;%20i%20%3C=%2050;%20i++)%20%7B%0A%20%20testValue.push(i)%0A%7D%0Aconst%20model%20=%20ref(%7B%20startNum:%201,%20endNum:%2010%20%7D)%0Alet%20extractionArr%20=%20ref(testValue)%0Awatch(model,%20()%20=%3E%20%7B%0A%20%20extractionArr%20=%20testValue.filter((word,%20index)%20=%3E%20%7B%0A%20%20%20%20return%20index%20+%201%20%3E=%20model.value.startNum%20&&%20index%20+%201%20%3C=%20model.value.endNum%0A%20%20%7D)%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20table:%7B%7B%20extractionArr%20%7D%7D%0A%20%20%3Cbr%20/%3E%0A%20%20model:%7B%7B%20model%20%7D%7D%0A%20%20%3CCPager%20:p_RowNum=%22testValue.length%22%20v-model=%22model%22%20/%3E%0A%3C/template%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="secondary">secondary</h2>
            <Playground :modules="modules_1" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CPager%20from%20'../CPager.vue'%0Aimport%20%7B%20ref,%20watch%20%7D%20from%20'vue'%0Aconst%20testValue%20=%20%5B%5D%0Afor%20(let%20i%20=%201;%20i%20%3C=%20111;%20i++)%20%7B%0A%20%20testValue.push(i)%0A%7D%0Aconst%20model%20=%20ref(%7B%20startNum:%201,%20endNum:%2010%20%7D)%0Alet%20extractionArr%20=%20ref(testValue)%0Awatch(model,%20()%20=%3E%20%7B%0A%20%20extractionArr%20=%20testValue.filter((word,%20index)%20=%3E%20%7B%0A%20%20%20%20return%20index%20+%201%20%3E=%20model.value.startNum%20&&%20index%20+%201%20%3C=%20model.value.endNum%0A%20%20%7D)%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20table:%7B%7B%20extractionArr%20%7D%7D%0A%20%20%3Cbr%20/%3E%0A%20%20model:%7B%7B%20model%20%7D%7D%0A%20%20%3CCPager%20:p_RowNum=%22testValue.length%22%20v-model=%22model%22%20/%3E%0A%3C/template%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="thirdly">thirdly</h2>
            <Playground :modules="modules_2" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CPager%20from%20'../CPager.vue'%0Aimport%20%7B%20ref,%20watch%20%7D%20from%20'vue'%0Aconst%20testValue%20=%20%5B%5D%0Afor%20(let%20i%20=%201;%20i%20%3C=%2033;%20i++)%20%7B%0A%20%20testValue.push(i)%0A%7D%0Aconst%20model%20=%20ref(%7B%20startNum:%201,%20endNum:%2010%20%7D)%0Alet%20extractionArr%20=%20ref(testValue)%0Awatch(model,%20()%20=%3E%20%7B%0A%20%20extractionArr%20=%20testValue.filter((word,%20index)%20=%3E%20%7B%0A%20%20%20%20return%20index%20+%201%20%3E=%20model.value.startNum%20&&%20index%20+%201%20%3C=%20model.value.endNum%0A%20%20%7D)%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20table:%7B%7B%20extractionArr%20%7D%7D%0A%20%20%3Cbr%20/%3E%0A%20%20model:%7B%7B%20model%20%7D%7D%0A%20%20%3CCPager%20:p_RowNum=%22testValue.length%22%20v-model=%22model%22%20/%3E%0A%3C/template%3E%0A`)" />
            </section>
              
          </div>
        </template>
      