@iankibetsh/shframework 5.8.6 → 5.8.8

package/README.md

@@ -23,8 +23,8 @@ A robust table component that handles server-side pagination, searching, and cus
 - **Named Slots for Custom Formatting**: Use named slots for columns to provide custom formatting (e.g., `<template #age="{ row }">`).
 - **Multi-Action Support**: Enable row selection and collective operations with a floating action bar.
 - **Caching & Background Loading**: Uses IndexedDB to cache data. Shows cached data immediately while fetching fresh data in the background (enabled via `enableTableCache` config or `:cache="true"` prop).
-- **Row Links**: Easily define clickable rows with dynamic placeholders (e.g., `:row-link="'/users/{id}'"`).
-- **Search Optimization**: Automatically clears stale data and shows a spinner when searching to ensure fresh results.
+- **User-Specific Caching**: Automatically prefixes cache keys with user identifiers (e.g., `id`, `email`) to ensure data isolation between users. Configure via `cacheUserFields`.
+- **Metadata Tracking**: Tracks cache source URLs and timestamps in a dedicated `cache_metadata` store for better auditability.
 - **Links & Actions**: Easily define column links and action buttons.
 
 ```html
@@ -67,6 +67,8 @@ The flagship component for generating complex forms from simple configurations.
 - **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
@@ -114,6 +116,7 @@ A collection of common UI and data utilities.
 - `shRepo.runPlainRequest(url, message)`: Post request with a confirmation prompt.
 - `shRepo.runSilentRequest(url)`: Direct post request without prompt.
 - `shRepo.showToast(message, type)`: Displays a sweetalert2 toast.
+- `shRepo.flushCache()`: Clears all IndexedDB cache data.
 - `shRepo.swalSuccess(message)` / `shRepo.swalError(message)`: Standard success/error popups.
 
 ### shUser (State Management)

package/dist/dist/library.mjs.css

@@ -336,22 +336,6 @@
   cursor: pointer;
 }
 
-.sh-selected-item{
-  line-height: unset!important;
-}
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
-}
-.sh-suggest{
-  margin-bottom: 1rem;
-  padding: 0rem 0rem;
-}
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
-}
-
 .permissions-main {
   background: #edeff2;
 }
@@ -384,6 +368,22 @@
   flex-grow: 1;
 }
 
+.sh-selected-item{
+  line-height: unset!important;
+}
+.sh-suggestion-input{
+  padding: 0.375rem 0.75rem;
+}
+.sh-suggest{
+  margin-bottom: 1rem;
+  padding: 0rem 0rem;
+}
+.sh-suggest-control::after{
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.255em;
+}
+
 .callout{
   --bs-link-color-rgb: 110,168,254;
   --bs-code-color: #e685b5;

package/dist/library.js

@@ -3404,8 +3404,13 @@ var script$u = {
   emits: /*@__PURE__*/vue.mergeModels(['clearValidationErrors'], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
 
-vue.useModel(__props, "modelValue");
+const model = vue.useModel(__props, "modelValue");
 const props = __props;
+const emit = __emit;
+
+const onInput = () => {
+  emit('clearValidationErrors');
+};
 
 const selectOptions = vue.ref(null);
 
@@ -3434,7 +3439,8 @@ vue.onMounted(()=>{
 
 return (_ctx, _cache) => {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.inputModel) = $event))
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((model).value = $event)),
+    onChange: onInput
   }, [
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectOptions.value, (option) => {
       return (vue.openBlock(), vue.createElementBlock("option", {
@@ -3442,8 +3448,8 @@ return (_ctx, _cache) => {
         value: option.id
       }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$n))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 512 /* NEED_PATCH */)), [
-    [vue.vModelSelect, _ctx.inputModel]
+  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    [vue.vModelSelect, model.value]
   ])
 }
 }
@@ -3739,6 +3745,10 @@ var script$q = {
   steps: {
     type: Array,
     required: false
+  },
+  hideButton: {
+    type: Boolean,
+    default: false
   }
 },
   emits: ['success', 'preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
@@ -4302,7 +4312,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')
@@ -4543,6 +4553,7 @@ var script$n = {
   'files',
   'phones',
   'numbers',
+  'hideButton',
   'customComponent','modalTitle','class','successMessage', 'modalId'],
   emits: ['success','fieldChanged','formSubmitted','formError','modalId'],
   setup(__props, { emit: __emit }) {
@@ -4585,7 +4596,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"
@@ -4611,7 +4622,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]
+  ])
 }
 }
 

package/dist/library.mjs

@@ -3393,8 +3393,13 @@ var script$u = {
   emits: /*@__PURE__*/mergeModels(['clearValidationErrors'], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
 
-useModel(__props, "modelValue");
+const model = useModel(__props, "modelValue");
 const props = __props;
+const emit = __emit;
+
+const onInput = () => {
+  emit('clearValidationErrors');
+};
 
 const selectOptions = ref(null);
 
@@ -3423,7 +3428,8 @@ onMounted(()=>{
 
 return (_ctx, _cache) => {
   return withDirectives((openBlock(), createElementBlock("select", {
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.inputModel) = $event))
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((model).value = $event)),
+    onChange: onInput
   }, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(selectOptions.value, (option) => {
       return (openBlock(), createElementBlock("option", {
@@ -3431,8 +3437,8 @@ return (_ctx, _cache) => {
         value: option.id
       }, toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$n))
     }), 128 /* KEYED_FRAGMENT */))
-  ], 512 /* NEED_PATCH */)), [
-    [vModelSelect, _ctx.inputModel]
+  ], 544 /* NEED_HYDRATION, NEED_PATCH */)), [
+    [vModelSelect, model.value]
   ])
 }
 }
@@ -3728,6 +3734,10 @@ var script$q = {
   steps: {
     type: Array,
     required: false
+  },
+  hideButton: {
+    type: Boolean,
+    default: false
   }
 },
   emits: ['success', 'preSubmit', 'fieldChanged', 'formSubmitted', 'formError'],
@@ -4291,7 +4301,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')
@@ -4532,6 +4542,7 @@ var script$n = {
   'files',
   'phones',
   'numbers',
+  'hideButton',
   'customComponent','modalTitle','class','successMessage', 'modalId'],
   emits: ['success','fieldChanged','formSubmitted','formError','modalId'],
   setup(__props, { emit: __emit }) {
@@ -4574,7 +4585,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"
@@ -4600,7 +4611,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]
+  ])
 }
 }
 

package/package.json

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