Refactor documentation and improve code formatting

- Updated CODE_OF_CONDUCT.md and CONTRIBUTING.md for consistency in formatting.
- Enhanced README.md for clarity and readability.
- Made minor adjustments to Vue component files for improved code style and organization.
- Added AppMultiCombobox to AppComponentsResolver.js for better component management.

Author: daniel-cintra

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
--   Using welcoming and inclusive language
--   Being respectful of differing viewpoints and experiences
--   Gracefully accepting constructive criticism
--   Focusing on what is best for the community
--   Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
--   The use of sexualized language or imagery and unwelcome sexual attention or
-    advances
--   Trolling, insulting/derogatory comments, and personal or political attacks
--   Public or private harassment
--   Publishing others' private information, such as a physical or electronic
-    address, without explicit permission
--   Other conduct which could reasonably be considered inappropriate in a
-    professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

CONTRIBUTING.md

@@ -30,26 +30,26 @@ whether or not your feature is likely to be used by other users of the project.
 
 Before filing an issue:
 
--   Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
--   Check to make sure your feature suggestion isn't already present within the project.
--   Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
--   Check the pull requests tab to ensure that the feature isn't already in progress.
+- Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
+- Check to make sure your feature suggestion isn't already present within the project.
+- Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
+- Check the pull requests tab to ensure that the feature isn't already in progress.
 
 Before submitting a pull request:
 
--   Check the codebase to ensure that your feature doesn't already exist.
--   Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
+- Check the codebase to ensure that your feature doesn't already exist.
+- Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
 
 ## Requirements
 
 If the project maintainer has any additional requirements, you will find them listed here.
 
--   **Coding Standard** - To format the PHP code run `./vendor/bin/pint`. To lint the JavaScript code and Vue SFC, run `npm run lint`, and to format `npm run format`.
+- **Coding Standard** - To format the PHP code run `./vendor/bin/pint`. To lint the JavaScript code and Vue SFC, run `npm run lint`, and to format `npm run format`.
 
--   **Add tests!** - Please **allways** provide tests .
+- **Add tests!** - Please **allways** provide tests .
 
--   **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
 
