@muenchen/muc-patternlab-vue 1.0.1-beta.3 → 1.0.1-beta.5

package/dist/types/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/components/Banner/MucBanner.vue.d.ts

@@ -0,0 +1,23 @@
+import { type PropType } from "vue";
+type bannerType = "info" | "warning" | "emergency";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    type: {
+        type: PropType<bannerType>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<bannerType>;
+        default: string;
+    };
+}>>, {
+    type: bannerType;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Banner/index.d.ts

@@ -0,0 +1,46 @@
+declare const _default: {
+    MucBanner: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"info" | "warning" | "emergency">;
+                default: string;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"info" | "warning" | "emergency">;
+                default: string;
+            };
+        }>>, {
+            type: "info" | "warning" | "emergency";
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"info" | "warning" | "emergency">;
+                default: string;
+            };
+        }>>, {}, {}, {}, {}, {
+            type: "info" | "warning" | "emergency";
+        }>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        type: {
+            type: import("vue").PropType<"info" | "warning" | "emergency">;
+            default: string;
+        };
+    }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        type: "info" | "warning" | "emergency";
+    }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
+};
+export default _default;

package/dist/types/components/Button/MucButton.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    expanded: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Button/index.d.ts

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

package/dist/types/components/Intro/MucIntro.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+    };
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Intro/index.d.ts

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

package/dist/types/components/index.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import { type App } from 'vue';
+declare function install(app: App): void;
+import "../public/assets/temporary/muenchende-style.css";
+declare const _default: {
+    install: typeof install;
+};
+export default _default;
+export * from './components';

package/dist/types/main.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -3,11 +3,11 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.0.1-beta.3",
+  "version": "1.0.1-beta.5",
   "private": false,
   "type": "module",
