w-component-vue 2.1.73 → 2.1.76

package/src/AppZoneWDrawer.vue

@@ -0,0 +1,497 @@
+<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-drawer</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'default'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow1=!WDrawer.bShow1">Show({{WDrawer.bShow1}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow1"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%; border-right:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'drawerWidth'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow2=!WDrawer.bShow2">Show({{WDrawer.bShow2}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    v-model="WDrawer.bShow2"
+                    :drawerWidth="300"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%; border-right:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'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'"
+                    :casename="'mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow4"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%; border-left:1px solid #ddd;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow5"
+                    :afloat="true"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & overlayOpacity'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow6"
+                    :afloat="true"
+                    :overlayOpacity="0.1"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow7"
+                    :afloat="true"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & afloatByFix'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow8"
+                    :afloat="true"
+                    :afloatByFix="true"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & afloatByFix & mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <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;"
+                    v-model="WDrawer.bShow9"
+                    :afloat="true"
+                    :afloatByFix="true"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <w-list-vertical
+                            style="height:100%;"
+                            :items="WDrawer.listItems"
+                            :itemActive.sync="WDrawer.listItemActive"
+                        ></w-list-vertical>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<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: {
+    },
+    data: function() {
+        return {
+            'WDrawer': {
+                'title': 'Article Title',
+                'content': 'Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the 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',
+                        icon: 'fas fa-american-sign-language-interpreting',
+                    },
+                    {
+                        text: 'Search',
+                        icon: 'fas fa-search',
+                    },
+                    {
+                        text: 'Binoculars',
+                        icon: 'fas fa-binoculars',
+                    },
+                    {
+                        text: 'Building',
+                        icon: 'fa-regular fa-building',
+                    },
+                    {
+                        text: 'Tachometer-alt',
+                        icon: 'fas fa-tachometer-alt',
+                    },
+                    {
+                        text: 'Chess-king',
+                        icon: 'fas fa-chess-king',
+                    },
+
+
+                    {
+                        text: 'Calendar',
+                        icon: 'fas fa-calendar-alt',
+                    },
+                    {
+                        text: 'chart',
+                        icon: 'fas fa-chart-bar',
+                    },
+                    {
+                        text: 'Cloud-meatball',
+                        icon: 'fas fa-cloud-meatball',
+                    },
+                    {
+                        text: 'Cubes',
+                        icon: 'fas fa-cubes',
+                    },
+                    {
+                        text: 'Dungeon',
+                        icon: 'fas fa-dungeon',
+                    },
+                ],
+                'listPkgs': [
+                    {
+                        text: 'Balance',
+                        icon: 'fas fa-balance-scale',
+                    },
+                    {
+                        text: 'Connection',
+                        icon: 'fas fa-bezier-curve',
+                    },
+                    {
+                        text: 'Issue',
+                        icon: 'fa-box-tissue',
+                    },
+                ],
+                'listItemActive': {
+                    text: 'Search',
+                    icon: 'fas fa-search',
+                },
+                'listPkgActive': {
+                    text: 'Balance',
+                    icon: 'fas fa-balance-scale',
+                },
+                'bShow1': false,
+                'bShow2': false,
+                'bShow3a': false,
+                'bShow3b': false,
+                'bShow4': false,
+                'bShow5': false,
+                'bShow6': false,
+                'bShow7': false,
+                'bShow8': false,
+                'bShow9': false,
+            },
+            'actions': [
+                {
+
+                }
+            ],
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>

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/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,