w-component-vue 2.1.57

package/src/AppZoneWIconSvg.vue

@@ -0,0 +1,140 @@
+<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')">WIconSvg</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path (mdi-fruit-cherries)'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.mdiFruitCherries"
+                ></w-icon-svg>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path (mdi-graph-outline) & color & colorHover'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.mdiGraphOutline"
+                    :color="'orange darken-3'"
+                    :colorHover="'orange lighten-1'"
+                ></w-icon-svg>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path (mdi-access-point) & size'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.mdiAccessPoint"
+                    :size="64"
+                ></w-icon-svg>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path (mdi-account-badge-horizontal) & timeTransition'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.mdiAccountBadgeHorizontal"
+                    :timeTransition="0.2"
+                ></w-icon-svg>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path & sizeOriginal'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.custom1"
+                    :sizeOriginal="64"
+                ></w-icon-svg>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-icon-svg'"
+                    :casename="'path (use 3 paths) & sizeOriginal'"
+                ></demolink>
+
+                <w-icon-svg
+                    :path="WIconSvg.custom2"
+                    :sizeOriginal="60"
+                ></w-icon-svg>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WIconSvg from './components/WIconSvg.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WIconSvg,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WIconSvg': {
+                'mdiFruitCherries': 'M16 13H15.5C14.8 11.7 14.3 10 13.8 8.3L14.7 9.2C17.4 11.3 19.8 10.9 19.8 10.9S20.5 7.1 17.8 5.1C15.5 3.3 13.4 3.3 12.8 3.4C12.7 2.8 12.7 2.3 12.6 1.9L11.2 2C11.2 5.2 8.5 11.1 7.6 13C5.6 13.2 4 14.9 4 17C4 19.2 5.8 21 8 21C9.1 21 10 20.6 10.7 19.9C10.3 19 10 18 10 17S10.3 15 10.7 14.1C10.3 13.7 9.7 13.4 9.2 13.2C9.9 11.7 11.1 9 11.9 6.4C12.3 8.7 13.1 11.4 14.1 13.5C12.9 14.2 12 15.5 12 17C12 19.2 13.8 21 16 21S20 19.2 20 17 18.2 13 16 13M8 15.5C7.2 15.5 6.5 16.2 6.5 17H5.5C5.5 15.6 6.6 14.5 8 14.5V15.5M16 15.5C15.2 15.5 14.5 16.2 14.5 17H13.5C13.5 15.6 14.6 14.5 16 14.5V15.5Z',
+                'mdiGraphOutline': 'M19.5 17C19.36 17 19.24 17 19.11 17.04L17.5 13.8C17.95 13.35 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.61 9.5 15.5 9.5 15.35 9.54L13.74 6.3C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.2 9.79 5.84 10.26 6.29L8.65 9.54C8.5 9.5 8.39 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.04 13.34 6.5 13.79L4.89 17.04C4.76 17 4.64 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.63 14.46L10.26 17.71C9.79 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.8C10.45 13.35 10.75 12.71 10.75 12C10.75 11.3 10.46 10.67 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7C12.13 7 12.26 7 12.39 6.96L14 10.21C13.54 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.13 14.46L17.76 17.71C17.29 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17M4.5 20.5C3.95 20.5 3.5 20.05 3.5 19.5S3.95 18.5 4.5 18.5 5.5 18.95 5.5 19.5 5.05 20.5 4.5 20.5M13 19.5C13 20.05 12.55 20.5 12 20.5S11 20.05 11 19.5 11.45 18.5 12 18.5 13 18.95 13 19.5M7.25 12C7.25 11.45 7.7 11 8.25 11S9.25 11.45 9.25 12 8.8 13 8.25 13 7.25 12.55 7.25 12M11 4.5C11 3.95 11.45 3.5 12 3.5S13 3.95 13 4.5 12.55 5.5 12 5.5 11 5.05 11 4.5M14.75 12C14.75 11.45 15.2 11 15.75 11S16.75 11.45 16.75 12 16.3 13 15.75 13 14.75 12.55 14.75 12M19.5 20.5C18.95 20.5 18.5 20.05 18.5 19.5S18.95 18.5 19.5 18.5 20.5 18.95 20.5 19.5 20.05 20.5 19.5 20.5Z',
+                'mdiAccessPoint': 'M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z',
+                'mdiAccountBadgeHorizontal': 'M22,4H14V7H10V4H2A2,2 0 0,0 0,6V20A2,2 0 0,0 2,22H22A2,2 0 0,0 24,20V6A2,2 0 0,0 22,4M8,9A2,2 0 0,1 10,11A2,2 0 0,1 8,13A2,2 0 0,1 6,11A2,2 0 0,1 8,9M12,17H4V16C4,14.67 6.67,14 8,14C9.33,14 12,14.67 12,16V17M20,18H14V16H20V18M20,14H14V12H20V14M20,10H14V8H20V10M13,6H11V2H13V6Z',
+                'mdiAccountCardDetailsOutline': 'M22,3H2C0.91,3.04 0.04,3.91 0,5V19C0.04,20.09 0.91,20.96 2,21H22C23.09,20.96 23.96,20.09 24,19V5C23.96,3.91 23.09,3.04 22,3M22,19H2V5H22V19M14,17V15.75C14,14.09 10.66,13.25 9,13.25C7.34,13.25 4,14.09 4,15.75V17H14M9,7A2.5,2.5 0 0,0 6.5,9.5A2.5,2.5 0 0,0 9,12A2.5,2.5 0 0,0 11.5,9.5A2.5,2.5 0 0,0 9,7M14,7V8H20V7H14M14,9V10H20V9H14M14,11V12H18V11H14',
+                'custom1': 'M58.67,0H5.33A5.35,5.35,0,0,0,0,5.33v40a5.35,5.35,0,0,0,5.33,5.34H26.67v7.94h-8a2.67,2.67,0,0,0,0,5.34H45.33a2.67,2.67,0,0,0,0-5.34h-8V50.67H58.67A5.35,5.35,0,0,0,64,45.33v-40A5.35,5.35,0,0,0,58.67,0ZM32,48a2.67,2.67,0,1,1,2.67-2.67A2.68,2.68,0,0,1,32,48Zm6.67-1.34A1.33,1.33,0,1,1,40,45.28,1.32,1.32,0,0,1,38.67,46.61Zm5.33,0a1.33,1.33,0,1,1,1.33-1.33A1.31,1.31,0,0,1,44,46.61ZM58.67,40H5.33V5.33H58.67Z',
+                'custom2': [
+                    'M40.076 29.153h-7.142a3.995 3.995 0 0 0-2.858-2.858V16.153a1 1 0 1 0-2 0v10.142c-1.72.447-3 1.999-3 3.858 0 2.206 1.794 4 4 4 1.858 0 3.411-1.28 3.858-3h7.142a1 1 0 1 0 0-2zm-11 3c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z',
+                    'M50.188 9.764l4.096 4.096a1 1 0 0 0 1.414 0c3.167-3.166 3.167-8.319 0-11.485s-8.319-3.166-11.485 0a.997.997 0 0 0 0 1.414l4.561 4.561-1.699 1.699c-4.78-4.284-11.089-6.896-17.998-6.896s-13.218 2.612-17.998 6.896l-1.7-1.699 4.561-4.561a.997.997 0 0 0 0-1.414c-3.166-3.166-8.318-3.166-11.485 0s-3.167 8.319 0 11.485a1 1 0 0 0 1.414 0l4.096-4.096 1.676 1.676c-4.679 4.857-7.565 11.453-7.565 18.713 0 9.898 5.357 18.564 13.321 23.265l-3.028 3.028a.999.999 0 1 0 1.414 1.414l3.45-3.45c3.578 1.754 7.597 2.743 11.843 2.743s8.265-.989 11.843-2.743l3.45 3.45a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-3.028-3.028c7.964-4.701 13.321-13.367 13.321-23.265 0-7.26-2.886-13.856-7.565-18.713l1.677-1.676zm4.095-5.975c2.146 2.146 2.362 5.502.649 7.893L46.391 3.14a6.13 6.13 0 0 1 7.892.649zM3.22 11.681c-1.713-2.39-1.497-5.746.649-7.892s5.502-2.361 7.892-.649L3.22 11.681zm25.856 43.472c-13.785 0-25-11.215-25-25s11.215-25 25-25 25 11.215 25 25-11.214 25-25 25z',
+                    'M29.076 10.032a1 1 0 0 0 1-1v-1a1 1 0 1 0-2 0v1a1 1 0 0 0 1 1zM29.076 50.032a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1zM50.076 31.032h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zM8.076 29.032h-1a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM43.926 13.768l-.707.707a.999.999 0 1 0 1.414 1.414l.707-.707a.999.999 0 1 0-1.414-1.414zM13.52 44.174l-.707.707a.999.999 0 1 0 1.414 1.414l.707-.707a.999.999 0 1 0-1.414-1.414zM44.633 44.174a.999.999 0 1 0-1.414 1.414l.707.707a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-.707-.707zM14.227 13.768a.999.999 0 1 0-1.414 1.414l.707.707a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-.707-.707z',
+                ],
+            },
+            'actions': [
+                {
+                    'mode': 'elehover',
+                    'selector': 'svg'
+                }
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWImageCascadingDyn.vue

@@ -0,0 +1,140 @@
+<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-image-cascading-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//github.com/fengyuanchen/fooderjs" target="_blank" rel="noreferrer noopener">Viewer.js</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//fengyuanchen.github.io/fooderjs/" target="_blank" rel="noreferrer noopener">Viewer.js examples</a>
+        </div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-cascading-dyn'"
+                    :casename="'default(imageWidth=300)'"
+                ></demolink>
+
+                <w-image-cascading-dyn
+                    :images="WImageCascadingDyn.opt1.images"
+                    :imageStyle="WImageCascadingDyn.opt1.imageStyle"
+                    :opt="WImageCascadingDyn.opt1.opt"
+                ></w-image-cascading-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-cascading-dyn'"
+                    :casename="'imageWidth'"
+                ></demolink>
+
+                <div style="padding:5px 0px; font-size:0.9rem;">
+                    colNum=(645-3*15)/150=4
+                </div>
+
+                <w-image-cascading-dyn
+                    style="width:645px;"
+                    :imageWidth="150"
+                    :images="WImageCascadingDyn.opt1.images"
+                    :imageStyle="WImageCascadingDyn.opt1.imageStyle"
+                    :opt="WImageCascadingDyn.opt1.opt"
+                ></w-image-cascading-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-cascading-dyn'"
+                    :casename="'colNum'"
+                ></demolink>
+
+                <w-image-cascading-dyn
+                    style="max-width:1200px;"
+                    :colNum="5"
+                    :images="WImageCascadingDyn.opt1.images"
+                    :imageStyle="WImageCascadingDyn.opt1.imageStyle"
+                    :opt="WImageCascadingDyn.opt1.opt"
+                ></w-image-cascading-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-cascading-dyn'"
+                    :casename="'arrangeWhenFinish'"
+                ></demolink>
+
+                <w-image-cascading-dyn
+                    style="max-width:1200px;"
+                    :arrangeWhenFinish="true"
+                    :images="WImageCascadingDyn.opt1.images"
+                    :imageStyle="WImageCascadingDyn.opt1.imageStyle"
+                    :opt="WImageCascadingDyn.opt1.opt"
+                ></w-image-cascading-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WImageCascadingDyn from './components/WImageCascadingDyn.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WImageCascadingDyn,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WImageCascadingDyn': {
+                'opt1': {
+                    images: [
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/001.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/002.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/003.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/004.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/005.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/006.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/007.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/008.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/009.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/010.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/011.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/012.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/013.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/014.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/food/015.jpg',
+                    ],
+                    imageStyle: { },
+                    opt: {},
+                },
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWImageViewerDyn.vue

@@ -0,0 +1,106 @@
+<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-image-viewer-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//github.com/fengyuanchen/viewerjs" target="_blank" rel="noreferrer noopener">Viewer.js</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//fengyuanchen.github.io/viewerjs/" target="_blank" rel="noreferrer noopener">Viewer.js examples</a>
+        </div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-viewer-dyn'"
+                    :casename="'one image'"
+                ></demolink>
+
+                <w-image-viewer-dyn
+                    :images="WImageViewerDyn.opt1.images"
+                    :imageStyle="WImageViewerDyn.opt1.imageStyle"
+                    :opt="WImageViewerDyn.opt1.opt"
+                ></w-image-viewer-dyn>
+
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-image-viewer-dyn'"
+                    :casename="'multiple image with navbar'"
+                ></demolink>
+
+                <w-image-viewer-dyn
+                    :images="WImageViewerDyn.opt2.images"
+                    :imageStyle="WImageViewerDyn.opt2.imageStyle"
+                    :opt="WImageViewerDyn.opt2.opt"
+                    :multiple="true"
+                ></w-image-viewer-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WImageViewerDyn from './components/WImageViewerDyn.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WImageViewerDyn,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WImageViewerDyn': {
+                'opt1': {
+                    images: [
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/001.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/002.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/003.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/004.jpg',
+                    ],
+                    imageStyle: {
+                        maxWidth: '300px',
+                        maxHeight: '300px',
+                    },
+                    opt: {},
+                },
+                'opt2': {
+                    images: [
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/005.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/006.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/007.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/img/view/008.jpg',
+                    ],
+                    imageStyle: {
+                        maxWidth: '300px',
+                        maxHeight: '300px',
+                    },
+                    opt: {},
+                },
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWJsonView.vue

@@ -0,0 +1,222 @@
+<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-json-view</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :data="WJsonView.data1"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'valueStyleBreakAll'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :valueStyleBreakAll="true"
+                    :data="WJsonView.data2"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'viewHeightMax'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="250"
+                    :data="WJsonView.data3"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'filterKeywords & searchEmpty'"
+                ></demolink>
+
+                <div style="margin-bottom:10px;">
+                    <span style="padding-right:10px;">Search :</span>
+                    <input
+                        style="padding:2px 15px; color:#666; border:1px solid #fca; border-radius:30px; outline:none;"
+                        v-model="WJsonView.keywords"
+                    />
+                </div>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :filterKeywords="WJsonView.keywords"
+                    :searchEmpty="'There are no items to show...'"
+                    :data="WJsonView.data3"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'iconColor & keyColor & keyNumbersColor & numColor & strColor & bolColor & funColor'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :iconColor="'#aaa'"
+                    :keyColor="'#f6a'"
+                    :keyNumbersColor="'#f26'"
+                    :numColor="'#00f'"
+                    :strColor="'#bbb'"
+                    :bolColor="'#c5f'"
+                    :funColor="'#fa6'"
+                    :data="WJsonView.data1"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'large data (100,000 lines)'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :data="WJsonView.data4"
+                ></w-json-view>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WJsonView from './components/WJsonView.vue'
+
+// let data = (function(n) {
+//     n /= 200
+//     let obj = {
+//         ph1_a: 123,
+//         ph1_b: 45.67,
+//         ph1_c: '123.456',
+//         ph1_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.',
+//         ph1_e: true,
+//         ph1_g: function() {},
+//         ph1_h: [],
+//         ph1_j: {},
+//         ph1_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} },
+//         ph1_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', true, false, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} }],
+//         ph1_z: {
+//             ph2_a: 123,
+//             ph2_b: 45.67,
+//             ph2_c: '123.456',
+//             ph2_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.',
+//             ph2_e: true,
+//             ph2_g: function() {},
+//             ph2_h: [],
+//             ph2_j: {},
+//             ph2_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} },
+//             ph2_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', true, false, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} }],
+//             ph2_z: {
+//                 ph3_a: 123,
+//                 ph3_b: 45.67,
+//                 ph3_c: '123.456',
+//                 ph3_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.',
+//                 ph3_e: true,
+//                 ph3_g: function() {},
+//                 ph3_h: [],
+//                 ph3_j: {},
+//                 ph3_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} },
+//                 ph3_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', true, false, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} }],
+//                 ph3_z: {
+//                     ph4_a: 123,
+//                     ph4_b: 45.67,
+//                     ph4_c: '123.456',
+//                     ph4_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.',
+//                     ph4_e: true,
+//                     ph4_g: function() {},
+//                     ph4_h: [],
+//                     ph4_j: {},
+//                     ph4_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} },
+//                     ph4_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', true, false, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: true, f: [], g: {} }],
+//                     ph4_z: {
+//                         ph5_a: 123,
+//                         ph5_b: 45.67,
+//                         ph5_c: '123.456',
+//                         ph5_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.',
+//                         ph5_e: true,
+//                         ph5_f: false,
+//                         ph5_g: function() {},
+//                         ph5_h: [],
+//                         ph5_j: {},
+//                         ph5_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', true, false, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx' }],
+//                     },
+//                 },
+//             },
+//         },
+//     }
+//     let r = []
+//     for (let i = 0; i < n; i++) {
+//         r.push(obj)
+//     }
+//     return r
+// })(100)
+// console.log(JSON.stringify(data))
+
+export default {
+    components: {
+        demolink,
+        WJsonView,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WJsonView': {
+                'keywords': 'pow ci uadn',
+                'data1': { 'squadName': 'Super hero squad', 'fun': function() {}, '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', 'fun': function() {}, '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'] }] },
+                'data3': ['squadName', 123, 45.678, 'Super hero squad', function() { }, { 'homeTown': 'Metro City', 'formed': 2016, 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'], 'members': { 'name': 'Molecule Man', 'age': 29, 'secretIdentity': 'Dan Jukes' } }],
+                'data4': (function(a) {
+                    a /= 200; a = Math.max(a, 1); let b = { ph1_a: 123, ph1_b: 45.67, ph1_c: '123.456', ph1_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph1_e: !0, ph1_g: function() {}, ph1_h: [], ph1_j: {}, ph1_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph1_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph1_z: { ph2_a: 123, ph2_b: 45.67, ph2_c: '123.456', ph2_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph2_e: !0, ph2_g: function() {}, ph2_h: [], ph2_j: {}, ph2_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph2_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph2_z: { ph3_a: 123, ph3_b: 45.67, ph3_c: '123.456', ph3_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph3_e: !0, ph3_g: function() {}, ph3_h: [], ph3_j: {}, ph3_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph3_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph3_z: { ph4_a: 123, ph4_b: 45.67, ph4_c: '123.456', ph4_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph4_e: !0, ph4_g: function() {}, ph4_h: [], ph4_j: {}, ph4_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph4_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph4_z: { ph5_a: 123, ph5_b: 45.67, ph5_c: '123.456', ph5_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph5_e: !0, ph5_f: !1, ph5_g: function() {}, ph5_h: [], ph5_j: {}, ph5_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx' }] } } } } }; let c = []; for (let d = 0; d < a; d++)c.push(b); return c
+                })(100000), //9000000 100000 1000
+            },
+            'actions': [
+            ],
+        }
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>