@muenchen/muc-patternlab-vue 1.8.0-beta.7 → 1.8.0-beta.9

package/src/components/Icon/MucIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    aria-hidden="true"
+    class="m-button__icon"
+    :style="{ color: color }"
+  >
+    <use :href="'#icon-' + icon" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  /**
+   * String of the icon to be displayed.
+   */
+  icon: string;
+
+  /**
+   * Optional css-color for the icon.
+   */
+  color?: string;
+}>();
+</script>

package/src/components/Icon/index.ts

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

package/src/components/index.ts

@@ -3,6 +3,7 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
+import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
 
 export {
@@ -14,4 +15,5 @@ export {
   MucCardContainer,
   MucComment,
   MucCommentText,
+  MucIcon,
 };

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

@@ -1,76 +0,0 @@
-declare const _default: {
-    component: {
-        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: Readonly<{
-            default(): any;
-        }> & {
-            default(): any;
-        };
-    });
-    title: string;
-    tags: string[];
-    excludeStories: RegExp;
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {
-        default: string;
-        type: string;
-    };
-};
-export declare const Warning: {
-    args: {
-        default: string;
-        type: string;
-    };
-};
-export declare const Emergency: {
-    args: {
-        default: string;
-        type: string;
-    };
-};

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

@@ -1,52 +0,0 @@
-type bannerType = "info" | "warning" | "emergency";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * Changes the style of the banner. Available types are `info`, `warning` and `emergency`.
-     */
-    type?: bannerType | undefined;
-}>, {
-    type: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * Changes the style of the banner. Available types are `info`, `warning` and `emergency`.
-     */
-    type?: bannerType | undefined;
-}>, {
-    type: string;
-}>>>, {
-    type: bannerType;
-}, {}>, Readonly<{
-    /**
-     * Text-content of the banner.
-     */
-    default(): any;
-}> & {
-    /**
-     * Text-content of the banner.
-     */
-    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/Banner/index.d.ts

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

package/dist/types/components/BuisnessHours/BusinessHourType.d.ts

@@ -1,25 +0,0 @@
-/**
- * Shorthand notation of all seven days in german.
- *
- * @typedef {"Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So"} WeekDays
- */
-type WeekDays = "Mo" | "Di" | "Mi" | "Do" | "Fr" | "Sa" | "So";
-/**
- * @typedef {Object} OpeningHour
- * @property {string} from - The start time of the opening period (in 'HH:mm' format).
- * @property {string} to - The end time of the opening period (in 'HH:mm' format).
- */
-type OpeningHour = {
-    from: string;
-    to: string;
-};
-/**
- * @typedef {Object} BusinessHourType
- * @property {WeekDays} weekDay - The day of the week for which the opening hours apply.
- * @property {OpeningHour[]} openingHours - A list of opening hours for the specified day of the week.
- */
-type BusinessHourType = {
-    weekDay: WeekDays;
-    openingHours: OpeningHour[];
-};
-export type { BusinessHourType, OpeningHour, WeekDays };

package/dist/types/components/BuisnessHours/BusinessHours.stories.d.ts

@@ -1,116 +0,0 @@
-declare const _default: {
-    component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            businessHours: {
-                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
-                required: true;
-            };
-            toggleable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            businessHours: {
-                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
-                required: true;
-            };
-            toggleable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>>, {
-            icon: string;
-            toggleable: boolean;
-        }, true, {}, {}, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            businessHours: {
-                type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
-                required: true;
-            };
-            toggleable: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>>, {}, {}, {}, {}, {
-            icon: string;
-            toggleable: boolean;
-        }>;
-        __isFragment?: undefined;
-        __isTeleport?: undefined;
-        __isSuspense?: undefined;
-    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-        icon: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        businessHours: {
-            type: import("vue").PropType<import("./BusinessHourType.js").BusinessHourType[]>;
-            required: true;
-        };
-        toggleable: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
-    }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        icon: string;
-        toggleable: boolean;
-    }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: Readonly<{
-            hint(): any;
-        }> & {
-            hint(): any;
-        };
-    });
-    title: string;
-    tags: string[];
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {
-        businessHours: {
-            weekDay: string;
-            openingHours: {
-                from: string;
-                to: string;
-            }[];
-        }[];
-        toggleable: boolean;
-    };
-};
-export declare const Fixed: {
-    args: {
-        toggleable: boolean;
-        businessHours: {
-            weekDay: string;
-            openingHours: {
-                from: string;
-                to: string;
-            }[];
-        }[];
-    };
-};

package/dist/types/components/BuisnessHours/MucBusinessHours.vue.d.ts

