Strona główna Odkrywaj Pomoc
Zaloguj się
tum
/
TMTApp
Obserwuj 1
Polub 0
Forkuj 0
Kod Problemy 0 Oczekujące zmiany 0 Commity 21 Wydania 0 Wiki
Przeglądaj źródła

Initial commit

tum 2 lat temu
commit
0d140e88b0
28 zmienionych plików z 8871 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 6 0
      .browserslistrc
  2. 20 0
      .eslintrc.js
  3. 32 0
      .gitignore
  4. 5 0
      .vscode/extensions.json
  5. 14 0
      cypress.config.ts
  6. 31 0
      index.html
  7. 5 0
      ionic.config.json
  8. 8134 0
      package-lock.json
  9. 36 0
      package.json
  10. BIN
      public/favicon.png
  11. 9 0
      src/App.vue
  12. 39 0
      src/components/ExploreContainer.vue
  13. 32 0
      src/main.ts
  14. 39 0
      src/router/index.ts
  15. 242 0
      src/theme/variables.css
  16. 23 0
      src/views/Tab1Page.vue
  17. 23 0
      src/views/Tab2Page.vue
  18. 23 0
      src/views/Tab3Page.vue
  19. 28 0
      src/views/TabsPage.vue
  20. 1 0
      src/vite-env.d.ts
  21. 5 0
      tests/e2e/fixtures/example.json
  22. 6 0
      tests/e2e/specs/test.cy.ts
  23. 37 0
      tests/e2e/support/commands.ts
  24. 20 0
      tests/e2e/support/e2e.ts
  25. 10 0
      tests/unit/example.spec.ts
  26. 21 0
      tsconfig.json
  27. 9 0
      tsconfig.node.json
  28. 21 0
      vite.config.ts

+ 6 - 0
.browserslistrc
Wyświetl plik 

@@ -0,0 +1,6 @@
1 
+Chrome >=79
2 
+ChromeAndroid >=79
3 
+Firefox >=70
4 
+Edge >=79
5 
+Safari >=14
6 
+iOS >=14

+ 20 - 0
.eslintrc.js
Wyświetl plik 

@@ -0,0 +1,20 @@
1 
+module.exports = {
2 
+  root: true,
3 
+  env: {
4 
+    node: true
5 
+  },
6 
+  'extends': [
7 
+    'plugin:vue/vue3-essential',
8 
+    'eslint:recommended',
9 
+    '@vue/typescript/recommended'
10 
+  ],
11 
+  parserOptions: {
12 
+    ecmaVersion: 2020
13 
+  },
14 
+  rules: {
15 
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17 
+    'vue/no-deprecated-slot-attribute': 'off',
18 
+    '@typescript-eslint/no-explicit-any': 'off',
19 
+  }
20 
+}

+ 32 - 0
.gitignore
Wyświetl plik 

