@iankibetsh/shframework 1.3.5 → 1.3.7

package/dist/library.js

@@ -1874,8 +1874,8 @@ const countries = [
   }
 ];
 
-var script$l = {
-  name: 'ShPhone',
+var script$n = {
+  name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
     return {
@@ -1936,7 +1936,7 @@ var script$l = {
   }
 };
 
-const _hoisted_1$g = { class: "sh-phone mb-3" };
+const _hoisted_1$i = { class: "sh-phone mb-3" };
 const _hoisted_2$c = {
   key: 0,
   style: {"display":"contents"}
@@ -1945,7 +1945,7 @@ const _hoisted_3$b = ["src"];
 const _hoisted_4$b = ["value"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
     ($data.selectedCountry)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
           vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$b),
@@ -1979,10 +1979,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$l.render = render$7;
-script$l.__file = "src/lib/components/form-components/ShPhone.vue";
+script$n.render = render$7;
+script$n.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-var script$k = {
+var script$m = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2021,7 +2021,7 @@ var script$k = {
   }
 };
 
-const _hoisted_1$f = /*#__PURE__*/vue.createElementVNode("textarea", {
+const _hoisted_1$h = /*#__PURE__*/vue.createElementVNode("textarea", {
   id: "tiny",
   style: {"display":"none"},
   "data-cy": "tinymce_editor"
@@ -2031,7 +2031,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = vue.resolveComponent("editor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$f,
+    _hoisted_1$h,
     vue.createElementVNode("div", {
       onFocusin: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["stop"])),
       class: "sh-editor w-100"
@@ -2056,10 +2056,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$k.render = render$6;
-script$k.__file = "src/lib/components/form-components/ShEditor.vue";
+script$m.render = render$6;
+script$m.__file = "src/lib/components/form-components/ShEditor.vue";
 
-const _hoisted_1$e = {
+const _hoisted_1$g = {
   key: 0,
   class: "dropdown sh-suggest"
 };
@@ -2080,7 +2080,7 @@ const _hoisted_10$3 = {
 };
 
 
-var script$j = {
+var script$l = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2161,7 +2161,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2221,15 +2221,16 @@ return (_ctx, _cache) => {
 
 };
 
-script$j.__scopeId = "data-v-71cc9569";
-script$j.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$l.__scopeId = "data-v-71cc9569";
+script$l.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$i = {
+var script$k = {
   name: 'ShForm',
   components: {
-    ShSuggest: script$j,
-    ShEditor: script$k,
-    ShPhone: script$l
+    PhoneInput: script$n,
+    ShSuggest: script$l,
+    ShEditor: script$m,
+    ShPhone: script$n
   },
   props: [
       'action',
@@ -2547,7 +2548,7 @@ var script$i = {
   }
 };
 
-const _hoisted_1$d = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_1$f = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
 const _hoisted_2$a = {
   ref: "ShAutoForm",
   class: "sh-form"
@@ -2604,12 +2605,12 @@ const _hoisted_24$1 = /*#__PURE__*/vue.createElementVNode("span", {
 }, null, -1 /* HOISTED */);
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ShPhone = vue.resolveComponent("ShPhone");
+  const _component_phone_input = vue.resolveComponent("phone-input");
   const _component_ShSuggest = vue.resolveComponent("ShSuggest");
   const _component_ShEditor = vue.resolveComponent("ShEditor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$d,
+    _hoisted_1$f,
     vue.createElementVNode("form", _hoisted_2$a, [
       vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       vue.createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
@@ -2719,7 +2720,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 : vue.createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'phone')
-                ? (vue.openBlock(), vue.createBlock(_component_ShPhone, {
+                ? (vue.openBlock(), vue.createBlock(_component_phone_input, {
                     key: 6,
                     country_code: $props.country_code,
                     placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
@@ -2826,10 +2827,10 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$i.render = render$5;
-script$i.__file = "src/lib/components/ShForm.vue";
+script$k.render = render$5;
+script$k.__file = "src/lib/components/ShForm.vue";
 
-var script$h = {
+var script$j = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2865,11 +2866,14 @@ return (_ctx, _cache) => {
 
 };
 
-script$h.__file = "src/lib/components/form-components/EmailInput.vue";
+script$j.__file = "src/lib/components/form-components/EmailInput.vue";
 
-var script$g = {
+const _hoisted_1$e = ["min", "max"];
+
+
+var script$i = {
   __name: 'NumberInput',
-  props: ['modelValue','label'],
+  props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
   setup(__props, { emit }) {
 
@@ -2890,12 +2894,14 @@ vue.onMounted(()=>{
 
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+    min: __props.min,
+    max: __props.max,
     type: "number",
     "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$e)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2903,9 +2909,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$g.__file = "src/lib/components/form-components/NumberInput.vue";
+script$i.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$f = {
+var script$h = {
   __name: 'TextInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2941,9 +2947,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$f.__file = "src/lib/components/form-components/TextInput.vue";
+script$h.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$e = {
+var script$g = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2979,7 +2985,111 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$g.__file = "src/lib/components/form-components/TextAreaInput.vue";
+
+const _hoisted_1$d = ["value"];
+
+
+var script$f = {
+  __name: 'SelectInput',
+  props: ['modelValue','label','data','dataUrl'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = vue.ref(null);
+const selectOptions = vue.ref(null);
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+vue.onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+  if(props.data){
+    selectOptions.value = props.data.map(item=>{
+      return {
+        id: item.id ? item.id : item.key ? item.key : item.value ? item.value:item.name ? item.name:item.label,
+        name: item.label ? item.label : item.name ? item.name : item.value ? item.value:item.id ? item.id:item.option
+      }
+    });
+  } else if (props.dataUrl){
+    shApis.doGet(props.dataUrl,{all:1}).then(res=>{
+      selectOptions.value = res.data.map(item=>{
+        return {
+          id: item.id ? item.id : item.key ? item.key : item.value ? item.value:item.name ? item.name:item.label,
+          name: item.label ? item.label : item.name ? item.name : item.value ? item.value:item.id ? item.id:item.option
+        }
+      });
+    }).catch(ex=>{
+      console.log(ex);
+    });
+  }
+});
+
+
+return (_ctx, _cache) => {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectOptions.value, (option) => {
+      return (vue.openBlock(), vue.createElementBlock("option", {
+        key: option.id,
+        value: option.id
+      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$d))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vue.vModelSelect, inputModel.value]
+  ])
+}
+}
+
+};
+
+script$f.__file = "src/lib/components/form-components/SelectInput.vue";
+
+var script$e = {
+  __name: 'PasswordInput',
+  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: "password",
+    "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$e.__file = "src/lib/components/form-components/PasswordInput.vue";
 
 const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
 const _hoisted_2$9 = ["innerHTML"];
@@ -3015,26 +3125,42 @@ const props = __props;
 
 
 const formFields = vue.ref([]);
-const getFieldComponent = (field)=>{
+const getFieldComponent = (fieldObj)=>{
+  const field = fieldObj.field;
   const defaultTextareas = ['message', 'meta_description', 'comment', 'call_response', 'comments', 'description'];
   const defaultNumbers = ['age'];
+  const passwords = ['password','password_confirmation','pin'];
   const defaultPhones = ['phone'];
-  const defaultEmails = ['phone'];
+  const defaultEmails = ['email'];
   const formComponents = vue.inject('formComponents');
+  const TextComponent = formComponents.text ?? script$h;
+  const TextAreaComponent = formComponents.textArea ?? script$g;
+  const EmailComponent = formComponents.email ?? script$j;
+  const PhoneComponent = formComponents.phone ?? script$n;
+  const NumberComponent = formComponents.number ?? script$i;
+  const SelectComponent = formComponents.select ?? script$f;
+  const PasswordComponent = formComponents.password ?? script$e;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
-  } else
+  }
+  if(fieldObj.type){
+    return fieldObj.type === 'number' ? NumberComponent:fieldObj.type === 'textarea' ? TextAreaComponent : fieldObj.type === 'email' ? EmailComponent : fieldObj.type === 'phone' ? PhoneComponent : fieldObj.type ? SelectComponent:TextComponent
+  }else
+    if(passwords.includes(field)){
+      return PasswordComponent
+  }
+  else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$e
+    return formComponents.textArea ?? script$g
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$h
+    return formComponents.email ?? script$j
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$l
+    return formComponents.phone ?? script$n
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$g
+    return formComponents.number ?? script$i
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3043,7 +3169,7 @@ const getFieldComponent = (field)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$f
+  return formComponents.text ?? script$h
 };
 const shFormElementClasses = vue.ref(null);
 shFormElementClasses.value = vue.inject('shFormElementClasses');
@@ -3110,7 +3236,6 @@ vue.onMounted((ev)=>{
       fieldObj.label && getLabel(fieldObj.field);
       !fieldObj.helper && fieldObj.helperText ? fieldObj.helper = fieldObj.helperText : fieldObj.helper = getHelperText(fieldObj.field);
       fieldObj.helperText === undefined && (fieldObj.label = getLabel(fieldObj.field));
-      fieldObj.component && getfieldObjComponent(fieldObj.field);
       fieldObj.placeholder && fieldObj.placeHolder && getPlaceholder(fieldObj.field);
       fieldObj.value = null;
       formFields.value.push(fieldObj);
@@ -3118,7 +3243,6 @@ vue.onMounted((ev)=>{
       formFields.value.push({
         field:field,label: getLabel(field),
         helper: getHelperText(field),
-        component: getFieldComponent(field),
         placeholder: getPlaceholder(field),
         value: null
       });
@@ -3148,7 +3272,7 @@ return (_ctx, _cache) => {
                 innerHTML: field.label
               }, null, 10 /* CLASS, PROPS */, _hoisted_2$9))
             : vue.createCommentVNode("v-if", true),
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field.field)), vue.mergeProps(getComponentProps(field), {
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
             onClick: $event => (removeValidationError(field.field)),
             "onUpdate:modelValue": [$event => (removeValidationError(field.field)), $event => ((formFields.value[index].value) = $event)],
             modelValue: formFields.value[index].value,
@@ -3254,7 +3378,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$i, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$k, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3358,7 +3482,7 @@ return (_ctx, _cache) => {
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$i, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$k, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -5024,7 +5148,7 @@ return (_ctx, _cache) => {
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$i, {
+            vue.createVNode(script$k, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -5183,7 +5307,7 @@ return (_ctx, _cache) => {
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$i, {
+              vue.createVNode(script$k, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -5320,7 +5444,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$i, {
+              vue.createVNode(script$k, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -5345,7 +5469,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$i, {
+              vue.createVNode(script$k, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -5392,7 +5516,7 @@ const ShFrontend = {
     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$f;
+    options.formTextInput ?? script$h;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -5433,16 +5557,17 @@ const ShFrontend = {
   }
 };
 
+exports.Countries = countries;
 exports.ShAutoForm = script$d;
 exports.ShCanvas = script$9;
 exports.ShConfirmAction = script$7;
 exports.ShDropDownForm = script$c;
 exports.ShDynamicTabs = script$3;
-exports.ShForm = script$i;
+exports.ShForm = script$k;
 exports.ShFrontend = ShFrontend;
 exports.ShModal = script$b;
 exports.ShModalForm = script$a;
-exports.ShPhone = script$l;
+exports.ShPhone = script$n;
 exports.ShSilentAction = script$6;
 exports.ShTable = script$5;
 exports.ShTabs = script$4;

package/dist/library.mjs

@@ -1861,8 +1861,8 @@ const countries = [
   }
 ];
 
-var script$l = {
-  name: 'ShPhone',
+var script$n = {
+  name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
     return {
@@ -1923,7 +1923,7 @@ var script$l = {
   }
 };
 
-const _hoisted_1$g = { class: "sh-phone mb-3" };
+const _hoisted_1$i = { class: "sh-phone mb-3" };
 const _hoisted_2$c = {
   key: 0,
   style: {"display":"contents"}
@@ -1932,7 +1932,7 @@ const _hoisted_3$b = ["src"];
 const _hoisted_4$b = ["value"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$i, [
     ($data.selectedCountry)
       ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
           createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$b),
@@ -1966,10 +1966,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$l.render = render$7;
-script$l.__file = "src/lib/components/form-components/ShPhone.vue";
+script$n.render = render$7;
+script$n.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-var script$k = {
+var script$m = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2008,7 +2008,7 @@ var script$k = {
   }
 };
 
-const _hoisted_1$f = /*#__PURE__*/createElementVNode("textarea", {
+const _hoisted_1$h = /*#__PURE__*/createElementVNode("textarea", {
   id: "tiny",
   style: {"display":"none"},
   "data-cy": "tinymce_editor"
@@ -2018,7 +2018,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = resolveComponent("editor");
 
   return (openBlock(), createElementBlock(Fragment, null, [
-    _hoisted_1$f,
+    _hoisted_1$h,
     createElementVNode("div", {
       onFocusin: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
       class: "sh-editor w-100"
@@ -2043,10 +2043,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$k.render = render$6;
-script$k.__file = "src/lib/components/form-components/ShEditor.vue";
+script$m.render = render$6;
+script$m.__file = "src/lib/components/form-components/ShEditor.vue";
 
-const _hoisted_1$e = {
+const _hoisted_1$g = {
   key: 0,
   class: "dropdown sh-suggest"
 };
@@ -2067,7 +2067,7 @@ const _hoisted_10$3 = {
 };
 
 
-var script$j = {
+var script$l = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2148,7 +2148,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (unref(id))
-    ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+    ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", {
           id: unref(id),
           "data-bs-toggle": "dropdown",
@@ -2208,15 +2208,16 @@ return (_ctx, _cache) => {
 
 };
 
-script$j.__scopeId = "data-v-71cc9569";
-script$j.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$l.__scopeId = "data-v-71cc9569";
+script$l.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$i = {
+var script$k = {
   name: 'ShForm',
   components: {
-    ShSuggest: script$j,
-    ShEditor: script$k,
-    ShPhone: script$l
+    PhoneInput: script$n,
+    ShSuggest: script$l,
+    ShEditor: script$m,
+    ShPhone: script$n
   },
   props: [
       'action',
@@ -2534,7 +2535,7 @@ var script$i = {
   }
 };
 
-const _hoisted_1$d = /*#__PURE__*/createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_1$f = /*#__PURE__*/createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
 const _hoisted_2$a = {
   ref: "ShAutoForm",
   class: "sh-form"
@@ -2591,12 +2592,12 @@ const _hoisted_24$1 = /*#__PURE__*/createElementVNode("span", {
 }, null, -1 /* HOISTED */);
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ShPhone = resolveComponent("ShPhone");
+  const _component_phone_input = resolveComponent("phone-input");
   const _component_ShSuggest = resolveComponent("ShSuggest");
   const _component_ShEditor = resolveComponent("ShEditor");
 
   return (openBlock(), createElementBlock(Fragment, null, [
-    _hoisted_1$d,
+    _hoisted_1$f,
     createElementVNode("form", _hoisted_2$a, [
       createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
@@ -2706,7 +2707,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 : createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'phone')
-                ? (openBlock(), createBlock(_component_ShPhone, {
+                ? (openBlock(), createBlock(_component_phone_input, {
                     key: 6,
                     country_code: $props.country_code,
                     placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
@@ -2813,10 +2814,10 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$i.render = render$5;
-script$i.__file = "src/lib/components/ShForm.vue";
+script$k.render = render$5;
+script$k.__file = "src/lib/components/ShForm.vue";
 
-var script$h = {
+var script$j = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2852,11 +2853,14 @@ return (_ctx, _cache) => {
 
 };
 
-script$h.__file = "src/lib/components/form-components/EmailInput.vue";
+script$j.__file = "src/lib/components/form-components/EmailInput.vue";
 
-var script$g = {
+const _hoisted_1$e = ["min", "max"];
+
+
+var script$i = {
   __name: 'NumberInput',
-  props: ['modelValue','label'],
+  props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
   setup(__props, { emit }) {
 
@@ -2877,12 +2881,14 @@ onMounted(()=>{
 
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("input", {
+    min: __props.min,
+    max: __props.max,
     type: "number",
     "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$e)), [
     [vModelText, inputModel.value]
   ])
 }
@@ -2890,9 +2896,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$g.__file = "src/lib/components/form-components/NumberInput.vue";
+script$i.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$f = {
+var script$h = {
   __name: 'TextInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2928,9 +2934,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$f.__file = "src/lib/components/form-components/TextInput.vue";
+script$h.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$e = {
+var script$g = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2966,7 +2972,111 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$g.__file = "src/lib/components/form-components/TextAreaInput.vue";
+
+const _hoisted_1$d = ["value"];
+
+
+var script$f = {
+  __name: 'SelectInput',
+  props: ['modelValue','label','data','dataUrl'],
+  emits: ['update:modelValue','clearValidationErrors'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+const inputModel = ref(null);
+const selectOptions = ref(null);
+const modelValueUpdated = (e) => {
+  emit('clearValidationErrors');
+  emit('update:modelValue',inputModel);
+};
+onMounted(()=>{
+  props.modelValue && (inputModel.value = props.modelValue);
+  if(props.data){
+    selectOptions.value = props.data.map(item=>{
+      return {
+        id: item.id ? item.id : item.key ? item.key : item.value ? item.value:item.name ? item.name:item.label,
+        name: item.label ? item.label : item.name ? item.name : item.value ? item.value:item.id ? item.id:item.option
+      }
+    });
+  } else if (props.dataUrl){
+    shApis.doGet(props.dataUrl,{all:1}).then(res=>{
+      selectOptions.value = res.data.map(item=>{
+        return {
+          id: item.id ? item.id : item.key ? item.key : item.value ? item.value:item.name ? item.name:item.label,
+          name: item.label ? item.label : item.name ? item.name : item.value ? item.value:item.id ? item.id:item.option
+        }
+      });
+    }).catch(ex=>{
+      console.log(ex);
+    });
+  }
+});
+
+
+return (_ctx, _cache) => {
+  return withDirectives((openBlock(), createElementBlock("select", {
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((inputModel).value = $event)),
+    onChange: modelValueUpdated,
+    onKeydown: modelValueUpdated,
+    onUpdated: modelValueUpdated
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(selectOptions.value, (option) => {
+      return (openBlock(), createElementBlock("option", {
+        key: option.id,
+        value: option.id
+      }, toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$d))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
+    [vModelSelect, inputModel.value]
+  ])
+}
+}
+
+};
+
+script$f.__file = "src/lib/components/form-components/SelectInput.vue";
+
+var script$e = {
+  __name: 'PasswordInput',
+  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: "password",
+    "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$e.__file = "src/lib/components/form-components/PasswordInput.vue";
 
 const _hoisted_1$c = /*#__PURE__*/createElementVNode("div", null, null, -1 /* HOISTED */);
 const _hoisted_2$9 = ["innerHTML"];
@@ -3002,26 +3112,42 @@ const props = __props;
 
 
 const formFields = ref([]);
-const getFieldComponent = (field)=>{
+const getFieldComponent = (fieldObj)=>{
+  const field = fieldObj.field;
   const defaultTextareas = ['message', 'meta_description', 'comment', 'call_response', 'comments', 'description'];
   const defaultNumbers = ['age'];
+  const passwords = ['password','password_confirmation','pin'];
   const defaultPhones = ['phone'];
-  const defaultEmails = ['phone'];
+  const defaultEmails = ['email'];
   const formComponents = inject('formComponents');
+  const TextComponent = formComponents.text ?? script$h;
+  const TextAreaComponent = formComponents.textArea ?? script$g;
+  const EmailComponent = formComponents.email ?? script$j;
+  const PhoneComponent = formComponents.phone ?? script$n;
+  const NumberComponent = formComponents.number ?? script$i;
+  const SelectComponent = formComponents.select ?? script$f;
+  const PasswordComponent = formComponents.password ?? script$e;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
-  } else
+  }
+  if(fieldObj.type){
+    return fieldObj.type === 'number' ? NumberComponent:fieldObj.type === 'textarea' ? TextAreaComponent : fieldObj.type === 'email' ? EmailComponent : fieldObj.type === 'phone' ? PhoneComponent : fieldObj.type ? SelectComponent:TextComponent
+  }else
+    if(passwords.includes(field)){
+      return PasswordComponent
+  }
+  else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$e
+    return formComponents.textArea ?? script$g
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$h
+    return formComponents.email ?? script$j
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$l
+    return formComponents.phone ?? script$n
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$g
+    return formComponents.number ?? script$i
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3030,7 +3156,7 @@ const getFieldComponent = (field)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$f
+  return formComponents.text ?? script$h
 };
 const shFormElementClasses = ref(null);
 shFormElementClasses.value = inject('shFormElementClasses');
@@ -3097,7 +3223,6 @@ onMounted((ev)=>{
       fieldObj.label && getLabel(fieldObj.field);
       !fieldObj.helper && fieldObj.helperText ? fieldObj.helper = fieldObj.helperText : fieldObj.helper = getHelperText(fieldObj.field);
       fieldObj.helperText === undefined && (fieldObj.label = getLabel(fieldObj.field));
-      fieldObj.component && getfieldObjComponent(fieldObj.field);
       fieldObj.placeholder && fieldObj.placeHolder && getPlaceholder(fieldObj.field);
       fieldObj.value = null;
       formFields.value.push(fieldObj);
@@ -3105,7 +3230,6 @@ onMounted((ev)=>{
       formFields.value.push({
         field:field,label: getLabel(field),
         helper: getHelperText(field),
-        component: getFieldComponent(field),
         placeholder: getPlaceholder(field),
         value: null
       });
@@ -3135,7 +3259,7 @@ return (_ctx, _cache) => {
                 innerHTML: field.label
               }, null, 10 /* CLASS, PROPS */, _hoisted_2$9))
             : createCommentVNode("v-if", true),
-          (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field.field)), mergeProps(getComponentProps(field), {
+          (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps(getComponentProps(field), {
             onClick: $event => (removeValidationError(field.field)),
             "onUpdate:modelValue": [$event => (removeValidationError(field.field)), $event => ((formFields.value[index].value) = $event)],
             modelValue: formFields.value[index].value,
@@ -3241,7 +3365,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        createVNode(script$i, normalizeProps(guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        createVNode(script$k, normalizeProps(guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3345,7 +3469,7 @@ return (_ctx, _cache) => {
       "modal-title": __props.modalTitle
     }, {
       default: withCtx(() => [
-        createVNode(script$i, mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        createVNode(script$k, mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -5011,7 +5135,7 @@ return (_ctx, _cache) => {
           "modal-title": "Department Form"
         }, {
           default: withCtx(() => [
-            createVNode(script$i, {
+            createVNode(script$k, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -5170,7 +5294,7 @@ return (_ctx, _cache) => {
             "modal-title": "Add Module Department"
           }, {
             default: withCtx(() => [
-              createVNode(script$i, {
+              createVNode(script$k, {
                 "reload-select-items": unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -5307,7 +5431,7 @@ return (_ctx, _cache) => {
     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createVNode(script$i, {
+              createVNode(script$k, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -5332,7 +5456,7 @@ return (_ctx, _cache) => {
               (unref(registerSubTitle))
                 ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(registerSubTitle)), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
-              createVNode(script$i, {
+              createVNode(script$k, {
                 class: "sh-login-form",
                 fields: unref(registrationFields),
                 "action-label": "Sign Up",
@@ -5379,7 +5503,7 @@ const ShFrontend = {
     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$f;
+    options.formTextInput ?? script$h;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -5420,4 +5544,4 @@ const ShFrontend = {
   }
 };
 
-export { script$d as ShAutoForm, script$9 as ShCanvas, script$7 as ShConfirmAction, script$c as ShDropDownForm, script$3 as ShDynamicTabs, script$i as ShForm, ShFrontend, script$b as ShModal, script$a as ShModalForm, script$l as ShPhone, script$6 as ShSilentAction, script$5 as ShTable, script$4 as ShTabs, shApis, shRepo, ShStorage as shStorage, useUserStore };
+export { countries as Countries, script$d as ShAutoForm, script$9 as ShCanvas, script$7 as ShConfirmAction, script$c as ShDropDownForm, script$3 as ShDynamicTabs, script$k as ShForm, ShFrontend, script$b as ShModal, script$a as ShModalForm, script$n as ShPhone, script$6 as ShSilentAction, script$5 as ShTable, script$4 as ShTabs, shApis, shRepo, ShStorage as shStorage, useUserStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",
@@ -15,6 +15,9 @@
     "dev": "vite",
     "serve": "vite"
   },
+  "bin": {
+    "sh-set-defaults": "./src/lib/cmds/cli.js"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

package/src/lib/cmds/cli.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+const fs = require('fs')
+const [,, ... args] = process.argv
+const templatesDir =`${__dirname}/../components/form-components/`
+const destination = `${process.cwd()}/src/components/form-components/`
+console.log(`Copying form component files to ${destination}`)
+!fs.existsSync(destination) && fs.mkdirSync(destination,{ recursive: true })
+
+fs.readdirSync(templatesDir).map(file=>{
+    console.log(`cp ${file}`)
+    const src = `${templatesDir}${file}`
+    const dest = `${destination}${file}`
+    let contents = fs.readFileSync(src,'utf8')
+    contents = contents.replace(`import shApis from '../../repo/helpers/ShApis.js'`,`import { shApis } from '@iankibetsh/shframework'`)
+    contents = contents.replace(`import countries from '../../repo/helpers/countries.js'`,`import { countries } from '@iankibetsh/shframework'`)
+    fs.writeFileSync(dest,contents)
+})
+console.log("DONE")