1.0.16 • Published 2 months ago
cruded v1.0.16
cruded
it's an utility library for create crud
basic crud in dark mode
if u have some problem using the library
Functionalities
- generate list for pagination
- search input
- contextmenu per item
- diferent field types
- multilanguage
- support diferent data source
fromArray
get data from simple arrayfromIDB
get data from IndexedDB (todo)fromFetch
get data from urlREST API
using fetch API- custom data source
- generate form for field list
- autofill form when update an record
- validate form basead on options in fields (ex: req, min, max)
- custom form validation
Installation
with npm
npm i galho galhui cruded
add style
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/galhui/themes/basic.light.css" />
or to include this in the js/ts file, this need a bundler like vite or webpack to work
import "galhui/themes/basic.dark.css";
there are three variation
basic.dark
, basic.light
and basic
(dark will be used when prefers-color-scheme: dark and light otherwise)
localizations and icons
import {setEN,setIcons} from "cruded/config.js";
//define words to english
setEN();
//define icons
setIcons();
for custom words or icons do
import { icons, w } from "galhui";
Object.assign(icons, {
plus: "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z",
prev: "M14,7L9,12L14,17V7Z",
next: "M10,17L15,12L10,7V17Z",
//...
});
//w -> words used in the library
Object.assign(w, {
add: "...",
confirmRemove: "...",
confirmRemoveMany: "...",
duplicate: "...",
edit: "...",
editItemTitle: "...",
newItemTitle: "...",
remove: "...",
save: "...",
showAll: "...",
});
Usage
import { crud, fromArray, fText,fRadio } from "cruded";
import { get } from "galho";
import "galhui/themes/basic.dark.css";
const list = [
{ id: 1, fname: "Bobette", lname: "Oldroyde", gender: "F", tel: "508-974-4484", addr: "Room 1396" },
{ id: 2, fname: "Quincey", lname: "Livermore", gender: "M", tel: null, addr: null },
{ id: 3, fname: "Billye", lname: "Boutcher", gender: "F", tel: "472-985-4634", addr: "7th Floor" },
{ id: 4, fname: "Ardine", lname: "Bontine", gender: "F", tel: "620-502-4286", addr: "Suite 63" },
{ id: 5, fname: "Clayton", lname: "Dunkley", gender: "M", tel: "698-922-1909", addr: "16th Floor" },
];
//create datasource from array
const src = fromArray(list, [
fText("fname", { req: true, text: w.fname }),
fText("lname", { req: true, text: w.lname }),
fText("tel", { input: "tel" }),
fRadio("gender", [["F", "Female"], ["M", "Male"]], { text: w.gender }),
fText("addr", { text: w.addr }),
]);
//create bond to datasource, limit:10 define number of item per pag
const bond=new Bond(src, { limit: 10 });
//render crud component, limit
const myCrud = crud(bond);
//add crud to document.body
get("body").add(myCrud);
glossary
dataSource - an object responsable for define how data wil be retrived, stored and manipulated
Bond - a connection/filter to dataSource
, it store filter, sort, fields and others.
input - represent an form
input
field - represent an dataSource
field, except when readInly each field should have an associated input.
api
create field
cruded came with a collection of field that
import { fText,fDate,fTime,fNumb,fCheck,fSelect,fRadio } from "cruded";
//req abbr for required, by default is not requred
//def-> default value
//input is input type, text field input can be text(default),email,tel,url,ta(textarea)
//set define if this field should be in form for create ou update by default set is true
const field1 = fText("field_name",{req:true,def:null,text:"Render field name",input:"email",set:false});
//def:"now" can be used both Date and Time field
const field2 = fDate("birthDate",{def:"now"});
const field3 = fTime("currentTime");
//int is for input validation
const field4 = fNumb("price",{min:2,max:4500,int:false});
//fmt -> define how field will be rendered there is 3 default format yn->yesNo, tf->trueFalse, icon(default)->check,close icons
const field5 = fCheck("onSale",{def:true,fmt:"yn"});
//options can be shared between multiple fields, for ts import RadioOption for validation
const rOptions = [
["E","Edible"],
["N","Not Edible" ],
//...
];
const field6 = fRadio("type",rOptions);
//can be any data type
const sOptions = [
{abbr:"AO",name:"Angola"},
{abbr:"US",name:"Unated States",lang:"English"},
{abbr:"BR",name:"Brasil"},
{abbr:"FR",name:"France",capital:"paris"},
//...
];
//key is key field in the options
//view is what will be rendered in crud table
const field7 = fSelect("nationality",sOptions,{key:"abbr",view:i=>`${i.name}(${i.abbr})`});
create dataSource
create from Array
import { fromArray } from "cruded";
//arg1: array where data will be stored, don't need to be empty
//arg2: fields
//arg3: id field, don't need be part of table for autoIncrement id default is 'id'
//arg4: autoIncrement
const src = fromArray([],[field1,field2,field3]);
create from Restful API
import { fromFetch } from "cruded";
//arg1: url used for get, post, put, delete
//arg2: fields
//arg3: other options liker 'headers'
const src = fromFetch("/customers",[field1,field2,field3]);
post, put, delete
//add items
src.post([{field1:1,field2:"Same value",field3:true}]);
//update field2 of record with id:234
src.put([{id:234,field2:"New Value"}]);
//remove record with id:234
src.del([234]);