<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-tree</span></div>


        <div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'default'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'iconSize(20)'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :iconSize="20"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'iconSize(20) & defItemHeight(24)'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :iconSize="20"
                    :defItemHeight="24"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'iconSize(30) & defItemHeight(36)'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :iconSize="30"
                    :defItemHeight="36"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'itemRippleColor'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :itemRippleColor="'rgba(245,124,0,0.4)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'viewHeightMax'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :viewHeightMax="300"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'no viewHeightMax'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :viewHeightMax="null"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'paddingStyle'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :paddingStyle="{v:5,h:5}"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'indent'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :indent="0.5"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'events'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :viewHeightMax="WTree.viewHeightMaxSync"
                    @mouseenter="mouseenter"
                    @mouseleave="mouseleave"
                    @click="click"
                    @change-view-items="changeViewItems"
                    @change-height-of-items="changeHeightOfItems"
                    @render="render"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'toggleItemsByFun'"
                ></demolink>

                <div>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'show(rows[0])'" :borderRadius="4" @click="toggleItemsByFun(0, true)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'hide(rows[0])'" :borderRadius="4" @click="toggleItemsByFun(0, false)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'show(rows[1])'" :borderRadius="4" @click="toggleItemsByFun(1, true)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'hide(rows[1])'" :borderRadius="4" @click="toggleItemsByFun(1, false)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'show(rows[2])'" :borderRadius="4" @click="toggleItemsByFun(2, true)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'hide(rows[2])'" :borderRadius="4" @click="toggleItemsByFun(2, false)"></w-button-chip>
                </div>

                <w-tree
                    ref="ref_toggleItemsByFun"
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :viewHeightMax="WTree.viewHeightMaxSync"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'toggleItemsAll'"
                ></demolink>

                <div>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'display all'" :borderRadius="4" @click="toggleItemsAll(true)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'hide all'" :borderRadius="4" @click="toggleItemsAll(false)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'display to level1'" :borderRadius="4" @click="toggleItemsAll(null,1)"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'display to level2'" :borderRadius="4" @click="toggleItemsAll(null,2)"></w-button-chip>
                </div>

                <w-tree
                    ref="ref_toggleItemsAll"
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :viewHeightMax="WTree.viewHeightMaxSync"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'defaultDisplayLevel'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :defaultDisplayLevel="1"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'filterKeywords & statePaddingStyle & noResultsText'"
                ></demolink>

                <div style="margin-bottom:10px;">
                    <span style="padding-right:10px;">Search :</span>
                    <input
                        style="padding:2px 15px; color:#666; border:1px solid #fca; border-radius:30px; outline:none;"
                        v-model="WTree.option.keywords"
                    />
                </div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :filterKeywords="WTree.option.keywords"
                    :noResultsText="'There are no items to show...'"
                    :statePaddingStyle="{v:10,h:10}"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'filterKeywords & funFilter'"
                ></demolink>

                <div style="margin-bottom:10px;">
                    <span style="padding-right:10px;">Search :</span>
                    <input
                        style="padding:2px 15px; color:#666; border:1px solid #fca; border-radius:30px; outline:none;"
                        v-model="WTree.option.keywords"
                    />
                </div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :filterKeywords="WTree.option.keywords"
                    :funFilter="funFilter"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'filterByFun'"
                ></demolink>

                <div>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'display all'" :borderRadius="4" @click="filterByFun('all')"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'filter by abr in text'" :borderRadius="4" @click="filterByFun('abr')"></w-button-chip>
                    <w-button-chip style="margin:0px 10px 5px 0px;" :text="'filter by id=15'" :borderRadius="4" @click="filterByFun('id=15')"></w-button-chip>
                </div>

                <w-tree
                    ref="ref_filterByFun"
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'itemTextColor & itemTextColorHover & itemBackgroundColor & itemBackgroundColorHover'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd; background:#444;"
                    :data="WTree.option.items"
                    :itemTextColor="'#ccc'"
                    :itemTextColorHover="'#eee'"
                    :itemBackgroundColor="'#444'"
                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'activable & itemActive'"
                ></demolink>

                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :activable="true"
                    :itemActive.sync="WTree.option.itemActive"
                    @click="clickActive"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'activable & itemActive & funActive'"
                ></demolink>

                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :activable="true"
                    :itemActive.sync="WTree.option.itemActive"
                    :funActive="funActive"
                    @click="clickActive"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'activable & itemActive & itemTextColor & itemTextColorHover & itemTextColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
                ></demolink>

                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd; background:#444;"
                    :data="WTree.option.items"
                    :activable="true"
                    :itemActive.sync="WTree.option.itemActive"
                    :itemTextColor="'#ccc'"
                    :itemTextColorHover="'#eee'"
                    :itemTextColorActive="'#fff'"
                    :itemBackgroundColor="'#444'"
                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
                    :itemBackgroundColorActive="'rgba(187, 119, 34, 0.8)'"
                    @click="clickActive"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'iconToggleColor & iconToggleBackgroundColor & iconToggleBackgroundColorHover'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                    :iconToggleColor="'#d39a70'"
                    :iconToggleBackgroundColor="'rgba(211,154,112,0.1)'"
                    :iconToggleBackgroundColorHover="'rgba(211,154,112,0.3)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'keyPrimary & keyText & keyChildren'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.optionKeys.items"
                    :keyPrimary="'sid'"
                    :keyText="'name'"
                    :keyChildren="'packages'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'draggable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :draggable="true"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'draggable & dgPreviewOpacity & dgPreviewBorderWidth & dgBelongBackgroundColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :draggable="true"
                    :dgPreviewOpacity="0.9"
                    :dgPreviewBorderWidth="3"
                    :dgPreviewBorderColor="'rgba(255,100,200,1)'"
                    :dgPreviewBackground="'rgba(255,100,200,0.2)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'draggable & dgInsertLineColor & dgInsertBackgroundColor & dgBelongBackgroundColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :draggable="true"
                    :dgInsertLineColor="'rgba(120,220,150,0.9)'"
                    :dgInsertBackgroundColor="'rgba(50,220,100,0.1)'"
                    :dgBelongBackgroundColor="'rgba(50,220,100,0.2)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'draggable & dgTextDisabled & dgTextDisabledColor & dgTextDisabledPaddingLeft & dgTextDisabledFontSize & dgTextDisabledBackgroundColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :draggable="true"
                    :dgTextDisabled="'禁止拖曳至自己子節點當中'"
                    :dgTextDisabledColor="'pink accent-3'"
                    :dgTextDisabledPaddingLeft="13"
                    :dgTextDisabledFontSize="'0.8rem'"
                    :dgTextDisabledBackgroundColor="'rgba(255,255,255,0.8)'"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operateBtnTooltip & operateItemTextForRename & operateItemTextForInsertBefore & perateItemTextForInsertChild & operateItemTextForInsertAfter & operateItemTextForDelete'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateBtnTooltip="'編輯'"
                    :operateItemTextForRename="'變更項目名稱'"
                    :operateItemTextForInsertBefore="'插入前項目'"
                    :operateItemTextForInsertChild="'插入子項目'"
                    :operateItemTextForInsertAfter="'插入後項目'"
                    :operateItemTextForDelete="'刪除項目'"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operatePanelWidth & operatePanelHeight & operateItemIconSize & operateItemPaddingStyle'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateItemIconSize="18"
                    :operateItemPaddingStyle="{v:5,h:5}"
                    :operatePanelWidth="130"
                    :operatePanelHeight="90"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operateItemHeight & operateItemIconSize & operateItemPaddingStyle'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateItemIconSize="18"
                    :operateItemPaddingStyle="{v:5,h:5}"
                    :operateItemHeight="29.2"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operateBtnIconSize & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateBtnIconSize="20"
                    :operateBtnBackgroundColor="'rgba(230,230,230,0.4)'"
                    :operateBtnBackgroundColorHover="'rgba(230,230,255,0.8)'"
                    :operateBtnBackgroundColorFocus="'rgba(210,210,255,0.8)'"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operateItemBackgroundColor & operateItemBackgroundColorHover & operateItemTextColor & operateItemTextColorHover & operateItemIconColor & operateItemIconColorHover'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateItemBackgroundColor="'blue-grey darken-1'"
                    :operateItemBackgroundColorHover="'blue-grey'"
                    :operateItemTextColor="'grey lighten-4'"
                    :operateItemTextColorHover="'white'"
                    :operateItemIconColor="'grey lighten-4'"
                    :operateItemIconColorHover="'white'"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & operateItemIconForRename & operateItemIconForInsertBefore & operateItemIconForInsertChild & operateItemIconForInsertAfter & operateItemIconForDelete'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :operateItemIconForRename="mdiCommentEditOutline"
                    :operateItemIconForInsertBefore="mdiChevronDoubleUp"
                    :operateItemIconForInsertChild="mdiChevronDoubleRight"
                    :operateItemIconForInsertAfter="mdiChevronDoubleDown"
                    :operateItemIconForDelete="mdiDeleteVariant"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & funOperateItem'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :funOperateItem="funOperateItem"
                    @click-operate-item="clickOperateItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameContentBackgroundColor & editorRenameFooterBackgroundColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameContentBackgroundColor="'#f2f2f2'"
                    :editorRenameFooterBackgroundColor="'#EFEBE9'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameInputTextColor & editorRenameInputTextBottomLineBorderColor & editorRenameInputTextBottomLineBorderColorHover & editorRenameInputTextBottomLineBorderColorFocus'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameInputTextColor="'#444'"
                    :editorRenameInputTextBottomLineBorderColor="'#888'"
                    :editorRenameInputTextBottomLineBorderColorHover="'#aaa'"
                    :editorRenameInputTextBottomLineBorderColorFocus="'#666'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameCancelBtnText & editorRenameCancelBtnTextColor & editorRenameCancelBtnTextColorHover'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameCancelBtnText="'取消'"
                    :editorRenameCancelBtnTextColor="'#444'"
                    :editorRenameCancelBtnTextColorHover="'#222'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameCancelBtnIcon & editorRenameCancelBtnIconSize & editorRenameCancelBtnIconColor & editorRenameCancelBtnIconColorHover & editorRenameCancelBtnIconRippleColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameCancelBtnIcon="'fas fa-times'"
                    :editorRenameCancelBtnIconSize="24"
                    :editorRenameCancelBtnIconColor="'#444'"
                    :editorRenameCancelBtnIconColorHover="'#222'"
                    :editorRenameCancelBtnIconRippleColor="'rgba(200,200,200,0.3)'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameCancelBtnBackgroundColor & editorRenameCancelBtnBackgroundColorHover'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameCancelBtnBackgroundColor="'#EFEBE9'"
                    :editorRenameCancelBtnBackgroundColorHover="'#D7CCC8'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameSaveBtnText & editorRenameSaveBtnTextColor & editorRenameSaveBtnTextColorHover'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameSaveBtnText="'儲存'"
                    :editorRenameSaveBtnTextColor="'#444'"
                    :editorRenameSaveBtnTextColorHover="'#222'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameSaveBtnIcon & editorRenameSaveBtnIconSize & editorRenameSaveBtnIconColor & editorRenameSaveBtnIconColorHover & editorRenameSaveBtnIconRippleColor'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameSaveBtnIcon="'fas fa-check'"
                    :editorRenameSaveBtnIconSize="24"
                    :editorRenameSaveBtnIconColor="'#444'"
                    :editorRenameSaveBtnIconColorHover="'#222'"
                    :editorRenameSaveBtnIconRippleColor="'rgba(200,200,200,0.3)'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & editorRenameSaveBtnBackgroundColor & editorRenameSaveBtnBackgroundColorHover'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    :editorRenameSaveBtnBackgroundColor="'#EFEBE9'"
                    :editorRenameSaveBtnBackgroundColorHover="'#D7CCC8'"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'operatable & draggable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable or draggable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :draggable="true"
                    :operatable="true"
                    @click-operate-item="clickOperateItem"
                    @update:data="changeData"
                    @change-item="changeItem"
                ></w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data="WTree.option.items"
                >
                    <template v-slot:item="props">
                        <div style="display:flex;">

                            <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                            </div>

                            <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                <w-icon
                                    style="margin-right:10px;"
                                    :icon="props.data.icon"
                                    :color="'deep-orange'"
                                    :colorHover="'deep-orange darken-1'"
                                    :size="20"
                                ></w-icon>
                            </div>

                            <div style="padding:5px 0px;">
                                <div style="display:flex; align-items:center;">
                                    <div style="margin-right:7px;">{{props.data.text}}</div>
                                    <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                </div>
                                <div style="padding-right:20px;" v-if="props.data.msg">
                                    <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                </div>
                            </div>

                        </div>
                    </template>
                </w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & operatable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    :operatable="true"
                    @click-operate-item="clickOperateItem"
                >
                    <template v-slot:item="props">
                        <div style="display:flex; align-items:center; min-height:34px;">

                            <w-popup-edit-text
                                :value="props.data.text"
                                @input="function(v){modifyText({data:WTree.option.items,value:v,props:props})}"
                            ></w-popup-edit-text>

                        </div>
                    </template>
                </w-tree>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & edit-text'"
                ></demolink>

                <w-tree
                    style="width:350px; border:1px solid #ddd;"
                    :data.sync="WTree.option.items"
                    @click-operate-item="clickOperateItem"
                >
                    <template v-slot:item="props">
                        <div style="display:flex; align-items:center; min-height:34px;">

                            <w-popup-edit-text
                                :value="props.data.text"
                                @input="function(v){modifyText({data:WTree.option.items,value:v,props:props})}"
                            ></w-popup-edit-text>

                        </div>
                    </template>
                </w-tree>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'selectable'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.option.items"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            @update:selections="changeSelections"
                        ></w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & selectable'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.option.items"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="padding:5px 0px;">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & selectable & iconSize(20) & defItemHeight(24)'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.option.items"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            :iconSize="20"
                            :defItemHeight="24"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'selectable & draggable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data.sync="WTree.option.items"
                            :draggable="true"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            @update:selections="changeSelections"
                        ></w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & selectable & draggable'"
                ></demolink>

                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data.sync="WTree.option.items"
                            :draggable="true"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="padding:5px 0px;">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'filterKeywords & noResultsText & selectable'"
                ></demolink>

                <div style="margin-bottom:10px;">
                    <span style="padding-right:10px;">Search :</span>
                    <input
                        style="padding:2px 15px; color:#666; border:1px solid #fca; border-radius:30px; outline:none;"
                        v-model="WTree.option.keywords"
                    />
                </div>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.option.items"
                            :selectable="true"
                            :selections.sync="WTree.option.selections"
                            :filterKeywords="WTree.option.keywords"
                            :noResultsText="'There are no items to show...'"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="padding:5px 0px;">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.option.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & locked & selectable'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.optionLocked.items"
                            :selectable="true"
                            :selections.sync="WTree.optionLocked.selections"
                            :locked="'locked'"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="padding:5px 0px;">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.optionLocked.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & iconUncheckedColor & iconUncheckedDisabledColor & iconCheckedColor & iconCheckedDisabledColor & iconCheckedPartiallyColor & iconCheckedPartiallyDisabledColor & locked & selectable'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="width:350px; border:1px solid #ddd;"
                            :data="WTree.optionLocked.items"
                            :selectable="true"
                            :selections.sync="WTree.optionLocked.selections"
                            :locked="'locked'"
                            :iconUncheckedColor="'grey darken-1'"
                            :iconUncheckedDisabledColor="'orange lighten-4'"
                            :iconCheckedColor="'orange darken-2'"
                            :iconCheckedDisabledColor="'orange lighten-4'"
                            :iconCheckedPartiallyColor="'orange lighten-2'"
                            :iconCheckedPartiallyDisabledColor="'orange lighten-4'"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex;">

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.avatar">
                                        <img style="border-radius:50%; width:24px; height:24px;" :src="props.data.avatar" />
                                    </div>

                                    <div style="display:flex; align-items:center; padding-right:5px;" v-if="props.data.icon">
                                        <w-icon
                                            style="margin-right:10px;"
                                            :icon="props.data.icon"
                                            :color="'deep-orange'"
                                            :colorHover="'deep-orange darken-1'"
                                            :size="20"
                                        ></w-icon>
                                    </div>

                                    <div style="padding:5px 0px;">
                                        <div style="display:flex; align-items:center;">
                                            <div style="margin-right:7px;">
                                                {{props.data.text}}
                                                <div style="display:inline-block; color:#26f; font-size:0.7rem;">[id:{{props.data.id}}]</div>
                                            </div>
                                            <div style="padding:0px 9px; font-size:0.7rem; color:#fff; border-radius:30px; background:#f26;" v-if="props.data.key">{{props.data.key}}</div>
                                        </div>
                                        <div style="padding-right:20px;" v-if="props.data.msg">
                                            <div style="font-size:0.7rem; color:#999; text-indent:1rem; padding:12px 18px; background:#fefafa;">{{props.data.msg}}</div>
                                        </div>
                                    </div>

                                </div>

                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.optionLocked.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


            <div class="bk" style="display:block;">
                <demolink
                    :kbname="'w-tree'"
                    :casename="'slot & selectable & large data (100,000 items)'"
                ></demolink>

                <div :style="'overflow-x:auto;'">

                    <div style="display:table-cell; vertical-align:top;">
                        <w-tree
                            style="border:1px solid #ddd;"
                            :data="WTree.optionLarge.items"
                            :selectable="true"
                            :selections.sync="WTree.optionLarge.selections"
                            @update:selections="changeSelections"
                        >
                            <template v-slot:item="props">
                                <div style="display:flex; align-items:center; min-height:34px;">
                                    <div style="margin-right:5px;">
                                        {{props.data.text}}
                                    </div>
                                    <div style="color:#26f; font-size:0.7rem;">
                                        [id:{{props.data.id}}]
                                    </div>
                                </div>
                            </template>
                        </w-tree>
                    </div>

                    <div style="display:table-cell; vertical-align:top;">
                        <div :style="'padding:10px 20px; height:402px; overflow-y:auto; border:1px solid #ddd; border-left-width:0px;'">
                            <div style="margin-bottom:5px;">selections: </div>
                            <pre style="font-size:0.7rem;">{{JSON.stringify(showSelection(WTree.optionLarge.selections),null,4)}}</pre>
                        </div>
                    </div>

                </div>

            </div>


        </div>


    </div>
