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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/assets/temporary/custom-style.css +1 -1
  2. package/dist/components/Comment/MucCommentText.stories.d.ts +93 -0
  3. package/dist/components/Comment/MucCommentText.vue.d.ts +2 -2
  4. package/dist/components/Intro/MucIntro.vue.d.ts +2 -2
  5. package/dist/muc-patternlab-vue.es.js +89 -88
  6. package/dist/style.css +1 -1
  7. package/dist/types/components/Comment/MucCommentText.stories.d.ts +93 -0
  8. package/dist/types/components/Comment/MucCommentText.vue.d.ts +2 -2
  9. package/dist/types/components/Intro/MucIntro.vue.d.ts +2 -2
  10. package/package.json +1 -1
  11. package/src/components/Card/MucCardContainer.vue +1 -1
  12. package/src/components/Comment/MucComment.stories.ts +2 -3
  13. package/src/components/Comment/MucCommentText.stories.ts +38 -0
  14. package/src/components/Comment/MucCommentText.vue +15 -7
  15. package/src/components/Intro/MucIntro.vue +26 -26
package/dist/assets/temporary/custom-style.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * We need this css to ensure the correct patternlab
3
3
  * behaviour inside of a webcomponent.
4
4
  */
5
- :root {
5
+ :host {
6
6
  --color-brand-main-blue: #005A9F;
7
7
  --color-neutrals-blue: #BDD4EA;
8
8
  --color-neutrals-blue-xlight: #F2F6FA;
package/dist/components/Comment/MucCommentText.stories.d.ts ADDED
@@ -0,0 +1,93 @@
1
+ declare const _default: {
2
+ component: import('vue').DefineComponent<{
3
+ text: {
4
+ type: import('vue').PropType<string>;
5
+ required: true;
6
+ };
7
+ variant: {
8
+ type: import('vue').PropType<import('./CommentType').default>;
9
+ default: string;
10
+ };
11
+ rating: {
12
+ type: import('vue').PropType<number>;
13
+ required: true;
14
+ };
15
+ date: {
16
+ type: import('vue').PropType<string>;
17
+ };
18
+ initials: {
19
+ type: import('vue').PropType<string>;
20
+ };
21
+ author: {
22
+ type: import('vue').PropType<string>;
23
+ required: true;
24
+ };
25
+ datePrefix: {
26
+ type: import('vue').PropType<string>;
27
+ default: string;
28
+ };
29
+ headline: {
30
+ type: import('vue').PropType<string>;
31
+ };
32
+ }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
33
+ text: {
34
+ type: import('vue').PropType<string>;
35
+ required: true;
36
+ };
37
+ variant: {
38
+ type: import('vue').PropType<import('./CommentType').default>;
39
+ default: string;
40
+ };
41
+ rating: {
42
+ type: import('vue').PropType<number>;
43
+ required: true;
44
+ };
45
+ date: {
46
+ type: import('vue').PropType<string>;
47
+ };
48
+ initials: {
49
+ type: import('vue').PropType<string>;
50
+ };
51
+ author: {
52
+ type: import('vue').PropType<string>;
53
+ required: true;
54
+ };
55
+ datePrefix: {
56
+ type: import('vue').PropType<string>;
57
+ default: string;
58
+ };
59
+ headline: {
60
+ type: import('vue').PropType<string>;
61
+ };
62
+ }>>, {
63
+ variant: import('./CommentType').default;
64
+ datePrefix: string;
65
+ }, {}>;
66
+ title: string;
67
+ tags: string[];
68
+ parameters: {
69
+ docs: {
70
+ description: {
71
+ component: string;
72
+ };
73
+ };
74
+ };
75
+ };
76
+ export default _default;
77
+ export declare const Default: {
78
+ args: {
79
+ rating: number;
80
+ author: string;
81
+ headline: string;
82
+ text: string;
83
+ };
84
+ };
85
+ export declare const Slider: {
86
+ args: {
87
+ rating: number;
88
+ author: string;
89
+ headline: string;
90
+ variant: string;
91
+ text: string;
92
+ };
93
+ };
package/dist/components/Comment/MucCommentText.vue.d.ts CHANGED
@@ -8,7 +8,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
8
8
  headline?: string | undefined;
9
9
  text: string;
10
10
  rating: number;
11
- variant: CommentType;
11
+ variant?: CommentType | undefined;
12
12
  }>, {
13
13
  datePrefix: string;
14
14
  variant: string;
@@ -20,7 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
20
20
  headline?: string | undefined;
21
21
  text: string;
22
22
  rating: number;
23
- variant: CommentType;
23
+ variant?: CommentType | undefined;
24
24
  }>, {
25
25
  datePrefix: string;
26
26
  variant: string;
package/dist/components/Intro/MucIntro.vue.d.ts CHANGED
@@ -26,12 +26,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
26
26
  divider: boolean;
27
27
  }>>>, {}, {}>, Readonly<{
28
28
  /**
29
- * Text-content of the Intro.
29
+ * Body of the Intro.
30
30
  */
31
31
  default(): any;
32
32
  }> & {
33
33
  /**
34
- * Text-content of the Intro.
34
+ * Body of the Intro.
35
35
  */
36
36
  default(): any;
37
37
  }>;
