sova-lib v0.1.0

nn-componenet-lib

json-server --watch db.json to start JSON server

Rules: Component Creation :

General

1. If you file having template or setup function then only it should have .vue extension
2. If you component does not maintain any state(data) means it should be functional component
3. reactive/refs should be used carefully. it should not be repetitive.
4. We planned to use shallow reactive in future. This improves performance.

#keywords

1. defaultData - It holds default data.It should be defined outside default export scope so that it will be initialised only one.
2. Data - This is not reactive just to combile default data and props
3. cData - holds all attributes with reactivity. This will be passed across base to child so any can access attributess.
4. cMethod - Hold public methods of the component. This will be passed across base to concrete.
5. publicMethods - all the public methods should be defined inside this method.
6. attributes - all the props need to pass to components are grouped under this object. (check 8th point in Comp Impl)
7. EventType - all the user defined event type should be defined here. 8 cEvents - this is holder for events defined from child to root. So that we can access root event in child

Components implementation

1. All Components should implement setup hook. This took props and context as arguments
2. Create data objects that add default properties and then suppose same property come is props it will override default const data = { ...defaultData, ...props.attributes };
3. All components or base components should inherit nn-root-comp.js. It will take data and context as arguments. Inherits Syntax: const { cData, cMethods ,cEvents } = nnInputField(data, context);
4. Then call publicMethods(cData , cMethods); append all the public methods to cMthods object using .operator const publicmethods = (cData, cMethods) => { // all pubilc methods shoud append with dot opperator cMethods.updateOptions }"
5. Return of setup hook Concrete file(with.vue extension) -> return { ...toRefs(cData), ...cMethods }; Other class -> return { cData, ...cMethods };
6. Method Over ride Always we are appending methods to Cmethod so it will defaulty override super methods
7. Call Super If you want to call super method , assign super method to variable before overriding and use it later " const publicmethods = (cData, cMethods) => { const superupdateValues = cMethods.updateValues; // assgin super method cMethods.updateValues = () => { cMethods.setAttribute({ label: ""Update From Component select"", }); superupdateValues(); // caling super metod } }" 8.Mention all Event Type in a EventType constant as follows, " const EventType = { CHANGE: ""fw_change"" };"

8. Emit event change inside any method or listen default event and then emitt custom event. " // do custom stuff here (validation,suppress etc) context.emit(cEvents.CHANGE, event);"

9. Attributes - we could not able inherit props , so we keep single object for attributes and all the props from template should be given in single object " props: { attributes: { type: Object, default: () => {} } }," <nnDropDown ref="PincodeSelect" :attributes="{ label: 'Default App' } /> template usage

Compoenet usage in app template , lets take drop down component which ref is "PincodeSelect" & label as Attribute

 <nnDropDown ref="PincodeSelect"  :attributes="{ label: 'Default App' } @fw_change="onChangeEmpSelect" />
  1. ref is simillar to id
  2. attributes , al the attributes are grouped under this object

" 3. Add Listener to custom event. @fw_change=""onChangeEmpSelect"" define onChangeEmpSelect insde app.js"

Compoenet access in app.js

1. Update Attributes " aMethod.getComponent(""PincodeSelect"").setAttribute({ label: ""Pincode App"", });"
2. Get Attributes aMethod.getComponent("PincodeSelect").getAttribute("options")
3. Invoke methods

App Implementation

1. All Apps should implement setup hook. This took props and context as arguments // To-Do .. Some concepts difficult to implemet after vue 3 update working on it

To Bundle

run -> npm run bundle

once bundle folder is generated you can use the libary

#see client.html for reference