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

package/src/components/Form/MucSelect.vue

@@ -1,276 +0,0 @@
-<template>
-  <div
-    class="m-form-group"
-    ref="selectComponentRef"
-  >
-    <label class="m-label">
-      {{ label }}
-    </label>
-    <div
-      class="m-input-wrapper"
-      :class="selectType"
-    >
-      <input
-        type="text"
-        class="m-input m-combobox m-combobox--single"
-        v-model="searchValue"
-        @click="openItemList"
-      />
-      <span
-        class="m-input__trigger"
-        @click="toggleItemList"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon"
-        >
-          <use xlink:href="#icon-chevron-down"></use>
-        </svg>
-        <span class="visually-hidden">Auswahlliste öffnen</span>
-      </span>
-      <ul
-        class="listbox"
-        :class="displayOptions"
-        @mouseleave="emptyActiveItem"
-      >
-        <li
-          v-for="(option, index) in displayedItems"
-          :key="index"
-          class="option"
-          @mouseenter="activeItem = option"
-          :class="[isActiveClass(option), isSelectedClass(option)]"
-          @click="clicked(option)"
-        >
-          {{ option }}
-        </li>
-        <li
-          v-if="noItemsFound"
-          class="option"
-        >
-          {{ noItemFoundMessage }}
-        </li>
-      </ul>
-    </div>
-    <p
-      v-if="!!hint"
-      class="m-hint"
-    >
-      {{ hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-
-import useOnClickOutside from "../../composables/useOnClickOutside";
-
-/**
- * Ref ot the component
- */
-const selectComponentRef = ref();
-
-/**
- * Exposed selected value / values
- */
-const selectedValues = defineModel<string | string[]>("modelValue", {
-  default: [],
-});
-
-/**
- * If list of items is shown
- */
-const showItems = ref<boolean>(false);
-
-/**
- * Last interacted item - selected or deselected
- */
-const lastClickedItem = ref<string>();
-
-/**
- * If no items found after filtering
- */
-const noItemsFound = ref<boolean>(false);
-
-/**
- * Index of currently actively hovered item or selected item
- */
-const activeItem = ref<string>();
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * List of items to be available
-     */
-    items: string[];
-
-    /**
-     * Optional label shown above the input
-     */
-    label?: string;
-
-    /**
-     * Optional hint shown below the input
-     */
-    hint?: string;
-
-    /**
-     * Allow multiple selectable items
-     */
-    multiple?: boolean;
-
-    /**
-     * Optional message shown no item is found after filtering
-     */
-    noItemFoundMessage?: string;
-  }>(),
-  {
-    multiple: false,
-    noItemFoundMessage: "No items found.",
-  }
-);
-
-/**
- * Toggles the list of items and sets the previously selected item as active
- */
-const toggleItemList = () => {
-  showItems.value = !showItems.value;
-  activeItem.value = lastClickedItem.value;
-};
-
-/**
- * Opens the list of items and sets the previously selected item as active
- */
-const openItemList = () => {
-  showItems.value = true;
-  activeItem.value = lastClickedItem.value;
-  searchValue.value = "";
-};
-
-/**
- * Closes the list after clicking outside the component
- */
-useOnClickOutside(selectComponentRef, () => {
-  showItems.value = false;
-  searchValue.value = outputTransformed.value;
-});
-
-/**
- * Actions upon clicking an item
- * @param clickedValue clicked item value
- */
-const clicked = (clickedValue: string) => {
-  lastClickedItem.value = clickedValue;
-
-  props.multiple
-    ? updateMVMultiple(clickedValue)
-    : updateMVSingle(clickedValue);
-
-  if (!props.multiple) showItems.value = false;
-};
-
-/**
- * Update the modelValue with the given. Performs conversion to string if necessary.
- * @param newValue the new value
- */
-const updateMVSingle = (newValue: string) => {
-  if (typeof selectedValues.value === "object")
-    selectedValues.value = selectedValues.value.join(" ");
-
-  selectedValues.value = selectedValues.value === newValue ? "" : newValue;
-};
-
-/**
- * Update the modelValue with the given. Performs conversion to array if necessary.
- * @param newValue the new value
- */
-const updateMVMultiple = (newValue: string) => {
-  if (typeof selectedValues.value === "string")
-    selectedValues.value = [selectedValues.value];
-
-  selectedValues.value = selectedValues.value.includes(newValue)
-    ? selectedValues.value.filter((val: string) => val !== newValue)
-    : [...selectedValues.value, newValue];
-};
-
-/**
- * Converts the displayed text depending on the selection mode
- */
-const outputTransformed = computed(() => {
-  if (typeof selectedValues.value === "string") return selectedValues.value;
-  return selectedValues.value.join(props.multiple ? ", " : " ");
-});
-
-watch(outputTransformed, (newOutput) => {
-  searchValue.value = newOutput;
-});
-
-/**
- * Current search value
- */
-const searchValue = ref<string>(outputTransformed.value);
-
-/**
- * Determines whether all or only the searched elements are displayed
- */
-const displayedItems = computed(() =>
-  searchValue.value == outputTransformed.value
-    ? props.items
-    : updateDisplayedItems(searchValue.value)
-);
-
-/**
- * Filters the list of elements after entering the search string
- * @param search the search string
- * @return list of searched items
- */
-const updateDisplayedItems = (search: string) => {
-  noItemsFound.value = false;
-  const filteredItems = props.items.filter((item) => item.includes(search));
-  if (filteredItems.length === 0) {
-    noItemsFound.value = true;
-  }
-  return filteredItems;
-};
-
-/**
- * Apply active class to hovered item
- * @param value of item
- */
-const isActiveClass = (value: string) =>
-  value === activeItem.value ? "active" : "";
-
-/**
- * Apply selected class to selected items
- * @param value of item
- */
-const isSelectedClass = (value: string) =>
-  selectedValues.value.includes(value) ? "selected" : "";
-
-/**
- * Resets the currently activeItem
- */
-const emptyActiveItem = () => (activeItem.value = "");
-
-/**
- * Display the list of item by changing the css-display property
- */
-const displayOptions = computed(() =>
-  showItems.value ? "display-listbox" : ""
-);
-
-/**
- * Switches between the selection modes according to multiple. Checkboxes are shown on the multiple select
- */
-const selectType = computed(() =>
-  props.multiple && !noItemsFound.value
-    ? "m-input-wrapper--multiselect multiselect"
-    : "m-input-wrapper--select"
-);
-</script>
-
-<style scoped>
-.display-listbox {
-  display: block !important;
-}
-</style>

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