@@ -1,72 +0,0 @@
-import { BusinessHourType } from "./BusinessHourType";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * This array includes all the opening hours for all days of the week.
-     */
-    businessHours: BusinessHourType[];
-    /**
-     * Lets you choose between the toggleable and fixed state of the component.
-     * In the fixed state, no toggle button will be shown.
-     */
-    toggleable?: boolean | undefined;
-    /**
-     * Choose an icon for the toggle button. The default if none is given is the time icon.
-     */
-    icon?: string | undefined;
-}>, {
-    icon: string;
-    toggleable: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * This array includes all the opening hours for all days of the week.
-     */
-    businessHours: BusinessHourType[];
-    /**
-     * Lets you choose between the toggleable and fixed state of the component.
-     * In the fixed state, no toggle button will be shown.
-     */
-    toggleable?: boolean | undefined;
-    /**
-     * Choose an icon for the toggle button. The default if none is given is the time icon.
-     */
-    icon?: string | undefined;
-}>, {
-    icon: string;
-    toggleable: boolean;
-}>>>, {
-    icon: string;
-    toggleable: boolean;
-}, {}>, Readonly<{
-    /**
-     * Display a hint beneath all the opening hours.
-     */
-    hint(): any;
-}> & {
-    /**
-     * Display a hint beneath all the opening hours.
-     */
-    hint(): 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/Button/MucButton.stories.d.ts

@@ -1,158 +0,0 @@
-declare const _default: {
-    component: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-            };
-            variant: {
-                type: import("vue").PropType<"primary" | "secondary" | "ghost">;
-                default: string;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            iconAnimated: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>> & {
-            onClick?: (() => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: () => void;
-        }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-            };
-            variant: {
-                type: import("vue").PropType<"primary" | "secondary" | "ghost">;
-                default: string;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            iconAnimated: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>> & {
-            onClick?: (() => any) | undefined;
-        }, {
-            variant: "primary" | "secondary" | "ghost";
-            disabled: boolean;
-            iconAnimated: boolean;
-        }, true, {}, {}, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            icon: {
-                type: import("vue").PropType<string>;
-            };
-            variant: {
-                type: import("vue").PropType<"primary" | "secondary" | "ghost">;
-                default: string;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            iconAnimated: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-        }>> & {
-            onClick?: (() => any) | undefined;
-        }, {}, {}, {}, {}, {
-            variant: "primary" | "secondary" | "ghost";
-            disabled: boolean;
-            iconAnimated: boolean;
-        }>;
-        __isFragment?: undefined;
-        __isTeleport?: undefined;
-        __isSuspense?: undefined;
-    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-        icon: {
-            type: import("vue").PropType<string>;
-        };
-        variant: {
-            type: import("vue").PropType<"primary" | "secondary" | "ghost">;
-            default: string;
-        };
-        disabled: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
-        iconAnimated: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
-    }>> & {
-        onClick?: (() => any) | undefined;
-    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        click: () => void;
-    }, string, {
-        variant: "primary" | "secondary" | "ghost";
-        disabled: boolean;
-        iconAnimated: boolean;
-    }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: Readonly<{
-            default(): any;
-        }> & {
-            default(): any;
-        };
-    });
-    title: string;
-    tags: string[];
-    args: {
-        onClick: import("@vitest/spy").Mock<any, any>;
-    };
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {
-        default: string;
-    };
-};
-export declare const Secondary: {
-    args: {
-        default: string;
-        variant: string;
-    };
-};
-export declare const Ghost: {
-    args: {
-        default: string;
-        variant: string;
-    };
-};
-export declare const Disabled: {
-    args: {
-        default: string;
-        disabled: boolean;
-    };
-};
-export declare const Icon: {
-    args: {
-        default: string;
-        icon: string;
-    };
-};
-export declare const IconAnimated: {
-    args: {
-        default: string;
-        icon: string;
-        iconAnimated: boolean;
-    };
-};

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

@@ -1,93 +0,0 @@
-type buttonType = "primary" | "secondary" | "ghost";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * The variant prop gives you easy access to several different button styles.
-     *
-     * Available are `primary`, `secondary` and `ghost`.
-     */
-    variant?: buttonType | undefined;
-    /**
-     * Let`s you indicate that the button is not currently interactive or clickable.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
-     */
-    icon?: string | undefined;
-    /**
-     * Wether the Icon should be animated on hover (slide-right) or not.
-     *
-     * Default is `false`
-     */
-    iconAnimated?: boolean | undefined;
-}>, {
-    variant: string;
-    disabled: boolean;
-    iconAnimated: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    /**
-     * The variant prop gives you easy access to several different button styles.
-     *
-     * Available are `primary`, `secondary` and `ghost`.
-     */
-    variant?: buttonType | undefined;
-    /**
-     * Let`s you indicate that the button is not currently interactive or clickable.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Choose an icon to be appended behind the slot. No icon will be placed if the prop is left empty.
-     */
-    icon?: string | undefined;
-    /**
-     * Wether the Icon should be animated on hover (slide-right) or not.
-     *
-     * Default is `false`
-     */
-    iconAnimated?: boolean | undefined;
-}>, {
-    variant: string;
-    disabled: boolean;
-    iconAnimated: boolean;
-}>>> & {
-    onClick?: (() => any) | undefined;
-}, {
-    variant: buttonType;
-    disabled: boolean;
-    iconAnimated: boolean;
-}, {}>, Readonly<{
-    /**
-     * Display content inside the button.
-     */
-    default(): any;
-}> & {
-    /**
-     * Display content inside the button.
-     */
-    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/Button/index.d.ts

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