@iankibetsh/shframework 5.8.7 → 5.9.1

package/README.md

@@ -66,15 +66,17 @@ 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'`.
 - **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 +93,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

@@ -1,4 +1,36 @@
 
+.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;
+}
+
 /* Step Container */
 .sh-form-steps-container {
   margin-bottom: 2.5rem;
@@ -304,38 +336,6 @@
   cursor: pointer;
 }
 
-.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;
-}
-
 .permissions-main {
   background: #edeff2;
 }
@@ -384,6 +384,11 @@
   margin-right: 0.255em;
 }
 
+.sh-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .callout{
   --bs-link-color-rgb: 110,168,254;
   --bs-code-color: #e685b5;
@@ -400,11 +405,6 @@
   --bd-callout-border: var(--bs-info-border-subtle);
 }
 
-.sh-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .sh-forgot-link, .sh-register-link{
   cursor: pointer;
 }

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
@@ -3745,6 +3726,10 @@ var script$q = {
   steps: {
     type: Array,
     required: false
+  },
+  hideButton: {
+    type: Boolean,
+    default: false
   }
 },
   emits: ['success', 'preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
@@ -3942,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(', ');
+  // Handle REST API
+  const method = props.method === 'put'
+    ? shApis.doPut
+    : props.method === 'delete'
+      ? shApis.doDelete
+      : shApis.doPost;
 
-    if (args) {
-      args = `(${args})`;
-    }
-
-    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
 };
@@ -4308,7 +4275,7 @@ return (_ctx, _cache) => {
             ], 10 /* CLASS, PROPS */, _hoisted_21$1)
           ], 2 /* CLASS */))
         : vue.createCommentVNode("v-if", true),
-      (isLastStep.value)
+      (isLastStep.value && !__props.hideButton)
         ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: vue.normalizeClass(getElementClass('formGroup') + ' ms-auto')
@@ -4549,6 +4516,7 @@ var script$n = {
   'files',
   'phones',
   'numbers',
+  'hideButton',
   'customComponent','modalTitle','class','successMessage', 'modalId'],
   emits: ['success','fieldChanged','formSubmitted','formError','modalId'],
   setup(__props, { emit: __emit }) {
@@ -4591,7 +4559,7 @@ const cleanedProp = vue.computed(()=>{
 });
 
 return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createElementBlock("a", {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
     class: vue.normalizeClass(vue.unref(btnClass)),
     href: '#' + vue.unref(realModalId),
     "data-bs-toggle": "modal"
@@ -4617,7 +4585,9 @@ return (_ctx, _cache) => {
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["modal-size", "modal-id", "modal-title"])
     ]))
-  ], 10 /* CLASS, PROPS */, _hoisted_1$i))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$i)), [
+    [vue.vShow, !__props.hideButton]
+  ])
 }
 }
 
@@ -5605,22 +5575,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", {
@@ -6411,7 +6385,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", {
@@ -6866,7 +6840,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,
@@ -8682,19 +8656,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.
@@ -8779,7 +8740,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
@@ -3734,6 +3715,10 @@ var script$q = {
   steps: {
     type: Array,
     required: false
+  },
+  hideButton: {
+    type: Boolean,
+    default: false
   }
 },
   emits: ['success', 'preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
@@ -3931,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(', ');
+  // Handle REST API
+  const method = props.method === 'put'
+    ? shApis.doPut
+    : props.method === 'delete'
+      ? shApis.doDelete
+      : shApis.doPost;
 
-    if (args) {
-      args = `(${args})`;
-    }
-
-    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
 };
@@ -4297,7 +4264,7 @@ return (_ctx, _cache) => {
             ], 10 /* CLASS, PROPS */, _hoisted_21$1)
           ], 2 /* CLASS */))
         : createCommentVNode("v-if", true),
-      (isLastStep.value)
+      (isLastStep.value && !__props.hideButton)
         ? (openBlock(), createElementBlock("div", {
             key: 2,
             class: normalizeClass(getElementClass('formGroup') + ' ms-auto')
@@ -4538,6 +4505,7 @@ var script$n = {
   'files',
   'phones',
   'numbers',
+  'hideButton',
   'customComponent','modalTitle','class','successMessage', 'modalId'],
   emits: ['success','fieldChanged','formSubmitted','formError','modalId'],
   setup(__props, { emit: __emit }) {
@@ -4580,7 +4548,7 @@ const cleanedProp = computed(()=>{
 });
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("a", {
+  return withDirectives((openBlock(), createElementBlock("a", {
     class: normalizeClass(unref(btnClass)),
     href: '#' + unref(realModalId),
     "data-bs-toggle": "modal"
@@ -4606,7 +4574,9 @@ return (_ctx, _cache) => {
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["modal-size", "modal-id", "modal-title"])
     ]))
-  ], 10 /* CLASS, PROPS */, _hoisted_1$i))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$i)), [
+    [vShow, !__props.hideButton]
+  ])
 }
 }
 
@@ -5594,22 +5564,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", {
@@ -6400,7 +6374,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", {
@@ -6855,7 +6829,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,
@@ -8671,19 +8645,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.
@@ -8744,4 +8705,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.7",
+  "version": "5.9.1",
   "description": "Vue library for handling laravel backend",
   "repository": {
     "type": "git",