@@ -1,47 +0,0 @@
-import MucTextArea from "./MucTextArea.vue";
-
-export default {
-  component: MucTextArea,
-  title: "Forms/MucTextArea",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `The muc-text-area component allows bigger text based inputs then the regular input. The size is adjustable.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-textarea)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    placeholder: "Write some very long text here",
-  },
-};
-
-export const Error = {
-  args: {
-    ...Default.args,
-    errorMsg: "An error occured",
-  },
-};
-
-export const Required = {
-  args: {
-    label: "Required textarea",
-    ...Default.args,
-    required: true,
-  },
-};
-
-export const BigTextArea = {
-  args: {
-    ...Default.args,
-    rows: 7,
-    label: "Big textarea",
-    hint: "Write a lot of text",
-  },
-};

package/src/components/Form/MucTextArea.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="m-form-group has-error">
-    <label
-      for="textarea"
-      class="m-label"
-    >
-      {{ label }}
-      <span
-        v-if="required"
-        aria-hidden="true"
-        class="mandatory"
-      >
-        *
-        <span class="visually-hidden">(erforderlich)</span>
-      </span>
-    </label>
-    <p class="m-error-message">
-      {{ errorMsg }}
-    </p>
-    <div class="m-input-wrapper">
-      <textarea
-        class="m-textarea"
-        :rows="rows"
-        aria-describedby="textarea input"
-        :placeholder="placeholder"
-        v-model="modelValue"
-      />
-    </div>
-    <p class="m-hint">
-      {{ hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * Input value from the form component.
- */
-const modelValue = defineModel<string>({ default: "" });
-
-withDefaults(
-  defineProps<{
-    /**
-     * Displays error message and highlights the input form with a red border.
-     */
-    errorMsg?: string;
-
-    /**
-     * Number of rows displayed of the textarea. Default is three.
-     */
-    rows?: number;
-
-    /**
-     * Placeholder for empty input form.
-     */
-    placeholder?: string;
-
-    /**
-     * Displays a label above the form component.
-     */
-    label?: string;
-
-    /**
-     * Displays a hint beneath the form component.
-     */
-    hint?: string;
-
-    /**
-     * Sets this input form as required. Default is false.
-     */
-    required?: boolean;
-  }>(),
-  {
-    rows: 3,
-    required: false,
-  }
-);
-</script>
-
-<style scoped></style>

package/src/components/Form/index.ts

@@ -1,23 +0,0 @@
-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";
-import MucRadioButton from "./MucRadioButton.vue";
-import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
-import MucSelect from "./MucSelect.vue";
-import MucTextArea from "./MucTextArea.vue";
-
-export {
-  MucForm,
-  MucCheckbox,
-  MucCheckboxGroup,
-  MucCounter,
-  MucRadioButtonGroup,
-  MucInput,
-  MucRadioButton,
-  MucTextArea,
-  MucErrorList,
-  MucSelect,
-};

package/src/components/Icon/MucIcon.stories.ts

@@ -1,35 +0,0 @@
-import { fn } from "@storybook/test";
-
-import MucIcon from "./MucIcon.vue";
-
-export default {
-  component: MucIcon,
-  title: "MucIcon",
-  tags: ["autodocs"],
-  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
-  args: { onClick: fn() },
-  parameters: {
-    docs: {
-      description: {
-        component: `The \`muc-icon\` component is a wrapper commponent for all icons in the patternlab.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-guidelines-icons)
-[🖼 Iconography](https://it-at-m.github.io/muc-patternlab-vue/?path=/docs/iconography--docs)
-`,
-      },
-    },
-  },
-};
-
-export const Weather = {
-  args: {
-    icon: "weather",
-  },
-};
-
-export const Youtube = {
-  args: {
-    icon: "youtube",
-    color: "red",
-  },
-};

