open-index/open-npm huggingface dataset:
npm package: @hatchly/nuxt-files-module
Description: Official nuxt integration for the Hatchly/Files module
Author: Sam Turrell
Latest version: 1.0.0

# Nuxt Hatchly Files Module

> Module to integrate the Hatchly File module into a Nuxt app.

Currently the only feature of this module is to redirect files to the api when linked to via WYSIWYG attributes in the Pages module.

## Installation

```bash
yarn add @hatchly/nuxt-files-module
```

Register the module in your nuxt applications config file:

```js
module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-files-module', {
            // Options
        }],
    },

    hatchly: {
        files: {
            // Options can also be defined here
        },
    },
};
```

Add the API url to your .env:

```
API_BASE=http://my-application.localhost
```

## Options

The options object can contain the following values: 

```js
{
    apiBase: '',
    pathPrefix: '',
},
```

Each option is described below.

### `apiBase`

> The url of your Hatchly site. This is should be updated in your .env rather than hardcoding a value here.

- Default: `process.env.API_BASE`
- Type: `string`

### `pathPrefix`

> The path to where the file module links to images.

- Default: `'/files'`
- Type: `string`
npm package: @hatchly/nuxt-module
Description: > Nuxt module for integrating with Hatchly-based web platforms
Latest version: 2.0.0

# @netsells/nuxt-hatchly

> Nuxt module for integrating with Hatchly-based web platforms

## Features

This module sets up the various official hatchly Nuxt integration modules:

