@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.

@import '~@rypen-dev/shared-components/scss/styles';

To reference the shared variables, include the reference line in other .scss files.

/// <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.

---

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.

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.

---

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>