chore: follow the general comments style
This commit is contained in:
@@ -39,15 +39,25 @@
|
||||
* Customize to match your design system's breakpoints.
|
||||
*/
|
||||
export interface Breakpoints {
|
||||
/** Mobile devices - default 640px */
|
||||
/**
|
||||
* Mobile devices - default 640px
|
||||
*/
|
||||
mobile: number;
|
||||
/** Tablet portrait - default 768px */
|
||||
/**
|
||||
* Tablet portrait - default 768px
|
||||
*/
|
||||
tabletPortrait: number;
|
||||
/** Tablet landscape - default 1024px */
|
||||
/**
|
||||
* Tablet landscape - default 1024px
|
||||
*/
|
||||
tablet: number;
|
||||
/** Desktop - default 1280px */
|
||||
/**
|
||||
* Desktop - default 1280px
|
||||
*/
|
||||
desktop: number;
|
||||
/** Large desktop - default 1536px */
|
||||
/**
|
||||
* Large desktop - default 1536px
|
||||
*/
|
||||
desktopLarge: number;
|
||||
}
|
||||
|
||||
@@ -206,66 +216,108 @@ export function createResponsiveManager(customBreakpoints?: Partial<Breakpoints>
|
||||
);
|
||||
|
||||
return {
|
||||
/** Viewport width in pixels */
|
||||
/**
|
||||
* Current viewport width in pixels (reactive)
|
||||
*/
|
||||
get width() {
|
||||
return width;
|
||||
},
|
||||
/** Viewport height in pixels */
|
||||
/**
|
||||
* Current viewport height in pixels (reactive)
|
||||
*/
|
||||
get height() {
|
||||
return height;
|
||||
},
|
||||
|
||||
// Standard breakpoints
|
||||
/**
|
||||
* True if viewport width is below the mobile threshold
|
||||
*/
|
||||
get isMobile() {
|
||||
return isMobile;
|
||||
},
|
||||
/**
|
||||
* True if viewport width is between mobile and tablet portrait thresholds
|
||||
*/
|
||||
get isTabletPortrait() {
|
||||
return isTabletPortrait;
|
||||
},
|
||||
/**
|
||||
* True if viewport width is between tablet portrait and desktop thresholds
|
||||
*/
|
||||
get isTablet() {
|
||||
return isTablet;
|
||||
},
|
||||
/**
|
||||
* True if viewport width is between desktop and large desktop thresholds
|
||||
*/
|
||||
get isDesktop() {
|
||||
return isDesktop;
|
||||
},
|
||||
/**
|
||||
* True if viewport width is at or above the large desktop threshold
|
||||
*/
|
||||
get isDesktopLarge() {
|
||||
return isDesktopLarge;
|
||||
},
|
||||
|
||||
// Convenience groupings
|
||||
/**
|
||||
* True if viewport width is below the desktop threshold
|
||||
*/
|
||||
get isMobileOrTablet() {
|
||||
return isMobileOrTablet;
|
||||
},
|
||||
/**
|
||||
* True if viewport width is at or above the tablet portrait threshold
|
||||
*/
|
||||
get isTabletOrDesktop() {
|
||||
return isTabletOrDesktop;
|
||||
},
|
||||
|
||||
// Orientation
|
||||
/**
|
||||
* Current screen orientation (portrait | landscape)
|
||||
*/
|
||||
get orientation() {
|
||||
return orientation;
|
||||
},
|
||||
/**
|
||||
* True if screen height is greater than width
|
||||
*/
|
||||
get isPortrait() {
|
||||
return isPortrait;
|
||||
},
|
||||
/**
|
||||
* True if screen width is greater than height
|
||||
*/
|
||||
get isLandscape() {
|
||||
return isLandscape;
|
||||
},
|
||||
|
||||
// Device capabilities
|
||||
/**
|
||||
* True if the device supports touch interaction
|
||||
*/
|
||||
get isTouchDevice() {
|
||||
return isTouchDevice;
|
||||
},
|
||||
|
||||
// Current breakpoint
|
||||
/**
|
||||
* Name of the currently active breakpoint (reactive)
|
||||
*/
|
||||
get currentBreakpoint() {
|
||||
return currentBreakpoint;
|
||||
},
|
||||
|
||||
// Methods
|
||||
/**
|
||||
* Initialization function to start event listeners
|
||||
*/
|
||||
init,
|
||||
/**
|
||||
* Helper to check for custom width ranges
|
||||
*/
|
||||
matches,
|
||||
|
||||
// Breakpoint values (for custom logic)
|
||||
/**
|
||||
* Underlying breakpoint pixel values
|
||||
*/
|
||||
breakpoints,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user