<template>
    <div class="bkh">


        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-drawer</span></div>


        <div style="width:100%; overflow-x:auto;">
            <WListHorizontal
                :items="filterCaseCats"
                :itemActive.sync="filterCaseCatActive"
                :itemBackgroundColor="'transparent'"
                :itemBackgroundColorHover="'#eee'"
                :itemBackgroundColorActive="'#eee'"
                :keyText="'name'"
                :paddingStyle="{v:12,h:20}"
                @update:itemActive="(v)=>{ filterCaseCat = v.name }"
            >
                <template v-slot:item="props">
                    <div style="">
                        {{props.item.name}}
                    </div>
                </template>
            </WListHorizontal>
            <div style="height:1px; background:#ddd;"></div>
        </div>


        <div style="padding-top:30px;">


            <div class="bk" v-if="filterCaseCat==='basic'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'default'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow101+')'" :borderRadius="4" @click="WDrawer.bShow101=!WDrawer.bShow101"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow101"
                >

                    <template v-slot:drawer>
                        <w-list-vertical
                            style="height:100%; border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='basic'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'drawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow102+')'" :borderRadius="4" @click="WDrawer.bShow102=!WDrawer.bShow102"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow102"
                    :drawerWidth="300"
                >

                    <template v-slot:drawer>
                        <w-list-vertical
                            style="height:100%; border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='drag'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'dragDrawerWidth & drawerWidth(sync)'"
                ></demolink>

                <div style="padding-bottom:10px; display:flex; align-items:center;">

                    <div style="">
                        <w-button-chip :text="'show('+WDrawer.bShow103+')'" :borderRadius="4" @click="WDrawer.bShow103=!WDrawer.bShow103"></w-button-chip>
                    </div>

                    <div style="padding-left:10px; font-size:0.8rem;">drawerWidth: {{WDrawer.drawerWidth}}</div>

                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow103"
                    :drawerWidth.sync="WDrawer.drawerWidth"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer="props">
                        <div style="height:18px; background:#eef; font-size:0.7rem;">{{props.width}}px</div>
                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:calc( 100% - 18px ); _border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content="props">
                        <div style="height:18px; background:#eef; font-size:0.7rem;">{{props.width}}px</div>
                        <div style="height:calc( 100% - 18px ); overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='drag'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'dragDrawerWidth & drawerWidthMin & drawerWidthMax'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow104+')'" :borderRadius="4" @click="WDrawer.bShow104=!WDrawer.bShow104"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow104"
                    _drawerWidth.sync="WDrawer.drawerWidth"
                    :dragDrawerWidth="true"
                    :drawerWidthMin="150"
                    :drawerWidthMax="300"
                >

                    <template v-slot:drawer>
                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:100%; _border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='drag'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'dragDrawerWidth & drawerBarColor & drawerBarSize'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow105+')'" :borderRadius="4" @click="WDrawer.bShow105=!WDrawer.bShow105"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow105"
                    _drawerWidth.sync="WDrawer.drawerWidth"
                    :dragDrawerWidth="true"
                    :drawerBarColor="'rgba(0, 0, 0, 0.1)'"
                    :drawerBarSize="6"
                >

                    <template v-slot:drawer>
                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:100%; _border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='drag'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'dragDrawerWidth & drawerBarBorderColor & drawerBarBorderSize'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow106+')'" :borderRadius="4" @click="WDrawer.bShow106=!WDrawer.bShow106"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow106"
                    _drawerWidth.sync="WDrawer.drawerWidth"
                    :dragDrawerWidth="true"
                    :drawerBarBorderColor="'rgba(200,200,200,0.2)'"
                    :drawerBarBorderSize="5"
                >

                    <template v-slot:drawer>
                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:100%; _border-right:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='drag'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'multiple & dragDrawerWidth & drawerWidthMin & drawerWidthMax'"
                ></demolink>

                <w-drawer
                    style="box-sizing:border-box; width:600px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow107a"
                    :dragDrawerWidth="true"
                    :drawerWidthMin="50"
                    :drawerWidthMax="250"
                >

                    <template v-slot:drawer>

                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:100%; _border-right:1px solid #ddd;"
                            :items="WDrawer.listPkgs"
                            :itemActive.sync="WDrawer.listPkgActive"
                        >
                            <template v-slot:header>
                                <div style="padding:5px 10px; font-size:0.7rem; color:#999;">
                                    Outer list
                                </div>
                            </template>
                        </w-list-vertical>

                    </template>

                    <template v-slot:content>

                        <w-drawer
                            style="width:100%; height:100%;"
                            v-model="WDrawer.bShow107b"
                            :dragDrawerWidth="true"
                            :drawerWidthMin="50"
                            :drawerWidthMax="250"
                        >

                            <template v-slot:drawer>

                                <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                                <w-list-vertical
                                    style="height:100%; _border-right:1px solid #ddd;"
                                    :items="WDrawer.listItems"
                                    :itemActive.sync="WDrawer.listItemActive"
                                >
                                    <template v-slot:header>
                                        <div style="padding:5px 10px; font-size:0.7rem; color:#999;">
                                            Inner list
                                        </div>
                                    </template>
                                </w-list-vertical>

                            </template>

                            <template v-slot:content>
                                <div style="height:100%; overflow-y:auto;">

                                    <div style="padding-bottom:10px;">
                                        <w-button-chip :text="'outer show('+WDrawer.bShow107a+')'" :borderRadius="4" @click="WDrawer.bShow107a=!WDrawer.bShow107a"></w-button-chip>
                                    </div>

                                    <div style="padding-bottom:10px;">
                                        <w-button-chip :text="'inner show('+WDrawer.bShow107b+')'" :borderRadius="4" @click="WDrawer.bShow107b=!WDrawer.bShow107b"></w-button-chip>
                                    </div>

                                    <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                                    <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                                </div>
                            </template>

                        </w-drawer>

                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='mode'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'mode'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow108+')'" :borderRadius="4" @click="WDrawer.bShow108=!WDrawer.bShow108"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow108"
                    :mode="'from-right'"
                >

                    <template v-slot:drawer>
                        <w-list-vertical
                            style="height:100%; border-left:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='mode'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'mode & dragDrawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow109+')'" :borderRadius="4" @click="WDrawer.bShow109=!WDrawer.bShow109"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow109"
                    :mode="'from-right'"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer>
                        <!-- 有使用dragDrawerWidth就不用給分隔線 -->
                        <w-list-vertical
                            style="height:100%; _border-left:1px solid #ddd;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow110+')'" :borderRadius="4" @click="WDrawer.bShow110=!WDrawer.bShow110"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow110"
                    :afloat="true"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & dragDrawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow111+')'" :borderRadius="4" @click="WDrawer.bShow111=!WDrawer.bShow111"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow111"
                    :afloat="true"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer>
                        <!-- <div style="text-align:right;">
                            <w-button-circle
                                :icon="'fas fa-clipboard-check'"
                                :tooltip="'test abc def'"
                            ></w-button-circle>
                        </div> -->
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & dragDrawerWidth & drawerWidthMin & drawerWidthMax'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow112+')'" :borderRadius="4" @click="WDrawer.bShow112=!WDrawer.bShow112"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow112"
                    :afloat="true"
                    :dragDrawerWidth="true"
                    :drawerWidthMin="150"
                    :drawerWidthMax="300"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & overlayOpacity'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow113+')'" :borderRadius="4" @click="WDrawer.bShow113=!WDrawer.bShow113"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow113"
                    :afloat="true"
                    :overlayOpacity="0.1"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & mode'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow114+')'" :borderRadius="4" @click="WDrawer.bShow114=!WDrawer.bShow114"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow114"
                    :afloat="true"
                    :mode="'from-right'"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & mode & dragDrawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow115+')'" :borderRadius="4" @click="WDrawer.bShow115=!WDrawer.bShow115"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow115"
                    :afloat="true"
                    :mode="'from-right'"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer>
                        <!-- <div style="text-align:left;">
                            <w-button-circle
                                :icon="'fas fa-clipboard-check'"
                                :tooltip="'test abc def'"
                            ></w-button-circle>
                        </div> -->
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloat'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & mode & dragDrawerWidth & drawerWidthMin & drawerWidthMax'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow116+')'" :borderRadius="4" @click="WDrawer.bShow116=!WDrawer.bShow116"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow116"
                    :afloat="true"
                    :mode="'from-right'"
                    :dragDrawerWidth="true"
                    :drawerWidthMin="150"
                    :drawerWidthMax="300"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloatByFix'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & afloatByFix'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow117+')'" :borderRadius="4" @click="WDrawer.bShow117=!WDrawer.bShow117"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow117"
                    :afloat="true"
                    :afloatByFix="true"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloatByFix'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & afloatByFix & dragDrawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow118+')'" :borderRadius="4" @click="WDrawer.bShow118=!WDrawer.bShow118"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow118"
                    :afloat="true"
                    :afloatByFix="true"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloatByFix'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & afloatByFix & mode'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow119+')'" :borderRadius="4" @click="WDrawer.bShow119=!WDrawer.bShow119"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow119"
                    :afloat="true"
                    :afloatByFix="true"
                    :mode="'from-right'"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" v-if="filterCaseCat==='afloatByFix'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'afloat & afloatByFix & mode & dragDrawerWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow120+')'" :borderRadius="4" @click="WDrawer.bShow120=!WDrawer.bShow120"></w-button-chip>
                </div>

                <w-drawer
                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                    v-model="WDrawer.bShow120"
                    :afloat="true"
                    :afloatByFix="true"
                    :mode="'from-right'"
                    :dragDrawerWidth="true"
                >

                    <template v-slot:drawer>
                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                        <w-list-vertical
                            style="height:100%; background:#fff;"
                            :items="WDrawer.listItems"
                            :itemActive.sync="WDrawer.listItemActive"
                        ></w-list-vertical>
                    </template>

                    <template v-slot:content>
                        <div style="height:100%; overflow-y:auto;">
                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                        </div>
                    </template>

                </w-drawer>

            </div>


            <div class="bk" style="display:block;" v-if="filterCaseCat==='autoSwitch'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'autoSwitchToHide & switchWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow121+')'" :borderRadius="4" @click="WDrawer.bShow121=!WDrawer.bShow121"></w-button-chip>
                </div>

                <div style="position:relative;">

                    <w-panel-divide-horizontal
                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                        :barColor="'#f26'"
                    >
                        <template v-slot:left="props">
                            <w-drawer
                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                v-model="WDrawer.bShow121"
                                :autoSwitchToHide="true"
                                _switchWidth="WDrawer.drawerWidth*2"
                                :switchWidth="600"
                            >

                                <template v-slot:drawer>
                                    <w-list-vertical
                                        style="height:100%; border-right:1px solid #ddd;"
                                        :items="WDrawer.listItems"
                                        :itemActive.sync="WDrawer.listItemActive"
                                    ></w-list-vertical>
                                </template>

                                <template v-slot:content>
                                    <div style="height:100%; overflow-y:auto;">
                                        <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                                        <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                                    </div>
                                </template>

                            </w-drawer>
                        </template>
                    </w-panel-divide-horizontal>

                    <!-- 拖曳抽屜寬度越過此線測試效果 -->
                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>

                </div>

            </div>


            <div class="bk" style="display:block;" v-if="filterCaseCat==='autoSwitch'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'autoSwitchToShow & switchWidth'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip :text="'show('+WDrawer.bShow122+')'" :borderRadius="4" @click="WDrawer.bShow122=!WDrawer.bShow122"></w-button-chip>
                </div>

                <div style="position:relative;">

                    <w-panel-divide-horizontal
                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                        :barColor="'#f26'"
                    >
                        <template v-slot:left="props">
                            <w-drawer
                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                v-model="WDrawer.bShow122"
                                :autoSwitchToShow="true"
                                _switchWidth="WDrawer.drawerWidth*2"
                                :switchWidth="600"
                            >

                                <template v-slot:drawer>
                                    <w-list-vertical
                                        style="height:100%; border-right:1px solid #ddd;"
                                        :items="WDrawer.listItems"
                                        :itemActive.sync="WDrawer.listItemActive"
                                    ></w-list-vertical>
                                </template>

                                <template v-slot:content>
                                    <div style="height:100%; overflow-y:auto;">
                                        <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                                        <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                                    </div>
                                </template>

                            </w-drawer>
                        </template>
                    </w-panel-divide-horizontal>

                    <!-- 拖曳抽屜寬度越過此線測試效果 -->
                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>

                </div>

            </div>


            <div class="bk" style="display:block;" v-if="filterCaseCat==='autoSwitch'">
                <demolink
                    :kbname="'w-drawer'"
                    :casename="'autoSwitchToFloat & switchWidth & afloat'"
                ></demolink>

                <div style="padding-bottom:10px;">
                    <w-button-chip style="margin-right:15px;" :text="'show('+WDrawer.bShow123+')'" :borderRadius="4" @click="WDrawer.bShow123=!WDrawer.bShow123"></w-button-chip>
                    <w-button-chip style="margin-right:15px;" :text="'afloat('+WDrawer.bAfloat123+')'" :borderRadius="4" @click="WDrawer.bAfloat123=!WDrawer.bAfloat123"></w-button-chip>
                </div>

                <div style="position:relative;">

                    <w-panel-divide-horizontal
                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                        :barColor="'#f26'"
                    >
                        <template v-slot:left="props">
                            <w-drawer
                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                v-model="WDrawer.bShow123"
                                :autoSwitchToFloat="true"
                                _switchWidth="WDrawer.drawerWidth*2"
                                :switchWidth="600"
                                :afloat.sync="WDrawer.bAfloat123"
                            >

                                <template v-slot:drawer>
                                    <w-list-vertical
                                        style="height:100%; border-right:1px solid #ddd;"
                                        :items="WDrawer.listItems"
                                        :itemActive.sync="WDrawer.listItemActive"
                                    ></w-list-vertical>
                                </template>

                                <template v-slot:content>
                                    <div style="height:100%; overflow-y:auto;">
                                        <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
                                        <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
                                    </div>
                                </template>

                            </w-drawer>
                        </template>
                    </w-panel-divide-horizontal>

                    <!-- 拖曳抽屜寬度越過此線測試效果 -->
                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>

                </div>

            </div>


        </div>


    </div>
