0.1.14 • Published 1 year ago

vue3-pluggable-admin v0.1.14

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Under construction (not stable)

  • this module can contains break changes until it is in beta version

About

Inspired on :

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

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

  1. Follow astro vue instructions
  2. 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)"
       >
        &#10006;
      </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