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

            let modules_1 = {}
            import  module_1_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CButton/CButton.vue"
              modules_1["../CButton.vue"] = module_1_0
              
            

            let modules_2 = {}
            import  module_2_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CButton/CButton.vue"
              modules_2["../CButton.vue"] = module_2_0
              
            

            let modules_3 = {}
            import * as  module_3_0 from "vue"
              modules_3["vue"] = module_3_0
              
import  module_3_1 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CButtonIcon/CButtonIcon.vue"
              modules_3["../CButtonIcon.vue"] = module_3_1
              
            

            let modules_4 = {}
            import * as  module_4_0 from "vue"
              modules_4["vue"] = module_4_0
              
import  module_4_1 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CButtonIcon/CButtonIcon.vue"
              modules_4["../CButtonIcon.vue"] = module_4_1
              
            
        </script>
        <template>
          <div>
            <h1>CButton</h1>
            
            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_0" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CButton%20from%20'../CButton.vue'%0Aconst%20alertTest%20=%20()%20=%3E%20%7B%0A%20%20alert('test')%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCButton%20p_Label=%22%E4%BF%9D%E5%AD%98%E7%A2%BA%E8%AA%8D%22%20@click=%22alertTest%22%20:p_Disable=%22false%22%20p_BtnType=%22primary%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20linear-gradient(to%20right,%20#f5abdf,%20#de37a6);%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="kind-primary">Kind - Primary</h2>
            <Playground :modules="modules_1" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CButton%20from%20'../CButton.vue'%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCButton%20p_Label=%22%E3%81%93%E3%81%A1%E3%82%89%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%22%20p_BtnType=%22secondary%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%20scoped%3E%0A:root%20%7B%0A%20%20--q-secondary:%20#3c4d58;%0A%20%20--q-accent:%20#ffffff;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="disable">disable</h2>
            <Playground :modules="modules_2" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CButton%20from%20'../CButton.vue'%0Aconst%20alertTest%20=%20()%20=%3E%20%7B%0A%20%20alert('test')%0A%7D%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCButton%20p_Label=%22%E4%BF%9D%E5%AD%98%E7%A2%BA%E8%AA%8D%22%20@click=%22alertTest%22%20:p_Disable=%22true%22%20p_BtnType=%22primary%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20linear-gradient(to%20right,%20#f5abdf,%20#de37a6);%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_3" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20%7B%20onMounted%20%7D%20from%20'vue'%0Aimport%20CButtonIcon%20from%20'../CButtonIcon.vue'%0Aconst%20clickEvent%20=%20()%20=%3E%20alert('foo')%0AonMounted(()%20=%3E%20%7B%0A%20%20document.querySelector('.c_button_icon').parentNode.style.backgroundColor%20=%20'#0000a0'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCButtonIcon%20@click=%22clickEvent%22%20class=%22testClass%22%20/%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A.testClass%20%7B%0A%20%20color:%20#ffffff;%0A%20%20font-size:%2060px;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="drop-down">DropDown</h2>
            <Playground :modules="modules_4" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20%7B%20onMounted%20%7D%20from%20'vue'%0Aimport%20CButtonIcon%20from%20'../CButtonIcon.vue'%0Aconst%20clickEvent%20=%20()%20=%3E%20alert('expand_more')%0AonMounted(()%20=%3E%20%7B%0A%20%20document.querySelectorAll('.c_button_icon')%5B1%5D.parentNode.style.backgroundColor%20=%20'#aaaa0a'%0A%7D)%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCButtonIcon%20@click=%22clickEvent%22%20p_ButtonIconName=%22expand_more%22%20class=%22testClassSecond%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A.testClassSecond%20%7B%0A%20%20color:%20green;%0A%20%20font-size:%2020px;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              
          </div>
        </template>
      