@iankibetsh/shframework 1.2.6 → 1.2.8

package/dist/dist/library.mjs.css

@@ -1,36 +1,4 @@
 
-.sh-phone{
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 0 0.25rem;
-}
-.phone-country{
-  width: 2rem;
-  border: none;
-  align-self: center;
-  outline: none !important;
-  padding: 0.4rem;
-  border-right: 1px solid #0003;
-}
-.phone-number{
-  width: calc(100% - 2.2rem);
-  border: none;
-  align-self: center;
-  outline: none;
-  margin-bottom: 0;
-  padding: 0.4rem;
-}
-.sh-phone img{
-  padding: 0.125rem;
-  width: 2rem;
-  height: 2rem;
-}
-.phone-number::placeholder{
-  font-weight: 300;
-  opacity: 0.5;
-}
-
 .colored-toast.swal2-icon-success {
   background-color: #a5dc86 !important;
 }
@@ -63,6 +31,38 @@
   color: white;
 }
 
+.sh-phone{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0 0.25rem;
+}
+.phone-country{
+  width: 2rem;
+  border: none;
+  align-self: center;
+  outline: none !important;
+  padding: 0.4rem;
+  border-right: 1px solid #0003;
+}
+.phone-number{
+  width: calc(100% - 2.2rem);
+  border: none;
+  align-self: center;
+  outline: none;
+  margin-bottom: 0;
+  padding: 0.4rem;
+}
+.sh-phone img{
+  padding: 0.125rem;
+  width: 2rem;
+  height: 2rem;
+}
+.phone-number::placeholder{
+  font-weight: 300;
+  opacity: 0.5;
+}
+
 .sh-selected-item{
   line-height: unset!important;
 }

package/dist/library.js

