flex-layout-system - npm Package Compare versions

Comparing version 0.1.3 to 0.1.5

dist/base.min.js

@@ -153,3 +153,3 @@ /*! For license information please see base.min.js.LICENSE.txt */
     }
-    
+
     :host([column]) ::slotted(f-divider[stretch]:not([h]):not([v])) {
@@ -156,0 +156,0 @@ width: 100%;

dist/full.min.js

@@ -153,3 +153,3 @@ /*! For license information please see full.min.js.LICENSE.txt */
     }
-    
+
     :host([column]) ::slotted(f-divider[stretch]:not([h]):not([v])) {
@@ -156,0 +156,0 @@ width: 100%;

dist/src/components/box.d.ts

@@ -20,1 +20,21 @@ import { LitElement } from "lit";
 }
+export type FlexBoxProps = {
+    row?: boolean;
+    column?: boolean;
+    gap?: string;
+    nowrap?: boolean;
+    fill?: boolean;
+    fit?: boolean;
+    snug?: boolean;
+    reverse?: boolean;
+    inline?: boolean;
+    center?: boolean;
+    start?: boolean;
+    end?: boolean;
+    stretch?: boolean;
+    spread?: boolean;
+    middle?: boolean;
+    ai?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+    ac?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    jc?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+};

dist/src/components/canvas.d.ts

@@ -15,1 +15,7 @@ import { LitElement } from "lit";
 }
+export type FlexCanvasProps = {
+    width?: string;
+    mg?: string;
+    pd?: string;
+    flex?: boolean;
+};

dist/src/components/cell.d.ts

@@ -13,1 +13,16 @@ import { LitElement } from "lit";
 }
+export type FlexCellProps = {
+    order?: number;
+    grow?: number;
+    shrink?: number;
+    width?: string;
+    fill?: boolean;
+    fit?: boolean;
+    snug?: boolean;
+    auto?: boolean;
+    stretch?: boolean;
+    scrollable?: boolean;
+    flex?: boolean;
+    iflex?: boolean;
+    iblock?: boolean;
+};

dist/src/components/grid.d.ts

@@ -7,1 +7,6 @@ import { LitElement } from "lit";
 }
+export type FlexGridProps = {
+    gap?: string;
+    compact?: boolean;
+    flex?: boolean;
+};

dist/src/components/media.d.ts

@@ -27,1 +27,6 @@ import { LitElement } from "lit";
 }
+export type FlexMediaProps = {
+    breakpoints?: string;
+    target?: string;
+    readonly sizes?: string;
+};

dist/src/components/utils.d.ts

@@ -6,2 +6,5 @@ import { LitElement } from "lit";
 }
+export type StackedBoxProps = {
+    crop?: boolean;
+};
 export declare class StackedCell extends LitElement {
@@ -17,2 +20,13 @@ static styles: import("lit").CSSResult;
 }
+export type StackedCellProps = {
+    rel?: boolean;
+    overlay?: boolean;
+    stretch?: boolean;
+    xa?: string;
+    xb?: string;
+    ya?: string;
+    yb?: string;
+    z?: string;
+    oc?: string;
+};
 export declare class FitBox extends LitElement {
@@ -24,2 +38,16 @@ static styles: import("lit").CSSResult;
 }
