@knighttower/adaptive - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

package.json

 {
   "name": "@knighttower/adaptive",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "index.cjs",

README.md

 (This docs still under construction, see "example" and "test" folders for extensive examples of usage)
 
-# Adaptive.js: Enhancing Layout Adaptability Beyond CSS, Navigating the Complexities of Modern Web Development
+# Adaptive.js: Enhancing Layout Adaptability Beyond CSS
 
@@ -34,3 +34,3 @@ It Uses/Offers:
 
-npm
+npm stand-alone
 
@@ -40,10 +40,8 @@ ```javascript
 ```
-
-yarn
-
+Or as part of the monorepo
+```javascript
+npm i knighttower
 ```
-yarn add adaptive.js
-```
 
-Dropin from CDN (no build step)
+Drop-in from CDN (no build step)
 
@@ -60,2 +58,3 @@ ```html
 
+
 ---
@@ -77,5 +76,5 @@
 
-## Usage <a name="usage"></a>
+# Usage <a name="usage"></a>
 
-**see the "example" folder for all 'usage' implementation examples, including Browser, Vue and React.** --> [here](https://github.com/knighttower/adaptive.js/tree/development/examples)
+**🙋‍♂️ see** the "example" folder for all 'usage' implementation examples, including Browser, Vue and React. --> [here](https://github.com/knighttower/adaptive.js/tree/development/examples)
 
@@ -118,152 +117,2 @@ ### As a module for Vue
 
-<br/> <br/>
-
-## API <a name="api"></a>
-
-### `getMinMaxQueries()`
-
-**Returns**: `Object`  
-**Description**: Returns all available min-max queries.
-
-#### Example
-
-```javascript
-const minMaxQueries = Adaptive.getMinMaxQueries();
-```
-
----
-
-### `getExpQueries()`
-
-**Returns**: `Object`  
-**Description**: Returns all available expression queries.
-
-#### Example
-
-```javascript
-const expQueries = Adaptive.getExpQueries();
-```
-
----
-
-### `registerElement(elementOrSelector: String | Object, data: Object)`
-
-**Parameters**:
-
--   `elementOrSelector` (String | Object): Element or selector string.
--   `data` (Object): Optional, used mostly for Vue.
-
-**Returns**: `Void`  
-**Description**: Registers an element for adaptive behavior.
-
-#### Example
-
-```javascript
-Adaptive.registerElement('#myElement', { directive: 'someValue' });
-```
-
----
-
-### `addQueryMinMax(id: String, min: Number, max: Number)`
-
-**Parameters**:
-
--   `id` (String): Identifier for the query.
--   `min` (Number): Minimum value.
--   `max` (Number): Maximum value.
-
-**Returns**: `Void`  
-**Description**: Registers a custom min-max query.
-
-#### Example
-
-```javascript
-Adaptive.addQueryMinMax('custom', 200, 400);
-```
-
----
-
-### `addQueryExpression(id: String, query: String)`
-
-**Parameters**:
-
--   `id` (String): Identifier for the query.
--   `query` (String): Media query string.
-
-**Returns**: `Void`  
-**Description**: Registers a custom expression query.
-
-#### Example
-
-```javascript
-Adaptive.addQueryExpression('custom', 'screen and (max-width: 500em)');
-```
-
----
-
-### `if(breakdownId: String, callback: Function | Array): Object`
-
-**Parameters**:
-
--   `breakdownId` (String): Identifier like "tablet" or "mobile", etc.
--   `callback` (Function | Array): Function/Method or Array with object and property to set.
-
-**Returns**: `Object`: Proxy  
-**Description**: Executes callback based on the media query match.
-
-#### Example
-
-```javascript
-Adaptive.if('mobile', [object, 'propertyId']) || Adaptive.if('mobile', () => {});
-```
-
----
-
-### `init()`
-
-**Returns**: `Void`  
-**Description**: Initializes or re-initializes after the DOM has loaded.
-
-#### Example
-
-```javascript
-Adaptive.init();
-```
-
----
-
-### `useVue(Vue: Object, hybrid: Boolean)`
-
-**Parameters**:
-
--   `Vue` (Object): Vue instance.
--   `hybrid` (Boolean): Allow support for both static and dynamic elements.
-
-**Returns**: `Vue`  
-**Description**: Configures the library for use with Vue.
-
-#### Example
-
-```javascript
-Adaptive.useVue(VueInstance, true);
-```
-
----
-
-### `useReact(React: Object, hybrid: Boolean)`
-
-**Parameters**:
-
--   `React` (Object): React instance.
--   `hybrid` (Boolean): Allow support for both static and dynamic elements.
-
-**Returns**: `Void`  
-**Description**: Configures the library for use with React.
-
-#### Example
-
-```javascript
-Adaptive.useReact(ReactInstance, true);
-```
-
 <br/><br/>
@@ -273,7 +122,8 @@
 
--   **Simple String** - It just teleports, does not specify breakpoints and location
-    `data-teleport="#hello"`
-    `data-teleport-before="#hello"`  
-    `data-teleport-after="#hello"`
+-   **Simple String** - It just teleports, does not specify breakpoints and location  
 
+    `data-teleport="#hello"`  
+    `data-teleport-before="#hello"`    
+    `data-teleport-after="#hello"`  
+
 ```html
@@ -286,4 +136,6 @@ <div data-teleport="#hello">
 ```
+---  
+<br/>  
 
--   **Dot notation** - Allows to specify multiple breakpoints and locations
+-   **Dot notation** - Allows to specify multiple breakpoints and locations  
     `data-adaptive=[command].[breakpoint].[to|from|after](target_id_or_class)`  
@@ -300,4 +152,6 @@ the "|" is "OR": [breakpoint]|[breakpoint]
 ```
+---  
+<br/>
 
--   **Object like**
+-   **Object like**  
     `data-adaptive={'command':{breakpoint:{[to|before|after]:target_id_or_class}}}`
@@ -316,4 +170,6 @@
 ```
+---  
+<br/> 
 
--   **Array like**
+-   **Array like**  
     `data-teleport=[[after|before], target_id_or_class]`
@@ -328,7 +184,12 @@
 ```
+---  
+<br/> 
 
--   **Inside Vue** - Array, object or dot notation works inside Vue, just use "v-adaptive=..." or " v-teleport-to..."
--
+-   **Inside Vue**   
+Use it to trigger functions or methods at specific breakpoints.  
+     
+- Array, object or dot notation works inside Vue, just use "v-adaptive=..." or " v-teleport-to..."
 
-```
+
+```html
 <div v-teleport-to="'#hello'">Getting teleported (teleport) from the component to "static Hello"</div>
@@ -338,3 +199,4 @@
 <script>
-.... mounted() {
+    //some code ...
+ mounted() {
 	this.Adaptive.if('tablet', function() {
@@ -389,3 +251,3 @@ // code
 <script>
-    // Target specific elements
+    // Target or register specific elements
     $adaptive.registerElement('#hello', {
@@ -451,3 +313,3 @@ addClass: {
 
-### Example as hybrid mode:
+### Example as hybrid mode and advance modes:
 
@@ -493,5 +355,168 @@ ```js
 
+
+<br/> <br/>
+
+# API <a name="api"></a>
+
+### `getMinMaxQueries()`
+
+**Returns**: `Object`  
+**Description**: Returns all available min-max queries.
+
+#### Example
+
+```javascript
+const minMaxQueries = Adaptive.getMinMaxQueries();
+```
+
+---
 <br/>
+
+### `getExpQueries()`
+
+**Returns**: `Object`  
+**Description**: Returns all available expression queries.
+
+#### Example
+
+```javascript
+const expQueries = Adaptive.getExpQueries();
+```
+
+---
 <br/>
 
+### `registerElement(elementOrSelector: String | Object, data: Object)`
+
+**Parameters**:
+
+-   `elementOrSelector` (String | Object): Element or selector string.
+-   `data` (Object): Optional, used mostly for Vue.
+
+**Returns**: `Void`  
+**Description**: Registers an element for adaptive behavior.
+
+#### Example
+
+```javascript
+Adaptive.registerElement('#myElement', { directive: 'someValue' });
+```
+
+---
+<br/>
+
+### `addQueryMinMax(id: String, min: Number, max: Number)`
+
+**Parameters**:
+
+-   `id` (String): Identifier for the query.
+-   `min` (Number): Minimum value.
+-   `max` (Number): Maximum value.
+
+**Returns**: `Void`  
+**Description**: Registers a custom min-max query.
+
+#### Example
+
+```javascript
+Adaptive.addQueryMinMax('custom', 200, 400);
+```
+
+---
+<br/>
+
+
+### `addQueryExpression(id: String, query: String)`
+
+**Parameters**:
+
+-   `id` (String): Identifier for the query.
+-   `query` (String): Media query string.
+
+**Returns**: `Void`  
+**Description**: Registers a custom expression query.
+
+#### Example
+
+```javascript
+Adaptive.addQueryExpression('custom', 'screen and (max-width: 500em)');
+```
+
+---  
+<br/>
+
+
+### `if(breakdownId: String, callback: Function | Array): Object`
+
+**Parameters**:
+
+-   `breakdownId` (String): Identifier like "tablet" or "mobile", etc.
+-   `callback` (Function | Array): Function/Method or Array with object and property to set.
+
+**Returns**: `Object`: Proxy  
+**Description**: Executes callback based on the media query match.
+
+#### Example
+
+```javascript
+Adaptive.if('mobile', [object, 'propertyId']) || Adaptive.if('mobile', () => {});
+```
+
+---  
+<br/>
+
+
+### `init()`
+
+**Returns**: `Void`  
+**Description**: Initializes or re-initializes after the DOM has loaded.
+
+#### Example
+
+```javascript
+Adaptive.init();
+```
+
+---  
+<br/>
+
+### `useVue(Vue: Object, hybrid: Boolean)`
+
+**Parameters**:
+
+-   `Vue` (Object): Vue instance.
+-   `hybrid` (Boolean): Allow support for both static and dynamic elements.
+
+**Returns**: `Vue`  
+**Description**: Configures the library for use with Vue.
+
+#### Example
+
+```javascript
+Adaptive.useVue(VueInstance, true);
+```
+
+---  
+<br/>
+
+### `useReact(React: Object, hybrid: Boolean)`
+
+**Parameters**:
+
+-   `React` (Object): React instance.
+-   `hybrid` (Boolean): Allow support for both static and dynamic elements.
+
+**Returns**: `Void`  
+**Description**: Configures the library for use with React.
+
+#### Example
+
+```javascript
+Adaptive.useReact(ReactInstance, true);
+```
+
+
+<br/>
+<br/>
+
 ### -- Teleport
@@ -498,0 +523,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1768008

increased by3.77%

Lines of code

40360

increased by2.64%

Number of lines in readme file

802

increased by3.22%

No dependency changes