@@ -169,7 +169,8 @@ const Toast = Swal__default["default"].mixin({
   }
 });
 function getShConfig(key = null,def = '') {
-  const config = ShStorage.getItem('ShConfig');
+
+  const config = ShStorage.getItem('ShConfig') ?? {};
   if(key) {
     return config[key] ?? def
   }
@@ -369,6 +370,7 @@ if (process.env.NODE_ENV === 'production') {
 const axios = Axios__default["default"].create({
   baseURL: apiUrl
 });
+window.shAxionInstance = axios;
 function doGet (endPoint, data) {
   updateSession();
   return axios.get(endPoint, {
@@ -1870,7 +1872,7 @@ const countries = [
   }
 ];
 
-var script$g = {
+var script$h = {
   name: 'ShPhone',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1975,10 +1977,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$g.render = render$7;
-script$g.__file = "src/lib/components/ShPhone.vue";
+script$h.render = render$7;
+script$h.__file = "src/lib/components/form-components/ShPhone.vue";
 
-var script$f = {
+var script$g = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2052,8 +2054,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$f.render = render$6;
-script$f.__file = "src/lib/components/FormComponent/ShEditor.vue";
+script$g.render = render$6;
+script$g.__file = "src/lib/components/form-components/ShEditor.vue";
 
 const _hoisted_1$d = {
   key: 0,
@@ -2076,7 +2078,7 @@ const _hoisted_10$3 = {
 };
 
 
-var script$e = {
+var script$f = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2217,15 +2219,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__scopeId = "data-v-5b767123";
-script$e.__file = "src/lib/components/FormComponent/ShSuggest.vue";
+script$f.__scopeId = "data-v-71cc9569";
+script$f.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$d = {
+var script$e = {
   name: 'ShForm',
   components: {
-    ShSuggest: script$e,
-    ShEditor: script$f,
-    ShPhone: script$g
+    ShSuggest: script$f,
+    ShEditor: script$g,
+    ShPhone: script$h
   },
   props: [
       'action',
@@ -2822,13 +2824,13 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$d.render = render$5;
-script$d.__file = "src/lib/components/ShForm.vue";
+script$e.render = render$5;
+script$e.__file = "src/lib/components/ShForm.vue";
 
 const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
 const _hoisted_2$8 = { class: "dropdown" };
 
-var script$c = {
+var script$d = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -2875,7 +2877,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$d, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$e, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -2884,9 +2886,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$c.__file = "src/lib/components/ShDropDownForm.vue";
+script$d.__file = "src/lib/components/ShDropDownForm.vue";
 
-var script$b = {
+var script$c = {
   name: 'ShModal',
   props: ['modalTitle', 'modalId', 'modalSize'],
   components: {
@@ -2929,12 +2931,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 8 /* PROPS */, _hoisted_1$a))
 }
 
-script$b.render = render$4;
-script$b.__file = "src/lib/components/ShModal.vue";
+script$c.render = render$4;
+script$c.__file = "src/lib/components/ShModal.vue";
 
 const _hoisted_1$9 = ["href"];
 
-var script$a = {
+var script$b = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -2974,12 +2976,12 @@ return (_ctx, _cache) => {
     }, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 10 /* CLASS, PROPS */, _hoisted_1$9),
-    vue.createVNode(script$b, {
+    vue.createVNode(script$c, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$d, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$e, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -2989,9 +2991,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$a.__file = "src/lib/components/ShModalForm.vue";
+script$b.__file = "src/lib/components/ShModalForm.vue";
 
-var script$9 = {
+var script$a = {
   name: 'ShCanvas',
   props: ['canvasTitle', 'canvasId', 'position','canvasSize'],
   components: {
@@ -3041,10 +3043,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ], 10 /* CLASS, PROPS */, _hoisted_1$8))
 }
 
-script$9.render = render$3;
-script$9.__file = "src/lib/components/ShCanvas.vue";
+script$a.render = render$3;
+script$a.__file = "src/lib/components/ShCanvas.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'Pagination',
   props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore'],
   data () {
@@ -3233,8 +3235,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$8.render = render$2;
-script$8.__file = "src/lib/components/list_templates/Pagination.vue";
+script$9.render = render$2;
+script$9.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
@@ -3243,7 +3245,7 @@ const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("span", {
 }, null, -1 /* HOISTED */);
 
 
-var script$7 = {
+var script$8 = {
   __name: 'ShConfirmAction',
   props: {
   data: Object,
@@ -3329,7 +3331,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$7.__file = "src/lib/components/ShConfirmAction.vue";
+script$8.__file = "src/lib/components/ShConfirmAction.vue";
 
 const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
@@ -3337,7 +3339,7 @@ const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-var script$6 = {
+var script$7 = {
   __name: 'ShSilentAction',
   props: {
   data: Object,
@@ -3425,9 +3427,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$6.__file = "src/lib/components/ShSilentAction.vue";
+script$7.__file = "src/lib/components/ShSilentAction.vue";
 
-var script$5 = {
+var script$6 = {
   name: 'sh-table',
   props: ['endPoint', 'headers', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds'],
   inject: ['channel'],
@@ -3659,10 +3661,10 @@ var script$5 = {
     this.reloadData();
   },
   components: {
-    ShSilentAction: script$6,
-    ShConfirmAction: script$7,
-    ShCanvas: script$9,
-    pagination: script$8
+    ShSilentAction: script$7,
+    ShConfirmAction: script$8,
+    ShCanvas: script$a,
+    pagination: script$9
   },
   computed: {
     windowWidth: function () {
@@ -4292,10 +4294,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$5.render = render$1;
-script$5.__file = "src/lib/components/ShTable.vue";
+script$6.render = render$1;
+script$6.__file = "src/lib/components/ShTable.vue";
 
-var script$4 = {
+var script$5 = {
   name: 'ShTabs',
   props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
   data () {
@@ -4416,8 +4418,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$4.render = render;
-script$4.__file = "src/lib/components/ShTabs.vue";
+script$5.render = render;
+script$5.__file = "src/lib/components/ShTabs.vue";
 
 const _hoisted_1$3 = {
   class: "nav nav-tabs",
@@ -4432,7 +4434,7 @@ const _hoisted_4$3 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none"
 const _hoisted_5$3 = { class: "sh_tab_count" };
 const _hoisted_6$2 = { class: "tab-content" };
 
-var script$3 = {
+var script$4 = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data'],
   setup(__props) {
@@ -4486,7 +4488,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$3.__file = "src/lib/components/ShDynamicTabs.vue";
+script$4.__file = "src/lib/components/ShDynamicTabs.vue";
 
 const useUserStore = pinia.defineStore('user-store', {
   state: () => ({
@@ -4596,7 +4598,7 @@ const _hoisted_4$2 = {
 const _hoisted_5$2 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
 
 
-var script$2 = {
+var script$3 = {
   __name: 'Departments',
   setup(__props) {
 
@@ -4626,7 +4628,7 @@ return (_ctx, _cache) => {
           _hoisted_5$2,
           vue.createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        vue.createVNode(script$5, {
+        vue.createVNode(script$6, {
           headers: ['id','name','description', 'created_at'],
           "end-point": "admin/departments/list",
           actions: {
@@ -4640,12 +4642,12 @@ return (_ctx, _cache) => {
       ]
     }
         }),
-        vue.createVNode(script$b, {
+        vue.createVNode(script$c, {
           "modal-id": "sh-department_modal",
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$d, {
+            vue.createVNode(script$e, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -4662,7 +4664,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$2.__file = "src/lib/components/core/Departments/Departments.vue";
+script$3.__file = "src/lib/components/core/Departments/Departments.vue";
 
 const _hoisted_1$1 = {
   key: 0,
@@ -4681,7 +4683,7 @@ const _hoisted_4$1 = { class: "text-primary text-capitalize" };
 const _hoisted_5$1 = ["value"];
 const _hoisted_6$1 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */);
 
-var script$1 = {
+var script$2 = {
   __name: 'Department',
   setup(__props) {
 
@@ -4779,7 +4781,7 @@ return (_ctx, _cache) => {
         vue.createElementVNode("div", _hoisted_2$1, [
           _hoisted_3$1,
           vue.createElementVNode("h5", null, "Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          vue.createVNode(script$5, {
+          vue.createVNode(script$6, {
             actions: {
       label: 'Actions',
       actions: [
@@ -4799,12 +4801,12 @@ return (_ctx, _cache) => {
             headers: ['id',showModule,'created_at'],
             "end-point": 'admin/departments/department/list-modules/' + id.value
           }, null, 8 /* PROPS */, ["actions", "reload", "headers", "end-point"]),
-          vue.createVNode(script$b, {
+          vue.createVNode(script$c, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$d, {
+              vue.createVNode(script$e, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -4826,7 +4828,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          vue.createVNode(script$9, {
+          vue.createVNode(script$a, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -4874,7 +4876,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$1.__file = "src/lib/components/core/Departments/department/Department.vue";
+script$2.__file = "src/lib/components/core/Departments/department/Department.vue";
 
 const _withScopeId = n => (vue.pushScopeId("data-v-2911509a"),n=n(),vue.popScopeId(),n);
 const _hoisted_1 = {
@@ -4902,7 +4904,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = { class: "sh-auth-footer" };
 
-var script = {
+var script$1 = {
   __name: 'ShAuth',
   setup(__props) {
 
@@ -4929,7 +4931,7 @@ vue.watch(user,(newUser) => {
 function loginSuccessful(res){
   userStore.setAccessToken(res.token);
   userStore.setUser();
-  router.push(redirectLogin);
+  window.location.href = redirectLogin;
 }
 
 return (_ctx, _cache) => {
@@ -4941,7 +4943,7 @@ return (_ctx, _cache) => {
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(script$d, {
+              vue.createVNode(script$e, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -4966,7 +4968,7 @@ return (_ctx, _cache) => {
               (vue.unref(registerSubTitle))
                 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
-              vue.createVNode(script$d, {
+              vue.createVNode(script$e, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -4987,27 +4989,75 @@ return (_ctx, _cache) => {
 
 };
 
-script.__scopeId = "data-v-2911509a";
-script.__file = "src/lib/components/core/auth/ShAuth.vue";
+script$1.__scopeId = "data-v-2911509a";
+script$1.__file = "src/lib/components/core/auth/ShAuth.vue";
+
+var script = {
+  __name: 'TextInput',
+  props: ['modelValue','label'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = vue.ref(null);
+
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+vue.onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+});
+
+
+return (_ctx, _cache) => {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+    type: "text",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vue.vModelText, inputModel.value]
+  ])
+}
+}
+
+};
+
+script.__file = "src/lib/components/form-components/TextInput.vue";
 
 const ShFrontend = {
   install: (app, options) => {
-    ShStorage.setItem('ShConfig',options);
     if(options.sessionTimeout){
       app.provide('sessionTimeout',options.sessionTimeout);
       ShStorage.setItem('sessionTimeout',options.sessionTimeout);
     }
+    const shFormElements = options.shFormElementClasses ?? {};
+
+    const defaultFormElementClasses = {
+      formGroup: shFormElements.formGroup ?? 'mb-2',
+      formLabel: shFormElements.formLabel ?? 'form-label',
+      helperText: shFormElements.helperText ?? 'form-text',
+      actionBtn: shFormElements.actionBtn ?? 'btn btn-primary',
+      formErrorTitle: shFormElements.formErrorTitle ?? 'alert alert-danger',
+      invalidFeedback: shFormElements.invalidFeedback ?? 'invalid-feedback'
+    };
     const swalPosition = options.swalPosition ?? 'top-end';
     const loginEndpoint = options.loginEndpoint ?? 'auth/login';
     const registerEndpoint = options.registerEndpoint ?? 'auth/register';
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
+    options.formTextInput ?? script;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
     const registrationFields = options.registrationFields ?? ['name','email','phone','password','password_confirmation'];
-    const AuthComponent = options.authComponent ?? script;
+    const AuthComponent = options.authComponent ?? script$1;
     app.provide('loginEndpoint',loginEndpoint);
     app.provide('registerEndpoint', registerEndpoint);
     app.provide('registrationFields', registrationFields);
@@ -5016,7 +5066,9 @@ const ShFrontend = {
     app.provide('redirectLogin', redirectLogin);
     app.provide('redirectRegister', redirectRegister);
     app.provide('logoutApiEndpoint', logoutApiEndpoint);
+    app.provide('formComponents', options.shFormComponents);
     app.provide('loginUrl', loginUrl);
+    app.provide('shFormElementClasses',defaultFormElementClasses);
     window.swalPosition = swalPosition;
     if(options.router) {
       options.router.addRoute({
@@ -5025,28 +5077,34 @@ const ShFrontend = {
       });
       options.router.addRoute({
         path: '/sh-departments',
-        component: script$2
+        component: script$3
       });
       options.router.addRoute({
         path: '/sh-departments/permissions/:id',
-        component: script$1
+        component: script$2
       });
     }
+    //filter unwanted config items from options to be put in local storage
+    const removeKeys = ['formTextInput','router','shFormElementClasses'];
+    const allowKeys = [];
+    Object.keys(options).map(key=> ((typeof options[key] !== 'string' && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
+
+    ShStorage.setItem('ShConfig',options);
   }
 };
 
-exports.ShCanvas = script$9;
-exports.ShConfirmAction = script$7;
-exports.ShDropDownForm = script$c;
-exports.ShDynamicTabs = script$3;
-exports.ShForm = script$d;
+exports.ShCanvas = script$a;
+exports.ShConfirmAction = script$8;
+exports.ShDropDownForm = script$d;
+exports.ShDynamicTabs = script$4;
+exports.ShForm = script$e;
 exports.ShFrontend = ShFrontend;
-exports.ShModal = script$b;
-exports.ShModalForm = script$a;
-exports.ShPhone = script$g;
-exports.ShSilentAction = script$6;
-exports.ShTable = script$5;
-exports.ShTabs = script$4;
+exports.ShModal = script$c;
+exports.ShModalForm = script$b;
+exports.ShPhone = script$h;
+exports.ShSilentAction = script$7;
+exports.ShTable = script$6;
+exports.ShTabs = script$5;
 exports.shApis = shApis;
 exports.shRepo = shRepo;
 exports.shStorage = ShStorage;

package/dist/library.mjs

@@ -157,7 +157,8 @@ const Toast = Swal.mixin({
   }
 });
 function getShConfig(key = null,def = '') {
-  const config = ShStorage.getItem('ShConfig');
+
+  const config = ShStorage.getItem('ShConfig') ?? {};
   if(key) {
     return config[key] ?? def
   }
@@ -357,6 +358,7 @@ if (process.env.NODE_ENV === 'production') {
 const axios = Axios.create({
   baseURL: apiUrl
 });
+window.shAxionInstance = axios;
 function doGet (endPoint, data) {
   updateSession();
   return axios.get(endPoint, {
@@ -1858,7 +1860,7 @@ const countries = [
   }
 ];
 
-var script$g = {
+var script$h = {
   name: 'ShPhone',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1963,10 +1965,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$g.render = render$7;
-script$g.__file = "src/lib/components/ShPhone.vue";
+script$h.render = render$7;
+script$h.__file = "src/lib/components/form-components/ShPhone.vue";
 
-var script$f = {
+var script$g = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2040,8 +2042,8 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$f.render = render$6;
-script$f.__file = "src/lib/components/FormComponent/ShEditor.vue";
+script$g.render = render$6;
+script$g.__file = "src/lib/components/form-components/ShEditor.vue";
 
 const _hoisted_1$d = {
   key: 0,
@@ -2064,7 +2066,7 @@ const _hoisted_10$3 = {
 };
 
 
-var script$e = {
+var script$f = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2205,15 +2207,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__scopeId = "data-v-5b767123";
-script$e.__file = "src/lib/components/FormComponent/ShSuggest.vue";
+script$f.__scopeId = "data-v-71cc9569";
+script$f.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$d = {
+var script$e = {
   name: 'ShForm',
   components: {
-    ShSuggest: script$e,
-    ShEditor: script$f,
-    ShPhone: script$g
+    ShSuggest: script$f,
+    ShEditor: script$g,
+    ShPhone: script$h
   },
   props: [
       'action',
@@ -2810,13 +2812,13 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$d.render = render$5;
-script$d.__file = "src/lib/components/ShForm.vue";
+script$e.render = render$5;
+script$e.__file = "src/lib/components/ShForm.vue";
 
 const _hoisted_1$b = /*#__PURE__*/createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
 const _hoisted_2$8 = { class: "dropdown" };
 
-var script$c = {
+var script$d = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -2863,7 +2865,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        createVNode(script$d, normalizeProps(guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        createVNode(script$e, normalizeProps(guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -2872,9 +2874,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$c.__file = "src/lib/components/ShDropDownForm.vue";
+script$d.__file = "src/lib/components/ShDropDownForm.vue";
 
-var script$b = {
+var script$c = {
   name: 'ShModal',
   props: ['modalTitle', 'modalId', 'modalSize'],
   components: {
@@ -2917,12 +2919,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   ], 8 /* PROPS */, _hoisted_1$a))
 }
 
-script$b.render = render$4;
-script$b.__file = "src/lib/components/ShModal.vue";
+script$c.render = render$4;
+script$c.__file = "src/lib/components/ShModal.vue";
 
 const _hoisted_1$9 = ["href"];
 
-var script$a = {
+var script$b = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -2962,12 +2964,12 @@ return (_ctx, _cache) => {
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 10 /* CLASS, PROPS */, _hoisted_1$9),
-    createVNode(script$b, {
+    createVNode(script$c, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: withCtx(() => [
-        createVNode(script$d, mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        createVNode(script$e, mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -2977,9 +2979,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$a.__file = "src/lib/components/ShModalForm.vue";
+script$b.__file = "src/lib/components/ShModalForm.vue";
 
-var script$9 = {
+var script$a = {
   name: 'ShCanvas',
   props: ['canvasTitle', 'canvasId', 'position','canvasSize'],
   components: {
@@ -3029,10 +3031,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ], 10 /* CLASS, PROPS */, _hoisted_1$8))
 }
 
-script$9.render = render$3;
-script$9.__file = "src/lib/components/ShCanvas.vue";
+script$a.render = render$3;
+script$a.__file = "src/lib/components/ShCanvas.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'Pagination',
   props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore'],
   data () {
@@ -3221,8 +3223,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$8.render = render$2;
-script$8.__file = "src/lib/components/list_templates/Pagination.vue";
+script$9.render = render$2;
+script$9.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$6 = /*#__PURE__*/createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
@@ -3231,7 +3233,7 @@ const _hoisted_1$6 = /*#__PURE__*/createElementVNode("span", {
 }, null, -1 /* HOISTED */);
 
 
-var script$7 = {
+var script$8 = {
   __name: 'ShConfirmAction',
   props: {
   data: Object,
@@ -3317,7 +3319,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$7.__file = "src/lib/components/ShConfirmAction.vue";
+script$8.__file = "src/lib/components/ShConfirmAction.vue";
 
 const _hoisted_1$5 = /*#__PURE__*/createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
@@ -3325,7 +3327,7 @@ const _hoisted_1$5 = /*#__PURE__*/createElementVNode("span", {
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-var script$6 = {
+var script$7 = {
   __name: 'ShSilentAction',
   props: {
   data: Object,
@@ -3413,9 +3415,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$6.__file = "src/lib/components/ShSilentAction.vue";
+script$7.__file = "src/lib/components/ShSilentAction.vue";
 
-var script$5 = {
+var script$6 = {
   name: 'sh-table',
   props: ['endPoint', 'headers', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds'],
   inject: ['channel'],
@@ -3647,10 +3649,10 @@ var script$5 = {
     this.reloadData();
   },
   components: {
-    ShSilentAction: script$6,
-    ShConfirmAction: script$7,
-    ShCanvas: script$9,
-    pagination: script$8
+    ShSilentAction: script$7,
+    ShConfirmAction: script$8,
+    ShCanvas: script$a,
+    pagination: script$9
   },
   computed: {
     windowWidth: function () {
@@ -4280,10 +4282,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$5.render = render$1;
-script$5.__file = "src/lib/components/ShTable.vue";
+script$6.render = render$1;
+script$6.__file = "src/lib/components/ShTable.vue";
 
-var script$4 = {
+var script$5 = {
   name: 'ShTabs',
   props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
   data () {
@@ -4404,8 +4406,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$4.render = render;
-script$4.__file = "src/lib/components/ShTabs.vue";
+script$5.render = render;
+script$5.__file = "src/lib/components/ShTabs.vue";
 
 const _hoisted_1$3 = {
   class: "nav nav-tabs",
@@ -4420,7 +4422,7 @@ const _hoisted_4$3 = /*#__PURE__*/createElementVNode("i", { class: "d-none" }, n
 const _hoisted_5$3 = { class: "sh_tab_count" };
 const _hoisted_6$2 = { class: "tab-content" };
 
-var script$3 = {
+var script$4 = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data'],
   setup(__props) {
@@ -4474,7 +4476,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$3.__file = "src/lib/components/ShDynamicTabs.vue";
+script$4.__file = "src/lib/components/ShDynamicTabs.vue";
 
 const useUserStore = defineStore('user-store', {
   state: () => ({
@@ -4584,7 +4586,7 @@ const _hoisted_4$2 = {
 const _hoisted_5$2 = /*#__PURE__*/createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
 
 
-var script$2 = {
+var script$3 = {
   __name: 'Departments',
   setup(__props) {
 
@@ -4614,7 +4616,7 @@ return (_ctx, _cache) => {
           _hoisted_5$2,
           createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        createVNode(script$5, {
+        createVNode(script$6, {
           headers: ['id','name','description', 'created_at'],
           "end-point": "admin/departments/list",
           actions: {
@@ -4628,12 +4630,12 @@ return (_ctx, _cache) => {
       ]
     }
         }),
-        createVNode(script$b, {
+        createVNode(script$c, {
           "modal-id": "sh-department_modal",
           "modal-title": "Department Form"
         }, {
           default: withCtx(() => [
-            createVNode(script$d, {
+            createVNode(script$e, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -4650,7 +4652,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$2.__file = "src/lib/components/core/Departments/Departments.vue";
+script$3.__file = "src/lib/components/core/Departments/Departments.vue";
 
 const _hoisted_1$1 = {
   key: 0,
@@ -4669,7 +4671,7 @@ const _hoisted_4$1 = { class: "text-primary text-capitalize" };
 const _hoisted_5$1 = ["value"];
 const _hoisted_6$1 = /*#__PURE__*/createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */);
 
-var script$1 = {
+var script$2 = {
   __name: 'Department',
   setup(__props) {
 
@@ -4767,7 +4769,7 @@ return (_ctx, _cache) => {
         createElementVNode("div", _hoisted_2$1, [
           _hoisted_3$1,
           createElementVNode("h5", null, "Department #" + toDisplayString(unref(department).id) + " - " + toDisplayString(unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          createVNode(script$5, {
+          createVNode(script$6, {
             actions: {
       label: 'Actions',
       actions: [
@@ -4787,12 +4789,12 @@ return (_ctx, _cache) => {
             headers: ['id',showModule,'created_at'],
             "end-point": 'admin/departments/department/list-modules/' + id.value
           }, null, 8 /* PROPS */, ["actions", "reload", "headers", "end-point"]),
-          createVNode(script$b, {
+          createVNode(script$c, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: withCtx(() => [
-              createVNode(script$d, {
+              createVNode(script$e, {
                 "reload-select-items": unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -4814,7 +4816,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          createVNode(script$9, {
+          createVNode(script$a, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -4862,7 +4864,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$1.__file = "src/lib/components/core/Departments/department/Department.vue";
+script$2.__file = "src/lib/components/core/Departments/department/Department.vue";
 
 const _withScopeId = n => (pushScopeId("data-v-2911509a"),n=n(),popScopeId(),n);
 const _hoisted_1 = {
@@ -4890,7 +4892,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = { class: "sh-auth-footer" };
 
-var script = {
+var script$1 = {
   __name: 'ShAuth',
   setup(__props) {
 
@@ -4917,7 +4919,7 @@ watch(user,(newUser) => {
 function loginSuccessful(res){
   userStore.setAccessToken(res.token);
   userStore.setUser();
-  router.push(redirectLogin);
+  window.location.href = redirectLogin;
 }
 
 return (_ctx, _cache) => {
@@ -4929,7 +4931,7 @@ return (_ctx, _cache) => {
     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createVNode(script$d, {
+              createVNode(script$e, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -4954,7 +4956,7 @@ return (_ctx, _cache) => {
               (unref(registerSubTitle))
                 ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(registerSubTitle)), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
-              createVNode(script$d, {
+              createVNode(script$e, {
                 class: "sh-login-form",
                 fields: unref(registrationFields),
                 "action-label": "Sign Up",
@@ -4975,27 +4977,75 @@ return (_ctx, _cache) => {
 
 };
 
-script.__scopeId = "data-v-2911509a";
-script.__file = "src/lib/components/core/auth/ShAuth.vue";
+script$1.__scopeId = "data-v-2911509a";
+script$1.__file = "src/lib/components/core/auth/ShAuth.vue";
+
+var script = {
+  __name: 'TextInput',
+  props: ['modelValue','label'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = ref(null);
+
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+});
+
+
+return (_ctx, _cache) => {
+  return withDirectives((openBlock(), createElementBlock("input", {
+    type: "text",
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vModelText, inputModel.value]
+  ])
+}
+}
+
+};
+
+script.__file = "src/lib/components/form-components/TextInput.vue";
 
 const ShFrontend = {
   install: (app, options) => {
-    ShStorage.setItem('ShConfig',options);
     if(options.sessionTimeout){
       app.provide('sessionTimeout',options.sessionTimeout);
       ShStorage.setItem('sessionTimeout',options.sessionTimeout);
     }
+    const shFormElements = options.shFormElementClasses ?? {};
+
+    const defaultFormElementClasses = {
+      formGroup: shFormElements.formGroup ?? 'mb-2',
+      formLabel: shFormElements.formLabel ?? 'form-label',
+      helperText: shFormElements.helperText ?? 'form-text',
+      actionBtn: shFormElements.actionBtn ?? 'btn btn-primary',
+      formErrorTitle: shFormElements.formErrorTitle ?? 'alert alert-danger',
+      invalidFeedback: shFormElements.invalidFeedback ?? 'invalid-feedback'
+    };
     const swalPosition = options.swalPosition ?? 'top-end';
     const loginEndpoint = options.loginEndpoint ?? 'auth/login';
     const registerEndpoint = options.registerEndpoint ?? 'auth/register';
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
+    options.formTextInput ?? script;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
     const registrationFields = options.registrationFields ?? ['name','email','phone','password','password_confirmation'];
-    const AuthComponent = options.authComponent ?? script;
+    const AuthComponent = options.authComponent ?? script$1;
     app.provide('loginEndpoint',loginEndpoint);
     app.provide('registerEndpoint', registerEndpoint);
     app.provide('registrationFields', registrationFields);
@@ -5004,7 +5054,9 @@ const ShFrontend = {
     app.provide('redirectLogin', redirectLogin);
     app.provide('redirectRegister', redirectRegister);
     app.provide('logoutApiEndpoint', logoutApiEndpoint);
+    app.provide('formComponents', options.shFormComponents);
     app.provide('loginUrl', loginUrl);
+    app.provide('shFormElementClasses',defaultFormElementClasses);
     window.swalPosition = swalPosition;
     if(options.router) {
       options.router.addRoute({
@@ -5013,14 +5065,20 @@ const ShFrontend = {
       });
       options.router.addRoute({
         path: '/sh-departments',
-        component: script$2
+        component: script$3
       });
       options.router.addRoute({
         path: '/sh-departments/permissions/:id',
-        component: script$1
+        component: script$2
       });
     }
+    //filter unwanted config items from options to be put in local storage
+    const removeKeys = ['formTextInput','router','shFormElementClasses'];
+    const allowKeys = [];
+    Object.keys(options).map(key=> ((typeof options[key] !== 'string' && !allowKeys.includes(key)) || removeKeys.includes(key)) && delete options[key]);
+
+    ShStorage.setItem('ShConfig',options);
   }
 };
 
-export { script$9 as ShCanvas, script$7 as ShConfirmAction, script$c as ShDropDownForm, script$3 as ShDynamicTabs, script$d as ShForm, ShFrontend, script$b as ShModal, script$a as ShModalForm, script$g as ShPhone, script$6 as ShSilentAction, script$5 as ShTable, script$4 as ShTabs, shApis, shRepo, ShStorage as shStorage, useUserStore };
+export { script$a as ShCanvas, script$8 as ShConfirmAction, script$d as ShDropDownForm, script$4 as ShDynamicTabs, script$e as ShForm, ShFrontend, script$c as ShModal, script$b as ShModalForm, script$h as ShPhone, script$7 as ShSilentAction, script$6 as ShTable, script$5 as ShTabs, shApis, shRepo, ShStorage as shStorage, useUserStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",
@@ -27,7 +27,8 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.22",
     "sweetalert2": "^11.4.14",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "rollup": "^2.75.7",