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

            let modules_1 = {}
            import * as  module_1_0 from "vue"
              modules_1["vue"] = module_1_0
              
import  module_1_1 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCalendar/CCalendar.vue"
              modules_1["../CCalendar.vue"] = module_1_1
              
            
        </script>
        <template>
          <div>
            <h1>CCalendar</h1>
            
            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_0" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CCalendar%20from%20'../CCalendar.vue'%0A%0Aconst%20data%20=%20ref(%7B%0A%20%20year:%20new%20Date().getFullYear(),%0A%20%20month:%20new%20Date().getMonth()%20+%201,%0A%20%20day:%20new%20Date().getDate(),%0A%20%20dayOfWeek:%20new%20Date().getDay(),%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20date:%7B%7B%20data.year%20%7D%7D/%7B%7B%20data.month%20%7D%7D/%7B%7B%20data.day%20%7D%7D(%7B%7B%20data.dayOfWeek%20%7D%7D)%0A%20%20%3CCCalendar%20v-model=%22data%22%20p_Color=%22_primary%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20/*%20--q-primary:%20#5e421d;%20*/%0A%20%20--q-primary:%20#0000a0;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="no-initial-model">No initial model</h2>
            <Playground :modules="modules_1" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CCalendar%20from%20'../CCalendar.vue'%0A%0Aconst%20data%20=%20ref(undefined)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20date:%7B%7B%20data%20%7D%7D%0A%20%20%3CCCalendar%20v-model=%22data%22%20p_Color=%22_primary%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20/*%20--q-primary:%20#5e421d;%20*/%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              
          </div>
        </template>
      