# Bilpack (beta)

### For this plugin you need vuetify, axios and $auth modules!

## Project setup
```
npm install bilpack
```

## include to plugins
```
import Vue from 'vue'
import {bilpack} from 'bilpack'
import 'bilpack/dist/bilpack.css'

export default ({ app }) => {
  Vue.use(bilpack, {
    project: '<PROJECT>', // optional
    vuetify: app.vuetify,
    axios: app.$axios,
    store: app.store,
    env: { // need for example to fetch apps
        bilapps: process.env.bilapps || 'https://...'
    },
    settings: {
      navLogo: { // assets for sidebar and header logos. Should be come from static folder
        light_y: '',
        dark_y: '',
        dark_x: '',
        light_x: '',
      }
    }
  })
}
```

## important!
### - Vuetify TreeShake must be set to false on used project. Otherwise the components will not mount
```
    // nuxt example
    vuetify: {
        treeShake: false, // set to false
    },
```


## Component List
- BfTest
- BfBreadcrumbs
- BfButton
- BfCalendar
- BfCard
- BfDatepicker
- BfForm
- BfHeader
- BfLayout
- BfListItem
- BfLoader
- BfModal
- BfMultiSelectForm
- BfOverlay
- BfPage
- BfSidebar
- BfSnackbar
- BfSwal
- BfTable
- BfTableExpandable
- BfTableRowHandler
- BfText

## Global Methods
```
-> $bilpack.$swal(options)
-> $bilpack.$snackbar(options)
... documentation soon
```

### TODO
- bf-sketch (fabric js integration)
- bf-editor (tiptap-vuetify integration)
- Detailed Documentation
- Css Optimizations

## Bilpack dev
```
1. bilpack main src: npm run dev
2. bilpack cd dev: npm run dev
```

## Bilpack build
```
bilpack main src: npm run build
```