0.1.14 • Published 1 year ago
vue3-pluggable-admin v0.1.14
Under construction (not stable)
- this module can contains break changes until it is in beta version
About
Inspired on :
- react admin: https://marmelab.com/react-admin/Admin.html
- Md-crud angular: https://github.com/ClassHP/md-crud
Pluggable module roadmap
General
- Nested CRUD
- Group package
Table
- Local
- Filtering
- LImit
- Sorting fields
- Delete local
- Get local
- Refresh public method
- Formkit custom input install
- Schema Sorting rows local
- Default Action permissions
- Errors alerts
- Slots (toolbar|header|footer|row actions)
- Toolbar (toolbar-left, toolbar-center, toolbar-right)
- header (header-scope, header-actions)
- row (row-scope, row-actions)
- footer (footer-scope, footer-actions)
- pagination
- Custom views
- currency
- toggle
- autocomplete
- dynamic
- Subform
- Grid
- Form
- CRUD
- Formkit custom input install
- Get local
- Tabs
- Local
- Slots (alert|prefix|suffix|error)
- Errors alerts
- Object lists dynamic
- Dynamic/select accept object loops
- Toolbars/Custom forms
- Custom inputs
- HasOne
- hasMany
- Collection
- Subform
- Grid
- Json
- Editor
- Auth
- Login
- Logged
- Logout
Events
- Global event bus
BUGS
- Filter duplicate when change page or limit
- Filter new search add new array duplicated
Demo
https://stackblitz.com/edit/vitejs-vite-shfymz
Schema docs
- See Github Wiki - https://github.com/minasvisual/vue-pluggable-admin/wiki
Installation
npm install vue3-pluggable-admin @formkit/vue
index.html (Tailwind CSS basic styles)
<head>
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
...
</head>
Vue 3
main.ts
import 'vue3-pluggable-admin/dist/vue3-pluggable-admin.css'
import { CustomInputs, CustomPlugins, Pluggable } from 'vue3-pluggable-admin';
import { plugin, defaultConfig } from '@formkit/vue'
//After const app = createApp(App)
app.use(plugin, defaultConfig({
inputs:{
...CustomInputs // Add custom pluggable inputs
// you can add yours: check docs https://formkit.com/guides/create-a-custom-input
},
plugins:[
...CustomPlugins, // Add custom pluggable plugins (masks, date format)
// you can add your plugins: check docs https://formkit.com/essentials/examples#plugins
]
}))
app.use(Pluggable)
Nuxt 3
- SOON
Astro + Vue
- Follow astro vue instructions
- Add app entrypoint: https://docs.astro.build/pt-br/guides/integrations-guide/vue/#appentrypoint\
_app.ts
import 'vue3-pluggable-admin/dist/vue3-pluggable-admin.css'
import type { App } from 'vue';
import { CustomInputs, Pluggable } from 'vue3-pluggable-admin';
import { plugin, defaultConfig } from '@formkit/vue'
export default (app: App) => {
app.use(plugin, defaultConfig({
inputs:{
...CustomInputs
},
plugins:[
...CustomPlugins
]
}))
app.use(Pluggable)
};
Basic usage
app.vue
<template>
<CrudFlow :schema="{
properties:[
{
'name': 'name',
'label': 'Name',
'config': {
'grid': true
}
}
],
api:{
'rootApi': 'https://jsonplaceholder.typicode.com/users',
'pagination':{
'local': true
}
}
}"
/>
</template>
- Properties: Grid and form fields/columns
- Api: Json source http config
Advanced usage
app.vue
<template>
<main class="w-full m-auto">
<CrudTable
:model="schema"
@create="e => setData(e.row)"
@edit="e => setData(e.row)"
/>
<div class="modal fixed w-full h-full bg-black/20 left-0 top-0" v-if="data">
<button class="absolute right-0"
@click="e => setData(null)"
>
✖
</button>
<div class="absolute w-1/2 -translate-x-1/2 left-1/2 bg-white p-4 rounded-lg my-2 max-h-[95vh] overflow-y-auto">
<CrudForm
:model="schema"
:data="data"
@saved="setData(null)"
/>
</div>
</div>
</main>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
const data = ref()
const schema = {
properties:[
{
"name": "name",
"label": "Name",
"config": {
"grid": true
}
}
],
api:{
"rootApi": "https://jsonplaceholder.typicode.com/users",
"pagination":{
"local": true
}
}
}
function setData (newVal) {
data.value = null
nextTick(() => {
data.value = newVal
})
}
</script>
Auth usage
app.vue Login test (https://fakestoreapi.com/docs):
- username: mor_2314
- password: 83r5^_
<template>
<CrudAuth
v-model:schema="schema"
:config="schema"
#default="{ methods:{logout}, session:{user, logged} }"
>
<button v-if="logged" @click="logout">{{ user.name }} - Logout</button>
<CrudFlow :schema="schema" />
</CrudAuth>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const schema = ref({
"auth":{
"url_login": "https://fakestoreapi.com/auth/login",
"field_username": "username",
"field_secret": "password",
"response_token": "token", // {"token":"xyz"}
"request_mode": "header", // logged requests method
"request_token": "Authorization", // header field
"request_token_expression": "Bearer {token}", // header value
"logged_url": "https://fakestoreapi.com/users/1", // get user data
"logged_model": { // user response data map { id:1, username:'', email:'' }
"id": "id",
"name": "username",
"username": "email",
"role": "level"
}
},
"properties":[
{ "name":"id", "config":{ "grid":true } },
{ "name":"email", "config":{ "grid":true } },
{ "name":"username", "config":{ "grid":true } },
],
"api":{
"rootApi": "https://fakestoreapi.com/users",
"pagination":{
"local": true
}
}
})
</script>
0.1.14
1 year ago
0.1.12
2 years ago
0.1.13
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.9
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.16
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago