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

package/src/components/Form/MucInput.vue

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

@@ -1,32 +0,0 @@
-import MucRadioButton from "./MucRadioButton.vue";
-import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
-
-export default {
-  component: MucRadioButton,
-  title: "Forms/MucRadioButton",
-  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

@@ -1,81 +0,0 @@
-<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 "./MucRadioButtonTypes";
-
-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

@@ -1,65 +0,0 @@
-<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 "./MucRadioButtonTypes";
-
-/**
- * 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/MucRadioButtonTypes.ts

@@ -1,41 +0,0 @@
-import { InjectionKey, Ref } from "vue";
-
-/**
- * Key for inject and provide
- *
- * @type {InjectionKey<RadioButtonGroupInjection>}
- */
-export const RadioButtonGroupKey: InjectionKey<RadioButtonGroupInjection> =
-  Symbol("mucRadioGroup");
-
-/**
- * Type getting injected / provided
- */
-export type RadioButtonGroupInjection = {
-  /**
-   * Function for setting the value of the current selected radiobutton
-   * @param {RadioButtonValueTypes} value - Value being set as the new current selected radiobutton
-   */
-  set: (value: RadioButtonValueTypes) => void;
-
-  /**
-   * Current value of the currently selected radiobutton
-   */
-  modelValue: Readonly<Ref<RadioButtonValueTypes | undefined>>;
-
-  /**
-   * Deactivate all child radiobuttons
-   */
-  disabled: Readonly<Ref<boolean>>;
-};
-
-/**
- * Different possible types used as value for a radiobutton-values
- */
-export type RadioButtonValueTypes =
-  | boolean
-  | string
-  | unknown[]
-  | Record<string, unknown>
-  | number
-  | null;

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

@@ -1,69 +0,0 @@
-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 of objects or strings - 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: {
-      id: "1",
-      name: "Object 1",
-      quantity: 1,
-    },
-    items: [
-      {
-        id: "1",
-        name: "Object 1",
-        quantity: 1,
-      },
-      {
-        id: "2",
-        name: "Object 2",
-        quantity: 2,
-      },
-      {
-        id: "3",
-        name: "Object 3",
-        quantity: 3,
-      },
-      {
-        id: "4",
-        name: "Object 4",
-        quantity: 4,
-      },
-    ],
-    label: "This is a label",
-    hint: "This is a hint",
-    itemTitle: "name",
-  },
-};
-
-export const MultiSelect = {
-  args: {
-    ...Default.args,
-    label: "Select multiple objects",
-    multiple: true,
-  },
-};
-
-export const StringSelect = {
-  args: {
-    modelValue: "String 1",
-    items: ["String 1", "String 2", "String 3", "String 4"],
-    label: "Select strings",
-    hint: "This is a hint",
-  },
-};