@iankibetsh/shframework 5.8.8 → 5.9.2

package/README.md

@@ -66,15 +66,18 @@ The flagship component for generating complex forms from simple configurations.
 - **Auto-Detection**: Infers input types from field names (email, phone, date, etc.).
 - **Multi-Step Support**: Break long forms into logical steps with progress indicators.
 - **Validation**: Seamlessly handles and displays Laravel validation errors (422).
-- **GraphQL Support**: Integrate with GraphQL mutations via the `gqlMutation` prop.
-- **Checkbox Support**: Easily handle boolean or multiple-choice fields with `type: 'checkbox'`.
+- **Conditional Visibility**: Hide the submit button using `:hide-submit-button="true"`.
 - **Modern Reactivity**: Built using Vue 3.4's `defineModel` for clean, conflict-free two-way binding.
 
 ```html
 <sh-auto-form
-  :fields="['name', 'email', 'password', 'gender']"
-  :required="['name', 'email']"
-  action="auth/register"
+  :fields="[
+    { field: 'name', label: 'Name', required: true },
+    { field: 'email', type: 'email', label: 'Email', required: true },
+    { field: 'password', type: 'password', label: 'Password' },
+    { field: 'gender', type: 'select', label: 'Gender' }
+  ]"
+  :action="getActionUrl('register')"
   :successCallback="onRegistered"
 />
 ```
