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

package/src/components/Comment/index.ts

@@ -1,4 +0,0 @@
-import MucComment from "./MucComment.vue";
-import MucCommentText from "./MucCommentText.vue";
-
-export { MucComment, MucCommentText };

package/src/components/Divider/MucDivider.stories.ts

@@ -1,19 +0,0 @@
-import MucDivider from "./MucDivider.vue";
-
-export default {
-  component: MucDivider,
-  title: "MucDivider",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The \`muc-divider\` is a trivial divider.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-all)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {};

package/src/components/Divider/MucDivider.vue

@@ -1,9 +0,0 @@
-<template>
-  <hr class="divider-border" />
-</template>
-
-<style scoped>
-.divider-border {
-  border-bottom: 1px solid var(--color-neutrals-blue);
-}
-</style>

package/src/components/Divider/index.ts

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

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

@@ -1,25 +0,0 @@
-import MucCheckbox from "./MucCheckbox.vue";
-
-export default {
-  component: MucCheckbox,
-  title: "Forms/MucCheckBox",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The MucCheckBox component is a UI element that allows users to make a binary choice, such as "yes" or "no". 
-        It is typically used in forms and settings where multiple options can be selected independently.
-        
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    label: "This is a checkbox - click me",
-  },
-};

package/src/components/Form/MucCheckbox.vue

@@ -1,47 +0,0 @@
-<template>
-  <div
-    class="m-checkboxes__item"
-    @click="clickedCheckbox"
-  >
-    <input
-      class="m-checkboxes__input"
-      name="checkbox"
-      type="checkbox"
-      :checked="checkBoxValue"
-      @click.stop="clickedCheckbox"
-    />
-    <label class="m-label m-checkboxes__label">
-      {{ label }}
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * Input value from the checkbox component.
- */
-const checkBoxValue = defineModel<boolean>("modelValue", { default: false });
-
-defineProps<{
-  /**
-   * Label is displayed to the right of the checkbox as information for the user.
-   */
-  label: string;
-}>();
-
-const emit = defineEmits<{
-  /**
-   * Emits every time the checkbox or the label is clicked - thus switching the state.
-   * @param e emits the click event.
-   */
-  (e: "click"): void;
-}>();
-
-/**
- * Called upon clicking the checkbox or label, switches the state of the checkbox and emits the event.
- */
-const clickedCheckbox = () => {
-  checkBoxValue.value = !checkBoxValue.value;
-  emit("click");
-};
-</script>

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

@@ -1,43 +0,0 @@
-import MucCheckbox from "./MucCheckbox.vue";
-import MucCheckboxGroup from "./MucCheckboxGroup.vue";
-
-export default {
-  components: { MucCheckboxGroup, MucCheckbox },
-  component: MucCheckboxGroup,
-  title: "Forms/MucCheckboxGroup",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The MucCheckboxGroup component is a wrapper designed to group multiple MucCheckBox components together, allowing users to select multiple options from a set.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes-collapse)`,
-      },
-    },
-  },
-};
-
-export const NotCollapsable = () => ({
-  components: { MucCheckbox, MucCheckboxGroup },
-  template: `
-      <MucCheckboxGroup heading="Collapsable checkbox group ">
-         <template #checkboxes>
-           <MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
-         </template>
-      </MucCheckboxGroup>
-  `,
-});
-
-export const Collapsable = () => ({
-  components: { MucCheckbox, MucCheckboxGroup },
-  template: `
-      <MucCheckboxGroup heading="Collapsable checkbox group ">
-         <template #checkboxes>
-           <MucCheckbox v-for="index in 4" :key="index" :label="'not-collapsed-' + index" />
-         </template>
-         <template #collapsableCheckboxes>
-           <MucCheckbox v-for="index in 4" :key="index" :label="'collapsed-' + index" />
-         </template>  
-      </MucCheckboxGroup>
-  `,
-});

