Have ideas to improve npm?Join in the discussion! »

    @rzuppur/rvc
    TypeScript icon, indicating that this package has built-in type declarations

    0.48.0 • Public • Published

    Reino Vue Components

    npm version Licence Netlify demo build

    View demo & docs
    Install


    Modal

    <r-modal
      title: string | false
      blocking: boolean // optional
      buttons: boolean // optional, set to false to hide bottom bar with buttons
      size: string  // optional, ("small" | "medium" | "large" | "huge" | "maximum")
    >
      {{ modal content }}
      <template v-slot:buttons>
        {{ r-buttons }}
      </template>
    </r-modal>

    Confirmation modal

    const result = await this.$root.rModalConfirm(
      "Question",
      "Confirm text", // optional
      "Cancel text", // optional
      "Description text", // optional
    );

    Tooltip

    Tooltip directive v-rtip. Supports top (default), bottom, left and right alignment: v-rtip.bottom, v-rtip.left, v-rtip.right.

    <div
      v-rtip="'Tooltip text'"
    ></div>

    Button

    Every property listed is optional. If button contains no childs but has an icon, it will be shown as an icon button (width equal to height).

      <r-button
        primary: boolean
        gray: boolean 
        borderless: boolean
        small: boolean
        fullwidth: boolean
        disabled: boolean
        loading: boolean  // Shows a loading spinner and disables the button
        submit: boolean  // default type="button", this sets it to "submit" (for forms)
        action: function  // @click handler
        actionWithModifier: function  // @click.ctrl.exact handler
        label: string  // aria-label, for icon only buttons
        icon: string  // One of valid r-icon icons
        icon-right: boolean  // default false
        icon-color: string  // ("gray" | "green" | "red" | "blue" | "link" | "white")
      >
        {{ text }}
      </r-button>

    Grouped buttons

    <div class="r-buttons-grouped">
      <div class="r-button-group">
        {{ r-buttons }}
      </div>
      <div class="r-button-group">
        {{ r-buttons }}
      </div>
    </div>

    Icon

    Material or modified material icons as 24x24px svg.

    <r-icon
      icon: string
      icon-color: string  // ("gray" | "green" | "red" | "blue" | "link" | "white")
    />

    Toast notification

    From any component, call this.$rNotifyToast("message");. Auto-hide timer is based on text length and paused if window is not currently visible.

    Dark mode

    Add class darkMode to any parent element.

    Containers

    Container sizes: r-container-tiny, r-container-small, r-container-medium, r-container-large, r-container-huge, r-container-maximum

    For basic content container use class r-container and r-container-{size}.

    For columns, use r-container-row on parent and if you want your row to have a maximum width add r-container-{size}. Use r-container-column for columns and add r-container-{size} to limit column size.

    Add r-columns-mobile-{small|medium|large} to r-container-row to specify the breakpoint when columns should switch to block layout.

    <div class="r-container r-container-{tiny|small|medium|large|huge|maximum}"></div>
    
    <div class="r-container-row r-container-{tiny|small|medium|large|huge|maximum} r-columns-mobile-{small|medium|large}">
      <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
      <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
      <div class="r-container-column r-container-{tiny|small|medium|large|huge|maximum}"></div>
    </div>

    Typography

    Semantic heading level and visual style is separated — headings are all reset to normal text. Use r-title-N for visually styling them.

    Default font stack is "Inter", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" but Inter is not imported, if you want to use it instead of OS default fonts you have to add @import url('https://rsms.me/inter/inter.css') to your css.

    You can override the font and weights using stylus variables. Font size and ratio affects spacing, this can be overridden using $spacing-base.

    • $font-sans font stack
    • $font-weight-sans-regular default 400
    • $font-weight-sans-medium default 500
    • $font-weight-sans-bold default 600
    • $line-height-base default 1.5
    • $font-size-base default 16px
    • $font-sizes-ratio default 1.333, used for generating heading sizes

    Text style classes:

    Weight: r-text-regular, r-text-medium, r-text-bold

    Color: r-text-color-body, r-text-color-quiet, r-text-color-error

    Size: r-text-small, r-title-1, r-title-2, r-title-3, r-title-4, r-title-5, r-title-6, r-title-caps

    Alignment: r-text-left, r-text-center, r-text-right

    Overflow: r-ellipsis### Tabs Basic tabs component.

    <r-tabs
      extendLine: boolean  // Adds negative margin to the line between tabs and content, useful for top navigation tabs
      line: boolean  // Used to hide the line between tabs and content, this also removes any margin between tabs and content
    >
      <r-tab-content
        name: string  // REQUIRED
        icon: string  // optional r-icon
      ></r-tab-content>
    </r-tabs>

    Form

    Bind value with v-model. Same props (except type) apply for r-text-input and r-text-input-area

    <div class="r-form-group">
      <r-text-input
        label: string
        placeholder: string
        helper-text: string
        invalid-message: string // setting this will mark the field as invalid
        type: string // default "text"
        fullwidth: boolean  // default true
      >
      </r-text-input>
    </div>

    Sheets

    r-elevation-{0-4} to add text and background color that changes with dark mode. For example, main content area and sidebar/header.

    r-border-radius add default border radius

    r-border-radius-double add default * 2 border radius

    Other

    r-{"margin" | "padding"}-{direction}-{size} apply margin/padding to element

    • direction: top bottom left right
    • size: huge large medium small tiny none

    r-media-hide-{"small" | "medium" | "large"} and r-media-show-{"small" | "medium" | "large"} to show/hide some items on small/medium/wide screens.

    r-flex-container display flex, direction row

    r-flex-container-column flex direction column

    r-flex-items-{"start" | "center" | "end"} align flex childs

    r-flex-{0-3} flex child grow and shrink value

    r-clearfix clearfix

    r-styled-scrollbar custom scrollbar style

    Usage

    Install

    yarn add @rzuppur/rvc or npm install --save @rzuppur/rvc

    import Vue from "vue";
    import rvc from "@rzuppur/rvc";
    import "@rzuppur/rvc/src/styles/main.styl";
    
    Vue.use(rvc);

    To customize Stylus variables, import main.styl in your app styles instead and override values before the import. View variables that can be themed here.

    /* CUSTOMIZE VARIABLES HERE */
    $color-text = green
    
    /* IMPORT RVC MAIN.STYL HERE */
    @import "../node_modules/@rzuppur/rvc/src/styles/main.styl"

    Dev

    Project setup

    yarn install
    

    Compiles and hot-reloads for development

    yarn run demo
    

    Compiles and minifies for production

    yarn run build
    

    Install

    npm i @rzuppur/rvc

    DownloadsWeekly Downloads

    94

    Version

    0.48.0

    License

    MIT

    Unpacked Size

    397 kB

    Total Files

    42

    Last publish

    Collaborators

    • avatar