@wizepe/wizeui

A reusable, lightweight, and highly customizable Vue 2.7 component library for admin panels.

Install

npm install @wizepe/wizeui

Peer dependencies (must be installed in the host project):

npm install vue@^2.7 moment sweetalert axios vuelidate

Setup

// main.js
import Vue from 'vue'
import WizeAdminLibrary from '@wizepe/wizeui'
import '@wizepe/wizeui/dist/style.css'

Vue.use(WizeAdminLibrary)

Available components

Layout & Shell: WzLayout, WzHeader, WzSidebar, WzHorizontalNav, WzSettingsPanel

Data display: WzCard, WzTable, WzTableContainer, WzTableToolbar, WzTableFilters, WzTableFooter, WzSearchBar, WzFilterMenu, WzPagination, WzBadge, WzProgress

Form controls: WzInput, WzSelect, WzTextarea, WzDatepicker, WzCheckbox (with switch mode), WzFileInput

Actions & feedback: WzButton, WzDropdown, WzTabs, WzAlert, WzModal, WzConfirmModal, WzSweetAlert, WzLoader, WzTooltip

Mixins & utils

Available as named exports:

import {
  // Mixins
  SortMixin, ConfirmModalMixin, AlertMixin, FilterMixin, PaginationMixin,
  // Utils
  Alert, LocalStorage, SSOUtils, ErrorUtils, Helpers, CustomValidators, Util,
} from '@wizepe/wizeui'

Theming

The library uses CSS custom properties. Override them in the host project to retheme:

:root {
  --admin-primary-color: #6366f1;
  --admin-success-color: #22c55e;
  --admin-warning-color: #f59e0b;
  --admin-danger-color:  #ef4444;
  --admin-info-color:    #3b82f6;
}

License

MIT