@muenchen/muc-patternlab-vue 1.11.0-beta.2 → 1.11.0-beta.3

package/src/components/Form/MucInput.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="m-form-group"
+    :class="isErrorClass"
+  >
+    <label
+      for="search-input"
+      class="m-label"
+    >
+      {{ label }}
+      <span
+        v-if="required"
+        aria-hidden="true"
+        class="mandatory"
+      >
+        *
+        <span class="visually-hidden">(erforderlich)</span>
+      </span>
+    </label>
+    <p
+      id="text-input-error"
+      class="m-error-message"
+    >
+      {{ errorMsg }}
+    </p>
+    <div class="m-input-wrapper m-autocomplete">
+      <div
+        v-if="!!slots.prefix"
+        class="m-input__prefix"
+      >
+        <span>
+          <slot name="prefix" />
+        </span>
+      </div>
+      <input
+        class="m-input autocomplete-input"
+        :type="type"
+        v-model="modelValue"
+        :aria-describedby="type + '-input'"
+        :placeholder="placeholder"
+        :required="required"
+      />
+      <ul
+        v-if="isSearch && currentAvalOptions.length !== 0"
+        class="autocomplete-result-list autocomplete-result-list--location"
+      >
+        <li
+          class="autocomplete-result"
+          v-for="option in currentAvalOptions"
+          :key="option"
+          @click="handleOptionSelection(option)"
+        >
+          {{ option }}
+        </li>
+      </ul>
+      <button
+        v-if="suffixIcon"
+        class="m-input__suffix"
+        @click="handleSuffixClick"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+        >
+          <use :xlink:href="'#icon-' + suffixIcon"></use>
+        </svg>
+        <span class="visually-hidden">Suchen</span>
+      </button>
+    </div>
+    <p
+      class="m-hint"
+      id="text-input-hint"
+    >
+      {{ hint }}
+    </p>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+/**
+ * Type includes all possible input types possible.
+ */
+type inputType =
+  | "text"
+  | "password"
+  | "color"
+  | "search"
+  | "date"
+  | "datetime-local";
+
+/**
+ * Input value from the input component.
+ */
+const modelValue = defineModel<string>({ default: "" });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Displays error message and highlights the input form with a red border.
+     */
+    errorMsg?: string;
+
+    /**
+     * Placeholder for empty input form.
+     */
+    placeholder?: string;
+
+    /**
+     * Sets this input form as required. Default is wrong.
+     */
+    required?: boolean;
+
+    /**
+     * Displays a label above the form component.
+     */
+    label?: string;
+
+    /**
+     * Displays a hint beneath the form component.
+     */
+    hint?: string;
+
+    /**
+     * Sets the type of this form component. This can be text, password, color, date or datetime-local.
+     */
+    type?: inputType;
+
+    /**
+     * Options for the form component. Type must set to 'search'.
+     */
+    datalist?: string[];
+
+    /**
+     * Icon to be displayed as a suffix at the end of the input.
+     */
+    suffixIcon?: string;
+  }>(),
+  {
+    required: false,
+    type: "text",
+    dataList: [],
+  }
+);
+
+const slots = defineSlots<{
+  /**
+   * Slot in front of the user input with divider.
+   */
+  prefix(): any;
+}>();
+
+const emits = defineEmits<{
+  /**
+   * Triggered when suffix-button is clicked.
+   * @param e Click-Event
+   */
+  (e: "suffixClick"): void;
+}>();
+
+/**
+ * Computes a CSS class based on the presence of an error message.
+ * @returns {string} Returns "has-error" if there is an error message, otherwise an empty string.
+ */
+const isErrorClass = computed(() => (!props.errorMsg ? "" : "has-error"));
+
+/**
+ * Computes whether the current type is "search".
+ * @returns {boolean} Returns true if the type is "search", otherwise false.
+ */
+const isSearch = computed(() => props.type === "search");
+
+/**
+ * Computes the list of available options based on the current search value.
+ * Filters the options from the datalist based on whether they start with the search value.
+ * @returns {string[]} Returns an array of matching options.
+ */
+const currentAvalOptions = computed(() => {
+  if (modelValue.value === "") return [];
+
+  const searchValue = modelValue.value.toLowerCase();
+  return props.datalist!.filter(
+    (option) =>
+      option.toLowerCase().startsWith(searchValue) &&
+      option.toLowerCase() !== searchValue
+  );
+});
+
+/**
+ * Handles the selection of an option.
+ * Sets the model value to the selected option.
+ * @param {string} option - The selected option.
+ */
+const handleOptionSelection = (option: string) => (modelValue.value = option);
+
+const handleSuffixClick = () => emits("suffixClick");
+</script>
+<style scoped></style>

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