@@ -0,0 +1,32 @@
1 
+# Specifies intentionally untracked files to ignore when using Git
2 
+# http://git-scm.com/docs/gitignore
3 
+
4 
+*~
5 
+*.sw[mnpcod]
6 
+.tmp
7 
+*.tmp
8 
+*.tmp.*
9 
+*.sublime-project
10 
+*.sublime-workspace
11 
+.DS_Store
12 
+Thumbs.db
13 
+UserInterfaceState.xcuserstate
14 
+$RECYCLE.BIN/
15 
+
16 
+*.log
17 
+log.txt
18 
+npm-debug.log*
19 
+
20 
+/.idea
21 
+/.ionic
22 
+/.sass-cache
23 
+/.sourcemaps
24 
+/.versions
25 
+/.vscode/*
26 
+!/.vscode/extensions.json
27 
+/coverage
28 
+/dist
29 
+/node_modules
30 
+/platforms
31 
+/plugins
32 
+/www

+ 5 - 0
.vscode/extensions.json
Wyświetl plik 

@@ -0,0 +1,5 @@
1 
+{
2 
+    "recommendations": [
3 
+        "ionic.ionic"
4 
+    ]
5 
+}

+ 14 - 0
cypress.config.ts
Wyświetl plik 

@@ -0,0 +1,14 @@
1 
+import { defineConfig } from "cypress";
2 
+
3 
+export default defineConfig({
4 
+  e2e: {
5 
+    supportFile: "tests/e2e/support/e2e.{js,jsx,ts,tsx}",
6 
+    specPattern: "tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}",
7 
+    videosFolder: "tests/e2e/videos",
8 
+    screenshotsFolder: "tests/e2e/screenshots",
9 
+    baseUrl: "http://localhost:5173",
10 
+    setupNodeEvents(on, config) {
11 
+      // implement node event listeners here
12 
+    },
13 
+  },
14 
+});

+ 31 - 0
index.html
Wyświetl plik 

@@ -0,0 +1,31 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="utf-8" />
5 
+    <title>Ionic App</title>
6 
+
7 
+    <base href="/" />
8 
+
9 
+    <meta name="color-scheme" content="light dark" />
10 
+    <meta
11 
+      name="viewport"
12 
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
13 
+    />
14 
+    <meta name="format-detection" content="telephone=no" />
15 
+    <meta name="msapplication-tap-highlight" content="no" />
16 
+
17 
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
18 
+
19 
+    <!-- add to homescreen for ios -->
20 
+    <meta name="apple-mobile-web-app-capable" content="yes" />
21 
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
22 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
23 
+  </head>
24 
+
25 
+  <body>
26 
+    <div id="app"></div>
27 
+    <script type="module" src="/src/main.ts"></script>
28 
+  </body>
29 
+
30 
+</html>
31 
+

+ 5 - 0
ionic.config.json
Wyświetl plik 

@@ -0,0 +1,5 @@
1 
+{
2 
+  "name": "TMTApp",
3 
+  "integrations": {},
4 
+  "type": "vue-vite"
5 
+}

Plik diff jest za duży
+ 8134 - 0
package-lock.json


+ 36 - 0
package.json
Wyświetl plik 

@@ -0,0 +1,36 @@
1 
+{
2 
+  "name": "TMTApp",
3 
+  "private": true,
4 
+  "version": "0.0.1",
5 
+  "type": "module",
6 
+  "scripts": {
7 
+    "dev": "vite",
8 
+    "build": "vue-tsc && vite build",
9 
+    "preview": "vite preview",
10 
+    "test:e2e": "cypress run",
11 
+    "test:unit": "vitest",
12 
+    "lint": "eslint"
13 
+  },
14 
+  "dependencies": {
15 
+    "@ionic/vue": "^7.0.0",
16 
+    "@ionic/vue-router": "^7.0.0",
17 
+    "ionicons": "^7.0.0",
18 
+    "vue": "^3.2.45",
19 
+    "vue-router": "^4.1.6"
20 
+  },
21 
+  "devDependencies": {
22 
+    "@vitejs/plugin-legacy": "^4.0.2",
23 
+    "@vitejs/plugin-vue": "^4.0.0",
24 
+    "@vue/eslint-config-typescript": "^11.0.2",
25 
+    "@vue/test-utils": "^2.3.0",
26 
+    "cypress": "^12.7.0",
27 
+    "eslint": "^8.35.0",
28 
+    "eslint-plugin-vue": "^9.9.0",
29 
+    "jsdom": "^22.1.0",
30 
+    "typescript": "^5.1.6",
31 
+    "vite": "^4.3.9",
32 
+    "vitest": "^0.32.2",
33 
+    "vue-tsc": "^1.0.24"
34 
+  },
35 
+  "description": "An Ionic project"
36 
+}

BIN
public/favicon.png
Wyświetl plik


+ 9 - 0
src/App.vue
Wyświetl plik 

@@ -0,0 +1,9 @@
1 
+<template>
2 
+  <ion-app>
3 
+    <ion-router-outlet />
4 
+  </ion-app>
5 
+</template>
6 
+
7 
+<script setup lang="ts">
8 
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
9 
+</script>

+ 39 - 0
src/components/ExploreContainer.vue
Wyświetl plik 

@@ -0,0 +1,39 @@
1 
+<template>
2 
+  <div id="container">
3 
+    <strong>{{ name }}</strong>
4 
+    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
5 
+  </div>
6 
+</template>
7 
+
8 
+<script setup lang="ts">
9 
+defineProps({
10 
+  name: String,
11 
+});
12 
+</script>
13 
+
14 
+<style scoped>
15 
+#container {
16 
+  text-align: center;
17 
+  position: absolute;
18 
+  left: 0;
19 
+  right: 0;
20 
+  top: 50%;
21 
+  transform: translateY(-50%);
22 
+}
23 
+
24 
+#container strong {
25 
+  font-size: 20px;
26 
+  line-height: 26px;
27 
+}
28 
+
29 
+#container p {
30 
+  font-size: 16px;
31 
+  line-height: 22px;
32 
+  color: #8c8c8c;
33 
+  margin: 0;
34 
+}
35 
+
36 
+#container a {
37 
+  text-decoration: none;
38 
+}
39 
+</style>

+ 32 - 0
src/main.ts
Wyświetl plik 

@@ -0,0 +1,32 @@
1 
+import { createApp } from 'vue'
2 
+import App from './App.vue'
3 
+import router from './router';
4 
+
5 
+import { IonicVue } from '@ionic/vue';
6 
+
7 
+/* Core CSS required for Ionic components to work properly */
8 
+import '@ionic/vue/css/core.css';
9 
+
10 
+/* Basic CSS for apps built with Ionic */
11 
+import '@ionic/vue/css/normalize.css';
12 
+import '@ionic/vue/css/structure.css';
13 
+import '@ionic/vue/css/typography.css';
14 
+
15 
+/* Optional CSS utils that can be commented out */
16 
+import '@ionic/vue/css/padding.css';
17 
+import '@ionic/vue/css/float-elements.css';
18 
+import '@ionic/vue/css/text-alignment.css';
19 
+import '@ionic/vue/css/text-transformation.css';
20 
+import '@ionic/vue/css/flex-utils.css';
21 
+import '@ionic/vue/css/display.css';
22 
+
23 
+/* Theme variables */
24 
+import './theme/variables.css';
25 
+
26 
+const app = createApp(App)
27 
+  .use(IonicVue)
28 
+  .use(router);
29 
+
30 
+router.isReady().then(() => {
31 
+  app.mount('#app');
32 
+});

