feature(composable): create utility composable useHybridInject

packages/x-components/src/composables/index.ts

@@ -5,3 +5,4 @@ export * from './use-on-display';
 export * from './use-store';
 export * from './use-state';
 export * from './use-getter';
+export * from './use-hybrid-inject';

packages/x-components/src/composables/use-hybrid-inject.ts

@@ -0,0 +1,26 @@
+import { computed, ComputedRef, inject } from 'vue';
+
+/**
+ * Function to use a hybrid inject, which allows to inject a value provided by the regular provide
+ * of vue  or by the XProvide decorator.
+ *
+ * @param key - The key of the value to inject.
+ * @param defaultValue - The default value to use if the value is not provided.
+ * @returns The computed value of the injected value.
+ */
+export function useHybridInject<SomeValue>(
+  key: string,
+  defaultValue?: SomeValue
+): ComputedRef<SomeValue | undefined> {
+  type WrappedValue = { value: SomeValue };
+
+  return computed<SomeValue | undefined>(() => {
+    const injectedValue = defaultValue
+      ? inject<SomeValue | WrappedValue>(key, defaultValue)
+      : inject<SomeValue | WrappedValue>(key);
+
+    return injectedValue && typeof injectedValue === 'object' && 'value' in injectedValue
+      ? injectedValue.value
+      : injectedValue;
+  });
+}