+export type FitBoxProps = {
+    flex?: boolean;
+    stretch?: boolean;
+    crop?: boolean;
+    scrollable?: boolean;
+    center?: boolean;
+    fill?: boolean;
+    round?: boolean;
+    cover?: boolean;
+    contain?: boolean;
+    force?: boolean;
+    width?: string;
+    height?: string;
+};
 export declare class AspectRatio extends LitElement {
@@ -34,2 +62,7 @@ static defaultProps: {
 }
+export type AspectRatioProps = {
+    fit?: boolean;
+    center?: boolean;
+    ratio?: string;
+};
 export declare class FlexDivider extends LitElement {
@@ -43,2 +76,12 @@ static styles: import("lit").CSSResult;
 }
+export type FlexDividerProps = {
+    v?: boolean;
+    h?: boolean;
+    stretch?: boolean;
+    dark?: boolean;
+    mg?: string;
+    width?: string;
+    color?: string;
+    size?: string;
+};
 export declare class SpaceBox extends LitElement {
@@ -51,2 +94,7 @@ static styles: import("lit").CSSResult;
 }
+export type SpaceBoxProps = {
+    width?: string;
+    height?: string;
+    size?: string;
+};
 export declare class StyleBox extends LitElement {
@@ -84,1 +132,33 @@ static styles: import("lit").CSSResult;
 }
+export type StyleBoxProps = {
+    fz?: string;
+    fw?: string;
+    lh?: string;
+    w?: string;
+    h?: string;
+    mw?: string;
+    mxw?: string;
+    mh?: string;
+    mxh?: string;
+    tt?: string;
+    pis?: string;
+    pie?: string;
+    pbs?: string;
+    pbe?: string;
+    mbs?: string;
+    mbe?: string;
+    mis?: string;
+    mie?: string;
+    mg?: string;
+    pd?: string;
+    ta?: string;
+    op?: string;
+    td?: string;
+    br?: string;
+    px?: string;
+    py?: string;
+    mx?: string;
+    my?: string;
+    inline?: boolean;
+    block?: boolean;
+};

index.d.ts

@@ -1,7 +0,33 @@
-export * from "./dist/src/components/container";
-export * from "./dist/src/components/media";
-export * from "./dist/src/components/utils";
-export * from "./dist/src/components/cell";
-export * from "./dist/src/components/grid";
-export * from "./dist/src/components/centerbox";
-export * from "./dist/src/components/canvas";
+import { FlexBoxProps } from "./src/components/box";
+import { FlexCanvasProps } from "./src/components/canvas";
+import { FlexCellProps } from "./src/components/cell";
+import { FlexGridProps } from "./src/components/grid";
+import { FlexMediaProps } from "./src/components/media";
+import { AspectRatioProps, FitBoxProps, FlexDividerProps, SpaceBoxProps, StackedBoxProps, StackedCellProps, StyleBoxProps } from "./src/components/utils";
+
+export * from "./src/components/box";
+export * from "./src/components/canvas";
+export * from "./src/components/cell";
+export * from "./src/components/grid";
+export * from "./src/components/media";
+export * from "./src/components/utils";
+
+ 
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'flex-box': FlexBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'flex-canvas': FlexCanvasProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'flex-cell': FlexCellProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'flex-grid': FlexGridProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'flex-media': FlexMediaProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'stacked-box': StackedBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'stacked-cell': StackedCellProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'fit-box': FitBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'a-ratio': AspectRatioProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'flex-divider': FlexDividerProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            'space-box': SpaceBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+            's-box': StyleBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}

package.json

@@ -8,2 +8,3 @@ {
     "@types/node": "^20.2.5",
+    "@types/react": "^18.2.12",
     "@types/webpack": "^5.28.1",
@@ -16,3 +17,5 @@ "@webpack-cli/generators": "^3.0.4",
     "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "declaration-bundler-webpack-plugin": "^1.0.3",
+    "lit": "^2.7.4",
     "mini-css-extract-plugin": "^2.7.6",
@@ -22,5 +25,7 @@ "postcss": "^8.4.24",
     "prettier": "^2.8.8",
+    "raw-loader": "^4.0.2",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
     "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "^9.4.3",
@@ -31,7 +36,3 @@ "typescript": "^5.0.4",
     "webpack-dev-server": "^4.15.0",
-    "wepack-cli": "^0.0.1-security",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "raw-loader": "^4.0.2",
-    "lit": "^2.7.4",
-    "terser-webpack-plugin": "^5.3.9"
+    "wepack-cli": "^0.0.1-security"
   },
@@ -44,7 +45,9 @@ "browserslist": [
   ],
-  "dependencies": {},
-  "version": "0.1.3",
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "version": "0.1.5",
   "description": "Flex Layout System",
   "name": "flex-layout-system",
-  "main": "dist/full.min.js",
+  "main": "src/index.ts",
   "keywords": [
@@ -67,3 +70,3 @@ "responsive design",
     "dist",
-    "dist/src",
+    "src",
     "index.d.ts"
@@ -70,0 +73,0 @@ ],

README.md

@@ -24,7 +24,8 @@ # Introducing Flex Layout System: Empowering Effortless Web Design
 ```js
-// Only one of the following is required.
-// If you want to use the base layout, import the following:
+// TS project / source file with TS support
+import "flex-layout-system";
+
+// JS project
 import "flex-layout-system/dist/base.min.js";
-
-// If you want to use the layout with utilities, import the following:
+// or 
 import "flex-layout-system/dist/full.min.js";
@@ -31,0 +32,0 @@

No alert changes

Improved metrics

Total package byte prevSize

229067

increased by82.32%

Number of package files

41

increased by64%

Lines of code

3656

increased by163.4%

Number of lines in readme file

61

increased by1.67%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

31

increased by3.33%

Dependency changes

• + Addedreact@^18.2.0

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)