@rypen-dev/shared-components

    2.1.79 • Public • Published

    @rypen-dev/shared-components

    npm (scoped) npm bundle size (minified)

    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>

    Keywords

    none

    Install

    npm i @rypen-dev/shared-components

    DownloadsWeekly Downloads

    13

    Version

    2.1.79

    License

    none

    Unpacked Size

    384 kB

    Total Files

    63

    Last publish

    Collaborators

    • rypen-dev