sit-onyx 1.2.0-dev-20251016073921 → 1.2.0-dev-20251016092305

package/dist/types/utils.d.ts

@@ -40,9 +40,15 @@ export type Merge<Target, Source> = {
  */
 export type MergeAll<T extends unknown[]> = T extends [infer First, ...infer Rest] ? Rest extends [] ? First : Merge<First, MergeAll<Rest>> : never;
 /**
- * Pick a value from `T` for the key `K`, if it exists.
+ * Take the value types from `T` for the key `K`, if it exists.
  */
-export type MaybePick<T, Key, Fallback = never> = Key extends keyof T ? T[Key] : Fallback;
+export type MaybeUnwrap<T, Key, Fallback = never> = Key extends keyof T ? T[Key] : Fallback;
+/**
+ * Create a subset of `T` for all keys `Key` that exist in `T`
+ */
+export type MaybePick<T, Key extends PropertyKey> = {
+    [P in Key as P extends keyof T ? P : never]: P extends keyof T ? T[P] : never;
+};
 /**
  * Recursive / deep implementation of TypeScript's built-in `Partial<T>` type.
  */

package/dist/utils/props.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'vue-component-type-helpers';
+import { Data, MaybePick } from '../types/utils.js';
+/**
+ * The computed value is an object, that only contains properties that are defined by the target component.
+ * Is useful to forward only a matching subset of properties from a parent component to a wrapped child component.
+ *
+ * This is necessary when the parent defines props, which are not defined in the child component.
+ * Otherwise, the child component will set the extraneous props as attributes, which bloats the DOM and can lead to unexpected side-effects.
+ *
+ * @example
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { useForwardProps } from "sit-onyx";
+ * import MyChildComponent from "./MyChildComponent.vue";
+ *
+ * const props = defineProps<ParentProps & ChildProps>();
+ * const childProps = useForwardProps(props, MyChildComponent);
+ * </script>
+ * <template>
+ *   <!-- childProps only includes props that exist on MyChildComponent -->
+ *   <MyChildComponent v-bind="childProps" />
+ * </template>
+ * ```
+ *
+ * @param props The reactive props object of the parent component.
+ * @param target Component for which the properties are to be forwarded.
+ * @returns computed value with properties that are also defined the target component.
+ */
+export declare const useForwardProps: <T extends Data, TComponent, TProps = ComponentProps<TComponent>, R = MaybePick<T, keyof TProps>>(props: T, target: TComponent) => import('vue').ComputedRef<R>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.2.0-dev-20251016073921",
+  "version": "1.2.0-dev-20251016092305",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -59,10 +59,10 @@
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.6.0",
     "@sit-onyx/flags": "^1.0.0",
-    "@sit-onyx/headless": "^0.2.0-dev-20251016073921",
-    "@sit-onyx/storybook-utils": "^1.0.2-dev-20251016073921",
+    "@sit-onyx/headless": "^0.2.0-dev-20251016092305",
+    "@sit-onyx/playwright-utils": "^1.0.0",
     "@sit-onyx/shared": "^0.1.0",
-    "@sit-onyx/playwright-utils": "^1.0.0"
+    "@sit-onyx/storybook-utils": "^1.0.2-dev-20251016092305"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",