@muenchen/muc-patternlab-vue 1.8.0-beta.3 → 1.8.0

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

@@ -26,12 +26,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     divider: boolean;
 }>>>, {}, {}>, Readonly<{
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }> & {
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }>;

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

@@ -1,7 +1,7 @@
-import { defineComponent as v, computed as l, openBlock as o, createElementBlock as i, createElementVNode as t, normalizeClass as y, renderSlot as r, createCommentVNode as g, toDisplayString as m, pushScopeId as B, popScopeId as E, useSlots as L, createTextVNode as h, Fragment as M, renderList as S, createBlock as O, unref as P, createSlots as T, withCtx as f } from "vue";
+import { defineComponent as p, computed as l, openBlock as o, createElementBlock as r, createElementVNode as t, normalizeClass as y, renderSlot as i, createCommentVNode as g, toDisplayString as m, pushScopeId as B, popScopeId as E, useSlots as L, createTextVNode as h, Fragment as M, renderList as S, createBlock as O, unref as P, createSlots as T, withCtx as f } from "vue";
 const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PURE__ */ t("svg", { class: "icon" }, [
   /* @__PURE__ */ t("use", { href: "#icon-information" })
-], -1), H = /* @__PURE__ */ v({
+], -1), H = /* @__PURE__ */ p({
   __name: "MucBanner",
   props: {
     type: { default: "info" }
@@ -41,7 +41,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
           return "Information";
       }
     });
