Skip to content

Commit 5c4345c

Browse files
langehmlangehm
authored
✨ 51 adding form components (#101)
* 💩 added muc-input component #51 * 📝 saving #51 * 📝 added documentation for props and model-value #51 * ✨ added search functionality and other types of input #51 * 📝 added examples for new input types #51 * 📝 fixed suffix type #51 * 📝 simplified prefix example #51 * 🚸 improved behavior of search form #51 * 🚸 improved required text #51 * 📝 * ✨ added textarea component #51 * 📝 added textarea documentation #51 * 📝 added textarea documentation #51 * 📝 splitted into group and box #51 * 📝 Moved to Forms Folder #51 * 🧑‍💻 adjusted collapse of in the group #51 * 📝 updated documentation with new links and texts #51 * 📝 updated code documentation #51 * 📝 updated code documentation #51 * 📝 updated code documentation #51 * 📝 save #51 * 📝 added first implementation of radiobuttons #51 * 📝 working implementation of the radiobutton #51 * 📝 added jsdoc #51 * working radiobuttons #51 * 📝 added jsdoc to radiobutton group #51 * 📝 added jsdoc to radiobutton #51 * Added import of components #51 * ✨ introduced single select form #51 * 📝 added documentation for singleselect #51 * changed example #51 * 📝 documentation description #51 * multiselect example #51 * 🍺 removed index from singleselect logic #51 * added multiselect functionality #51 * 💩 added multiselect functionality restructered datastrcuture #51 * added multiselect functionality restructered datastrcuture #51 * Comment suggestions #51 * Added basic error list #51 * 📝 Updated documentation #51 * allow different data types on error list #51 * cleanup #51 * 🚨 linted and formated #51 * 🐛 fixed checkbox clicking behavior #51 * 📝 fixed doumentation of error list #51
1 parent 71ec4ca commit 5c4345c

18 files changed

+1151
-0
lines changed

‎src/components/Form/MucCheckbox.stories.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import MucCheckbox from "./MucCheckbox.vue";
2+
3+
export default {
4+
component: MucCheckbox,
5+
title: "Forms/MucCheckBox",
6+
tags: ["autodocs"],
7+
parameters: {
8+
docs: {
9+
description: {
10+
component: `The MucCheckBox component is a UI element that allows users to make a binary choice, such as "yes" or "no".
11+
It is typically used in forms and settings where multiple options can be selected independently.
12+
13+
14+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes)
15+
`,
16+
},
17+
},
18+
},
19+
};
20+
21+
export const Default = {
22+
args: {
23+
label: "This is a checkbox - click me",
24+
},
25+
};

‎src/components/Form/MucCheckbox.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div
3+
class="m-checkboxes__item"
4+
@click="clickedCheckbox"
5+
>
6+
<input
7+
class="m-checkboxes__input"
8+
name="checkbox"
9+
type="checkbox"
10+
:checked="checkBoxValue"
11+
@click.stop="clickedCheckbox"
12+
/>
13+
<label class="m-label m-checkboxes__label">
14+
{{ label }} {{ checkBoxValue }}
15+
</label>
16+
</div>
17+
</template>
18+
19+
<script setup lang="ts">
20+
/**
21+
* Input value from the checkbox component.
22+
*/
23+
const checkBoxValue = defineModel<boolean>("modelValue", { default: false });
24+
25+
defineProps<{
26+
/**
27+
* Label is displayed to the right of the checkbox as information for the user.
28+
*/
29+
label: string;
30+
}>();
31+
32+
const emit = defineEmits<{
33+
/**
34+
* Emits every time the checkbox or the label is clicked - thus switching the state.
35+
* @param e emits the click event.
36+
*/
37+
(e: "click"): void;
38+
}>();
39+
40+
/**
41+
* Called upon clicking the checkbox or label, switches the state of the checkbox and emits the event.
42+
*/
43+
const clickedCheckbox = () => {
44+
checkBoxValue.value = !checkBoxValue.value;
45+
emit("click");
46+
};
47+
</script>

‎src/components/Form/MucCheckboxGroup.stories.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import MucCheckbox from "./MucCheckbox.vue";
2+
import MucCheckboxGroup from "./MucCheckboxGroup.vue";
3+
4+
export default {
5+
components: { MucCheckboxGroup, MucCheckbox },
6+
component: MucCheckboxGroup,
7+
title: "Forms/MucCheckboxGroup",
8+
tags: ["autodocs"],
9+
parameters: {
10+
docs: {
11+
description: {
12+
component: `The MucCheckboxGroup component is a wrapper designed to group multiple MucCheckBox components together, allowing users to select multiple options from a set.
13+
14+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes-collapse)`,
15+
},
16+
},
17+
},
18+
};
19+
20+
export const NotCollapsable = () => ({
21+
components: { MucCheckbox, MucCheckboxGroup },
22+
template: `
23+
<MucCheckboxGroup heading="Collapsable checkbox group ">
24+
<template #checkboxes>
25+
<MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
26+
</template>
27+
</MucCheckboxGroup>
28+
`,
29+
});
30+
31+
export const Collapsable = () => ({
32+
components: { MucCheckbox, MucCheckboxGroup },
33+
template: `
34+
<MucCheckboxGroup heading="Collapsable checkbox group ">
35+
<template #checkboxes>
36+
<MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
37+
</template>
38+
<template #collapsableCheckboxes>
39+
<MucCheckbox v-for="index in 4" :key="index" :label="'collapsed-' + index" />
40+
</template>
41+
</MucCheckboxGroup>
42+
`,
43+
});

‎src/components/Form/MucCheckboxGroup.vue‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<div class="m-form-group">
3+
<fieldset class="m-checkbox-group">
4+
<legend class="m-checkbox-group__legend">
5+
<h3 class="m-checkbox-group__heading">
6+
{{ heading }}
7+
</h3>
8+
</legend>
9+
<div class="m-checkboxes m-checkboxes--collapse">
10+
<slot name="checkboxes" />
11+
<div
12+
v-if="$slots.collapsableCheckboxes"
13+
class="m-checkboxes__collapse__container"
14+
:class="isCollapsed"
15+
>
16+
<slot name="collapsableCheckboxes" />
17+
</div>
18+
<muc-button
19+
v-if="$slots.collapsableCheckboxes"
20+
variant="ghost"
21+
@click="toggleCollapse"
22+
:aria-expanded="!collapsed"
23+
>
24+
<span>Mehr </span>
25+
<svg
26+
aria-hidden="true"
27+
class="icon icon--after"
28+
>
29+
<use :href="'#icon-chevron-' + buttonIcon"></use>
30+
</svg>
31+
</muc-button>
32+
</div>
33+
</fieldset>
34+
</div>
35+
</template>
36+
37+
<script setup lang="ts">
38+
import { computed, ref } from "vue";
39+
40+
import { MucButton } from "../Button";
41+
42+
/**
43+
* Internal state for the collapsed section
44+
*/
45+
const collapsed = ref(true);
46+
47+
defineProps<{
48+
/**
49+
* Display a heading above the slots.
50+
*/
51+
heading?: string;
52+
}>();
53+
54+
defineSlots<{
55+
/**
56+
* Slot directly beneath the heading which will be displayed at all times.
57+
*/
58+
checkboxes(): any;
59+
60+
/**
61+
* Slot beneath the regular checkbox slot which will be collapsed at first.
62+
*/
63+
collapsableCheckboxes(): any;
64+
}>();
65+
66+
/**
67+
* Switches the collapse class for the collapsable container.
68+
*/
69+
const isCollapsed = computed(() => (collapsed.value ? "collapse" : ""));
70+
71+
/**
72+
* Switches the icon in the button to collapse / expand the container.
73+
*/
74+
const buttonIcon = computed(() => (collapsed.value ? "down" : "up"));
75+
76+
/**
77+
* Toggles the internal state for the collapsed container.
78+
*/
79+
const toggleCollapse = () => (collapsed.value = !collapsed.value);
80+
</script>

‎src/components/Form/MucErrorList.stories.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import MucErrorList from "./MucErrorList.vue";
2+
3+
export default {
4+
component: MucErrorList,
5+
title: "Forms/MucErrorList",
6+
tags: ["autodocs"],
7+
parameters: {
8+
docs: {
9+
description: {
10+
component: `Simple display of one or more errors as a list.
11+
12+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-error-list)
13+
`,
14+
},
15+
},
16+
},
17+
};
18+
19+
export const Default = {
20+
args: {
21+
title: "A problem occurred!",
22+
errors: "Only one error line",
23+
},
24+
};
25+
26+
export const Multiple = {
27+
args: {
28+
title: "A problem occurred!",
29+
errors: ["Error 1", "Error 2", "Error 3", "Error 4"],
30+
},
31+
};

‎src/components/Form/MucErrorList.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div
3+
class="m-error-list"
4+
role="alert"
5+
tabindex="-1"
6+
>
7+
<h2 class="m-error-list__title">
8+
{{ title }}
9+
</h2>
10+
<div class="m-error-list__body">
11+
<ul class="m-list m-error-list__list">
12+
<li
13+
v-for="(error, index) in listOfErrors"
14+
:key="index"
15+
>
16+
<a>{{ error }} </a>
17+
</li>
18+
</ul>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script setup lang="ts">
24+
import { computed } from "vue";
25+
26+
const props = defineProps<{
27+
title?: string;
28+
errors: string | string[];
29+
}>();
30+
31+
const listOfErrors = computed(() =>
32+
typeof props.errors === "string" ? [props.errors] : props.errors
33+
);
34+
</script>

‎src/components/Form/MucInput.stories.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import MucInput from "./MucInput.vue";
2+
3+
export default {
4+
component: MucInput,
5+
title: "Forms/MucInput",
6+
tags: ["autodocs"],
7+
parameters: {
8+
docs: {
9+
description: {
10+
component: `The MucInput component is a text-based input field.
11+
Various types are allowed e.g. datepicker or password.
12+
It supports various styling options like prefixes /suffixes, buttons and can also be displayed as a textarea.
13+
14+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-input-text)
15+
`,
16+
},
17+
},
18+
},
19+
};
20+
21+
export const Default = {
22+
args: {
23+
placeholder: "Please type here",
24+
},
25+
};
26+
27+
export const HintAndLabel = {
28+
args: {
29+
...Default.args,
30+
hint: "This is a hint",
31+
label: "This is a label",
32+
},
33+
};
34+
35+
export const Password = {
36+
args: {
37+
...Default.args,
38+
type: "password",
39+
modelValue: "password",
40+
hint: "The input text is 'password'",
41+
},
42+
};
43+
44+
export const Error = {
45+
args: {
46+
...Default.args,
47+
errorMsg: "Oops, an error occurred",
48+
hint: "An error message triggers the error state",
49+
},
50+
};
51+
52+
export const Prefix = {
53+
args: {
54+
...Default.args,
55+
prefix: "Prefix",
56+
},
57+
};
58+
59+
export const SuffixIcon = {
60+
args: {
61+
...Default.args,
62+
suffixIcon: "search",
63+
},
64+
};
65+
66+
export const Search = {
67+
args: {
68+
...Default.args,
69+
type: "search",
70+
datalist: ["chocolate", "coconut", "vanilla", "mint"],
71+
},
72+
};
73+
74+
export const Color = {
75+
args: {
76+
type: "color",
77+
},
78+
};
79+
80+
export const Date = {
81+
args: {
82+
type: "date",
83+
},
84+
};
85+
86+
export const Datetime_Local = {
87+
args: {
88+
type: "datetime-local",
89+
},
90+
};

0 commit comments

Comments
 (0)