* [@hatchly/nuxt-files-module](https://npmjs.com/package/@hatchly/nuxt-files-module)
* [@hatchly/nuxt-navigation-module](https://npmjs.com/package/@hatchly/nuxt-navigation-module)
* [@hatchly/nuxt-newsletter-module](https://npmjs.com/package/@hatchly/nuxt-newsletter-module)
* [@hatchly/nuxt-pages-module](https://npmjs.com/package/@hatchly/nuxt-pages-module)
* [@hatchly/nuxt-redirects-module](https://npmjs.com/package/@hatchly/nuxt-redirects-module)
* [@hatchly/nuxt-snippets-module](https://npmjs.com/package/@hatchly/nuxt-snippets-module)

## Usage

Install the dependencies using the following command:

```sh
yarn add @netsells/nuxt-hatchly
```

Add the module to your `modules` array in your nuxt config file:

```js
modules: [
    '@netsells/nuxt-hatchly',
],
```

By default it will register all of the modules, but you can make it only register specific modules using the `hatchly.modules` array in your nuxt config:

```js
hatchly: {
    modules: [
        'pages', 
        'snippets',
        // etc.
    ],
},
```

For module specific config options, check the various modules own documentation.
npm package: @hatchly/nuxt-navigation-module
Description: Official nuxt integration for the Hatchly/Navigation module
Author: Sam Turrell
Latest version: 4.1.2

# Nuxt Hatchly Navigation Module

> Module to easily fetch and access navigations from the `hatchly/navigation` api

## Installation

```bash
yarn add @hatchly/nuxt-navigation-module
```

Register the module in your nuxt applications config file:

```js
module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-navigation-module', {
            // Options
        }],
    },

    hatchly: {
        navigation: {
            // Options can also be defined here
        },
    },
};
```

Add the API url to your .env:

```
API_URL=http://my-application.localhost
```

## Options

The options object can contain the following values: 

```js
{
    cacheTimeout: '',
},
```

Each option is described below.

### `cacheTimeout`

> The duration, in seconds, until the cached date is refreshed. The cache can be disabled completely by passing a falsey value. 

- Default: `86400` (24 hours)
- Type: `number|boolean`

### Runtime config

By default, this package will utilise `API_URL` and `API_URL_BROWSER` variables as defined in your env. These are injected as runtime variables for you.

You can supply your endpoint manually to the module via the `publicRuntimeConfig` and `privateRuntimeConfig` objects, e.g.:

```js
module.exports = {
    publicRuntimeConfig: {
        hatchly: {
            navigation: {
                // Overwrite options for the snippets module
                endpoint: process.env.NAVIGATIONS_API_URL,
            },
        },    
    },
};
```

## Usage

All navigations are downloaded server side on page load.

To access a navigation you can use the global `$nav()` method:

```vue
<ul v-if="$nav('main')">
    <li v-for="link in $nav('main')" :key="link.id">
        <component :is="link.tag" v-bind="link.attributes">
            {{ link.title }}
        </component>
        <ul>
            <li v-for="child in link.children" :key="child.id">
                <component :is="child.tag" v-bind="child.attributes">
                    {{ child.title }}
                </component>
            </li>
        </ul>
    </li>
</ul>
```

## Storybook

This module exposes a storybook integration to add the `$nav` global and the store module. Simply pull the following module into your project and register your navigations, in the `preview.js` file for example:

```js
import hatchlyNavigation from '@hatchly/nuxt-navigation-module/storybook';
import { navs } from './fixtures/navs';
import store from './store';

hatchlyNavigation({
    store,
    navs,
});
```
npm package: @hatchly/nuxt-newsletter-module
Description: Official nuxt integration for the Hatchly/Newsletter module
Author: Sam Turrell
Latest version: 1.0.1

# Nuxt Hatchly Newsletter Module

> Module to easily integrate with the Hatchly Newsletter module

## Installation

```bash
yarn add @hatchly/nuxt-newsletter-module
```

Register the module in your nuxt applications config file:

```js
module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-newsletter-module', {
            // Options
        }],
    },

    hatchly: {
        newsletter: {
            // Options can also be defined here
        },
    },
};
```

Add the API url to your .env:

```
API_BASE=http://my-application.localhost
```

## Options

The options object can contain the following values: 

```js
{
    baseURL: '',
    browserBaseURL: '',
},
```

Each option is described below.

### `baseURL`

> The url of your Hatchly site. If `browserBaseURL` is not provided this url will be used for both server side and client side fetching.

- Default: `process.env.API_URL`
- Type: `string`

### `browserBaseURL`

> The public url of your Hatchly site. 

- Default: `process.env.API_URL_BROWSER`
- Type: `string`

### Runtime config

If using nuxt runtime config to inject env variables at runtime, each of the above options can be overwritten in both `publicRuntimeConfig` and `privateRuntimeConfig` objects, for example:

```js
module.exports = {
    publicRuntimeConfig: {
        hatchly: {
            // Inherit options for all hatchly modules
            baseURL: process.env.API_URL,
            
            newsletter: {
                // Overwrite options for the newsletter module
                baseURL: process.env.API_URL,
            },
        },    
    },
};
```

## Usage

This module will register a Vuex module for interacting with the newsletter api, and provides a vuex action for you to call within your application:

```vue
<template>
    <form @submit.prevent="handleSubmit">
        <input type="email" v-model="formData.email">
    </form>
</template>

<script>
    import { mapActions } from 'vuex';

    export default {
        name: 'newsletter-form',

        data() {
            return {
                formData: {
                    email: '',
                },            
            };
        },

        methods: {
            ...mapActions('newsletter', ['subscribe']),

            async handleSubmit() {
                try {
                    await this.subscribe(this.formData);
                } catch (e) {
                    // Handle errors
                }   
            },
        },
    };
</script>
```
npm package: @hatchly/nuxt-redirects-module
Description: Official nuxt integration for the Hatchly/Redirects module
Author: Sam Turrell
Latest version: 2.0.0

# Nuxt Hatchly Redirects Module

> Module to easily implement redirects from the `hatchly/redirects` api

## Installation

```bash
yarn add @hatchly/nuxt-redirects-module
```

Register the module in your nuxt applications config file:

```js
module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-redirects-module', {
            // Options
        }],
    },

    hatchly: {
        redirects: {
            // Options can also be defined here
        },
    },
};
```

Add the API url to your .env:

```
API_URL=http://my-application.localhost
```

## Options

The options object can contain the following values: 

```js
{
    cacheTimeout: '',
},
```

Each option is described below.

### `cacheTimeout`

> The duration, in seconds, until the cached date is refreshed. The cache can be disabled completely by passing a falsey value.

- Default: `86400` (24 hours)
- Type: `number|boolean`

### Runtime config

By default, this package will utilise `API_URL` and `API_URL_BROWSER` variables as defined in your env. These are injected as runtime variables for you.

You can supply your endpoint manually to the module via the `publicRuntimeConfig` and `privateRuntimeConfig` objects, e.g.:

```js
module.exports = {
    publicRuntimeConfig: {
        hatchly: {
            redirects: {
                // Overwrite options for the redirects module
                endpoint: process.env.REDIRECTS_API_URL,
            },
        },    
    },
};
```

## Usage

All redirects are downloaded server side and will automagically handle them on page load.
npm package: @hatchly/nuxt-snippets-module
Description: Official nuxt integration for the Hatchly/Snippets module
Author: Sam Turrell
Latest version: 4.1.1

# Nuxt Hatchly Snippets Module

> Module to easily fetch and access snippets from the `hatchly/snippets` api

## Installation

```bash
yarn add @hatchly/nuxt-snippets-module
```

Register the module in your nuxt applications config file:

```js
module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-snippets-module', {
            // Options
        }],
    },

    hatchly: {
        snippets: {
            // Options can also be defined here
        },
    },
};
```

Add the API url to your .env:

```
API_URL=http://my-application.localhost
```

## Options

The options object can contain the following values: 

```js
{
    cacheTimeout: '',
},
```

Each option is described below.

### `cacheTimeout`

> The duration, in seconds, until the cached date is refreshed. The cache can be disabled completely by passing a falsey value.

- Default: `86400` (24 hours)
- Type: `number|boolean`

### Runtime config

By default, this package will utilise `API_URL` and `API_URL_BROWSER` variables as defined in your env. These are injected as runtime variables for you.

You can supply your endpoint manually to the module via the `publicRuntimeConfig` and `privateRuntimeConfig` objects, e.g.:

```js
module.exports = {
    publicRuntimeConfig: {
        hatchly: {
            snippets: {
                // Overwrite options for the snippets module
                endpoint: process.env.SNIPPETS_API_URL,
            },
        },    
    },
};
```

## Usage

All snippets are downloaded server side on page load.

To access a snippet you can use the global `$snippet()` method:

```vue
{{ $snippet('snippet_key') }}
```

## Storybook

This module exposes a storybook integration to add the `$snippet` global and the store module. Simply pull the following module into your project and register your snippets, in the `preview.js` file for example:

```js
import hatchlySnippets from '@hatchly/nuxt-snippets-module/storybook';
import { snippets } from './fixtures/snippets';
import store from './store';

hatchlySnippets({
    store,
    snippets,
});
```
npm package: @hatchun/filtersjs
Description: Simple faceted search solution for small JSON datasets.
Author: Tomek Kolasa
Latest version: 1.0.5

# filtersjs

Simple faceted search solution for small JSON datasets.

## Installation

`yarn` or `npm install`

## Usage

```javascript
// import or require filtersjs
import { FiltersJS, Operation } from "filtersjs";

// data to filter
const items = [
  {
    name: "Scot",
    gender: "Male",
    age: 18,
    card: ["jcb", "visa", "mastercard"]
  },
  {
    name: "Seana",
    gender: "Female",
    age: 21,
    card: ["jcb", "visa"]
  },
  {
    name: "Ken",
    gender: "Male",
    age: 45,
    card: ["jcb", "visa"]
  },
  {
    name: "Boony",
    gender: "Male",
    age: 47,
    card: ["visa"]
  },
  {
    name: "Mike",
    gender: "Male",
    age: 67,
    card: ["jcb", "visa"]
  }
];

/**
 * Options object with filters definitions.
 * By default values are converted to lower case strings before match,
 * for custom comparator provide a isMatching(val) function.
 */
const options = {
  filters: [
    { key: "card", value: "jcb" },
    { key: "card", value: "mastercard" },
    { key: "card", value: "visa" },
    { key: "gender", value: "male" },
    { key: "gender", value: "female" },
    {
      key: "age",
      value: "18-25",
      isMatching: v => 18 <= v && v <= 25
    },
    {
      key: "age",
      value: "25-50",
      isMatching: v => 25 <= v && v <= 50
    },
    { key: "age", value: ">50", isMatching: v => 50 < v }
  ]
};

// create a FiltersJS instance
const filtersJS = new FiltersJS(items, options);

// call search by providing current filters values
const { results, filters } = filtersJS.search({
  card: { values: ["jcb", "visa"], operation: Operation.And },
  gender: "male",
  age: ["18-25", "25-50"]
});

// filtered results
console.log(results);
// Prints:
// {
//   name: "Scot",
//   gender: "Male",
//   age: 18,
//   card: ["jcb", "visa", "mastercard"]
// },
// {
//   name: "Ken",
//   gender: "Male",
//   age: 45,
//   card: ["jcb", "visa"]
// }

/**
 * Active filters with number of results for each filter (if it will be applied).
 * Can be used for basic facating and hiding filters that won't produce any results.
 */
console.log(filters);
// Prints:
// {
//   card: { mastercard: 3 },
//   gender: { female: 3 },
//   age: { ">50": 3 }
// }
```