w-component-vue 2.1.57

package/src/AppZoneWTextSuggest.vue

@@ -0,0 +1,1242 @@
+<template>
+    <div>
+
+
+        <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-text-suggest</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-text-suggest
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'paddingStyle (thin style)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :paddingStyle="{v:0,h:10}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'paddingStyle (equal height to using icon)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :paddingStyle="{v:4,h:15}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'textFontSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :textFontSize="'0.8rem'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'textColor & expansionIconColor'"
+                ></demolink>
+
+                <w-text-suggest
+                    :textColor="'orange darken-2'"
+                    :expansionIconColor="'orange'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'expansionIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :expansionIconSize="14"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'searchEmpty'"
+                ></demolink>
+
+                <w-text-suggest
+                    :items="WTextSuggest.objItems"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'leftIcon (material)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'leftIcon (fontawesome)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="'fas fa-clipboard-check'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'leftIcon & leftIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :leftIconSize="20"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'leftIcon & leftIconColor & leftIconColorHover & leftIconColorFocus & leftIconTooltip'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :leftIconColor="'orange lighten-1'"
+                    :leftIconColorHover="'orange accent-3'"
+                    :leftIconColorFocus="'orange darken-2'"
+                    :leftIconTooltip="'show tooltip'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'rightIcon & rightIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :rightIconSize="20"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'rightIcon & rightIconColor & rightIconColorHover & rightIconColorFocus & rightIconTooltip'"
+                ></demolink>
+
+                <w-text-suggest
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :rightIconColor="'orange lighten-1'"
+                    :rightIconColorHover="'orange accent-3'"
+                    :rightIconColorFocus="'orange darken-2'"
+                    :rightIconTooltip="'show tooltip'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'showExpansionIcon'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :showExpansionIcon="false"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'placeholder'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :placeholder="'keywords'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'borderRadius'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :borderRadius="5"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'itemPaddingStyle'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :itemPaddingStyle="{v:5,h:8}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'keyText'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItemsKeyText"
+                    :keyText="'name'"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValueKeyText"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'itemTextFontSize & defItemHeight'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :defItemHeight="48"
+                    :itemTextFontSize="'1rem'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'itemTextColor & itemTextColorHover & itemBackgroundColor & itemBackgroundColorHover'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :itemTextColor="'orange darken-3'"
+                    :itemTextColorHover="'white'"
+                    :itemBackgroundColor="'white'"
+                    :itemBackgroundColorHover="'orange darken-3'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'a lot of items'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItemsLarge"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValueLarge"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'items(string array)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.strItems"
+                    v-model="WTextSuggest.strValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'showPanel(press enter to hide panel) & focused'"
+                ></demolink>
+
+                <div style="margin-bottom:5px;">
+                    <div style="font-size:0.8rem;">focused={{WTextSuggest.focused}}, showPanel={{WTextSuggest.showPanel}}</div>
+                    <div>
+                        <v-btn style="margin-right:5px;" small @click="WTextSuggest.showPanel=true">show panel</v-btn>
+                        <v-btn style="margin-right:5px;" small @click="WTextSuggest.showPanel=false">hide panel</v-btn>
+                    </div>
+                </div>
+
+                <w-text-suggest
+                    :focused.sync="WTextSuggest.focused"
+                    :showPanel.sync="WTextSuggest.showPanel"
+                    @enter="hidePanelWhenEnter"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'slot item'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                >
+                    <template v-slot:item="props">
+                        <div style="color:#f26; font-size:0.7rem;">{{props.item.key}}</div>
+                        <div>{{props.item.text}}</div>
+                    </template>
+                </w-text-suggest>
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'fullwidth'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-select'"
+                    :casename="'with popup'"
+                ></demolink>
+
+                <w-popup
+                    :isolated="true"
+                >
+
+                    <template v-slot:trigger>
+                        <v-btn depressed small elevation="2">Show popup</v-btn>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="padding:45px 25px;">
+                            <w-text-suggest
+                                :items="WTextSuggest.objItems"
+                                v-model="WTextSuggest.objValue"
+                            ></w-text-suggest>
+                        </div>
+                    </template>
+
+                </w-popup>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'events'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                    @update:focused="evUpdateFocused"
+                    @update:showPanel="evUpdateShowPanel"
+                    @blur="evBlur"
+                    @input="evInput"
+                    @enter="evEnter"
+                    @click-item="evClickItem"
+                    @click-left="evClickLeft"
+                    @click-right="evClickRight"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'not editable'"
+                ></demolink>
+
+                <w-text-suggest
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :editable="false"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div></div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & default'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & paddingStyle (thin style)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :paddingStyle="{v:0,h:10}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & paddingStyle (equal height to using icon)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :paddingStyle="{v:4,h:15}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & textFontSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :textFontSize="'0.8rem'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & textColor & expansionIconColor'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :textColor="'orange darken-2'"
+                    :expansionIconColor="'orange'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & expansionIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :expansionIconSize="14"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & searchEmpty'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :items="WTextSuggest.objItems"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & leftIcon (material)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & leftIcon (fontawesome)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="'fas fa-clipboard-check'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & leftIcon & leftIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :leftIconSize="20"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & leftIcon & leftIconColor & leftIconColorHover & leftIconColorFocus & leftIconTooltip'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :leftIconColor="'orange lighten-1'"
+                    :leftIconColorHover="'orange accent-3'"
+                    :leftIconColorFocus="'orange darken-2'"
+                    :leftIconTooltip="'show tooltip'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & rightIcon & rightIconSize'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :rightIconSize="20"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & rightIcon & rightIconColor & rightIconColorHover & rightIconColorFocus & rightIconTooltip'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :rightIconColor="'orange lighten-1'"
+                    :rightIconColorHover="'orange accent-3'"
+                    :rightIconColorFocus="'orange darken-2'"
+                    :rightIconTooltip="'show tooltip'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & backgroundColor & backgroundColorHover & backgroundColorFocus'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    _backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :backgroundColor="'rgba(255, 171, 64, 0.05)'"
+                    :backgroundColorHover="'rgba(255, 171, 64, 0.1)'"
+                    :backgroundColorFocus="'rgba(255, 171, 64, 0.2)'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & showExpansionIcon'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :showExpansionIcon="false"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & placeholder'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :placeholder="'keywords'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & borderRadius'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :borderRadius="5"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & itemPaddingStyle'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :itemPaddingStyle="{v:5,h:8}"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & keyText'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItemsKeyText"
+                    :keyText="'name'"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValueKeyText"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & itemTextFontSize & defItemHeight'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :defItemHeight="48"
+                    :itemTextFontSize="'1rem'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & itemTextColor & itemTextColorHover & itemBackgroundColor & itemBackgroundColorHover'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :itemTextColor="'orange darken-3'"
+                    :itemTextColorHover="'white'"
+                    :itemBackgroundColor="'white'"
+                    :itemBackgroundColorHover="'orange darken-3'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & a lot of items'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItemsLarge"
+                    :searchEmpty="'無有效項目'"
+                    v-model="WTextSuggest.objValueLarge"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & items(string array)'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.strItems"
+                    v-model="WTextSuggest.strValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & showPanel(press enter to hide panel) & focused'"
+                ></demolink>
+
+                <div style="margin-bottom:5px;">
+                    <div style="font-size:0.8rem;">focused={{WTextSuggest.focused}}, showPanel={{WTextSuggest.showPanel}}</div>
+                    <div>
+                        <v-btn style="margin-right:5px;" small @click="WTextSuggest.showPanel=true">show panel</v-btn>
+                        <v-btn style="margin-right:5px;" small @click="WTextSuggest.showPanel=false">hide panel</v-btn>
+                    </div>
+                </div>
+
+                <w-text-suggest
+                    :focused.sync="WTextSuggest.focused"
+                    :showPanel.sync="WTextSuggest.showPanel"
+                    @enter="hidePanelWhenEnter"
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & slot item'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                >
+                    <template v-slot:item="props">
+                        <div style="color:#f26; font-size:0.7rem;">{{props.item.key}}</div>
+                        <div>{{props.item.text}}</div>
+                    </template>
+                </w-text-suggest>
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & fullwidth'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & with popup'"
+                ></demolink>
+
+                <w-popup
+                    :isolated="true"
+                >
+
+                    <template v-slot:trigger>
+                        <v-btn depressed small elevation="2">Show popup</v-btn>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="padding:45px 25px;">
+                            <w-text-suggest
+                                :shadow="false"
+                                :borderColor="'orange lighten-2'"
+                                :borderColorHover="'orange'"
+                                :borderColorFocus="'orange darken-2'"
+                                :backgroundColorFocus="'orange lighten-5'"
+                                :items="WTextSuggest.objItems"
+                                v-model="WTextSuggest.objValue"
+                            ></w-text-suggest>
+                        </div>
+                    </template>
+
+                </w-popup>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & events'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :rightIcon="mdiCheckUnderlineCircle"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                    @update:focused="evUpdateFocused"
+                    @update:showPanel="evUpdateShowPanel"
+                    @blur="evBlur"
+                    @input="evInput"
+                    @enter="evEnter"
+                    @click-item="evClickItem"
+                    @click-left="evClickLeft"
+                    @click-right="evClickRight"
+                ></w-text-suggest>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-text-suggest'"
+                    :casename="'border & not editable'"
+                ></demolink>
+
+                <w-text-suggest
+                    :shadow="false"
+                    :borderColor="'orange lighten-2'"
+                    :borderColorHover="'orange'"
+                    :borderColorFocus="'orange darken-2'"
+                    :backgroundColorFocus="'orange lighten-5'"
+                    :leftIcon="mdiCheckUnderlineCircle"
+                    :editable="false"
+                    :items="WTextSuggest.objItems"
+                    v-model="WTextSuggest.objValue"
+                ></w-text-suggest>
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import { mdiCheckUnderlineCircle, mdiPaw } from '@mdi/js'
+import demolink from './components/demolink.vue'
+import WTextSuggest from './components/WTextSuggest.vue'
+import WPopup from './components/WPopup.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WTextSuggest,
+        WPopup,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            mdiCheckUnderlineCircle,
+            mdiPaw,
+            'WTextSuggest': {
+                focused: false,
+                showPanel: false,
+                objItems: [
+                    {
+                        key: 'orange',
+                        text: '橘子(orange)',
+                    },
+                    {
+                        key: 'banana',
+                        text: '香蕉(banana)',
+                    },
+                    {
+                        key: 'strawberry',
+                        text: '草莓(strawberry)',
+                    },
+                ],
+                objValue: {
+                    key: 'banana',
+                    text: '香蕉(banana)',
+                },
+                objItemsKeyText: [
+                    {
+                        key: 'orange',
+                        name: '橘子(orange)',
+                    },
+                    {
+                        key: 'banana',
+                        name: '香蕉(banana)',
+                    },
+                    {
+                        key: 'strawberry',
+                        name: '草莓(strawberry)',
+                    },
+                ],
+                objValueKeyText: {
+                    key: 'banana',
+                    name: '香蕉(banana)',
+                },
+                objItemsLarge: (function() {
+                    let vs = []
+                    vs.push({
+                        key: 'banana:1',
+                        text: '香蕉(banana:1)',
+                    })
+                    for (let i = 2; i <= 10000; i++) {
+                        vs.push({
+                            key: 'banana:' + i,
+                            text: '香蕉(banana:' + i + ')',
+                        })
+                    }
+                    return vs
+                })(),
+                objValueLarge: {
+                    key: 'banana:1',
+                    text: '香蕉(banana:1)',
+                },
+                strItems: ['orange(橘子)', 'banana(香蕉)', 'strawberry(草莓)'],
+                strValue: 'strawberry(草莓)',
+            },
+            'actions': [
+                {
+                    'mode': 'eleclick',
+                    'selector': 'input[type="text"]',
+                },
+                {
+                    'mode': 'keypress',
+                    'key': 'End',
+                },
+                {
+                    'mode': 'keypress',
+                    'key': 'Backspace',
+                    'count': 15,
+                },
+                {
+                    'mode': 'eleclick',
+                    'selector': 'li[role="option"]',
+                    'nth': 2,
+                },
+                {
+                    'mode': 'eleclick',
+                    'selector': 'div.bk',
+                },
+            ],
+        }
+    },
+    methods: {
+        evUpdateFocused: function(item, kitem) {
+            console.log('evUpdateFocused', 'item=', item, 'kitem', kitem)
+        },
+        evUpdateShowPanel: function(item, kitem) {
+            console.log('evUpdateShowPanel', 'item=', item, 'kitem', kitem)
+        },
+        evBlur: function(item, kitem) {
+            console.log('evBlur', 'item=', item, 'kitem', kitem)
+        },
+        evInput: function(item, kitem) {
+            console.log('evInput', 'item=', item, 'kitem', kitem)
+        },
+        evEnter: function(item, kitem) {
+            console.log('evEnter', 'item=', item, 'kitem', kitem)
+        },
+        evClickItem: function(item, kitem) {
+            console.log('evClickItem', 'item=', item, 'kitem', kitem)
+        },
+        evClickLeft: function() {
+            console.log('evClickLeft')
+        },
+        evClickRight: function() {
+            console.log('evClickRight')
+        },
+        hidePanelWhenEnter: function() {
+            // console.log('hidePanelWhenEnter')
+
+            let vo = this
+
+            //blur, 要先將text的焦點取消, 先觸發掉focused變更事件(此會再觸發changeContent內容變更事件, 故會觸發顯示panel)
+            document.activeElement.blur()
+
+            //delay hide, 因enter觸發blur後會觸發changeContent內容變更事件, 故得等顯示事件完成才給予showPanel=false, 100ms是經驗值, 使其完整觸發隱藏panel流程
+            setTimeout(function() {
+
+                //hide
+                vo.WTextSuggest.showPanel = false
+
+            }, 100)
+
+        },
+    },
+}
+</script>
+
+<style scoped>
+</style>