RVCv0.61.0

User interface components and styles for Vue 3

View current page source code
GitHub
NPM

Install
Buttons
Containers
Forms
Icons
Modal
Theming
Toast notification
Tooltip
Typography
Utilities

1. Install

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

import { createApp } from "vue";
import rvc from "@rzuppur/rvc";
import App from "./App.vue";

const testApp = createApp(App);
testApp.use(rvc);

testApp.mount("#app");

2. Buttons

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" | "yellow")
  >
    {{ 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>

3. Containers

Containers for assigning a maximum width to content and adding a padding to sides.

r-container-xs
r-container-sm
r-container-md
r-container-lg
r-container-xl
r-container-fill

r-container-xs

r-container-sm

r-container-md

r-container-lg

r-container-xl

r-container-xxl

r-container-fill

4. Forms

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

<div class="r-form-group">
  <r-text-input
    v-model
    label?: string
    placeholder?: string
    help?: string
    error?: string // setting this will mark the field as invalid
    type?: string // default "text"
    fullwidth?: boolean // default true
    small?: boolean // default false
  >
  </r-text-input>
</div>

Text input

Small input

Full width

With error

Error message

With help

Help text

Textarea

5. Icons

Icon component using Material Symbols Rounded.

<r-icon
  icon: string
  filled?: boolean
  size?: "sm" | "md" | "lg"
  class?: "gray" | "green" | "red" | "blue" | "yellow" | "white"
/>

Filter

Show all

6. Modal

Exposed methods: open and close

Emits: close

<r-modal
  title: string | false
  blocking: boolean // optional
  buttons: boolean // optional, set to false to hide bottom bar with buttons
  size: string  // optional, ("xs" | "sm" | "md" | "xl" | "xxl" | "fill")
>
  {{ modal content }}
  <template v-slot:buttons>
    {{ r-buttons }}
  </template>
</r-modal>

Confirmation modal

import { useModalConfirm } from "@rzuppur/rvc";
const confirmModal = useModalConfirm();
const confirmed: boolean = await confirmModal(
    "Question",
    "Yes text", // optional
    "No text", // optional
    "Description text", // optional
);

7. Theming

Use CSS variables to customize and/or extend colors, text styles and more. Click on the variable name below to copy it to clipboard.

--p-white

#fff

--p-black

#000

--p-gray-950

#171717

--p-gray-900

#212121

--p-gray-850

#333

--p-gray-800

#424242

--p-gray-700

#616161

--p-gray-600

#757575

--p-gray-500

#9e9e9e

--p-gray-400

#bdbdbd

--p-gray-300

#e0e0e0

--p-gray-200

#eee

--p-gray-100

#f4f4f4

--p-gray-50

#fafafa

--p-blue-950

#112942

--p-blue-900

#053469

--p-blue-850

#06478a

--p-blue-800

#0168b7

--p-blue-700

#0b78c8

--p-blue-600

#178adb

--p-blue-500

#2097e8

--p-blue-400

#43a6eb

--p-blue-300

#65b6ed

--p-blue-200

#90cbf3

--p-blue-100

#bbdff7

--p-blue-50

#e3f2fb

--p-red-950

#3f1c14

--p-red-900

#651d0c

--p-red-850

#7c210d

--p-red-800

#8c290a

--p-red-700

#b03717

--p-red-600

#c0401c

--p-red-500

#ce491b

--p-red-400

#cf5439

--p-red-300

#cc6f60

--p-red-200

#dd968b

--p-red-100

#f5c9c8

--p-red-50

#fbe9ea

--p-purple-950

#23183f

--p-purple-900

#291469

--p-purple-850

#331585

--p-purple-800

#421f8f

--p-purple-700

#5629a6

--p-purple-600

#6231af

--p-purple-500

#6b36b5

--p-purple-400

#8154c0

--p-purple-300

#9873cc

--p-purple-200

#b59cda

--p-purple-100

#d2c3e9

--p-purple-50

#ede7f6

--p-yellow-950

#57371b

--p-yellow-900

#965607

--p-yellow-850

#d37500

--p-yellow-800

#f69100

--p-yellow-700

#f6a200

--p-yellow-600

#f6b400

--p-yellow-500

#f6c20b

--p-yellow-400

#f6cb2a

--p-yellow-300

#f7d650

--p-yellow-200

#f9e183

--p-yellow-100

#fbecb3

--p-yellow-50

#fdf8e1

--p-green-950

#163b29

--p-green-900

#0b4d2d

--p-green-850

#115735

--p-green-800

#136e3f

--p-green-700

#1a804b

--p-green-600

#288f5a

--p-green-500

#22a162

--p-green-400

#29b967

--p-green-300

#54ce7b

--p-green-200

#70d788

--p-green-100

#8de8a2

--p-green-50

#dcffe4

--c-background

#f4f4f4

#171717

--c-background-raised

#fff

#212121

--c-text

#212121

#bdbdbd

--c-text-muted

#616161

#9e9e9e

--c-text-blue

#0168b7

#178adb

--c-text-purple

#6b36b5

#9873cc

--c-text-red

#c0401c

#cc6f60

--c-text-yellow

#f6b400

--c-text-white

#fff

--c-icon-gray

#616161

#9e9e9e

--c-icon-green

#22a162

#29b967

--c-icon-red

#cf5439

--c-icon-blue

#178adb

#43a6eb

--c-icon-yellow

#f6b400

#f6cb2a

--c-icon-white

#fff

--c-border-light

#eee

#333

--c-border-medium

#e0e0e0

#424242

--c-border-dark

#9e9e9e

#616161

--c-accent-white

#fff

--c-accent-black

#000

--c-accent-yellow

#f6cb2a

#f6a200

--c-accent-focus

#65b6ed

#0b78c8

--c-accent-error

#cc6f60

--c-button-hover

rgba(0,0,0,.03)

rgba(255,255,255,.05)

--c-button-primary

#0b78c8

--c-button-primary-hover

#178adb

--c-button-gray

#f4f4f4

#333

--c-background-tooltip

rgba(0,0,0,.9)

--c-background-toast

rgba(0,0,0,.8)

rgba(0,0,0,.9)

--s-none

--s-xxs

2px

--s-xs

4px

--s-sm

8px

--s-md

16px

--s-lg

32px

--s-xl

64px

--s-xxl

128px

--container-xs

380px

--container-sm

540px

--container-md

720px

--container-lg

960px

--container-xl

1140px

--container-xxl

1320px

--t-family

BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

--t-weight-light

300

--t-weight-regular

400

--t-weight-medium

500

--t-weight-bold

700

--t-line-height-base

1.5

--t-size-base

16px

--t-size-xxs

max(var(--t-size-base) * .750187546886722, 14px)

--t-size-xs

calc(var(--t-size-base) * 1)

--t-size-sm

calc(var(--t-size-base) * 1.333)

--t-size-md

calc(var(--t-size-base) * 1.776889)

--t-size-lg

calc(var(--t-size-base) * 2.368593037)

--t-size-xl

calc(var(--t-size-base) * 3.157334518321)

--t-size-xxl

calc(var(--t-size-base) * 4.208726912921892)

--t-letter-spacing-xxs

.02em

--t-letter-spacing-xs

.01em

--t-letter-spacing-sm

0em

--t-letter-spacing-md

-.01em

--t-letter-spacing-lg

-.01em

--t-letter-spacing-xl

-.02em

--t-letter-spacing-xxl

-.02em

--t-line-height-xxs

calc(var(--t-line-height-base) * 1.1)

--t-line-height-xs

calc(var(--t-line-height-base) * 1)

--t-line-height-sm

calc(var(--t-line-height-base) * 1)

--t-line-height-md

calc(var(--t-line-height-base) * .95)

--t-line-height-lg

calc(var(--t-line-height-base) * .8)

--t-line-height-xl

calc(var(--t-line-height-base) * .75)

--t-line-height-xxl

calc(var(--t-line-height-base) * .75)

--transition-slow

.35s cubic-bezier(.31, .79, .46, .92)

--transition-default

125ms cubic-bezier(.31, .79, .46, .92)

--transition-fast

70ms cubic-bezier(.31, .79, .46, .92)

You can customize colors, spacing and fonts using CSS variables.

Media query utility classes (r-media-hide-under-{size}, r-media-hide-over-{size}) use these static values since CSS variables can not be used for a media query.

:root {
    --container-xs: 380px;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

8. Toast notification

import { useToast } from "@rzuppur/rvc";

const toast = useToast();
toast("message");

9. Tooltip

A basic tooltip directive v-r-tip. Supports top (default), bottom, left and right alignment: v-r-tip.bottom, v-r-tip.left, v-r-tip.right.

<div
  v-r-tip="'Tooltip text'"
></div>

10. Typography

Font size, letter spacing, line height

r-text-{size}
r-text-size-{size}
r-text-letter-spacing-{size}
r-text-line-height-{size}
size: xxs | xs | sm | md | lg | xl | xxl

Weight

r-text-light
r-text-regular
r-text-medium
r-text-bold

Color

r-text-color-regular
r-text-color-muted
r-text-color-red

Alignment

r-text-left
r-text-center
r-text-right

Overflow

r-ellipsis

Spacing

All adjacent p, ul, ol, pre, .r-space have a margin added between them.

XXL text

XL text

LG text

MD text

SM text

XS text

XXS text

Color muted

Color red

Weight light

Weight regular

Weight medium

Weight bold

11. Utilities

Add background color

r-background

Add raised background color (cards, for example)

r-background-raised

Border radius, margin, padding r-{type}-{size}

Type:
- Border radius: border-radius
- Margin: m
- Padding: p
Size: xxs to xxl

Margin and padding can also be used with direction r-{type}-{direction}-{size}

Direction: t b l r (top, bottom, left, right)

Hide under viewport size (xs to xxl)

r-media-hide-under-{size}

Hide over viewport size (xs to xxl)

r-media-hide-over-{size}

Apply display flex, direction row

r-flex-container

Apply flex direction column

r-flex-container-column

Enable flex wrap

r-flex-wrap

Align flex childs

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

Flex child grow and shrink value

r-flex-{0-3}

Clearfix

r-clearfix

RVCv0.61.0

User interface components and styles for Vue 3

Contents

1. Install

2. Buttons

3. Containers

4. Forms

5. Icons

6. Modal

7. Theming

8. Toast notification

9. Tooltip

10. Typography

11. Utilities