https://github.com/eace/magics

Alpine.js magic helpers
https://github.com/eace/magics

Last synced: about 1 month ago
JSON representation

Alpine.js magic helpers

• Host: GitHub
• URL: https://github.com/eace/magics
• Owner: eaCe
• Created: 2023-07-06T06:30:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-25T07:10:29.000Z (12 months ago)
• Last Synced: 2024-01-25T08:26:02.132Z (12 months ago)
• Language: JavaScript
• Homepage:
• Size: 146 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Alpine.js Magic helpers

This package provides some magic helpers for Alpine.js.

## Installation

### NPM

```bash

npm i https://github.com/eaCe/magics

```

### Yarn

```bash

yarn add https://github.com/eaCe/magics

```

Or copy the magics.js file from the src folder into your project and include it in your JavaScript bundle.

## Usage

```js

import Alpine from 'alpinejs';

import Magics from 'magics';

Alpine.plugin(Magics);

window.Alpine = Alpine

Alpine.start();

```

## Log Helpers

Every log-helper accepts one or two arguments. 

The first argument is the value to log. 

The second argument is a boolean value to clear the console before logging, if set to true.

You may pass an array of values as the first argument.

### `$log()`

Write a message to the console.

```html



    Log

    Clear previous logs and log



```


### `$warn()`

Write a warning message to the console.

```html



    Log



```


### `$error()`

Write an error message to the console.

```html



    Log



```


### `$info()`

Write an informational message to the console.

```html



    Log



```


### `$table()`

Writes a table in the console view.

```html



    Log



```


### `$clear()`

Clears the console.

```html



    Clear previous logs and log



```


### `$group()` and `$groupEnd()`

Creates a new group in the console view.

```html



    Group logs



```


## Size Helpers

### `$width` and `$width()`

Get or set the width of an element.

```html





```


### `$height` and `$height()`

Get or set the height of an element.

```html





```


## Position Helpers

### `$offset().top` and `$offset().left`

Get the offset of an element.

```html





```


## Misc Helpers

### `$hasClass()`

Checks if an element has a class.

```html



```


### `$trim()`

Trims whitespace from the beginning and end of a string.

```html



```