1.0.5 • Published 2 years ago

@open-vue-collection/ui v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@open-vue-collection/ui

Requires

  • Vue 3
  • Vuex 4

Installation

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" $YourProPackageToken

npm install @open-vue-collection/ui 
// src/main.js or src/main.ts

import { createApp } from 'vue';
import App from './App.vue';

import UI from '@open-vue-collection/ui';
import store from './store'; // Vuex 4

const app = createApp(App)
                .use(store) // important: install the Vuex store first!
                .use(UI)
                .mount('#app');
// tailwind.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require('tailwindcss/colors');

module.exports = {
    purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {
            borderRadius: {
                sm: '4px',
            },
        },
        fontFamily: {
            display: ['Montserrat'],
            header: ['Cubano'],
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            primary: 'rgba(24, 118, 210, var(--tw-bg-opacity))',
            ...colors,
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

Darkmode

// Switch between dark and light mode
this.$store.commit('darkmode/switch');

// active mode
this.$store.getters['darkmode/mode'] // -> 'dark' | 'light'

// if dark mode is active
this.$store.getters['darkmode/dark'] // -> boolean

Components

  • ✅ vue-button
  • ✅ vue-icon-button

  • ✅ vue-card

  • ✅ vue-tooltip

  • 🕐 vue-nav-bar

  • 🕐 vue-nav

  • 🕐 vue-simple-card

  • 🕐 vue-backdrop

  • 🕐 vue-app

  • 🕐 vue-modal