--   **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
+- **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](http://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
 
 Happy coding, and thanks for being part of our community! 🎉

README.md

@@ -17,17 +17,17 @@
 
 Starting a new web application usually means tackling a bunch of common yet crucial tasks, including:
 
--   **Scalable Architecture:** Structuring your application in a way that scales seamlessly with growth.
--   **Robust Access Control:** Crafting a granular ACL (Access Control List) to manage users and roles proficiently.
--   **Intuitive Admin Panel:** Either customizing a ready-made or developing a bespoke Admin Panel to streamline your application's construction.
--   **Responsive Design:** Ensuring your Admin Panel is mobile-friendly and responsive across devices.
--   **Unified UI Toolkit:** Adopting or developing a UI Toolkit to fast-track frontend development while maintaining a coherent design across pages.
--   **Effortless Frontend-Backend Integration:** Bridging your frontend and backend intuitively, ensuring a maintainable and straightforward connection.
--   **Optimized Build Management:** Harnessing the right toolset and stack to manage your frontend application's build steps efficiently.
--   **Reusable Components:** Abstracting common functionalities and components for reuse (embrace DRY - Don't Repeat Yourself), such as data search, pagination, flash messages, and more.
--   **Thorough Testing Frameworks:** Implementing testing frameworks to validate your application's functionality.
--   **Comprehensive Activity Log:** Keeping a detailed log to audit user operations.
--   **Clear Architectural Vision:** Maintaining a lucid mental model of the project's architectural decisions, promoting consistency and a solid understanding of how all elements interlink.
+- **Scalable Architecture:** Structuring your application in a way that scales seamlessly with growth.
+- **Robust Access Control:** Crafting a granular ACL (Access Control List) to manage users and roles proficiently.
+- **Intuitive Admin Panel:** Either customizing a ready-made or developing a bespoke Admin Panel to streamline your application's construction.
+- **Responsive Design:** Ensuring your Admin Panel is mobile-friendly and responsive across devices.
+- **Unified UI Toolkit:** Adopting or developing a UI Toolkit to fast-track frontend development while maintaining a coherent design across pages.
+- **Effortless Frontend-Backend Integration:** Bridging your frontend and backend intuitively, ensuring a maintainable and straightforward connection.
+- **Optimized Build Management:** Harnessing the right toolset and stack to manage your frontend application's build steps efficiently.
+- **Reusable Components:** Abstracting common functionalities and components for reuse (embrace DRY - Don't Repeat Yourself), such as data search, pagination, flash messages, and more.
+- **Thorough Testing Frameworks:** Implementing testing frameworks to validate your application's functionality.
+- **Comprehensive Activity Log:** Keeping a detailed log to audit user operations.
+- **Clear Architectural Vision:** Maintaining a lucid mental model of the project's architectural decisions, promoting consistency and a solid understanding of how all elements interlink.
 
 The intricacies of these tasks are far from trivial, often demanding a substantial amount of time and attention. As you delve deeper, you may encounter additional minor behaviors and tweaks that, while seemingly marginal, are crucial and time-consuming.
 
@@ -43,35 +43,35 @@ The VILT Stack is a powerful combination of frameworks and tools that provide a
 
 Modular stands on the shoulders of giants, integrating powerful frameworks and tools to offer a streamlined development experience. Here’s what lies under the hood:
 
--   [Vue 3](https://vuejs.org/) (Drives custom frontend components)
--   [Inertia.js](https://inertiajs.com/) (Bridges the gap between frontend and backend)
--   [Laravel 12](https://laravel.com/) (Empowers the backend)
--   [Tailwind CSS 4](https://tailwindcss.com/) (Styles with ease)
--   [Vite](https://vitejs.dev/) (Accelerates frontend tooling)
+- [Vue 3](https://vuejs.org/) (Drives custom frontend components)
+- [Inertia.js](https://inertiajs.com/) (Bridges the gap between frontend and backend)
+- [Laravel 12](https://laravel.com/) (Empowers the backend)
+- [Tailwind CSS 4](https://tailwindcss.com/) (Styles with ease)
+- [Vite](https://vitejs.dev/) (Accelerates frontend tooling)
 
 When you bring Modular into your Laravel application, here’s a taste of what you'll unlock:
 
--   A **Themed Admin Panel** seamlessly integrated with Tailwind CSS, ready to assist you in crafting your application.
--   A finely-tuned **ACL (Access Control List) System** to effortlessly manage users and roles.
--   A suite of auto-loaded **Custom Vue 3 Components**, penned in **JavaScript**, and tailored with Tailwind CSS; ready for use.
--   Vite for a **lightning-fast frontend development** journey.
--   Inertia.js to ensure a smooth frontend and backend connection, **simplifying routing and component data hydration**, among other benefits.
--   A **custom-built CLI** to swiftly generate new modules; propelling your **development speed**.
--   A comprehensive **translation system** ready to help your application speak the world's languages (if needed).
--   **Build steps** for your frontend application are set, pre-configured, and ready to roll from the get-go, with the right tooling and stack to keep the momentum high.
--   A **developer experience** designed to leave a grin on your face at the end of each coding day ;)
+- A **Themed Admin Panel** seamlessly integrated with Tailwind CSS, ready to assist you in crafting your application.
+- A finely-tuned **ACL (Access Control List) System** to effortlessly manage users and roles.
+- A suite of auto-loaded **Custom Vue 3 Components**, penned in **JavaScript**, and tailored with Tailwind CSS; ready for use.
+- Vite for a **lightning-fast frontend development** journey.
+- Inertia.js to ensure a smooth frontend and backend connection, **simplifying routing and component data hydration**, among other benefits.
+- A **custom-built CLI** to swiftly generate new modules; propelling your **development speed**.
+- A comprehensive **translation system** ready to help your application speak the world's languages (if needed).
+- **Build steps** for your frontend application are set, pre-configured, and ready to roll from the get-go, with the right tooling and stack to keep the momentum high.
+- A **developer experience** designed to leave a grin on your face at the end of each coding day ;)
 
 ## Custom Vue 3 Components
 
 In previous iterations of Modular, I leveraged robust UI Toolkits like Vuetify and Prime Vue. While these are excellent options, a desire for more control over the components led to a change, guided by the following criteria:
 
--   Adoption of Vue 3 as the primary JavaScript framework.
--   Employment of Tailwind CSS for styling purposes.
--   Seamless integration of Custom Vue 3 Components with the Tailwind Theme System.
--   Easy customization of components by merely editing them. To facilitate this, components reside not in node_modules, but in "./resources/js/Components". Need some tweaking? Open the component, modify the Tailwind CSS classes, and save it. Done.
--   No use of Sass, Less, Stylus, etc. Tailwind CSS exclusively.
--   No TypeScript. Pure JavaScript only.
--   Light and exceedingly straightforward Common Components. If necessary, extend or create new components per project to imbue additional functionality.
+- Adoption of Vue 3 as the primary JavaScript framework.
+- Employment of Tailwind CSS for styling purposes.
+- Seamless integration of Custom Vue 3 Components with the Tailwind Theme System.
+- Easy customization of components by merely editing them. To facilitate this, components reside not in node_modules, but in "./resources/js/Components". Need some tweaking? Open the component, modify the Tailwind CSS classes, and save it. Done.
+- No use of Sass, Less, Stylus, etc. Tailwind CSS exclusively.
+- No TypeScript. Pure JavaScript only.
+- Light and exceedingly straightforward Common Components. If necessary, extend or create new components per project to imbue additional functionality.
 
 At present, Modular furnishes the following Custom Vue 3 Components:
 

stubs/resources/js/Components/DataTable/AppDataSearch.vue

@@ -40,7 +40,7 @@ const props = defineProps({
         type: Object,
         default: () => {}
     },
-     placeholder: {
+    placeholder: {
         type: String,
         default: 'Search'
     }

stubs/resources/js/Components/Form/AppMultiCombobox.vue

@@ -2,7 +2,7 @@
     <div ref="wrapperRef" class="relative w-64">
         <!-- Button to open dropdown -->
         <AppButton
-            class="mt-1 flex w-full flex-wrap justify-between rounded-md border-0 bg-skin-neutral-1 px-3 py-2 text-left text-skin-neutral-12 shadow-sm ring-1 ring-inset ring-skin-neutral-7 focus:ring-2 focus:ring-inset focus:ring-skin-neutral-7 sm:text-sm sm:leading-6"
+            class="bg-skin-neutral-1 text-skin-neutral-12 ring-skin-neutral-7 focus:ring-skin-neutral-7 mt-1 flex w-full flex-wrap justify-between rounded-md border-0 px-3 py-2 text-left shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
             aria-haspopup="true"
             :aria-expanded="isOpen"
             @click="toggleState"
@@ -12,7 +12,7 @@
                 <span
                     v-for="(item, index) in modelValue"
                     :key="item.value"
-                    class="flex items-center rounded bg-skin-neutral-3 px-2 py-1 text-xs text-skin-neutral-12"
+                    class="bg-skin-neutral-3 text-skin-neutral-12 flex items-center rounded px-2 py-1 text-xs"
                 >
                     {{ item.label }}
                     <i
@@ -68,7 +68,7 @@
                         v-for="(option, index) in filteredOptions"
                         :key="option.value"
                         role="option"
-                        class="flex items-center gap-2 px-4 py-2 text-sm hover:cursor-pointer hover:bg-skin-neutral-3 hover:text-skin-neutral-12"
+                        class="hover:bg-skin-neutral-3 hover:text-skin-neutral-12 flex items-center gap-2 px-4 py-2 text-sm hover:cursor-pointer"
                         :class="{
                             'bg-skin-neutral-3 text-skin-neutral-12':
                                 index === highlightedIndex
@@ -97,7 +97,6 @@ import useClickOutside from '@resources/js/Composables/useClickOutside'
 const props = defineProps({
     modelValue: {
         type: Array,
-        required: true,
         default: () => []
     },
     comboLabel: {
@@ -212,9 +211,12 @@ const remove = (index) => {
 </script>
 
 <style scoped>
+@reference "../../../css/app.css";
+
 .slide-fade-enter-active,
 .slide-fade-leave-active {
-    @apply transition-all duration-200 ease-in;
+    @apply transition-all duration-200;
+    transition-timing-function: ease-in;
 }
 .slide-fade-enter-from,
 .slide-fade-leave-to {

stubs/resources/js/Components/Form/AppTipTapEditor.vue

@@ -295,7 +295,12 @@ import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import Youtube from '@tiptap/extension-youtube'
-import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'
+import {
+    Table,
+    TableCell,
+    TableHeader,
+    TableRow
+} from '@tiptap/extension-table'
 import TipTapButton from './TipTap/TipTapButton.vue'
 import TipTapDivider from './TipTap/TipTapDivider.vue'
 

stubs/resources/js/Components/Misc/AppTopBar.vue

@@ -22,11 +22,14 @@
                 <i
                     :class="iconFullscreenClass"
                     class="transition-transform duration-500 ease-in-out"
-                    :style="{ transform: isFullscreen ? 'rotate(180deg) scale(1.2)' : 'rotate(0deg) scale(1)' }"
+                    :style="{
+                        transform: isFullscreen
+                            ? 'rotate(180deg) scale(1.2)'
+                            : 'rotate(0deg) scale(1)'
+                    }"
                 ></i>
             </AppButton>
 
-            
             <!-- Theme toggle -->
             <AppButton
                 href="#"
@@ -36,7 +39,6 @@
                 <i :class="iconThemeClass"></i>
             </AppButton>
 
-            
             <!-- Logout -->
             <AppButton
                 class="btn btn-icon hover:bg-skin-neutral-5"
@@ -51,7 +53,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 
-const props = defineProps({
+defineProps({
     title: {
         type: String,
         default: ''

stubs/resources/js/Resolvers/AppComponentsResolver.js

@@ -18,6 +18,7 @@ const componentGroups = {
         'AppInputPassword',
         'AppInputText',
         'AppLabel',
+        'AppMultiCombobox',
         'AppRadioButton',
         'AppTextArea',
         'AppTipTapEditor'