package/dist/muc-patternlab-vue.es.js CHANGED
@@ -1,7 +1,7 @@
1
- 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";
2
- const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PURE__ */ t("svg", { class: "icon" }, [
1
+ 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 I, popScopeId as B, useSlots as O, createTextVNode as h, Fragment as M, renderList as S, createBlock as R, unref as T, createSlots as A, withCtx as f } from "vue";
2
+ const L = ["role", "aria-label"], P = { class: "container-fluid" }, D = /* @__PURE__ */ t("svg", { class: "icon" }, [
3
3
  /* @__PURE__ */ t("use", { href: "#icon-information" })
4
- ], -1), H = /* @__PURE__ */ v({
4
+ ], -1), H = /* @__PURE__ */ p({
5
5
  __name: "MucBanner",
6
6
  props: {
7
7
  type: { default: "info" }
@@ -41,28 +41,28 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
41
41
  return "Information";
42
42
  }
43
43
  });
44
- return (d, _) => (o(), i("div", null, [
44
+ return (d, _) => (o(), r("div", null, [
45
45
  t("div", null, [
46
46
  t("div", {
47
47
  class: y(["m-banner", s.value]),
48
48
  role: n.value,
49
49
  "aria-label": c.value
50
50
  }, [
51
- t("div", R, [
52
- A,
51
+ t("div", P, [
52
+ D,
53
53
  t("p", null, [
54
- r(d.$slots, "default")
54
+ i(d.$slots, "default")
55
55
  ])
56
56
  ])
57
- ], 10, D)
57
+ ], 10, L)
58
58
  ])
59
59
  ]));
60
60
  }
61
- }), W = ["disabled"], j = {
61
+ }), j = ["disabled"], N = {
62
62
  key: 0,
63
63
  "aria-hidden": "true",
64
64
  class: "m-button__icon"
65
- }, F = ["xlink:href"], N = /* @__PURE__ */ v({
65
+ }, W = ["xlink:href"], F = /* @__PURE__ */ p({
66
66
  __name: "MucButton",
67
67
  props: {
68
68
  variant: { default: "primary" },
@@ -83,25 +83,25 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
83
83
  }), d = () => {
84
84
  n("click");
85
85
  };
86
- return (_, u) => (o(), i("button", {
86
+ return (_, u) => (o(), r("button", {
87
87
  onClick: d,
88
88
  disabled: _.disabled,
89
89
  class: y(["m-button m-button--animated-right", c.value])
90
90
  }, [
91
91
  t("span", null, [
92
- r(_.$slots, "default"),
93
- _.icon ? (o(), i("svg", j, [
92
+ i(_.$slots, "default"),
93
+ _.icon ? (o(), r("svg", N, [
94
94
  t("use", {
95
95
  "xlink:href": "#icon-" + _.icon
96
- }, null, 8, F)
96
+ }, null, 8, W)
97
97
  ])) : g("", !0)
98
98
  ])
99
- ], 10, W));
99
+ ], 10, j));
100
100
  }
101
- }), V = ["aria-label"], z = { class: "m-callout__inner" }, U = { class: "m-callout__icon" }, X = {
101
+ }), V = ["aria-label"], x = { class: "m-callout__inner" }, z = { class: "m-callout__icon" }, U = {
102
102
  "aria-hidden": "true",
103
103
  class: "icon"
104
- }, 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({
104
+ }, 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({
105
105
  __name: "MucCallout",
106
106
  props: {
107
107
  type: { default: "info" }
@@ -139,28 +139,28 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
139
139
  return "Information";
140
140
  }
141
141
  });
142
- return (d, _) => (o(), i("div", {
142
+ return (d, _) => (o(), r("div", {
143
143
  class: y(["m-callout", n.value]),
144
144
  "aria-label": c.value
145
145
  }, [
146
- t("div", z, [
147
- t("div", U, [
148
- r(d.$slots, "icon", {}, () => [
149
- (o(), i("svg", X, [
146
+ t("div", x, [
147
+ t("div", z, [
148
+ i(d.$slots, "icon", {}, () => [
149
+ (o(), r("svg", U, [
150
150
  t("use", {
151
151
  "xlink:href": `#icon-${s.value}`
152
- }, null, 8, q)
152
+ }, null, 8, X)
153
153
  ]))
154
154
  ], !0)
155
155
  ]),
156
- t("div", x, [
156
+ t("div", q, [
157
157
  t("div", G, [
158
158
  t("div", J, [
159
- r(d.$slots, "header", {}, void 0, !0)
159
+ i(d.$slots, "header", {}, void 0, !0)
160
160
  ]),
161
161
  t("div", K, [
162
162
  t("p", null, [
163
- r(d.$slots, "content", { class: "m-callout__content" }, void 0, !0)
163
+ i(d.$slots, "content", { class: "m-callout__content" }, void 0, !0)
164
164
  ])
165
165
  ])
166
166
  ])
@@ -173,10 +173,10 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
173
173
  for (const [n, c] of e)
174
174
  s[n] = c;
175
175
  return s;
176
- }, 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 = {
176
+ }, Y = /* @__PURE__ */ b(Q, [["__scopeId", "data-v-efad4956"]]), Z = (a) => (I("data-v-acf0a1dd"), a = a(), B(), a), tt = { class: "card-content" }, et = { class: "card-header" }, nt = {
177
177
  key: 0,
178
178
  class: "card-tagline"
179
- }, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ v({
179
+ }, st = /* @__PURE__ */ Z(() => /* @__PURE__ */ t("div", { class: "muc-divider" }, null, -1)), at = /* @__PURE__ */ p({
180
180
  __name: "MucCard",
181
181
  props: {
182
182
  title: {},
@@ -185,33 +185,33 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
185
185
  emits: ["click"],
186
186
  setup(a, { emit: e }) {
187
187
  const s = e;
188
- return (n, c) => (o(), i("div", {
188
+ return (n, c) => (o(), r("div", {
189
189
  class: "card",
190
190
  onClick: c[0] || (c[0] = (d) => s("click", d))
191
191
  }, [
192
192
  t("div", tt, [
193
193
  t("div", et, [
194
- r(n.$slots, "headerPrefix", {}, void 0, !0),
194
+ i(n.$slots, "headerPrefix", {}, void 0, !0),
195
195
  t("div", null, [
196
- n.tagline ? (o(), i("div", nt, m(n.tagline), 1)) : g("", !0),
196
+ n.tagline ? (o(), r("div", nt, m(n.tagline), 1)) : g("", !0),
197
197
  t("div", null, [
198
198
  t("h3", null, m(n.title), 1)
199
199
  ])
200
200
  ])
201
201
  ]),
202
202
  st,
203
- r(n.$slots, "content", {}, void 0, !0)
203
+ i(n.$slots, "content", {}, void 0, !0)
204
204
  ])
205
205
  ]));
206
206
  }
207
- }), ot = /* @__PURE__ */ b(at, [["__scopeId", "data-v-acf0a1dd"]]), it = { class: "container card-container" }, rt = /* @__PURE__ */ v({
207
+ }), ot = /* @__PURE__ */ b(at, [["__scopeId", "data-v-acf0a1dd"]]), rt = { class: "container card-container" }, it = /* @__PURE__ */ p({
208
208
  __name: "MucCardContainer",
209
209
  setup(a) {
210
- return (e, s) => (o(), i("div", it, [
211
- r(e.$slots, "default", {}, void 0, !0)
210
+ return (e, s) => (o(), r("div", rt, [
211
+ i(e.$slots, "default", {}, void 0, !0)
212
212
  ]));
213
213
  }
214
- }), 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", {
214
+ }), ct = /* @__PURE__ */ b(it, [["__scopeId", "data-v-6740df8f"]]), 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" }, pt = { class: "m-comment__date" }, vt = ["aria-label"], ft = /* @__PURE__ */ t("svg", {
215
215
  "aria-hidden": "true",
216
216
  class: "icon"
217
217
  }, [
@@ -235,43 +235,43 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
235
235
  /* @__PURE__ */ t("use", { "xlink:href": "#icon-solid-star" })
236
236
  ], -1), Ct = [
237
237
  kt
238
- ], 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({
238
+ ], Mt = { class: "m-star-rating__numeric" }, St = { class: "m-comment__body" }, wt = { class: "m-comment__headline" }, Et = { class: "m-comment__text" }, It = "de-DE", Bt = 0.2, Ot = 0.8, $ = 5, E = /* @__PURE__ */ p({
239
239
  __name: "MucComment",
240
240
  props: {
241
241
  rating: {},
242
242
  variant: { default: "listing" }
243
243
  },
244
244
  setup(a) {
245
- 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(), {
245
+ const e = O(), s = a, n = l(() => !!e.date), c = l(() => s.variant === "slider" ? "m-comment--slider" : "m-comment--listing"), d = l(() => s.rating.toLocaleString(It.valueOf(), {
246
246
  minimumFractionDigits: 1
247
247
  })), _ = l(() => {
248
248
  const u = +(s.rating % 1).toFixed(1);
249
- let k = Math.min(Math.floor(s.rating), $), p = Math.floor($ - s.rating), C = !1;
250
- return s.rating !== 0 && s.rating !== $ && (u <= Et ? p++ : u >= Lt ? k++ : C = !0), {
249
+ let k = Math.min(Math.floor(s.rating), $), v = Math.floor($ - s.rating), C = !1;
250
+ return s.rating !== 0 && s.rating !== $ && (u <= Bt ? v++ : u >= Ot ? k++ : C = !0), {
251
251
  fullStars: k,
252
- emptyStars: p,
252
+ emptyStars: v,
253
253
  isHalfStar: C
254
254
  };
255
255
  });
256
- return (u, k) => (o(), i("div", {
256
+ return (u, k) => (o(), r("div", {
257
257
  class: y(["m-comment", c.value])
258
258
  }, [
259
259
  t("div", lt, [
260
260
  t("div", dt, [
261
- r(u.$slots, "initials")
261
+ i(u.$slots, "initials")
262
262
  ]),
263
263
  t("div", ut, [
264
264
  t("span", _t, [
265
- r(u.$slots, "author")
265
+ i(u.$slots, "author")
266
266
  ]),
267
- n.value ? (o(), i("span", mt, [
267
+ n.value ? (o(), r("span", mt, [
268
268
  t("span", ht, [
269
269
  h(" "),
270
- r(u.$slots, "datePrefix")
270
+ i(u.$slots, "datePrefix")
271
271
  ]),
272
- t("span", vt, [
272
+ t("span", pt, [
273
273
  h(" "),
274
- r(u.$slots, "date")
274
+ i(u.$slots, "date")
275
275
  ])
276
276
  ])) : g("", !0),
277
277
  t("div", {
@@ -279,30 +279,30 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
279
279
  role: "img",
280
280
  "aria-label": `Bewertung: ${u.rating} von ${$} Sternen`
281
281
  }, [
282
- (o(!0), i(M, null, S(_.value.fullStars, (p) => (o(), i("div", {
283
- key: p,
282
+ (o(!0), r(M, null, S(_.value.fullStars, (v) => (o(), r("div", {
283
+ key: v,
284
284
  class: "m-star-rating__item m-star-rating__item--full"
285
285
  }, gt))), 128)),
286
- _.value.isHalfStar ? (o(), i("div", $t, bt)) : g("", !0),
287
- (o(!0), i(M, null, S(_.value.emptyStars, (p) => (o(), i("div", {
288
- key: p,
286
+ _.value.isHalfStar ? (o(), r("div", $t, bt)) : g("", !0),
287
+ (o(!0), r(M, null, S(_.value.emptyStars, (v) => (o(), r("div", {
288
+ key: v,
289
289
  class: "m-star-rating__item"
290
290
  }, Ct))), 128)),
291
291
  t("div", Mt, m(d.value), 1)
292
- ], 8, pt)
292
+ ], 8, vt)
293
293
  ])
294
294
  ]),
295
295
  t("div", St, [
296
296
  t("div", wt, [
297
- r(u.$slots, "headline")
297
+ i(u.$slots, "headline")
298
298
  ]),
299
- t("div", It, [
300
- r(u.$slots, "text")
299
+ t("div", Et, [
300
+ i(u.$slots, "text")
301
301
  ])
302
302
  ])
303
303
  ], 2));
304
304
  }
305
- }), Ot = /* @__PURE__ */ v({
305
+ }), Rt = " ", Tt = /* @__PURE__ */ p({
306
306
  __name: "MucCommentText",
307
307
  props: {
308
308
  datePrefix: { default: "am" },
@@ -315,11 +315,11 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
315
315
  variant: { default: "listing" }
316
316
  },
317
317
  setup(a) {
318
- const e = a, s = l(() => e.initials ?? e.author.split(" ").map((n) => n.charAt(0)).join(""));
319
- return (n, c) => (o(), O(P(I), {
318
+ const e = a, s = l(() => ((e.initials ?? e.author.split(Rt).map((n) => n.charAt(0)).join("")).match(/^.|.$/g) ?? [""]).join(""));
319
+ return (n, c) => (o(), R(T(E), {
320
320
  rating: n.rating,
321
321
  variant: n.variant
322
- }, T({
322
+ }, A({
323
323
  initials: f(() => [
324
324
  h(m(s.value), 1)
325
325
  ]),
@@ -346,13 +346,16 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
346
346
  } : void 0
347
347
  ]), 1032, ["rating", "variant"]));
348
348
  }
349
- }), 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 = {
349
+ }), At = {
350
+ class: "m-intro m-intro-static-image",
351
+ style: { "background-color": "var(--color-neutrals-blue-xlight)" }
352
+ }, Lt = { class: "container" }, Pt = { style: { width: "66.6%" } }, Dt = {
350
353
  key: 0,
351
354
  class: "m-intro-vertical__tagline"
352
- }, Wt = { class: "m-intro-vertical__title" }, jt = {
353
- key: 1,
355
+ }, Ht = { class: "m-intro-vertical__title" }, jt = {
356
+ key: 0,
354
357
  class: "muc-divider"
355
- }, Ft = { class: "m-intro-vertical__content" }, Nt = /* @__PURE__ */ v({
358
+ }, Nt = { class: "m-intro-vertical__content" }, Wt = { style: { "padding-bottom": "32px" } }, Ft = /* @__PURE__ */ p({
356
359
  __name: "MucIntro",
357
360
  props: {
358
361
  title: {},
@@ -360,49 +363,47 @@ const D = ["role", "aria-label"], R = { class: "container-fluid" }, A = /* @__PU
360
363
  divider: { type: Boolean }
361
364
  },
362
365
  setup(a) {
363
- return (e, s) => (o(), i("div", Pt, [
364
- t("div", Tt, [
365
- t("div", Dt, [
366
- t("div", Rt, [
367
- t("div", At, [
368
- e.tagline ? (o(), i("span", Ht, m(e.tagline), 1)) : g("", !0),
369
- t("h1", Wt, m(e.title), 1),
370
- e.divider ? (o(), i("div", jt)) : g("", !0),
371
- t("div", Ft, [
372
- t("p", null, [
373
- r(e.$slots, "default", {}, void 0, !0)
374
- ])
375
- ])
366
+ return (e, s) => (o(), r("div", At, [
367
+ t("div", Lt, [
368
+ t("div", Pt, [
369
+ t("div", null, [
370
+ e.tagline ? (o(), r("p", Dt, m(e.tagline), 1)) : g("", !0),
371
+ t("h1", Ht, m(e.title), 1)
372
+ ]),
373
+ e.divider ? (o(), r("div", jt)) : g("", !0),
374
+ t("div", Nt, [
375
+ t("p", Wt, [
376
+ i(e.$slots, "default", {}, void 0, !0)
376
377
  ])
377
378
  ])
378
379
  ])
379
380
  ])
380
381
  ]));
381
382
  }
382
- }), Vt = /* @__PURE__ */ b(Nt, [["__scopeId", "data-v-27d2b655"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
383
+ }), Vt = /* @__PURE__ */ b(Ft, [["__scopeId", "data-v-3957c1bd"]]), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
383
384
  __proto__: null,
384
385
  MucBanner: H,
385
- MucButton: N,
386
+ MucButton: F,
386
387
  MucCallout: Y,
387
388
  MucCard: ot,
388
389
  MucCardContainer: ct,
389
- MucComment: I,
390
- MucCommentText: Ot,
390
+ MucComment: E,
391
+ MucCommentText: Tt,
391
392
  MucIntro: Vt
392
393
  }, Symbol.toStringTag, { value: "Module" }));
393
- function zt(a) {
394
+ function xt(a) {
394
395
  for (const e in w)
395
396
  a.component(e, w[e]);
396
397
  }
397
- const Xt = { install: zt };
398
+ const Ut = { install: xt };
398
399
  export {
399
400
  H as MucBanner,
400
- N as MucButton,
401
+ F as MucButton,
401
402
  Y as MucCallout,
402
403
  ot as MucCard,
403
404
  ct as MucCardContainer,
404
- I as MucComment,
405
- Ot as MucCommentText,
405
+ E as MucComment,
406
+ Tt as MucCommentText,
406
407
  Vt as MucIntro,
407
- Xt as default
408
+ Ut as default
408
409
  };
package/dist/style.css CHANGED
@@ -1 +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}
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-6740df8f]{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-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.muc-divider[data-v-3957c1bd]{margin-top:8px;margin-bottom:16px}
package/dist/types/components/Comment/MucCommentText.stories.d.ts ADDED
@@ -0,0 +1,93 @@
1
+ declare const _default: {
2
+ component: import("vue").DefineComponent<{
3
+ text: {
4
+ type: import("vue").PropType<string>;
5
+ required: true;
6
+ };
7
+ variant: {
8
+ type: import("vue").PropType<import("./CommentType.js").default>;
9
+ default: string;
10
+ };
11
+ rating: {
12
+ type: import("vue").PropType<number>;
13
+ required: true;
14
+ };
15
+ date: {
16
+ type: import("vue").PropType<string>;
17
+ };
18
+ initials: {
19
+ type: import("vue").PropType<string>;
20
+ };
21
+ author: {
22
+ type: import("vue").PropType<string>;
23
+ required: true;
24
+ };
25
+ datePrefix: {
26
+ type: import("vue").PropType<string>;
27
+ default: string;
28
+ };
29
+ headline: {
30
+ type: import("vue").PropType<string>;
31
+ };
32
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
33
+ text: {
34
+ type: import("vue").PropType<string>;
35
+ required: true;
36
+ };
37
+ variant: {
38
+ type: import("vue").PropType<import("./CommentType.js").default>;
39
+ default: string;
40
+ };
41
+ rating: {
42
+ type: import("vue").PropType<number>;
43
+ required: true;
44
+ };
45
+ date: {
46
+ type: import("vue").PropType<string>;
47
+ };
48
+ initials: {
49
+ type: import("vue").PropType<string>;
50
+ };
51
+ author: {
52
+ type: import("vue").PropType<string>;
53
+ required: true;
54
+ };
55
+ datePrefix: {
56
+ type: import("vue").PropType<string>;
57
+ default: string;
58
+ };
59
+ headline: {
60
+ type: import("vue").PropType<string>;
61
+ };
62
+ }>>, {
63
+ variant: import("./CommentType.js").default;
64
+ datePrefix: string;
65
+ }, {}>;
66
+ title: string;
67
+ tags: string[];
68
+ parameters: {
69
+ docs: {
70
+ description: {
71
+ component: string;
72
+ };
73
+ };
74
+ };
75
+ };
76
+ export default _default;
77
+ export declare const Default: {
78
+ args: {
79
+ rating: number;
80
+ author: string;
81
+ headline: string;
82
+ text: string;
83
+ };
84
+ };
85
+ export declare const Slider: {
86
+ args: {
87
+ rating: number;
88
+ author: string;
89
+ headline: string;
90
+ variant: string;
91
+ text: string;
92
+ };
93
+ };
package/dist/types/components/Comment/MucCommentText.vue.d.ts CHANGED
@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
7
7
  headline?: string | undefined;
8
8
  text: string;
9
9
  rating: number;
10
- variant: CommentType;
10
+ variant?: CommentType | undefined;
11
11
  }>, {
12
12
  datePrefix: string;
13
13
  variant: string;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
19
19
  headline?: string | undefined;
20
20
  text: string;
21
21
  rating: number;
22
- variant: CommentType;
22
+ variant?: CommentType | undefined;
23
23
  }>, {
24
24
  datePrefix: string;
25
25
  variant: string;
package/dist/types/components/Intro/MucIntro.vue.d.ts CHANGED
@@ -26,12 +26,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
26
26
  divider: boolean;
27
27
  }>>>, {}, {}>, Readonly<{
28
28
  /**
29
- * Text-content of the Intro.
29
+ * Body of the Intro.
30
30
  */
31
31
  default(): any;
32
32
  }> & {
33
33
  /**
34
- * Text-content of the Intro.
34
+ * Body of the Intro.
35
35
  */
36
36
  default(): any;
37
37
  }>;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "FabianWilms",
4
4
  "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
5
5
  "license": "MIT",
6
- "version": "1.8.0-beta.3",
6
+ "version": "1.8.0-beta.5",
7
7
  "private": false,
8
8
  "module": "./dist/muc-patternlab-vue.es.js",
9
9
  "types": "./dist/types/index.d.ts",
package/src/components/Card/MucCardContainer.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="container card-container">
3
- <slot/>
3
+ <slot />
4
4
  </div>
5
5
  </template>
6
6
 
package/src/components/Comment/MucComment.stories.ts CHANGED
@@ -2,14 +2,13 @@ import MucComment from "./MucComment.vue";
2
2
 
3
3
  export default {
4
4
  component: MucComment,
5
- title: "MucComment",
5
+ title: "Comment/MucComment",
6
6
  tags: ["autodocs"],
7
7
  parameters: {
8
8
  docs: {
9
9
  description: {
10
10
  component: `The muc-comment component can be used to display a comment in e.g. a chat.
11
- If you would like to display only text, we suggest using the more specific \`muc-comment-text\`.
12
- For more general integration, we recommend the more general \`muc-comment\`.
11
+ The \`muc-comment\`-component is designed to be as generic as possible.
13
12
 
14
13
  [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
15
14
  `,
package/src/components/Comment/MucCommentText.stories.ts ADDED
@@ -0,0 +1,38 @@
1
+ import MucCommentText from "./MucCommentText.vue";
2
+
3
+ export default {
4
+ component: MucCommentText,
5
+ title: "Comment/MucCommentText",
6
+ tags: ["autodocs"],
7
+ parameters: {
8
+ docs: {
9
+ description: {
10
+ component: `The muc-comment component can be used to display a comment in e.g. a chat.
11
+ If you would like to display only text, we suggest using this component instead of the more generic \`muc-comment\`.
12
+ Furthermore this component does limit the number of charactesr for the initials to two.
13
+
14
+ [🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-comment)
15
+ `,
16
+ },
17
+ },
18
+ },
19
+ };
20
+
21
+ export const Default = {
22
+ args: {
23
+ rating: 4.2,
24
+ author: "Max Foo Bar Mustermann",
25
+ headline: "Initials shortend",
26
+ text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut",
27
+ },
28
+ };
29
+
30
+ export const Slider = {
31
+ args: {
32
+ ...Default.args,
33
+ rating: 2.3,
34
+ author: "",
35
+ headline: "Empty Author",
36
+ variant: "slider",
37
+ },
38
+ };
package/src/components/Comment/MucCommentText.vue CHANGED
@@ -22,6 +22,8 @@ import { computed } from "vue";
22
22
  import { MucComment } from "../index";
23
23
  import CommentType from "./CommentType";
24
24
 
25
+ const AUTHOR_NAME_SEPERATOR = " ";
26
+
25
27
  const props = withDefaults(
26
28
  defineProps<{
27
29
  datePrefix?: string;
@@ -31,7 +33,7 @@ const props = withDefaults(
31
33
  headline?: string;
32
34
  text: string;
33
35
  rating: number;
34
- variant: CommentType;
36
+ variant?: CommentType;
35
37
  }>(),
36
38
  {
37
39
  datePrefix: "am",
@@ -39,14 +41,20 @@ const props = withDefaults(
39
41
  }
40
42
  );
41
43
 
44
+ /**
45
+ * Initials will be computed if none are given.
46
+ * In the case of an empty author field, an empty string is returned for the initials.
47
+ */
42
48
  const computedInitials = computed(() => {
43
49
  return (
44
- props.initials ??
45
- props.author
46
- .split(" ")
47
- .map((word) => word.charAt(0))
48
- .join("")
49
- );
50
+ (
51
+ props.initials ??
52
+ props.author
53
+ .split(AUTHOR_NAME_SEPERATOR)
54
+ .map((word) => word.charAt(0))
55
+ .join("")
56
+ ).match(/^.|.$/g) ?? [""]
57
+ ).join("");
50
58
  });
51
59
  </script>
52
60
 
package/src/components/Intro/MucIntro.vue CHANGED
@@ -16,40 +16,40 @@ defineProps<{
16
16
 
17
17
  defineSlots<{
18
18
  /**
19
- * Text-content of the Intro.
19
+ * Body of the Intro.
20
20
  */
21
21
  default(): any;
22
22
  }>();
23
23
  </script>
24
24
 
25
25
  <template>
26
- <div class="m-intro m-intro-vertical">
27
- <div class="m-intro-vertical__body">
28
- <div class="container">
29
- <div class="m-intro-vertical__grid">
30
- <div class="m-intro-vertical__grid-inner">
31
- <span
32
- v-if="tagline"
33
- class="m-intro-vertical__tagline"
34
- >
35
- {{ tagline }}
36
- </span>
37
-
38
- <h1 class="m-intro-vertical__title">
39
- {{ title }}
40
- </h1>
26
+ <div
27
+ class="m-intro m-intro-static-image"
28
+ style="background-color: var(--color-neutrals-blue-xlight)"
29
+ >
30
+ <div class="container">
31
+ <div style="width: 66.6%">
32
+ <div>
33
+ <p
34
+ v-if="tagline"
35
+ class="m-intro-vertical__tagline"
36
+ >
37
+ {{ tagline }}
38
+ </p>
39
+ <h1 class="m-intro-vertical__title">
40
+ {{ title }}
41
+ </h1>
42
+ </div>
41
43
 
42
- <div
43
- v-if="divider"
44
- class="muc-divider"
45
- ></div>
44
+ <div
45
+ v-if="divider"
46
+ class="muc-divider"
47
+ ></div>
46
48
 
47
- <div class="m-intro-vertical__content">
48
- <p>
49
- <slot></slot>
50
- </p>
51
- </div>
52
- </div>
49
+ <div class="m-intro-vertical__content">
50
+ <p style="padding-bottom: 32px">
51
+ <slot></slot>
52
+ </p>
53
53
  </div>
54
54
  </div>
55
55
  </div>