@iankibetsh/shframework 5.7.8 → 5.8.0

package/README.md

@@ -1,12 +1,137 @@
-# Installation
+# SH Framework (@iankibetsh/shframework)
 
-Install this package in your existing or freshly installed vue 3 framework
-using vite
+[![npm version](https://img.shields.io/npm/v/@iankibetsh/shframework.svg)](https://www.npmjs.com/package/@iankibetsh/shframework)
+
+A powerful Vue 3 library for rapid application development, specifically designed to integrate seamlessly with Laravel-based backends.
+
+## 🚀 Installation
+
+Install the package using npm:
 
 ```shell
 npm install @iankibetsh/shframework
 ```
 
-Read more here
+## 🛠 Core Components
+
+### 1. ShTable
+
+A robust table component that handles server-side pagination, searching, and custom formatting.
+
+- **Nested Key Support**: Access nested properties using dot notation (e.g., `user.name`).
+- **Auto-Label Generation**: Automatically generates human-readable labels from keys if not explicitly provided (e.g., `user.first_name` becomes "First Name").
+- **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.
+- **Links & Actions**: Easily define column links and action buttons.
+
+```html
+<sh-table :headers="['id', 'user.name', 'email']" end-point="users/list">
+  <template #user.name="{ row }">
+    <strong>{{ row.user.name }}</strong>
+  </template>
+</sh-table>
+```
+
+### Multi-Action Support
+
+Enable multi-row selection and perform collective actions by passing the `multi-actions` prop.
+
+```html
+<sh-table
+  :headers="['id', 'name']"
+  end-point="users/list"
+  :multi-actions="[
+    {
+      label: 'Delete Selected',
+      class: 'btn-outline-danger',
+      icon: 'bi-trash',
+      callback: (selectedRecords) => {
+        // Handle action, e.g., send IDs to backend
+        const ids = selectedRecords.map(r => r.id);
+        console.log('Selected IDs:', ids);
+      }
+    }
+  ]"
+/>
+```
+
+### 2. ShAutoForm
+
+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.
+
+```html
+<sh-auto-form
+  :fields="['name', 'email', 'password', 'gender']"
+  :required="['name', 'email']"
+  action="auth/register"
+  :successCallback="onRegistered"
+/>
+```
+
+### 3. ShForm
+
+The underlying engine for `ShAutoForm`, used for more granular control over form layouts and field types.
+
+### 4. ShModalForm
+
+A convenience component that wraps a trigger button, a Bootstrap modal, and an `ShForm` into one.
+
+```html
+<sh-modal-form
+  modal-id="addTaskModal"
+  modal-title="Create New Task"
+  :fields="['title', 'description']"
+  action="tasks/store"
+>
+  Add Task
+</sh-modal-form>
+```
+
+---
+
+## 🏗 Helpers & Utilities
+
+### shApis
+
+A thin wrapper around Axios for making API requests. It uses `VITE_APP_API_URL` from your `.env` as the base.
+
+- `shApis.doGet(endpoint, params)`
+- `shApis.doPost(endpoint, data)`
+
+### shRepo
+
+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.swalSuccess(message)` / `shRepo.swalError(message)`: Standard success/error popups.
+
+### shUser (State Management)
+
+Pinia-based store for managing authenticated user state and sessions.
+
+```javascript
+import { useUserStore } from "@iankibetsh/shframework";
+const userStore = useUserStore();
+
+userStore.setUser(); // Fetches current user
+userStore.logOut(); // Clears session and local storage
+```
+
+---
+
+## 📄 Documentation
+
+For full details, property lists, and advanced usage, visit our documentation:
+
+👉 [https://frontend-documentation.pages.dev/](https://frontend-documentation.pages.dev/)
+
+## License
 
-https://frontend-documentation.pages.dev/
+MIT

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;
@@ -260,38 +292,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;
 }
@@ -324,6 +324,31 @@
   color: white;
 }
 
+.sh-multi-actions-bar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1050;
+  min-width: 300px;
+}
+
+.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;
 }
@@ -356,22 +381,6 @@
   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;