@muenchen/muc-patternlab-vue 1.1.0 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@
 
 This repository contains a ready-to-use Vue-Components-Library based on [munich.de's MDE5 Patternlab](https://patternlab.muenchen.space/).
 
-In it's current state only some components exist. The library will continuely grow as the need for new components grows.
+In its current state only some components exist. The library will continually grow as the need for new components grows.
 
 We intend to let this project be a community project in which every developer who needs new components contributes the results of his work into this library.
 
@@ -16,11 +16,11 @@ In the near future we plan to
 - Create more components
 - Integrate MDE5 Patternlab npm-Package as soon as it's available
 
-See the [open issues](#) for a full list of proposed features (and known issues).
+See the [open issues](https://github.com/it-at-m/muc-patternlab-vue/issues) for a full list of proposed features (and known issues).
 
 ## Usage
 
-Please refer to the [documentation](docs/guide/index.md).
+Please refer to the [usage guide](https://it-at-m.github.io/muc-patternlab-vue/guide/).
 
 ## Develop
 
@@ -33,18 +33,6 @@ npm install
 npm run docs:dev
 ```
 
-### Release and Publish
-
-This project uses [semantic-release](https://github.com/semantic-release/semantic-release)!
-
-It follows [Angulars Commit Message Conventions](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format). For example:
-
-| Commit message                                                                                                                                                                                   | Release type               |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
-| `fix(pencil): stop graphite breaking when too much pressure applied`                                                                                                                             | Patch Release              |
-| `feat(pencil): add 'graphiteWidth' option`                                                                                                                                                       | ~~Minor~~ Feature Release  |
-| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
-
 ### Adding a new Component
 
 1. Create a new Folder under `./src/components`-Directory
@@ -83,6 +71,17 @@ Don't forget to give the project a star! Thanks again!
 
 More about this in the [CODE_OF_CONDUCT](/CODE_OF_CONDUCT.md) file.
 
+### Release and Publish
+
+This project uses [semantic-release](https://github.com/semantic-release/semantic-release)!
+
+It follows [Angulars Commit Message Conventions](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format). For example:
+
+| Commit message                                                                                                                                                                                   | Release type               |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
+| `fix(pencil): stop graphite breaking when too much pressure applied`                                                                                                                             | Patch Release              |
+| `feat(pencil): add 'graphiteWidth' option`                                                                                                                                                       | ~~Minor~~ Feature Release  |
+| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
 
 ## License
 

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

@@ -6,7 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
         type: PropType<bannerType>;
         default: string;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     type: {
         type: PropType<bannerType>;
         default: string;

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

@@ -1,46 +1,3 @@
-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;
+import { default as MucBanner } from './MucBanner.vue';
+
+export { MucBanner };

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

@@ -3,7 +3,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     expanded: {
         type: BooleanConstructor;
         default: boolean;

package/dist/components/Callout/MucCallout.vue.d.ts

@@ -0,0 +1,41 @@
+type calloutType = "info" | "warning" | "success" | "error";
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type?: calloutType | undefined;
+}>, {
+    type: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    type?: calloutType | undefined;
+}>, {
+    type: string;
+}>>>, {
+    type: calloutType;
+}, {}>, {
+    icon?(_: {}): any;
+    header?(_: {}): any;
+    content?(_: {
+        class: string;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,3 @@
+import { default as MucCallout } from './MucCallout.vue';
+
+export { MucCallout };

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

@@ -2,7 +2,7 @@ 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<{
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: {
         type: StringConstructor;
     };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
-import { default as MucIntro } from './Intro/MucIntro.vue';
-import { default as MucBanner } from './Banner/MucBanner.vue';
-import { default as MucButton } from './Button/MucButton.vue';
+import { MucIntro } from './Intro';
+import { MucCallout } from './Callout';
+import { MucButton } from './Button';
+import { MucBanner } from './Banner';
 
-export { MucButton, MucBanner, MucIntro };
+export { MucButton, MucBanner, MucIntro, MucCallout };

package/dist/muc-patternlab-vue.es.js

@@ -1,20 +1,7 @@
-import { defineComponent as s, openBlock as a, createElementBlock as c, renderSlot as i, computed as o, createElementVNode as t, normalizeClass as d, toDisplayString as p } from "vue";
-const f = { class: "m-button m-button--primary m-button--animated-right" }, y = /* @__PURE__ */ s({
-  __name: "MucButton",
-  props: {
-    expanded: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(n) {
-    return (e, r) => (a(), c("button", f, [
-      i(e.$slots, "default")
-    ]));
-  }
-}), g = ["role", "aria-label"], h = { class: "container-fluid" }, b = /* @__PURE__ */ t("svg", { class: "icon" }, [
+import { defineComponent as _, computed as o, openBlock as i, createElementBlock as u, createElementVNode as t, normalizeClass as m, renderSlot as r, toDisplayString as f } from "vue";
+const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PURE__ */ t("svg", { class: "icon" }, [
   /* @__PURE__ */ t("use", { href: "#icon-information" })
-], -1), v = /* @__PURE__ */ s({
+], -1), g = /* @__PURE__ */ _({
   __name: "MucBanner",
   props: {
     type: {
@@ -23,7 +10,7 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
     }
   },
   setup(n) {
-    const e = n, r = o(() => {
+    const e = n, s = o(() => {
       switch (e.type) {
         case "info":
           return "m-banner--info";
@@ -34,7 +21,7 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
         default:
           return "m-banner--info";
       }
-    }), u = o(() => {
+    }), a = o(() => {
       switch (e.type) {
         case "info":
           return "dialog";
@@ -45,7 +32,7 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
         default:
           return "dialog";
       }
-    }), m = o(() => {
+    }), c = o(() => {
       switch (e.type) {
         case "info":
           return "Information";
@@ -57,24 +44,110 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
           return "Information";
       }
     });
-    return (_, C) => (a(), c("div", null, [
+    return (l, p) => (i(), u("div", null, [
       t("div", null, [
         t("div", {
-          class: d(["m-banner", r.value]),
-          role: u.value,
-          "aria-label": m.value
+          class: m(["m-banner", s.value]),
+          role: a.value,
+          "aria-label": c.value
         }, [
-          t("div", h, [
-            b,
+          t("div", y, [
+            v,
             t("p", null, [
-              i(_.$slots, "default")
+              r(l.$slots, "default")
             ])
           ])
-        ], 10, g)
+        ], 10, h)
       ])
     ]));
   }
-}), M = { class: "m-intro m-intro-summary-text" }, B = { class: "container" }, $ = { class: "m-intro-summary-text__body" }, x = { class: "m-intro-summary-text__grid" }, w = { class: "m-intro-summary-text__content" }, S = { class: "m-intro-summary-text__title" }, I = /* @__PURE__ */ s({
+}), b = { class: "m-button m-button--primary m-button--animated-right" }, $ = /* @__PURE__ */ _({
+  __name: "MucButton",
+  props: {
+    expanded: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(n) {
+    return (e, s) => (i(), u("button", b, [
+      r(e.$slots, "default")
+    ]));
+  }
+}), w = ["aria-label"], M = { class: "m-callout__inner" }, x = { class: "m-callout__icon" }, B = {
+  "aria-hidden": "true",
+  class: "icon"
+}, k = ["xlink:href"], I = { class: "m-callout__body" }, C = { class: "m-callout__body__inner" }, S = { class: "m-callout__headline" }, E = { class: "m-callout__content" }, O = /* @__PURE__ */ _({
+  __name: "MucCallout",
+  props: {
+    type: { default: "info" }
+  },
+  setup(n) {
+    const e = n, s = o(() => {
+      switch (e.type) {
+        case "error":
+          return "warning";
+        case "success":
+          return "check";
+        default:
+          return "information";
+      }
+    }), a = o(() => {
+      switch (e.type) {
+        case "error":
+          return "m-callout--error";
+        case "warning":
+          return "m-callout--warning";
+        case "success":
+          return "m-callout--success";
+        default:
+          return "m-callout--default";
+      }
+    }), c = o(() => {
+      switch (e.type) {
+        case "success":
+          return "Erfolgreich";
+        case "warning":
+          return "Warnung";
+        case "error":
+          return "Error";
+        default:
+          return "Information";
+      }
+    });
+    return (l, p) => (i(), u("div", {
+      class: m(["m-callout", a.value]),
+      "aria-label": c.value
+    }, [
+      t("div", M, [
+        t("div", x, [
+          r(l.$slots, "icon", {}, () => [
+            (i(), u("svg", B, [
+              t("use", {
+                "xlink:href": `#icon-${s.value}`
+              }, null, 8, k)
+            ]))
+          ], !0)
+        ]),
+        t("div", I, [
+          t("div", C, [
+            t("div", S, [
+              r(l.$slots, "header", {}, void 0, !0)
+            ]),
+            t("div", E, [
+              r(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+            ])
+          ])
+        ])
+      ])
+    ], 10, w));
+  }
+}), j = (n, e) => {
+  const s = n.__vccOpts || n;
+  for (const [a, c] of e)
+    s[a] = c;
+  return s;
+}, z = /* @__PURE__ */ j(O, [["__scopeId", "data-v-e8b61339"]]), A = { class: "m-intro m-intro-summary-text" }, L = { class: "container" }, W = { class: "m-intro-summary-text__body" }, D = { class: "m-intro-summary-text__grid" }, N = { class: "m-intro-summary-text__content" }, P = { class: "m-intro-summary-text__title" }, R = /* @__PURE__ */ _({
   __name: "MucIntro",
   props: {
     title: {
@@ -82,14 +155,14 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
     }
   },
   setup(n) {
-    return (e, r) => (a(), c("div", M, [
-      t("div", B, [
-        t("div", $, [
-          t("div", x, [
-            t("div", w, [
-              t("h1", S, p(n.title), 1),
+    return (e, s) => (i(), u("div", A, [
+      t("div", L, [
+        t("div", W, [
+          t("div", D, [
+            t("div", N, [
+              t("h1", P, f(n.title), 1),
               t("p", null, [
-                i(e.$slots, "default")
+                r(e.$slots, "default")
               ])
             ])
           ])
@@ -97,20 +170,22 @@ const f = { class: "m-button m-button--primary m-button--animated-right" }, y =
       ])
     ]));
   }
-}), l = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: v,
-  MucButton: y,
-  MucIntro: I
+  MucBanner: g,
+  MucButton: $,
+  MucCallout: z,
+  MucIntro: R
 }, Symbol.toStringTag, { value: "Module" }));
-function k(n) {
-  for (const e in l)
-    n.component(e, l[e]);
+function T(n) {
+  for (const e in d)
+    n.component(e, d[e]);
 }
-const j = { install: k };
+const q = { install: T };
 export {
-  v as MucBanner,
-  y as MucButton,
-  I as MucIntro,
-  j as default
+  g as MucBanner,
+  $ as MucButton,
+  z as MucCallout,
+  R as MucIntro,
+  q as default
 };