@iankibetsh/shframework 5.8.6 → 5.8.7

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

@@ -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;
 }
@@ -336,20 +304,36 @@
   cursor: pointer;
 }
 
-.sh-selected-item{
-  line-height: unset!important;
+.sh-phone{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 0 0.25rem;
 }
-.sh-suggestion-input{
-  padding: 0.375rem 0.75rem;
+.phone-country{
+  width: 2rem;
+  border: none;
+  align-self: center;
+  outline: none !important;
+  padding: 0.4rem;
+  border-right: 1px solid #0003;
 }
-.sh-suggest{
-  margin-bottom: 1rem;
-  padding: 0rem 0rem;
+.phone-number{
+  width: calc(100% - 2.2rem);
+  border: none;
+  align-self: center;
+  outline: none;
+  margin-bottom: 0;
+  padding: 0.4rem;
 }
-.sh-suggest-control::after{
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 0.255em;
+.sh-phone img{
+  padding: 0.125rem;
+  width: 2rem;
+  height: 2rem;
+}
+.phone-number::placeholder{
+  font-weight: 300;
+  opacity: 0.5;
 }
 
 .permissions-main {
@@ -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]
   ])
 }
 }

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]
   ])
 }
 }

package/package.json

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