w-component-vue 2.1.74 → 2.1.77

package/src/AppZoneWDrawer.vue

@@ -19,12 +19,16 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow1"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%; border-right:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -50,13 +54,17 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow2"
                     :drawerWidth="300"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%; border-right:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -71,6 +79,81 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'multiple'"
+                ></demolink>
+
+                <w-drawer
+                    style="width:600px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow3a"
+                >
+
+                    <template v-slot:drawer>
+
+                        <w-list-vertical
+                            style="height:100%; border-right:1px solid #ddd;"
+                            :items="WDrawer.listPkgs"
+                            :itemActive.sync="WDrawer.listPkgActive"
+                        >
+                            <template v-slot:header>
+                                <div style="padding:5px 10px; font-size:0.7rem; color:#999;">
+                                    Outer list
+                                </div>
+                            </template>
+                        </w-list-vertical>
+
+                    </template>
+
+                    <template v-slot:content>
+
+                        <w-drawer
+                            style="width:100%; height:100%;"
+                            v-model="WDrawer.bShow3b"
+                        >
+
+                            <template v-slot:drawer>
+
+                                <w-list-vertical
+                                    style="height:100%; border-right:1px solid #ddd;"
+                                    :items="WDrawer.listItems"
+                                    :itemActive.sync="WDrawer.listItemActive"
+                                >
+                                    <template v-slot:header>
+                                        <div style="padding:5px 10px; font-size:0.7rem; color:#999;">
+                                            Inner list
+                                        </div>
+                                    </template>
+                                </w-list-vertical>
+
+                            </template>
+
+                            <template v-slot:content>
+                                <div style="height:100%; overflow-y:auto;">
+
+                                    <div style="padding-bottom:10px;">
+                                        <v-btn depressed small elevation="2" @click="WDrawer.bShow3a=!WDrawer.bShow3a">Outer Show({{WDrawer.bShow3a}})</v-btn>
+                                    </div>
+
+                                    <div style="padding-bottom:10px;">
+                                        <v-btn depressed small elevation="2" @click="WDrawer.bShow3b=!WDrawer.bShow3b">Inner Show({{WDrawer.bShow3b}})</v-btn>
+                                    </div>
+
+                                    <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                                    <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                                </div>
+                            </template>
+
+                        </w-drawer>
+
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-drawer'"
@@ -78,17 +161,21 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow3=!WDrawer.bShow3">Show({{WDrawer.bShow3}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow4=!WDrawer.bShow4">Show({{WDrawer.bShow4}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow3"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow4"
                     :mode="'from-right'"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent; height:100%; border-left:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%; border-left:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -110,17 +197,21 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow4=!WDrawer.bShow4">Show({{WDrawer.bShow4}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow5=!WDrawer.bShow5">Show({{WDrawer.bShow5}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow4"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow5"
                     :afloat="true"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -142,18 +233,22 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow5=!WDrawer.bShow5">Show({{WDrawer.bShow5}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow6=!WDrawer.bShow6">Show({{WDrawer.bShow6}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow5"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow6"
                     :afloat="true"
                     :overlayOpacity="0.1"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -175,18 +270,22 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow6=!WDrawer.bShow6">Show({{WDrawer.bShow6}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow7=!WDrawer.bShow7">Show({{WDrawer.bShow7}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow6"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow7"
                     :afloat="true"
                     :mode="'from-right'"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -208,18 +307,22 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow7=!WDrawer.bShow7">Show({{WDrawer.bShow7}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow8=!WDrawer.bShow8">Show({{WDrawer.bShow8}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow7"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow8"
                     :afloat="true"
                     :afloatByFix="true"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -241,19 +344,23 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WDrawer.bShow8=!WDrawer.bShow8">Show({{WDrawer.bShow8}})</v-btn>
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow9=!WDrawer.bShow9">Show({{WDrawer.bShow9}})</v-btn>
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                    v-model="WDrawer.bShow8"
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow9"
                     :afloat="true"
                     :afloatByFix="true"
                     :mode="'from-right'"
                 >
 
                     <template v-slot:drawer>
-                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
                     </template>
 
                     <template v-slot:content>
@@ -276,12 +383,14 @@
 
 <script>
 import demolink from './components/demolink.vue'
+import WListVertical from './components/WListVertical.vue'
 import WDrawer from './components/WDrawer.vue'
 
 
 export default {
     components: {
         demolink,
+        WListVertical,
         WDrawer,
     },
     props: {
@@ -290,7 +399,7 @@ export default {
         return {
             'WDrawer': {
                 'title': 'Article Title',
-                'content': 'Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application\'s compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.',
+                'content': 'Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application\'s compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.',
                 'listItems': [
                     {
                         text: 'Interpreting',
@@ -317,15 +426,60 @@ export default {
                         icon: 'fas fa-chess-king',
                     },
 
+
+                    {
+                        text: 'Calendar',
+                        icon: 'fas fa-calendar-alt',
+                    },
+                    {
+                        text: 'chart',
+                        icon: 'fas fa-chart-bar',
+                    },
+                    {
+                        text: 'Cloud-meatball',
+                        icon: 'fas fa-cloud-meatball',
+                    },
+                    {
+                        text: 'Cubes',
+                        icon: 'fas fa-cubes',
+                    },
+                    {
+                        text: 'Dungeon',
+                        icon: 'fas fa-dungeon',
+                    },
+                ],
+                'listPkgs': [
+                    {
+                        text: 'Balance',
+                        icon: 'fas fa-balance-scale',
+                    },
+                    {
+                        text: 'Connection',
+                        icon: 'fas fa-bezier-curve',
+                    },
+                    {
+                        text: 'Issue',
+                        icon: 'fa-box-tissue',
+                    },
                 ],
+                'listItemActive': {
+                    text: 'Search',
+                    icon: 'fas fa-search',
+                },
+                'listPkgActive': {
+                    text: 'Balance',
+                    icon: 'fas fa-balance-scale',
+                },
                 'bShow1': false,
                 'bShow2': false,
-                'bShow3': false,
+                'bShow3a': false,
+                'bShow3b': false,
                 'bShow4': false,
                 'bShow5': false,
                 'bShow6': false,
                 'bShow7': false,
                 'bShow8': false,
+                'bShow9': false,
             },
             'actions': [
                 {

package/src/AppZoneWJsonView.vue

@@ -37,6 +37,22 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'sync viewHeightMax(change-height-of-items)'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="WJsonView.viewHeightMaxSync"
+                    :data="WJsonView.data3"
+                    @change-height-of-items="changeHeightOfItems"
+                ></w-json-view>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-json-view'"
@@ -186,6 +202,7 @@ export default {
     data: function() {
         return {
             'WJsonView': {
+                'viewHeightMaxSync': 400,
                 'keywords': 'pow ci uadn',
                 'data1': { 'squadName': 'Super hero squad', 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
                 'data2': { 'cookie': 'username-localhost-8888="2|1:0|10:1624431350|23:username-localhost-8888|44:ZmMxYzkwOGI0ODYxNDY1M2ExY2VhOGE3MmFhNWE4M2Y=|f8840028a36433a4e69e67f7eae6d188994203da2f54fe8af55d3e815f5cad0f', 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
@@ -202,6 +219,10 @@ export default {
     //     console.log('WJsonView.data4', this.WJsonView.data4)
     // },
     methods: {
+        changeHeightOfItems: function(msg) {
+            console.log('changeHeightOfItems', msg)
+            this.WJsonView.viewHeightMaxSync = msg.height
+        },
     },
 }
 </script>

package/src/AppZoneWListVertical.vue

@@ -330,6 +330,7 @@
 import { mdiStackOverflow, mdiBookMusicOutline, mdiCharity, mdiLightbulbGroupOutline, mdiMessageCogOutline, mdiGestureDoubleTap, mdiPencilOutline, mdiLightbulbOnOutline } from '@mdi/js/mdi.js'
 import demolink from './components/demolink.vue'
 import WButtonCircle from './components/WButtonCircle.vue'
+import WIcon from './components/WIcon.vue'
 import WListVertical from './components/WListVertical.vue'
 
 
@@ -337,6 +338,7 @@ export default {
     components: {
         demolink,
         WButtonCircle,
+        WIcon,
         WListVertical,
     },
     props: {

package/src/AppZoneWTree.vue

@@ -68,6 +68,22 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'sync viewHeightMax(change-height-of-items)'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="WTree.viewHeightMaxSync"
+                    :data="WTree.option.items"
+                    @change-height-of-items="changeHeightOfItems"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -946,6 +962,7 @@ export default {
     data: function() {
         return {
             'WTree': {
+                'viewHeightMaxSync': 400,
                 'option': {
                     keywords: 'abr care att',
                     selections: [
@@ -1298,6 +1315,10 @@ export default {
         }
     },
     methods: {
+        changeHeightOfItems: function(msg) {
+            console.log('changeHeightOfItems', msg)
+            this.WTree.viewHeightMaxSync = msg.height
+        },
         showSelection: function(selections) {
             let ss = {}
             for (let i = 0; i < selections.length; i++) {

package/src/components/WButtonChip.vue

@@ -20,7 +20,7 @@
                     <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
                     <div
                         v-on="on"
-                        :style="`transition:all 0.3s; ${useBorderRadiusStyle} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                        :style="`transition:all 0.3s; ${useBorderRadiusStyle} background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
                         tabindex="0"
                         v-domripple="useRipple"
                         @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
@@ -184,6 +184,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
  * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
  * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [role='button'] 輸入角色字串，預設'button'
@@ -362,6 +363,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         loading: {
             type: Boolean,
             default: false,

package/src/components/WButtonCircle.vue

@@ -16,7 +16,7 @@
                 <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
                 <div
                     v-on="on"
-                    :style="`position:relative; transition:all 0.3s; border-radius:50%; ${usePadding} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                    :style="`position:relative; transition:all 0.3s; ${usePadding} border-radius:50%; border:${borderWidth}px solid ${useBorderColor}; background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
                     tabindex="0"
                     @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
                     @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
@@ -90,6 +90,10 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {String} [iconColor='grey darken-1'] 輸入按鈕圖標顏色字串，預設'grey darken-1'
  * @vue-prop {String} [iconColorHover='grey darken-2'] 輸入滑鼠移入時按鈕圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [iconColorFocus='grey darken-3'] 輸入取得焦點時按鈕圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {Number} [borderWidth=0] 輸入框線寬度數字，單位為px，預設0
+ * @vue-prop {String} [borderColor='transparent'] 輸入按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorHover='transparent'] 輸入滑鼠移入時按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorFocus='transparent'] 輸入取得焦點時按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColor='rgb(241,241,241)'] 輸入按鈕背景顏色字串，預設'rgb(241,241,241)'
  * @vue-prop {String} [backgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時按鈕背景顏色字串，預設'rgb(236,236,236)'
  * @vue-prop {String} [backgroundColorFocus='rgb(230,230,230)'] 輸入取得焦點時按鈕背景顏色字串，預設'rgb(230,230,230)'
@@ -97,6 +101,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Object} [paddingStyle={v:4,h:4}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:4,h:4}
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
  * @vue-prop {Boolean} [promiseUnlock=false] 輸入是否點擊後自動設定為loading為true並需使用promise解鎖布林值，預設false
@@ -134,6 +139,22 @@ export default {
             type: String,
             default: 'grey darken-3',
         },
+        borderWidth: {
+            type: Number,
+            default: 0,
+        },
+        borderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorHover: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorFocus: {
+            type: String,
+            default: 'transparent',
+        },
         backgroundColor: {
             type: String,
             default: 'rgb(241,241,241)',
@@ -169,6 +190,10 @@ export default {
                 }
             },
         },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         loading: {
             type: Boolean,
             default: false,
@@ -245,6 +270,34 @@ export default {
             return r
         },
 
+        effBorderColor: function() {
+            let vo = this
+            return color2hex(vo.borderColor)
+        },
+
+        effBorderColorHover: function() {
+            let vo = this
+            return color2hex(vo.borderColorHover)
+        },
+
+        effBorderColorFocus: function() {
+            let vo = this
+            return color2hex(vo.borderColorFocus)
+        },
+
+        useBorderColor: function() {
+            let vo = this
+            let r
+            if (vo.loadingTrans) {
+                return vo.effBorderColor
+            }
+            r = vo.focusTrans ? vo.effBorderColorFocus : vo.hoverTrans ? vo.effBorderColorHover : vo.effBorderColor
+            if (!vo.editable) {
+                r = vo.focusTrans ? vo.effBorderColorFocus : vo.effBorderColor
+            }
+            return r
+        },
+
         effBackgroundColor: function() {
             let vo = this
             return color2hex(vo.backgroundColor)