-    return (d, _) => (o(), i("div", null, [
+    return (u, _) => (o(), r("div", null, [
       t("div", null, [
         t("div", {
           class: y(["m-banner", s.value]),
@@ -51,7 +51,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
           t("div", R, [
             A,
             t("p", null, [
-              r(d.$slots, "default")
+              i(u.$slots, "default")
             ])
           ])
         ], 10, D)
@@ -62,7 +62,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   key: 0,
   "aria-hidden": "true",
   class: "m-button__icon"
-}, F = ["xlink:href"], N = /* @__PURE__ */ v({
+}, F = ["xlink:href"], N = /* @__PURE__ */ p({
   __name: "MucButton",
   props: {
     variant: { default: "primary" },
@@ -80,17 +80,17 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
         default:
           return "m-button--primary";
       }
-    }), d = () => {
+    }), u = () => {
       n("click");
     };
-    return (_, u) => (o(), i("button", {
-      onClick: d,
+    return (_, d) => (o(), r("button", {
+      onClick: u,
       disabled: _.disabled,
       class: y(["m-button m-button--animated-right", c.value])
     }, [
       t("span", null, [
-        r(_.$slots, "default"),
-        _.icon ? (o(), i("svg", j, [
+        i(_.$slots, "default"),
+        _.icon ? (o(), r("svg", j, [
           t("use", {
             "xlink:href": "#icon-" + _.icon
           }, null, 8, F)
@@ -98,10 +98,10 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
       ])
     ], 10, W));
   }
-}), V = ["aria-label"], z = { class: "m-callout__inner" }, U = { class: "m-callout__icon" }, X = {
+}), V = ["aria-label"], x = { class: "m-callout__inner" }, z = { class: "m-callout__icon" }, U = {
   "aria-hidden": "true",
   class: "icon"
-}, q = ["xlink:href"], x = { class: "m-callout__body" }, G = { class: "m-callout__body__inner" }, J = { class: "m-callout__headline" }, K = { class: "m-callout__content" }, Q = /* @__PURE__ */ v({
+}, X = ["xlink:href"], q = { class: "m-callout__body" }, G = { class: "m-callout__body__inner" }, J = { class: "m-callout__headline" }, K = { class: "m-callout__content" }, Q = /* @__PURE__ */ p({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
@@ -139,28 +139,28 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
           return "Information";
       }
     });
-    return (d, _) => (o(), i("div", {
+    return (u, _) => (o(), r("div", {
       class: y(["m-callout", n.value]),
       "aria-label": c.value
     }, [
-      t("div", z, [
-        t("div", U, [
-          r(d.$slots, "icon", {}, () => [
-            (o(), i("svg", X, [
+      t("div", x, [
+        t("div", z, [
+          i(u.$slots, "icon", {}, () => [
+            (o(), r("svg", U, [
               t("use", {
                 "xlink:href": `#icon-${s.value}`
-              }, null, 8, q)
+              }, null, 8, X)
             ]))
           ], !0)
         ]),
-        t("div", x, [
+        t("div", q, [
           t("div", G, [
             t("div", J, [
-              r(d.$slots, "header", {}, void 0, !0)
+              i(u.$slots, "header", {}, void 0, !0)
             ]),
             t("div", K, [
               t("p", null, [
-                r(d.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+                i(u.$slots, "content", { class: "m-callout__content" }, void 0, !0)
               ])
             ])
           ])
@@ -176,7 +176,7 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
 }, Y = /* @__PURE__ */ b(Q, [["__scopeId", "data-v-efad4956"]]), Z = (a) => (B("data-v-acf0a1dd"), a = a(), E(), a), tt = { class: "card-content" }, et = { class: "card-header" }, nt = {
   key: 0,
   class: "card-tagline"
-}, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ v({
+}, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ p({
   __name: "MucCard",
   props: {
     title: {},
@@ -185,33 +185,33 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   emits: ["click"],
   setup(a, { emit: e }) {
     const s = e;
-    return (n, c) => (o(), i("div", {
+    return (n, c) => (o(), r("div", {
       class: "card",
-      onClick: c[0] || (c[0] = (d) => s("click", d))
+      onClick: c[0] || (c[0] = (u) => s("click", u))
     }, [
       t("div", tt, [
         t("div", et, [
-          r(n.$slots, "headerPrefix", {}, void 0, !0),
+          i(n.$slots, "headerPrefix", {}, void 0, !0),
           t("div", null, [
-            n.tagline ? (o(), i("div", nt, m(n.tagline), 1)) : g("", !0),
+            n.tagline ? (o(), r("div", nt, m(n.tagline), 1)) : g("", !0),
             t("div", null, [
               t("h3", null, m(n.title), 1)
             ])
           ])
         ]),
         st,
-        r(n.$slots, "content", {}, void 0, !0)
+        i(n.$slots, "content", {}, void 0, !0)
       ])
     ]));
   }
-}), ot = /* @__PURE__ */ b(at, [["__scopeId", "data-v-acf0a1dd"]]), it = { class: "container card-container" }, rt = /* @__PURE__ */ v({
+}), ot = /* @__PURE__ */ b(at, [["__scopeId", "data-v-acf0a1dd"]]), rt = { class: "container card-container" }, it = /* @__PURE__ */ p({
   __name: "MucCardContainer",
   setup(a) {
-    return (e, s) => (o(), i("div", it, [
-      r(e.$slots, "default", {}, void 0, !0)
+    return (e, s) => (o(), r("div", rt, [
+      i(e.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), ct = /* @__PURE__ */ b(rt, [["__scopeId", "data-v-256852e7"]]), lt = { class: "m-comment__head" }, dt = { class: "m-comment__initials" }, ut = { class: "m-comment__info" }, _t = { class: "m-comment__author" }, mt = { key: 0 }, ht = { class: "m-comment__author" }, vt = { class: "m-comment__date" }, pt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
+}), ct = /* @__PURE__ */ b(it, [["__scopeId", "data-v-256852e7"]]), lt = { class: "m-comment__head" }, ut = { class: "m-comment__initials" }, dt = { class: "m-comment__info" }, _t = { class: "m-comment__author" }, mt = { key: 0 }, ht = { class: "m-comment__author" }, pt = { class: "m-comment__date" }, vt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
   "aria-hidden": "true",
   class: "icon"
 }, [
@@ -235,74 +235,74 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
 ], -1), Ct = [
   kt
-], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, It = { class: "m-comment__text" }, Bt = "de-DE", Et = 0.2, Lt = 0.8, $ = 5, I = /* @__PURE__ */ v({
+], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, It = { class: "m-comment__text" }, Bt = "de-DE", Et = 0.2, Lt = 0.8, $ = 5, I = /* @__PURE__ */ p({
   __name: "MucComment",
   props: {
     rating: {},
     variant: { default: "listing" }
   },
   setup(a) {
-    const e = L(), s = a, n = l(() => !!e.date), c = l(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), d = l(() => s.rating.toLocaleString(Bt.valueOf(), {
+    const e = L(), s = a, n = l(() => !!e.date), c = l(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), u = l(() => s.rating.toLocaleString(Bt.valueOf(), {
       minimumFractionDigits: 1
     })), _ = l(() => {
-      const u = +(s.rating % 1).toFixed(1);
-      let k = Math.min(Math.floor(s.rating), $), p = Math.floor($ - s.rating), C = !1;
-      return s.rating !== 0 && s.rating !== $ && (u <= Et ? p++ : u >= Lt ? k++ : C = !0), {
+      const d = +(s.rating % 1).toFixed(1);
+      let k = Math.min(Math.floor(s.rating), $), v = Math.floor($ - s.rating), C = !1;
+      return s.rating !== 0 && s.rating !== $ && (d <= Et ? v++ : d >= Lt ? k++ : C = !0), {
         fullStars: k,
-        emptyStars: p,
+        emptyStars: v,
         isHalfStar: C
       };
     });
-    return (u, k) => (o(), i("div", {
+    return (d, k) => (o(), r("div", {
       class: y(["m-comment", c.value])
     }, [
       t("div", lt, [
-        t("div", dt, [
-          r(u.$slots, "initials")
-        ]),
         t("div", ut, [
+          i(d.$slots, "initials")
+        ]),
+        t("div", dt, [
           t("span", _t, [
-            r(u.$slots, "author")
+            i(d.$slots, "author")
           ]),
-          n.value ? (o(), i("span", mt, [
+          n.value ? (o(), r("span", mt, [
             t("span", ht, [
               h(" "),
-              r(u.$slots, "datePrefix")
+              i(d.$slots, "datePrefix")
             ]),
-            t("span", vt, [
+            t("span", pt, [
               h(" "),
-              r(u.$slots, "date")
+              i(d.$slots, "date")
             ])
           ])) : g("", !0),
           t("div", {
             class: "m-star-rating",
             role: "img",
-            "aria-label": `Bewertung: ${u.rating} von ${$} Sternen`
+            "aria-label": `Bewertung: ${d.rating} von ${$} Sternen`
           }, [
-            (o(!0), i(M, null, S(_.value.fullStars, (p) => (o(), i("div", {
-              key: p,
+            (o(!0), r(M, null, S(_.value.fullStars, (v) => (o(), r("div", {
+              key: v,
               class: "m-star-rating__item m-star-rating__item--full"
             }, gt))), 128)),
-            _.value.isHalfStar ? (o(), i("div", $t, bt)) : g("", !0),
-            (o(!0), i(M, null, S(_.value.emptyStars, (p) => (o(), i("div", {
-              key: p,
+            _.value.isHalfStar ? (o(), r("div", $t, bt)) : g("", !0),
+            (o(!0), r(M, null, S(_.value.emptyStars, (v) => (o(), r("div", {
+              key: v,
               class: "m-star-rating__item"
             }, Ct))), 128)),
-            t("div", Mt, m(d.value), 1)
-          ], 8, pt)
+            t("div", Mt, m(u.value), 1)
+          ], 8, vt)
         ])
       ]),
       t("div", St, [
         t("div", wt, [
-          r(u.$slots, "headline")
+          i(d.$slots, "headline")
         ]),
         t("div", It, [
-          r(u.$slots, "text")
+          i(d.$slots, "text")
         ])
       ])
     ], 2));
   }
-}), Ot = /* @__PURE__ */ v({
+}), Ot = /* @__PURE__ */ p({
   __name: "MucCommentText",
   props: {
     datePrefix: { default: "am" },
@@ -346,13 +346,16 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
       } : void 0
     ]), 1032, ["rating", "variant"]));
   }
-}), Pt = { class: "m-intro m-intro-vertical" }, Tt = { class: "m-intro-vertical__body" }, Dt = { class: "container" }, Rt = { class: "m-intro-vertical__grid" }, At = { class: "m-intro-vertical__grid-inner" }, Ht = {
+}), Pt = {
+  class: "m-intro m-intro-static-image",
+  style: { "background-color": "var(--color-neutrals-blue-xlight)" }
+}, Tt = { class: "container" }, Dt = { style: { width: "66.6%" } }, Rt = {
   key: 0,
   class: "m-intro-vertical__tagline"
-}, Wt = { class: "m-intro-vertical__title" }, jt = {
-  key: 1,
+}, At = { class: "m-intro-vertical__title" }, Ht = {
+  key: 0,
   class: "muc-divider"
-}, Ft = { class: "m-intro-vertical__content" }, Nt = /* @__PURE__ */ v({
+}, Wt = { class: "m-intro-vertical__content" }, jt = { style: { "padding-bottom": "32px" } }, Ft = /* @__PURE__ */ p({
   __name: "MucIntro",
   props: {
     title: {},
@@ -360,26 +363,24 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
     divider: { type: Boolean }
   },
   setup(a) {
-    return (e, s) => (o(), i("div", Pt, [
+    return (e, s) => (o(), r("div", Pt, [
       t("div", Tt, [
         t("div", Dt, [
-          t("div", Rt, [
-            t("div", At, [
-              e.tagline ? (o(), i("span", Ht, m(e.tagline), 1)) : g("", !0),
-              t("h1", Wt, m(e.title), 1),
-              e.divider ? (o(), i("div", jt)) : g("", !0),
-              t("div", Ft, [
-                t("p", null, [
-                  r(e.$slots, "default", {}, void 0, !0)
-                ])
-              ])
+          t("div", null, [
+            e.tagline ? (o(), r("p", Rt, m(e.tagline), 1)) : g("", !0),
+            t("h1", At, m(e.title), 1)
+          ]),
+          e.divider ? (o(), r("div", Ht)) : g("", !0),
+          t("div", Wt, [
+            t("p", jt, [
+              i(e.$slots, "default", {}, void 0, !0)
             ])
           ])
         ])
       ])
     ]));
   }
-}), Vt = /* @__PURE__ */ b(Nt, [["__scopeId", "data-v-27d2b655"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Nt = /* @__PURE__ */ b(Ft, [["__scopeId", "data-v-75c8321c"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   MucBanner: H,
   MucButton: N,
@@ -388,13 +389,13 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
   MucCardContainer: ct,
   MucComment: I,
   MucCommentText: Ot,
-  MucIntro: Vt
+  MucIntro: Nt
 }, Symbol.toStringTag, { value: "Module" }));
-function zt(a) {
+function Vt(a) {
   for (const e in w)
     a.component(e, w[e]);
 }
-const Xt = { install: zt };
+const zt = { install: Vt };
 export {
   H as MucBanner,
   N as MucButton,
@@ -403,6 +404,6 @@ export {
   ct as MucCardContainer,
   I as MucComment,
   Ot as MucCommentText,
-  Vt as MucIntro,
-  Xt as default
+  Nt as MucIntro,
+  zt as default
 };

package/dist/style.css

@@ -1 +1 @@
-.m-callout--success[data-v-efad4956]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-efad4956]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-efad4956]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-efad4956]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-27d2b655]{margin-top:8px;margin-bottom:16px}
+.m-callout--success[data-v-efad4956]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-efad4956]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-efad4956]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-efad4956]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-256852e7]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-75c8321c]{margin-top:8px;margin-bottom:16px}

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

@@ -26,12 +26,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     divider: boolean;
 }>>>, {}, {}>, Readonly<{
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }> & {
     /**
-     * Text-content of the Intro.
+     * Body of the Intro.
      */
     default(): any;
 }>;

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.8.0-beta.3",
+  "version": "1.8.0",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Intro/MucIntro.vue

@@ -16,40 +16,39 @@ defineProps<{
 
 defineSlots<{
   /**
-   * Text-content of the Intro.
+   * Body of the Intro.
    */
   default(): any;
 }>();
 </script>
 
 <template>
-  <div class="m-intro m-intro-vertical">
-    <div class="m-intro-vertical__body">
-      <div class="container">
-        <div class="m-intro-vertical__grid">
-          <div class="m-intro-vertical__grid-inner">
-            <span
+  <div class="m-intro m-intro-static-image" style="background-color: var(--color-neutrals-blue-xlight);">
+    <div
+        class="container"
+    >
+      <div style="width: 66.6%">
+        <div>
+          <p
               v-if="tagline"
               class="m-intro-vertical__tagline"
-            >
-              {{ tagline }}
-            </span>
-
-            <h1 class="m-intro-vertical__title">
-              {{ title }}
-            </h1>
+          >
+            {{ tagline }}
+          </p>
+          <h1 class="m-intro-vertical__title">
+            {{ title }}
+          </h1>
+        </div>
 
-            <div
-              v-if="divider"
-              class="muc-divider"
-            ></div>
+        <div
+            v-if="divider"
+            class="muc-divider"
+        ></div>
 
-            <div class="m-intro-vertical__content">
-              <p>
-                <slot></slot>
-              </p>
-            </div>
-          </div>
+        <div class="m-intro-vertical__content">
+          <p style="padding-bottom: 32px;">
+            <slot></slot>
+          </p>
         </div>
       </div>
     </div>