@rypen-dev/shared-components NPM

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

@fortawesome/fontawesome-free @rypen-dev/helpers foundation-sites moment

@infinitebrahmanuniverse/nolb-_ryp @everything-registry/sub-chunk-799 @zalastax/nolb-_ryp

7 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago