working on library card and data format

Author: seanyang0813

package-lock.json

@@ -9,7 +9,10 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "tailwindcss": "^1.4.6",
+    "vue": "^2.6.11",
+    "vue-router": "^3.3.4",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

package.json

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: [
+      // ...
+      require('tailwindcss'),
+      require('autoprefixer'),
+      // ...
+    ]
+  }

postcss.config.js

@@ -1,28 +1,18 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <my-header></my-header>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
+  import Header from "./components/Header.vue"
+  export default {
+    components: {
+      myHeader: Header,
+    }
   }
-}
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/App.vue

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

src/assets/css/tailwind.css

@@ -0,0 +1,18 @@
+<template>
+  <div class="p-5 bg-blue-100 flex justify-end">
+    <ul class="flex">
+        <li class="mr-6">
+            <router-link to='/editor' class="text-blue-600 hover:text-blue-800" href="#">Editor</router-link>
+        </li>
+        <li class="mr-6">
+            <router-link to='/library' class="text-blue-600 hover:text-blue-800" href="#">Library</router-link>
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+

src/components/Header.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+      <p>This is an editor</p>    
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+

src/components/editor/Editor.vue

@@ -0,0 +1,25 @@
+<template>
+
+        
+    <div class="max-w-sm rounded overflow-hidden shadow-lg object-center">
+        <div class="px-6 py-4 mt-8 bg-gray-200 ">
+            <div class="font-bold text-xl mb-2">
+                    <p>
+                    <span v-for="(text, index) in doc.queryList" :key=index :class="{'bg-blue-100': text.mutability}">{{text.text}} </span>
+                </p> 
+            </div>
+            <p class="text-gray-700 text-base">
+                {{doc.description}}
+            </p>
+        </div>
+        
+    </div>
+
+</template>
+
+<script>
+export default {
+    props: ["doc"],
+}
+</script>
+

src/components/library/Doc.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="object-center"> 
+      <doc v-for="doc in docs" :key="doc.id" :doc="doc"></doc>   
+  </div>
+</template>
+
+<script>
+import Doc from "./Doc.vue"
+export default {
+  components: {
+    doc: Doc
+  },
+  computed: {
+    docs: function() {
+      return this.$store.getters.docs;
+    }
+  }
+}
+</script>
+

src/components/library/Library.vue

@@ -1,8 +1,19 @@
 import Vue from 'vue'
 import App from './App.vue'
+import "./assets/css/tailwind.css"
+import VueRouter from 'vue-router'
+import {routes} from './route'
+import store from './store/store.js'
+Vue.use(VueRouter);
+const router = new VueRouter({
+  mode: "history",
+  routes
+})
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
+  store,
 }).$mount('#app')

src/main.js

@@ -0,0 +1,7 @@
+import Library from './components/library/Library.vue';
+import Editor from './components/editor/Editor.vue';
+export const routes = [
+    {path: '/', component: Editor},
+    {path: '/library', component: Library},
+    {path: '/editor', component: Editor}
+]

src/route.js

@@ -0,0 +1,49 @@
+const state = {
+    docs: [{
+        queryList: [{text:'sean', mutability:false}, {text:'yang', mutability:true}],
+        description: 'this is something cool',
+        id: 0,
+    },
+    {
+        queryList: [{text:'sean2'}, {text:'yang2'}],
+        description: 'this is something cool2',
+        id: 1,
+    }],
+    queryId: 0,
+    filter: null,
+}
+
+const mutations = {
+    'ADD_QUERY'(state, {newQuery}){
+       state.push(newQuery);
+    },
+}
+
+const actions = {
+    addQuery({commit}, newQuery) {
+        commit('SELL_STOCK', newQuery);
+    }
+}
+
+const getters = {
+    docs (state) {
+        if (state.filter) {
+            return state.docs.filter(doc=>{
+                return state.filter(doc);
+            })
+        } else {
+            return state.docs.map(doc=> doc);
+        }
+    },
+    queryId(state) {
+        return state.queryId;
+    }
+}
+
+export default {
+    state,
+    mutations,
+    actions,
+    getters
+
+}

src/store/modules/docs.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import docs from "./modules/docs";
+
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        docs
+    }
+})

src/store/store.js

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}