@muenchen/muc-patternlab-vue 1.1.0 → 1.2.0

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

@@ -1,4 +1,4 @@
-import { type PropType } from "vue";
+import type { PropType } from "vue";
 type bannerType = "info" | "warning" | "emergency";
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: {
@@ -16,6 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     default?(_: {}): any;
 }>;
 export default _default;
+
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,46 +1,2 @@
-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 MucBanner from "./MucBanner.vue";
+export { MucBanner };

package/dist/types/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_TypePropsToOption<{
+    type?: calloutType | undefined;
+}>, {
+    type: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    type?: calloutType | undefined;
+}>, {
+    type: string;
+}>>>, {
+    type: calloutType;
+}, {}>, {
+    icon?(_: {}): any;
+    header?(_: {}): any;
+    content?(_: {
+        class: string;
+    }): 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/Callout/index.d.ts

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

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

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

package/dist/types/index.d.ts

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

package/package.json

@@ -3,10 +3,11 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",
+  "prettier": "@muenchen/prettier-codeformat",
   "repository": {
     "type": "git",
     "url": "https://github.com/it-at-m/muc-patternlab-vue"
@@ -44,6 +45,7 @@
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@muenchen/prettier-codeformat": "^1.0.1",
     "@rushstack/eslint-patch": "^1.3.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.0",
@@ -51,8 +53,8 @@
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.10",
     "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.4",
     "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.49.0",
@@ -62,11 +64,11 @@
     "prettier": "^3.0.3",
     "rimraf": "^5.0.1",
     "semantic-release": "^23.0.0",
-    "typescript": "~5.3.0",
+    "typescript": "~5.4.0",
     "vite": "^5.0.11",
-    "vitepress": "^0.22.4",
     "vite-plugin-dts": "^3.0.0",
+    "vitepress": "^0.22.4",
     "vitest": "^1.2.2",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.0"
   }
 }

package/src/components/Banner/MucBanner.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import {computed, type PropType} from "vue";
+import type { PropType } from "vue";
+
+import { computed } from "vue";
 
 type bannerType = "info" | "warning" | "emergency";
 
 const props = defineProps({
   type: {
     type: String as PropType<bannerType>,
-    default: "info"
-  }
-})
+    default: "info",
+  },
+});
 
 const typeClass = computed(() => {
   switch (props.type) {
@@ -54,20 +56,20 @@ const typeAriaLabel = computed(() => {
   <div>
     <div>
       <div
-          class="m-banner"
-          :class="typeClass"
-          :role="typeRole"
-          :aria-label="typeAriaLabel"
+        class="m-banner"
+        :class="typeClass"
+        :role="typeRole"
+        :aria-label="typeAriaLabel"
       >
         <div class="container-fluid">
           <svg class="icon">
-            <use href="#icon-information"/>
+            <use href="#icon-information" />
           </svg>
           <p>
-            <slot/>
+            <slot />
           </p>
         </div>
       </div>
     </div>
   </div>
-</template>
+</template>

package/src/components/Banner/index.ts

@@ -1,3 +1,3 @@
-import MucBanner from "./MucBanner.vue"
+import MucBanner from "./MucBanner.vue";
 
-export default { MucBanner };
+export { MucBanner };

package/src/components/Button/MucButton.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const props = defineProps({
+defineProps({
   expanded: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 </script>
 
 <template>
@@ -13,6 +13,4 @@ const props = defineProps({
   </button>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/Button/index.ts

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

package/src/components/Callout/MucCallout.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="m-callout"
+    :class="calloutClass"
+    :aria-label="typeAriaLabel"
+  >
+    <div class="m-callout__inner">
+      <div class="m-callout__icon">
+        <slot name="icon">
+          <!-- fallback icon -->
+          <svg
+            aria-hidden="true"
+            class="icon"
+          >
+            <use :xlink:href="`#icon-${fallbackCalloutIcon}`"></use>
+          </svg>
+        </slot>
+      </div>
+      <div class="m-callout__body">
+        <div class="m-callout__body__inner">
+          <div class="m-callout__headline">
+            <slot name="header" />
+          </div>
+          <div class="m-callout__content">
+            <slot
+              name="content"
+              class="m-callout__content"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+type calloutType = "info" | "warning" | "success" | "error";
+
+const props = withDefaults(
+  defineProps<{
+    type?: calloutType;
+  }>(),
+  {
+    type: "info",
+  }
+);
+
+/*
+Computing the corresponding icon-component for the given comment-type
+ */
+const fallbackCalloutIcon = computed(() => {
+  switch (props.type) {
+    case "error" || "warning":
+      return "warning";
+    case "success":
+      return "check";
+    default:
+      return "information";
+  }
+});
+
+/*
+Computing the corresponding css-class for the given comment-type
+*/
+const calloutClass = computed(() => {
+  switch (props.type) {
+    case "error":
+      return "m-callout--error";
+    case "warning":
+      return "m-callout--warning";
+    case "success":
+      return "m-callout--success";
+    default:
+      return "m-callout--default";
+  }
+});
+
+/*
+Computing the corresponding aria-label for the given comment-type, currently in german
+*/
+const typeAriaLabel = computed(() => {
+  switch (props.type) {
+    case "success":
+      return "Erfolgreich";
+    case "warning":
+      return "Warnung";
+    case "error":
+      return "Error";
+    default:
+      return "Information";
+  }
+});
+</script>
+
+<style scoped>
+/* class below may look unused but they are used dynamically! Do NOT remove them!! */
+.m-callout--success {
+  background-color: #f1f6f3;
+  border-color: #95b9a2;
+}
+
+/* class below may look unused but they are used dynamically! Do NOT remove them!! */
+.m-callout--success .m-callout__icon {
+  background-color: #3a7f53;
+  box-shadow: 0 0.3125rem 0.625rem rgba(0, 90, 159, 0.2);
+}
+
+/* class below may look unused but they are used dynamically! Do NOT remove them!! */
+.m-callout--error {
+  background-color: #f8f2f2;
+  border-color: #c79a9b;
+}
+
+/* class below may look unused but they are used dynamically! Do NOT remove them!! */
+.m-callout--error .m-callout__icon {
+  background-color: #984447;
+  box-shadow: 0 0.3125rem 0.625rem rgba(0, 90, 159, 0.2);
+}
+</style>

package/src/components/Callout/index.ts

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

package/src/components/Intro/MucIntro.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineProps({
   title: {
-    type: String
-  }
-})
+    type: String,
+  },
+});
 </script>
 
 <template>
@@ -21,4 +21,4 @@ defineProps({
       </div>
     </div>
   </div>
-</template>
+</template>

package/src/components/Intro/index.ts

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

package/src/components/index.ts

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

package/src/index.ts

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