initial

sfxcode · Aug 15, 2021 · ae20871 · ae20871
commit ae20871
Show file tree

Hide file tree

Showing 57 changed files with 16,083 additions and 0 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -0,0 +1,6 @@
+# Changelog
+
+
+## 0.8.0 (2021-08-15)
+
+- Initial version
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Ville Säävuori
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,55 @@
+# Vite Typescript + PrimeVue Starter
+
+
+## Features
+
+- Vue 3.2 (with script setup)
+- Routing using [vue-router 4](https://next.router.vuejs.org/)
+- TypeScript 4.3
+- PostCSS 8 w/ `postcss-nesting` plugin
+- Eslint
+- Prettier
+- Testing with cypress and Jest
+
+## IDE
+
+If you use IntelliJ you should use node-modules linler mode in .yarnrc.yml,
+otherwise IntelliJ has problems with Autocompletion.
+
+## Project setup and usage
+
+Install dependencies:
+
+```
+yarn
+```
+
+Run development server:
+
+```
+yarn dev
+```
+
+Open Cypress test runner:
+
+```
+yarn test
+```
+
+Run Cypress tests in headless mode:
+
+```
+yarn test:ci
+```
+
+Build and preview built site locally:
+
+```
+yarn preview
+```
+
+Build:
+
+```
+yarn build
+```
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,9 @@
+{
+    "baseUrl": "http://localhost:3000",
+    "fixturesFolder": "tests/e2e/fixtures",
+    "integrationFolder": "tests/e2e/integration",
+    "pluginsFile": "tests/e2e/plugins/index.ts",
+    "screenshotsFolder": "tests/e2e/screenshots",
+    "supportFile": "tests/e2e/support/index.ts",
+    "videosFolder": "tests/e2e/videos"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+      <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Typescript + PrimeVue Starter</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,16 @@
+// jest.config.js
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'ts',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.vue$': 'vue-jest'
+  },
+  roots: [
+    "./tests/unit"
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "vite-primevue-starter",
+  "version": "0.8.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite build && vite preview",
+    "start": "yarn dev & wait-on tcp:3000 -v",
+    "test:e2e": "yarn dev & wait-on tcp:3000 -v & cypress open",
+    "test:unit": "jest",
+    "test:ci": "yarn dev & wait-on tcp:3000 -v & cypress run --headless"
+  },
+  "dependencies": {
+    "@vueuse/head": "~0.6",
+    "chart.js": "^3.5.0",
+    "pinia": "~2.0.0-rc.4",
+    "primeflex": "^3.0.1",
+    "primeicons": "^4.1.0",
+    "primevue": "^3.6.2",
+    "sass": "^1.37.5",
+    "vue": "^3.2.2",
+    "vue-composable": "^1.0.0-beta.23",
+    "vue-i18n": "^9.2.0-alpha.9",
+    "vue-logger-plugin": "^2.1.3",
+    "vue-router": "^4.0.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@fullcalendar/core": "^5.9.0",
+    "@fullcalendar/daygrid": "^5.9.0",
+    "@fullcalendar/interaction": "^5.9.0",
+    "@fullcalendar/timegrid": "^5.9.0",
+    "@fullcalendar/vue3": "^5.9.0",
+    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
+    "@jest/create-cache-key-function": "^26.0.0",
+    "@types/jest": "^26.0.0",
+    "@typescript-eslint/eslint-plugin": "~4",
+    "@typescript-eslint/parser": "~4",
+    "@vitejs/plugin-vue": "^1.4.0",
+    "@vue/babel-preset-app": "^4.5.13",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
+    "@vue/compiler-sfc": "^3.2.2",
+    "@vue/eslint-config-standard": "~6.1",
+    "@vue/eslint-config-typescript": "~7.0",
+    "@vue/test-utils": "next",
+    "@vuedx/typecheck": "~0.7",
+    "@vuedx/typescript-plugin-vue": "~0.7",
+    "autoprefixer": "~10.3",
+    "babel-jest": "^26.0.0",
+    "cypress": "~8.2",
+    "eslint": "~7",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "~7",
+    "jest": "^26.0.0",
+    "postcss": "~8.3",
+    "postcss-nesting": "~8.0",
+    "rxjs": "^7.3.0",
+    "ts-jest": "^26.0.0",
+    "typescript": "~4.3",
+    "vite": "^2.5.0-beta.1",
+    "vite-plugin-eslint": "^1.3.0",
+    "vue-jest": "next",
+    "wait-on": "~6.0"
+  },
+  "dependenciesMeta": {
+    "primeflex": {
+      "unplugged": true
+    }
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    'postcss-nesting': {},
+  },
+}
diff --git a/public/assets/logo.png b/public/assets/logo.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,6 @@
+$gutter: 1rem;
+
+@import "node_modules/primeflex/primeflex.scss";
+
+@import "sass/layout";
+@import "sass/theme";
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <TabMenu :model="tabs"/>
+  </div>
+  <div class="p-2">
+    <router-view/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+
+const tabs = computed(() => [
+  {label: 'Home', icon: 'pi pi-fw pi-home', to: '/'},
+  {label: 'Blocks', icon: 'pi pi-fw pi-pencil', to: '/blocks'},
+  {label: 'Store', icon: 'pi pi-fw pi-calendar', to: '/store'},
+  {label: 'Blueprint', icon: 'pi pi-fw pi-cog', to: '/blueprint'},
+  {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'}
+]);
+
+</script>
+
+
+<style lang="scss">
+@import 'App.scss';
+</style>
diff --git a/src/components/Blocks.vue b/src/components/Blocks.vue
@@ -0,0 +1,74 @@
+<template>
+  <h5 class="font-bold text-2xl mb-4 text-blue-600">Blocks</h5>
+  <p>Usage of sample frome <a href="https://www.primefaces.org/primeblocks-ng/#/free" target="_new">PrimeBlocks free</a> !</p>
+  <div class="grid">
+    <div class="col-12 md:col-6 lg:col-3">
+      <div class="surface-0 shadow-2 p-3 border-1 border-50 border-round">
+        <div class="flex justify-content-between mb-3">
+          <div>
+            <span class="block text-500 font-medium mb-3">Orders</span>
+            <div class="text-900 font-medium text-xl">152</div>
+          </div>
+          <div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
+            <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
+          </div>
+        </div>
+        <span class="text-green-500 font-medium">24 new </span>
+        <span class="text-500">since last visit</span>
+      </div>
+    </div>
+    <div class="col-12 md:col-6 lg:col-3">
+      <div class="surface-0 shadow-2 p-3 border-1 border-50 border-round">
+        <div class="flex justify-content-between mb-3">
+          <div>
+            <span class="block text-500 font-medium mb-3">Revenue</span>
+            <div class="text-900 font-medium text-xl">$2.100</div>
+          </div>
+          <div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
+            <i class="pi pi-map-marker text-orange-500 text-xl"></i>
+          </div>
+        </div>
+        <span class="text-green-500 font-medium">%52+ </span>
+        <span class="text-500">since last week</span>
+      </div>
+    </div>
+    <div class="col-12 md:col-6 lg:col-3">
+      <div class="surface-0 shadow-2 p-3 border-1 border-50 border-round">
+        <div class="flex justify-content-between mb-3">
+          <div>
+            <span class="block text-500 font-medium mb-3">Customers</span>
+            <div class="text-900 font-medium text-xl">28441</div>
+          </div>
+          <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
+            <i class="pi pi-inbox text-cyan-500 text-xl"></i>
+          </div>
+        </div>
+        <span class="text-green-500 font-medium">520  </span>
+        <span class="text-500">newly registered</span>
+      </div>
+    </div>
+    <div class="col-12 md:col-6 lg:col-3">
+      <div class="surface-0 shadow-2 p-3 border-1 border-50 border-round">
+        <div class="flex justify-content-between mb-3">
+          <div>
+            <span class="block text-500 font-medium mb-3">Comments</span>
+            <div class="text-900 font-medium text-xl">152 Unread</div>
+          </div>
+          <div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
+            <i class="pi pi-comment text-purple-500 text-xl"></i>
+          </div>
+        </div>
+        <span class="text-green-500 font-medium">85 </span>
+        <span class="text-500">responded</span>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+
+<style scoped></style>
diff --git a/src/components/Blueprint.vue b/src/components/Blueprint.vue
@@ -0,0 +1,10 @@
+<template>
+        <h5 class="font-bold text-2xl mb-4 text-blue-600">Blueprint</h5>
+        <p>Use this page to start from scratch and place your custom content !</p>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -0,0 +1,35 @@
+<template>
+
+  <div class="surface-0 text-center">
+    <div class="mb-3 font-bold text-4xl">
+      <span class="text-green-600">PrimeVue </span>
+      <img src="assets/logo.png" alt="Logo" width="25" height="25">
+      <span class="text-blue-400"> & TypeScript</span>
+      <span class="text-blue-600"> & Vite</span>
+    </div>
+    <h2>Starter for Vue.js Development.</h2>
+    <div class="grid">
+      <AdvertiseBox header="VUE 3.2.x" icon="pi-check-circle">
+
+      </AdvertiseBox>
+
+
+      <AdvertiseBox header="VITE 2.x" icon="pi-check-circle"/>
+      <AdvertiseBox header="PrimeVue 3.6.0" icon="pi-check-circle"/>
+      <AdvertiseBox header="PrimeFlex 3.x included" icon="pi-check-circle"/>
+      <AdvertiseBox header="PrimeIcons 2.x included" icon="pi-check-circle"/>
+      <AdvertiseBox header="Vue Router 4.x" icon="pi-check-circle"/>
+      <AdvertiseBox header="Pinia Store 2.x" icon="pi-check-circle"/>
+      <AdvertiseBox header="Script Setup" icon="pi-check-circle"/>
+      <AdvertiseBox header="PrimeBlocks Example" icon="pi-check-circle"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AdvertiseBox from '@/widgets/AdvertiseBox.vue';
+
+</script>
+
+
+<style scoped></style>
diff --git a/src/components/Store.vue b/src/components/Store.vue
@@ -0,0 +1,25 @@
+<template>
+  <h5 class="font-bold text-2xl mb-4 text-blue-600">Pinia Store</h5>
+  <p>Example of Pinia Store !</p>
+  <div>Mainstore: {{ mainStore }}</div>
+  <div>myRef Value: {{ myRef }}</div>
+  <div>Pinia State counter: {{ counter }}</div>
+  <div>Pinia getter doubleCount  {{ doubleCount }}</div>
+  <div>counter * myRef: {{ counter * myRef }}</div>
+
+</template>
+
+<script setup lang="ts">
+
+import {useMainStore} from "../store";
+import {computed, ref} from "vue";
+
+const mainStore = useMainStore();
+
+const myRef = ref(3)
+const doubleCount = computed(() => mainStore.doubleCount)
+const counter = mainStore.counter;
+
+</script>
+
+<style scoped></style>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -0,0 +1,4 @@
+interface ImportMetaEnv {
+  VITE_APP_VERSION: string
+  VITE_APP_BUILD_EPOCH: number
+}