Merge branch 'main' into fix/empty-icon-alias

.changeset/hip-kids-decide.md

@@ -0,0 +1,14 @@
+---
+"sit-onyx": major
+---
+
+feat: Remove/Rename emits that collide with native event names
+
+- OnyxInput, OnyxTextarea and OnyxStepper: Remove `focus` and `blur` event - Use `focusin`/`focusout` or `@focus.capture`/`@focus.blur` instead
+- OnyxInput and OnyxTextarea: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+- OnyxNavBar: Rename `appAreaClick` to `navigateToStart` and `backButtonClick` to `navigateBack`
+- OnyxNavButton: Rename `click` to `navigate`, also the native MouseEvent is now passed as second parameter
+- OnyxNavItem: Rename `click` to `navigate`
+- OnyxRadioButton: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+- OnyxSelectInput: Rename `click` to `inputClick`
+- OnyxToastMessage: Remove Vue `click` emit - You will now always receive the native `@click` event, even when `clickable` prop is false/not set.

.changeset/pre.json

@@ -117,6 +117,7 @@
     "heavy-walls-teach",
     "hip-candles-unite",
     "hip-hats-know",
+    "hip-kids-decide",
     "honest-panthers-live",
     "honest-shirts-invite",
     "honest-shrimps-approve",

apps/demo-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # demo-app
 
+## 1.0.0-beta.43
+
+### Patch Changes
+
+- Updated dependencies [e6af99b]
+  - sit-onyx@1.0.0-beta.43
+
 ## 1.0.0-beta.42
 
 ### Patch Changes