</template>

<script>
import demolink from './components/demolink.vue'
import WListHorizontal from './components/WListHorizontal.vue'
import WListVertical from './components/WListVertical.vue'
import WDrawer from './components/WDrawer.vue'
import WPanelDivideHorizontal from './components/WPanelDivideHorizontal.vue'
import WButtonChip from './components/WButtonChip.vue'


export default {
    components: {
        demolink,
        WListHorizontal,
        WListVertical,
        WDrawer,
        WPanelDivideHorizontal,
        WButtonChip,
    },
    props: {
    },
    data: function() {
        return {
            'filterCaseCat': 'basic', //當前選中分類, 預設第一類
            'filterCaseCatActive': { name: 'basic' }, //WListHorizontal 的 itemActive
            'filterCaseCats': [
                { name: 'basic' }, { name: 'drag' }, { name: 'mode' },
                { name: 'afloat' }, { name: 'afloatByFix' }, { name: 'autoSwitch' },
            ],
            'WDrawer': {
                'drawerWidth': 300,
                'title': 'Article Title',
                'content': 'Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application\'s compiled size. Keep in mind, when importing from lib, the necessary styles are automatically imported for you.',
                'listItems': [
                    {
                        text: 'Interpreting',
                        icon: 'fas fa-american-sign-language-interpreting',
                    },
                    {
                        text: 'Search',
                        icon: 'fas fa-search',
                    },
                    {
                        text: 'Binoculars',
                        icon: 'fas fa-binoculars',
                    },
                    {
                        text: 'Building',
                        icon: 'fa-regular fa-building',
                    },
                    {
                        text: 'Tachometer-alt',
                        icon: 'fas fa-tachometer-alt',
                    },
                    {
                        text: 'Chess-king',
                        icon: 'fas fa-chess-king',
                    },
                    {
                        text: 'Calendar',
                        icon: 'fas fa-calendar-alt',
                    },
                    {
                        text: 'chart',
                        icon: 'fas fa-chart-bar',
                    },
                    {
                        text: 'Cloud-meatball',
                        icon: 'fas fa-cloud-meatball',
                    },
                    {
                        text: 'Cubes',
                        icon: 'fas fa-cubes',
                    },
                    {
                        text: 'Dungeon',
                        icon: 'fas fa-dungeon',
                    },
                ],
                'listPkgs': [
                    {
                        text: 'Balance',
                        icon: 'fas fa-balance-scale',
                    },
                    {
                        text: 'Connection',
                        icon: 'fas fa-bezier-curve',
                    },
                    {
                        text: 'Issue',
                        icon: 'fa-solid fa-box-tissue',
                    },
                ],
                'listItemActive': {
                    text: 'Search',
                    icon: 'fas fa-search',
                },
                'listPkgActive': {
                    text: 'Balance',
                    icon: 'fas fa-balance-scale',
                },
                'bShow101': false,
                'bShow102': false,
                'bShow103': false,
                'bShow104': false,
                'bShow105': false,
                'bShow106': false,
                'bShow107a': false,
                'bShow107b': false,
                'bShow108': false,
                'bShow109': false,
                'bShow110': false,
                'bShow111': false,
                'bShow112': false,
                'bShow113': false,
                'bShow114': false,
                'bShow115': false,
                'bShow116': false,
                'bShow117': false,
                'bShow118': false,
                'bShow119': false,
                'bShow120': false,
                'bShow121': false,
                'bShow122': false,
                'bShow123': true,
                'bAfloat123': false,
            },
            'actions': [
                {

                }
            ],
        }
    },
    methods: {
    }
}
</script>

<style scoped>
</style>