+ 39 - 0
src/router/index.ts
Wyświetl plik 

@@ -0,0 +1,39 @@
1 
+import { createRouter, createWebHistory } from '@ionic/vue-router';
2 
+import { RouteRecordRaw } from 'vue-router';
3 
+import TabsPage from '../views/TabsPage.vue'
4 
+
5 
+const routes: Array<RouteRecordRaw> = [
6 
+  {
7 
+    path: '/',
8 
+    redirect: '/tabs/tab1'
9 
+  },
10 
+  {
11 
+    path: '/tabs/',
12 
+    component: TabsPage,
13 
+    children: [
14 
+      {
15 
+        path: '',
16 
+        redirect: '/tabs/tab1'
17 
+      },
18 
+      {
19 
+        path: 'tab1',
20 
+        component: () => import('@/views/Tab1Page.vue')
21 
+      },
22 
+      {
23 
+        path: 'tab2',
24 
+        component: () => import('@/views/Tab2Page.vue')
25 
+      },
26 
+      {
27 
+        path: 'tab3',
28 
+        component: () => import('@/views/Tab3Page.vue')
29 
+      }
30 
+    ]
31 
+  }
32 
+]
33 
+
34 
+const router = createRouter({
35 
+  history: createWebHistory(import.meta.env.BASE_URL),
36 
+  routes
37 
+})
38 
+
39 
+export default router

+ 242 - 0
src/theme/variables.css
Wyświetl plik 

