@muenchen/muc-patternlab-vue 1.13.0-beta.4 → 1.13.0-beta.6

package/dist/style.css

@@ -1 +1 @@
-.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.divider-border[data-v-a2b37f5b]{border-bottom:1px solid var(--color-neutrals-blue)}.display-listbox[data-v-0f229e1b]{display:block!important}.muc-divider[data-v-9ad3adc7]{margin-top:8px;margin-bottom:16px}
+.m-banner--success[data-v-53bc7eca]{background-color:#f1f6f3;border-bottom:1px solid #3a7f53}.m-callout--success[data-v-e6cf4104]{background-color:#f1f6f3;border-color:#95b9a2}.m-callout--success .m-callout__icon[data-v-e6cf4104]{background-color:#3a7f53;box-shadow:0 .3125rem .625rem #005a9f33}.m-callout--error[data-v-e6cf4104]{background-color:#f8f2f2;border-color:#c79a9b}.m-callout--error .m-callout__icon[data-v-e6cf4104]{background-color:#984447;box-shadow:0 .3125rem .625rem #005a9f33}.card[data-v-acf0a1dd]{cursor:pointer;border:solid 1px var(--color-neutrals-blue);border-bottom:solid 5px var(--color-brand-main-blue);transition:background-color ease-in .15s}.card[data-v-acf0a1dd]:hover{background-color:#f1f1f1}.card-content[data-v-acf0a1dd]{padding:32px 24px}.card-header[data-v-acf0a1dd]{display:flex}.card-tagline[data-v-acf0a1dd]{font-size:16px;font-family:Open Sans,sans-serif;color:#005a9f;font-weight:700;line-height:24px;word-wrap:break-word;padding-bottom:4px}.muc-divider[data-v-acf0a1dd]{margin-top:16px;margin-bottom:16px}@media all and (min-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:grid;grid-template-columns:repeat(auto-fit,384px);grid-column-gap:32px;grid-row-gap:32px}}@media all and (max-width: 992px){.card-container[data-v-6740df8f]{padding-left:0;padding-right:0;display:inline-grid;grid-template-columns:1fr;grid-row-gap:32px}}.divider-border[data-v-a2b37f5b]{border-bottom:1px solid var(--color-neutrals-blue)}.wrapper[data-v-a20e4a10]{display:flex}.wrapper[data-v-a20e4a10]>*{margin:0 8px}.centered-text[data-v-a20e4a10]{display:flex;justify-content:center;align-items:center;height:100%}.display-listbox[data-v-0f229e1b]{display:block!important}.muc-divider[data-v-5c768acc]{margin-top:8px;margin-bottom:16px}@media screen and (width >992px){.muc-intro-content[data-v-5c768acc]{width:66.6%}}

package/package.json

@@ -3,7 +3,7 @@
   "author": "FabianWilms",
   "description": "A vue component library of some of the components available from https://patternlab.muenchen.space",
   "license": "MIT",
-  "version": "1.13.0-beta.4",
+  "version": "1.13.0-beta.6",
   "private": false,
   "module": "./dist/muc-patternlab-vue.es.js",
   "types": "./dist/types/index.d.ts",
@@ -68,7 +68,7 @@
     "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^25.0.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.0.3",
     "rimraf": "^6.0.0",

package/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,
+  },
+};

package/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>

package/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,

package/src/components/Intro/MucIntro.vue

@@ -28,7 +28,7 @@ defineSlots<{
     style="background-color: var(--color-neutrals-blue-xlight)"
   >
     <div class="container">
-      <div style="width: 66.6%">
+      <div class="muc-intro-content">
         <div>
           <p
             v-if="tagline"
@@ -61,4 +61,10 @@ defineSlots<{
   margin-top: 8px;
   margin-bottom: 16px;
 }
+
+@media screen and (width >992px) {
+  .muc-intro-content {
+    width: 66.6%;
+  }
+}
 </style>

package/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,
 };