├── env.d.ts
├── public
    └── favicon.ico
├── .vscode
    └── extensions.json
├── .prettierrc.json
├── tsconfig.json
├── src
    ├── assets
    │   ├── logo.svg
    │   ├── main.css
    │   └── base.css
    ├── views
    │   ├── AboutView.vue
    │   ├── EventListView.vue
    │   ├── StudentListView.vue
    │   └── EventOrganizerView.vue
    ├── main.ts
    ├── components
    │   ├── icons
    │   │   ├── IconSupport.vue
    │   │   ├── IconTooling.vue
    │   │   ├── IconCommunity.vue
    │   │   ├── IconDocumentation.vue
    │   │   └── IconEcosystem.vue
    │   ├── HelloWorld.vue
    │   ├── StudentCard.vue
    │   ├── EventCard.vue
    │   ├── EventCategories.vue
    │   ├── WelcomeItem.vue
    │   └── TheWelcome.vue
    ├── stores
    │   └── counter.ts
    ├── type.ts
    ├── services
    │   ├── EventService.ts
    │   └── StudentService.ts
    ├── router
    │   └── index.ts
    └── App.vue
├── tsconfig.app.json
├── tsconfig.node.json
├── index.html
├── .eslintrc.cjs
├── .gitignore
├── vite.config.ts
├── db.json
├── package.json
└── README.md


/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lab-vee-se331/331-Lab02-Vue-Vite/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "tabWidth": 2,
5 |   "singleQuote": true,
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | @media (min-width: 1024px) {
 9 |   .about {
10 |     min-height: 100vh;
11 |     display: flex;
12 |     align-items: center;
13 |   }
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | // import './assets/main.css'
 2 | 
 3 | 
 4 | import { createApp } from 'vue'
 5 | import { createPinia } from 'pinia'
 6 | 
 7 | import App from './App.vue'
 8 | import router from './router'
 9 | 
10 | const app = createApp(App)
11 | 
12 | app.use(createPinia())
13 | app.use(router)
14 | 
15 | app.mount('#app')
16 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "composite": true,
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/icons/IconSupport.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node18/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*"
 9 |   ],
