w-component-vue 2.2.43 → 2.2.46

package/src/AppZoneWGroupBaggage.vue

@@ -0,0 +1,537 @@
+<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-group-baggage</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'keyTag & keyText'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.itemsKey"
+                    :keyTag="'name'"
+                    :keyText="'content'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'connLineWidth'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :connLineWidth="3"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'connLineColor'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :connLineColor="'#dab78b'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'connLineZoneWidth'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :connLineZoneWidth="200"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagTextFontSize & contentShiftTopFromBaseline'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagTextFontSize="'0.85rem'"
+                    :contentShiftTopFromBaseline="12"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagTextColor & tagTextColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagTextColor="'#FF6F00'"
+                    :tagTextColorHover="'#EF6C00'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagBorderRadius'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagBorderRadius="0"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagBorderWidth'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagBorderWidth="2"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagBorderColor & tagBorderColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagBorderColor="'#7CB342'"
+                    :tagBorderColorHover="'#33691E'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagBackgroundColor & tagBackgroundColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagBackgroundColor="'#F3E5F5'"
+                    :tagBackgroundColorHover="'#E1BEE7'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagPaddingStyle & contentShiftTopFromBaseline'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagPaddingStyle="{v:5,h:10}"
+                    :contentShiftTopFromBaseline="15"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentTextFontSize'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentTextFontSize="'0.85rem'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentTextColor & contentTextColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentTextColor="'#AFB42B'"
+                    :contentTextColorHover="'#9E9D24'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentBorderRadius'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentBorderRadius="0"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentBorderWidth'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentBorderWidth="2"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentBorderColor & contentBorderColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentBorderColor="'#D4E157'"
+                    :contentBorderColorHover="'#CDDC39'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentBackgroundColor & contentBackgroundColorHover'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentBackgroundColor="'#D1C4E9'"
+                    :contentBackgroundColorHover="'#CE93D8'"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'contentPaddingStyle'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentPaddingStyle="{v:5,h:10}"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'distBetweenTopAndTagBaseline'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :distBetweenTopAndTagBaseline="40"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'tagClickable & contentClickable & events'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :tagClickable="true"
+                    :contentClickable="true"
+                    @click-tag="ckTag"
+                    @click-content="ckContent"
+                    @click="ckItem"
+                >
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'slot tag'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                >
+
+                    <template v-slot:tag="props">
+                        <div
+                            :style="`display:flex; align-items:center; cursor:pointer;`"
+                            @click="ckItem('slot-tag')"
+                        >
+
+                            <div :style="`transition:all 0.3s; padding-right:5px; _color:#682fff; color:${props.isHover?'#af1654':'#C2185B'};`">
+                                <i class="fas fa-balance-scale"></i>
+                            </div>
+
+                            <div :style="`transition:all 0.3s; padding-right:5px; color:${props.isHover?'#682fff':'#7C4DFF'};`">
+                                {{props.item.tag}}
+                            </div>
+
+                        </div>
+                    </template>
+
+                </w-group-baggage>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-group-baggage'"
+                    :casename="'slot text & contentPaddingStyle'"
+                ></demolink>
+
+                <w-group-baggage
+                    style="width:600px;"
+                    :items="WGroupBaggage.items"
+                    :contentPaddingStyle="{v:0,h:0}"
+                >
+
+                    <template v-slot:text="props">
+                        <div
+                            :style="`transition:all 0.3s; padding:8px 10px; border-radius:5px; background:${props.isHover?'#F1F8E9':'#fff'};`"
+                            @click="ckItem('slot-text')"
+                        >
+
+                            <div :style="`display:flex; align-items:flex-start;`">
+
+                                <div :style="`transition:all 0.3s; padding-right:5px; color:#AEEA00;`">
+                                    <i class="fas fa-box-open"></i>
+                                </div>
+
+                                <div :style="`transition:all 0.3s; padding-right:5px; color:#777; font-size:0.85rem; font-weight:bold;`">
+                                    {{props.item.title}}
+                                </div>
+
+                            </div>
+
+                            <div style="padding-top:3px;">
+
+                                <div :style="`transition:all 0.3s; padding-right:5px; color:#666; font-size:0.7rem;`">
+                                    {{props.item.text}}
+                                </div>
+
+                            </div>
+
+                        </div>
+                    </template>
+
+                </w-group-baggage>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WGroupBaggage from './components/WGroupBaggage.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WGroupBaggage,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WGroupBaggage': {
+                items: [
+                    {
+                        tag: 'Audience',
+                        text: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                        title: 'Indoctum',
+                    },
+                    {
+                        tag: 'Conversions',
+                        text: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                        title: 'Omittantur',
+                    },
+                    {
+                        tag: 'Management',
+                        text: 'Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates.',
+                        title: 'Consequat',
+                    },
+                    {
+                        tag: 'Settings',
+                        text: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                        title: 'Splendide',
+                    },
+                    {
+                        tag: 'Actions',
+                        text: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
+                        title: 'Pellentesque',
+                    },
+                    {
+                        tag: 'Real-Time',
+                        text: 'Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem.',
+                        title: 'Quaestio',
+                    },
+                ],
+                itemsKey: [
+                    {
+                        name: 'Audience',
+                        content: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                    },
+                    {
+                        name: 'Conversions',
+                        content: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                    },
+                    {
+                        name: 'Management',
+                        content: 'Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates.',
+                    },
+                    {
+                        name: 'Settings',
+                        content: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                    },
+                    {
+                        name: 'Actions',
+                        content: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
+                    },
+                    {
+                        name: 'Real-Time',
+                        content: 'Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem.',
+                    },
+                ],
+            },
+            'actions': [
+            ],
+        }
+    },
+    methods: {
+        ckTag: function(msg) {
+            console.log('ckTag', msg)
+        },
+        ckContent: function(msg) {
+            console.log('ckContent', msg)
+        },
+        ckItem: function(msg) {
+            console.log('ckItem', msg)
+        },
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WButtonChip.vue

@@ -174,21 +174,21 @@ import WIconLoading from './WIconLoading.vue'
  * @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} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
- * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影，預設false
+ * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {String} [rippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
  * @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 {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'
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  * @vue-prop {String} [disabledColor='rgba(255,255,255,0.5)'] 輸入非編輯模式時遮罩顏色字串，預設'rgba(255,255,255,0.5)'
  */
 export default {

package/src/components/WComponentVue.vue

@@ -13,6 +13,7 @@ import WDropfiles from './WDropfiles.vue'
 import WDynamicList from './WDynamicList.vue'
 import WEchartsVueDyn from './WEchartsVueDyn.vue'
 import WExplorer from './WExplorer.vue'
+import WGroupBaggage from './WGroupBaggage.vue'
 import WGroupCheck from './WGroupCheck.vue'
 import WGroupDragdrop from './WGroupDragdrop.vue'
 import WGroupRadio from './WGroupRadio.vue'
@@ -39,6 +40,7 @@ import WPanelDivideVertical from './WPanelDivideVertical.vue'
 import WPanelScale from './WPanelScale.vue'
 import WPanelScrolly from './WPanelScrolly.vue'
 import WPanelScrollyCore from './WPanelScrollyCore.vue'
+import WPanelSlotHover from './WPanelSlotHover.vue'
 import WPanelStripe from './WPanelStripe.vue'
 import WPopup from './WPopup.vue'
 import WPopupEditText from './WPopupEditText.vue'
@@ -87,6 +89,7 @@ let WComponentVue = {
         Vue.component('w-dynamic-list', WDynamicList)
         Vue.component('w-echarts-vue-dyn', WEchartsVueDyn)
         Vue.component('w-explorer', WExplorer)
+        Vue.component('w-group-baggage', WGroupBaggage)
         Vue.component('w-group-check', WGroupCheck)
         Vue.component('w-group-dragdrop', WGroupDragdrop)
         Vue.component('w-group-radio', WGroupRadio)
@@ -113,6 +116,7 @@ let WComponentVue = {
         Vue.component('w-panel-scale', WPanelScale)
         Vue.component('w-panel-scrolly', WPanelScrolly)
         Vue.component('w-panel-scrolly-core', WPanelScrollyCore)
+        Vue.component('w-panel-slot-hover', WPanelSlotHover)
         Vue.component('w-panel-stripe', WPanelStripe)
         Vue.component('w-popup', WPopup)
         Vue.component('w-popup-edit-text', WPopupEditText)

package/src/components/WExplorer.vue

@@ -220,6 +220,8 @@
                             </template>
 
                             <template v-slot:item="props">
+
+                                <!-- 使用line-height使多行文字時依然能置頂對齊 -->
                                 <div :style="`position:relative; min-height:${listDefItemHeight}px; line-height:${listDefItemHeight}px;`">
 
                                     <!-- 由slot外側提供預設字型設定, 而字型顏色設定由更外側WListVertical組件提供 -->
@@ -236,6 +238,7 @@
                                             :funClickListItem="()=>{ckListItem(props)}"
                                         >
 
+                                            <!-- 僅使用display:flex使多行文字置頂對齊 -->
                                             <div :style="`display:flex;`">
 
                                                 <div
@@ -249,6 +252,14 @@
                                                     ></WIcon>
                                                 </div>
 
+                                                <slot
+                                                    name="list-item-text-left"
+                                                    :item="props.item"
+                                                    :isHover="props.isHover"
+                                                    :isActive="props.isActive"
+                                                >
+                                                </slot>
+
                                                 <div
                                                     :style="`${useListItemTextFontSize} cursor:pointer; user-select:none;`"
                                                     @click="ckListItem(props)"
@@ -256,6 +267,14 @@
                                                     {{props.item.text}}
                                                 </div>
 
+                                                <slot
+                                                    name="list-item-text-right"
+                                                    :item="props.item"
+                                                    :isHover="props.isHover"
+                                                    :isActive="props.isActive"
+                                                >
+                                                </slot>
+
                                             </div>
 
                                         </slot>
@@ -280,6 +299,7 @@
                                     </slot>
 
                                 </div>
+
                             </template>
 
                             <template v-slot:footer>