@@ -91,8 +94,11 @@ A convenience component that wraps a trigger button, a Bootstrap modal, and an `
 <sh-modal-form
   modal-id="addTaskModal"
   modal-title="Create New Task"
-  :fields="['title', 'description']"
-  action="tasks/store"
+  :fields="[
+    { field: 'title', label: 'Task Title', required: true },
+    { field: 'description', type: 'textarea', label: 'Description' }
+  ]"
+  :action="getActionUrl('storeTask')"
 >
   Add Task
 </sh-modal-form>

package/dist/dist/library.mjs.css

@@ -260,38 +260,6 @@
   }
 }
 
-.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;
 }
@@ -368,6 +336,38 @@
   flex-grow: 1;
 }
 
+.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

@@ -619,7 +619,6 @@ const updateSession = () =>{
   shStorage.setItem('last_activity', timeNow);
 };
 
-const graphQlEndpoint = 'sh-ql';
 // eslint-disable-next-line no-undef
 let axios;
 
@@ -729,28 +728,14 @@ function doPatch(endPoint, data, extraConfig) {
 
 }
 
-function graphQlQuery(query) {
-    const data = {
-        query
-    };
-    return doGet(graphQlEndpoint, data)
-}
 
-function graphQlMutate(mutation) {
-    const data = {
-        query: `mutation ${mutation}`
-    };
-    return doPost(graphQlEndpoint, data)
-}
 
 var shApis = {
     doGet,
     doPost,
-    graphQlQuery,
     doDelete,
     doPut,
-    doPatch,
-    graphQlMutate
+    doPatch
 };
 
 const countries = [
@@ -3730,10 +3715,6 @@ var script$q = {
     type: Array,
     required: false
   },
-  gqlMutation: {
-    type: String,
-    required: false
-  },
   required: {
     type: Array,
     required: false
@@ -3746,7 +3727,7 @@ var script$q = {
     type: Array,
     required: false
   },
-  hideButton: {
+  hideSubmitButton: {
     type: Boolean,
     default: false
   }
@@ -3946,34 +3927,16 @@ const submitForm = async (e) => {
 
   emit('preSubmit', data);
 
-  // Handle GraphQL mutation
-  if (props.gqlMutation) {
-    const selectFields = Object.keys(data);
-    let args = selectFields
-      .filter(key => data[key])
-      .map(key => `${key}: "${data[key]}"`)
-      .join(', ');
-
-    if (args) {
-      args = `(${args})`;
-    }
+  // Handle REST API
+  const method = props.method === 'put'
+    ? shApis.doPut
+    : props.method === 'delete'
+      ? shApis.doDelete
+      : shApis.doPost;
 
-    const mutation = `{\n${props.gqlMutation}${args} {\n${selectFields.join('\n')}\n}\n}`;
-    shApis.graphQlMutate(mutation)
-      .then(handleSuccessRequest)
-      .catch(handleFailedRequest);
-  } else {
-    // Handle REST API
-    const method = props.method === 'put'
-      ? shApis.doPut
-      : props.method === 'delete'
-        ? shApis.doDelete
-        : shApis.doPost;
-
-    method(props.action, data)
-      .then(handleSuccessRequest)
-      .catch(handleFailedRequest);
-  }
+  method(props.action, data)
+    .then(handleSuccessRequest)
+    .catch(handleFailedRequest);
 
   return false
 };
@@ -4312,7 +4275,7 @@ return (_ctx, _cache) => {
             ], 10 /* CLASS, PROPS */, _hoisted_21$1)
           ], 2 /* CLASS */))
         : vue.createCommentVNode("v-if", true),
-      (isLastStep.value && !__props.hideButton)
+      (isLastStep.value && !__props.hideSubmitButton)
         ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: vue.normalizeClass(getElementClass('formGroup') + ' ms-auto')
@@ -4592,6 +4555,7 @@ const cleanedProp = vue.computed(()=>{
   const p = {...props};
   delete p.class;
   delete p.modalId;
+  delete p.hideButton;
   return p
 });
 
@@ -5612,22 +5576,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
         vue.createElementVNode("div", _hoisted_2$9, [
-          _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* CACHED */)),
-          _cache[6] || (_cache[6] = vue.createTextVNode("  ", -1 /* CACHED */)),
-          vue.withDirectives(vue.createElementVNode("select", {
-            class: "select_per_page",
-            onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
-          }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.pageOptions, (option) => {
-              return (vue.openBlock(), vue.createElementBlock("option", { value: option }, vue.toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$7))
-            }), 256 /* UNKEYED_FRAGMENT */))
-          ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
-            [vue.vModelSelect, $data.per_page]
-          ]),
-          vue.createElementVNode("span", _hoisted_4$7, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          ($props.pagination_data.end > 1)
+            ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* CACHED */)),
+                _cache[6] || (_cache[6] = vue.createTextVNode("  ", -1 /* CACHED */)),
+                vue.withDirectives(vue.createElementVNode("select", {
+                  class: "select_per_page",
+                  onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.pageOptions, (option) => {
+                    return (vue.openBlock(), vue.createElementBlock("option", { value: option }, vue.toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$7))
+                  }), 256 /* UNKEYED_FRAGMENT */))
+                ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
+                  [vue.vModelSelect, $data.per_page]
+                ])
+              ], 64 /* STABLE_FRAGMENT */))
+            : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("span", _hoisted_4$7, " Showing " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
-        ($props.pagination_data != null)
+        ($props.pagination_data != null && $props.pagination_data.end > 1)
           ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_5$5, [
               vue.createElementVNode("ul", _hoisted_6$4, [
                 vue.createElementVNode("li", {
@@ -6418,7 +6386,7 @@ return (_ctx, _cache) => {
           ], 8 /* PROPS */, _hoisted_3$6)
         ]))
       : vue.createCommentVNode("v-if", true),
-    (!__props.hideSearch && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
+    (!__props.hideSearch && (pagination_data.value?.end > 1 || filter_value.value.length > 0))
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
           vue.createElementVNode("div", _hoisted_5$4, [
             vue.createElementVNode("div", {
@@ -6873,7 +6841,7 @@ return (_ctx, _cache) => {
                         ]))
                       : vue.createCommentVNode("v-if", true)
               ])),
-    (pagination_data.value && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
+    (pagination_data.value && (records.value.length > 0 || filter_value.value.length > 0))
       ? (vue.openBlock(), vue.createBlock(script$e, {
           key: 7,
           onLoadMoreRecords: loadMoreRecords,
@@ -8689,19 +8657,6 @@ const ShFrontend = {
   }
 };
 
-const query = async qlQuery => {
-    const result = await shApis.graphQlQuery(qlQuery);
-    return result.data
-};
-const mutate = async mutation => {
-    const result = await shApis.graphQlMutate(mutation);
-    return result.data
-};
-var shGql = {
-    query,
-    mutate
-};
-
 /**
  * useShFetch is a custom hook for fetching data from a given URL and caching it.
  * @param {string} url - The URL to fetch data from.
@@ -8786,7 +8741,6 @@ exports.ShSuggest = script$A;
 exports.ShTable = script$d;
 exports.ShTabs = script$c;
 exports.shApis = shApis;
-exports.shGql = shGql;
 exports.shRepo = shRepo;
 exports.shStorage = shStorage;
 exports.useAppStore = useAppStore;

package/dist/library.mjs

@@ -608,7 +608,6 @@ const updateSession = () =>{
   shStorage.setItem('last_activity', timeNow);
 };
 
-const graphQlEndpoint = 'sh-ql';
 // eslint-disable-next-line no-undef
 let axios;
 
@@ -718,28 +717,14 @@ function doPatch(endPoint, data, extraConfig) {
 
 }
 
-function graphQlQuery(query) {
-    const data = {
-        query
-    };
-    return doGet(graphQlEndpoint, data)
-}
 
-function graphQlMutate(mutation) {
-    const data = {
-        query: `mutation ${mutation}`
-    };
-    return doPost(graphQlEndpoint, data)
-}
 
 var shApis = {
     doGet,
     doPost,
-    graphQlQuery,
     doDelete,
     doPut,
-    doPatch,
-    graphQlMutate
+    doPatch
 };
 
 const countries = [
@@ -3719,10 +3704,6 @@ var script$q = {
     type: Array,
     required: false
   },
-  gqlMutation: {
-    type: String,
-    required: false
-  },
   required: {
     type: Array,
     required: false
@@ -3735,7 +3716,7 @@ var script$q = {
     type: Array,
     required: false
   },
-  hideButton: {
+  hideSubmitButton: {
     type: Boolean,
     default: false
   }
@@ -3935,34 +3916,16 @@ const submitForm = async (e) => {
 
   emit('preSubmit', data);
 
-  // Handle GraphQL mutation
-  if (props.gqlMutation) {
-    const selectFields = Object.keys(data);
-    let args = selectFields
-      .filter(key => data[key])
-      .map(key => `${key}: "${data[key]}"`)
-      .join(', ');
-
-    if (args) {
-      args = `(${args})`;
-    }
+  // Handle REST API
+  const method = props.method === 'put'
+    ? shApis.doPut
+    : props.method === 'delete'
+      ? shApis.doDelete
+      : shApis.doPost;
 
-    const mutation = `{\n${props.gqlMutation}${args} {\n${selectFields.join('\n')}\n}\n}`;
-    shApis.graphQlMutate(mutation)
-      .then(handleSuccessRequest)
-      .catch(handleFailedRequest);
-  } else {
-    // Handle REST API
-    const method = props.method === 'put'
-      ? shApis.doPut
-      : props.method === 'delete'
-        ? shApis.doDelete
-        : shApis.doPost;
-
-    method(props.action, data)
-      .then(handleSuccessRequest)
-      .catch(handleFailedRequest);
-  }
+  method(props.action, data)
+    .then(handleSuccessRequest)
+    .catch(handleFailedRequest);
 
   return false
 };
@@ -4301,7 +4264,7 @@ return (_ctx, _cache) => {
             ], 10 /* CLASS, PROPS */, _hoisted_21$1)
           ], 2 /* CLASS */))
         : createCommentVNode("v-if", true),
-      (isLastStep.value && !__props.hideButton)
+      (isLastStep.value && !__props.hideSubmitButton)
         ? (openBlock(), createElementBlock("div", {
             key: 2,
             class: normalizeClass(getElementClass('formGroup') + ' ms-auto')
@@ -4581,6 +4544,7 @@ const cleanedProp = computed(()=>{
   const p = {...props};
   delete p.class;
   delete p.modalId;
+  delete p.hideButton;
   return p
 });
 
@@ -5601,22 +5565,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
     ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", _hoisted_2$9, [
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* CACHED */)),
-          _cache[6] || (_cache[6] = createTextVNode("  ", -1 /* CACHED */)),
-          withDirectives(createElementVNode("select", {
-            class: "select_per_page",
-            onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList($data.pageOptions, (option) => {
-              return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$7))
-            }), 256 /* UNKEYED_FRAGMENT */))
-          ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
-            [vModelSelect, $data.per_page]
-          ]),
-          createElementVNode("span", _hoisted_4$7, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          ($props.pagination_data.end > 1)
+            ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                _cache[5] || (_cache[5] = createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* CACHED */)),
+                _cache[6] || (_cache[6] = createTextVNode("  ", -1 /* CACHED */)),
+                withDirectives(createElementVNode("select", {
+                  class: "select_per_page",
+                  onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($data.pageOptions, (option) => {
+                    return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$7))
+                  }), 256 /* UNKEYED_FRAGMENT */))
+                ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
+                  [vModelSelect, $data.per_page]
+                ])
+              ], 64 /* STABLE_FRAGMENT */))
+            : createCommentVNode("v-if", true),
+          createElementVNode("span", _hoisted_4$7, " Showing " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
-        ($props.pagination_data != null)
+        ($props.pagination_data != null && $props.pagination_data.end > 1)
           ? (openBlock(), createElementBlock("nav", _hoisted_5$5, [
               createElementVNode("ul", _hoisted_6$4, [
                 createElementVNode("li", {
@@ -6407,7 +6375,7 @@ return (_ctx, _cache) => {
           ], 8 /* PROPS */, _hoisted_3$6)
         ]))
       : createCommentVNode("v-if", true),
-    (!__props.hideSearch && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
+    (!__props.hideSearch && (pagination_data.value?.end > 1 || filter_value.value.length > 0))
       ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
           createElementVNode("div", _hoisted_5$4, [
             createElementVNode("div", {
@@ -6862,7 +6830,7 @@ return (_ctx, _cache) => {
                         ]))
                       : createCommentVNode("v-if", true)
               ])),
-    (pagination_data.value && (records.value.length > 0 || !hasEmptySlot.value || filter_value.value.length > 0))
+    (pagination_data.value && (records.value.length > 0 || filter_value.value.length > 0))
       ? (openBlock(), createBlock(script$e, {
           key: 7,
           onLoadMoreRecords: loadMoreRecords,
@@ -8678,19 +8646,6 @@ const ShFrontend = {
   }
 };
 
-const query = async qlQuery => {
-    const result = await shApis.graphQlQuery(qlQuery);
-    return result.data
-};
-const mutate = async mutation => {
-    const result = await shApis.graphQlMutate(mutation);
-    return result.data
-};
-var shGql = {
-    query,
-    mutate
-};
-
 /**
  * useShFetch is a custom hook for fetching data from a given URL and caching it.
  * @param {string} url - The URL to fetch data from.
@@ -8751,4 +8706,4 @@ const useShFetch = (url, path, cacheKey) => {
     }
 };
 
-export { countries as Countries, script$8 as ManagePermissions, script$q as ShAutoForm, script$l as ShCanvas, script$9 as ShCanvasBtn, script$4 as ShCardLayout, script$j as ShConfirmAction, script$o as ShDropDownForm, script$b as ShDynamicTabs, script$z as ShForm, ShFrontend, script$p as ShModal, script$a as ShModalBtn, script$n as ShModalForm, script$m as ShModalFormAuto, script$B as ShPhone, script$5 as ShQueryPopups, script$f as ShRange, script$7 as ShRoutePopups, script$i as ShSilentAction, script$A as ShSuggest, script$d as ShTable, script$c as ShTabs, shApis, shGql, shRepo, shStorage, useAppStore, useShFetch, useUserStore };
+export { countries as Countries, script$8 as ManagePermissions, script$q as ShAutoForm, script$l as ShCanvas, script$9 as ShCanvasBtn, script$4 as ShCardLayout, script$j as ShConfirmAction, script$o as ShDropDownForm, script$b as ShDynamicTabs, script$z as ShForm, ShFrontend, script$p as ShModal, script$a as ShModalBtn, script$n as ShModalForm, script$m as ShModalFormAuto, script$B as ShPhone, script$5 as ShQueryPopups, script$f as ShRange, script$7 as ShRoutePopups, script$i as ShSilentAction, script$A as ShSuggest, script$d as ShTable, script$c as ShTabs, shApis, shRepo, shStorage, useAppStore, useShFetch, useUserStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "5.8.8",
+  "version": "5.9.2",
   "description": "Vue library for handling laravel backend",
   "repository": {
     "type": "git",