@@ -0,0 +1,32 @@
+import MucRadioButton from "./MucRadioButton.vue";
+import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
+
+export default {
+  component: MucRadioButton,
+  title: "Forms/RadioButton",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Offers simple functionality of a radio-button.
+You need to use the radio-button within the radio-button-group - combined you can provide grouping functionality to allow users to select from a predefined set of options.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-radios)
+`,
+      },
+    },
+  },
+};
+
+export const Default = () => ({
+  components: { MucRadioButton, MucRadioButtonGroup },
+  template: `
+      <MucRadioButtonGroup heading="Checkbox group" model-value="">
+         <template v-slot:default>
+           <MucRadioButton value="first" label="first option" hint="This is a hint for this radiobutton"/>
+           <MucRadioButton v-for="index in 3" :key="index" :label="'other option-' + index" :value="'val-' + index"/>
+         </template>
+      </MucRadioButtonGroup>
+  `,
+});

package/src/components/Form/MucRadioButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="m-radios__item"
+    v-if="isInRadioButtonGroup"
+  >
+    <input
+      class="m-radios__input"
+      type="radio"
+      :checked="isChecked"
+      :disabled="isDisabled"
+      @click.stop="clicked"
+    />
+    <label
+      class="m-label m-radios__label"
+      @click="clicked"
+    >
+      {{ label }}
+      <span class="m-hint">
+        {{ hint }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+
+import { RadioButtonGroupKey } from "./RadioButtonTypes";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * value for this radiobutton
+     */
+    value: string;
+
+    /**
+     * Optional label shown behind the radiobutton
+     */
+    label?: string;
+
+    /**
+     * Optional hint shown beneath the radiobutton
+     */
+    hint?: string;
+
+    /**
+     * Optionally disable this specific radiobutton
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+  }
+);
+
+/**
+ * Data provided by the radio-button-group
+ */
+const parentData = inject(RadioButtonGroupKey);
+
+/**
+ * Function called upon clicking this radiobutton
+ */
+const clicked = () => parentData?.set(props.value);
+
+/**
+ * Computed property if this radiobutton is checked or not
+ */
+const isChecked = computed(() => parentData?.modelValue.value === props.value);
+
+/**
+ * Computed property if this radiobutton should be disabled
+ */
+const isDisabled = computed(() => props.disabled || parentData?.disabled.value);
+
+/**
+ * Determines if  this radiobutton is used inside a radiobutton-group
+ */
+const isInRadioButtonGroup = computed(() => !!parentData?.disabled ?? false);
+</script>

package/src/components/Form/MucRadioButtonGroup.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="m-form-group">
+    <fieldset class="m-radio-group">
+      <legend class="m-radio-group__legend">
+        <h3 class="m-radio-group__heading">
+          {{ heading }}
+        </h3>
+      </legend>
+      <div class="m-radios">
+        <slot name="default" />
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, readonly, toRef } from "vue";
+
+import { RadioButtonGroupKey, RadioButtonValueTypes } from "./RadioButtonTypes";
+
+/**
+ * exposed two-way binding of the currently selected radiobuttons-value
+ */
+const selectedButton = defineModel<RadioButtonValueTypes>("modelValue");
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Optional heading above all radiobuttons as a group heading
+     */
+    heading?: string;
+
+    /**
+     * Optionally disable all child radiobuttons - defaults to 'false'
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  /**
+   * Triggered when a different radiobutton is selected.
+   * @param value RadioButtonValueTypes the value of the newly selected radiobutton
+   */
+  change: [value: RadioButtonValueTypes];
+}>();
+
+/**
+ * Providing necessary data to all child radiobuttons.
+ */
+provide(RadioButtonGroupKey, {
+  set: (value: RadioButtonValueTypes) => {
+    emit("change", value);
+    selectedButton.value = value;
+  },
+  modelValue: selectedButton,
+  disabled: readonly(toRef(props.disabled)),
+});
+</script>

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

@@ -0,0 +1,34 @@
+import MucSelect from "./MucSelect.vue";
+
+export default {
+  component: MucSelect,
+  title: "Forms/MucSelect",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Choose from an option from a given list - multiple can also be allowed. The design is similar to the text input with autocompletion.
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-combobox)
+`,
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    modelValue: "Option 1",
+    items: ["Option 1", "Option 2", "Option 3", "Option 4"],
+    label: "This is a label",
+    hint: "This is a hint",
+  },
+};
+
+export const MultiSelect = {
+  args: {
+    ...Default.args,
+    label: "Select multiple options",
+    multiple: true,
+  },
+};

package/src/components/Form/MucSelect.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="m-form-group">
+    <label class="m-label">
+      {{ label }}
+    </label>
+    <div
+      class="m-input-wrapper"
+      :class="selectType"
+    >
+      <input
+        type="text"
+        class="m-input m-combobox m-combobox--single"
+        :value="outputTransformed"
+        @click="toggleItemList"
+        readonly
+      />
+      <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 props.items"
+          :key="index"
+          class="option"
+          @mouseenter="activeItem = option"
+          :class="[isActiveClass(option), isSelectedClass(option)]"
+          @click="clicked(option)"
+        >
+          {{ option }}
+        </li>
+      </ul>
+    </div>
+    <p
+      v-if="!!hint"
+      class="m-hint"
+    >
+      {{ hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+/**
+ * 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>();
+
+/**
+ * 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;
+  }>(),
+  {
+    multiple: false,
+  }
+);
+
+/**
+ * Toggles the list of items and sets the previously selected item as active
+ */
+const toggleItemList = () => {
+  showItems.value = !showItems.value;
+  activeItem.value = lastClickedItem.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 ? ", " : " ");
+});
+
+/**
+ * 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
+    ? "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

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