@@ -0,0 +1,242 @@
1 
+/* Ionic Variables and Theming. For more info, please see:
2 
+http://ionicframework.com/docs/theming/ */
3 
+
4 
+/** Ionic CSS Variables **/
5 
+:root {
6 
+  /** primary **/
7 
+  --ion-color-primary: #3880ff;
8 
+  --ion-color-primary-rgb: 56, 128, 255;
9 
+  --ion-color-primary-contrast: #ffffff;
10 
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
11 
+  --ion-color-primary-shade: #3171e0;
12 
+  --ion-color-primary-tint: #4c8dff;
13 
+
14 
+  /** secondary **/
15 
+  --ion-color-secondary: #3dc2ff;
16 
+  --ion-color-secondary-rgb: 61, 194, 255;
17 
+  --ion-color-secondary-contrast: #ffffff;
18 
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 
+  --ion-color-secondary-shade: #36abe0;
20 
+  --ion-color-secondary-tint: #50c8ff;
21 
+
22 
+  /** tertiary **/
23 
+  --ion-color-tertiary: #5260ff;
24 
+  --ion-color-tertiary-rgb: 82, 96, 255;
25 
+  --ion-color-tertiary-contrast: #ffffff;
26 
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 
+  --ion-color-tertiary-shade: #4854e0;
28 
+  --ion-color-tertiary-tint: #6370ff;
29 
+
30 
+  /** success **/
31 
+  --ion-color-success: #2dd36f;
32 
+  --ion-color-success-rgb: 45, 211, 111;
33 
+  --ion-color-success-contrast: #ffffff;
34 
+  --ion-color-success-contrast-rgb: 255, 255, 255;
35 
+  --ion-color-success-shade: #28ba62;
36 
+  --ion-color-success-tint: #42d77d;
37 
+
38 
+  /** warning **/
39 
+  --ion-color-warning: #ffc409;
40 
+  --ion-color-warning-rgb: 255, 196, 9;
41 
+  --ion-color-warning-contrast: #000000;
42 
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
43 
+  --ion-color-warning-shade: #e0ac08;
44 
+  --ion-color-warning-tint: #ffca22;
45 
+
46 
+  /** danger **/
47 
+  --ion-color-danger: #eb445a;
48 
+  --ion-color-danger-rgb: 235, 68, 90;
49 
+  --ion-color-danger-contrast: #ffffff;
50 
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
51 
+  --ion-color-danger-shade: #cf3c4f;
52 
+  --ion-color-danger-tint: #ed576b;
53 
+
54 
+  /** dark **/
55 
+  --ion-color-dark: #222428;
56 
+  --ion-color-dark-rgb: 34, 36, 40;
57 
+  --ion-color-dark-contrast: #ffffff;
58 
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
59 
+  --ion-color-dark-shade: #1e2023;
60 
+  --ion-color-dark-tint: #383a3e;
61 
+
62 
+  /** medium **/
63 
+  --ion-color-medium: #92949c;
64 
+  --ion-color-medium-rgb: 146, 148, 156;
65 
+  --ion-color-medium-contrast: #ffffff;
66 
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
67 
+  --ion-color-medium-shade: #808289;
68 
+  --ion-color-medium-tint: #9d9fa6;
69 
+
70 
+  /** light **/
71 
+  --ion-color-light: #f4f5f8;
72 
+  --ion-color-light-rgb: 244, 245, 248;
73 
+  --ion-color-light-contrast: #000000;
74 
+  --ion-color-light-contrast-rgb: 0, 0, 0;
75 
+  --ion-color-light-shade: #d7d8da;
76 
+  --ion-color-light-tint: #f5f6f9;
77 
+}
78 
+
79 
+@media (prefers-color-scheme: dark) {
80 
+  /*
81 
+   * Dark Colors
82 
+   * -------------------------------------------
83 
+   */
84 
+
85 
+  body {
86 
+    --ion-color-primary: #428cff;
87 
+    --ion-color-primary-rgb: 66,140,255;
88 
+    --ion-color-primary-contrast: #ffffff;
89 
+    --ion-color-primary-contrast-rgb: 255,255,255;
90 
+    --ion-color-primary-shade: #3a7be0;
91 
+    --ion-color-primary-tint: #5598ff;
92 
+
93 
+    --ion-color-secondary: #50c8ff;
94 
+    --ion-color-secondary-rgb: 80,200,255;
95 
+    --ion-color-secondary-contrast: #ffffff;
96 
+    --ion-color-secondary-contrast-rgb: 255,255,255;
97 
+    --ion-color-secondary-shade: #46b0e0;
98 
+    --ion-color-secondary-tint: #62ceff;
99 
+
100 
+    --ion-color-tertiary: #6a64ff;
101 
+    --ion-color-tertiary-rgb: 106,100,255;
102 
+    --ion-color-tertiary-contrast: #ffffff;
103 
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
104 
+    --ion-color-tertiary-shade: #5d58e0;
105 
+    --ion-color-tertiary-tint: #7974ff;
106 
+
107 
+    --ion-color-success: #2fdf75;
108 
+    --ion-color-success-rgb: 47,223,117;
109 
+    --ion-color-success-contrast: #000000;
110 
+    --ion-color-success-contrast-rgb: 0,0,0;
111 
+    --ion-color-success-shade: #29c467;
112 
+    --ion-color-success-tint: #44e283;
113 
+
114 
+    --ion-color-warning: #ffd534;
115 
+    --ion-color-warning-rgb: 255,213,52;
116 
+    --ion-color-warning-contrast: #000000;
117 
+    --ion-color-warning-contrast-rgb: 0,0,0;
118 
+    --ion-color-warning-shade: #e0bb2e;
119 
+    --ion-color-warning-tint: #ffd948;
120 
+
121 
+    --ion-color-danger: #ff4961;
122 
+    --ion-color-danger-rgb: 255,73,97;
123 
+    --ion-color-danger-contrast: #ffffff;
124 
+    --ion-color-danger-contrast-rgb: 255,255,255;
125 
+    --ion-color-danger-shade: #e04055;
126 
+    --ion-color-danger-tint: #ff5b71;
127 
+
128 
+    --ion-color-dark: #f4f5f8;
129 
+    --ion-color-dark-rgb: 244,245,248;
130 
+    --ion-color-dark-contrast: #000000;
131 
+    --ion-color-dark-contrast-rgb: 0,0,0;
132 
+    --ion-color-dark-shade: #d7d8da;
133 
+    --ion-color-dark-tint: #f5f6f9;
134 
+
135 
+    --ion-color-medium: #989aa2;
136 
+    --ion-color-medium-rgb: 152,154,162;
137 
+    --ion-color-medium-contrast: #000000;
138 
+    --ion-color-medium-contrast-rgb: 0,0,0;
139 
+    --ion-color-medium-shade: #86888f;
140 
+    --ion-color-medium-tint: #a2a4ab;
141 
+
142 
+    --ion-color-light: #222428;
143 
+    --ion-color-light-rgb: 34,36,40;
144 
+    --ion-color-light-contrast: #ffffff;
145 
+    --ion-color-light-contrast-rgb: 255,255,255;
146 
+    --ion-color-light-shade: #1e2023;
147 
+    --ion-color-light-tint: #383a3e;
148 
+  }
149 
+
150 
+  /*
151 
+   * iOS Dark Theme
152 
+   * -------------------------------------------
153 
+   */
154 
+
155 
+  .ios body {
156 
+    --ion-background-color: #000000;
157 
+    --ion-background-color-rgb: 0,0,0;
158 
+
159 
+    --ion-text-color: #ffffff;
160 
+    --ion-text-color-rgb: 255,255,255;
161 
+
162 
+    --ion-color-step-50: #0d0d0d;
163 
+    --ion-color-step-100: #1a1a1a;
164 
+    --ion-color-step-150: #262626;
165 
+    --ion-color-step-200: #333333;
166 
+    --ion-color-step-250: #404040;
167 
+    --ion-color-step-300: #4d4d4d;
168 
+    --ion-color-step-350: #595959;
169 
+    --ion-color-step-400: #666666;
170 
+    --ion-color-step-450: #737373;
171 
+    --ion-color-step-500: #808080;
172 
+    --ion-color-step-550: #8c8c8c;
173 
+    --ion-color-step-600: #999999;
174 
+    --ion-color-step-650: #a6a6a6;
175 
+    --ion-color-step-700: #b3b3b3;
176 
+    --ion-color-step-750: #bfbfbf;
177 
+    --ion-color-step-800: #cccccc;
178 
+    --ion-color-step-850: #d9d9d9;
179 
+    --ion-color-step-900: #e6e6e6;
180 
+    --ion-color-step-950: #f2f2f2;
181 
+
182 
+    --ion-item-background: #000000;
183 
+
184 
+    --ion-card-background: #1c1c1d;
185 
+  }
186 
+
187 
+  .ios ion-modal {
188 
+    --ion-background-color: var(--ion-color-step-100);
189 
+    --ion-toolbar-background: var(--ion-color-step-150);
190 
+    --ion-toolbar-border-color: var(--ion-color-step-250);
191 
+  }
192 
+
193 
+
194 
+  /*
195 
+   * Material Design Dark Theme
196 
+   * -------------------------------------------
197 
+   */
198 
+
199 
+  .md body {
200 
+    --ion-background-color: #121212;
201 
+    --ion-background-color-rgb: 18,18,18;
202 
+
203 
+    --ion-text-color: #ffffff;
204 
+    --ion-text-color-rgb: 255,255,255;
205 
+
206 
+    --ion-border-color: #222222;
207 
+
208 
+    --ion-color-step-50: #1e1e1e;
209 
+    --ion-color-step-100: #2a2a2a;
210 
+    --ion-color-step-150: #363636;
211 
+    --ion-color-step-200: #414141;
212 
+    --ion-color-step-250: #4d4d4d;
213 
+    --ion-color-step-300: #595959;
214 
+    --ion-color-step-350: #656565;
215 
+    --ion-color-step-400: #717171;
216 
+    --ion-color-step-450: #7d7d7d;
217 
+    --ion-color-step-500: #898989;
218 
+    --ion-color-step-550: #949494;
219 
+    --ion-color-step-600: #a0a0a0;
220 
+    --ion-color-step-650: #acacac;
221 
+    --ion-color-step-700: #b8b8b8;
222 
+    --ion-color-step-750: #c4c4c4;
223 
+    --ion-color-step-800: #d0d0d0;
224 
+    --ion-color-step-850: #dbdbdb;
225 
+    --ion-color-step-900: #e7e7e7;
226 
+    --ion-color-step-950: #f3f3f3;
227 
+
228 
+    --ion-item-background: #1e1e1e;
229 
+
230 
+    --ion-toolbar-background: #1f1f1f;
231 
+
232 
+    --ion-tab-bar-background: #1f1f1f;
233 
+
234 
+    --ion-card-background: #1e1e1e;
235 
+  }
236 
+}
237 
+
238 
+html {
239 
+  /* For more information on dynamic font scaling, visit the documentation:
240 
+  https://ionicframework.com/docs/layout/dynamic-font-scaling */
241 
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
242 
+}