-  "main": "./dist/mde5-patternlab-vue.umd.cjs",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/muc-patternlab-vue.es.js",
+  "types": "./dist/types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/it-at-m/muc-patternlab-vue"
@@ -18,16 +18,17 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/mde5-patternlab-vue.js",
-      "require": "./dist/mde5-patternlab-vue.umd.cjs"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/muc-patternlab-vue.es.js"
     }
   },
   "files": [
+    "src",
     "dist"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "npm run type-check && npm run build-only",
+    "build": "rimraf dist && npm run type-check && npm run build-only",
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
@@ -56,6 +57,7 @@
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.0.3",
+    "rimraf": "^5.0.1",
     "semantic-release": "^23.0.0",
     "typescript": "~5.3.0",
     "vite": "^5.0.11",

package/src/App.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import sprites from "../public/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 "../public/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 "Information";
+  }
+});
+</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 { 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 { 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 { MucButton, MucBanner, MucIntro };

package/src/index.ts

@@ -0,0 +1,15 @@
+import { type App } from 'vue'
+import * as components from './components'
+
+function install (app: App) {
+    for (const key in components) {
+        // @ts-expect-error
+        app.component(key, components[key])
+    }
+}
+
+import "../public/assets/temporary/muenchende-style.css";
+
+export default { install }
+
+export * from './components'

package/src/main.ts

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

package/dist/Banner/MucBanner.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/Button/MucButton.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/Intro/MucIntro.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/muc-patternlab-vue.js

@@ -1,103 +0,0 @@
-import { defineComponent as o, openBlock as a, createElementBlock as c, renderSlot as i, computed as s, createElementVNode as e, normalizeClass as _, toDisplayString as d } from "vue";
-const p = { class: "m-button m-button--primary m-button--animated-right" }, f = /* @__PURE__ */ o({
-  __name: "MucButton",
-  props: {
-    expanded: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(n) {
-    return (t, r) => (a(), c("button", p, [
-      i(t.$slots, "default")
-    ]));
-  }
-}), y = ["role", "aria-label"], h = { class: "container-fluid" }, g = /* @__PURE__ */ e("svg", { class: "icon" }, [
-  /* @__PURE__ */ e("use", { href: "#icon-information" })
-], -1), b = /* @__PURE__ */ o({
-  __name: "MucBanner",
-  props: {
-    type: {
-      type: String,
-      default: "info"
-    }
-  },
-  setup(n) {
-    const t = n, r = s(() => {
-      switch (t.type) {
-        case "info":
-          return "m-banner--info";
-        case "warning":
-          return "m-banner--emergency";
-        case "emergency":
-          return "m-banner--warning";
-        default:
-          return "m-banner--info";
-      }
-    }), l = s(() => {
-      switch (t.type) {
-        case "info":
-          return "dialog";
-        case "warning":
-          return "alert";
-        case "emergency":
-          return "alert";
-        default:
-          return "dialog";
-      }
-    }), u = s(() => {
-      switch (t.type) {
-        case "info":
-          return "Information";
-        case "warning":
-          return "Warnung";
-        case "emergency":
-          return "Emergency";
-        default:
-          return "Information";
-      }
-    });
-    return (m, S) => (a(), c("div", null, [
-      e("div", null, [
-        e("div", {
-          class: _(["m-banner", r.value]),
-          role: l.value,
-          "aria-label": u.value
-        }, [
-          e("div", h, [
-            g,
-            e("p", null, [
-              i(m.$slots, "default")
-            ])
-          ])
-        ], 10, y)
-      ])
-    ]));
-  }
-}), v = { class: "m-intro m-intro-summary-text" }, $ = { class: "container" }, x = { class: "m-intro-summary-text__body" }, w = { class: "m-intro-summary-text__grid" }, B = { class: "m-intro-summary-text__content" }, M = { class: "m-intro-summary-text__title" }, I = /* @__PURE__ */ o({
-  __name: "MucIntro",
-  props: {
-    title: {
-      type: String
-    }
-  },
-  setup(n) {
-    return (t, r) => (a(), c("div", v, [
-      e("div", $, [
-        e("div", x, [
-          e("div", w, [
-            e("div", B, [
-              e("h1", M, d(n.title), 1),
-              e("p", null, [
-                i(t.$slots, "default")
-              ])
-            ])
-          ])
-        ])
-      ])
-    ]));
-  }
-}), E = { MucButton: f, MucBanner: b, MucIntro: I };
-export {
-  E as default
-};

package/dist/muc-patternlab-vue.umd.cjs

@@ -1 +0,0 @@
-(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e["muc-patternlab-vue"]=n(e.Vue))})(this,function(e){"use strict";const n={class:"m-button m-button--primary m-button--animated-right"},a=e.defineComponent({__name:"MucButton",props:{expanded:{type:Boolean,default:!1}},setup(o){return(t,r)=>(e.openBlock(),e.createElementBlock("button",n,[e.renderSlot(t.$slots,"default")]))}}),s=["role","aria-label"],c={class:"container-fluid"},i=e.createElementVNode("svg",{class:"icon"},[e.createElementVNode("use",{href:"#icon-information"})],-1),l=e.defineComponent({__name:"MucBanner",props:{type:{type:String,default:"info"}},setup(o){const t=o,r=e.computed(()=>{switch(t.type){case"info":return"m-banner--info";case"warning":return"m-banner--emergency";case"emergency":return"m-banner--warning";default:return"m-banner--info"}}),y=e.computed(()=>{switch(t.type){case"info":return"dialog";case"warning":return"alert";case"emergency":return"alert";default:return"dialog"}}),h=e.computed(()=>{switch(t.type){case"info":return"Information";case"warning":return"Warnung";case"emergency":return"Emergency";default:return"Information"}});return(g,V)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",null,[e.createElementVNode("div",{class:e.normalizeClass(["m-banner",r.value]),role:y.value,"aria-label":h.value},[e.createElementVNode("div",c,[i,e.createElementVNode("p",null,[e.renderSlot(g.$slots,"default")])])],10,s)])]))}}),d={class:"m-intro m-intro-summary-text"},m={class:"container"},_={class:"m-intro-summary-text__body"},u={class:"m-intro-summary-text__grid"},p={class:"m-intro-summary-text__content"},f={class:"m-intro-summary-text__title"};return{MucButton:a,MucBanner:l,MucIntro:e.defineComponent({__name:"MucIntro",props:{title:{type:String}},setup(o){return(t,r)=>(e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",m,[e.createElementVNode("div",_,[e.createElementVNode("div",u,[e.createElementVNode("div",p,[e.createElementVNode("h1",f,e.toDisplayString(o.title),1),e.createElementVNode("p",null,[e.renderSlot(t.$slots,"default")])])])])])]))}})}});