w-component-vue 2.1.57

package/src/AppZoneWPopupEditText.vue

@@ -0,0 +1,249 @@
+<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-popup-edit-text</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'default'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'no title'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="''"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'title & titleColor & titleFontSize & headerBackgroundColor'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="'Information'"
+                        :titleColor="'white'"
+                        :titleFontSize="'1rem'"
+                        :headerBackgroundColor="'pink accent-4'"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'title & contentIcon & contentIconColor & contentIconSize'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="'Configure your information'"
+                        :contentIcon="'fab fa-buffer'"
+                        :contentIconColor="'pink'"
+                        :contentIconSize="22"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'title & saveBtnText & saveBtnTextColor & saveBtnTextColorHover & saveBtnIconColor & saveBtnIconColorHover & saveBtnIconRippleColor & saveBtnBackgroundColor & saveBtnBackgroundColorHover'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="'Configure your information'"
+                        :saveBtnText="'儲存'"
+                        :saveBtnTextColor="'pink darken-1'"
+                        :saveBtnTextColorHover="'pink darken-3'"
+                        :saveBtnIconColor="'pink darken-1'"
+                        :saveBtnIconColorHover="'pink darken-3'"
+                        :saveBtnIconRippleColor="'rgba(200, 200, 200, 0.5)'"
+                        :saveBtnBackgroundColor="'white'"
+                        :saveBtnBackgroundColorHover="'pink lighten-5'"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'title & inputTextColor & contentIconColor & contentBackgroundColor & inputTextBottomLineBorderColor & inputTextBottomLineBorderColorHover & inputTextBottomLineBorderColorFocus'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="'Configure your information'"
+                        :inputTextColor="'white'"
+                        :contentIconColor="'white'"
+                        :contentBackgroundColor="'orange'"
+                        :inputTextBottomLineBorderColor="'rgba(255,255,255,0.6)'"
+                        :inputTextBottomLineBorderColorHover="'rgba(255,255,255,0.8)'"
+                        :inputTextBottomLineBorderColorFocus="'rgba(255,255,255,1)'"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'title & footerBackgroundColor'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :title="'Configure your information'"
+                        :footerBackgroundColor="'brown lighten-1'"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'minWidthForValue'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :minWidthForValue="300"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'minWidthForPopup'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #999;">
+
+                    <w-popup-edit-text
+                        :minWidthForPopup="500"
+                        v-model="WPopupEditText.text"
+                    ></w-popup-edit-text>
+
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-popup-edit-text'"
+                    :casename="'in table'"
+                ></demolink>
+
+                <table>
+                    <tbody>
+                        <tr :key="'rk-'+rk" v-for="(r,rk) in WPopupEditText.mat">
+                            <td style="padding:5px; border:1px solid #ddd;" :key="'ck-'+ck" v-for="(c,ck) in r">
+
+                                <w-popup-edit-text
+                                    :title="'Edit Cell'"
+                                    v-model="WPopupEditText.mat[rk][ck]"
+                                ></w-popup-edit-text>
+
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WPopupEditText from './components/WPopupEditText.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WPopupEditText,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WPopupEditText': {
+                'text': 'click to edit string',
+                'mat': [['r1c1', 'r1c2', 'r1c3'], ['r2c1', 'r2c2', 'r2c3']],
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWProgressBar.vue

@@ -0,0 +1,356 @@
+<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-progress-bar</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'value=0 (waiting)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueWaiting"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'value=100 (finish)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueFinish"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'decimal'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :decimal="0"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'title'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :title="WProgressBar.title"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'title & titleTextColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :title="WProgressBar.title"
+                    :titleTextColor="'light-green darken-1'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'title & titleTextFontSize'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :title="WProgressBar.title"
+                    :titleTextFontSize="'1rem'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'height'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :height="10"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'height & borderRadius'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :height="10"
+                    :borderRadius="0"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'progColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :progColor="'orange lighten-1'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'progColor & progBackgroundColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :progColor="'orange lighten-1'"
+                    :progBackgroundColor="'orange lighten-5'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'iconSize'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueFinish"
+                    :iconSize="16"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'iconWaiting (fontawesome)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueWaiting"
+                    :iconWaiting="'fas fa-shoe-prints'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'iconWaitingColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueWaiting"
+                    :iconWaitingColor="'light-blue accent-2'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'enableIconWaiting (no iconWaiting)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueWaiting"
+                    :enableIconWaiting="false"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'iconFinish (fontawesome)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueFinish"
+                    :iconFinish="'fas fa-check-circle'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'iconFinishColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueFinish"
+                    :iconFinishColor="'lime accent-4'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'enableIconFinish (no iconFinish)'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.valueFinish"
+                    :enableIconFinish="false"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'valueTextColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :valueTextColor="'light-green darken-1'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'valueTextFontSize'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :value="WProgressBar.value"
+                    :valueTextFontSize="'0.7rem'"
+                ></w-progress-bar>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WProgressBar from './components/WProgressBar.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WProgressBar,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WProgressBar': {
+                'title': 'uploading file...',
+                'value': 25,
+                'valueWaiting': 0,
+                'valueFinish': 100,
+            },
+            'actions': [
+            ],
+        }
+    },
+    mounted: function() {
+        let vo = this
+        setInterval(function() {
+            vo.WProgressBar.value += 0.1
+            if (vo.WProgressBar.value > 100) {
+                vo.WProgressBar.value = 0
+            }
+            //console.log('vo.WProgressBar.value', vo.WProgressBar.value)
+        }, 10)
+    },
+}
+</script>
+
+<style scoped>
+</style>