open-index/open-npm huggingface dataset:
npm package: @script-bridge/server
Description: two-way communication system between ScriptAPI and backend server using http request
Author: tutinoko2048
Latest version: 0.5.0

# ScriptBridge
## Server
### Installation
- npm
```
npm install @script-bridge/server
```
- yarn
```
yarn add @script-bridge/server
```
- pnpm
```
pnpm add @script-bridge/server
```
- bun
```
bun install @script-bridge/server
```

### Example
- JavaScript
```javascript
const { ScriptBridgeServer } = require('@script-bridge/server');
const server = new ScriptBridgeServer({ port: 8000 });
server.start();
```

- TypeScript
```typescript
import { ScriptBridgeServer } from '@script-bridge/server';
const server = new ScriptBridgeServer({ port: 8000 });
server.start();
```
npm package: @script-development/heatmap
Description: Vue heatmap
Author: Script
Latest version: 0.0.9

# Vue Heatmap
 
Simple vue calender heatmap

## Installation

```bash
npm i @script-development/heatmap
// or for pnpm
pnpm i @script-development/heatmap
```

In ur main.ts import the styling ( or add ur own )
```javascript
import '@script-development/heatmap/style.css';
```

If you'd like to add ur own styling, everything is prefixed with heatmap-<component>

```scss

.heatmap {
    // Is well, the container around it
    &-container {

    }

    // Week day display at the top
    &-week-day {

    }

    // The individual calender days
    &-day {

    }

    // the pagination
    &-pagination {
        //  Month date
        h5 {

        }

        // The arrow icons
        .icon {

        }
    }

// The tooltip
    &-tooltip {

    }
}
```


## Supported props

Type definitions can be found [here](/types/index.d.ts)

```javascript
values: {
    type: Object as PropType<HeatmapValues>,
    required: true,
},
locale: {
    type: String as PropType<keyof Locales>,
    default: 'en-US',
},
color: {
    type: String,
    default: '153, 27, 27',
},
enablePagination: {
    type: Boolean,
    default: true,
}
```

## Usage example

Add it like you would any other component

```vue

<script lang="ts" setup>
import Heatmap from '@script-development/heatmap';
</script>

<template>
    <Heatmap color="30, 134, 151" values="{max: 10, '2022-06-25': 17, '2022-06-26': 24}"/>
</template>
```
npm package: @script-development/vue-services
Description: Services for Vue SPA App
Author: Script
Latest version: 1.0.4

# vue-services

Documentation: https://script-development.github.io/vue-services/

To work locally run the following command in this directory:

-   npm link

Then run the following command in your project directory:

-   npm link @script-development/vue-services

## Frontend Controller

Vue Services uses Frontend Controllers.
A Controller requires an API Endpoint.

## Component layout

App Component -> Controller Base Component -> Controller Page Component

## Route layout per Controller

        route: plural translation
        component: Base Component
        children:

            page: Overview
            route: ''
            name: plural translation + .overview
            component: Overview Component

            page: Create
            route: '/create'
            name: plural translation + .overview
            component: Create Component

            page: Show
            route: ':id'
            name: plural translation + .show
            component: Show Component

            page: Edit
            route: ':id/edit'
            name: plural translation + .edit
            component: Edit Component

## Function Base Component

For every route the Base Component is also being loaded.
The Base Component calls the read method from the Controller once it is mounted.
This way when you switch from create to overview within the same Controller, the base data is not being loaded again.