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

package/src/components/Form/MucTextArea.vue

@@ -0,0 +1,80 @@
+<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/RadioButtonTypes.ts

@@ -0,0 +1,41 @@
+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/index.ts

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

package/src/components/Icon/MucIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     aria-hidden="true"
-    class="m-button__icon"
+    :class="iconClass"
     :style="{ color: color }"
   >
     <use :href="'#icon-' + icon" />
@@ -9,6 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+const attr = useAttrs();
+
 defineProps<{
   /**
    * String of the icon to be displayed.
@@ -20,4 +24,6 @@ defineProps<{
    */
   color?: string;
 }>();
+
+const iconClass = computed(() => attr.class ?? "icon");
 </script>

package/src/components/Intro/MucIntro.vue

@@ -44,11 +44,11 @@ defineSlots<{
         <div
           v-if="divider"
           class="muc-divider"
-        ></div>
+        />
 
         <div class="m-intro-vertical__content">
           <p style="padding-bottom: 32px">
-            <slot></slot>
+            <slot />
           </p>
         </div>
       </div>

package/src/components/index.ts

@@ -3,6 +3,7 @@ import { MucButton } from "./Button";
 import { MucCallout } from "./Callout";
 import { MucCard, MucCardContainer } from "./Card";
 import { MucComment, MucCommentText } from "./Comment/";
+import { MucForm } from "./Form";
 import { MucIcon } from "./Icon";
 import { MucIntro } from "./Intro";
 
@@ -15,5 +16,6 @@ export {
   MucCardContainer,
   MucComment,
   MucCommentText,
+  MucForm,
   MucIcon,
 };