+ 23 - 0
src/views/Tab1Page.vue
Wyświetl plik 

@@ -0,0 +1,23 @@
1 
+<template>
2 
+  <ion-page>
3 
+    <ion-header>
4 
+      <ion-toolbar>
5 
+        <ion-title>Tab 1</ion-title>
6 
+      </ion-toolbar>
7 
+    </ion-header>
8 
+    <ion-content :fullscreen="true">
9 
+      <ion-header collapse="condense">
10 
+        <ion-toolbar>
11 
+          <ion-title size="large">Tab 1</ion-title>
12 
+        </ion-toolbar>
13 
+      </ion-header>
14 
+
15 
+      <ExploreContainer name="Tab 1 page" />
16 
+    </ion-content>
17 
+  </ion-page>
18 
+</template>
19 
+
20 
+<script setup lang="ts">
21 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
22 
+import ExploreContainer from '@/components/ExploreContainer.vue';
23 
+</script>

+ 23 - 0
src/views/Tab2Page.vue
Wyświetl plik 

@@ -0,0 +1,23 @@
1 
+<template>
2 
+  <ion-page>
3 
+    <ion-header>
4 
+      <ion-toolbar>
5 
+        <ion-title>Tab 2</ion-title>
6 
+      </ion-toolbar>
7 
+    </ion-header>
8 
+    <ion-content :fullscreen="true">
9 
+      <ion-header collapse="condense">
10 
+        <ion-toolbar>
11 
+          <ion-title size="large">Tab 2</ion-title>
12 
+        </ion-toolbar>
13 
+      </ion-header>
14 
+
15 
+      <ExploreContainer name="Tab 2 page" />
16 
+    </ion-content>
17 
+  </ion-page>
18 
+</template>
19 
+
20 
+<script setup lang="ts">
21 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
22 
+import ExploreContainer from '@/components/ExploreContainer.vue';
23 
+</script>

