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