✨ 186 number input component (#219)

* 186: add counter component

* 186: fix format

* Update src/components/Form/MucCounter.vue

Co-authored-by: Fabian Wilms <[email protected]>

* 186: pr feedback

---------

Co-authored-by: Fabian Wilms <[email protected]>

src/components/Form/MucCounter.stories.ts

@@ -0,0 +1,47 @@
+import MucCounter from "./MucCounter.vue";
+
+export default {
+  component: MucCounter,
+  title: "Forms/MucCounter",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The MucCounter offers the functionality of a simple counter.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-combobox)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    modelValue: 0,
+    label: "This is a label",
+  },
+};
+
+export const MinAndMax = {
+  args: {
+    ...Default.args,
+    modelValue: 2,
+    min: 2,
+    max: 10,
+  },
+};
+
+export const Link = {
+  args: {
+    ...Default.args,
+    link: "#",
+  },
+};
+
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

src/components/Form/MucCounter.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="wrapper">
+    <MucButton
+      v-on:click="clickedMinus"
+      variant="secondary"
+      :disabled="disableMinus"
+    >
+      <template #default><muc-icon icon="minus" /></template>
+    </MucButton>
+    <p>
+      <strong
+        class="centered-text"
+        style="color: var(--color-brand-main-blue)"
+      >
+        {{ modelValue }}
+      </strong>
+    </p>
+    <MucButton
+      v-on:click="clickedPlus"
+      variant="secondary"
+      :disabled="disablePlus"
+    >
+      <template #default><muc-icon icon="plus" /></template>
+    </MucButton>
+    <p v-if="link">
+      <label class="centered-text">
+        <muc-link
+          :label="label"
+          :href="link"
+        ></muc-link>
+      </label>
+    </p>
+
+    <p v-else>
+      <label class="centered-text">
+        {{ label }}
+      </label>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { MucButton } from "../Button";
+import { MucIcon } from "../Icon";
+import { MucLink } from "../Link";
+
+/**
+ * Input value from the counter component.
+ */
+const modelValue = defineModel<number>({ default: 0 });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Label shown after the counter
+     */
+    label: string;
+
+    /**
+     * Optional minimum of counter
+     */
+    min?: number;
+
+    /**
+     * Optional maximum of counter
+     */
+    max?: number;
+
+    /**
+     * Optional link for label
+     */
+    link?: string;
+
+    /**
+     * Optionally disable this specific counter
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+  }
+);
+
+/**
+ * Function increases the value of modelValue by 1
+ */
+const clickedPlus = () => modelValue.value++;
+/**
+ * Function decreases the value of modelValue by 1
+ */
+const clickedMinus = () => modelValue.value--;
+
+/**
+ * Computed property if this plus button should be disabled
+ */
+const disablePlus = computed(
+  () => (!!props.max && !(modelValue.value < props.max)) || props.disabled
+);
+
+/**
+ * Computed property if this minus button should be disabled
+ */
+const disableMinus = computed(
+  () =>
+    modelValue.value == 0 ||
+    (!!props.min && !(modelValue.value > props.min)) ||
+    props.disabled
+);
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+}
+
+.wrapper > * {
+  margin: 0 8px;
+}
+
+.centered-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/components/Form/index.ts

@@ -1,5 +1,6 @@
 import MucCheckbox from "./MucCheckbox.vue";
 import MucCheckboxGroup from "./MucCheckboxGroup.vue";
+import MucCounter from "./MucCounter.vue";
 import MucErrorList from "./MucErrorList.vue";
 import MucForm from "./MucInput.vue";
 import MucInput from "./MucInput.vue";
@@ -12,6 +13,7 @@ export {
   MucForm,
   MucCheckbox,
   MucCheckboxGroup,
+  MucCounter,
   MucRadioButtonGroup,
   MucInput,
   MucRadioButton,

src/components/index.ts

@@ -7,6 +7,7 @@ import { MucDivider } from "./Divider";
 import {
   MucCheckbox,
   MucCheckboxGroup,
+  MucCounter,
   MucErrorList,
   MucInput,
   MucRadioButton,
@@ -38,4 +39,5 @@ export {
   MucIcon,
   MucDivider,
   MucLink,
+  MucCounter,
 };