@muenchen/muc-patternlab-vue 1.11.0-beta.2 → 1.11.0-beta.3

package/README.md

@@ -69,10 +69,7 @@ So to use an icon from Patternlab you can simply follow the official
 documentation: https://patternlab.muenchen.space/?p=viewall-guidelines-icons
 
 ```html
-
-<svg aria-hidden="true" class="icon">
-    <use xlink:href="#icon-{name}"></use>
-</svg>
+<muc-icon :icon="name"/>
 ```
 
 ## Contributing

package/dist/components/Form/MucCheckbox.stories.d.ts

@@ -0,0 +1,34 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        modelValue: import('vue').PropType<boolean>;
+        label: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: () => void;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        modelValue: import('vue').PropType<boolean>;
+        label: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+    }>> & {
+        onClick?: (() => any) | undefined;
+    }, {}, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+    };
+};

package/dist/components/Form/MucCheckbox.vue.d.ts

@@ -0,0 +1,18 @@
+declare const _default: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<boolean>;
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<boolean>;
+    label: {
+        type: import('vue').PropType<string>;
+        required: true;
+    };
+}>> & {
+    onClick?: (() => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/components/Form/MucCheckboxGroup.stories.d.ts

@@ -0,0 +1,223 @@
+declare const _default: {
+    components: {
+        MucCheckboxGroup: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            }> & {
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            };
+        });
+        MucCheckbox: import('vue').DefineComponent<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: () => void;
+        }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: (() => any) | undefined;
+        }, {}, {}>;
+    };
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        heading: {
+            type: import('vue').PropType<string>;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            checkboxes(): any;
+            collapsableCheckboxes(): any;
+        }> & {
+            checkboxes(): any;
+            collapsableCheckboxes(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const NotCollapsable: () => {
+    components: {
+        MucCheckbox: import('vue').DefineComponent<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: () => void;
+        }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: (() => any) | undefined;
+        }, {}, {}>;
+        MucCheckboxGroup: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            }> & {
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            };
+        });
+    };
+    template: string;
+};
+export declare const Collapsable: () => {
+    components: {
+        MucCheckbox: import('vue').DefineComponent<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: () => void;
+        }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<boolean>;
+            label: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: (() => any) | undefined;
+        }, {}, {}>;
+        MucCheckboxGroup: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{
+                heading: {
+                    type: import('vue').PropType<string>;
+                };
+            }>>, {}, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            heading: {
+                type: import('vue').PropType<string>;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            }> & {
+                checkboxes(): any;
+                collapsableCheckboxes(): any;
+            };
+        });
+    };
+    template: string;
+};

package/dist/components/Form/MucCheckboxGroup.vue.d.ts

@@ -0,0 +1,46 @@
+declare function __VLS_template(): Readonly<{
+    /**
+     * Slot directly beneath the heading which will be displayed at all times.
+     */
+    checkboxes(): any;
+    /**
+     * Slot beneath the regular checkbox slot which will be collapsed at first.
+     */
+    collapsableCheckboxes(): any;
+}> & {
+    /**
+     * Slot directly beneath the heading which will be displayed at all times.
+     */
+    checkboxes(): any;
+    /**
+     * Slot beneath the regular checkbox slot which will be collapsed at first.
+     */
+    collapsableCheckboxes(): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Display a heading above the slots.
+     */
+    heading?: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /**
+     * Display a heading above the slots.
+     */
+    heading?: string;
+}>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Form/MucErrorList.stories.d.ts

@@ -0,0 +1,41 @@
+declare const _default: {
+    component: import('vue').DefineComponent<{
+        title: {
+            type: import('vue').PropType<string>;
+        };
+        errors: {
+            type: import('vue').PropType<string | string[]>;
+            required: true;
+        };
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+        };
+        errors: {
+            type: import('vue').PropType<string | string[]>;
+            required: true;
+        };
+    }>>, {}, {}>;
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        title: string;
+        errors: string;
+    };
+};
+export declare const Multiple: {
+    args: {
+        title: string;
+        errors: string[];
+    };
+};