</template>

<script>
import { mdiCommentEditOutline, mdiChevronDoubleUp, mdiChevronDoubleRight, mdiChevronDoubleDown, mdiDeleteVariant } from '@mdi/js'
import demolink from './components/demolink.vue'
import WTree from './components/WTree.vue'
import WPopupEditText from './components/WPopupEditText.vue'
import WIcon from './components/WIcon.vue'
import WButtonChip from './components/WButtonChip.vue'


export default {
    components: {
        demolink,
        WTree,
        WPopupEditText,
        WIcon,
        WButtonChip,
    },
    props: {
    },
    data: function() {
        return {
            mdiCommentEditOutline,
            mdiChevronDoubleUp,
            mdiChevronDoubleRight,
            mdiChevronDoubleDown,
            mdiDeleteVariant,
            'WTree': {
                'viewHeightMaxSync': 400,
                'option': {
                    keywords: 'abr care att',
                    // selections: [],
                    selections: [
                        { 'id': 5 },
                        { 'id': 9 },
                        { 'id': 18 },
                        //勾選id:18會自動再加入id:19
                    ],
                    itemActive: {
                        'id': 4
                    },
                    items: [
                        {
                            id: 1,
                            text: 'Satisfied customers',
                            //  text: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi',
                            avatar: 'https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/100.svg',
                            children: [
                                {
                                    id: 2,
                                    text: 'Good food',
                                    icon: 'fas fa-utensils',
                                    children: [
                                        {
                                            id: 3,
                                            text: 'Quality ingredients',
                                            children: [
                                                {
                                                    id: 4,
                                                    text: 'Character',
                                                    key: 'Genus',
                                                    msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                                },
                                                {
                                                    id: 5,
                                                    text: 'Fabric',
                                                    key: 'Genus',
                                                    msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                                }
                                            ]
                                        },
                                        {
                                            id: 6,
                                            text: 'Good recipe',
                                            key: 'Family',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 7,
                                    text: 'Good service',
                                    icon: 'fas fa-concierge-bell',
                                    children: [
                                        {
                                            id: 8,
                                            text: 'Prompt attention',
                                            key: 'Order',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 9,
                                            text: 'Professional waiter',
                                            key: 'Order',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 10,
                                    text: 'Pleasant surroundings',
                                    icon: 'fas fa-camera-retro',
                                    children: [
                                        {
                                            id: 11,
                                            text: 'Happy atmosphere',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 12,
                                            text: 'Good table presentation',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 13,
                                            text: 'Pleasing decor',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id: 14,
                            text: 'Others customers',
                            avatar: 'https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/101.svg',
                            children: [
                                {
                                    id: 15,
                                    text: 'Conformance to requirements',
                                    key: 'Phylum',
                                },
                                {
                                    id: 16,
                                    text: 'Fitness for use',
                                    children: [
                                        {
                                            id: 17,
                                            text: 'Refers',
                                            key: 'Expanded',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 18,
                                    text: 'Need to care',
                                    children: [
                                        {
                                            id: 19,
                                            text: 'Models',
                                            key: 'Disables',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                },
                'optionKeys': {
                    items: [
                        {
                            sid: 's1',
                            name: 'Applications :',
                            packages: [
                                { sid: 's2', name: 'Calendar : app' },
                                { sid: 's3', name: 'Chrome : app' },
                                { sid: 's4', name: 'Webstorm : app' },
                            ],
                        },
                        {
                            sid: 's5',
                            name: 'Documents :',
                            packages: [
                                {
                                    sid: 's6',
                                    name: 'coolstone :',
                                    packages: [
                                        {
                                            sid: 's7',
                                            name: 'src :',
                                            packages: [
                                                { sid: 's8', name: 'index : ts' },
                                                { sid: 's9', name: 'bootstrap : ts' },
                                            ],
                                        },
                                    ],
                                },
                                {
                                    sid: 's10',
                                    name: 'material2 :',
                                    packages: [
                                        {
                                            sid: 's11',
                                            name: 'src :',
                                            packages: [
                                                { sid: 's12', name: 't-btn : ts' },
                                                { sid: 's13', name: 't-card : ts' },
                                                { sid: 's14', name: 't-window : ts' },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            sid: 's15',
                            name: 'Downloads :',
                            packages: [
                                { sid: 's16', name: 'October : pdf' },
                                { sid: 's17', name: 'November : pdf' },
                                { sid: 's18', name: 'Tutorial : html' },
                            ],
                        },
                        {
                            sid: 's19',
                            name: 'Videos :',
                            packages: [
                                {
                                    sid: 's20',
                                    name: 'Tutorials :',
                                    packages: [
                                        { sid: 's21', name: 'Basic layouts : mp4' },
                                        { sid: 's22', name: 'Advanced techniques : mp4' },
                                        { sid: 's23', name: 'All about app : dir' },
                                    ],
                                },
                                { sid: 's24', name: 'Intro : mov' },
                                { sid: 's25', name: 'Conference introduction : avi' },
                            ],
                        },
                    ],
                },
                'optionLocked': {
                    selections: [
                        { 'id': 5 },
                        { 'id': 9 },
                        { 'id': 18 },
                        //勾選id:18會自動再加入id:19
                    ],
                    items: [
                        {
                            id: 1,
                            text: 'Satisfied customers',
                            avatar: 'https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/100.svg',
                            children: [
                                {
                                    id: 2,
                                    locked: true,
                                    text: 'Good food',
                                    icon: 'fas fa-utensils',
                                    children: [
                                        {
                                            id: 3,
                                            text: 'Quality ingredients',
                                            children: [
                                                {
                                                    id: 4,
                                                    locked: true,
                                                    text: 'Character',
                                                    key: 'Genus',
                                                    msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                                },
                                                {
                                                    id: 5,
                                                    text: 'Fabric',
                                                    key: 'Genus',
                                                    msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                                }
                                            ]
                                        },
                                        {
                                            id: 6,
                                            text: 'Good recipe',
                                            key: 'Family',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 7,
                                    text: 'Good service',
                                    icon: 'fas fa-concierge-bell',
                                    children: [
                                        {
                                            id: 8,
                                            text: 'Prompt attention',
                                            key: 'Order',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 9,
                                            text: 'Professional waiter',
                                            key: 'Order',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 10,
                                    text: 'Pleasant surroundings',
                                    icon: 'fas fa-camera-retro',
                                    children: [
                                        {
                                            id: 11,
                                            text: 'Happy atmosphere',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 12,
                                            text: 'Good table presentation',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        },
                                        {
                                            id: 13,
                                            text: 'Pleasing decor',
                                            key: 'Class',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id: 14,
                            text: 'Others customers',
                            avatar: 'https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/101.svg',
                            children: [
                                {
                                    id: 15,
                                    text: 'Conformance to requirements',
                                    key: 'Phylum',
                                },
                                {
                                    id: 16,
                                    text: 'Fitness for use',
                                    children: [
                                        {
                                            id: 17,
                                            text: 'Refers',
                                            key: 'Expanded',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                },
                                {
                                    id: 18,
                                    text: 'Need to care',
                                    children: [
                                        {
                                            id: 19,
                                            text: 'Models',
                                            key: 'Disables',
                                            msg: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.',
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                },
                'optionLarge': {
                    selections: [],
                    items: (function (n) {
                        n /= 20; let msg = 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.'; let cItems = '{"id":"{n+1}","text":"Satisfied customers","avatar":"https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/100.svg","children":[{"id":"{n+2}","text":"Good food","icon":"fas fa-utensils","children":[{"id":"{n+3}","text":"Quality ingredients","children":[{"id":"{n+4}","text":"Character","key":"Genus","msg":"{msg}"},{"id":"{n+5}","text":"Fabric","key":"Genus","msg":"{msg}"}]},{"id":"{n+6}","text":"Good recipe","key":"Family","msg":"{msg}"}]},{"id":"{n+7}","text":"Good service","icon":"fas fa-concierge-bell","children":[{"id":"{n+8}","text":"Prompt attention","key":"Order","msg":"{msg}"},{"id":"{n+9}","text":"Professional waiter","key":"Order","children":[{"id":"{n+10}","text":"Others customers","avatar":"https://cdn.jsdelivr.net/npm/w-demores/res/img/avatar/101.svg","children":[{"id":"{n+11}","text":"Conformance to requirements","key":"Phylum"},{"id":"{n+12}","text":"Fitness for use","children":[{"id":"{n+13}","text":"Refers","key":"Expanded","msg":"{msg}"}]},{"id":"{n+14}","text":"Need to care","children":[{"id":"{n+15}","text":"Models","key":"Disables","msg":"{msg}"}]}]}]}]},{"id":"{n+16}","text":"Pleasant surroundings","icon":"fas fa-camera-retro","children":[{"id":"{n+17}","text":"Happy atmosphere","key":"Class","msg":"{msg}"},{"id":"{n+18}","text":"Good table presentation","key":"Class","msg":"{msg}"},{"id":"{n+19}","text":"Pleasing decor","key":"Class","msg":"{msg}"},{"id":"{n+20}","text":"Special experience","key":"Class","msg":"{msg}"}]}]}'; function getOneObj(j) {
                            let t = cItems; t = t.replace(new RegExp('{msg}', 'g'), msg); for (let i = 1; i <= 20; i++) {
                                t = t.replace('{n+'.concat(i, '}'), ''.concat(j + i))
                            } return JSON.parse(t)
                        } let rs = []; for (let j = 0; j < n; j++) {
                            let r = getOneObj(j * 20); rs.push(r)
                        } return rs
                    })(100000), //1000000, 100000, 1000
                },
            },
            'actions': [
            ],
        }
    },
    mounted: function() {
        let vo = this

        // setTimeout(() => {

        //     vo.WTree.option.selections = [
        //         { 'id': 5 },
        //         { 'id': 9 },
        //         { 'id': 18 },
        //     ]
        //     console.log('vo.WTree.option.items', vo.WTree.option.items)
        //     console.log('vo.WTree.option.selections', vo.WTree.option.selections)

        // }, 2000)

    },
    methods: {
        showSelection: function(selections) {
            let ss = {}
            for (let i = 0; i < selections.length; i++) {
                let s = JSON.parse(JSON.stringify(selections[i]))
                delete s.msg
                let id = parseInt(s.id, 10) //原本為字串, 轉成整數
                ss[id] = s
            }
            let t = []
            Object.keys(ss)
                .sort(function(a, b) {
                    return a - b
                })
                .forEach(function(key) {
                    t.push(ss[key])
                })
            return t
        },
        mouseenter: function(msg) {
            console.log('mouseenter', msg)
            msg.ele.style.transition = 'all 0.3s'
            msg.ele.style.background = '#f0f0f0'
            //msg.ele.style.color = '#fff'
        },
        mouseleave: function(msg) {
            console.log('mouseleave', msg)
            msg.ele.style.background = 'rgba(255, 255, 255, 0)'
            //msg.ele.style.color = 'black'
        },
        click: function(msg) {
            console.log('click', msg)
        },
        render: function(msg) {
            console.log('render', msg)
        },
        clickActive: function(msg) {
            console.log('clickActive', msg)
        },
        funActive: function(msg) {
            console.log('funActive', msg)
            return !Array.isArray(msg.item.children) //children非陣列代表沒有所屬節點
        },
        changeData: function(msg) {
            console.log('changeData', msg)
        },
        changeSelections: function(msg) {
            console.log('changeSelections', msg)
        },
        changeViewItems: function(msg) {
            console.log('changeViewItems', msg)
        },
        changeHeightOfItems: function(msg) {
            console.log('changeHeightOfItems', msg)
        },
        changeItem: function(msg) {
            console.log('changeItem', msg)
        },
        funOperateItem: function(msg) {
            console.log('funOperateItem', msg)
            return !Array.isArray(msg.item.children) //children非陣列代表沒有所屬節點
        },
        clickOperateItem: function(msg) {
            console.log('clickOperateItem', msg)

            //fun, 僅處理並回傳新項目, 不處理其他項目
            let fun = function() {
                return new Promise(function(resolve, reject) {
                    let id = Math.floor(Math.random() * 1000)
                    let text = 'node-' + id //msg.rowItem.row.item.text + '-' + msg.opItem.key
                    let dataNew = {
                        id,
                        text,
                    }
                    resolve(dataNew)
                })
            }

            //targetInd
            let targetInd = msg.rowItem.index

            //operateItem
            msg.operateItem(targetInd, msg.opItem.key, fun)

        },
        modifyText: function(msg) {
            console.log('modifyText', msg)

            //setDataByPathAndValue
            let setDataByPathAndValue = msg.props.setDataByPathAndValue

            //path add keyText
            let path = msg.props.data.nk
            path.push(msg.props.keyText)

            //value
            let value = msg.value

            //data
            let data = msg.data

            //setDataByPathAndValue
            setDataByPathAndValue(data, path, value)

        },
        funFilter: function(item, kws) {
            console.log('funFilter', item, kws)

            let c = item.text.toLowerCase()
            let b = false
            for (let i = 0; i < kws.length; i++) {
                let kw = kws[i]
                b = b || c.indexOf(kw) >= 0
            }

            return b
        },
        toggleItemsByFun: function(ind, toUnfolding) {
            console.log('toggleItemsByFun', ind, toUnfolding)

            let vo = this

            //toggleItemsByFun
            let cb = (rows) => {
                console.log('toggleItemsByFun cb rows', rows)
                return {
                    row: rows[ind],
                    toUnfolding,
                }
            }
            vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(cb)

        },
        toggleItemsAll: function(toUnfolding, toLevel) {
            console.log('toggleItemsAll', toUnfolding, toLevel)

            let vo = this

            //toggleItemsAll
            vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding, toLevel)

        },
        filterByFun: function(mode) {
            console.log('filterByFun', mode)

            let vo = this

            //filterByFun
            let cb = async(item) => {
                console.log('filterByFun cb item', item)
                if (mode === 'all') {
                    return true
                }
                else if (mode.indexOf('id=') >= 0) {
                    let id = mode.replace('id=', '')
                    id = parseInt(id)
                    return item.id === id
                }
                else {
                    return item.text.indexOf(mode) >= 0
                }
            }
            vo.$refs.ref_filterByFun.filterByFun(cb)

        },
    },
}
</script>

<style scoped>
</style>
