w-component-vue 2.1.57

package/src/AppZoneWAggridVueDyn.vue

@@ -0,0 +1,237 @@
+<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-aggrid-vue-dyn</span></div>
+
+
+        <div style="font-size:0.9rem; margin-bottom:10px;">
+            <span style="margin-right:10px;">Links:</span>
+            <a href="//www.ag-grid.com/" target="_blank" rel="noreferrer noopener">ag-grid</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//www.ag-grid.com/example.php" target="_blank" rel="noreferrer noopener">ag-grid examples</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//www.ag-grid.com/vuejs-grid/" target="_blank" rel="noreferrer noopener">ag-grid-vue</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//github.com/yuda-lyu/w-aggrid-vue" target="_blank" rel="noreferrer noopener">w-aggrid-vue</a>
+            <span style="margin:0px 10px">|</span>
+            <a href="//yuda-lyu.github.io/w-aggrid-vue/examples/app.html" target="_blank" rel="noreferrer noopener">w-aggrid-vue examples</a>
+        </div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-aggrid-vue-dyn'"
+                    :casename="'simple data'"
+                ></demolink>
+
+                <w-aggrid-vue-dyn
+                    style="width:620px;"
+                    ref="rftable"
+                    :opt="WAggridVueDyn.opt1"
+                ></w-aggrid-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-aggrid-vue-dyn'"
+                    :casename="'defCellEditable'"
+                ></demolink>
+
+                <w-aggrid-vue-dyn
+                    style="width:620px;"
+                    ref="rftable"
+                    :opt="WAggridVueDyn.opt2"
+                ></w-aggrid-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-aggrid-vue-dyn'"
+                    :casename="'kpHeadTooltip & kpCellTooltip'"
+                ></demolink>
+
+                <w-aggrid-vue-dyn
+                    style="width:620px;"
+                    ref="rftable"
+                    :opt="WAggridVueDyn.opt3"
+                ></w-aggrid-vue-dyn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-aggrid-vue-dyn'"
+                    :casename="'kpCellEditable & kpRowStyle'"
+                ></demolink>
+
+                <w-aggrid-vue-dyn
+                    style="width:620px;"
+                    ref="rftable"
+                    :opt="WAggridVueDyn.opt4"
+                ></w-aggrid-vue-dyn>
+
+            </div>
+
+
+            <div style="width:100%;" class="bk">
+                <demolink
+                    :kbname="'w-aggrid-vue-dyn'"
+                    :casename="'large data (1,000,000 items)'"
+                ></demolink>
+
+                <w-aggrid-vue-dyn
+                    ref="rftable"
+                    :opt="WAggridVueDyn.opt5"
+                ></w-aggrid-vue-dyn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WAggridVueDyn from './components/WAggridVueDyn.vue'
+
+// let data = (function(m, n) {
+//     let keys = []
+//     for (let j = 1; j <= m; j++) {
+//         keys.push('Col-' + j)
+//     }
+//     let row = {}
+//     for (let j = 1; j <= m; j++) {
+//         row[keys[j - 1]] = 'Cell-' + j
+//     }
+//     let rows = []
+//     for (let i = 1; i <= n; i++) {
+//         let r = JSON.parse(JSON.stringify(row))
+//         for (let j = 1; j <= m; j++) {
+//             r[keys[j - 1]] += '-' + i
+//         }
+//         rows.push(r)
+//     }
+//     return {
+//         keys: keys,
+//         rows: rows,
+//     }
+// })(100, 1000)
+// console.log(JSON.stringify(data))
+
+
+export default {
+    components: {
+        demolink,
+        WAggridVueDyn,
+    },
+    props: {
+    },
+    data: function() {
+        let keys = ['make', 'model', 'price']
+        let rows = [
+            { 'make': 'Toyota', 'model': 'Celica', 'price': 35000 },
+            { 'make': 'Ford', 'model': 'Mondeo', 'price': 32000 },
+            { 'make': 'Porsche', 'model': 'Boxter', 'price': 72000 },
+            { 'make': 'BMW', 'model': 'Sedan', 'price': 66000 },
+            { 'make': 'Nissan', 'model': 'March', 'price': 61000 },
+            { 'make': 'Lexus', 'model': 'RX', 'price': 56000 },
+            { 'make': 'Audi', 'model': 'A6 Allroad', 'price': 45000 },
+            { 'make': 'Mazda', 'model': 'MX-5', 'price': 36000 },
+            { 'make': 'Mercedes-Benz', 'model': 'Cabriolet', 'price': 86000 },
+            { 'make': 'Volkswagen', 'model': 'Beetle', 'price': 68000 },
+            { 'make': 'Honda', 'model': 'City', 'price': 69000 },
+            { 'make': 'Volvo', 'model': 'S60', 'price': 71000 },
+            { 'make': 'Subaru', 'model': 'BRZ', 'price': 48000 }
+        ]
+        return {
+            'WAggridVueDyn': {
+                'opt1': {
+                    keys: keys,
+                    rows: rows,
+                },
+                'opt2': {
+                    keys: keys,
+                    rows: rows,
+                    defCellEditable: true,
+                },
+                'opt3': {
+                    keys: keys,
+                    rows: rows,
+                    kpHeadTooltip: {
+                        make: function(v) {
+                            return (
+                                '<div style="font-size:8pt; font-weight:bold; color:#6fe;">[' + v + ']</div><div>生產製造商</div>'
+                            )
+                        },
+                        model: function(v) {
+                            return (
+                                '<div style="font-size:8pt; font-weight:bold; color:#6fe;">[' + v + ']</div><div>車款型號</div>'
+                            )
+                        },
+                        price: function(v) {
+                            return (
+                                '<div style="font-size:8pt; font-weight:bold; color:#6fe;">[' + v + ']</div><div>虛擬販售價格</div>'
+                            )
+                        }
+                    },
+                    kpCellTooltip: {
+                        make: function(v) {
+                            return (
+                                '<div style="font-size:9pt; color:#ecf;">[生產製造商]</div>' + v
+                            )
+                        },
+                        model: function(v) {
+                            return (
+                                '<div style="font-size:9pt; color:#6f9;">[車款型號]</div>' + v
+                            )
+                        },
+                        price: function(v) {
+                            return (
+                                '<div style="font-size:9pt; color:#fa6;">[虛擬販售價格]</div>' + v
+                            )
+                        }
+                    },
+                },
+                'opt4': {
+                    keys: keys,
+                    rows: rows,
+                    kpCellEditable: {
+                        //default: false
+                        price: true
+                    },
+                    kpRowStyle: {
+                        price: function(v) {
+                            if (v >= 70000) {
+                                return { background: '#fac' }
+                            }
+                            return {}
+                        }
+                    },
+                },
+                'opt5': (function(a, b) {
+                    let c = []; for (let d = 1; d <= a; d++)c.push('Col-' + d); let d = {}; for (let e = 1; e <= a; e++)d[c[e - 1]] = 'Cell-' + e; let e = []; for (let f, g = 1; g <= b; g++) {
+                        f = JSON.parse(JSON.stringify(d)); for (let b = 1; b <= a; b++)f[c[b - 1]] += '-' + g; e.push(f)
+                    } return { keys: c, rows: e }
+                })(100, 10000),
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWAlert.vue

@@ -0,0 +1,246 @@
+<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-alert</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'default'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.textSuccess)">Success</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'type infor'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.textInfor,{type:'infor'})">Infor</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'type warning'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.textWarning,{type:'warning'})">Warning</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'type error'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.textError,{type:'error'})">Error</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'position'"
+                ></demolink>
+
+                <v-btn style="margin-right:10px;" depressed small elevation="2" @click="$alert(WAlert.text,{
+                    position:'bottom-right'
+                })">bottom-right</v-btn>
+
+                <v-btn style="margin-right:10px;" depressed small elevation="2" @click="$alert(WAlert.text,{
+                    position:'top-left'
+                })">top-left</v-btn>
+
+                <v-btn style="margin-right:10px;" depressed small elevation="2" @click="$alert(WAlert.text,{
+                    position:'bottom-left'
+                })">bottom-left</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'time (6s)'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    time:6000
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'textColor'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    textColor:'#f52'
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'backgroundColor'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    backgroundColor:'linear-gradient(135deg,rgba(155,255,120,0.4),#fff)'
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'borderWidth'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    borderWidth:15
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'borderColor'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    borderColor:'#9f5'
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'borderRadius'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    borderRadius:0
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'shadowStyle'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    shadowStyle:'0px 3px 1px -2px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 1px 5px 0px rgba(0, 0, 0, 0.07)'
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'icon'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="$alert(WAlert.text,{
+                    icon:WAlert.icon
+                })">Show</v-btn>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-alert'"
+                    :casename="'recive closed event by promise'"
+                ></demolink>
+
+                <v-btn depressed small elevation="2" @click="receiveCloseEvent">Show</v-btn>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WAlert from './components/WAlert.mjs'
+
+
+export default {
+    components: {
+        demolink,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WAlert': {
+                'number': 0,
+                'text': 'Test message',
+                'textSuccess': 'Success message',
+                'textWarning': 'Warging message',
+                'textError': 'Error message',
+                'textInfor': 'Infor message',
+                'textCallAtEnd': 'Waiting to call function',
+                'icon': '<svg style="width:24px; height:24px;" enable-background="new 0 0 512.006 512.006" viewBox="0 0 512.006 512.006" xmlns="http://www.w3.org/2000/svg"><g><path d="m281.491 149.016c-16.652 13.421-40.32 13.421-56.972 0-26.474-21.336-47.818-49.649-48.514-83.94 0-15.467 9.153-28.792 22.341-34.891-8.597-6.398-19.274-10.181-30.841-10.181-28.443 0-51.5 23.022-51.5 51.422 1.003 49.407 34.05 89.537 73.202 118.72 17.634 13.144 41.962 13.144 59.596 0 25.755-19.197 48.865-43.133 61.953-71.33-8.122 11.225-18.245 21.319-29.265 30.2z" fill="#c6e1f2"/><g fill="#ff5cf4"><g><path d="m336.005 212.284c-.002-.133 0 .134 0 0z"/><path d="m458.005 158.003c-12.874 0-24.711 4.543-34 12.116-9.289-7.573-21.126-12.116-34-12.116-29.776 0-54 24.351-54 54.281.699 34.774 20.17 67.932 56.3 95.127 9.332 7.023 20.516 10.536 31.7 10.535 11.184 0 22.368-3.512 31.7-10.536 36.13-27.195 55.601-60.352 56.3-95.126 0-29.93-24.224-54.281-54-54.281zm-26.355 117.449c-4.501 3.388-10.789 3.388-15.291 0-18.053-13.588-39.68-35.594-40.354-63.34.091-7.796 6.336-14.108 13.999-14.108 7.72 0 14 6.36 14 14.177 0 11.046 8.954 20 20 20s20-8.954 20-20c0-7.817 6.28-14.177 14-14.177 7.663 0 13.908 6.313 13.999 14.108-.673 27.746-22.3 49.752-40.353 63.34z"/></g><path d="m512.005 212.284c0 .134.003-.133 0 0z"/></g></g><g fill="#0023c4"><g><path d="m342.005 71.426c0 .135.003-.136 0 0z"/><g><path d="m96.005 71.426c-.003-.136 0 .135 0 0z"/><path d="m270.505.003c-20.208 0-38.484 8.397-51.5 21.878-13.016-13.48-31.292-21.878-51.5-21.878-39.425 0-71.5 32.04-71.5 71.422.995 49.016 29.093 95.879 81.249 134.755 12.292 9.161 27.021 13.742 41.751 13.742s29.459-4.581 41.751-13.742c52.156-38.876 80.254-85.739 81.249-134.755 0-39.382-32.074-71.422-71.5-71.422zm-33.654 174.107c-10.507 7.832-25.185 7.832-35.691 0-29.166-21.74-64.119-57.221-65.154-102.871.102-17.241 14.193-31.235 31.5-31.235 17.369 0 31.5 14.026 31.5 31.266 0 11.046 8.954 20 20 20s20-8.954 20-20c0-17.24 14.131-31.266 31.5-31.266 17.307 0 31.398 13.995 31.5 31.235-1.036 45.65-35.989 81.131-65.155 102.871z"/></g></g><path d="m505.795 382.441c-13.04-25.049-42.742-35.969-70.372-25.483-18.6 7.059-41.761 15.841-68.606 23.085 2.523-11.551 1.392-23.815-3.416-35.467-6.897-16.716-21.07-29.153-38.886-34.123-9.11-2.541-18.996-3.112-29.384-1.698-68.547 9.325-109.359-13.768-145.365-34.141-24.185-13.684-47.029-26.61-73.761-26.61-35 0-61.974 10.913-61.974 10.913-10.542 3.299-16.413 14.52-13.113 25.061 3.299 10.542 14.52 16.411 25.061 13.113 0 0 22.026-9.087 50.026-9.087 16.201 0 32.909 9.454 54.063 21.423 31.658 17.913 73.217 41.434 134.983 41.431 11.143 0 22.954-.767 35.472-2.469 4.888-.666 9.469-.459 13.246.593 4.216 1.176 9.834 4.013 12.655 10.849 2.188 5.302 2.297 10.262.325 14.744-2.419 5.5-7.933 10.056-15.523 12.832-11.284 4.126-26.242 6.575-43.286 6.588-12.936.009-38.527-2.044-54.853-6.334-10.686-2.809-21.619 3.577-24.426 14.26s3.578 21.619 14.26 24.426c30.083 7.657 65.303 7.646 65.583 7.643 77.44-.304 139.777-23.947 181.111-39.634 6.95-2.639 16.336-1.823 20.515 6.202l.183.351c3.752 7.208.99 16.179-6.158 19.998-47.298 25.268-107.339 51.098-194.038 51.098-76.199 0-146.387-29.405-191.849-54.072-19.994-10.849-36.906-13.928-48.264-13.928-10 0-15.147 1.693-15.147 1.693-8.547 2.274-14.853 10.044-14.853 19.307 0 11.046 8.954 20 20 20 1.783 0 6.314-.867 9-.857 5.584.022 16.185 1.345 30.187 8.943 49.533 26.876 126.335 58.914 210.925 58.914 95.524 0 161.22-28.216 212.886-55.817 26.396-14.103 36.62-47.187 22.793-73.747z"/></g></svg>',
+            },
+            'actions': [
+                {
+                    'mode': 'eleclick',
+                    'selector': 'button'
+                }
+            ],
+        }
+    },
+    mounted: function() {
+        this.$alert = WAlert
+    },
+    methods: {
+        receiveCloseEvent: function() {
+            let vo = this
+            vo.WAlert.number += 1
+            let n = vo.WAlert.number
+            vo.$alert(vo.WAlert.textCallAtEnd + ' [' + n + ']')
+                .then(function() {
+                    vo.$alert('Call function ' + '[' + n + ']' + ' at the end')
+                })
+        },
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWBadge.vue

@@ -0,0 +1,180 @@
+<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-badge</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.number"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'badgeAlign'"
+                ></demolink>
+
+                <w-badge
+                    style="margin-right:20px;"
+                    :text="WBadge.textLong"
+                    :badgeAlign="'center'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+                <w-badge
+                    style="margin-right:20px;"
+                    :text="WBadge.textLong"
+                    :badgeAlign="'left'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+                <w-badge
+                    style="margin-right:20px;"
+                    :text="WBadge.textLong"
+                    :badgeAlign="'right'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'textFontSize'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.text"
+                    :textFontSize="'0.9rem'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'backgroundColor'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.text"
+                    :backgroundColor="'purple'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'textColor & backgroundColor'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.text"
+                    :textColor="'orange accent-4'"
+                    :backgroundColor="'orange lighten-5'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'borderRadius'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.text"
+                    :borderRadius="3"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-badge'"
+                    :casename="'borderColor & textColor & backgroundColor'"
+                ></demolink>
+
+                <w-badge
+                    :text="WBadge.text"
+                    :textColor="'orange accent-4'"
+                    :backgroundColor="'orange lighten-5'"
+                    :borderColor="'deep-orange darken-1'"
+                >
+                    <v-chip style="margin:0px;" label>{{WBadge.labelText}}</v-chip>
+                </w-badge>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WBadge from './components/WBadge.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WBadge,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WBadge': {
+                'number': '5',
+                'text': 'A',
+                'textLong': 'A123',
+                'labelText': '測試中文Label',
+            },
+            'actions': [
+                {
+                    'mode': 'eleclick',
+                    'selector': 'span[class="v-chip__content"]'
+                }
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>