+ 23 - 0
src/views/Tab3Page.vue
Wyświetl plik 

@@ -0,0 +1,23 @@
1 
+<template>
2 
+  <ion-page>
3 
+    <ion-header>
4 
+      <ion-toolbar>
5 
+        <ion-title>Tab 3</ion-title>
6 
+      </ion-toolbar>
7 
+    </ion-header>
8 
+    <ion-content :fullscreen="true">
9 
+      <ion-header collapse="condense">
10 
+        <ion-toolbar>
11 
+          <ion-title size="large">Tab 3</ion-title>
12 
+        </ion-toolbar>
13 
+      </ion-header>
14 
+
15 
+      <ExploreContainer name="Tab 3 page" />
16 
+    </ion-content>
17 
+  </ion-page>
18 
+</template>
19 
+
20 
+<script setup lang="ts">
21 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
22 
+import ExploreContainer from '@/components/ExploreContainer.vue';
23 
+</script>

+ 28 - 0
src/views/TabsPage.vue
Wyświetl plik 

@@ -0,0 +1,28 @@
1 
+<template>
2 
+  <ion-page>
3 
+    <ion-tabs>
4 
+      <ion-router-outlet></ion-router-outlet>
5 
+      <ion-tab-bar slot="bottom">
6 
+        <ion-tab-button tab="tab1" href="/tabs/tab1">
7 
+          <ion-icon aria-hidden="true" :icon="triangle" />
8 
+          <ion-label>Tab 1</ion-label>
9 
+        </ion-tab-button>
10 
+
11 
+        <ion-tab-button tab="tab2" href="/tabs/tab2">
12 
+          <ion-icon aria-hidden="true" :icon="ellipse" />
13 
+          <ion-label>Tab 2</ion-label>
14 
+        </ion-tab-button>
15 
+
16 
+        <ion-tab-button tab="tab3" href="/tabs/tab3">
17 
+          <ion-icon aria-hidden="true" :icon="square" />
18 
+          <ion-label>Tab 3</ion-label>
19 
+        </ion-tab-button>
20 
+      </ion-tab-bar>
21 
+    </ion-tabs>
22 
+  </ion-page>
23 
+</template>
24 
+
25 
+<script setup lang="ts">
26 
+import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
27 
+import { ellipse, square, triangle } from 'ionicons/icons';
28 
+</script>

