@voyo/yo-ui

Vue 3 UI component library.

Installation

npm install @voyo/yo-ui

Usage

Full Registration

import { createApp } from 'vue'
import YoUI from '@voyo/yo-ui'
import '@voyo/yo-ui/dist/style.css'

const app = createApp(App)
app.use(YoUI)

Tree-shaking (Individual Imports)

import { YoBtn, YoModal, snack } from '@voyo/yo-ui'
import '@voyo/yo-ui/dist/style.css'

Components

| Component | Tag | Description | |-----------|-----|-------------| | YoBtn | <yo-btn> | Button with ripple effect | | YoInput | <yo-input> | Input with label and suffix support | | YoCheckbox | <yo-checkbox> | Checkbox with ripple radio | | YoDropdown | <yo-dropdown> | Dropdown with positioning | | YoModal | <yo-modal> | Modal dialog | | YoToast | <yo-toast> | Toast notifications | | YoSnack | <yo-snack> | Snackbar notifications | | YoImg | <yo-img> | Lazy-loaded image with intersection observer | | YoRippleRadio | <yo-ripple-radio> | Ripple radio button | | YoConfirm | <yo-confirm> | Confirm dialog | | MdRender | <md-render> | Markdown renderer |

Directives

| Directive | Description | |-----------|-------------| | v-voyo-ripple | Ripple effect on any element | | v-yo-tooltip | Tooltip on hover | | v-yo-throttle-click | Throttle click events |

Utility Functions

import { snack, toast, yoConfirm } from '@voyo/yo-ui'

snack({ message: 'Hello', type: 'info' })
toast('Saved!', 2000)
yoConfirm({
  html: 'Are you sure?',
  title: 'Delete',
  cb: async (result) => {
    if (result) console.log('confirmed')
  }
})

Build

npm run build    # Build JS + CSS
npm run dev      # Watch mode