package/src/components/Icon/MucIcon.vue

@@ -1,29 +0,0 @@
-<template>
-  <svg
-    aria-hidden="true"
-    :class="iconClass"
-    :style="{ color: color }"
-  >
-    <use :href="'#icon-' + icon" />
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { computed, useAttrs } from "vue";
-
-const attr = useAttrs();
-
-defineProps<{
-  /**
-   * String of the icon to be displayed.
-   */
-  icon: string;
-
-  /**
-   * Optional css-color for the icon.
-   */
-  color?: string;
-}>();
-
-const iconClass = computed(() => attr.class ?? "icon");
-</script>

package/src/components/Icon/index.ts

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

package/src/components/Intro/MucIntro.stories.ts

@@ -1,37 +0,0 @@
-import MucIntro from "./MucIntro.vue";
-
-export default {
-  component: MucIntro,
-  title: "MucIntro",
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: `A header-like component which can be used as first heading for a component that replaces a whole page on muenchen.de.
-
-Used e.g. in https://stadt.muenchen.de/buergerservice/anliegen.html.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=components-intro-vertical-article)
-`,
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    tagline: "Tagline",
-    title: "Intro with Title",
-    divider: true,
-    default:
-      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n" +
-      "    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
-  },
-};
-
-export const Minimal = {
-  args: {
-    title: "Smaller Intro with Title",
-    default: Default.args.default,
-  },
-};

package/src/components/Intro/MucIntro.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  /**
-   * Title of the Intro
-   */
-  title: string;
-  /**
-   * Tagline of the Intro (above the title)
-   */
-  tagline: string;
-  /**
-   * Toggle to show a divider between title and body
-   */
-  divider: boolean;
-}>();
-
-defineSlots<{
-  /**
-   * Body of the Intro.
-   */
-  default(): any;
-}>();
-</script>
-
-<template>
-  <div
-    class="m-intro m-intro-static-image"
-    style="background-color: var(--color-neutrals-blue-xlight)"
-  >
-    <div class="container">
-      <div class="muc-intro-content">
-        <div>
-          <p
-            v-if="tagline"
-            class="m-intro-vertical__tagline"
-          >
-            {{ tagline }}
-          </p>
-          <h1 class="m-intro-vertical__title">
-            {{ title }}
-          </h1>
-        </div>
-
-        <div
-          v-if="divider"
-          class="muc-divider"
-        />
-
-        <div class="m-intro-vertical__content">
-          <p style="padding-bottom: 32px">
-            <slot />
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.muc-divider {
-  margin-top: 8px;
-  margin-bottom: 16px;
-}
-
-@media screen and (width >992px) {
-  .muc-intro-content {
-    width: 66.6%;
-  }
-}
-</style>

package/src/components/Intro/index.ts

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

package/src/components/Link/MucLink.stories.ts

@@ -1,36 +0,0 @@
-import { fn } from "@storybook/test";
-
-import MucLink from "./MucLink.vue";
-
-export default {
-  component: MucLink,
-  title: "MucLink",
-  tags: ["autodocs"],
-  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
-  args: { onClick: fn() },
-  parameters: {
-    docs: {
-      description: {
-        component: `The \`muc-link\` component is a wrapper commponent for a standard html-a tag.
-
-[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-elements-links)
-`,
-      },
-    },
-  },
-};
-
-export const Weather = {
-  args: {
-    label: "Generic link label",
-  },
-};
-
-export const LinkWithIcon = {
-  args: {
-    icon: "youtube",
-    label: "youtube",
-    href: "https://www.youtube.com",
-    noUnderline: true,
-  },
-};