apps/demo-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "demo-app",
   "private": true,
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "type": "module",
   "scripts": {
     "dev": "turbo run vite --filter demo-app",

apps/demo-app/src/App.vue

@@ -69,7 +69,7 @@ watch(
           :key="item.href"
           v-bind="item"
           :active="item.href === router.currentRoute.value.path"
-          @click="router.push"
+          @navigate="router.push"
         />
 
         <template #contextArea>

apps/playground/CHANGELOG.md

@@ -1,5 +1,12 @@
 # playground
 
+## 1.0.0-beta.43
+
+### Patch Changes
+
+- Updated dependencies [e6af99b]
+  - sit-onyx@1.0.0-beta.43
+
 ## 1.0.0-beta.42
 
 ### Patch Changes

apps/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

packages/chartjs-plugin/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.43
+
+### Patch Changes
+
+- Updated dependencies [e6af99b]
+  - sit-onyx@1.0.0-beta.43
+
 ## 1.0.0-beta.42
 
 ### Patch Changes

packages/chartjs-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.44
+
+### Patch Changes
+
+- Updated dependencies [e6af99b]
+  - sit-onyx@1.0.0-beta.43
+
 ## 1.0.0-beta.43
 
 ### Patch Changes

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-beta.43",
+  "version": "1.0.0-beta.44",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/sit-onyx/CHANGELOG.md

@@ -1,5 +1,20 @@
 # sit-onyx
 
+## 1.0.0-beta.43
+
+### Major Changes
+
+- e6af99b: feat: Remove/Rename emits that collide with native event names
+
+  - OnyxInput, OnyxTextarea and OnyxStepper: Remove `focus` and `blur` event - Use `focusin`/`focusout` or `@focus.capture`/`@focus.blur` instead
+  - OnyxInput and OnyxTextarea: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+  - OnyxNavBar: Rename `appAreaClick` to `navigateToStart` and `backButtonClick` to `navigateBack`
+  - OnyxNavButton: Rename `click` to `navigate`, also the native MouseEvent is now passed as second parameter
+  - OnyxNavItem: Rename `click` to `navigate`
+  - OnyxRadioButton: Remove Vue `change` emit - You will now receive the native `@change` event, but the value must now retrieved with with `$event.target.value` or use `@update:modelvalue`
+  - OnyxSelectInput: Rename `click` to `inputClick`
+  - OnyxToastMessage: Remove Vue `click` emit - You will now always receive the native `@click` event, even when `clickable` prop is false/not set.
+
 ## 1.0.0-beta.42
 
 ### Major Changes

packages/sit-onyx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-beta.42",
+  "version": "1.0.0-beta.43",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

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

@@ -18,13 +18,6 @@ const props = withDefaults(defineProps<OnyxButtonProps>(), {
 
 const { densityClass } = useDensity(props);
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the button is clicked (and is not disabled).
-   */
-  click: [];
-}>();
-
 const rippleRef = ref<ComponentInstance<typeof OnyxRipple>>();
 const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 </script>
@@ -44,7 +37,6 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
     :type="props.type"
     :aria-label="props.loading ? props.label : undefined"
     :autofocus="props.autofocus"
-    @click="emit('click')"
     v-on="rippleEvents"
   >
     <OnyxRipple v-if="!props.disabled && !props.loading" ref="rippleRef" />

packages/sit-onyx/src/components/OnyxIconButton/OnyxIconButton.ct.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 import { DENSITIES } from "../../composables/density";
 import { expect, test } from "../../playwright/a11y";
 import {
@@ -9,49 +10,53 @@ import { BUTTON_COLORS } from "../OnyxButton/types";
 import OnyxIconButton from "./OnyxIconButton.vue";
 import type { OnyxIconButtonProps } from "./types";
 
-test("should behave correctly", async ({ mount }) => {
-  let clicks = 0;
+test("should behave correctly", async ({ page, mount }) => {
+  const clickSpy: MouseEvent[] = [];
   const setup = {
     props: {
       label: "trigger something",
       icon: mockPlaywrightIcon,
-    } satisfies OnyxIconButtonProps,
-    on: {
-      click: () => clicks++,
-    },
+      onClick: (e) => clickSpy.push(e),
+    } satisfies OnyxIconButtonProps & HTMLAttributes,
   };
 
   // ARRANGE
   const component = await mount(OnyxIconButton, setup);
+  const buttonElement = page.getByRole("button");
 
   await test.step("clickable by default", async () => {
     // ACT
-    await component.click();
+    await buttonElement.click();
     // ASSERT
-    expect(clicks).toBe(1);
+    await expect(buttonElement).toBeEnabled();
+    expect(clickSpy).toHaveLength(1);
   });
 
   await test.step("not interactive when disabled ", async () => {
     // ARRANGE
-    await component.update({ ...setup, props: { disabled: true } });
+    await component.update({ ...setup, props: { disabled: true } }); // ACT
+    // ACT
+    await buttonElement.click({ force: true });
     // ASSERT
-    await expect(component).toBeDisabled();
+    await expect(buttonElement).toBeDisabled();
+    expect(clickSpy).toHaveLength(1);
   });
 
   await test.step("not interactive when loading ", async () => {
     // ARRANGE
     await component.update({ ...setup, props: { disabled: false, loading: true } });
     // ASSERT
-    await expect(component).toBeDisabled();
+    await expect(buttonElement).toBeDisabled();
   });
 
   await test.step("clickable again ", async () => {
     // ARRANGE
     await component.update({ ...setup, props: { disabled: false, loading: false } });
     // ACT
-    await component.click();
+    await buttonElement.click();
     // ASSERT
-    expect(clicks).toBe(2);
+    await expect(buttonElement).toBeEnabled();
+    expect(clickSpy).toHaveLength(2);
   });
 });
 

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

@@ -18,11 +18,6 @@ defineSlots<{
   /** Slot for an custom icon. Will have no effect if property `icon` is passed. */
   default(): unknown;
 }>();
-
-const emit = defineEmits<{
-  /** Emitted when the button is clicked (and is not disabled). */
-  click: [];
-}>();
 </script>
 
 <template>
@@ -41,7 +36,6 @@ const emit = defineEmits<{
     ]"
     :disabled="props.disabled || props.loading"
     :autofocus="props.autofocus"
-    @click="emit('click')"
   >
     <OnyxLoadingIndicator v-if="props.loading" type="circle" />
     <OnyxIcon v-else-if="props.icon" :icon="props.icon" />

packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx

@@ -260,27 +260,19 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   const events = {
     updateModelValue: [] as string[],
     change: [] as string[],
-    focusCount: 0,
-    blurCount: 0,
   };
 
   // ARRANGE
   const component = await mount(
     <OnyxInput
       label="Label"
       onUpdate:modelValue={(value) => events.updateModelValue.push(value)}
-      onChange={(value) => events.change.push(value)}
-      onFocus={() => events.focusCount++}
-      onBlur={() => events.blurCount++}
     />,
   );
 
   // should not emit initial events
   expect(events).toMatchObject({
     updateModelValue: [],
-    change: [],
-    focusCount: 0,
-    blurCount: 0,
   });
 
   // ACT
@@ -298,19 +290,6 @@ test("should emit events", async ({ mount, makeAxeBuilder }) => {
   await expect(inputElement).toHaveValue("Test");
   expect(events).toMatchObject({
     updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: [],
-    focusCount: 1,
-    blurCount: 0,
-  });
-
-  // ACT
-  await inputElement.blur();
-  // ASSERT
-  expect(events).toMatchObject({
-    updateModelValue: ["T", "Te", "Tes", "Test"],
-    change: ["Test"],
-    focusCount: 1,
-    blurCount: 1,
   });
 });
 

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

@@ -23,18 +23,6 @@ const emit = defineEmits<{
    * Emitted when the current value changes.
    */
   "update:modelValue": [value: string];
-  /**
-   * Emitted when the current value changes but only when the input is blurred.
-   */
-  change: [value: string];
-  /**
-   * Emitted when the input is focussed.
-   */
-  focus: [];
-  /**
-   * Emitted when the input is blurred.
-   */
-  blur: [];
   /**
    * Emitted when the validity state of the input changes.
    */
@@ -53,11 +41,6 @@ const value = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const handleChange = (event: Event) => {
-  const inputValue = (event.target as HTMLInputElement).value;
-  emit("change", inputValue);
-};
-
 const patternSource = computed(() => {
   if (props.pattern instanceof RegExp) return props.pattern.source;
   return props.pattern;
@@ -94,9 +77,6 @@ const patternSource = computed(() => {
             :maxlength="props.maxlength"
             :aria-label="props.hideLabel ? props.label : undefined"
             :title="props.hideLabel ? props.label : undefined"
-            @change="handleChange"
-            @focus="emit('focus')"
-            @blur="emit('blur')"
           />
           <!-- eslint-enable vuejs-accessibility/no-autofocus -->
         </div>

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

@@ -9,13 +9,6 @@ const props = withDefaults(defineProps<OnyxLinkProps>(), {
   withExternalIcon: "auto",
 });
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the link is opened (via click or keyboard).
-   */
-  click: [];
-}>();
-
 defineSlots<{
   /**
    * Link label.
@@ -32,7 +25,6 @@ const { t } = injectI18n();
     :href="props.href"
     :target="props.target"
     :rel="props.target === '_blank' ? 'noreferrer' : undefined"
-    @click="emit('click')"
   >
     <slot></slot>
 

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

@@ -5,14 +5,6 @@ import type { OnyxNavAppAreaProps } from "./types";
 
 const props = defineProps<OnyxNavAppAreaProps>();
 
-const emit = defineEmits<{
-  /**
-   * Emitted when the app area (where logo and app name are placed) is clicked.
-   * Usually the user is redirected to the home page.
-   */
-  click: [];
-}>();
-
 defineSlots<{
   /**
    * Optional slot to override the content.
@@ -26,7 +18,7 @@ const buttonLabel = computed(() => props.label ?? t.value("navigation.goToHome")
 </script>
 
 <template>
-  <button type="button" class="onyx-nav-app-area" :aria-label="buttonLabel" @click="emit('click')">
+  <button type="button" class="onyx-nav-app-area" :aria-label="buttonLabel">
     <slot>
       <!--
         the width/height here is only to prevent layout shifts on initial load.