w-web-api 1.0.0

package/src/App.vue

@@ -0,0 +1,91 @@
+<template>
+    <div
+        v-domresize
+        @domresize="resize"
+    >
+
+        <transition enter-active-class="fade-enter-active" leave-active-class="fade-leave-active">
+            <Layout v-if="ready"></Layout>
+        </transition>
+
+    </div>
+</template>
+
+<script>
+// import get from 'lodash/get'
+// import find from 'lodash/find'
+import Layout from './components/Layout.vue'
+
+
+export default {
+    components: {
+        Layout,
+    },
+    data: function() {
+        return {
+
+            ready: true,
+
+        }
+    },
+    methods: {
+
+        resize: function(msg) {
+            // console.log('methods resize', msg)
+
+            let vo = this
+
+            //syncHeight
+            vo.$ui.syncHeight()
+
+        },
+
+    },
+}
+</script>
+
+<style>
+html,
+body {
+    font-family: '微軟正黑體', 'Microsoft JhengHei', 'MicrosoftJhengHeiRegular', 'Avenir', Helvetica, Arial, sans-serif;
+    overflow-y: hidden;
+}
+
+div,
+p,
+span,
+a,
+pre,
+input,
+textarea,
+button {
+    font-family: inherit;
+}
+
+.v-application, .v-application--wrap {
+    font-family: inherit;
+}
+
+.v-chip {
+    cursor: inherit;
+}
+
+.fade-enter-active {
+  animation: go 1s;
+}
+
+.fade-leave-active {
+  animation: back 1s;
+}
+
+@keyframes go {
+  from { opacity: 0; }
+  to {opacity: 1;}
+}
+
+@keyframes back {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+</style>

package/src/components/Layout.vue

@@ -0,0 +1,131 @@
+<template>
+    <div style="height:100vh; background:#f5f5f5;">
+
+        <div :style="`height:${heightToolbar}px; padding:0px 10px; display:flex; align-items:center; background:#fff; border-bottom:1px solid #ccc;`">
+
+            <WButtonCircle
+                :icon="'mdi-menu'"
+                :tooltip="'左側選單'"
+                :shadow="false"
+                @click="drawer = !drawer"
+                v-if="false"
+            ></WButtonCircle>
+
+            <WButtonCircle
+                :icon="'mdi-menu'"
+                :tooltip="'cht'"
+                :shadow="false"
+                @click="$store.commit($store.types.UpdateLang, 'cht')"
+                v-if="false"
+            ></WButtonCircle>
+
+            <WButtonCircle
+                :icon="'mdi-menu'"
+                :tooltip="'eng'"
+                :shadow="false"
+                @click="$store.commit($store.types.UpdateLang, 'eng')"
+                v-if="false"
+            ></WButtonCircle>
+
+            <div style="padding-left:10px; font-size:1.2rem; color:#000; white-space:nowrap">
+                <div>{{webName}}</div>
+            </div>
+
+            <div style="width:100%;"></div>
+
+            <div style="padding-right:10px; white-space:nowrap">
+                <WTextSelect
+                    :items="tgLangs"
+                    v-model="tgLangSelect"
+                    @input="changeLang"
+                ></WTextSelect>
+            </div>
+
+        </div>
+
+        <div :style="`height:calc( 100% - ${heightToolbar}px );`">
+            <LayoutContent
+            ></LayoutContent>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+// import cloneDeep from 'lodash/cloneDeep'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import LayoutContent from './LayoutContent.vue'
+
+
+export default {
+    components: {
+        WButtonCircle,
+        WTextSelect,
+        LayoutContent,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            drawer: false, //null,
+
+            tgLangs: [
+                {
+                    id: 'cht',
+                    text: '中文',
+                },
+                {
+                    id: 'eng',
+                    text: 'English',
+                },
+            ],
+            tgLangSelect: {
+                id: 'cht',
+                text: '中文',
+            },
+
+        }
+    },
+    computed: {
+
+        heightToolbar: function() {
+            return get(this, `$store.state.heightToolbar`)
+        },
+
+        kpTexts: function() {
+            return this.$ui.getKpLang()
+        },
+
+        webName: function() {
+            let name = get(this, 'kpTexts.webName', this.kpTexts.waitingData)
+            document.title = name //更換網頁title
+            return name
+        },
+
+        lang: function() {
+            return get(this, `$store.state.lang`)
+        },
+
+        viewState: function() {
+            return get(this, `$store.state.viewState`)
+        },
+
+    },
+    methods: {
+
+        changeLang: function(msg) {
+            // console.log('methods changeLang', msg)
+            let vo = this
+            let lang = msg.id
+            vo.$store.commit(vo.$store.types.UpdateLang, lang)
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/LayoutContent.vue

@@ -0,0 +1,67 @@
+<template>
+    <div style="height:100%;">
+
+        <template v-if="syncState">
+
+            <LayoutContentList></LayoutContentList>
+
+        </template>
+
+        <div
+            style="padding:20px; font-size:0.9rem;"
+            v-else
+        >
+            {{kpTexts.waitingData}}
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+// import map from 'lodash/map'
+// import each from 'lodash/each'
+// import size from 'lodash/size'
+// import cloneDeep from 'lodash/cloneDeep'
+// import isestr from 'wsemi/src/isestr.mjs'
+// import isnum from 'wsemi/src/isnum.mjs'
+// import cdbl from 'wsemi/src/cdbl.mjs'
+// import WPanelBulge from 'w-component-vue/src/components/WPanelBulge.vue'
+// import WButtonChip from 'w-component-vue/src/components/WButtonChip.vue'
+// import WGroupCheck from 'w-component-vue/src/components/WGroupCheck.vue'
+// import WTree from 'w-component-vue/src/components/WTree.vue'
+import LayoutContentList from './LayoutContentList.vue'
+
+
+export default {
+    components: {
+        // WPanelBulge,
+        // WButtonChip,
+        // WGroupCheck,
+        // WTree,
+        LayoutContentList,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        kpTexts: function() {
+            return this.$ui.getKpLang()
+        },
+
+        syncState: function() {
+            return get(this, '$store.state.syncState')
+        },
+
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>