@empathyco/x-components
Version:
Empathy X Components
51 lines • 1.9 kB
TypeScript
import type { Ref } from 'vue';
/**
* The Return type of the composable returned by `createUseDevice`.
*
* @public
*/
export type UseDeviceReturn<Device extends string = string> = {
orientation: Ref<'landscape' | 'portrait' | undefined>;
isTouchable: Ref<boolean>;
deviceName: Ref<string>;
} & UseDeviceFlags<Device>;
/**
* The device flags type of the Return type of the composable returned by `createUseDevice`.
*
* @public
*/
export type UseDeviceFlags<Device extends string> = Record<`is${Capitalize<Device>}`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrGreater`, Ref<boolean>> & Record<`is${Capitalize<Device>}OrLess`, Ref<boolean>>;
/**
* Factory function that creates a composable for device detection using the devices parameter
* to configure breakpoints.
*
* @param devices - An object containing the breakpoints, where the key is the name of the device
* and the value is the screen width.
* @returns A composable which provides multiple reactive flags and values for detecting the
* current device. The flags names depends on the names passed in the `devices` parameter.
* @remarks The `orientation` only works for orientation-sensor devices (mobile, tablet, etc). If
* in a desktop, the height of the window is larger than the width, the orientation will be
* `landscape`.
*
* @example
* ´´´typescript
* const useDevice = createUseDevice(\{ mobile: 0, tablet: 744, desktop: 1024 \});
* const \{
* isMobile,
* isMobileOrLess,
* isMobileOrGreater,
* isTablet,
* isTabletOrLess,
* isTabletOrGreater,
* isDesktop,
* isDesktopOrLess,
* isDesktopOrGreater,
* deviceName,
* orientation,
* istTouchable
* \} = useDevice();
*
* @public
*/
export declare function createUseDevice<Device extends string>(devices: Record<Device, number>): () => UseDeviceReturn<Device>;
//# sourceMappingURL=create-use-device.d.ts.map