package/dist/components/Form/MucErrorList.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    errors: string | string[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    errors: string | string[];
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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/components/Form/MucInput.stories.d.ts

@@ -0,0 +1,225 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<string>;
+            type: {
+                type: import('vue').PropType<"color" | "search" | "text" | "date" | "datetime-local" | "password">;
+                default: string;
+            };
+            required: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+            datalist: {
+                type: import('vue').PropType<string[]>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+            };
+            hint: {
+                type: import('vue').PropType<string>;
+            };
+            errorMsg: {
+                type: import('vue').PropType<string>;
+            };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
+            suffixIcon: {
+                type: import('vue').PropType<string>;
+            };
+        }>> & {
+            onSuffixClick?: (() => any) | undefined;
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            suffixClick: () => void;
+        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<string>;
+            type: {
+                type: import('vue').PropType<"color" | "search" | "text" | "date" | "datetime-local" | "password">;
+                default: string;
+            };
+            required: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+            datalist: {
+                type: import('vue').PropType<string[]>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+            };
+            hint: {
+                type: import('vue').PropType<string>;
+            };
+            errorMsg: {
+                type: import('vue').PropType<string>;
+            };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
+            suffixIcon: {
+                type: import('vue').PropType<string>;
+            };
+        }>> & {
+            onSuffixClick?: (() => any) | undefined;
+        }, {
+            type: "color" | "search" | "text" | "date" | "datetime-local" | "password";
+            required: boolean;
+        }, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            modelValue: import('vue').PropType<string>;
+            type: {
+                type: import('vue').PropType<"color" | "search" | "text" | "date" | "datetime-local" | "password">;
+                default: string;
+            };
+            required: {
+                type: import('vue').PropType<boolean>;
+                default: boolean;
+            };
+            datalist: {
+                type: import('vue').PropType<string[]>;
+            };
+            label: {
+                type: import('vue').PropType<string>;
+            };
+            hint: {
+                type: import('vue').PropType<string>;
+            };
+            errorMsg: {
+                type: import('vue').PropType<string>;
+            };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
+            suffixIcon: {
+                type: import('vue').PropType<string>;
+            };
+        }>> & {
+            onSuffixClick?: (() => any) | undefined;
+        }, {}, {}, {}, {}, {
+            type: "color" | "search" | "text" | "date" | "datetime-local" | "password";
+            required: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        modelValue: import('vue').PropType<string>;
+        type: {
+            type: import('vue').PropType<"color" | "search" | "text" | "date" | "datetime-local" | "password">;
+            default: string;
+        };
+        required: {
+            type: import('vue').PropType<boolean>;
+            default: boolean;
+        };
+        datalist: {
+            type: import('vue').PropType<string[]>;
+        };
+        label: {
+            type: import('vue').PropType<string>;
+        };
+        hint: {
+            type: import('vue').PropType<string>;
+        };
+        errorMsg: {
+            type: import('vue').PropType<string>;
+        };
+        placeholder: {
+            type: import('vue').PropType<string>;
+        };
+        suffixIcon: {
+            type: import('vue').PropType<string>;
+        };
+    }>> & {
+        onSuffixClick?: (() => any) | undefined;
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        suffixClick: () => void;
+    }, string, {
+        type: "color" | "search" | "text" | "date" | "datetime-local" | "password";
+        required: boolean;
+    }, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            prefix(): any;
+        }> & {
+            prefix(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        placeholder: string;
+    };
+};
+export declare const HintAndLabel: {
+    args: {
+        hint: string;
+        label: string;
+        placeholder: string;
+    };
+};
+export declare const Password: {
+    args: {
+        type: string;
+        modelValue: string;
+        hint: string;
+        placeholder: string;
+    };
+};
+export declare const Error: {
+    args: {
+        errorMsg: string;
+        hint: string;
+        placeholder: string;
+    };
+};
+export declare const Prefix: {
+    args: {
+        prefix: string;
+        placeholder: string;
+    };
+};
+export declare const SuffixIcon: {
+    args: {
+        suffixIcon: string;
+        placeholder: string;
+    };
+};
+export declare const Search: {
+    args: {
+        type: string;
+        datalist: string[];
+        placeholder: string;
+    };
+};
+export declare const Color: {
+    args: {
+        type: string;
+    };
+};
+export declare const Date: {
+    args: {
+        type: string;
+    };
+};
+export declare const Datetime_Local: {
+    args: {
+        type: string;
+    };
+};