npm package: @rypen-dev/shared-components
Description: Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.
Latest version: 8.2.2

# @rypen-dev/shared-components

[![npm (scoped)](https://img.shields.io/npm/v/@rypen-dev/shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/shared-components)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@rypen-dev/shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/shared-components)

Shared styles and Vuejs ui components for Rypen projects.

## Install

```
$ npm install @rypen-dev/shared-components
```

## Usage

### Shared styles
In the project's .scss file, import the shared styles from the package.

```css
@import '~@rypen-dev/shared-components/scss/styles';
```

To reference the shared variables, include the reference line in other .scss files.
```css
/// <reference path="../../node_modules/@rypen-dev/shared-components/scss/variables" />
```

### Vuejs components

#### Icons
SVG icons exposed as Vuejs components to allow for reusability and styling through CSS properties.

Name | Description
--- | ---
IconBase | Base icon used as a wrapper around other icons.
IconClose | "X" icon used as the closing link in modals, etc.
IconCaret | ">" icon used for various navigation hints.

---

```js
import { IconBase, IconClose } from "@rypen-dev/shared-components";

<template>
    <icon-base icon-name="close" title="Close this dialog" width="24" height="24" viewBox="0 0 24 24"><icon-close /></icon-base>
</template>
<script>
    export default {
        ...
        components: {
            IconBase,
            IconClose
        }
    }
</script>
```

#### Loader
Animated Rypen logo for indicating loading state.
```js
import { Loader } from "@rypen-dev/shared-components";

<template>
    <div>
        <Loader v-if="loading" />
    </div>
</template>
<script>
    export default {
        data: () => {
            return {
                loading: false
            }
        },
        ...
        components: {
            Loader
        }
    }
</script>
```

#### ModalWrapper
Wrapper component for a consistent modal treatment. Includes in/out transitions.

##### Properties
Prop | Type | Description
--- | --- | ---
header | `string` | Title for modal.
closeable | `boolean` (default `true`) | Allow modal to be closed w/ `x` button or clicking outside modal bounds.
cssClass | `string` | Optional css class to add to modal container.

##### Events
Event | Type | Description
--- | --- | ---
close | `click` | Action to perform when close is triggered on the modal.

---

```js
import { ModalWrapper } from "@rypen-dev/shared-components";

<template>
    <modal-wrapper @close="closeAction" header="Modal title">
        <template slot="body">
            Body content for modal.
        </template>
        <template slot="footer">
            Footer content for modal.
        </template>
    </modal-wrapper>
</template>
<script>
    export default {
        data: () => {
            return {
                
            }
        },
        methods: {
            closeAction() {
                ...
            }
        },
        ...
        components: {
            ModalWrapper
        }
    }
</script>
```