chore(OnyxForm): improve storybook docs (#1958)

Relates to #1375 

- improve storybook documentation for `OnyxForm`
- add defaults and specific control for `showError`
- rename `ShowErrorMode` type and add `ShowErrorModes` constant for type
inference

packages/sit-onyx/src/components/OnyxForm/OnyxForm.core.ts

@@ -1,5 +1,5 @@
 import { computed, inject, provide, toRef, type InjectionKey, type Reactive, type Ref } from "vue";
-import type { ShowErrorModes } from "../../composables/useErrorClass";
+import type { ShowErrorMode } from "../../composables/useErrorClass";
 
 const FORM_INJECTION_KEY = Symbol() as InjectionKey<ReturnType<typeof createFormInjectionContext>>;
 
@@ -24,7 +24,7 @@ export type FormProps = {
  * The default is `"touched"`, which only shows an error *after* a user has significantly interacted with the input.
  * See [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo).
  */
- showError?: ShowErrorModes;
+ showError?: ShowErrorMode;
 };
 
 /**

packages/sit-onyx/src/components/OnyxForm/OnyxForm.stories.ts

@@ -2,6 +2,7 @@ import { withNativeEventLogging } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { h } from "vue";
 import { OnyxInput, OnyxToast } from "../..";
+import { ShowErrorModes } from "../../composables/useErrorClass";
 import FormExample from "../examples/FormExample/FormExample.vue";
 import FormExampleSourceCode from "../examples/FormExample/FormExample.vue?raw";
 import OnyxButton from "../OnyxButton/OnyxButton.vue";
@@ -15,6 +16,12 @@ import OnyxForm from "./OnyxForm.vue";
 const meta: Meta<typeof OnyxForm> = {
  title: "Form Elements/Form",
  component: OnyxForm,
+ argTypes: {
+ showError: {
+ control: "select",
+ options: ShowErrorModes,
+ },
+ },
 };
 
 export default meta;

packages/sit-onyx/src/components/OnyxForm/OnyxForm.vue

@@ -3,7 +3,10 @@ import { useDensity } from "../../composables/density";
 import { provideFormContext } from "./OnyxForm.core";
 import type { OnyxFormProps } from "./types";
 
-const props = defineProps<OnyxFormProps>();
+const props = withDefaults(defineProps<OnyxFormProps>(), {
+ disabled: false,
+ showError: "touched",
+});
 
 defineSlots<{
  /**

packages/sit-onyx/src/composables/useErrorClass.spec.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test } from "vitest";
 import { ref } from "vue";
-import { useErrorClass, type ShowErrorModes } from "./useErrorClass";
+import { useErrorClass, type ShowErrorMode } from "./useErrorClass";
 
 describe("useErrorClass", () => {
- const showErrorMode = ref<ShowErrorModes>(true);
+ const showErrorMode = ref<ShowErrorMode>(true);
  const errorClass = useErrorClass(showErrorMode);
 
  test.each([

packages/sit-onyx/src/composables/useErrorClass.ts

@@ -1,15 +1,20 @@
 import { computed, type Ref } from "vue";
 
+/**
+ * All possible `showError` values.
+ */
+export const ShowErrorModes = [true, false, "touched"] as const;
+
 /**
  * Configures if and when errors are shown.
  * When `true`, errors will be shown initially.
  * When `false`, errors will never be shown.
  * `"touched"` only shows an error *after* a user has significantly interacted with the input.
  * See [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo).
  */
-export type ShowErrorModes = boolean | "touched";
+export type ShowErrorMode = (typeof ShowErrorModes)[number];
 
-export const useErrorClass = (showError: Readonly<Ref<ShowErrorModes>>) =>
+export const useErrorClass = (showError: Readonly<Ref<ShowErrorMode>>) =>
  computed(() => {
  if (showError.value === true) {
  return "onyx-form-element--immediate-invalid";