@muenchen/muc-patternlab-vue 1.3.0 → 1.4.0

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

@@ -1,7 +1,7 @@
-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" }, [
+import { defineComponent as v, computed as c, openBlock as o, createElementBlock as r, createElementVNode as t, normalizeClass as y, renderSlot as i, createCommentVNode as b, useSlots as x, createTextVNode as d, Fragment as M, renderList as C, toDisplayString as h, createBlock as B, unref as E, createSlots as I, withCtx as p } from "vue";
+const L = ["role", "aria-label"], O = { class: "container-fluid" }, T = /* @__PURE__ */ t("svg", { class: "icon" }, [
   /* @__PURE__ */ t("use", { href: "#icon-information" })
-], -1), g = /* @__PURE__ */ _({
+], -1), D = /* @__PURE__ */ v({
   __name: "MucBanner",
   props: {
     type: {
@@ -9,8 +9,8 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
       default: "info"
     }
   },
-  setup(n) {
-    const e = n, s = o(() => {
+  setup(a) {
+    const e = a, n = c(() => {
       switch (e.type) {
         case "info":
           return "m-banner--info";
@@ -21,7 +21,7 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
         default:
           return "m-banner--info";
       }
-    }), a = o(() => {
+    }), s = c(() => {
       switch (e.type) {
         case "info":
           return "dialog";
@@ -32,7 +32,7 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
         default:
           return "dialog";
       }
-    }), c = o(() => {
+    }), u = c(() => {
       switch (e.type) {
         case "info":
           return "Information";
@@ -44,46 +44,73 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
           return "Information";
       }
     });
-    return (l, p) => (i(), u("div", null, [
+    return (m, _) => (o(), r("div", null, [
       t("div", null, [
         t("div", {
-          class: m(["m-banner", s.value]),
-          role: a.value,
-          "aria-label": c.value
+          class: y(["m-banner", n.value]),
+          role: s.value,
+          "aria-label": u.value
         }, [
-          t("div", y, [
-            v,
+          t("div", O, [
+            T,
             t("p", null, [
-              r(l.$slots, "default")
+              i(m.$slots, "default")
             ])
           ])
-        ], 10, h)
+        ], 10, L)
       ])
     ]));
   }
-}), b = { class: "m-button m-button--primary m-button--animated-right" }, $ = /* @__PURE__ */ _({
+}), P = ["disabled"], R = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "m-button__icon"
+}, A = ["xlink:href"], H = /* @__PURE__ */ v({
   __name: "MucButton",
   props: {
-    expanded: {
-      type: Boolean,
-      default: !1
-    }
+    variant: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    icon: {}
   },
-  setup(n) {
-    return (e, s) => (i(), u("button", b, [
-      r(e.$slots, "default")
-    ]));
+  emits: ["click"],
+  setup(a, { emit: e }) {
+    const n = a, s = e, u = c(() => {
+      switch (n.variant) {
+        case "secondary":
+          return "m-button--secondary";
+        case "ghost":
+          return "m-button--ghost";
+        default:
+          return "m-button--primary";
+      }
+    }), m = () => {
+      s("click");
+    };
+    return (_, l) => (o(), r("button", {
+      onClick: m,
+      disabled: _.disabled,
+      class: y(["m-button m-button--animated-right", u.value])
+    }, [
+      t("span", null, [
+        i(_.$slots, "default"),
+        _.icon ? (o(), r("svg", R, [
+          t("use", {
+            "xlink:href": "#icon-" + _.icon
+          }, null, 8, A)
+        ])) : b("", !0)
+      ])
+    ], 10, P));
   }
-}), w = ["aria-label"], M = { class: "m-callout__inner" }, x = { class: "m-callout__icon" }, B = {
+}), W = ["aria-label"], j = { class: "m-callout__inner" }, F = { class: "m-callout__icon" }, N = {
   "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__ */ _({
+}, V = ["xlink:href"], z = { class: "m-callout__body" }, U = { class: "m-callout__body__inner" }, X = { class: "m-callout__headline" }, q = { class: "m-callout__content" }, G = /* @__PURE__ */ v({
   __name: "MucCallout",
   props: {
     type: { default: "info" }
   },
-  setup(n) {
-    const e = n, s = o(() => {
+  setup(a) {
+    const e = a, n = c(() => {
       switch (e.type) {
         case "error":
           return "warning";
@@ -92,7 +119,7 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
         default:
           return "information";
       }
-    }), a = o(() => {
+    }), s = c(() => {
       switch (e.type) {
         case "error":
           return "m-callout--error";
@@ -103,7 +130,7 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
         default:
           return "m-callout--default";
       }
-    }), c = o(() => {
+    }), u = c(() => {
       switch (e.type) {
         case "success":
           return "Erfolgreich";
@@ -115,54 +142,189 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
           return "Information";
       }
     });
-    return (l, p) => (i(), u("div", {
-      class: m(["m-callout", a.value]),
-      "aria-label": c.value
+    return (m, _) => (o(), r("div", {
+      class: y(["m-callout", s.value]),
+      "aria-label": u.value
     }, [
-      t("div", M, [
-        t("div", x, [
-          r(l.$slots, "icon", {}, () => [
-            (i(), u("svg", B, [
+      t("div", j, [
+        t("div", F, [
+          i(m.$slots, "icon", {}, () => [
+            (o(), r("svg", N, [
               t("use", {
-                "xlink:href": `#icon-${s.value}`
-              }, null, 8, k)
+                "xlink:href": `#icon-${n.value}`
+              }, null, 8, V)
             ]))
           ], !0)
         ]),
-        t("div", I, [
-          t("div", C, [
-            t("div", S, [
-              r(l.$slots, "header", {}, void 0, !0)
+        t("div", z, [
+          t("div", U, [
+            t("div", X, [
+              i(m.$slots, "header", {}, void 0, !0)
             ]),
-            t("div", E, [
-              r(l.$slots, "content", { class: "m-callout__content" }, void 0, !0)
+            t("div", q, [
+              i(m.$slots, "content", { class: "m-callout__content" }, void 0, !0)
             ])
           ])
         ])
       ])
-    ], 10, w));
+    ], 10, W));
+  }
+}), J = (a, e) => {
+  const n = a.__vccOpts || a;
+  for (const [s, u] of e)
+    n[s] = u;
+  return n;
+}, K = /* @__PURE__ */ J(G, [["__scopeId", "data-v-e8b61339"]]), Q = { class: "m-comment__head" }, Y = { class: "m-comment__initials" }, Z = { class: "m-comment__info" }, tt = { class: "m-comment__author" }, et = { key: 0 }, nt = { class: "m-comment__author" }, st = { class: "m-comment__date" }, at = ["aria-label"], ot = /* @__PURE__ */ t("svg", {
+  "aria-hidden": "true",
+  class: "icon"
+}, [
+  /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
+], -1), rt = [
+  ot
+], it = {
+  key: 0,
+  class: "m-star-rating__item m-star-rating__item--half"
+}, ct = /* @__PURE__ */ t("svg", {
+  "aria-hidden": "true",
+  class: "icon"
+}, [
+  /* @__PURE__ */ t("use", { "xlink:href": "#icon-half-star" })
+], -1), lt = [
+  ct
+], ut = /* @__PURE__ */ t("svg", {
+  "aria-hidden": "true",
+  class: "icon"
+}, [
+  /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
+], -1), _t = [
+  ut
+], mt = { class: "m-star-rating__numeric" }, dt = { class: "m-comment__body" }, ht = { class: "m-comment__headline" }, ft = { class: "m-comment__text" }, pt = "de-DE", vt = 0.2, gt = 0.8, g = 5, w = /* @__PURE__ */ v({
+  __name: "MucComment",
+  props: {
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(a) {
+    const e = x(), n = a, s = c(() => !!e.date), u = c(() => n.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), m = c(() => n.rating.toLocaleString(pt.valueOf(), {
+      minimumFractionDigits: 1
+    })), _ = c(() => {
+      const l = +(n.rating % 1).toFixed(1);
+      let $ = Math.min(Math.floor(n.rating), g), f = Math.floor(g - n.rating), k = !1;
+      return n.rating !== 0 && n.rating !== g && (l <= vt ? f++ : l >= gt ? $++ : k = !0), {
+        fullStars: $,
+        emptyStars: f,
+        isHalfStar: k
+      };
+    });
+    return (l, $) => (o(), r("div", {
+      class: y(["m-comment", u.value])
+    }, [
+      t("div", Q, [
+        t("div", Y, [
+          i(l.$slots, "initials")
+        ]),
+        t("div", Z, [
+          t("span", tt, [
+            i(l.$slots, "author")
+          ]),
+          s.value ? (o(), r("span", et, [
+            t("span", nt, [
+              d(" "),
+              i(l.$slots, "datePrefix")
+            ]),
+            t("span", st, [
+              d(" "),
+              i(l.$slots, "date")
+            ])
+          ])) : b("", !0),
+          t("div", {
+            class: "m-star-rating",
+            role: "img",
+            "aria-label": `Bewertung: ${l.rating} von ${g} Sternen`
+          }, [
+            (o(!0), r(M, null, C(_.value.fullStars, (f) => (o(), r("div", {
+              key: f,
+              class: "m-star-rating__item m-star-rating__item--full"
+            }, rt))), 128)),
+            _.value.isHalfStar ? (o(), r("div", it, lt)) : b("", !0),
+            (o(!0), r(M, null, C(_.value.emptyStars, (f) => (o(), r("div", {
+              key: f,
+              class: "m-star-rating__item"
+            }, _t))), 128)),
+            t("div", mt, h(m.value), 1)
+          ], 8, at)
+        ])
+      ]),
+      t("div", dt, [
+        t("div", ht, [
+          i(l.$slots, "headline")
+        ]),
+        t("div", ft, [
+          i(l.$slots, "text")
+        ])
+      ])
+    ], 2));
+  }
+}), yt = /* @__PURE__ */ v({
+  __name: "MucCommentText",
+  props: {
+    datePrefix: { default: "am" },
+    initials: {},
+    author: {},
+    date: {},
+    headline: {},
+    text: {},
+    rating: {},
+    variant: { default: "listing" }
+  },
+  setup(a) {
+    const e = a, n = c(() => e.initials ?? e.author.split(" ").map((s) => s.charAt(0)).join(""));
+    return (s, u) => (o(), B(E(w), {
+      rating: s.rating,
+      variant: s.variant
+    }, I({
+      initials: p(() => [
+        d(h(n.value), 1)
+      ]),
+      datePrefix: p(() => [
+        d("am")
+      ]),
+      author: p(() => [
+        d(h(s.author), 1)
+      ]),
+      headline: p(() => [
+        d(h(s.headline), 1)
+      ]),
+      text: p(() => [
+        d(h(s.text), 1)
+      ]),
+      _: 2
+    }, [
+      s.date ? {
+        name: "date",
+        fn: p(() => [
+          d(h(s.date), 1)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["rating", "variant"]));
   }
-}), 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__ */ _({
+}), $t = { class: "m-intro m-intro-summary-text" }, bt = { class: "container" }, kt = { class: "m-intro-summary-text__body" }, Mt = { class: "m-intro-summary-text__grid" }, Ct = { class: "m-intro-summary-text__content" }, St = { class: "m-intro-summary-text__title" }, wt = /* @__PURE__ */ v({
   __name: "MucIntro",
   props: {
     title: {
       type: String
     }
   },
-  setup(n) {
-    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),
+  setup(a) {
+    return (e, n) => (o(), r("div", $t, [
+      t("div", bt, [
+        t("div", kt, [
+          t("div", Mt, [
+            t("div", Ct, [
+              t("h1", St, h(a.title), 1),
               t("p", null, [
-                r(e.$slots, "default")
+                i(e.$slots, "default")
               ])
             ])
           ])
@@ -170,22 +332,26 @@ const h = ["role", "aria-label"], y = { class: "container-fluid" }, v = /* @__PU
       ])
     ]));
   }
-}), d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), S = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MucBanner: g,
-  MucButton: $,
-  MucCallout: z,
-  MucIntro: R
+  MucBanner: D,
+  MucButton: H,
+  MucCallout: K,
+  MucComment: w,
+  MucCommentText: yt,
+  MucIntro: wt
 }, Symbol.toStringTag, { value: "Module" }));
-function T(n) {
-  for (const e in d)
-    n.component(e, d[e]);
+function xt(a) {
+  for (const e in S)
+    a.component(e, S[e]);
 }
-const q = { install: T };
+const Et = { install: xt };
 export {
-  g as MucBanner,
-  $ as MucButton,
-  z as MucCallout,
-  R as MucIntro,
-  q as default
+  D as MucBanner,
+  H as MucButton,
+  K as MucCallout,
+  w as MucComment,
+  yt as MucCommentText,
+  wt as MucIntro,
+  Et as default
 };

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

@@ -1,21 +1,48 @@
-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;
+type buttonType = "primary" | "secondary" | "ghost";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    variant?: buttonType | undefined;
+    disabled?: boolean | undefined;
+    icon?: string | undefined;
+}>, {
+    variant: string;
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    variant?: buttonType | undefined;
+    disabled?: boolean | undefined;
+    icon?: string | undefined;
+}>, {
+    variant: string;
+    disabled: boolean;
+}>>> & {
+    onClick?: (() => any) | undefined;
+}, {
+    variant: buttonType;
+    disabled: boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
+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;
     };
 };
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

package/dist/types/components/Comment/CommentType.d.ts

@@ -0,0 +1,2 @@
+type CommentType = "listing" | "slider";
+export default CommentType;

package/dist/types/components/Comment/MucComment.vue.d.ts

@@ -0,0 +1,44 @@
+import CommentType from "./CommentType";
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    rating: number;
+    variant?: CommentType | undefined;
+}>, {
+    variant: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    rating: number;
+    variant?: CommentType | undefined;
+}>, {
+    variant: string;
+}>>>, {
+    variant: CommentType;
+}, {}>, {
+    initials?(_: {}): any;
+    author?(_: {}): any;
+    datePrefix?(_: {}): any;
+    date?(_: {}): any;
+    headline?(_: {}): any;
+    text?(_: {}): any;
+}>;
+export default _default;
+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;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

package/dist/types/components/Comment/MucCommentText.vue.d.ts

@@ -0,0 +1,47 @@
+import CommentType from "./CommentType";
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    datePrefix?: string | undefined;
+    initials?: string | undefined;
+    author: string;
+    date?: string | undefined;
+    headline?: string | undefined;
+    text: string;
+    rating: number;
+    variant: CommentType;
+}>, {
+    datePrefix: string;
+    variant: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    datePrefix?: string | undefined;
+    initials?: string | undefined;
+    author: string;
+    date?: string | undefined;
+    headline?: string | undefined;
+    text: string;
+    rating: number;
+    variant: CommentType;
+}>, {
+    datePrefix: string;
+    variant: string;
+}>>>, {
+    variant: CommentType;
+    datePrefix: string;
+}, {}>;
+export default _default;
+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_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};

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

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

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

@@ -1,5 +1,6 @@
 import { MucBanner } from "./Banner";
 import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
+import { MucComment, MucCommentText } from "./Comment/";
 import { MucIntro } from "./Intro";
-export { MucButton, MucBanner, MucIntro, MucCallout };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucComment, MucCommentText, };

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.3.0",
+  "version": "1.4.0",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",

package/src/components/Button/MucButton.vue

@@ -1,16 +1,56 @@
-<script setup lang="ts">
-defineProps({
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
 <template>
-  <button class="m-button m-button--primary m-button--animated-right">
-    <slot />
+  <button
+    @click="handleClick"
+    :disabled="disabled"
+    class="m-button m-button--animated-right"
+    :class="buttonClass"
+  >
+    <span>
+      <slot />
+      <svg
+        v-if="icon"
+        aria-hidden="true"
+        class="m-button__icon"
+      >
+        <use :xlink:href="'#icon-' + icon"></use>
+      </svg>
+    </span>
   </button>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import { computed } from "vue";
+
+type buttonType = "primary" | "secondary" | "ghost";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: buttonType;
+    disabled?: boolean;
+    icon?: string;
+  }>(),
+  {
+    variant: "primary",
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
+
+const buttonClass = computed(() => {
+  switch (props.variant) {
+    case "secondary":
+      return "m-button--secondary";
+    case "ghost":
+      return "m-button--ghost";
+    default:
+      return "m-button--primary";
+  }
+});
+
+const handleClick = () => {
+  emit("click");
+};
+</script>

package/src/components/Comment/CommentType.ts

@@ -0,0 +1,3 @@
+type CommentType = "listing" | "slider";
+
+export default CommentType;