package/src/components/Form/MucCheckboxGroup.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="m-form-group">
-    <fieldset class="m-checkbox-group">
-      <legend class="m-checkbox-group__legend">
-        <h3 class="m-checkbox-group__heading">
-          {{ heading }}
-        </h3>
-      </legend>
-      <div class="m-checkboxes m-checkboxes--collapse">
-        <slot name="checkboxes" />
-        <div
-          v-if="$slots.collapsableCheckboxes"
-          class="m-checkboxes__collapse__container"
-          :class="isCollapsed"
-        >
-          <slot name="collapsableCheckboxes" />
-        </div>
-        <muc-button
-          v-if="$slots.collapsableCheckboxes"
-          variant="ghost"
-          @click="toggleCollapse"
-          :aria-expanded="!collapsed"
-        >
-          <span>Mehr </span>
-          <svg
-            aria-hidden="true"
-            class="icon icon--after"
-          >
-            <use :href="'#icon-chevron-' + buttonIcon"></use>
-          </svg>
-        </muc-button>
-      </div>
-    </fieldset>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-import { MucButton } from "../Button";
-
-/**
- * Internal state for the collapsed section
- */
-const collapsed = ref(true);
-
-defineProps<{
-  /**
-   * Display a heading above the slots.
-   */
-  heading?: string;
-}>();
-
-defineSlots<{
-  /**
-   * 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;
-}>();
-
-/**
- * Switches the collapse class for the collapsable container.
- */
-const isCollapsed = computed(() => (collapsed.value ? "collapse" : ""));
-
-/**
- * Switches the icon in the button to collapse / expand the container.
- */
-const buttonIcon = computed(() => (collapsed.value ? "down" : "up"));
-
-/**
- * Toggles the internal state for the collapsed container.
- */
-const toggleCollapse = () => (collapsed.value = !collapsed.value);
-</script>

package/src/components/Form/MucCounter.stories.ts

@@ -1,47 +0,0 @@
-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

@@ -1,128 +0,0 @@
-<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/MucErrorList.stories.ts

@@ -1,31 +0,0 @@
-import MucErrorList from "./MucErrorList.vue";
-
-export default {
-  component: MucErrorList,
-  title: "Forms/MucErrorList",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `Simple display of one or more errors as a list.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-error-list)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    title: "A problem occurred!",
-    errors: "Only one error line",
-  },
-};
-
-export const Multiple = {
-  args: {
-    title: "A problem occurred!",
-    errors: ["Error 1", "Error 2", "Error 3", "Error 4"],
-  },
-};

package/src/components/Form/MucErrorList.vue

@@ -1,34 +0,0 @@
-<template>
-  <div
-    class="m-error-list"
-    role="alert"
-    tabindex="-1"
-  >
-    <h2 class="m-error-list__title">
-      {{ title }}
-    </h2>
-    <div class="m-error-list__body">
-      <ul class="m-list m-error-list__list">
-        <li
-          v-for="(error, index) in listOfErrors"
-          :key="index"
-        >
-          <a>{{ error }} </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  title?: string;
-  errors: string | string[];
-}>();
-
-const listOfErrors = computed(() =>
-  typeof props.errors === "string" ? [props.errors] : props.errors
-);
-</script>

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

@@ -1,90 +0,0 @@
-import MucInput from "./MucInput.vue";
-
-export default {
-  component: MucInput,
-  title: "Forms/MucInput",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The MucInput component is a text-based input field.
-        Various types are allowed e.g. datepicker or password.
-         It supports various styling options like prefixes /suffixes, buttons and can also be displayed as a textarea.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-input-text)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    placeholder: "Please type here",
-  },
-};
-
-export const HintAndLabel = {
-  args: {
-    ...Default.args,
-    hint: "This is a hint",
-    label: "This is a label",
-  },
-};
-
-export const Password = {
-  args: {
-    ...Default.args,
-    type: "password",
-    modelValue: "password",
-    hint: "The input text is 'password'",
-  },
-};
-
-export const Error = {
-  args: {
-    ...Default.args,
-    errorMsg: "Oops, an error occurred",
-    hint: "An error message triggers the error state",
-  },
-};
-
-export const Prefix = {
-  args: {
-    ...Default.args,
-    prefix: "Prefix",
-  },
-};
-
-export const SuffixIcon = {
-  args: {
-    ...Default.args,
-    suffixIcon: "search",
-  },
-};
-
-export const Search = {
-  args: {
-    ...Default.args,
-    type: "search",
-    datalist: ["chocolate", "coconut", "vanilla", "mint"],
-  },
-};
-
-export const Color = {
-  args: {
-    type: "color",
-  },
-};
-
-export const Date = {
-  args: {
-    type: "date",
-  },
-};
-
-export const Datetime_Local = {
-  args: {
-    type: "datetime-local",
-  },
-};