Merge branch 'develop/0.2.0' into 'feature/32-use-bootstrap-for-header-navigation'

# Conflicts: # kontor-vue/src/App.vue # kontor-vue/src/assets/main.css
added bootstrap to app
2025-08-28 14:09:31 +02:00 · 2025-08-14 02:44:13 +02:00 · 2025-08-12 11:32:51 +02:00
15 changed files with 486 additions and 578 deletions
@@ -1,7 +1,5 @@
 # kontor-vue
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 This template should help get you started developing with Vue 3 in Vite.
 ## Recommended IDE Setup
@@ -12,25 +10,26 @@ This template should help get you started developing with Vue 3 in Vite.
 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 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-## Project setup
+## Customize configuration
-```
+
 See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 ```sh
 npm install
 ```
-### Compiles and hot-reloads for development
+### Compile and Hot-Reload for Development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Lint with [ESLint](https://eslint.org/)
 ```sh
-npm run lint
+npm run dev
 ```
 ### Type-Check, Compile and Minify for Production
 ```sh
 npm run build
 ```
 ### Run Unit Tests with [Vitest](https://vitest.dev/)
@@ -54,3 +53,9 @@ But it's still recommended to test the production build with `test:e2e` before d
 npm run build
 npm run test:e2e
 ```
 ### Lint with [ESLint](https://eslint.org/)
 ```sh
 npm run lint
 ```
@@ -1,5 +0,0 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
@@ -1,19 +0,0 @@
 {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
 }
@@ -20,7 +20,7 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "pinia": "^3.0.3",
+    "bootstrap": "^5.3.7",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
@@ -29,7 +29,6 @@
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.16.5",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vitejs/plugin-vue-jsx": "^5.0.1",
    "@vitest/eslint-plugin": "^1.3.4",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.6.0",
@@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
@@ -1,4 +1,4 @@
-@import './base.css';
+@import 'bootstrap/dist/css/bootstrap.css';
 * {
    box-sizing: border-box;
@@ -0,0 +1,54 @@
 <template>
  <nav class="navbar bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
 </template>
 <style></style>
@@ -0,0 +1,16 @@
 <template>
  <p class="muted">
    Placeholder text to demonstrate some
    <a href="/" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with
    tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of
    <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that
    just to give you an idea of how tooltips would look when used in real-world situations. So
    hopefully you've now seen how
    <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too"
      >these tooltips on links</a
    >
    can work in practice, once you use them on
    <a href="/about" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or
    project.
  </p>
 </template>
@@ -1,4 +0,0 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 createApp(App).mount('#app')
@@ -1,14 +1,12 @@
 import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
 import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 const app = createApp(App)
-
+app.provide('bootstrap', bootstrap)
 app.use(createPinia())
 app.use(router)
 app.mount('#app')
@@ -1,12 +0,0 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
 })
@@ -2,14 +2,12 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
  ],
  resolve: {
@@ -1,4 +0,0 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  transpileDependencies: true
 })
Author	SHA1	Message	Date
tpeetz	e7bbb6209e	Merge branch 'develop/0.2.0' into 'feature/32-use-bootstrap-for-header-navigation' # Conflicts: # kontor-vue/src/App.vue # kontor-vue/src/assets/main.css	2025-08-28 14:09:31 +02:00
Thomas Peetz	b945cf726c	added bootstrap to app	2025-08-14 02:44:13 +02:00
Thomas Peetz	83338df181	add bootstrap and recreate Vue project	2025-08-12 11:32:51 +02:00