+ 1 - 0
src/vite-env.d.ts
Wyświetl plik 

@@ -0,0 +1 @@
1 
+/// <reference types="vite/client" />

+ 5 - 0
tests/e2e/fixtures/example.json
Wyświetl plik 

@@ -0,0 +1,5 @@
1 
+{
2 
+  "name": "Using fixtures to represent data",
3 
+  "email": "hello@cypress.io",
4 
+  "body": "Fixtures are a great way to mock data for responses to routes"
5 
+}

+ 6 - 0
tests/e2e/specs/test.cy.ts
Wyświetl plik 

@@ -0,0 +1,6 @@
1 
+describe('My First Test', () => {
2 
+  it('Visits the app root url', () => {
3 
+    cy.visit('/')
4 
+    cy.contains('ion-content', 'Tab 1 page')
5 
+  })
6 
+})

+ 37 - 0
tests/e2e/support/commands.ts
Wyświetl plik 

@@ -0,0 +1,37 @@
1 
+/// <reference types="cypress" />
2 
+// ***********************************************
3 
+// This example commands.ts shows you how to
4 
+// create various custom commands and overwrite
5 
+// existing commands.
6 
+//
7 
+// For more comprehensive examples of custom
8 
+// commands please read more here:
9 
+// https://on.cypress.io/custom-commands
10 
+// ***********************************************
11 
+//
12 
+//
13 
+// -- This is a parent command --
14 
+// Cypress.Commands.add('login', (email, password) => { ... })
15 
+//
16 
+//
17 
+// -- This is a child command --
18 
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19 
+//
20 
+//
21 
+// -- This is a dual command --
22 
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23 
+//
24 
+//
25 
+// -- This will overwrite an existing command --
26 
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27 
+//
28 
+// declare global {
29 
+//   namespace Cypress {
30 
+//     interface Chainable {
31 
+//       login(email: string, password: string): Chainable<void>
32 
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33 
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34 
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35 
+//     }
36 
+//   }
37 
+// }

