w-component-vue 2.2.4 → 2.2.7

package/src/AppZoneWListExpand.vue

@@ -0,0 +1,474 @@
+<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-list-expand</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'default'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                    >
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'activeMode(multi)'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActiveMulti"
+                        :activeMode="'multi'"
+                    >
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'keyText & keyIcon'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObjForKey"
+                        :keyText="'name'"
+                        :keyIcon="'path'"
+                    >
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'slot item-header & item-content'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                    >
+
+                        <template v-slot:item-header="props">
+                            <div style="display:flex; align-items:center;">
+
+                                <w-icon
+                                    style="margin-right:8px;"
+                                    :icon="props.item.icon"
+                                    :size="28"
+                                    :color="props.item.isActive?'#fff':'#FFAB00'"
+                                ></w-icon>
+
+                                <div>
+
+                                    <div :style="`${props.item.isActive?'color:#fff;':''};`">
+                                        {{props.item.text}}
+                                    </div>
+
+                                    <div :style="`font-size:0.7rem; line-height:0.7rem; ${props.item.isActive?'opacity:1; color:#FFE0B2;':'opacity:0.7; color:#666;'}`">
+                                        Vestibulum a sodales lorem.
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </template>
+
+                        <template v-slot:item-content="props">
+                            <!-- 使用多層border-left會有無渲染間距, 導致看起來有白線, 暫時使用align-items:stretch呈現 -->
+                            <div style="display:flex; align-items:stretch; border-bottom:1px solid #eee;">
+
+                                <div style="padding-left:10px; background:#FFE0B2;">
+                                </div>
+
+                                <div style="padding-left:1px; background:#FFB74D;">
+                                </div>
+
+                                <div style="padding:10px; font-size:0.7rem; background:rgba(255, 243, 224, 0.2);">
+                                    {{props.item.dsp}}
+                                </div>
+
+                            </div>
+                        </template>
+
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk" style="width:500px;">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="display:inline-block; _border:1px dashed #ddd; background:url('//cdn.jsdelivr.net/npm/w-demores/res/img/view/003.jpg');">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                        :itemBackgroundColor="'rgba(130, 138, 156, 0.1)'"
+                        :itemBackgroundColorHover="'rgba(255, 255, 255, 0.2)'"
+                        :itemBackgroundColorActive="'rgba(100, 100, 100, 0.5)'"
+                    >
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk" style="width:500px;">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'slot item-content & itemTextColor & itemTextColorHover & itemTextColorActive & itemIconColor & itemIconColorHover & itemIconColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="display:inline-block; _border:1px dashed #ddd; background:url('//cdn.jsdelivr.net/npm/w-demores/res/img/view/022.jpg');">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                        :itemTextColor="'#222'"
+                        :itemTextColorHover="'#fff'"
+                        :itemTextColorActive="'#fff'"
+                        :itemIconColor="'#222'"
+                        :itemIconColorHover="'#fff'"
+                        :itemIconColorActive="'#fff'"
+                        :itemBackgroundColor="'rgba(255, 255, 255, 0.5)'"
+                        :itemBackgroundColorHover="'rgba(255, 255, 255, 0.2)'"
+                        :itemBackgroundColorActive="'rgba(0, 0, 0, 0.5)'"
+                    >
+
+                        <template v-slot:item-content="props">
+                            <div style="display:flex; align-items:stretch; border-bottom:1px solid #eee;">
+
+                                <div style="padding-left:10px; opacity:0.2; background:#fff;">
+                                </div>
+
+                                <div style="padding-left:1px; opacity:0.5; background:#fff;">
+                                </div>
+
+                                <div style="padding:10px; font-size:0.8rem; opacity:0.8; color:#fff;">
+                                    {{props.item.dsp}}
+                                </div>
+
+                            </div>
+                        </template>
+
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'paddingStyle'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                        :paddingStyle="{v:3,h:5}"
+                    >
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'slot header'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                        :itemBackgroundColorActive="'rgba(140, 100, 100, 0.75)'"
+                    >
+                        <template v-slot:header>
+                            <div style="display:flex; align-items:center; padding:10px 15px; font-size:0.9rem; color:#fff; background:#666;">
+
+                                <div>
+                                    Application
+                                </div>
+
+                                <div style="width:100%; text-align:right;">
+                                    <w-button-circle
+                                        :icon="mdiPencilOutline"
+                                    ></w-button-circle>
+                                </div>
+
+                            </div>
+                        </template>
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'slot footer'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObj"
+                        :itemActive.sync="WListExpand.itemActive"
+                        :itemBackgroundColorActive="'rgba(100, 100, 140, 0.75)'"
+                    >
+                        <template v-slot:footer>
+                            <div style="padding:10px 15px; font-size:0.9rem; color:#fff; background:rgba(150,150,150,0.25); text-align:right;">
+                                <v-btn style="margin-left:8px;" small rounded>Save</v-btn>
+                                <v-btn style="margin-left:8px;" small rounded>Analysis</v-btn>
+                            </div>
+                        </template>
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-expand'"
+                    :casename="'auto scroll'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-expand
+                        style="height:400px; width:250px;"
+                        :items="WListExpand.itemsObjLarge"
+                        :itemBackgroundColorActive="'#78909C'"
+                    >
+                        <template v-slot:header>
+                            <div style="display:flex; align-items:center; padding:10px 15px; font-size:0.9rem; color:#fff; background:#455A64;">
+                                Header
+                            </div>
+                        </template>
+                        <template v-slot:footer>
+                            <div style="display:flex; align-items:center; padding:10px 15px; font-size:0.9rem; color:#fff; background:#455A64;">
+                                Footer
+                            </div>
+                        </template>
+                    </w-list-expand>
+                </div>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+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 WListExpand from './components/WListExpand.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WButtonCircle,
+        WIcon,
+        WListExpand,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            mdiPencilOutline,
+            mdiLightbulbOnOutline,
+            'WListExpand': {
+                'itemsObj': [
+                    {
+                        text: 'Real-Time',
+                        icon: mdiStackOverflow,
+                        dsp: '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.',
+                    },
+                    {
+                        text: 'Audience',
+                        icon: mdiBookMusicOutline,
+                        dsp: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                    },
+                    {
+                        text: 'Conversions',
+                        icon: mdiCharity,
+                        dsp: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                    },
+                    {
+                        text: 'Management',
+                        icon: mdiLightbulbGroupOutline,
+                        dsp: '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.',
+                    },
+                    {
+                        text: 'Settings',
+                        icon: mdiMessageCogOutline,
+                        dsp: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                    },
+                    {
+                        text: 'Actions',
+                        icon: mdiGestureDoubleTap,
+                        dsp: 'Aliquam faucibus ipsum quis massa facilisis, ac sollicitudin lectus volutpat.',
+                    },
+                ],
+                'itemsObjLarge': [
+                    {
+                        text: 'Real-Time-1',
+                        icon: mdiStackOverflow,
+                        dsp: '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.',
+                    },
+                    {
+                        text: 'Audience-1',
+                        icon: mdiBookMusicOutline,
+                        dsp: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                    },
+                    {
+                        text: 'Conversions-1',
+                        icon: mdiCharity,
+                        dsp: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                    },
+                    {
+                        text: 'Management-1',
+                        icon: mdiLightbulbGroupOutline,
+                        dsp: '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.',
+                    },
+                    {
+                        text: 'Settings-1',
+                        icon: mdiMessageCogOutline,
+                        dsp: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                    },
+                    {
+                        text: 'Actions-1',
+                        icon: mdiGestureDoubleTap,
+                        dsp: 'Aliquam faucibus ipsum quis massa facilisis, ac sollicitudin lectus volutpat.',
+                    },
+                    {
+                        text: 'Real-Time-2',
+                        icon: mdiStackOverflow,
+                        dsp: 'Donec sagittis hendrerit sapien at varius. Donec semper massa eget neque consequat, quis elementum nisi venenatis. Sed sed libero vitae eros rutrum dapibus a eget neque.',
+                    },
+                    {
+                        text: 'Audience-2',
+                        icon: mdiBookMusicOutline,
+                        dsp: 'Nam facilisis, felis ac pellentesque ultrices, ligula lacus lobortis mauris, sed elementum orci orci ac urna. Ut sit amet ipsum dapibus.',
+                    },
+                    {
+                        text: 'Conversions-2',
+                        icon: mdiCharity,
+                        dsp: 'Placerat libero sed, commodo purus. Donec suscipit nibh a lobortis varius. Nullam quis velit dignissim ligula luctus rutrum. In viverra viverra pellentesque.',
+                    },
+                    {
+                        text: 'Management-2',
+                        icon: mdiLightbulbGroupOutline,
+                        dsp: 'Ut iaculis sapien id arcu ornare sodales. Pellentesque faucibus ipsum a odio pharetra tincidunt. Mauris molestie consequat neque a vestibulum.',
+                    },
+                    {
+                        text: 'Settings-2',
+                        icon: mdiMessageCogOutline,
+                        dsp: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
+                    },
+                    {
+                        text: 'Actions-2',
+                        icon: mdiGestureDoubleTap,
+                        dsp: 'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus metus lectus, tincidunt id mi id, accumsan imperdiet ante.',
+                    },
+                ],
+                'itemsObjForKey': [
+                    {
+                        name: 'Real-Time',
+                        path: mdiStackOverflow,
+                        dsp: '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.',
+                    },
+                    {
+                        name: 'Audience',
+                        path: mdiBookMusicOutline,
+                        dsp: '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',
+                        path: mdiCharity,
+                        dsp: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                    },
+                    {
+                        name: 'Management',
+                        path: mdiLightbulbGroupOutline,
+                        dsp: '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',
+                        path: mdiMessageCogOutline,
+                        dsp: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                    },
+                    {
+                        name: 'Actions',
+                        path: mdiGestureDoubleTap,
+                        dsp: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
+                    },
+                ],
+                'itemActive': {
+                    text: 'Audience',
+                    icon: mdiBookMusicOutline,
+                    dsp: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                },
+                'itemActiveMulti': [
+                    {
+                        text: 'Audience',
+                        icon: mdiBookMusicOutline,
+                        dsp: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                    }
+                ],
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWListVertical.vue

@@ -467,6 +467,7 @@ export default {
                 'itemActive': {
                     text: 'Audience',
                     icon: mdiBookMusicOutline,
+                    type: 'Default',
                 },
             },
             'actions': [

package/src/components/WComponentVue.vue

@@ -26,6 +26,8 @@ import WImageCascadingDyn from './WImageCascadingDyn.vue'
 import WImageViewerDyn from './WImageViewerDyn.vue'
 import WJsonView from './WJsonView.vue'
 import WLeafletVueDyn from './WLeafletVueDyn.vue'
+import WListExpand from './WListExpand.vue'
+import WListExpandItem from './WListExpandItem.vue'
 import WListVertical from './WListVertical.vue'
 import WListVerticalItem from './WListVerticalItem.vue'
 import WPanelBulge from './WPanelBulge.vue'
@@ -95,6 +97,8 @@ let WComponentVue = {
         Vue.component('w-image-viewer-dyn', WImageViewerDyn)
         Vue.component('w-json-view', WJsonView)
         Vue.component('w-leaflet-vue-dyn', WLeafletVueDyn)
+        Vue.component('w-list-expand', WListExpand)
+        Vue.component('w-list-expand-item', WListExpandItem)
         Vue.component('w-list-vertical', WListVertical)
         Vue.component('w-list-vertical-item', WListVerticalItem)
         Vue.component('w-panel-bulge', WPanelBulge)

package/src/components/WImageCascadingDyn.vue

@@ -37,17 +37,25 @@
                     </div>
 
                     <div style="background:rgba(0,0,0,0.65); padding:5px;">
-                        <div style="font-size:0.8rem; color:#fff;">{{img.name}}</div>
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.8rem; color:#fff;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.name"
+                        >
                     </div>
 
                     <div style="background:rgba(200,200,200,0.5); padding:3px 5px;">
-                            <input
-                                type="text"
-                                class="inp"
-                                _spellcheck="false"
-                                readonly
-                                :value="img.src"
-                            >
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.7rem; opacity:0.75;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.src"
+                        >
                     </div>
 
                 </div>
@@ -65,6 +73,7 @@ import map from 'lodash/map'
 import get from 'lodash/get'
 import times from 'lodash/times'
 import size from 'lodash/size'
+import isNumber from 'lodash/isNumber'
 import importResources from 'wsemi/src/importResources.mjs'
 import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
 import ispint from 'wsemi/src/ispint.mjs'
@@ -93,6 +102,7 @@ function getFileName(str) {
  * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
  * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]
  * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300
+ * @vue-prop {Number} [imageWidthSoft=null] 輸入自動計算最小需滿足的圖片寬度數字，單位為px，預設null
  * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null
  * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15
  * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}
@@ -124,6 +134,10 @@ export default {
             type: Number,
             default: 300,
         },
+        imageWidthSoft: {
+            type: Number,
+            default: null,
+        },
         colNum: {
             type: Number,
             default: null,
@@ -198,7 +212,6 @@ export default {
             return ''
         },
 
-
         changeStyle: function() {
             // console.log('computed changeStyle')
 
@@ -379,8 +392,22 @@ export default {
             //uesImageWidth, colNum
             let uesImageWidth = null
             let colNum = null
-            if (ispint(vo.colNum)) {
-                //優先使用colNum計算imageWidth
+            if (isNumber(vo.imageWidthSoft) && vo.imageWidthSoft > 0) {
+                // console.log('優先使用imageWidthSoft計算colNum與imageWidth')
+
+                //colNum
+                colNum = (vo.widthPanel + vo.space) / (vo.imageWidthSoft + vo.space)
+                colNum = Math.floor(colNum)
+                colNum = Math.max(colNum, 1)
+                // console.log('colNum', colNum)
+
+                //uesImageWidth
+                uesImageWidth = (vo.widthPanel - vo.space * (colNum - 1)) / colNum
+                // console.log('uesImageWidth', uesImageWidth)
+
+            }
+            else if (ispint(vo.colNum)) {
+                // console.log('次先使用colNum計算imageWidth')
 
                 //colNum
                 colNum = cint(vo.colNum)
@@ -390,7 +417,8 @@ export default {
                 uesImageWidth = Math.floor(uesImageWidth)
 
             }
-            else if (vo.imageWidth > 0) {
+            else if (isNumber(vo.imageWidth) && vo.imageWidth > 0) {
+                // console.log('最後使用imageWidth計算colNum')
 
                 //uesImageWidth
                 uesImageWidth = vo.imageWidth
@@ -404,7 +432,7 @@ export default {
 
             }
             else {
-                console.log('invalid colNum or imageWidth')
+                console.log('invalid colNum or imageWidth or imageWidthSoft', vo.colNum, vo.imageWidth, vo.imageWidthSoft)
                 colNum = 4
                 uesImageWidth = 300
             }
@@ -567,9 +595,7 @@ export default {
 
 <style scoped>
 .inp {
-    opacity: 0.75;
     font: inherit;
-    font-size: 0.7rem;
     height: 1rem;
     line-height: 1rem;
     width: 100%;