10 |   "compilerOptions": {
11 |     "composite": true,
12 |     "module": "ESNext",
13 |     "types": ["node"]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/stores/counter.ts:
--------------------------------------------------------------------------------
 1 | import { ref, computed } from 'vue'
 2 | import { defineStore } from 'pinia'
 3 | 
 4 | export const useCounterStore = defineStore('counter', () => {
 5 |   const count = ref(0)
 6 |   const doubleCount = computed(() => count.value * 2)
 7 |   function increment() {
 8 |     count.value++
 9 |   }
10 | 
11 |   return { count, doubleCount, increment }
12 | })
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <link rel="icon" href="/favicon.ico">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-typescript',
10 |     '@vue/eslint-config-prettier/skip-formatting'
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: 'latest'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     vue(),
10 |   ],
11 |   resolve: {
12 |     alias: {
13 |       '@': fileURLToPath(new URL('./src', import.meta.url))
14 |     }
15 |   },
16 |   server : {
17 |     port : 3000
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
 1 | export interface EventItem {
 2 |     id : number
 3 |     category : string
 4 |     title : string
 5 |     description : string
 6 |     location : string
 7 |     date : string
 8 |     time : string
 9 |     organizer : string
10 | }
11 | 
12 | export interface StudentItem {
13 |     id : number
14 |     studentId : string
15 |     name : string
16 |     surname : string
17 |     gpa : number
18 |     image : string
19 |     penAmount : string
20 |     description : string
21 | }


--------------------------------------------------------------------------------
/src/services/EventService.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import type { AxiosInstance, AxiosResponse } from 'axios'
 3 | import type { EventItem } from '@/type'
 4 | 
 5 | const apiClient: AxiosInstance = axios.create({
 6 |   baseURL: 'http://localhost:3004',
 7 |   withCredentials: false,
 8 |   headers: {
 9 |     Accept: 'application/json',
10 |     'Content-Type': 'application/json'
11 |   }
12 | })
13 | 
14 | export default {
15 |   getEvent(): Promise<AxiosResponse<EventItem[]>> {
16 |     return apiClient.get<EventItem[]>('/events')
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/services/StudentService.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import type { AxiosInstance, AxiosResponse } from 'axios'
 3 | import type { StudentItem } from '@/type'
 4 | 
 5 | const apiClient: AxiosInstance = axios.create({
 6 |   baseURL: 'https://dv-student-backend-2019.appspot.com',
 7 |   withCredentials: false,
 8 |   headers: {
 9 |     Accept: 'application/json',
10 |     'Content-Type': 'application/json'
11 |   }
12 | })
13 | 
14 | export default {
15 |   getEvent(): Promise<AxiosResponse<StudentItem[]>> {
16 |     return apiClient.get<StudentItem[]>('/students')
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 | 
 8 |   font-weight: normal;
 9 | }
10 | 
11 | a,
12 | .green {
13 |   text-decoration: none;
14 |   color: hsla(160, 100%, 37%, 1);
15 |   transition: 0.4s;
16 | }
17 | 
18 | @media (hover: hover) {
19 |   a:hover {
20 |     background-color: hsla(160, 100%, 37%, 0.2);
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   body {
26 |     display: flex;
27 |     place-items: center;
28 |   }
29 | 
30 |   #app {
31 |     display: grid;
32 |     grid-template-columns: 1fr 1fr;
33 |     padding: 0 2rem;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/views/EventListView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import EventCard from '../components/EventCard.vue'
 3 | import type { EventItem } from '@/type'
 4 | import { ref, type Ref } from 'vue'
 5 | import EventService from '@/services/EventService'
 6 | 
 7 | const events: Ref<Array<EventItem>> = ref([])
 8 | 
 9 | EventService.getEvent().then((response) => {
10 |   events.value = response.data
11 |   console.log(events.value)
12 | 
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <h1>Events For Good</h1>
18 |   <main class="events">
19 |     <EventCard v-for="event in events" :key="event.id" :event="event"></EventCard>
20 |   </main>
21 | </template>
22 | 
23 | <style scoped>
24 | .events {
25 |   display: flex;
26 |   flex-direction: column;
27 |   align-items: center;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/views/StudentListView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { StudentItem } from '@/type'
 3 | import { ref, type Ref } from 'vue'
 4 | import StudentService from '@/services/StudentService';
 5 | import StudentCard from '@/components/StudentCard.vue';
 6 | 
 7 | const students: Ref<Array<StudentItem>> = ref([])
 8 | 
 9 | StudentService.getEvent().then((response) => {
10 |   students.value = response.data
11 |   console.log(students.value)
12 | })
13 | </script>
14 | 
15 | <template>
16 |   <h1>Events For Good</h1>
17 |   <main class="events">
18 |     <StudentCard v-for="student in students" :key="student.id" :student="student"></StudentCard>
19 |   </main>
20 | </template>
21 | 
22 | <style scoped>
23 | .events {
24 |   display: flex;
25 |   flex-direction: column;
26 |   align-items: center;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   msg: string
 4 | }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="greetings">
 9 |     <h1 class="green">{{ msg }}</h1>
10 |     <h3>
11 |       You’ve successfully created a project with
12 |       <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
13 |       <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
14 |     </h3>
15 |   </div>
16 | </template>
17 | 
18 | <style scoped>
19 | h1 {
20 |   font-weight: 500;
21 |   font-size: 2.6rem;
22 |   position: relative;
23 |   top: -10px;
24 | }
25 | 
26 | h3 {
27 |   font-size: 1.2rem;
28 | }
29 | 
30 | .greetings h1,
31 | .greetings h3 {
32 |   text-align: center;
33 | }
34 | 
35 | @media (min-width: 1024px) {
36 |   .greetings h1,
37 |   .greetings h3 {
38 |     text-align: left;
39 |   }
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/components/StudentCard.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { defineProps } from 'vue'
 3 | import type { StudentItem } from '@/type';
 4 | 
 5 | const props = defineProps({
 6 |     student: {
 7 |         type: Object as PropType<StudentItem>,
 8 |         required: true,
 9 |     }
10 | });
11 | </script>
12 | 
13 | <template>
14 |     <div class="event-class">
15 |         <div class="event-card">
16 |             <span>Name: {{ student.name }}, Surname: {{ student.surname }}</span>
17 |             <h4>GPA: {{ student.gpa }}</h4>
18 |         </div>
19 |     </div>
20 | </template>
21 | 
22 | <style scoped>
23 | .event-card {
24 |     padding: 20px;
25 |     width: 250px;
26 |     cursor: pointer;
27 |     border: 1px solid #39495c;
28 |     margin-bottom: 18px;
29 | }
30 | 
31 | .event-card:hover {
32 |     transform: scale(1.01);
33 |     box-shadow: 0 3px 12px 0 rgb(0, 0, 0, 0.2);
34 | }
35 | </style>


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import EventListView from '../views/EventListView.vue'
 3 | import AboutView from '../views/AboutView.vue'
 4 | import EventOrganizerView from '../views/EventOrganizerView.vue'
 5 | import StudentListView from "../views/StudentListView.vue"
 6 | const router = createRouter({
 7 |   history: createWebHistory(import.meta.env.BASE_URL),
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'EventList',
12 |       component: EventListView
13 |     },
14 |     {
15 |       path: '/about',
16 |       name: 'about',
17 |       component: AboutView
18 |     },
19 |     {
20 |       path: '/organizer',
21 |       name: 'organizer',
22 |       component: EventOrganizerView
23 |     },
24 |     {
25 |       path: '/student',
26 |       name: 'student',
27 |       component: StudentListView
28 |     },
29 |   ]
30 | })
31 | 
32 | export default router
33 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { RouterLink, RouterView } from 'vue-router'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <header>
 7 |     <nav>
 8 |       <RouterLink to="/">Home</RouterLink>
 9 |       <RouterLink to="/about">About</RouterLink>
10 |     </nav>
11 |   </header>
12 |   <RouterView />
13 | </template>
14 | 
15 | <style>
16 | #app {
17 |   font-family: Avenir, Helvetica, Arial, sans-serif;
18 |   -webkit-font-smoothing: antialiased;
19 |   -moz-osx-font-smoothing: grayscale;
20 |   text-align: center;
21 |   color: #2c3e50;
22 | }
23 | 
24 | nav {
25 |   padding: 30px;
26 | }
27 | 
28 | nav a {
29 |   font-weight: bold;
30 |   color: #2c3e50;
31 | }
32 | 
33 | nav a.router-link-exact-active {
34 |   color: #42b983;
35 | }
36 | 
37 | header {
38 |   line-height: 1.5;
39 |   max-height: 100vh;
40 | }
41 | 
42 | .logo {
43 |   display: block;
44 |   margin: 0 auto 2rem;
45 | }
46 | 
47 | h4 {
48 |   font-size: 20px;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
 1 | <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 2 | <template>
 3 |   <svg
 4 |     xmlns="http://www.w3.org/2000/svg"
 5 |     xmlns:xlink="http://www.w3.org/1999/xlink"
 6 |     aria-hidden="true"
 7 |     role="img"
 8 |     class="iconify iconify--mdi"
 9 |     width="24"
10 |     height="24"
11 |     preserveAspectRatio="xMidYMid meet"
12 |     viewBox="0 0 24 24"
13 |   >
14 |     <path
15 |       d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
16 |       fill="currentColor"
17 |     ></path>
18 |   </svg>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 |     <path
4 |       d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "events": [
 3 |       {
 4 |         "id": 123,
 5 |         "category": "animal welfare",
 6 |         "title": "Cat Adoption Day",
 7 |         "description": "Find your new feline friend at this event.",
 8 |         "location": "Meow Town",
 9 |         "date": "January 28, 2022",
10 |         "time": "12:00",
11 |         "organizer": "Kat Laydee"
12 |       },
13 |       {
14 |         "id": 456,
15 |         "category": "food",
16 |         "title": "Community Gardening",
17 |         "description": "Join us as we tend to the community edible plants.",
18 |         "location": "Flora City",
19 |         "date": "March 14, 2022",
20 |         "time": "10:00",
21 |         "organizer": "Fern Pollin"
22 |       },
23 |       {
24 |         "id": 789,
25 |         "category": "sustainability",
26 |         "title": "Beach Cleanup",
27 |         "description": "Help pick up trash along the shore.",
28 |         "location": "Playa Del Carmen",
29 |         "date": "July 22, 2022",
30 |         "time": "11:00",
31 |         "organizer": "Carey Wales"
32 |       }
33 |     ]
34 |   }


--------------------------------------------------------------------------------
/src/components/icons/IconDocumentation.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
3 |     <path
4 |       d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-real-world",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "concurrently \"json-server --watch db.json --port 3004\" \" vite\" ",
 7 |     "build": "run-p type-check build-only",
 8 |     "preview": "vite preview",
 9 |     "build-only": "vite build",
10 |     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
11 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
12 |     "format": "prettier --write src/"
13 |   },
14 |   "dependencies": {
15 |     "axios": "^1.4.0",
16 |     "json-server": "^0.17.3",
17 |     "pinia": "^2.1.3",
18 |     "vue": "^3.3.4",
19 |     "vue-router": "^4.2.2"
20 |   },
21 |   "devDependencies": {
22 |     "@rushstack/eslint-patch": "^1.2.0",
23 |     "@tsconfig/node18": "^2.0.1",
24 |     "@types/node": "^18.16.17",
25 |     "@vitejs/plugin-vue": "^4.2.3",
26 |     "@vue/eslint-config-prettier": "^7.1.0",
27 |     "@vue/eslint-config-typescript": "^11.0.3",
28 |     "@vue/tsconfig": "^0.4.0",
29 |     "eslint": "^8.39.0",
30 |     "eslint-plugin-vue": "^9.11.0",
31 |     "npm-run-all": "^4.1.5",
32 |     "prettier": "^2.8.8",
33 |     "typescript": "~5.0.4",
34 |     "vite": "^4.3.9",
35 |     "vue-tsc": "^1.6.5"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/EventCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="event-class">
 3 |         <div class="event-card">
 4 | 
 5 |             <span>@{{ event.time }} on {{ event.date }}</span>
 6 |             <h4>{{ event.title }}</h4>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | import type { EventItem } from '@/type';
13 | import type { PropType } from 'vue';
14 | const props = defineProps({
15 |     event: {
16 |         type: Object as PropType<EventItem>
17 |         , require: true
18 |     }
19 | })
20 | </script>
21 | <!-- import { ref } from 'vue'
22 | import { type EventItem } from '@/type';
23 | const event = ref<EventItem>({
24 |     id: 5928101,
25 |     category: 'animal welfare',
26 |     title: 'Cat Adoption Day',
27 |     description: 'Find your new feline friend at this event',
28 |     location: 'Meow Town',
29 |     date: 'January 28, 2002',
30 |     time: '12:00',
31 |     petsAllowed: true,
32 |     organizer: "Kat Laydee"
33 | }) -->
34 | 
35 | <style scoped>
36 | .event-card {
37 |     padding: 20px;
38 |     width: 250px;
39 |     cursor: pointer;
40 |     border: 1px solid #39495c;
41 |     margin-bottom: 18px;
42 | }
43 | 
44 | .event-card:hover {
45 |     transform: scale(1.01);
46 |     box-shadow: 0 3px 12px 0 rgb(0, 0, 0, 0.2);
47 | }
48 | </style>


--------------------------------------------------------------------------------
/src/components/EventCategories.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="event-class">
 3 |         <div class="event-card">
 4 | 
 5 |             <h4>category : {{ event.category }}</h4>
 6 |             <h4>by : {{ event.organizer }}</h4>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | import type { EventItem } from '@/type';
13 | import type { PropType } from 'vue';
14 | const props = defineProps({
15 |     event: {
16 |         type: Object as PropType<EventItem>
17 |         , require: true
18 |     }
19 | })
20 | </script>
21 | <!-- import { ref } from 'vue'
22 | import { type EventItem } from '@/type';
23 | const event = ref<EventItem>({
24 |     id: 5928101,
25 |     category: 'animal welfare',
26 |     title: 'Cat Adoption Day',
27 |     description: 'Find your new feline friend at this event',
28 |     location: 'Meow Town',
29 |     date: 'January 28, 2002',
30 |     time: '12:00',
31 |     petsAllowed: true,
32 |     organizer: "Kat Laydee"
33 | }) -->
34 | 
35 | <style scoped>
36 | .event-card {
37 |     padding: 20px;
38 |     width: 250px;
39 |     cursor: pointer;
40 |     border: 1px solid #39495c;
41 |     margin-bottom: 18px;
42 | }
43 | 
44 | .event-card:hover {
45 |     transform: scale(1.01);
46 |     box-shadow: 0 3px 12px 0 rgb(0, 0, 0, 0.2);
47 | }
48 | 
49 | * {
50 |     text-align: right;
51 | }
52 | </style>


--------------------------------------------------------------------------------
/src/views/EventOrganizerView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | // import TheWelcome from '../components/TheWelcome.vue'
 3 | import EventCategories from '@/components/EventCategories.vue';
 4 | EventCategories
 5 | import type { EventItem } from '@/type';
 6 | 
 7 | import { ref } from 'vue'
 8 | const events = ref<EventItem[]>([
 9 |   {
10 |     id: 5928101,
11 |     category: 'animal welfare',
12 |     title: 'Cat Adoption Day',
13 |     description: 'Find your new feline friend at this event.',
14 |     location: 'Meow Town',
15 |     date: 'January 28, 2s022',
16 |     time: '12:00',
17 |     petsAllowed: true,
18 |     organizer: 'Kat Laydee'
19 |   },
20 |   {
21 |     id: 4582797,
22 |     category: 'food',
23 |     title: 'Community Gardening',
24 |     description: 'Join us as we tend to the community edible plants.',
25 |     location: 'Flora City',
26 |     date: 'March 14, 2022',
27 |     time: '10:00',
28 |     petsAllowed: true,
29 |     organizer: 'Fern Pollin'
30 |   },
31 |   {
32 |     id: 8419988,
33 |     category: 'sustainability',
34 |     title: 'Beach Cleanup',
35 |     description: 'Help pick up trash along the shore.',
36 |     location: 'Playa Del Carmen',
37 |     date: 'July 22, 2022',
38 |     time: '11:00',
39 |     petsAllowed: false,
40 |     organizer: 'Carey Wales'
41 |   }
42 | 
43 | ])
44 | </script>
45 | 
46 | <template>
47 |   <main class="events">
48 |     <!-- <TheWelcome /> -->
49 |     <EventCategories v-for="event in events" :key="event.id" :event="event"></EventCategories>
50 |   </main>
51 | </template>
52 | 
53 | <style scoped>
54 | .events {
55 |   display: flex;
56 |   flex-direction: column;
57 |   align-items: center;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/components/WelcomeItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <i>
 4 |       <slot name="icon"></slot>
 5 |     </i>
 6 |     <div class="details">
 7 |       <h3>
 8 |         <slot name="heading"></slot>
 9 |       </h3>
10 |       <slot></slot>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <style scoped>
16 | .item {
17 |   margin-top: 2rem;
18 |   display: flex;
19 |   position: relative;
20 | }
21 | 
22 | .details {
23 |   flex: 1;
24 |   margin-left: 1rem;
25 | }
26 | 
27 | i {
28 |   display: flex;
29 |   place-items: center;
30 |   place-content: center;
31 |   width: 32px;
32 |   height: 32px;
33 | 
34 |   color: var(--color-text);
35 | }
36 | 
37 | h3 {
38 |   font-size: 1.2rem;
39 |   font-weight: 500;
40 |   margin-bottom: 0.4rem;
41 |   color: var(--color-heading);
42 | }
43 | 
44 | @media (min-width: 1024px) {
45 |   .item {
46 |     margin-top: 0;
47 |     padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
48 |   }
49 | 
50 |   i {
51 |     top: calc(50% - 25px);
52 |     left: -26px;
53 |     position: absolute;
54 |     border: 1px solid var(--color-border);
55 |     background: var(--color-background);
56 |     border-radius: 8px;
57 |     width: 50px;
58 |     height: 50px;
59 |   }
60 | 
61 |   .item:before {
62 |     content: ' ';
63 |     border-left: 1px solid var(--color-border);
64 |     position: absolute;
65 |     left: 0;
66 |     bottom: calc(50% + 25px);
67 |     height: calc(50% - 25px);
68 |   }
69 | 
70 |   .item:after {
71 |     content: ' ';
72 |     border-left: 1px solid var(--color-border);
73 |     position: absolute;
74 |     left: 0;
75 |     top: calc(50% + 25px);
76 |     height: calc(50% - 25px);
77 |   }
78 | 
79 |   .item:first-of-type:before {
80 |     display: none;
81 |   }
82 | 
83 |   .item:last-of-type:after {
84 |     display: none;
85 |   }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-real-world
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Type Support for `.vue` Imports in TS
10 | 
11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12 | 
13 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14 | 
15 | 1. Disable the built-in TypeScript Extension
16 |     1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17 |     2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19 | 
20 | ## Customize configuration
21 | 
22 | See [Vite Configuration Reference](https://vitejs.dev/config/).
23 | 
24 | ## Project Setup
25 | 
26 | ```sh
27 | npm install
28 | ```
29 | 
30 | ### Compile and Hot-Reload for Development
31 | 
32 | ```sh
33 | npm run dev
34 | ```
35 | 
36 | ### Type-Check, Compile and Minify for Production
37 | 
38 | ```sh
39 | npm run build
40 | ```
41 | 
42 | ### Lint with [ESLint](https://eslint.org/)
43 | 
44 | ```sh
45 | npm run lint
46 | ```
47 | 


--------------------------------------------------------------------------------
/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
3 |     <path
4 |       d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
5 |     />
6 |   </svg>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition: color 0.5s, background-color 0.5s;
66 |   line-height: 1.6;
67 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 |     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 |   font-size: 15px;
70 |   text-rendering: optimizeLegibility;
71 |   -webkit-font-smoothing: antialiased;
72 |   -moz-osx-font-smoothing: grayscale;
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/TheWelcome.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import WelcomeItem from './WelcomeItem.vue'
 3 | import DocumentationIcon from './icons/IconDocumentation.vue'
 4 | import ToolingIcon from './icons/IconTooling.vue'
 5 | import EcosystemIcon from './icons/IconEcosystem.vue'
 6 | import CommunityIcon from './icons/IconCommunity.vue'
 7 | import SupportIcon from './icons/IconSupport.vue'
 8 | </script>
 9 | 
10 | <template>
11 |   <WelcomeItem>
12 |     <template #icon>
13 |       <DocumentationIcon />
14 |     </template>
15 |     <template #heading>Documentation</template>
16 | 
17 |     Vue’s
18 |     <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
19 |     provides you with all information you need to get started.
20 |   </WelcomeItem>
21 | 
22 |   <WelcomeItem>
23 |     <template #icon>
24 |       <ToolingIcon />
25 |     </template>
26 |     <template #heading>Tooling</template>
27 | 
28 |     This project is served and bundled with
29 |     <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
30 |     recommended IDE setup is
31 |     <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
32 |     <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
33 |     you need to test your components and web pages, check out
34 |     <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
35 |     <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
36 | 
37 |     <br />
38 | 
39 |     More instructions are available in <code>README.md</code>.
40 |   </WelcomeItem>
41 | 
42 |   <WelcomeItem>
43 |     <template #icon>
44 |       <EcosystemIcon />
45 |     </template>
46 |     <template #heading>Ecosystem</template>
47 | 
48 |     Get official tools and libraries for your project:
49 |     <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
50 |     <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
51 |     <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
52 |     <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
53 |     you need more resources, we suggest paying
54 |     <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
55 |     a visit.
56 |   </WelcomeItem>
57 | 
58 |   <WelcomeItem>
59 |     <template #icon>
60 |       <CommunityIcon />
61 |     </template>
62 |     <template #heading>Community</template>
63 | 
64 |     Got stuck? Ask your question on
65 |     <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
66 |     Discord server, or
67 |     <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
68 |       >StackOverflow</a
69 |     >. You should also subscribe to
70 |     <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
71 |     the official
72 |     <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
73 |     twitter account for latest news in the Vue world.
74 |   </WelcomeItem>
75 | 
76 |   <WelcomeItem>
77 |     <template #icon>
78 |       <SupportIcon />
79 |     </template>
80 |     <template #heading>Support Vue</template>
81 | 
82 |     As an independent project, Vue relies on community backing for its sustainability. You can help
83 |     us by
84 |     <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
85 |   </WelcomeItem>
86 | </template>
87 | 


--------------------------------------------------------------------------------