+ 20 - 0
tests/e2e/support/e2e.ts
Wyświetl plik 

@@ -0,0 +1,20 @@
1 
+// ***********************************************************
2 
+// This example support/e2e.ts is processed and
3 
+// loaded automatically before your test files.
4 
+//
5 
+// This is a great place to put global configuration and
6 
+// behavior that modifies Cypress.
7 
+//
8 
+// You can change the location of this file or turn off
9 
+// automatically serving support files with the
10 
+// 'supportFile' configuration option.
11 
+//
12 
+// You can read more here:
13 
+// https://on.cypress.io/configuration
14 
+// ***********************************************************
15 
+
16 
+// Import commands.js using ES2015 syntax:
17 
+import './commands'
18 
+
19 
+// Alternatively you can use CommonJS syntax:
20 
+// require('./commands')

+ 10 - 0
tests/unit/example.spec.ts
Wyświetl plik 

@@ -0,0 +1,10 @@
1 
+import { mount } from '@vue/test-utils'
2 
+import Tab1Page from '@/views/Tab1Page.vue'
3 
+import { describe, expect, test } from 'vitest'
4 
+
5 
+describe('Tab1Page.vue', () => {
6 
+  test('renders tab 1 Tab1Page', () => {
7 
+    const wrapper = mount(Tab1Page)
8 
+    expect(wrapper.text()).toMatch('Tab 1 page')
9 
+  })
10 
+})

+ 21 - 0
tsconfig.json
Wyświetl plik 

@@ -0,0 +1,21 @@
1 
+{
2 
+  "compilerOptions": {
3 
+    "target": "ESNext",
4 
+    "useDefineForClassFields": true,
5 
+    "module": "ESNext",
6 
+    "moduleResolution": "Node",
7 
+    "strict": true,
8 
+    "jsx": "preserve",
9 
+    "resolveJsonModule": true,
10 
+    "isolatedModules": true,
11 
+    "esModuleInterop": true,
12 
+    "lib": ["ESNext", "DOM"],
13 
+    "skipLibCheck": true,
14 
+    "noEmit": true,
15 
+    "paths": {
16 
+      "@/*": ["./src/*"]
17 
+    }
18 
+  },
19 
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
20 
+  "references": [{ "path": "./tsconfig.node.json" }]
21 
+}

+ 9 - 0
tsconfig.node.json
Wyświetl plik 

@@ -0,0 +1,9 @@
1 
+{
2 
+  "compilerOptions": {
3 
+    "composite": true,
4 
+    "module": "ESNext",
5 
+    "moduleResolution": "Node",
6 
+    "allowSyntheticDefaultImports": true
7 
+  },
8 
+  "include": ["vite.config.ts"]
9 
+}

+ 21 - 0
vite.config.ts
Wyświetl plik 

@@ -0,0 +1,21 @@
1 
+import legacy from '@vitejs/plugin-legacy'
2 
+import vue from '@vitejs/plugin-vue'
3 
+import path from 'path'
4 
+import { defineConfig } from 'vite'
5 
+
6 
+// https://vitejs.dev/config/
7 
+export default defineConfig({
8 
+  plugins: [
9 
+    vue(),
10 
+    legacy()
11 
+  ],
12 
+  resolve: {
13 
+    alias: {
14 
+      '@': path.resolve(__dirname, './src'),
15 
+    },
16 
+  },
17 
+  test: {
18 
+    globals: true,
19 
+    environment: 'jsdom'
20 
+  }
21 
+})