@rypen-dev/shared-components v4.1.0

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

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

Events

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>