@muenchen/muc-patternlab-vue 0.1.0

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

package/src/App.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import sprites from "@/assets/temporary/muc-icons.svg?raw";
+
+import MucButton from '@/components/Button/MucButton.vue';
+import MucBanner from '@/components/Banner/MucBanner.vue';
+import MucIntro from "@/components/Intro/MucIntro.vue";
+</script>
+
+<template>
+  <div>
+    <svg
+        style="display: none;"
+        v-html="sprites">
+    </svg>
+
+    <table>
+      <tr>
+        <th>MucButton</th>
+        <td><muc-button>Test Me!</muc-button></td>
+      </tr>
+      <tr>
+        <th>MucBanner info</th>
+        <td>
+          <muc-banner type="info">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <a href="#">Mehr erfahren</a>
+          </muc-banner>
+        </td>
+      </tr>
+      <tr>
+        <th>MucBanner warning</th>
+        <td>
+          <muc-banner type="warning">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <a href="#">Mehr erfahren</a>
+          </muc-banner>
+        </td>
+      </tr>
+      <tr>
+        <th>MucBanner emergency</th>
+        <td>
+          <muc-banner type="emergency">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <a href="#">Mehr erfahren</a>
+          </muc-banner>
+        </td>
+      </tr>
+      <tr>
+        <th>MucIntro</th>
+        <td>
+          <muc-intro title="Testtitel">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt <a href="#">Mehr erfahren</a>
+          </muc-intro>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<style>
+@import "@/assets/temporary/muenchende-style.css";
+
+table {
+  width: 100%;
+  height: 100%;
+  border: 1px solid lightgray;
+}
+
+th, td {
+  padding: 8px;
+}
+</style>

package/src/components/Banner/MucBanner.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {computed, type PropType} from "vue";
+
+type bannerType = "info" | "warning" | "emergency";
+
+const props = defineProps({
+  type: {
+    type: String as PropType<bannerType>,
+    default: "info"
+  }
+})
+
+const typeClass = computed(() => {
+  switch (props.type) {
+    case "info":
+      return "m-banner--info";
+    case "warning":
+      return "m-banner--emergency";
+    case "emergency":
+      return "m-banner--warning";
+    default:
+      return "m-banner--info";
+  }
+});
+
+const typeRole = computed(() => {
+  switch (props.type) {
+    case "info":
+      return "dialog";
+    case "warning":
+      return "alert";
+    case "emergency":
+      return "alert";
+    default:
+      return "dialog";
+  }
+});
+
+const typeAriaLabel = computed(() => {
+  switch (props.type) {
+    case "info":
+      return "Information";
+    case "warning":
+      return "Warnung";
+    case "emergency":
+      return "Emergency";
+    default:
+      return "dialog";
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div>
+      <div
+          class="m-banner"
+          :class="typeClass"
+          :role="typeRole"
+          :aria-label="typeAriaLabel"
+      >
+        <div class="container-fluid">
+          <svg class="icon">
+            <use href="#icon-information"/>
+          </svg>
+          <p>
+            <slot/>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Banner/index.ts

@@ -0,0 +1,3 @@
+import MucBanner from "./MucBanner.vue"
+
+export default { MucBanner };

package/src/components/Button/MucButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  expanded: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <button class="m-button m-button--primary m-button--animated-right">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import MucButton from "./MucButton.vue";
+
+export default { MucButton };

package/src/components/Intro/MucIntro.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <div class="m-intro m-intro-summary-text">
+    <div class="container">
+      <div class="m-intro-summary-text__body">
+        <div class="m-intro-summary-text__grid">
+          <div class="m-intro-summary-text__content">
+            <h1 class="m-intro-summary-text__title">{{ title }}</h1>
+            <p>
+              <slot></slot>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Intro/index.ts

@@ -0,0 +1,3 @@
+import MucIntro from "./MucIntro.vue"
+
+export default { MucIntro };

package/src/components/index.ts

@@ -0,0 +1,5 @@
+import MucButton from "./Button/MucButton.vue";
+import MucBanner from "./Banner/MucBanner.vue";
+import MucIntro from "./Intro/MucIntro.vue";
+
+export default { MucButton, MucBanner, MucIntro };

package/src/index.js

@@ -0,0 +1,12 @@
+import * as components from './components';
+
+const componentsList = components?.default;
+const MucComponents = {
+    install(Vue) {
+        Object.keys(componentsList).forEach(name => {
+            Vue.component(name, componentsList[name]);
+        })
+    }
+};
+
+export default MucComponents;

package/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue()
+  ],
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'muc-patternlab-vue',
+      // the proper extensions will be added
+      fileName: 'muc-patternlab-vue',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)