@appnest/masonry-layout - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

custom-elements.json

 {
-  "version": 2,
+  "version": "experimental",
   "tags": [
     {
       "name": "masonry-layout",
+      "path": "./../src/lib/masonry-layout.ts",
       "description": "Masonry layout web component. It places the slotted elements in the optimal position based\non the available vertical space, just like mason fitting stones in a wall.",
-      "jsDoc": "/**\n * Masonry layout web component. It places the slotted elements in the optimal position based\n * on the available vertical space, just like mason fitting stones in a wall.\n * @example <masonry-layout><div class=\"item\"></div><div class=\"item\"></div></masonry-layout>\n * @csspart column - Each column of the masonry layout.\n * @csspart column-index - The specific column at the given index (eg. column-0 would target the first column and so on)\n * @slot - Items that should be distributed in the layout.\n */",
       "attributes": [
         {
+          "name": "debounce",
+          "description": "The ms of debounce when the element resizes.",
+          "type": "number"
+        },
+        {
           "name": "maxcolwidth",
           "description": "The maximum width of each column if cols are set to auto.",
-          "jsDoc": "/**\n\t * The maximum width of each column if cols are set to auto.\n\t * @attr maxcolwidth\n\t * @param v\n\t */",
           "type": "number"
         },
         {
-          "name": "cols",
-          "description": "The amount of columns.",
-          "jsDoc": "/**\n\t * The amount of columns.\n\t * @attr cols\n\t * @param v\n\t */",
-          "type": "number | \"auto\""
-        },
-        {
           "name": "gap",
           "description": "The gap in pixels between the columns.",
-          "jsDoc": "/**\n\t * The gap in pixels between the columns.\n\t * @attr gap\n\t * @param v\n\t */",
           "type": "number"
         },
         {
-          "name": "debounce",
-          "description": "The ms of debounce when the element resizes.",
-          "jsDoc": "/**\n\t * The ms of debounce when the element resizes.\n\t * @attr debounce\n\t * @param v\n\t */",
-          "type": "number"
+          "name": "cols",
+          "description": "The amount of columns.",
+          "type": "number | \"auto\""
         }
@@ -36,27 +32,35 @@ ],
         {
+          "name": "debounce",
+          "attribute": "debounce",
+          "description": "The ms of debounce when the element resizes.",
+          "type": "number"
+        },
+        {
           "name": "maxColWidth",
+          "attribute": "maxcolwidth",
           "description": "The maximum width of each column if cols are set to auto.",
-          "jsDoc": "/**\n\t * The maximum width of each column if cols are set to auto.\n\t * @attr maxcolwidth\n\t * @param v\n\t */",
           "type": "number"
         },
         {
+          "name": "gap",
+          "attribute": "gap",
+          "description": "The gap in pixels between the columns.",
+          "type": "number"
+        },
+        {
           "name": "cols",
+          "attribute": "cols",
           "description": "The amount of columns.",
-          "jsDoc": "/**\n\t * The amount of columns.\n\t * @attr cols\n\t * @param v\n\t */",
           "type": "number | \"auto\""
         },
         {
-          "name": "gap",
-          "description": "The gap in pixels between the columns.",
-          "jsDoc": "/**\n\t * The gap in pixels between the columns.\n\t * @attr gap\n\t * @param v\n\t */",
-          "type": "number"
+          "name": "onSlotChange"
         },
         {
-          "name": "debounce",
-          "description": "The ms of debounce when the element resizes.",
-          "jsDoc": "/**\n\t * The ms of debounce when the element resizes.\n\t * @attr debounce\n\t * @param v\n\t */",
-          "type": "number"
+          "name": "onResize"
+        },
+        {
+          "name": "layout"
         }
       ],
-      "events": [],
       "slots": [
@@ -68,11 +72,10 @@ {
       ],
-      "cssProperties": [],
       "cssParts": [
         {
+          "name": "column",
+          "description": "Each column of the masonry layout."
+        },
+        {
           "name": "column-index",
           "description": "The specific column at the given index (eg. column-0 would target the first column and so on)"
-        },
-        {
-          "name": "column",
-          "description": "Each column of the masonry layout."
         }
@@ -79,0 +82,0 @@ ]

package.json

 {
 	"name": "@appnest/masonry-layout",
-	"version": "2.0.7",
+	"version": "2.0.8",
 	"license": "MIT",
@@ -49,5 +49,5 @@ "module": "index.js",
 	"devDependencies": {
-		"@appnest/readme": "^1.2.5",
-		"@appnest/web-config": "0.4.39"
+		"@appnest/readme": "^1.2.6",
+		"@appnest/web-config": "0.5.0"
 	}
 }

README.md

@@ -1,2 +0,2 @@
-<h1 align="center">@appnest/masonry-layout</h1>
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️--><h1 align="center">@appnest/masonry-layout</h1>
 
@@ -135,11 +135,30 @@ <p align="center">
 
+#### Example
+
+```html
+<masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
+```
+
 #### Properties
 
-| Property      | Attribute     | Type               | Description                                      |
-|---------------|---------------|--------------------|--------------------------------------------------|
-| `cols`        | `cols`        | `number \| "auto"` | The amount of columns.                           |
-| `debounce`    | `debounce`    | `number`           | The ms of debounce when the element resizes.     |
-| `gap`         | `gap`         | `number`           | The gap in pixels between the columns.           |
-| `maxColWidth` | `maxcolwidth` | `number`           | The maximum width of each column if cols are set to auto. |
+| Property       | Attribute     | Type               | Description                                      |
+|----------------|---------------|--------------------|--------------------------------------------------|
+| `cols`         | `cols`        | `number \| "auto"` | The amount of columns.                           |
+| `debounce`     | `debounce`    | `number`           | The ms of debounce when the element resizes.     |
+| `gap`          | `gap`         | `number`           | The gap in pixels between the columns.           |
+| `layout`       |               |                    |                                                  |
+| `maxColWidth`  | `maxcolwidth` | `number`           | The maximum width of each column if cols are set to auto. |
+| `onResize`     |               |                    |                                                  |
+| `onSlotChange` |               |                    |                                                  |
 
+#### Methods
+
+| Method           | Type                                    | Description                                      |
+|------------------|-----------------------------------------|--------------------------------------------------|
+| `layout`         | `(): void`                              | Layouts the elements.                            |
+| `onResize`       | `(entries?: object \| undefined): void` | Each time the element resizes we need to schedule a layout<br />if the amount available columns has has changed. |
+| `onSlotChange`   | `(): void`                              |                                                  |
+| `renderCols`     | `(colCount: number): void`              | Render X amount of columns.                      |
+| `scheduleLayout` | `(ms?: number): void`                   | Schedules a layout.                              |
+
 #### Slots
@@ -146,0 +165,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45935

increased by0.52%

Lines of code

703

increased by0.29%

Number of lines in readme file

193

increased by10.92%

No dependency changes