w-component-vue 2.4.64 → 2.4.65

package/src/AppZoneWDrawer.vue

@@ -1,1136 +1,1168 @@
-<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>
-
-
-            <div class="bk">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <demolink
-                    :kbname="'w-drawer'"
-                    :casename="'multiple & dragDrawerWidth & drawerWidthMin & drawerWidthMax'"
-                ></demolink>
-
-                <w-drawer
-                    style="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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">
-                <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="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;">
-                <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%; height:400px; border:1px dashed #ec596b;"
-                        :barColor="'#f26'"
-                    >
-                        <template v-slot:left="props">
-                            <w-drawer
-                                :style="`width:${props.width}px; 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; height:400px; border-right:1px dashed #62f;`"></div>
-
-                </div>
-
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <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%; height:400px; border:1px dashed #ec596b;"
-                        :barColor="'#f26'"
-                    >
-                        <template v-slot:left="props">
-                            <w-drawer
-                                :style="`width:${props.width}px; 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; height:400px; border-right:1px dashed #62f;`"></div>
-
-                </div>
-
-            </div>
-
-
-            <div class="bk" style="display:block;">
-                <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%; height:400px; border:1px dashed #ec596b;"
-                        :barColor="'#f26'"
-                    >
-                        <template v-slot:left="props">
-                            <w-drawer
-                                :style="`width:${props.width}px; 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; height:400px; border-right:1px dashed #62f;`"></div>
-
-                </div>
-
-            </div>
-
-
-        </div>
-
-
-    </div>
-</template>
-
-<script>
-import demolink from './components/demolink.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,
-        WListVertical,
-        WDrawer,
-        WPanelDivideHorizontal,
-        WButtonChip,
-    },
-    props: {
-    },
-    data: function() {
-        return {
-            '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>
+<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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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%; height:400px; border:1px dashed #ec596b;"
+                        :barColor="'#f26'"
+                    >
+                        <template v-slot:left="props">
+                            <w-drawer
+                                :style="`width:${props.width}px; 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; 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%; height:400px; border:1px dashed #ec596b;"
+                        :barColor="'#f26'"
+                    >
+                        <template v-slot:left="props">
+                            <w-drawer
+                                :style="`width:${props.width}px; 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; 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%; height:400px; border:1px dashed #ec596b;"
+                        :barColor="'#f26'"
+                    >
+                        <template v-slot:left="props">
+                            <w-drawer
+                                :style="`width:${props.width}px; 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; 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>