├── .gitignore
├── LICENSE.md
├── README.md
├── composer.json
├── composer.lock
├── config
    └── laravel-vien.php
├── docs
    ├── select-simple.md
    └── select-simple.png
├── pint.json
├── public
    ├── sc1.png
    ├── sc2.png
    ├── sc3.png
    ├── sc4.png
    ├── sc5.png
    └── sc6.png
├── src
    ├── Concern
    │   ├── FileGenerator.php
    │   └── ReplaceResourceKeywords.php
    ├── Console
    │   ├── Concern
    │   │   └── CommonConsoleTrait.php
    │   ├── GeneratorCommand.php
    │   ├── InstallCommand.php
    │   └── UpdateCommand.php
    ├── Generator
    │   ├── CommonGeneratorTrait.php
    │   ├── ControllerGenerator.php
    │   ├── CreateGenerator.php
    │   ├── EditGenerator.php
    │   ├── IndexGenerator.php
    │   ├── RouteGenerator.php
    │   ├── ShowGenerator.php
    │   └── Stubs
    │   │   ├── controller.stub
    │   │   ├── create.stub
    │   │   ├── edit.stub
    │   │   ├── index.stub
    │   │   └── show.stub
    └── VienServiceProvider.php
└── stubs
    └── inertia-vue
        ├── Controllers
            ├── SettingController.php
            └── UserController.php
        ├── Default
            ├── AuthenticatedLayout.vue
            ├── app.css
            ├── app.js
            └── tailwind.config.js
        ├── Middleware
            └── HandleInertiaRequests.php
        ├── Models
            └── Setting.php
        ├── Pages
            ├── Setting
            │   ├── Create.vue
            │   ├── Edit.vue
            │   ├── Index.vue
            │   └── Show.vue
            └── User
            │   ├── Create.vue
            │   ├── Edit.vue
            │   ├── Index.vue
            │   └── Show.vue
        ├── Vien
            ├── AppToast.vue
            ├── Button.vue
            ├── Checkbox.vue
            ├── Container.vue
            ├── DeleteModal.vue
            ├── InputDateTime.vue
            ├── InputText.vue
            ├── Loading.vue
            ├── Pagination.vue
            ├── SelectSimple.vue
            ├── SideBar.vue
            ├── SideBarMenuItem.vue
            ├── SideBarSubMenuItem.vue
            ├── Table.vue
            ├── TextArea.vue
            ├── Toast.vue
            ├── Toggle.vue
            ├── ToggleDarkMode.vue
            └── Utils
            │   ├── debounce.js
            │   ├── menu-items.js
            │   ├── table-action.js
            │   ├── table-filter.js
            │   ├── table-logic.js
            │   ├── table-row.js
            │   ├── table-sort.js
            │   └── table-toggle-column.js
        ├── database
            ├── factories
            │   └── SettingFactory.php
            ├── migrations
            │   └── 0001_01_01_000003_create_settings_tables.php
            └── seeders
            │   └── DatabaseSeeder.php
        └── routes
            └── web.php


/.gitignore:
--------------------------------------------------------------------------------
1 | vendor/
2 | node_modules/
3 | .DS_Store
4 | .vscode/
5 | .idea/


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Labkita <jardik.oryza@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">Laravel Vien</h1>
  2 | <p align="center">
  3 |     <a href="https://packagist.org/packages/jhonoryza/laravel-vien">
  4 |         <img src="https://poser.pugx.org/jhonoryza/laravel-vien/d/total.svg" alt="Total Downloads">
  5 |     </a>
  6 |     <a href="https://packagist.org/packages/jhonoryza/laravel-vien">
  7 |         <img src="https://poser.pugx.org/jhonoryza/laravel-vien/v/stable.svg" alt="Latest Stable Version">
  8 |     </a>
  9 |     <a href="https://packagist.org/packages/jhonoryza/laravel-vien">
 10 |         <img src="https://poser.pugx.org/jhonoryza/laravel-vien/license.svg" alt="License">
 11 |     </a>
 12 | </p>
 13 | 
 14 | This package is a starter kit for laravel breeze with inertia vue stack, so it requires laravel [breeze and inertia vue stack](https://laravel.com/docs/11.x/starter-kits#breeze-and-inertia)
 15 | 
 16 | Laravel vien provides laravel inertia vue components, when you install this package, it will generate all the components in `resources/js/Components/Vien` directory. 
 17 | 
 18 | No magic behind the scene, you can customize as much as you want
 19 | 
 20 | ## Features
 21 | 
 22 | - Table component with search, sort, filter, pagination, toggle, select and bulk action
 23 | - Resource Generator to quickly generate CRUD
 24 | - Toggle dark mode and light mode component
 25 | - Responsive sidebar component
 26 | - Flash message using toast component
 27 | - Loading spinner component
 28 | - [SelectSimple](./docs/select-simple.md) component
 29 | - InputDateTime component using flatpickr
 30 | - TextArea compoonent
 31 | - Toggle switch component
 32 | 
 33 | for available components you can check in `stubs/inertia-vue/Vien` directory or `resources/js/Components/Vien` after vien installed. 
 34 | 
 35 | here is some screenshot:
 36 | 
 37 | <p float="left">
 38 |   <img src="/public/sc1.png" width="300" />
 39 |   <img src="/public/sc2.png" width="300" /> 
 40 | </p>
 41 | <p float="left">
 42 |   <img src="/public/sc3.png" width="300" />
 43 |   <img src="/public/sc4.png" width="300" />
 44 | </p>
 45 | <p float="left">
 46 |   <img src="/public/sc5.png" width="300" />
 47 |   <img src="/public/sc6.png" width="300" />
 48 | </p>
 49 | 
 50 | ## Requirement
 51 | 
 52 | - PHP >= 8.2
 53 | - Laravel >= 10
 54 | - Laravel [Breeze Stack Inertia Vue](https://laravel.com/docs/11.x/starter-kits#breeze-and-inertia)
 55 | 
 56 | ## Getting Started
 57 | 
 58 | ### Package installation
 59 | 
 60 | ```bash
 61 | composer require --dev jhonoryza/laravel-vien
 62 | ```
 63 | 
 64 | ### Vien installation
 65 | 
 66 | ```bash
 67 | php artisan vien:install
 68 | ```
 69 | 
 70 | this will copy all vien component scaffolding
 71 | 
 72 | after installed successfully you can remove this package from your dev requirement
 73 | 
 74 | ### Optional to update vien components
 75 | 
 76 | ```bash
 77 | php artisan vien:update
 78 | ```
 79 | 
 80 | ### Optional to use resource generator
 81 | 
 82 | before using this generator, make sure you have already your new migration and models, example: lets make a `posts` table, then run `artisan migrate`
 83 | 
 84 | then you can run the following command to generate the resource
 85 | 
 86 | ```bash
 87 | php artisan vien:generate posts
 88 | ```
 89 | 
 90 | After successfully generating the resource above, then adjust
 91 | 
 92 | `resources/js/Components/Vien/Utils/menu-items.js` file to add your `new navigation menu`,
 93 | 
 94 | for example:
 95 | 
 96 | ```js
 97 | import { IconHome } from "@tabler/icons-vue";
 98 | 
 99 | //`id value must be unique`
100 | export const menuItems = [
101 |   {
102 |     id: 4,
103 |     title: "Post",
104 |     routeName: "posts",
105 |     component: "Post",
106 |     icon: IconHome
107 |   }
108 | ]
109 | ```
110 | 
111 | then run `npm run dev` to rebuild
112 | 
113 | ### Optional to publish config
114 | 
115 | ```bash
116 | php artisan vendor:publish --tag='vien-config'
117 | ```
118 | 
119 | ### Optional to publish generator stubs
120 | 
121 | ```bash
122 | php artisan vendor:publish --tag='vien-stubs'
123 | ```
124 | 
125 | ### Security
126 | 
127 | If you've found a bug regarding security please mail [jardik.oryza@gmail.com](mailto:jardik.oryza@gmail.com) instead of
128 | using the issue tracker.
129 | 
130 | ## License
131 | 
132 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "jhonoryza/laravel-vien",
 3 |     "description": "laravel vue inertia component",
 4 |     "type": "library",
 5 |     "license": "MIT",
 6 |     "autoload": {
 7 |         "psr-4": {
 8 |             "Jhonoryza\\Vien\\": "src/"
 9 |         }
10 |     },
11 |     "extra": {
12 |         "laravel": {
13 |             "providers": [
14 |                 "Jhonoryza\\Vien\\VienServiceProvider"
15 |             ]
16 |         }
17 |     },
18 |     "authors": [
19 |         {
20 |             "name": "fajar sp",
21 |             "email": "jardik.oryza@gmail.com"
22 |         }
23 |     ],
24 |     "minimum-stability": "dev",
25 |     "prefer-stable": true,
26 |     "require": {
27 |         "php": "^8.2",
28 |         "illuminate/support": "^10.0|^11.0",
29 |         "illuminate/console": "^10.0|^11.0",
30 |         "laravel/pint": "^1.17"
31 |     },
32 |     "require-dev": {
33 |         "orchestra/testbench": "^8.0|^9.0"
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/config/laravel-vien.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 |     'generator' => [
 5 |         'route_path' => 'routes' . DIRECTORY_SEPARATOR . 'web.php',
 6 | 
 7 |         'controller' => [
 8 |             'namespace' => 'App\\Http\\Controllers',
 9 |             'path'      => 'app' . DIRECTORY_SEPARATOR . 'Http' . DIRECTORY_SEPARATOR . 'Controllers',
10 |         ],
11 | 
12 |         'view' => [
13 |             'path' => 'resources' . DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR . 'Pages' . DIRECTORY_SEPARATOR,
14 |         ],
15 | 
16 |         'model' => [
17 |             'namespace' => 'App\\Models',
18 |             'path'      => 'app' . DIRECTORY_SEPARATOR . 'Models',
19 |         ],
20 |     ],
21 | ];
22 | 


--------------------------------------------------------------------------------
/docs/select-simple.md:
--------------------------------------------------------------------------------
  1 | Select Simple component usage example:
  2 | 
  3 | <p float="left">
  4 |   <img src="./select-simple.png" width="300" />
  5 | </p>
  6 | 
  7 | `Create.vue`
  8 | 
  9 | ```html
 10 | <script setup>
 11 | 
 12 | import {useForm} from "@inertiajs/vue3";
 13 | 
 14 | defineProps({
 15 |     categories: Object,
 16 | })
 17 | 
 18 | const form = useForm({
 19 |     post_category_id: {
 20 |         id: "0",
 21 |         value: "Not Selected",
 22 |     },
 23 | });
 24 | <script>
 25 | 
 26 | <template>
 27 |     <div>
 28 |         <InputLabel for="post_category_id" value="Category"/>
 29 | 
 30 |         <SelectSimple
 31 |             id="post_category_id"
 32 |             v-model="form.post_category_id"
 33 |             :items="categories"
 34 |             class="mt-1 block w-full"
 35 |         />
 36 | 
 37 |         <InputError :message="form.errors.post_category_id" class="mt-2"/>
 38 |     </div>
 39 | </template>
 40 | ```
 41 | 
 42 | `Edit.vue`
 43 | 
 44 | ```html
 45 | <script setup>
 46 | import {useForm} from "@inertiajs/vue3";
 47 | 
 48 | const props = defineProps({
 49 |     post: {
 50 |         type: Object,
 51 |     },
 52 |     categories: Object,
 53 | });
 54 | const form = useForm({
 55 |     post_category_id: props.post.post_category_id,
 56 | })
 57 | <script>
 58 | 
 59 | ```
 60 | 
 61 | `PostController.php`
 62 | 
 63 | ```php
 64 | private function getCategories(): array
 65 | {
 66 |     return PostCategory::query()
 67 |         ->get()
 68 |         ->map(fn ($user) => [
 69 |             'id' => $user->id,
 70 |             'value' => $user->name,
 71 |         ])
 72 |         ->prepend([
 73 |             'id' => '0',
 74 |             'value' => 'Not Selected',
 75 |         ])
 76 |         ->sortKeys()
 77 |         ->toArray();
 78 | }
 79 | 
 80 | public function create(): Response
 81 | {
 82 |     $categories = $this->getCategories();
 83 | 
 84 |     return Inertia::render('Post/Create', [
 85 |         'categories' => $categories,
 86 |     ]);
 87 | }
 88 | 
 89 | public function store(Request $request): RedirectResponse
 90 | {
 91 |     $request->merge([
 92 |         'post_category_id' => $request->post_category_id['id'] ?? null,
 93 |     ]);
 94 |     $data = $request->validate([
 95 |         'post_category_id' => 'required|exists:post_categories,id',
 96 |     ], [], [
 97 |         'post_category_id' => 'Category',
 98 |     ]);
 99 |     $model = Post::query()->create($data);
100 | 
101 |     Session::flash('message', [
102 |         'message' => "Create post {$model->id} success.",
103 |         'type' => 'success',
104 |     ]);
105 | 
106 |     return redirect()->route('posts.show', $model->id);
107 | }
108 | 
109 | public function edit(Post $post): Response
110 | {
111 |     $categories = $this->getCategories();
112 | 
113 |     return Inertia::render('Post/Edit', [
114 |         'categories' => $categories,
115 |         'post' => [
116 |             'id' => $post->id,
117 |             'post_category_id' => [
118 |                 'id' => $post->category->id,
119 |                 'value' => $post->category->name,
120 |             ],
121 |         ],
122 |     ]);
123 | }
124 | ```


--------------------------------------------------------------------------------
/docs/select-simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/docs/select-simple.png


--------------------------------------------------------------------------------
/pint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "preset": "laravel",
 3 |     "rules": {
 4 |         "binary_operator_spaces": {
 5 |             "default": "align_single_space_minimal"
 6 |         },
 7 |         "concat_space": {
 8 |             "spacing": "one"
 9 |         },
10 |         "simplified_null_return": true,
11 |         "braces": false,
12 |         "new_with_braces": {
13 |             "anonymous_class": false,
14 |             "named_class": false
15 |         }
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/public/sc1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc1.png


--------------------------------------------------------------------------------
/public/sc2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc2.png


--------------------------------------------------------------------------------
/public/sc3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc3.png


--------------------------------------------------------------------------------
/public/sc4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc4.png


--------------------------------------------------------------------------------
/public/sc5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc5.png


--------------------------------------------------------------------------------
/public/sc6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jhonoryza/laravel-vien/8f9c17074a847acae878390c39c232a371624fea/public/sc6.png


--------------------------------------------------------------------------------
/src/Concern/FileGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Concern;
 4 | 
 5 | interface FileGenerator
 6 | {
 7 |     /**
 8 |      * Get the generated file's content.
 9 |      */
10 |     public function getContent(): string;
11 | 
12 |     /**
13 |      * Get the generate file's name.
14 |      */
15 |     public function getFilename(): string;
16 | 
17 |     /**
18 |      * Get the full path of generated file.
19 |      */
20 |     public function getFullPath(): string;
21 | 
22 |     /**
23 |      * Get the path of directory which the generated file
24 |      * will be written to.
25 |      */
26 |     public function getPath(): string;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/Concern/ReplaceResourceKeywords.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Jhonoryza\Vien\Concern;
  4 | 
  5 | use Illuminate\Support\Str;
  6 | 
  7 | trait ReplaceResourceKeywords
  8 | {
  9 |     /**
 10 |      * Array of keywords related to the database resource.
 11 |      *
 12 |      * @var string[]
 13 |      */
 14 |     protected static array $keywords = [
 15 |         'StudlyDummies',
 16 |         'StudlyDummy',
 17 |         'camelDummies',
 18 |         'camelDummy',
 19 |         'snake_dummies',
 20 |         'snake_dummy',
 21 |         'kebab-dummies',
 22 |         'kebab-dummy',
 23 |         'Big Title Dummies',
 24 |         'Big Title Dummy',
 25 |         'small title dummies',
 26 |         'small title dummy',
 27 |     ];
 28 | 
 29 |     /**
 30 |      * Get the `Big Title Dummies` replacement value.
 31 |      */
 32 |     protected function getBigTitleDummies(): string
 33 |     {
 34 |         return Str::title(
 35 |             str_replace('_', ' ', $this->getSnakeDummies())
 36 |         );
 37 |     }
 38 | 
 39 |     /**
 40 |      * Get the `Big Title Dummy` replacement value.
 41 |      */
 42 |     protected function getBigTitleDummy(): string
 43 |     {
 44 |         return Str::title(
 45 |             str_replace('_', ' ', $this->getSnakeDummy())
 46 |         );
 47 |     }
 48 | 
 49 |     /**
 50 |      * Get the `camelDummies` replacement value.
 51 |      */
 52 |     protected function getCamelDummies(): string
 53 |     {
 54 |         return Str::camel($this->getPluralName());
 55 |     }
 56 | 
 57 |     /**
 58 |      * Get the `camelDummy` replacement value.
 59 |      */
 60 |     protected function getCamelDummy(): string
 61 |     {
 62 |         return Str::camel($this->getSingularName());
 63 |     }
 64 | 
 65 |     /**
 66 |      * Get the `kebab-dummies` replacement value.
 67 |      */
 68 |     protected function getKebabDummies(): string
 69 |     {
 70 |         return Str::kebab($this->getSmallTitleDummies());
 71 |     }
 72 | 
 73 |     /**
 74 |      * Get the `kebab-dummy` replacement value.
 75 |      */
 76 |     protected function getKebabDummy(): string
 77 |     {
 78 |         return Str::kebab($this->getSmallTitleDummy());
 79 |     }
 80 | 
 81 |     /**
 82 |      * Get the plural table name.
 83 |      */
 84 |     private function getPluralName(): string
 85 |     {
 86 |         return Str::plural($this->tableName);
 87 |     }
 88 | 
 89 |     /**
 90 |      * Get the singular table name.
 91 |      */
 92 |     private function getSingularName(): string
 93 |     {
 94 |         return Str::singular($this->tableName);
 95 |     }
 96 | 
 97 |     /**
 98 |      * Get the `small title dummies` replacement value.
 99 |      */
100 |     protected function getSmallTitleDummies(): string
101 |     {
102 |         return strtolower($this->getBigTitleDummies());
103 |     }
104 | 
105 |     /**
106 |      * Get the `small title dummy` replacement value.
107 |      */
108 |     protected function getSmallTitleDummy(): string
109 |     {
110 |         return strtolower($this->getBigTitleDummy());
111 |     }
112 | 
113 |     /**
114 |      * Get the `snake_dummies` replacement value.
115 |      */
116 |     protected function getSnakeDummies(): string
117 |     {
118 |         return Str::snake($this->getPluralName());
119 |     }
120 | 
121 |     /**
122 |      * Get the `snake_dummy` replacement value.
123 |      */
124 |     protected function getSnakeDummy(): string
125 |     {
126 |         return Str::snake($this->getSingularName());
127 |     }
128 | 
129 |     /**
130 |      * Get `StudlyDummies` replacement value.
131 |      */
132 |     protected function getStudlyDummies(): string
133 |     {
134 |         return Str::studly($this->getPluralName());
135 |     }
136 | 
137 |     /**
138 |      * Get `StudlyDummy` replacement value.
139 |      */
140 |     protected function getStudlyDummy(): string
141 |     {
142 |         return Str::studly($this->getSingularName());
143 |     }
144 | 
145 |     /**
146 |      * Replace all dummy keywords in the given content with the real values.
147 |      */
148 |     public function replaceKeywords(string $content): string
149 |     {
150 |         return str_replace(
151 |             self::$keywords,
152 |             [
153 |                 $this->getStudlyDummies(),
154 |                 $this->getStudlyDummy(),
155 |                 $this->getCamelDummies(),
156 |                 $this->getCamelDummy(),
157 |                 $this->getSnakeDummies(),
158 |                 $this->getSnakeDummy(),
159 |                 $this->getKebabDummies(),
160 |                 $this->getKebabDummy(),
161 |                 $this->getBigTitleDummies(),
162 |                 $this->getBigTitleDummy(),
163 |                 $this->getSmallTitleDummies(),
164 |                 $this->getSmallTitleDummy(),
165 |             ],
166 |             $content
167 |         );
168 |     }
169 | }
170 | 


--------------------------------------------------------------------------------
/src/Console/Concern/CommonConsoleTrait.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Console\Concern;
 4 | 
 5 | use RuntimeException;
 6 | use Symfony\Component\Process\Process;
 7 | 
 8 | trait CommonConsoleTrait
 9 | {
10 |     /**
11 |      * Update the "package.json" file.
12 |      */
13 |     protected static function updateNodePackages(callable $callback, bool $dev = true): void
14 |     {
15 |         if (! file_exists(base_path('package.json'))) {
16 |             return;
17 |         }
18 | 
19 |         $configurationKey = $dev ? 'devDependencies' : 'dependencies';
20 | 
21 |         $packages = json_decode(file_get_contents(base_path('package.json')), true);
22 | 
23 |         $packages[$configurationKey] = $callback(
24 |             array_key_exists($configurationKey, $packages) ? $packages[$configurationKey] : [],
25 |             $configurationKey
26 |         );
27 | 
28 |         ksort($packages[$configurationKey]);
29 | 
30 |         file_put_contents(
31 |             base_path('package.json'),
32 |             json_encode($packages, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) . PHP_EOL
33 |         );
34 |     }
35 | 
36 |     /**
37 |      * Run the given commands.
38 |      */
39 |     protected function runCommands(array $commands): void
40 |     {
41 |         $process = Process::fromShellCommandline(implode(' && ', $commands), null, null, null, null);
42 | 
43 |         if ('\\' !== DIRECTORY_SEPARATOR && file_exists('/dev/tty') && is_readable('/dev/tty')) {
44 |             try {
45 |                 $process->setTty(true);
46 |             } catch (RuntimeException $e) {
47 |                 $this->output->writeln('  <bg=yellow;fg=black> WARN </> ' . $e->getMessage() . PHP_EOL);
48 |             }
49 |         }
50 | 
51 |         $process->run(function ($type, $line) {
52 |             $this->output->write('    ' . $line);
53 |         });
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/Console/GeneratorCommand.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Console;
 4 | 
 5 | use Illuminate\Console\Command;
 6 | use Illuminate\Filesystem\Filesystem;
 7 | use Illuminate\Support\Composer;
 8 | use Jhonoryza\Vien\Concern\FileGenerator;
 9 | use Jhonoryza\Vien\Console\Concern\CommonConsoleTrait;
10 | use Jhonoryza\Vien\Generator\ControllerGenerator;
11 | use Jhonoryza\Vien\Generator\CreateGenerator;
12 | use Jhonoryza\Vien\Generator\EditGenerator;
13 | use Jhonoryza\Vien\Generator\IndexGenerator;
14 | use Jhonoryza\Vien\Generator\RouteGenerator;
15 | use Jhonoryza\Vien\Generator\ShowGenerator;
16 | 
17 | use function Laravel\Prompts\text;
18 | 
19 | class GeneratorCommand extends Command
20 | {
21 |     use CommonConsoleTrait;
22 | 
23 |     protected $signature = 'vien:generate {table? : The table name}';
24 | 
25 |     protected $description = 'Generate Vien route, controller and resource';
26 | 
27 |     public function __construct(public Filesystem $filesystem, public Composer $composer)
28 |     {
29 |         parent::__construct();
30 |     }
31 | 
32 |     public function handle(): void
33 |     {
34 |         $tableName = $this->argument('table') ?? text(
35 |             label: 'Enter table name',
36 |             placeholder: 'users',
37 |             required: true
38 |         );
39 | 
40 |         $this->generateFile(new RouteGenerator($this->filesystem, $tableName));
41 |         $this->generateFile(new ControllerGenerator($this->filesystem, $tableName));
42 |         $this->generateFile(new IndexGenerator($this->filesystem, $tableName));
43 |         $this->generateFile(new ShowGenerator($this->filesystem, $tableName));
44 |         $this->generateFile(new EditGenerator($this->filesystem, $tableName));
45 |         $this->generateFile(new CreateGenerator($this->filesystem, $tableName));
46 | 
47 |         $this->runCommands(['./vendor/bin/pint .']);
48 |         if (file_exists(base_path('pnpm-lock.yaml'))) {
49 |             $this->runCommands(['pnpm run build']);
50 |         } elseif (file_exists(base_path('yarn.lock'))) {
51 |             $this->runCommands(['yarn run build']);
52 |         } elseif (file_exists(base_path('bun.lockb'))) {
53 |             $this->runCommands(['bun run build']);
54 |         } else {
55 |             $this->runCommands(['npm run build']);
56 |         }
57 | 
58 |         $this->composer->dumpAutoloads();
59 |     }
60 | 
61 |     private function generateFile(FileGenerator $generator): void
62 |     {
63 |         if (! $this->filesystem->exists($generator->getPath())) {
64 |             $this->filesystem->makeDirectory($generator->getPath(), 0755, true);
65 |         }
66 | 
67 |         $this->filesystem->put($generator->getFullPath(), $generator->getContent());
68 | 
69 |         $this->info('Generated: ' . $generator->getPath() . DIRECTORY_SEPARATOR . $generator->getFilename());
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/Console/InstallCommand.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Console;
 4 | 
 5 | use Illuminate\Console\Command;
 6 | use Illuminate\Filesystem\Filesystem;
 7 | use Jhonoryza\Vien\Console\Concern\CommonConsoleTrait;
 8 | 
 9 | class InstallCommand extends Command
10 | {
11 |     use CommonConsoleTrait;
12 | 
13 |     protected $signature = 'vien:install';
14 | 
15 |     protected $description = 'Install the Vien controllers and resources';
16 | 
17 |     public function handle(): void
18 |     {
19 |         $this->installInertiaVueStack();
20 |     }
21 | 
22 |     protected function installInertiaVueStack(): void
23 |     {
24 |         // NPM Packages...
25 |         $this->updateNodePackages(function ($packages) {
26 |             return [
27 |                 '@tabler/icons-vue'       => '^3.7.0',
28 |                 'vue3-click-away'         => '^1.2.4',
29 |                 '@headlessui/vue'         => '^1.7.22',
30 |                 'flatpickr'               => '^4.6.13',
31 |                 'vue-flatpickr-component' => '^11.0.5',
32 |             ] + $packages;
33 |         });
34 | 
35 |         // Models...
36 |         (new Filesystem)->ensureDirectoryExists(app_path('Models'));
37 |         copy(__DIR__ . '/../../stubs/inertia-vue/Models/Setting.php', app_path('Models/Setting.php'));
38 | 
39 |         // Controllers...
40 |         (new Filesystem)->ensureDirectoryExists(app_path('Http/Controllers'));
41 |         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia-vue/Controllers', app_path('Http/Controllers'));
42 | 
43 |         (new Filesystem)->ensureDirectoryExists(app_path('Http/Middleware'));
44 |         copy(__DIR__ . '/../../stubs/inertia-vue/Middleware/HandleInertiaRequests.php', app_path('Http/Middleware/HandleInertiaRequests.php'));
45 | 
46 |         // Database...
47 |         copy(__DIR__ . '/../../stubs/inertia-vue/database/migrations/0001_01_01_000003_create_settings_tables.php', database_path('migrations/0001_01_01_000003_create_settings_tables.php'));
48 |         copy(__DIR__ . '/../../stubs/inertia-vue/database/seeders/DatabaseSeeder.php', database_path('seeders/DatabaseSeeder.php'));
49 |         copy(__DIR__ . '/../../stubs/inertia-vue/database/factories/SettingFactory.php', database_path('factories/SettingFactory.php'));
50 | 
51 |         // Components + Pages...
52 |         (new Filesystem)->ensureDirectoryExists(resource_path('js/Components/Vien'));
53 |         (new Filesystem)->ensureDirectoryExists(resource_path('js/Layouts'));
54 |         (new Filesystem)->ensureDirectoryExists(resource_path('js/Pages'));
55 | 
56 |         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia-vue/Vien', resource_path('js/Components/Vien'));
57 |         (new Filesystem)->copyDirectory(__DIR__ . '/../../stubs/inertia-vue/Pages', resource_path('js/Pages'));
58 |         copy(__DIR__ . '/../../stubs/inertia-vue/Default/AuthenticatedLayout.vue', resource_path('js/Layouts/AuthenticatedLayout.vue'));
59 | 
60 |         // Routes...
61 |         copy(__DIR__ . '/../../stubs/inertia-vue/routes/web.php', base_path('routes/web.php'));
62 | 
63 |         // Tailwind / Vite...
64 |         copy(__DIR__ . '/../../stubs/inertia-vue/Default/app.css', resource_path('css/app.css'));
65 |         copy(__DIR__ . '/../../stubs/inertia-vue/Default/app.js', resource_path('js/app.js'));
66 |         copy(__DIR__ . '/../../stubs/inertia-vue/Default/tailwind.config.js', base_path('tailwind.config.js'));
67 | 
68 |         $this->components->info('Installing and building Node dependencies.');
69 | 
70 |         if (file_exists(base_path('pnpm-lock.yaml'))) {
71 |             $this->runCommands(['pnpm install', 'pnpm run build']);
72 |         } elseif (file_exists(base_path('yarn.lock'))) {
73 |             $this->runCommands(['yarn install', 'yarn run build']);
74 |         } elseif (file_exists(base_path('bun.lockb'))) {
75 |             $this->runCommands(['bun install', 'bun run build']);
76 |         } else {
77 |             $this->runCommands(['npm install', 'npm run build']);
78 |         }
79 | 
80 |         $this->line('');
81 |         $this->components->info('Vien scaffolding installed successfully.');
82 | 
83 |         $this->components->info('Running migration.');
84 |         $this->runCommands(['composer dump-autoload', 'php artisan migrate --force']);
85 |     }
86 | }
87 | 


--------------------------------------------------------------------------------
/src/Console/UpdateCommand.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Console;
 4 | 
 5 | use Illuminate\Console\Command;
 6 | use Illuminate\Filesystem\Filesystem;
 7 | use Jhonoryza\Vien\Console\Concern\CommonConsoleTrait;
 8 | 
 9 | class UpdateCommand extends Command
10 | {
11 |     use CommonConsoleTrait;
12 | 
13 |     protected $signature = 'vien:update';
14 | 
15 |     protected $description = 'Update the Vien components';
16 | 
17 |     public function handle(): void
18 |     {
19 |         $this->installInertiaVueStack();
20 |     }
21 | 
22 |     protected function installInertiaVueStack(): void
23 |     {
24 |         // NPM Packages...
25 |         $this->updateNodePackages(function ($packages) {
26 |             return [
27 |                 '@tabler/icons-vue'       => '^3.7.0',
28 |                 'vue3-click-away'         => '^1.2.4',
29 |                 '@headlessui/vue'         => '^1.7.22',
30 |                 'flatpickr'               => '^4.6.13',
31 |                 'vue-flatpickr-component' => '^11.0.5',
32 |             ] + $packages;
33 |         });
34 | 
35 |         // Components + Pages...
36 |         $exclude = ['menu-items.js'];
37 |         $this->copyDirectoryExcludingFiles(__DIR__ . '/../../stubs/inertia-vue/Vien', resource_path('js/Components/Vien'), $exclude);
38 | 
39 |         $this->components->info('Installing and building Node dependencies.');
40 | 
41 |         if (file_exists(base_path('pnpm-lock.yaml'))) {
42 |             $this->runCommands(['pnpm install', 'pnpm run build']);
43 |         } elseif (file_exists(base_path('yarn.lock'))) {
44 |             $this->runCommands(['yarn install', 'yarn run build']);
45 |         } elseif (file_exists(base_path('bun.lockb'))) {
46 |             $this->runCommands(['bun install', 'bun run build']);
47 |         } else {
48 |             $this->runCommands(['npm install', 'npm run build']);
49 |         }
50 | 
51 |         $this->line('');
52 |         $this->components->info('Vien components updated successfully.');
53 |     }
54 | 
55 |     public function copyDirectoryExcludingFiles($source, $destination, $exclude = []): void
56 |     {
57 |         $filesystem = new Filesystem;
58 | 
59 |         // Ensure destination directory exists
60 |         $filesystem->ensureDirectoryExists($destination);
61 | 
62 |         // Get all files in the source directory
63 |         $files = $filesystem->allFiles($source);
64 | 
65 |         // Filter out the files to be excluded
66 |         $filesToCopy = array_filter($files, function ($file) use ($exclude) {
67 |             foreach ($exclude as $excludedFile) {
68 |                 if (str_contains($file->getPathname(), $excludedFile)) {
69 |                     return false;
70 |                 }
71 |             }
72 | 
73 |             return true;
74 |         });
75 | 
76 |         // Copy each remaining file to the destination
77 |         foreach ($filesToCopy as $file) {
78 |             $relativePath = str_replace($source, '', $file->getPathname());
79 |             $filesystem->copy($file->getPathname(), $destination . $relativePath);
80 |         }
81 | 
82 |         // Get all directories in the source directory
83 |         $directories = $filesystem->directories($source);
84 | 
85 |         // Create directories in the destination
86 |         foreach ($directories as $directory) {
87 |             $relativePath   = str_replace($source, '', $directory);
88 |             $newDestination = $destination . $relativePath;
89 |             $filesystem->ensureDirectoryExists($newDestination);
90 |             $this->copyDirectoryExcludingFiles($directory, $newDestination, $exclude);
91 |         }
92 |     }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/Generator/CommonGeneratorTrait.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Jhonoryza\Vien\Generator;
  4 | 
  5 | use Illuminate\Support\Facades\DB;
  6 | use Illuminate\Support\Facades\Schema;
  7 | use Illuminate\Support\Str;
  8 | 
  9 | trait CommonGeneratorTrait
 10 | {
 11 |     public function getFilename(): string
 12 |     {
 13 |         return $this->filename;
 14 |     }
 15 | 
 16 |     public function getFullPath(): string
 17 |     {
 18 |         return $this->path . '/' . $this->filename;
 19 |     }
 20 | 
 21 |     public function getPath(): string
 22 |     {
 23 |         return $this->path;
 24 |     }
 25 | 
 26 |     protected function getStubPath(string $filename): string
 27 |     {
 28 |         $customPath = app()->basePath('stubs/vien_generator/' . $filename);
 29 | 
 30 |         return file_exists($customPath)
 31 |             ? $customPath
 32 |             : __DIR__ . DIRECTORY_SEPARATOR . 'Stubs' . DIRECTORY_SEPARATOR . $filename;
 33 |     }
 34 | 
 35 |     protected function indent(string $line, int $times = 1): string
 36 |     {
 37 |         return str_repeat(' ', $times * 4) . $line;
 38 |     }
 39 | 
 40 |     public function getImplodeSelect(): string
 41 |     {
 42 |         $columns = Schema::getColumnListing($this->tableName);
 43 |         $columns = collect($columns)
 44 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
 45 |             ->all();
 46 |         $attribute = '';
 47 |         foreach ($columns as $column) {
 48 |             $col = sprintf("'%s'", $column);
 49 |             $attribute .= $col . ', ';
 50 |         }
 51 | 
 52 |         return rtrim($attribute);
 53 |     }
 54 | 
 55 |     public function getQueryFilters(): string
 56 |     {
 57 |         $columns = Schema::getColumnListing($this->tableName);
 58 |         $columns = collect($columns)
 59 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
 60 |             ->all();
 61 |         $attribute = '';
 62 |         $template  = "
 63 |             ->when(
 64 |                 request('filter.%s'),
 65 |                 fn (Builder \$query, \$filter) => \$query->where('%s', \$filter)
 66 |             )
 67 |         ";
 68 |         foreach ($columns as $column) {
 69 |             $col = sprintf($template, $column, $column);
 70 |             $attribute .= $this->indent($col, 3);
 71 |         }
 72 | 
 73 |         return rtrim($attribute);
 74 |     }
 75 | 
 76 |     public function getImplodeFilters(): string
 77 |     {
 78 |         $columns = Schema::getColumnListing($this->tableName);
 79 |         $columns = collect($columns)
 80 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
 81 |             ->all();
 82 |         $attribute = '';
 83 |         foreach ($columns as $column) {
 84 |             $col = sprintf("'%s',", $column);
 85 |             $attribute .= $this->indent($col, 5) . PHP_EOL;
 86 |         }
 87 | 
 88 |         return rtrim($attribute);
 89 |     }
 90 | 
 91 |     public function getModelColumns(): string
 92 |     {
 93 |         $columns   = Schema::getColumnListing($this->tableName);
 94 |         $attribute = '';
 95 |         $template  = "['key' => '%s', 'label' => '%s', 'visible' => true, 'sortable' => true],";
 96 |         foreach ($columns as $column) {
 97 |             $title = Str::title(
 98 |                 str_replace('_', ' ', Str::snake(Str::singular($column)))
 99 |             );
100 |             $col = sprintf($template, $column, $title);
101 |             $attribute .= $this->indent($col, 5) . PHP_EOL;
102 |         }
103 | 
104 |         return rtrim($attribute);
105 |     }
106 | 
107 |     public function getModelAttribute(bool $asBuilder = false): string
108 |     {
109 |         $columns   = Schema::getColumnListing($this->tableName);
110 |         $attribute = '';
111 |         $template  = "'%s' => %s,";
112 |         foreach ($columns as $column) {
113 |             $format = $column === 'created_at' || $column === 'updated_at' ? "->format('d F Y H:i')" : '';
114 |             $format = $asBuilder ? '' : $format;
115 |             $col    = sprintf($template, $column, '$camelDummy->' . $column . $format);
116 |             $attribute .= $this->indent($col, 4) . PHP_EOL;
117 |         }
118 | 
119 |         return rtrim($attribute);
120 |     }
121 | 
122 |     public function getValidationRules(): string
123 |     {
124 |         $columns = DB::getSchemaBuilder()->getColumns($this->tableName);
125 |         $columns = collect($columns)
126 |             ->filter(fn ($item) => ! in_array($item['name'], ['id', 'created_at', 'updated_at']))
127 |             ->all();
128 | 
129 |         $attribute = '';
130 |         $template  = "'%s' => '%s',";
131 |         foreach ($columns as $column) {
132 |             $col = sprintf($template, $column['name'], ! $column['nullable'] ? 'required' : 'nullable');
133 |             $attribute .= $this->indent($col, 5) . PHP_EOL;
134 |         }
135 | 
136 |         return rtrim($attribute);
137 |     }
138 | 
139 |     public function getIndexFilter(): string
140 |     {
141 |         $columns = Schema::getColumnListing($this->tableName);
142 |         $columns = collect($columns)
143 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
144 |             ->all();
145 | 
146 |         $template = '
147 |             <label
148 |                 class="block font-medium text-sm dark:text-gray-100"
149 |                 for="%s"
150 |                 >%s</label
151 |               >
152 |               <InputText v-model="filter.%s" />
153 |         ';
154 |         $attribute = '';
155 |         foreach ($columns as $column) {
156 |             $title = Str::title(
157 |                 str_replace('_', ' ', Str::snake(Str::singular($column)))
158 |             );
159 |             $col = sprintf($template, $column, $title, $column);
160 |             $attribute .= $this->indent($col, 3);
161 |         }
162 | 
163 |         return rtrim($attribute);
164 |     }
165 | 
166 |     public function getViewForm(): string
167 |     {
168 |         $columns = Schema::getColumnListing($this->tableName);
169 |         $columns = collect($columns)
170 |             ->filter(fn ($item) => ! in_array($item, ['id']))
171 |             ->all();
172 | 
173 |         $template = '
174 |             <div>
175 |               <InputLabel for="%s" value="%s" />
176 | 
177 |               <TextInput
178 |                 id="%s"
179 |                 v-model="camelDummy.%s"
180 |                 type="text"
181 |                 class="mt-1 block w-full"
182 |                 disabled
183 |               />
184 |             </div>
185 |         ';
186 |         $attribute = '';
187 |         foreach ($columns as $column) {
188 |             $title = Str::title(
189 |                 str_replace('_', ' ', Str::snake(Str::singular($column)))
190 |             );
191 |             $col = sprintf($template, $column, $title, $column, $column);
192 |             $attribute .= $this->indent($col, 3);
193 |         }
194 | 
195 |         return rtrim($attribute);
196 |     }
197 | 
198 |     public function getEditForm(): string
199 |     {
200 |         $columns = Schema::getColumnListing($this->tableName);
201 |         $columns = collect($columns)
202 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
203 |             ->all();
204 | 
205 |         $template = '
206 |             <div>
207 |               <InputLabel for="%s" value="%s" />
208 | 
209 |               <TextInput
210 |                 id="%s"
211 |                 v-model="form.%s"
212 |                 type="text"
213 |                 class="mt-1 block w-full"
214 |                 autocomplete="%s"
215 |               />
216 | 
217 |               <InputError :message="form.errors.%s" class="mt-2" />
218 |             </div>
219 |         ';
220 |         $attribute = '';
221 |         foreach ($columns as $column) {
222 |             $title = Str::title(
223 |                 str_replace('_', ' ', Str::snake(Str::singular($column)))
224 |             );
225 |             $col = sprintf($template, $column, $title, $column, $column, $column, $column);
226 |             $attribute .= $this->indent($col, 3);
227 |         }
228 | 
229 |         return rtrim($attribute);
230 |     }
231 | 
232 |     public function getUseFormEdit(): string
233 |     {
234 |         $columns = Schema::getColumnListing($this->tableName);
235 |         $columns = collect($columns)
236 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
237 |             ->all();
238 | 
239 |         $template = '
240 |             %s: props.camelDummy.%s,
241 |         ';
242 |         $attribute = '';
243 |         foreach ($columns as $column) {
244 |             $col = sprintf($template, $column, $column);
245 |             $attribute .= $this->indent($col);
246 |         }
247 | 
248 |         return rtrim($attribute);
249 |     }
250 | 
251 |     public function getUseFormCreate(): string
252 |     {
253 |         $columns = Schema::getColumnListing($this->tableName);
254 |         $columns = collect($columns)
255 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
256 |             ->all();
257 | 
258 |         $template = '
259 |             %s: "",
260 |         ';
261 |         $attribute = '';
262 |         foreach ($columns as $column) {
263 |             $col = sprintf($template, $column, $column);
264 |             $attribute .= $this->indent($col);
265 |         }
266 | 
267 |         return rtrim($attribute);
268 |     }
269 | 
270 |     public function getCreateForm(): string
271 |     {
272 |         $columns = Schema::getColumnListing($this->tableName);
273 |         $columns = collect($columns)
274 |             ->filter(fn ($item) => ! in_array($item, ['id', 'created_at', 'updated_at']))
275 |             ->all();
276 | 
277 |         $template = '
278 |             <div>
279 |               <InputLabel for="%s" value="%s" />
280 | 
281 |               <TextInput
282 |                 id="%s"
283 |                 v-model="form.%s"
284 |                 type="text"
285 |                 class="mt-1 block w-full"
286 |                 autocomplete="%s"
287 |               />
288 | 
289 |               <InputError :message="form.errors.%s" class="mt-2" />
290 |             </div>
291 |         ';
292 |         $attribute = '';
293 |         foreach ($columns as $column) {
294 |             $title = Str::title(
295 |                 str_replace('_', ' ', Str::snake(Str::singular($column)))
296 |             );
297 |             $col = sprintf($template, $column, $title, $column, $column, $column, $column);
298 |             $attribute .= $this->indent($col, 3);
299 |         }
300 | 
301 |         return rtrim($attribute);
302 |     }
303 | }
304 | 


--------------------------------------------------------------------------------
/src/Generator/ControllerGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class ControllerGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     protected string $stubFilename = 'controller.stub';
20 | 
21 |     public function __construct(public Filesystem $filesystem, public string $tableName)
22 |     {
23 |         $this->path     = base_path(config('laravel-vien.generator.controller.path'));
24 |         $this->filename = $this->generateFilename();
25 |     }
26 | 
27 |     private function generateFilename(): string
28 |     {
29 |         return Str::studly(Str::plural($this->tableName)) . 'Controller.php';
30 |     }
31 | 
32 |     public function getContent(): string
33 |     {
34 |         return $this->manipulateContent(
35 |             (string) file_get_contents($this->getStubPath($this->stubFilename))
36 |         );
37 |     }
38 | 
39 |     private function manipulateContent(string $content): string
40 |     {
41 |         $content = str_replace(
42 |             [
43 |                 'ControllerNamespace',
44 |                 'ModelNamespace',
45 |                 '//Model Attributes',
46 |                 '//Builder Attributes',
47 |                 '//Model Columns',
48 |                 'implode_select',
49 |                 '//Query Filters',
50 |                 '//Implode Filters',
51 |                 '//Validation Rules',
52 |             ],
53 |             [
54 |                 config('laravel-vien.generator.controller.namespace'),
55 |                 config('laravel-vien.generator.model.namespace'),
56 |                 $this->getModelAttribute(),
57 |                 $this->getModelAttribute(true),
58 |                 $this->getModelColumns(),
59 |                 $this->getImplodeSelect(),
60 |                 $this->getQueryFilters(),
61 |                 $this->getImplodeFilters(),
62 |                 $this->getValidationRules(),
63 |             ],
64 |             $content
65 |         );
66 | 
67 |         return $this->replaceKeywords($content);
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/Generator/CreateGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class CreateGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     protected string $stubFilename = 'create.stub';
20 | 
21 |     public function __construct(public Filesystem $filesystem, public string $tableName)
22 |     {
23 |         $this->path     = base_path(config('laravel-vien.generator.view.path')) . Str::studly(Str::singular($this->tableName));
24 |         $this->filename = $this->generateFilename();
25 |     }
26 | 
27 |     private function generateFilename(): string
28 |     {
29 |         return 'Create.vue';
30 |     }
31 | 
32 |     public function getContent(): string
33 |     {
34 |         return $this->manipulateContent(
35 |             (string) file_get_contents($this->getStubPath($this->stubFilename))
36 |         );
37 |     }
38 | 
39 |     private function manipulateContent(string $content): string
40 |     {
41 |         $content = str_replace(
42 |             [
43 |                 '//Create Form',
44 |                 '//UseForm Create',
45 |             ],
46 |             [
47 |                 $this->getCreateForm(),
48 |                 $this->getUseFormCreate(),
49 |             ],
50 |             $content
51 |         );
52 | 
53 |         return $this->replaceKeywords($content);
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/Generator/EditGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class EditGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     protected string $stubFilename = 'edit.stub';
20 | 
21 |     public function __construct(public Filesystem $filesystem, public string $tableName)
22 |     {
23 |         $this->path     = base_path(config('laravel-vien.generator.view.path')) . Str::studly(Str::singular($this->tableName));
24 |         $this->filename = $this->generateFilename();
25 |     }
26 | 
27 |     private function generateFilename(): string
28 |     {
29 |         return 'Edit.vue';
30 |     }
31 | 
32 |     public function getContent(): string
33 |     {
34 |         return $this->manipulateContent(
35 |             (string) file_get_contents($this->getStubPath($this->stubFilename))
36 |         );
37 |     }
38 | 
39 |     private function manipulateContent(string $content): string
40 |     {
41 |         $content = str_replace(
42 |             [
43 |                 '//Edit Form',
44 |                 '//UseForm Edit',
45 |             ],
46 |             [
47 |                 $this->getEditForm(),
48 |                 $this->getUseFormEdit(),
49 |             ],
50 |             $content
51 |         );
52 | 
53 |         return $this->replaceKeywords($content);
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/Generator/IndexGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class IndexGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     protected string $stubFilename = 'index.stub';
20 | 
21 |     public function __construct(public Filesystem $filesystem, public string $tableName)
22 |     {
23 |         $this->path     = base_path(config('laravel-vien.generator.view.path')) . Str::studly(Str::singular($this->tableName));
24 |         $this->filename = $this->generateFilename();
25 |     }
26 | 
27 |     private function generateFilename(): string
28 |     {
29 |         return 'Index.vue';
30 |     }
31 | 
32 |     public function getContent(): string
33 |     {
34 |         return $this->manipulateContent(
35 |             (string) file_get_contents($this->getStubPath($this->stubFilename))
36 |         );
37 |     }
38 | 
39 |     private function manipulateContent(string $content): string
40 |     {
41 |         $content = str_replace(
42 |             [
43 |                 '//Index Filter',
44 |             ],
45 |             [
46 |                 $this->getIndexFilter(),
47 |             ],
48 |             $content
49 |         );
50 | 
51 |         return $this->replaceKeywords($content);
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/Generator/RouteGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class RouteGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     public function __construct(public Filesystem $filesystem, public string $tableName)
20 |     {
21 |         $this->path     = base_path(dirname(config('laravel-vien.generator.route_path')));
22 |         $this->filename = $this->generateFilename();
23 |     }
24 | 
25 |     private function generateFilename(): string
26 |     {
27 |         return basename(config('laravel-vien.generator.route_path'));
28 |     }
29 | 
30 |     public function getContent(): string
31 |     {
32 |         return $this->manipulateContent(
33 |             $this->filesystem->get($this->getFullPath())
34 |         );
35 |     }
36 | 
37 |     private function manipulateContent(string $content): string
38 |     {
39 |         $import = "use App\\Http\\Controllers\\{$this->getStudlyDummies()}Controller;";
40 |         if (! Str::contains($content, $import)) {
41 |             $search  = '<?php';
42 |             $replace = PHP_EOL . PHP_EOL . $import;
43 |             $content = str_replace($search, $search . $replace, $content);
44 |         }
45 | 
46 |         $resource   = "Route::resource('{$this->getSnakeDummies()}', {$this->getStudlyDummies()}Controller::class);";
47 |         $bulkDelete = "Route::delete('{$this->getSnakeDummies()}/bulk-delete',[{$this->getStudlyDummies()}Controller::class,'bulkDestroy'])->name('{$this->getSnakeDummies()}.bulk-delete');";
48 |         if (! Str::contains($content, $bulkDelete)) {
49 |             $content .= PHP_EOL . $bulkDelete;
50 |         }
51 | 
52 |         if (! Str::contains($content, $resource)) {
53 |             $content .= PHP_EOL . $resource;
54 |         }
55 | 
56 |         return $content;
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/Generator/ShowGenerator.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien\Generator;
 4 | 
 5 | use Illuminate\Filesystem\Filesystem;
 6 | use Illuminate\Support\Str;
 7 | use Jhonoryza\Vien\Concern\FileGenerator;
 8 | use Jhonoryza\Vien\Concern\ReplaceResourceKeywords;
 9 | 
10 | class ShowGenerator implements FileGenerator
11 | {
12 |     use CommonGeneratorTrait;
13 |     use ReplaceResourceKeywords;
14 | 
15 |     protected string $filename;
16 | 
17 |     protected string $path;
18 | 
19 |     protected string $stubFilename = 'show.stub';
20 | 
21 |     public function __construct(public Filesystem $filesystem, public string $tableName)
22 |     {
23 |         $this->path     = base_path(config('laravel-vien.generator.view.path')) . Str::studly(Str::singular($this->tableName));
24 |         $this->filename = $this->generateFilename();
25 |     }
26 | 
27 |     private function generateFilename(): string
28 |     {
29 |         return 'Show.vue';
30 |     }
31 | 
32 |     public function getContent(): string
33 |     {
34 |         return $this->manipulateContent(
35 |             (string) file_get_contents($this->getStubPath($this->stubFilename))
36 |         );
37 |     }
38 | 
39 |     private function manipulateContent(string $content): string
40 |     {
41 |         $content = str_replace(
42 |             [
43 |                 '//View Form',
44 |             ],
45 |             [
46 |                 $this->getViewForm(),
47 |             ],
48 |             $content
49 |         );
50 | 
51 |         return $this->replaceKeywords($content);
52 |     }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/Generator/Stubs/controller.stub:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace ControllerNamespace;
  4 | 
  5 | use Illuminate\Database\Eloquent\Collection;
  6 | use Illuminate\Database\Query\Builder;
  7 | use Illuminate\Http\Request;
  8 | use Illuminate\Support\Facades\DB;
  9 | use Illuminate\Support\Facades\Session;
 10 | use Inertia\Inertia;
 11 | use Inertia\Response;
 12 | use Illuminate\Http\RedirectResponse;
 13 | use ModelNamespace\StudlyDummy;
 14 | 
 15 | class StudlyDummiesController extends Controller
 16 | {
 17 |     protected array $pageOptions = [5, 10, 25, 50, 100];
 18 | 
 19 |     public function index(): Response
 20 |     {
 21 |         $limit = request('limit', 10);
 22 |         $page  = request('page', 1);
 23 | 
 24 |         $builder = DB::table('snake_dummies')
 25 |             ->select('id', implode_select 'created_at', 'updated_at')
 26 |             ->when(request('filter.search'), function (Builder $query, $search) {
 27 |                 $query->where(function (Builder $query) use ($search) {
 28 |                     /**
 29 |                      * implement your own search query
 30 |                      * example: $query->where('key', 'like', "%{$search}%");
 31 |                      */
 32 |                     $query;
 33 |                 });
 34 |             })
 35 | //Query Filters
 36 |             ->when(
 37 |                 request('sort'),
 38 |                 fn (Builder $query, $sort) => $query->orderBy($sort[0] == '-' ? ltrim($sort, '-') : $sort, $sort[0] == '-' ? 'desc' : 'asc'),
 39 |                 fn (Builder $query)        => $query->orderBy('id', 'asc'),
 40 |             );
 41 | 
 42 |         /** @var Collection $paginated */
 43 |         $paginated = $builder
 44 |             ->clone()
 45 |             ->paginate(perPage: $limit, page: $page);
 46 |         // ->cursorPaginate(perPage: $limit, cursorName: 'page');
 47 | 
 48 |         $data = $paginated
 49 |             ->through(fn ($camelDummy) => [
 50 | //Builder Attributes
 51 |             ])
 52 |             ->withQueryString();
 53 | 
 54 |         return Inertia::render('StudlyDummy/Index', [
 55 |             'table' => [
 56 |                 'snake_dummies' => $data,
 57 |                 'pageOptions'   => $this->pageOptions,
 58 |                 'limit'         => $data->perPage(),
 59 |                 'allIds'        => method_exists($paginated, 'total') ? $builder->select('id')->pluck('id')->toArray() : [],
 60 |                 'columns'       => [
 61 | //Model Columns
 62 |                 ],
 63 |                 'filters'     => [
 64 | //Implode Filters
 65 |                     'search'
 66 |                 ],
 67 |                 'defaultSort' => '-created_at',
 68 |             ],
 69 |         ]);
 70 |     }
 71 | 
 72 |     public function create(): Response
 73 |     {
 74 |         return Inertia::render('StudlyDummy/Create');
 75 |     }
 76 | 
 77 |     public function store(Request $request): RedirectResponse
 78 |     {
 79 |         $data = $request->validate([
 80 | //Validation Rules
 81 |                 ]);
 82 |         $model = StudlyDummy::query()->create($data);
 83 | 
 84 |         Session::flash('message', [
 85 |             'message' => "Create small title dummy {$model->id} success.",
 86 |             'type'    => 'success',
 87 |         ]);
 88 | 
 89 |         if ($request->type == 'create-another') {
 90 |             return redirect()->route('snake_dummies.create');
 91 |         }
 92 | 
 93 |         return redirect()->route('snake_dummies.show', $model->id);
 94 |     }
 95 | 
 96 |     public function show(StudlyDummy $camelDummy): Response
 97 |     {
 98 |         return Inertia::render('StudlyDummy/Show', [
 99 |             'camelDummy' => [
100 | //Model Attributes
101 |             ],
102 |         ]);
103 |     }
104 | 
105 |     public function edit(StudlyDummy $camelDummy): Response
106 |     {
107 |         return Inertia::render('StudlyDummy/Edit', [
108 |             'camelDummy' => [
109 | //Model Attributes
110 |             ],
111 |         ]);
112 |     }
113 | 
114 |     public function update(Request $request, StudlyDummy $camelDummy): RedirectResponse
115 |     {
116 |         $data = $request->validate([
117 | //Validation Rules
118 |                 ]);
119 |         $camelDummy->fill($data)->save();
120 | 
121 |         Session::flash('message', [
122 |             'message' => 'Update small title dummy success.',
123 |             'type'    => 'success',
124 |         ]);
125 | 
126 |         return redirect()->back();
127 |     }
128 | 
129 |     public function destroy(StudlyDummy $camelDummy): RedirectResponse
130 |     {
131 |         $camelDummy->delete();
132 | 
133 |         Session::flash('message', [
134 |             'message' => "delete small title dummy id {$camelDummy->id} success.",
135 |             'type'    => 'success',
136 |         ]);
137 | 
138 |         return redirect()->back();
139 |     }
140 | 
141 |     public function bulkDestroy(Request $request): RedirectResponse
142 |     {
143 |         $request->validate([
144 |             'ids'   => 'required|array',
145 |             'ids.*' => 'required|exists:snake_dummies,id',
146 |         ]);
147 |         StudlyDummy::query()->whereIn('id', $request->ids)->delete();
148 | 
149 |         $idsString = collect($request->ids)->implode(',');
150 |         Session::flash('message', [
151 |             'message' => "Bulk Delete small title dummy id {$idsString} success.",
152 |             'type'    => 'success',
153 |         ]);
154 | 
155 |         return redirect()->back();
156 |     }
157 | }
158 | 


--------------------------------------------------------------------------------
/src/Generator/Stubs/create.stub:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  3 | import Container from "@/Components/Vien/Container.vue";
  4 | import InputError from "@/Components/InputError.vue";
  5 | import InputLabel from "@/Components/InputLabel.vue";
  6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
  7 | import TextInput from "@/Components/TextInput.vue";
  8 | import { useForm } from "@inertiajs/vue3";
  9 | import { ref } from "vue";
 10 | import { IconChevronRight } from "@tabler/icons-vue";
 11 | import { Head } from "@inertiajs/vue3";
 12 | import SecondaryButton from "@/Components/SecondaryButton.vue";
 13 | 
 14 | const form = useForm({
 15 | //UseForm Create
 16 | });
 17 | 
 18 | const create = () => {
 19 |   form
 20 |     .transform((data) => ({
 21 |         ...data,
 22 |         type: "create",
 23 |     }))
 24 |     .post(route("snake_dummies.store"), {
 25 |       preserveState: true,
 26 |       onSuccess: () => form.reset(),
 27 |     });
 28 | };
 29 | 
 30 | const createAnother = () => {
 31 |   form
 32 |     .transform((data) => ({
 33 |         ...data,
 34 |         type: "create-another",
 35 |     }))
 36 |     .post(route("snake_dummies.store"), {
 37 |       preserveState: true,
 38 |       onSuccess: () => form.reset(),
 39 |     });
 40 | };
 41 | 
 42 | const back = () => {
 43 |   window.history.back();
 44 | };
 45 | 
 46 | </script>
 47 | <template>
 48 |   <Head title="Create New Big Title Dummy" />
 49 | 
 50 |   <AuthenticatedLayout>
 51 |     <Container>
 52 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 53 |         <section class="max-w-xl">
 54 |           <header>
 55 |             <div
 56 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 57 |             >
 58 |               <h2
 59 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 60 |                 @click="$inertia.get(route('dashboard'))"
 61 |               >
 62 |                 Home
 63 |               </h2>
 64 |               <IconChevronRight class="size-4" />
 65 |               <h2
 66 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 67 |                 @click="$inertia.get(route('snake_dummies.index'))"
 68 |               >
 69 |                 Big Title Dummies
 70 |               </h2>
 71 |               <IconChevronRight class="size-4" />
 72 |               <h2>New Big Title Dummy</h2>
 73 |             </div>
 74 |           </header>
 75 | 
 76 |           <form @submit.prevent="" class="mt-6 space-y-6">
 77 | //Create Form
 78 |             <div class="flex items-center gap-4">
 79 |               <PrimaryButton @click="create" :disabled="form.processing">Save</PrimaryButton>
 80 | 
 81 |               <Transition
 82 |                 enter-active-class="transition ease-in-out"
 83 |                 enter-from-class="opacity-0"
 84 |                 leave-active-class="transition ease-in-out"
 85 |                 leave-to-class="opacity-0"
 86 |               >
 87 |                 <p
 88 |                   v-if="form.recentlySuccessful"
 89 |                   class="text-sm text-gray-600 dark:text-gray-400"
 90 |                 >
 91 |                   Saved.
 92 |                 </p>
 93 |               </Transition>
 94 |               <PrimaryButton @click="createAnother" :disabled="form.processing">
 95 |                 Save & Create another
 96 |               </PrimaryButton>
 97 |               <SecondaryButton @click="back" :disabled="form.processing">
 98 |                 Back
 99 |               </SecondaryButton>
100 |             </div>
101 |           </form>
102 |         </section>
103 |       </div>
104 |     </Container>
105 |   </AuthenticatedLayout>
106 | </template>
107 | 


--------------------------------------------------------------------------------
/src/Generator/Stubs/edit.stub:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 3 | import Container from "@/Components/Vien/Container.vue";
 4 | import InputError from "@/Components/InputError.vue";
 5 | import InputLabel from "@/Components/InputLabel.vue";
 6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
 7 | import TextInput from "@/Components/TextInput.vue";
 8 | import { useForm } from "@inertiajs/vue3";
 9 | import { ref } from "vue";
10 | import { IconChevronRight } from "@tabler/icons-vue";
11 | import { Head } from "@inertiajs/vue3";
12 | import SecondaryButton from "@/Components/SecondaryButton.vue";
13 | 
14 | const props = defineProps({
15 |   camelDummy: {
16 |     type: Object,
17 |   },
18 | });
19 | 
20 | const form = useForm({
21 | //UseForm Edit
22 | });
23 | 
24 | const update = () => {
25 |   form.patch(route("snake_dummies.update", props.camelDummy.id), {
26 |     preserveState: true,
27 |     onSuccess: () => form.reset(),
28 |   });
29 | };
30 | 
31 | const back = () => {
32 |   window.history.back();
33 | };
34 | 
35 | </script>
36 | <template>
37 |   <Head title="Edit Big Title Dummy" />
38 | 
39 |   <AuthenticatedLayout>
40 |     <Container>
41 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
42 |         <section class="max-w-xl">
43 |           <header>
44 |             <div
45 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
46 |             >
47 |               <h2
48 |                 class="hover:text-zinc-900 hover:cursor-pointer"
49 |                 @click="$inertia.get(route('dashboard'))"
50 |               >
51 |                 Home
52 |               </h2>
53 |               <IconChevronRight class="size-4" />
54 |               <h2
55 |                 class="hover:text-zinc-900 hover:cursor-pointer"
56 |                 @click="$inertia.get(route('snake_dummies.index'))"
57 |               >
58 |                 Big Title Dummies
59 |               </h2>
60 |               <IconChevronRight class="size-4" />
61 |               <h2>Big Title Dummy {{ camelDummy.id }}</h2>
62 |             </div>
63 |           </header>
64 | 
65 |           <form @submit.prevent="" class="mt-6 space-y-6">
66 | //Edit Form
67 |             <div class="flex items-center gap-4">
68 |               <PrimaryButton @click="update" :disabled="form.processing">Save</PrimaryButton>
69 | 
70 |               <Transition
71 |                 enter-active-class="transition ease-in-out"
72 |                 enter-from-class="opacity-0"
73 |                 leave-active-class="transition ease-in-out"
74 |                 leave-to-class="opacity-0"
75 |               >
76 |                 <p
77 |                   v-if="form.recentlySuccessful"
78 |                   class="text-sm text-gray-600 dark:text-gray-400"
79 |                 >
80 |                   Saved.
81 |                 </p>
82 |               </Transition>
83 |               <SecondaryButton @click="back" :disabled="form.processing">
84 |                 Back
85 |               </SecondaryButton>
86 |             </div>
87 |           </form>
88 |         </section>
89 |       </div>
90 |     </Container>
91 |   </AuthenticatedLayout>
92 | </template>
93 | 


--------------------------------------------------------------------------------
/src/Generator/Stubs/index.stub:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import Table from "@/Components/Vien/Table.vue";
  3 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  4 | import { Head } from "@inertiajs/vue3";
  5 | import {
  6 |   IconTrash,
  7 |   IconEdit,
  8 |   IconFilePlus,
  9 |   IconEye,
 10 |   IconChevronRight,
 11 | } from "@tabler/icons-vue";
 12 | import InputText from "@/Components/Vien/InputText.vue";
 13 | import Container from "@/Components/Vien/Container.vue";
 14 | 
 15 | const props = defineProps({
 16 |   table: {
 17 |     type: Object,
 18 |   },
 19 | });
 20 | </script>
 21 | 
 22 | <template>
 23 |   <Head title="List Big Title Dummy" />
 24 | 
 25 |   <AuthenticatedLayout>
 26 |     <Container>
 27 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 28 |         <section class="max-w-screen-xl">
 29 |           <header>
 30 |             <div
 31 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 32 |             >
 33 |               <h2
 34 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 35 |                 @click="$inertia.get(route('dashboard'))"
 36 |               >
 37 |                 Home
 38 |               </h2>
 39 |               <IconChevronRight class="size-4" />
 40 |               <h2
 41 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 42 |                 @click="$inertia.get(route('snake_dummies.index'))"
 43 |               >
 44 |                 Big Title Dummies
 45 |               </h2>
 46 |             </div>
 47 |           </header>
 48 |           <Table
 49 |             :items="table.snake_dummies"
 50 |             :page-options="table.pageOptions"
 51 |             :limit="table.limit"
 52 |             :all-ids="table.allIds"
 53 |             :columns="table.columns"
 54 |             :filters="table.filters"
 55 |             :default-sort="table.defaultSort"
 56 |             module="snake_dummies"
 57 |             title="Big Title Dummies Table"
 58 |           >
 59 |             <!-- bulk action slot -->
 60 |             <template
 61 |               #bulkaction="{ selectedRows, confirmDelete, route, module }"
 62 |             >
 63 |               <button
 64 |                 type="button"
 65 |                 class="text-sm hover:bg-slate-100 dark:hover:bg-gray-700 dark:text-white rounded-lg flex gap-2 justify-start items-center p-2 w-full"
 66 |                 @click="
 67 |                   () => {
 68 |                     const ids = { ids: selectedRows };
 69 |                     confirmDelete(
 70 |                       route(`${module}.bulk-delete`, ids),
 71 |                       `Delete item id: ${selectedRows}`,
 72 |                     );
 73 |                   }
 74 |                 "
 75 |               >
 76 |                 <IconTrash class="size-4" />
 77 |                 <span>Bulk Delete</span>
 78 |               </button>
 79 |             </template>
 80 |             <!-- end bulk action slot -->
 81 | 
 82 |             <!-- more action slot -->
 83 |             <template #moreaction> </template>
 84 |             <!-- end more action slot -->
 85 | 
 86 |             <!-- create action slot -->
 87 |             <template #createaction>
 88 |               <!-- create record -->
 89 |               <button
 90 |                 type="button"
 91 |                 class="flex items-center hover:cursor-pointer text-gray-600 hover:text-gray-400 dark:hover:text-gray-300 dark:text-gray-400"
 92 |                 @click="$inertia.get(route(`snake_dummies.create`))"
 93 |               >
 94 |                 <IconFilePlus class="size-6" />
 95 |                 <span>New</span>
 96 |               </button>
 97 |               <!-- end create record -->
 98 |             </template>
 99 |             <!-- end create action slot -->
100 | 
101 |             <!-- row action slot -->
102 |             <template #rowaction="{ itemId, confirmDelete, route, module }">
103 |               <!-- view item -->
104 |               <div class="inline-block mr-2">
105 |                 <button
106 |                   type="button"
107 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-slate-400"
108 |                   @click="$inertia.visit(route(`${module}.show`, itemId))"
109 |                 >
110 |                   <IconEye class="size-4" />
111 |                   View
112 |                 </button>
113 |               </div>
114 |               <!-- edit item -->
115 |               <div class="inline-block mr-2">
116 |                 <button
117 |                   type="button"
118 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-yellow-400"
119 |                   @click="$inertia.visit(route(`${module}.edit`, itemId))"
120 |                 >
121 |                   <IconEdit class="size-4" />
122 |                   Edit
123 |                 </button>
124 |               </div>
125 | 
126 |               <!-- delete item -->
127 |               <div class="inline-block mr-2">
128 |                 <button
129 |                   type="button"
130 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-red-400"
131 |                   @click="
132 |                     confirmDelete(
133 |                       route(`${module}.destroy`, itemId),
134 |                       `Delete item id ${itemId}`,
135 |                     )
136 |                   "
137 |                 >
138 |                   <IconTrash class="size-4" />
139 |                   Delete
140 |                 </button>
141 |               </div>
142 |             </template>
143 |             <!-- end row action slot -->
144 | 
145 |             <!-- filter slot -->
146 |             <template #filter="{ filter }">
147 | //Index Filter
148 |             </template>
149 |             <!-- end filter slot -->
150 |           </Table>
151 |         </section>
152 |       </div>
153 |     </Container>
154 |   </AuthenticatedLayout>
155 | </template>
156 | 


--------------------------------------------------------------------------------
/src/Generator/Stubs/show.stub:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 3 | import Container from "@/Components/Vien/Container.vue";
 4 | import InputLabel from "@/Components/InputLabel.vue";
 5 | import TextInput from "@/Components/TextInput.vue";
 6 | import { IconChevronRight } from "@tabler/icons-vue";
 7 | import { Head } from "@inertiajs/vue3";
 8 | import PrimaryButton from "@/Components/PrimaryButton.vue";
 9 | import SecondaryButton from "@/Components/SecondaryButton.vue";
10 | 
11 | const props = defineProps({
12 |   camelDummy: {
13 |     type: Object,
14 |   },
15 | });
16 | 
17 | const back = () => {
18 |   window.history.back();
19 | };
20 | 
21 | </script>
22 | <template>
23 |   <Head title="Big Title Dummy Detail" />
24 | 
25 |   <AuthenticatedLayout>
26 |     <Container>
27 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
28 |         <section class="max-w-xl">
29 |           <header>
30 |             <div
31 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
32 |             >
33 |               <h2
34 |                 class="hover:text-zinc-900 hover:cursor-pointer"
35 |                 @click="$inertia.get(route('dashboard'))"
36 |               >
37 |                 Home
38 |               </h2>
39 |               <IconChevronRight class="size-4" />
40 |               <h2
41 |                 class="hover:text-zinc-900 hover:cursor-pointer"
42 |                 @click="$inertia.get(route('snake_dummies.index'))"
43 |               >
44 |                 Big Title Dummies
45 |               </h2>
46 |               <IconChevronRight class="size-4" />
47 |               <h2>Big Title Dummy {{ camelDummy.id }}</h2>
48 |             </div>
49 |           </header>
50 | 
51 |           <div class="mt-6 space-y-6">
52 | //View Form
53 |             <div class="flex items-center gap-4">
54 |               <PrimaryButton @click="$inertia.get(route('snake_dummies.edit', camelDummy.id))"
55 |                 >Edit
56 |               </PrimaryButton>
57 |               <SecondaryButton @click="back"> Back </SecondaryButton>
58 |             </div>
59 |           </div>
60 |         </section>
61 |       </div>
62 |     </Container>
63 |   </AuthenticatedLayout>
64 | </template>
65 | 


--------------------------------------------------------------------------------
/src/VienServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Jhonoryza\Vien;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | use Jhonoryza\Vien\Console\GeneratorCommand;
 7 | use Jhonoryza\Vien\Console\InstallCommand;
 8 | use Jhonoryza\Vien\Console\UpdateCommand;
 9 | 
10 | class VienServiceProvider extends ServiceProvider
11 | {
12 |     public function register(): void
13 |     {
14 |         $this->mergeConfigFrom(__DIR__ . '/../config/laravel-vien.php', 'laravel-vien');
15 |     }
16 | 
17 |     public function boot(): void
18 |     {
19 |         if (! $this->app->runningInConsole()) {
20 |             return;
21 |         }
22 | 
23 |         $this->publishes([
24 |             __DIR__ . '/../config/laravel-vien.php' => config_path('laravel-vien.php'),
25 |         ], 'vien-config');
26 | 
27 |         $this->publishes([
28 |             __DIR__ . '/Generators/Stubs' => base_path('stubs/vien_generator'),
29 |         ], 'vien-stubs');
30 | 
31 |         $this->commands([
32 |             InstallCommand::class,
33 |             GeneratorCommand::class,
34 |             UpdateCommand::class,
35 |         ]);
36 |     }
37 | 
38 |     public function provides(): array
39 |     {
40 |         return [
41 |             InstallCommand::class,
42 |             GeneratorCommand::class,
43 |             UpdateCommand::class,
44 |         ];
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Controllers/SettingController.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace App\Http\Controllers;
  4 | 
  5 | use App\Models\Setting;
  6 | use Illuminate\Database\Eloquent\Collection;
  7 | use Illuminate\Database\Query\Builder;
  8 | use Illuminate\Http\Request;
  9 | use Illuminate\Support\Facades\DB;
 10 | use Inertia\Inertia;
 11 | 
 12 | class SettingController extends Controller
 13 | {
 14 |     protected array $pageOptions = [5, 10, 25, 50, 100];
 15 | 
 16 |     public function index()
 17 |     {
 18 |         $limit = request('limit', 10);
 19 |         $page  = request('page', 1);
 20 | 
 21 |         $builder = DB::table('settings')
 22 |             ->select('id', 'key', 'value', 'created_at')
 23 |             ->when(request('filter.search'), function (Builder $query, $search) {
 24 |                 $query->where(function (Builder $query) use ($search) {
 25 |                     $query->where('key', 'like', "%{$search}%")
 26 |                         ->orWhere('value', 'like', "%{$search}%");
 27 |                 });
 28 |             })
 29 |             ->when(
 30 |                 request('filter.key'),
 31 |                 fn (Builder $query, $filter) => $query->where('key', 'like', "%{$filter}%")
 32 |             )
 33 |             ->when(
 34 |                 request('filter.value'),
 35 |                 fn (Builder $query, $filter) => $query->where('value', $filter)
 36 |             )
 37 |             ->when(
 38 |                 request('sort'),
 39 |                 fn (Builder $query, $sort) => $query->orderBy($sort[0] == '-' ? ltrim($sort, '-') : $sort, $sort[0] == '-' ? 'desc' : 'asc'),
 40 |                 fn (Builder $query)        => $query->orderBy('id', 'asc'),
 41 |             );
 42 | 
 43 |         /** @var Collection $paginated */
 44 |         $paginated = $builder
 45 |             ->clone()
 46 |             ->paginate(perPage: $limit, page: $page);
 47 |         // ->cursorPaginate(perPage: $limit, cursorName: 'page');
 48 | 
 49 |         $data = $paginated
 50 |             ->through(fn ($item) => [
 51 |                 'id'         => $item->id,
 52 |                 'key'        => $item->key,
 53 |                 'value'      => $item->value,
 54 |                 'created_at' => $item->created_at,
 55 |             ])
 56 |             ->withQueryString();
 57 | 
 58 |         return Inertia::render('Setting/Index', [
 59 |             'table' => [
 60 |                 'settings'    => $data,
 61 |                 'pageOptions' => $this->pageOptions,
 62 |                 'limit'       => $data->perPage(),
 63 |                 'allIds'      => method_exists($paginated, 'total') ? $builder->select('id')->pluck('id')->toArray() : [],
 64 |                 'columns'     => [
 65 |                     ['key' => 'id', 'label' => 'ID', 'visible' => true, 'sortable' => true],
 66 |                     ['key' => 'key', 'label' => 'Key', 'visible' => true, 'sortable' => true],
 67 |                     ['key' => 'value', 'label' => 'Value', 'visible' => true, 'sortable' => true],
 68 |                     ['key' => 'created_at', 'label' => 'Created At', 'visible' => true, 'sortable' => true],
 69 |                 ],
 70 |                 'filters'     => ['key', 'value', 'search'],
 71 |                 'defaultSort' => '-created_at',
 72 |             ],
 73 |         ]);
 74 |     }
 75 | 
 76 |     /**
 77 |      * Show the form for creating a new resource.
 78 |      */
 79 |     public function create()
 80 |     {
 81 |         return Inertia::render('Setting/Create');
 82 |     }
 83 | 
 84 |     /**
 85 |      * Store a newly created resource in storage.
 86 |      */
 87 |     public function store(Request $request)
 88 |     {
 89 |         $data = $request->validate([
 90 |             'key'   => 'required|string|max:255|unique:settings',
 91 |             'value' => 'required|string|max:255',
 92 |         ]);
 93 |         $model = Setting::query()->create($data);
 94 | 
 95 |         session()->flash('message', [
 96 |             'message' => "Buat setting {$model->id} berhasil.",
 97 |             'type'    => 'success',
 98 |         ]);
 99 | 
100 |         return redirect()->route('settings.show', $model->id);
101 |     }
102 | 
103 |     /**
104 |      * Display the specified resource.
105 |      */
106 |     public function show(Setting $setting)
107 |     {
108 |         return Inertia::render('Setting/Show', [
109 |             'setting' => [
110 |                 'id'         => $setting->id,
111 |                 'key'        => $setting->key,
112 |                 'value'      => $setting->value,
113 |                 'created_at' => $setting->created_at->format('d/m/Y H:i'),
114 |             ],
115 |         ]);
116 |     }
117 | 
118 |     /**
119 |      * Show the form for editing the specified resource.
120 |      */
121 |     public function edit(Setting $setting)
122 |     {
123 |         return Inertia::render('Setting/Edit', [
124 |             'setting' => [
125 |                 'id'         => $setting->id,
126 |                 'key'        => $setting->key,
127 |                 'value'      => $setting->value,
128 |                 'created_at' => $setting->created_at->format('d/m/Y H:i'),
129 |             ],
130 |         ]);
131 |     }
132 | 
133 |     /**
134 |      * Update the specified resource in storage.
135 |      */
136 |     public function update(Request $request, Setting $setting)
137 |     {
138 |         $data = $request->validate([
139 |             'key'   => 'required|string|max:255|unique:settings,id,' . $setting->id,
140 |             'value' => 'required|string|max:255',
141 |         ]);
142 | 
143 |         $setting->fill($data)->save();
144 | 
145 |         session()->flash('message', [
146 |             'message' => 'Update setting berhasil.',
147 |             'type'    => 'success',
148 |         ]);
149 | 
150 |         return redirect()->back();
151 |     }
152 | 
153 |     /**
154 |      * Remove the specified resource from storage.
155 |      */
156 |     public function destroy(Setting $setting)
157 |     {
158 |         $setting->delete();
159 | 
160 |         session()->flash('message', [
161 |             'message' => "Setting id {$setting->id} berhasil dihapus.",
162 |             'type'    => 'success',
163 |         ]);
164 | 
165 |         return redirect()->back();
166 |     }
167 | 
168 |     public function bulkDestroy(Request $request)
169 |     {
170 |         $request->validate([
171 |             'ids'   => 'required|array',
172 |             'ids.*' => 'required|exists:settings,id',
173 |         ]);
174 |         Setting::query()->whereIn('id', $request->ids)->delete();
175 | 
176 |         $idsString = collect($request->ids)->implode(',');
177 |         session()->flash('message', [
178 |             'message' => "Setting id {$idsString} berhasil dihapus.",
179 |             'type'    => 'success',
180 |         ]);
181 | 
182 |         return redirect()->back();
183 |     }
184 | }
185 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Controllers/UserController.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace App\Http\Controllers;
  4 | 
  5 | use App\Models\User;
  6 | use Illuminate\Contracts\Database\Query\Builder;
  7 | use Illuminate\Database\Eloquent\Collection;
  8 | use Illuminate\Http\Request;
  9 | use Illuminate\Support\Facades\DB;
 10 | use Inertia\Inertia;
 11 | 
 12 | class UserController extends Controller
 13 | {
 14 |     protected array $pageOptions = [5, 10, 25, 50, 100];
 15 | 
 16 |     public function index()
 17 |     {
 18 |         $limit   = request('limit', 10);
 19 |         $page    = request('page', 1);
 20 |         $builder = DB::table('users')
 21 |             ->select('id', 'name', 'email', 'created_at')
 22 |             ->when(request('filter.search'), function (Builder $query, $search) {
 23 |                 $query->where(function (Builder $query) use ($search) {
 24 |                     $query->where('name', 'like', "%{$search}%")
 25 |                         ->orWhere('email', 'like', "%{$search}%");
 26 |                 });
 27 |             })
 28 |             ->when(
 29 |                 request('filter.name'),
 30 |                 fn (Builder $query, $name) => $query->where('name', 'like', "%{$name}%")
 31 |             )
 32 |             ->when(
 33 |                 request('filter.email'),
 34 |                 fn (Builder $query, $email) => $query->where('email', $email)
 35 |             )
 36 |             ->when(
 37 |                 request('sort'),
 38 |                 fn (Builder $query, $sort) => $query->orderBy($sort[0] == '-' ? ltrim($sort, '-') : $sort, $sort[0] == '-' ? 'desc' : 'asc'),
 39 |                 fn (Builder $query)        => $query->orderBy('id', 'asc'),
 40 |             );
 41 | 
 42 |         /** @var Collection $paginated */
 43 |         $paginated = $builder
 44 |             ->clone()
 45 |             ->simplePaginate(perPage: $limit, page: $page);
 46 |         // ->cursorPaginate(perPage: $limit, cursorName: 'page');
 47 | 
 48 |         $data = $paginated
 49 |             ->through(fn ($user) => [
 50 |                 'id'         => $user->id,
 51 |                 'name'       => $user->name,
 52 |                 'email'      => $user->email,
 53 |                 'created_at' => $user->created_at,
 54 |             ])
 55 |             ->withQueryString();
 56 | 
 57 |         return Inertia::render('User/Index', [
 58 |             'table' => [
 59 |                 'users'       => $data,
 60 |                 'pageOptions' => $this->pageOptions,
 61 |                 'limit'       => $data->perPage(),
 62 |                 'allIds'      => method_exists($paginated, 'total') ? $builder->select('id')->pluck('id')->toArray() : [],
 63 |                 'columns'     => [
 64 |                     ['key' => 'id', 'label' => 'ID', 'visible' => true, 'sortable' => true],
 65 |                     ['key' => 'name', 'label' => 'Name', 'visible' => true, 'sortable' => true],
 66 |                     ['key' => 'email', 'label' => 'Email', 'visible' => true, 'sortable' => true],
 67 |                     ['key' => 'created_at', 'label' => 'Created At', 'visible' => true, 'sortable' => true],
 68 |                 ],
 69 |                 'filters'     => ['name', 'email', 'search'],
 70 |                 'defaultSort' => '-created_at',
 71 |             ],
 72 |         ]);
 73 |     }
 74 | 
 75 |     /**
 76 |      * Show the form for creating a new resource.
 77 |      */
 78 |     public function create()
 79 |     {
 80 |         return Inertia::render('User/Create');
 81 |     }
 82 | 
 83 |     /**
 84 |      * Store a newly created resource in storage.
 85 |      */
 86 |     public function store(Request $request)
 87 |     {
 88 |         $data = $request->validate([
 89 |             'name'     => 'required|string|max:255',
 90 |             'email'    => 'required|string|email|max:255|unique:users',
 91 |             'password' => 'required|string|min:8|max:255|confirmed',
 92 |         ]);
 93 |         $user = User::query()->create($data);
 94 | 
 95 |         session()->flash('message', [
 96 |             'message' => "Buat user {$user->id} berhasil.",
 97 |             'type'    => 'success',
 98 |         ]);
 99 | 
100 |         return redirect()->route('users.index');
101 |     }
102 | 
103 |     /**
104 |      * Display the specified resource.
105 |      */
106 |     public function show(User $user)
107 |     {
108 |         return Inertia::render('User/Show', [
109 |             'user' => [
110 |                 'id'         => $user->id,
111 |                 'name'       => $user->name,
112 |                 'email'      => $user->email,
113 |                 'created_at' => $user->created_at->format('d/m/Y H:i'),
114 |             ],
115 |         ]);
116 |     }
117 | 
118 |     /**
119 |      * Show the form for editing the specified resource.
120 |      */
121 |     public function edit(User $user)
122 |     {
123 |         return Inertia::render('User/Edit', [
124 |             'user' => [
125 |                 'id'         => $user->id,
126 |                 'name'       => $user->name,
127 |                 'email'      => $user->email,
128 |                 'created_at' => $user->created_at->format('d/m/Y H:i'),
129 |             ],
130 |         ]);
131 |     }
132 | 
133 |     /**
134 |      * Update the specified resource in storage.
135 |      */
136 |     public function update(Request $request, User $user)
137 |     {
138 |         $data = $request->validate([
139 |             'name'     => 'required|string|max:255',
140 |             'email'    => 'required|string|email|max:255|unique:users,id,' . $user->id,
141 |             'password' => 'nullable|string|min:8|max:255|confirmed',
142 |         ]);
143 | 
144 |         if (empty($data['password'])) {
145 |             unset($data['password']);
146 |         } else {
147 |             $data['password'] = bcrypt($data['password']);
148 |         }
149 |         $user->fill($data)->save();
150 | 
151 |         session()->flash('message', [
152 |             'message' => 'Update user berhasil.',
153 |             'type'    => 'success',
154 |         ]);
155 | 
156 |         return redirect()->back();
157 |     }
158 | 
159 |     /**
160 |      * Remove the specified resource from storage.
161 |      */
162 |     public function destroy(User $user)
163 |     {
164 |         $user->delete();
165 | 
166 |         session()->flash('message', [
167 |             'message' => "User id {$user->id} berhasil dihapus.",
168 |             'type'    => 'success',
169 |         ]);
170 | 
171 |         return redirect()->back();
172 |     }
173 | 
174 |     public function bulkDestroy(Request $request)
175 |     {
176 |         $request->validate([
177 |             'ids'   => 'required|array',
178 |             'ids.*' => 'required|exists:users,id',
179 |         ]);
180 |         User::query()->whereIn('id', $request->ids)->delete();
181 | 
182 |         $idsString = collect($request->ids)->implode(',');
183 |         session()->flash('message', [
184 |             'message' => "User id {$idsString} berhasil dihapus.",
185 |             'type'    => 'success',
186 |         ]);
187 | 
188 |         return redirect()->back();
189 |     }
190 | }
191 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Default/AuthenticatedLayout.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from "vue";
  3 | import ApplicationLogo from "@/Components/ApplicationLogo.vue";
  4 | import Dropdown from "@/Components/Dropdown.vue";
  5 | import DropdownLink from "@/Components/DropdownLink.vue";
  6 | import { Link } from "@inertiajs/vue3";
  7 | import ToggleDarkMode from "@/Components/Vien/ToggleDarkMode.vue";
  8 | import AppToast from "@/Components/Vien/AppToast.vue";
  9 | import SideBar from "@/Components/Vien/SideBar.vue";
 10 | 
 11 | const showingNavigationDropdown = ref(false);
 12 | </script>
 13 | 
 14 | <template>
 15 |   <div>
 16 |     <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
 17 |       <nav class="bg-white dark:bg-gray-800 dark:border-gray-700">
 18 |         <!-- Primary Navigation Menu -->
 19 |         <div class="px-2 mx-auto">
 20 |           <div class="flex justify-between h-16">
 21 |             <div class="hidden xl:flex">
 22 |               <!-- Logo -->
 23 |               <div class="shrink-0 flex items-center">
 24 |                 <Link :href="route('dashboard')">
 25 |                   <ApplicationLogo
 26 |                     class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200"
 27 |                   />
 28 |                 </Link>
 29 |               </div>
 30 |             </div>
 31 | 
 32 |             <div class="hidden xl:flex sm:items-center sm:ms-6">
 33 |               <ToggleDarkMode />
 34 | 
 35 |               <!-- Settings Dropdown -->
 36 |               <div class="ms-3 relative">
 37 |                 <Dropdown align="right" width="48">
 38 |                   <template #trigger>
 39 |                     <span class="inline-flex rounded-md">
 40 |                       <button
 41 |                         type="button"
 42 |                         class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
 43 |                       >
 44 |                         {{ $page.props.auth.user.name }}
 45 | 
 46 |                         <svg
 47 |                           class="ms-2 -me-0.5 h-4 w-4"
 48 |                           xmlns="http://www.w3.org/2000/svg"
 49 |                           viewBox="0 0 20 20"
 50 |                           fill="currentColor"
 51 |                         >
 52 |                           <path
 53 |                             fill-rule="evenodd"
 54 |                             d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
 55 |                             clip-rule="evenodd"
 56 |                           />
 57 |                         </svg>
 58 |                       </button>
 59 |                     </span>
 60 |                   </template>
 61 | 
 62 |                   <template #content>
 63 |                     <DropdownLink :href="route('profile.edit')">
 64 |                       Profile
 65 |                     </DropdownLink>
 66 |                     <DropdownLink
 67 |                       :href="route('logout')"
 68 |                       method="post"
 69 |                       as="button"
 70 |                     >
 71 |                       Log Out
 72 |                     </DropdownLink>
 73 |                   </template>
 74 |                 </Dropdown>
 75 |               </div>
 76 |             </div>
 77 | 
 78 |             <!-- Hamburger -->
 79 |             <div class="-me-2 flex items-center xl:hidden">
 80 |               <button
 81 |                 @click="showingNavigationDropdown = !showingNavigationDropdown"
 82 |                 class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
 83 |               >
 84 |                 <svg
 85 |                   class="h-6 w-6"
 86 |                   stroke="currentColor"
 87 |                   fill="none"
 88 |                   viewBox="0 0 24 24"
 89 |                 >
 90 |                   <path
 91 |                     :class="{
 92 |                       hidden: showingNavigationDropdown,
 93 |                       'inline-flex': !showingNavigationDropdown,
 94 |                     }"
 95 |                     stroke-linecap="round"
 96 |                     stroke-linejoin="round"
 97 |                     stroke-width="2"
 98 |                     d="M4 6h16M4 12h16M4 18h16"
 99 |                   />
100 |                   <path
101 |                     :class="{
102 |                       hidden: !showingNavigationDropdown,
103 |                       'inline-flex': showingNavigationDropdown,
104 |                     }"
105 |                     stroke-linecap="round"
106 |                     stroke-linejoin="round"
107 |                     stroke-width="2"
108 |                     d="M6 18L18 6M6 6l12 12"
109 |                   />
110 |                 </svg>
111 |               </button>
112 |             </div>
113 |           </div>
114 |         </div>
115 | 
116 |         <!-- Responsive Navigation Menu -->
117 |         <div
118 |           :class="{
119 |             block: showingNavigationDropdown,
120 |             hidden: !showingNavigationDropdown,
121 |           }"
122 |           class="xl:hidden relative"
123 |         >
124 |           <SideBar />
125 |         </div>
126 |       </nav>
127 | 
128 |       <AppToast />
129 |       <!-- Page Content -->
130 |       <div class="grid grid-cols-12">
131 |         <div class="col-span-2 relative hidden xl:block">
132 |           <SideBar />
133 |         </div>
134 |         <div class="col-span-12 xl:col-span-10">
135 |           <main>
136 |             <slot />
137 |           </main>
138 |         </div>
139 |       </div>
140 |     </div>
141 |   </div>
142 | </template>
143 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Default/app.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
2 | 
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Default/app.js:
--------------------------------------------------------------------------------
 1 | import './bootstrap';
 2 | import '../css/app.css';
 3 | 
 4 | import { createApp, h } from 'vue';
 5 | import { createInertiaApp } from '@inertiajs/vue3';
 6 | import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 7 | import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 8 | import VueClickAway from "vue3-click-away";
 9 | 
10 | const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
11 | 
12 | createInertiaApp({
13 |     title: (title) => `${title} - ${appName}`,
14 |     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
15 |     setup({ el, App, props, plugin }) {
16 |         return createApp({ render: () => h(App, props) })
17 |             .use(plugin)
18 |             .use(ZiggyVue)
19 |             .use(VueClickAway)
20 |             .mount(el);
21 |     },
22 |     progress: {
23 |         color: '#4B5563',
24 |     },
25 | });
26 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Default/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import defaultTheme from "tailwindcss/defaultTheme";
 2 | import forms from "@tailwindcss/forms";
 3 | 
 4 | /** @type {import('tailwindcss').Config} */
 5 | export default {
 6 |   content: [
 7 |     "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
 8 |     "./storage/framework/views/*.php",
 9 |     "./resources/views/**/*.blade.php",
10 |     "./resources/js/**/*.vue",
11 |   ],
12 | 
13 |   darkMode: "class",
14 | 
15 |   theme: {
16 |     extend: {
17 |       fontFamily: {
18 |         sans: ["Quicksand", "Figtree", ...defaultTheme.fontFamily.sans],
19 |       },
20 |     },
21 |   },
22 | 
23 |   plugins: [forms],
24 | };
25 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Middleware/HandleInertiaRequests.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Illuminate\Http\Request;
 6 | use Inertia\Middleware;
 7 | 
 8 | class HandleInertiaRequests extends Middleware
 9 | {
10 |     /**
11 |      * The root template that is loaded on the first page visit.
12 |      *
13 |      * @var string
14 |      */
15 |     protected $rootView = 'app';
16 | 
17 |     /**
18 |      * Determine the current asset version.
19 |      */
20 |     public function version(Request $request): ?string
21 |     {
22 |         return parent::version($request);
23 |     }
24 | 
25 |     /**
26 |      * Define the props that are shared by default.
27 |      *
28 |      * @return array<string, mixed>
29 |      */
30 |     public function share(Request $request): array
31 |     {
32 |         return [
33 |             ...parent::share($request),
34 |             'auth' => [
35 |                 'user' => $request->user(),
36 |             ],
37 |             'flash' => [
38 |                 'message' => $request->session()->get('message'),
39 |             ],
40 |         ];
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Models/Setting.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Models;
 4 | 
 5 | use Illuminate\Database\Eloquent\Factories\HasFactory;
 6 | use Illuminate\Database\Eloquent\Model;
 7 | 
 8 | class Setting extends Model
 9 | {
10 |     use HasFactory;
11 | 
12 |     protected $fillable = [
13 |         'key',
14 |         'value',
15 |     ];
16 | }
17 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/Setting/Create.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  3 | import Container from "@/Components/Vien/Container.vue";
  4 | import InputError from "@/Components/InputError.vue";
  5 | import InputLabel from "@/Components/InputLabel.vue";
  6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
  7 | import TextInput from "@/Components/TextInput.vue";
  8 | import { useForm } from "@inertiajs/vue3";
  9 | import { IconChevronRight } from "@tabler/icons-vue";
 10 | import { Head } from "@inertiajs/vue3";
 11 | 
 12 | const form = useForm({
 13 |   key: "",
 14 |   value: "",
 15 | });
 16 | 
 17 | const createNewSetting = () => {
 18 |   form.post(route("settings.store"), {
 19 |     preserveState: true,
 20 |     onSuccess: () => form.reset(),
 21 |   });
 22 | };
 23 | </script>
 24 | <template>
 25 |   <Head title="Create New Setting" />
 26 | 
 27 |   <AuthenticatedLayout>
 28 |     <Container>
 29 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 30 |         <section class="max-w-xl">
 31 |           <header>
 32 |             <div
 33 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 34 |             >
 35 |               <h2
 36 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 37 |                 @click="$inertia.get(route('dashboard'))"
 38 |               >
 39 |                 Home
 40 |               </h2>
 41 |               <IconChevronRight class="size-4" />
 42 |               <h2
 43 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 44 |                 @click="$inertia.get(route('settings.index'))"
 45 |               >
 46 |                 Settings
 47 |               </h2>
 48 |               <IconChevronRight class="size-4" />
 49 |               <h2>New Setting</h2>
 50 |             </div>
 51 |           </header>
 52 | 
 53 |           <form @submit.prevent="createNewSetting" class="mt-6 space-y-6">
 54 |             <div>
 55 |               <InputLabel for="key" value="Key" />
 56 | 
 57 |               <TextInput
 58 |                 id="key"
 59 |                 v-model="form.key"
 60 |                 type="text"
 61 |                 class="mt-1 block w-full"
 62 |                 autocomplete="key"
 63 |               />
 64 | 
 65 |               <InputError :message="form.errors.key" class="mt-2" />
 66 |             </div>
 67 |             <div>
 68 |               <InputLabel for="value" value="Value" />
 69 | 
 70 |               <TextInput
 71 |                 id="value"
 72 |                 v-model="form.value"
 73 |                 type="text"
 74 |                 class="mt-1 block w-full"
 75 |                 autocomplete="value"
 76 |               />
 77 | 
 78 |               <InputError :message="form.errors.value" class="mt-2" />
 79 |             </div>
 80 |             <div class="flex items-center gap-4">
 81 |               <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
 82 | 
 83 |               <Transition
 84 |                 enter-active-class="transition ease-in-out"
 85 |                 enter-from-class="opacity-0"
 86 |                 leave-active-class="transition ease-in-out"
 87 |                 leave-to-class="opacity-0"
 88 |               >
 89 |                 <p
 90 |                   v-if="form.recentlySuccessful"
 91 |                   class="text-sm text-gray-600 dark:text-gray-400"
 92 |                 >
 93 |                   Saved.
 94 |                 </p>
 95 |               </Transition>
 96 |             </div>
 97 |           </form>
 98 |         </section>
 99 |       </div>
100 |     </Container>
101 |   </AuthenticatedLayout>
102 | </template>
103 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/Setting/Edit.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  3 | import Container from "@/Components/Vien/Container.vue";
  4 | import InputError from "@/Components/InputError.vue";
  5 | import InputLabel from "@/Components/InputLabel.vue";
  6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
  7 | import TextInput from "@/Components/TextInput.vue";
  8 | import { useForm } from "@inertiajs/vue3";
  9 | import { IconChevronRight } from "@tabler/icons-vue";
 10 | import { Head } from "@inertiajs/vue3";
 11 | 
 12 | const props = defineProps({
 13 |   setting: {
 14 |     type: Object,
 15 |   },
 16 | });
 17 | 
 18 | const form = useForm({
 19 |   key: props.setting.key,
 20 |   value: props.setting.value,
 21 | });
 22 | 
 23 | const updateSetting = () => {
 24 |   form.patch(route("settings.update", props.setting.id), {
 25 |     preserveState: true,
 26 |     onSuccess: () => form.reset(),
 27 |   });
 28 | };
 29 | </script>
 30 | <template>
 31 |   <Head title="Edit Setting" />
 32 | 
 33 |   <AuthenticatedLayout>
 34 |     <Container>
 35 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 36 |         <section class="max-w-xl">
 37 |           <header>
 38 |             <div
 39 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 40 |             >
 41 |               <h2
 42 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 43 |                 @click="$inertia.get(route('dashboard'))"
 44 |               >
 45 |                 Home
 46 |               </h2>
 47 |               <IconChevronRight class="size-4" />
 48 |               <h2
 49 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 50 |                 @click="$inertia.get(route('settings.index'))"
 51 |               >
 52 |                 Settings
 53 |               </h2>
 54 |               <IconChevronRight class="size-4" />
 55 |               <h2>Setting {{ setting.id }}</h2>
 56 |             </div>
 57 |           </header>
 58 | 
 59 |           <form @submit.prevent="updateSetting" class="mt-6 space-y-6">
 60 |             <div>
 61 |               <InputLabel for="key" value="Key" />
 62 | 
 63 |               <TextInput
 64 |                 id="key"
 65 |                 v-model="form.key"
 66 |                 type="text"
 67 |                 class="mt-1 block w-full"
 68 |                 autocomplete="key"
 69 |               />
 70 | 
 71 |               <InputError :message="form.errors.key" class="mt-2" />
 72 |             </div>
 73 |             <div>
 74 |               <InputLabel for="value" value="Value" />
 75 | 
 76 |               <TextInput
 77 |                 id="value"
 78 |                 v-model="form.value"
 79 |                 type="text"
 80 |                 class="mt-1 block w-full"
 81 |                 autocomplete="value"
 82 |               />
 83 | 
 84 |               <InputError :message="form.errors.value" class="mt-2" />
 85 |             </div>
 86 |             <div class="flex items-center gap-4">
 87 |               <PrimaryButton :disabled="form.processing">Update</PrimaryButton>
 88 | 
 89 |               <Transition
 90 |                 enter-active-class="transition ease-in-out"
 91 |                 enter-from-class="opacity-0"
 92 |                 leave-active-class="transition ease-in-out"
 93 |                 leave-to-class="opacity-0"
 94 |               >
 95 |                 <p
 96 |                   v-if="form.recentlySuccessful"
 97 |                   class="text-sm text-gray-600 dark:text-gray-400"
 98 |                 >
 99 |                   Updated.
100 |                 </p>
101 |               </Transition>
102 |             </div>
103 |           </form>
104 |         </section>
105 |       </div>
106 |     </Container>
107 |   </AuthenticatedLayout>
108 | </template>
109 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/Setting/Index.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import Table from "@/Components/Vien/Table.vue";
  3 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  4 | import { Head } from "@inertiajs/vue3";
  5 | import {
  6 |   IconTrash,
  7 |   IconEdit,
  8 |   IconFilePlus,
  9 |   IconEye,
 10 |   IconChevronRight,
 11 | } from "@tabler/icons-vue";
 12 | import InputText from "@/Components/Vien/InputText.vue";
 13 | import Container from "@/Components/Vien/Container.vue";
 14 | 
 15 | const props = defineProps({
 16 |   table: {
 17 |     type: Object,
 18 |     default: () => {},
 19 |   },
 20 | });
 21 | </script>
 22 | 
 23 | <template>
 24 |   <Head title="List Setting" />
 25 | 
 26 |   <AuthenticatedLayout>
 27 |     <Container>
 28 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 29 |         <section class="max-w-screen-xl">
 30 |           <header>
 31 |             <div
 32 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 33 |             >
 34 |               <h2
 35 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 36 |                 @click="$inertia.get(route('dashboard'))"
 37 |               >
 38 |                 Home
 39 |               </h2>
 40 |               <IconChevronRight class="size-4" />
 41 |               <h2
 42 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 43 |                 @click="$inertia.get(route('settings.index'))"
 44 |               >
 45 |                 Settings
 46 |               </h2>
 47 |             </div>
 48 |           </header>
 49 |           <Table
 50 |             :items="table.settings"
 51 |             :page-options="table.pageOptions"
 52 |             :limit="table.limit"
 53 |             :all-ids="table.allIds"
 54 |             :columns="table.columns"
 55 |             :filters="table.filters"
 56 |             :default-sort="table.defaultSort"
 57 |             module="settings"
 58 |             title="Settings Table"
 59 |           >
 60 |             <!-- bulk action slot -->
 61 |             <template
 62 |               #bulkaction="{ selectedRows, confirmDelete, route, module }"
 63 |             >
 64 |               <button
 65 |                 type="button"
 66 |                 class="text-sm hover:bg-slate-100 dark:hover:bg-gray-700 dark:text-white rounded-lg flex gap-2 justify-start items-center p-2 w-full"
 67 |                 @click="
 68 |                   () => {
 69 |                     const ids = { ids: selectedRows };
 70 |                     confirmDelete(
 71 |                       route(`${module}.bulk-delete`, ids),
 72 |                       `Delete item id: ${selectedRows}`,
 73 |                     );
 74 |                   }
 75 |                 "
 76 |               >
 77 |                 <IconTrash class="size-4" />
 78 |                 <span>Bulk Delete</span>
 79 |               </button>
 80 |             </template>
 81 |             <!-- end bulk action slot -->
 82 | 
 83 |             <!-- more action slot -->
 84 |             <template #moreaction> </template>
 85 |             <!-- end more action slot -->
 86 | 
 87 |             <!-- create action slot -->
 88 |             <template #createaction>
 89 |               <!-- create record -->
 90 |               <button
 91 |                 type="button"
 92 |                 class="flex items-center hover:cursor-pointer text-gray-600 hover:text-gray-400 dark:hover:text-gray-300 dark:text-gray-400"
 93 |                 @click="$inertia.get(route(`settings.create`))"
 94 |               >
 95 |                 <IconFilePlus class="size-6" />
 96 |                 <span>New</span>
 97 |               </button>
 98 |               <!-- end create record -->
 99 |             </template>
100 |             <!-- end create action slot -->
101 | 
102 |             <!-- row action slot -->
103 |             <template #rowaction="{ itemId, confirmDelete, route, module }">
104 |               <!-- view item -->
105 |               <div class="inline-block mr-2">
106 |                 <button
107 |                   type="button"
108 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-slate-400"
109 |                   @click="$inertia.visit(route(`${module}.show`, itemId))"
110 |                 >
111 |                   <IconEye class="size-4" />
112 |                   View
113 |                 </button>
114 |               </div>
115 |               <!-- edit item -->
116 |               <div class="inline-block mr-2">
117 |                 <button
118 |                   type="button"
119 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-yellow-400"
120 |                   @click="$inertia.visit(route(`${module}.edit`, itemId))"
121 |                 >
122 |                   <IconEdit class="size-4" />
123 |                   Edit
124 |                 </button>
125 |               </div>
126 | 
127 |               <!-- delete item -->
128 |               <div class="inline-block mr-2">
129 |                 <button
130 |                   type="button"
131 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-red-400"
132 |                   @click="
133 |                     confirmDelete(
134 |                       route(`${module}.destroy`, itemId),
135 |                       `Delete item id ${itemId}`,
136 |                     )
137 |                   "
138 |                 >
139 |                   <IconTrash class="size-4" />
140 |                   Delete
141 |                 </button>
142 |               </div>
143 |             </template>
144 |             <!-- end row action slot -->
145 | 
146 |             <!-- filter slot -->
147 |             <template #filter="{ filter }">
148 |               <label
149 |                 class="block font-medium text-sm dark:text-gray-100"
150 |                 for="key"
151 |                 >Key</label
152 |               >
153 |               <InputText v-model="filter.key" />
154 |               <label
155 |                 class="block font-medium text-sm dark:text-gray-100"
156 |                 for="value"
157 |                 >Value</label
158 |               >
159 |               <InputText v-model="filter.value" />
160 |             </template>
161 |             <!-- end filter slot -->
162 |           </Table>
163 |         </section>
164 |       </div>
165 |     </Container>
166 |   </AuthenticatedLayout>
167 | </template>
168 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/Setting/Show.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 3 | import Container from "@/Components/Vien/Container.vue";
 4 | import InputLabel from "@/Components/InputLabel.vue";
 5 | import TextInput from "@/Components/TextInput.vue";
 6 | import { IconChevronRight } from "@tabler/icons-vue";
 7 | import { Head } from "@inertiajs/vue3";
 8 | import PrimaryButton from "@/Components/PrimaryButton.vue";
 9 | 
10 | const props = defineProps({
11 |   setting: {
12 |     type: Object,
13 |   },
14 | });
15 | </script>
16 | <template>
17 |   <Head title="Setting Detail" />
18 | 
19 |   <AuthenticatedLayout>
20 |     <Container>
21 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
22 |         <section class="max-w-xl">
23 |           <header>
24 |             <div
25 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
26 |             >
27 |               <h2
28 |                 class="hover:text-zinc-900 hover:cursor-pointer"
29 |                 @click="$inertia.get(route('dashboard'))"
30 |               >
31 |                 Home
32 |               </h2>
33 |               <IconChevronRight class="size-4" />
34 |               <h2
35 |                 class="hover:text-zinc-900 hover:cursor-pointer"
36 |                 @click="$inertia.get(route('settings.index'))"
37 |               >
38 |                 Settings
39 |               </h2>
40 |               <IconChevronRight class="size-4" />
41 |               <h2>Setting {{ setting.id }}</h2>
42 |             </div>
43 |           </header>
44 | 
45 |           <div class="mt-6 space-y-6">
46 |             <div>
47 |               <InputLabel for="key" value="Key" />
48 | 
49 |               <TextInput
50 |                 id="key"
51 |                 v-model="setting.key"
52 |                 type="text"
53 |                 class="mt-1 block w-full"
54 |                 disabled
55 |               />
56 |             </div>
57 |             <div>
58 |               <InputLabel for="value" value="Value" />
59 | 
60 |               <TextInput
61 |                 id="value"
62 |                 v-model="setting.value"
63 |                 type="text"
64 |                 class="mt-1 block w-full"
65 |                 disabled
66 |               />
67 |             </div>
68 |             <div>
69 |               <InputLabel for="created" value="Created At" />
70 | 
71 |               <TextInput
72 |                 id="created"
73 |                 v-model="setting.created_at"
74 |                 type="text"
75 |                 class="mt-1 block w-full"
76 |                 disabled
77 |               />
78 |             </div>
79 |             <div class="flex items-center gap-4">
80 |               <PrimaryButton
81 |                 @click="$inertia.get(route('settings.edit', setting.id))"
82 |                 >Edit
83 |               </PrimaryButton>
84 |             </div>
85 |           </div>
86 |         </section>
87 |       </div>
88 |     </Container>
89 |   </AuthenticatedLayout>
90 | </template>
91 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/User/Create.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  3 | import Container from "@/Components/Vien/Container.vue";
  4 | import InputError from "@/Components/InputError.vue";
  5 | import InputLabel from "@/Components/InputLabel.vue";
  6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
  7 | import TextInput from "@/Components/TextInput.vue";
  8 | import { useForm } from "@inertiajs/vue3";
  9 | import { ref } from "vue";
 10 | import { IconChevronRight } from "@tabler/icons-vue";
 11 | import { Head } from "@inertiajs/vue3";
 12 | 
 13 | const passwordInput = ref(null);
 14 | 
 15 | const form = useForm({
 16 |   name: "",
 17 |   email: "",
 18 |   password: "",
 19 |   password_confirmation: "",
 20 | });
 21 | 
 22 | const createNewUser = () => {
 23 |   form.post(route("users.store"), {
 24 |     preserveState: true,
 25 |     onSuccess: () => form.reset(),
 26 |     onError: () => {
 27 |       if (form.errors.password) {
 28 |         form.reset("password", "password_confirmation");
 29 |         passwordInput.value.focus();
 30 |       }
 31 |     },
 32 |   });
 33 | };
 34 | </script>
 35 | <template>
 36 |   <Head title="Create New User" />
 37 | 
 38 |   <AuthenticatedLayout>
 39 |     <Container>
 40 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 41 |         <section class="max-w-xl">
 42 |           <header>
 43 |             <div
 44 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 45 |             >
 46 |               <h2
 47 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 48 |                 @click="$inertia.get(route('dashboard'))"
 49 |               >
 50 |                 Home
 51 |               </h2>
 52 |               <IconChevronRight class="size-4" />
 53 |               <h2
 54 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 55 |                 @click="$inertia.get(route('users.index'))"
 56 |               >
 57 |                 Users
 58 |               </h2>
 59 |               <IconChevronRight class="size-4" />
 60 |               <h2>New User</h2>
 61 |             </div>
 62 | 
 63 |             <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
 64 |               Ensure this account is using a long, random password to stay
 65 |               secure.
 66 |             </p>
 67 |           </header>
 68 | 
 69 |           <form @submit.prevent="createNewUser" class="mt-6 space-y-6">
 70 |             <div>
 71 |               <InputLabel for="name" value="Name" />
 72 | 
 73 |               <TextInput
 74 |                 id="name"
 75 |                 v-model="form.name"
 76 |                 type="text"
 77 |                 class="mt-1 block w-full"
 78 |                 autocomplete="name"
 79 |               />
 80 | 
 81 |               <InputError :message="form.errors.name" class="mt-2" />
 82 |             </div>
 83 |             <div>
 84 |               <InputLabel for="email" value="Email" />
 85 | 
 86 |               <TextInput
 87 |                 id="email"
 88 |                 v-model="form.email"
 89 |                 type="email"
 90 |                 class="mt-1 block w-full"
 91 |                 autocomplete="email"
 92 |               />
 93 | 
 94 |               <InputError :message="form.errors.email" class="mt-2" />
 95 |             </div>
 96 |             <div>
 97 |               <InputLabel for="password" value="Password" />
 98 | 
 99 |               <TextInput
100 |                 id="password"
101 |                 ref="passwordInput"
102 |                 v-model="form.password"
103 |                 type="password"
104 |                 class="mt-1 block w-full"
105 |                 autocomplete="password"
106 |               />
107 | 
108 |               <InputError :message="form.errors.password" class="mt-2" />
109 |             </div>
110 |             <div>
111 |               <InputLabel
112 |                 for="password_confirmation"
113 |                 value="Confirm Password"
114 |               />
115 | 
116 |               <TextInput
117 |                 id="password_confirmation"
118 |                 v-model="form.password_confirmation"
119 |                 type="password"
120 |                 class="mt-1 block w-full"
121 |                 autocomplete="new-password"
122 |               />
123 | 
124 |               <InputError
125 |                 :message="form.errors.password_confirmation"
126 |                 class="mt-2"
127 |               />
128 |             </div>
129 |             <div class="flex items-center gap-4">
130 |               <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
131 | 
132 |               <Transition
133 |                 enter-active-class="transition ease-in-out"
134 |                 enter-from-class="opacity-0"
135 |                 leave-active-class="transition ease-in-out"
136 |                 leave-to-class="opacity-0"
137 |               >
138 |                 <p
139 |                   v-if="form.recentlySuccessful"
140 |                   class="text-sm text-gray-600 dark:text-gray-400"
141 |                 >
142 |                   Saved.
143 |                 </p>
144 |               </Transition>
145 |             </div>
146 |           </form>
147 |         </section>
148 |       </div>
149 |     </Container>
150 |   </AuthenticatedLayout>
151 | </template>
152 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/User/Edit.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  3 | import Container from "@/Components/Vien/Container.vue";
  4 | import InputError from "@/Components/InputError.vue";
  5 | import InputLabel from "@/Components/InputLabel.vue";
  6 | import PrimaryButton from "@/Components/PrimaryButton.vue";
  7 | import TextInput from "@/Components/TextInput.vue";
  8 | import { useForm } from "@inertiajs/vue3";
  9 | import { ref } from "vue";
 10 | import { IconChevronRight } from "@tabler/icons-vue";
 11 | import { Head } from "@inertiajs/vue3";
 12 | 
 13 | const props = defineProps({
 14 |   user: {
 15 |     type: Object,
 16 |   },
 17 | });
 18 | 
 19 | const passwordInput = ref(null);
 20 | 
 21 | const form = useForm({
 22 |   name: props.user.name,
 23 |   email: props.user.email,
 24 |   password: "",
 25 |   password_confirmation: "",
 26 | });
 27 | 
 28 | const updateUser = () => {
 29 |   form.patch(route("users.update", props.user.id), {
 30 |     preserveState: true,
 31 |     onSuccess: () => form.reset(),
 32 |     onError: () => {
 33 |       if (form.errors.password) {
 34 |         form.reset("password", "password_confirmation");
 35 |         passwordInput.value.focus();
 36 |       }
 37 |     },
 38 |   });
 39 | };
 40 | </script>
 41 | <template>
 42 |   <Head title="Edit User" />
 43 | 
 44 |   <AuthenticatedLayout>
 45 |     <Container>
 46 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 47 |         <section class="max-w-xl">
 48 |           <header>
 49 |             <div
 50 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 51 |             >
 52 |               <h2
 53 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 54 |                 @click="$inertia.get(route('dashboard'))"
 55 |               >
 56 |                 Home
 57 |               </h2>
 58 |               <IconChevronRight class="size-4" />
 59 |               <h2
 60 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 61 |                 @click="$inertia.get(route('users.index'))"
 62 |               >
 63 |                 Users
 64 |               </h2>
 65 |               <IconChevronRight class="size-4" />
 66 |               <h2>User {{ user.id }}</h2>
 67 |             </div>
 68 | 
 69 |             <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
 70 |               Ensure this account is using a long, random password to stay
 71 |               secure.
 72 |             </p>
 73 |           </header>
 74 | 
 75 |           <form @submit.prevent="updateUser" class="mt-6 space-y-6">
 76 |             <div>
 77 |               <InputLabel for="name" value="Name" />
 78 | 
 79 |               <TextInput
 80 |                 id="name"
 81 |                 v-model="form.name"
 82 |                 type="text"
 83 |                 class="mt-1 block w-full"
 84 |                 autocomplete="name"
 85 |               />
 86 | 
 87 |               <InputError :message="form.errors.name" class="mt-2" />
 88 |             </div>
 89 |             <div>
 90 |               <InputLabel for="email" value="Email" />
 91 | 
 92 |               <TextInput
 93 |                 id="email"
 94 |                 v-model="form.email"
 95 |                 type="email"
 96 |                 class="mt-1 block w-full"
 97 |                 autocomplete="email"
 98 |               />
 99 | 
100 |               <InputError :message="form.errors.email" class="mt-2" />
101 |             </div>
102 |             <div>
103 |               <InputLabel for="password" value="Password" />
104 | 
105 |               <TextInput
106 |                 id="password"
107 |                 ref="passwordInput"
108 |                 v-model="form.password"
109 |                 type="password"
110 |                 class="mt-1 block w-full"
111 |                 autocomplete="password"
112 |               />
113 | 
114 |               <InputError :message="form.errors.password" class="mt-2" />
115 |             </div>
116 |             <div>
117 |               <InputLabel
118 |                 for="password_confirmation"
119 |                 value="Confirm Password"
120 |               />
121 | 
122 |               <TextInput
123 |                 id="password_confirmation"
124 |                 v-model="form.password_confirmation"
125 |                 type="password"
126 |                 class="mt-1 block w-full"
127 |                 autocomplete="new-password"
128 |               />
129 | 
130 |               <InputError
131 |                 :message="form.errors.password_confirmation"
132 |                 class="mt-2"
133 |               />
134 |             </div>
135 |             <div class="flex items-center gap-4">
136 |               <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
137 | 
138 |               <Transition
139 |                 enter-active-class="transition ease-in-out"
140 |                 enter-from-class="opacity-0"
141 |                 leave-active-class="transition ease-in-out"
142 |                 leave-to-class="opacity-0"
143 |               >
144 |                 <p
145 |                   v-if="form.recentlySuccessful"
146 |                   class="text-sm text-gray-600 dark:text-gray-400"
147 |                 >
148 |                   Saved.
149 |                 </p>
150 |               </Transition>
151 |             </div>
152 |           </form>
153 |         </section>
154 |       </div>
155 |     </Container>
156 |   </AuthenticatedLayout>
157 | </template>
158 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/User/Index.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import Table from "@/Components/Vien/Table.vue";
  3 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
  4 | import { Head } from "@inertiajs/vue3";
  5 | import {
  6 |   IconTrash,
  7 |   IconEdit,
  8 |   IconFilePlus,
  9 |   IconEye,
 10 |   IconChevronRight,
 11 | } from "@tabler/icons-vue";
 12 | import InputText from "@/Components/Vien/InputText.vue";
 13 | import Container from "@/Components/Vien/Container.vue";
 14 | 
 15 | const props = defineProps({
 16 |   table: {
 17 |     type: Object,
 18 |   },
 19 | });
 20 | </script>
 21 | 
 22 | <template>
 23 |   <Head title="List User" />
 24 | 
 25 |   <AuthenticatedLayout>
 26 |     <Container>
 27 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
 28 |         <section class="max-w-screen-xl">
 29 |           <header>
 30 |             <div
 31 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
 32 |             >
 33 |               <h2
 34 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 35 |                 @click="$inertia.get(route('dashboard'))"
 36 |               >
 37 |                 Home
 38 |               </h2>
 39 |               <IconChevronRight class="size-4" />
 40 |               <h2
 41 |                 class="hover:text-zinc-900 hover:cursor-pointer"
 42 |                 @click="$inertia.get(route('users.index'))"
 43 |               >
 44 |                 Users
 45 |               </h2>
 46 |             </div>
 47 |           </header>
 48 |           <Table
 49 |             :items="table.users"
 50 |             :page-options="table.pageOptions"
 51 |             :limit="table.limit"
 52 |             :all-ids="table.allIds"
 53 |             :columns="table.columns"
 54 |             :filters="table.filters"
 55 |             :default-sort="table.defaultSort"
 56 |             module="users"
 57 |             title="Users Table"
 58 |           >
 59 |             <!-- bulk action slot -->
 60 |             <template
 61 |               #bulkaction="{ selectedRows, confirmDelete, route, module }"
 62 |             >
 63 |               <button
 64 |                 type="button"
 65 |                 class="text-sm hover:bg-slate-100 dark:hover:bg-gray-700 dark:text-white rounded-lg flex gap-2 justify-start items-center p-2 w-full"
 66 |                 @click="
 67 |                   () => {
 68 |                     const ids = { ids: selectedRows };
 69 |                     confirmDelete(
 70 |                       route(`${module}.bulk-delete`, ids),
 71 |                       `Delete item id: ${selectedRows}`,
 72 |                     );
 73 |                   }
 74 |                 "
 75 |               >
 76 |                 <IconTrash class="size-4" />
 77 |                 <span>Bulk Delete</span>
 78 |               </button>
 79 |             </template>
 80 |             <!-- end bulk action slot -->
 81 | 
 82 |             <!-- more action slot -->
 83 |             <template #moreaction> </template>
 84 |             <!-- end more action slot -->
 85 | 
 86 |             <!-- create action slot -->
 87 |             <template #createaction>
 88 |               <!-- create record -->
 89 |               <button
 90 |                 type="button"
 91 |                 class="flex items-center hover:cursor-pointer text-gray-600 hover:text-gray-400 dark:hover:text-gray-300 dark:text-gray-400"
 92 |                 @click="$inertia.get(route(`users.create`))"
 93 |               >
 94 |                 <IconFilePlus class="size-6" />
 95 |                 <span>New</span>
 96 |               </button>
 97 |               <!-- end create record -->
 98 |             </template>
 99 |             <!-- end create action slot -->
100 | 
101 |             <!-- row action slot -->
102 |             <template #rowaction="{ itemId, confirmDelete, route, module }">
103 |               <!-- view item -->
104 |               <div class="inline-block mr-2">
105 |                 <button
106 |                   type="button"
107 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-slate-400"
108 |                   @click="$inertia.visit(route(`${module}.show`, itemId))"
109 |                 >
110 |                   <IconEye class="size-4" />
111 |                   View
112 |                 </button>
113 |               </div>
114 |               <!-- edit item -->
115 |               <div class="inline-block mr-2">
116 |                 <button
117 |                   type="button"
118 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-yellow-400"
119 |                   @click="$inertia.visit(route(`${module}.edit`, itemId))"
120 |                 >
121 |                   <IconEdit class="size-4" />
122 |                   Edit
123 |                 </button>
124 |               </div>
125 | 
126 |               <!-- delete item -->
127 |               <div class="inline-block mr-2">
128 |                 <button
129 |                   type="button"
130 |                   class="flex gap-1 justify-center items-center min-h-8 hover:text-red-400"
131 |                   @click="
132 |                     confirmDelete(
133 |                       route(`${module}.destroy`, itemId),
134 |                       `Delete item id ${itemId}`,
135 |                     )
136 |                   "
137 |                 >
138 |                   <IconTrash class="size-4" />
139 |                   Delete
140 |                 </button>
141 |               </div>
142 |             </template>
143 |             <!-- end row action slot -->
144 | 
145 |             <!-- filter slot -->
146 |             <template #filter="{ filter }">
147 |               <label
148 |                 class="block font-medium text-sm dark:text-gray-100"
149 |                 for="name"
150 |                 >Name</label
151 |               >
152 |               <InputText v-model="filter.name" />
153 |               <label
154 |                 class="block font-medium text-sm dark:text-gray-100"
155 |                 for="email"
156 |                 >Email</label
157 |               >
158 |               <InputText v-model="filter.email" />
159 |             </template>
160 |             <!-- end filter slot -->
161 |           </Table>
162 |         </section>
163 |       </div>
164 |     </Container>
165 |   </AuthenticatedLayout>
166 | </template>
167 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Pages/User/Show.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 3 | import Container from "@/Components/Vien/Container.vue";
 4 | import InputLabel from "@/Components/InputLabel.vue";
 5 | import TextInput from "@/Components/TextInput.vue";
 6 | import { IconChevronRight } from "@tabler/icons-vue";
 7 | import { Head } from "@inertiajs/vue3";
 8 | import PrimaryButton from "@/Components/PrimaryButton.vue";
 9 | 
10 | const props = defineProps({
11 |   user: {
12 |     type: Object,
13 |   },
14 | });
15 | </script>
16 | <template>
17 |   <Head title="User Detail" />
18 | 
19 |   <AuthenticatedLayout>
20 |     <Container>
21 |       <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
22 |         <section class="max-w-xl">
23 |           <header>
24 |             <div
25 |               class="flex gap-2 items-center text-sm font-bold text-zinc-600 dark:text-zinc-100"
26 |             >
27 |               <h2
28 |                 class="hover:text-zinc-900 hover:cursor-pointer"
29 |                 @click="$inertia.get(route('dashboard'))"
30 |               >
31 |                 Home
32 |               </h2>
33 |               <IconChevronRight class="size-4" />
34 |               <h2
35 |                 class="hover:text-zinc-900 hover:cursor-pointer"
36 |                 @click="$inertia.get(route('users.index'))"
37 |               >
38 |                 Users
39 |               </h2>
40 |               <IconChevronRight class="size-4" />
41 |               <h2>User {{ user.id }}</h2>
42 |             </div>
43 |           </header>
44 | 
45 |           <div class="mt-6 space-y-6">
46 |             <div>
47 |               <InputLabel for="name" value="Name" />
48 | 
49 |               <TextInput
50 |                 id="name"
51 |                 v-model="user.name"
52 |                 type="text"
53 |                 class="mt-1 block w-full"
54 |                 disabled
55 |               />
56 |             </div>
57 |             <div>
58 |               <InputLabel for="email" value="Email" />
59 | 
60 |               <TextInput
61 |                 id="email"
62 |                 v-model="user.email"
63 |                 type="email"
64 |                 class="mt-1 block w-full"
65 |                 disabled
66 |               />
67 |             </div>
68 |             <div>
69 |               <InputLabel for="created" value="Created At" />
70 | 
71 |               <TextInput
72 |                 id="created"
73 |                 v-model="user.created_at"
74 |                 type="text"
75 |                 class="mt-1 block w-full"
76 |                 disabled
77 |               />
78 |             </div>
79 |             <div class="flex items-center gap-4">
80 |               <PrimaryButton @click="$inertia.get(route('users.edit', user.id))"
81 |                 >Edit
82 |               </PrimaryButton>
83 |             </div>
84 |           </div>
85 |         </section>
86 |       </div>
87 |     </Container>
88 |   </AuthenticatedLayout>
89 | </template>
90 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/AppToast.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted, ref, watch } from "vue";
 3 | import { usePage } from "@inertiajs/vue3";
 4 | import Toast from "./Toast.vue";
 5 | 
 6 | const messages = ref([]);
 7 | onMounted(() => {
 8 |   if (usePage().props.flash.message) {
 9 |     messages.value.push(usePage().props.flash.message);
10 |   }
11 | });
12 | watch(
13 |   () => usePage().props.flash.message,
14 |   (next) => {
15 |     if (next) {
16 |       messages.value.push(next);
17 |     }
18 |   },
19 | );
20 | </script>
21 | 
22 | <template>
23 |   <div class="fixed top-16 right-5 z-50 flex flex-col gap-2">
24 |     <Toast
25 |       v-if="messages.length > 0"
26 |       v-for="(message, index) in messages"
27 |       :key="index"
28 |       :message="message.message"
29 |       :type="message.type"
30 |     />
31 |   </div>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button type="button" @click="$emit('click')">
 3 |     <slot></slot>
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | const emit = defineEmits(["click"]);
 9 | </script>
10 | 
11 | <style scoped lang="postcss">
12 | .btn {
13 |   @apply z-0 flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
14 | }
15 | 
16 | .btn-primary {
17 |   @apply bg-slate-700 text-white hover:bg-slate-400 focus-visible:outline-slate-700;
18 | }
19 | 
20 | .btn-secondary {
21 |   @apply bg-slate-300 text-white hover:bg-slate-400 focus-visible:outline-slate-300;
22 | }
23 | 
24 | .btn-neutral {
25 |   @apply bg-slate-300 text-white hover:bg-slate-400 focus-visible:outline-slate-300;
26 | }
27 | 
28 | .btn-destructive {
29 |   @apply bg-red-400 text-white hover:bg-red-500 focus:ring-red-400;
30 | }
31 | 
32 | .btn-primary-outline {
33 |   @apply border border-slate-700 text-slate-700 hover:bg-slate-400 focus-visible:outline-slate-700;
34 | }
35 | 
36 | .btn-neutral-outline {
37 |   @apply border border-slate-700 text-slate-700 hover:bg-slate-400 focus-visible:outline-slate-700;
38 | }
39 | 
40 | .btn-icon {
41 |   @apply h-8 rounded-md px-3;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Checkbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- For Boolean -->
 3 |   <input
 4 |     v-if="isBooleanType"
 5 |     type="checkbox"
 6 |     class="text-slate-700 h-4 w-4 rounded focus:ring-2"
 7 |     v-bind="$attrs"
 8 |     :checked="modelValue"
 9 |     @change="updateBooleanValue"
10 |   />
11 | 
12 |   <!-- For Array -->
13 |   <input
14 |     v-else
15 |     type="checkbox"
16 |     class="text-slate-700 h-4 w-4 rounded focus:ring-2"
17 |     v-bind="$attrs"
18 |     :value="value"
19 |     :checked="isChecked"
20 |     @change="updateArrayValue"
21 |   />
22 | </template>
23 | 
24 | <script setup>
25 | import { ref, computed, onMounted } from "vue";
26 | 
27 | const props = defineProps({
28 |   modelValue: {
29 |     type: [Boolean, Array],
30 |     default: () => [],
31 |   },
32 |   value: {
33 |     type: [String, Number, Boolean, Object],
34 |     required: false,
35 |     default: "",
36 |   },
37 | });
38 | 
39 | // boolean type
40 | const emit = defineEmits(["update:modelValue"]);
41 | 
42 | const isBooleanType = computed(() => typeof props.modelValue === "boolean");
43 | 
44 | function updateBooleanValue(event) {
45 |   emit("update:modelValue", event.target.checked);
46 | }
47 | 
48 | // array type
49 | const isChecked = ref(false);
50 | 
51 | onMounted(() => {
52 |   if (Array.isArray(props.modelValue)) {
53 |     props.modelValue.forEach((value) => {
54 |       if (value.id === props.value.id) {
55 |         isChecked.value = true;
56 |       }
57 |     });
58 |   }
59 | });
60 | 
61 | const updateArrayValue = (event) => {
62 |   if (Array.isArray(props.modelValue)) {
63 |     const updatedValue = [...props.modelValue];
64 |     if (event.target.checked) {
65 |       updatedValue.push(props.value);
66 |     } else {
67 |       props.modelValue.forEach((value, index) => {
68 |         if (value.id === props.value.id) {
69 |           updatedValue.splice(index, 1);
70 |         }
71 |       });
72 |     }
73 |     emit("update:modelValue", updatedValue);
74 |   }
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Container.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="py-12">
3 |     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
4 |       <slot></slot>
5 |     </div>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/DeleteModal.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import Modal from "@/Components/Modal.vue";
 3 | import { ref } from "vue";
 4 | import { router, useForm } from "@inertiajs/vue3";
 5 | import SecondaryButton from "@/Components/SecondaryButton.vue";
 6 | import DangerButton from "@/Components/DangerButton.vue";
 7 | 
 8 | const confirmingDeletion = ref(false);
 9 | const deleteItemRoute = ref(null);
10 | const title = ref("Are you sure you want to delete ?");
11 | 
12 | const openModal = (deleteRoute, message) => {
13 |   deleteItemRoute.value = deleteRoute;
14 |   confirmingDeletion.value = true;
15 |   title.value = message ? message : title.value;
16 | };
17 | const closeModal = () => {
18 |   deleteItemRoute.value = null;
19 |   confirmingDeletion.value = false;
20 | };
21 | 
22 | const form = useForm({});
23 | 
24 | const deleteItem = () => {
25 |   // router.visit(deleteItemRoute.value, {
26 |   //   method: "delete",
27 |   // });
28 |   form.delete(deleteItemRoute.value, {
29 |     preserveState: true,
30 |   });
31 |   closeModal();
32 | };
33 | defineExpose({
34 |   openModal,
35 | });
36 | </script>
37 | 
38 | <template>
39 |   <Modal :show="confirmingDeletion" @close="closeModal()">
40 |     <div class="p-6">
41 |       <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
42 |         Are you sure want to proceed ?
43 |       </h2>
44 | 
45 |       <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
46 |         {{ title }}
47 |       </p>
48 | 
49 |       <div class="mt-6 flex justify-end">
50 |         <SecondaryButton @click="closeModal()"> Cancel </SecondaryButton>
51 | 
52 |         <DangerButton class="ms-3" @click="deleteItem()">
53 |           Confirmed
54 |         </DangerButton>
55 |       </div>
56 |     </div>
57 |   </Modal>
58 | </template>
59 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/InputDateTime.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <flat-pickr
 3 |         :id="id"
 4 |         v-model="selectedDate"
 5 |         :config="config"
 6 |         @input="updateValue"
 7 |         class="rounded-md border-1 border-slate-300 px-3 py-2 text-slate-700 shadow-sm sm:text-sm sm:leading-6 focus:border-slate-300 focus:ring-slate-300 dark:border-gray-300 dark:bg-gray-900 dark:text-gray-300"
 8 |     ></flat-pickr>
 9 | </template>
10 | 
11 | <script setup>
12 | import {defineEmits, defineProps, ref, watch} from 'vue';
13 | import FlatPickr from 'vue-flatpickr-component';
14 | import 'flatpickr/dist/flatpickr.css';
15 | 
16 | const props = defineProps({
17 |     id: {
18 |         type: String,
19 |         required: true,
20 |     },
21 |     value: {
22 |         type: [String, Date],
23 |         default: null,
24 |     },
25 |     label: {
26 |         type: String,
27 |         default: '',
28 |     },
29 | });
30 | 
31 | const emit = defineEmits(['update:value']);
32 | 
33 | const selectedDate = ref(props.value);
34 | const config = ref({
35 |     enableTime: true,
36 |     dateFormat: 'Y-m-d H:i',
37 | });
38 | 
39 | watch(
40 |     () => props.value,
41 |     (newValue) => {
42 |         selectedDate.value = newValue;
43 |     }
44 | );
45 | 
46 | const updateValue = (date) => {
47 |     emit('update:value', date);
48 | };
49 | </script>
50 | 
51 | <style scoped>
52 | label {
53 |     display: block;
54 |     margin-bottom: 0.5em;
55 | }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/InputText.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input
 3 |     ref="inputRef"
 4 |     :value="modelValue"
 5 |     class="mt-1 block w-full rounded-md border-1 border-slate-300 px-3 py-2 text-slate-700 shadow-sm sm:text-sm sm:leading-6 focus:border-slate-300 focus:ring-slate-300 dark:border-gray-300 dark:bg-gray-900 dark:text-gray-300"
 6 |     autocomplete="off"
 7 |     @input="$emit('update:modelValue', $event.target.value)"
 8 |   />
 9 | </template>
10 | 
11 | <script setup>
12 | import { ref } from "vue";
13 | 
14 | const props = defineProps({
15 |   modelValue: {
16 |     type: [String, Number],
17 |     default: "",
18 |   },
19 | });
20 | 
21 | const emit = defineEmits(["update:modelValue"]);
22 | 
23 | const inputRef = ref(null);
24 | 
25 | const focusInput = () => {
26 |   inputRef.value.focus();
27 | };
28 | 
29 | defineExpose({
30 |   focusInput,
31 | });
32 | </script>
33 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Loading.vue:
--------------------------------------------------------------------------------
 1 | <!-- resources/js/Components/Loading.vue -->
 2 | <template>
 3 |   <div v-if="loading" class="loading-overlay">
 4 |     <div class="spinner"></div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   props: {
11 |     loading: {
12 |       type: Boolean,
13 |       required: true,
14 |     },
15 |   },
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 | .loading-overlay {
21 |   position: fixed;
22 |   top: 0;
23 |   left: 0;
24 |   width: 100%;
25 |   height: 100%;
26 |   background: rgba(255, 255, 255, 0.8);
27 |   display: flex;
28 |   justify-content: center;
29 |   align-items: center;
30 |   z-index: 1000;
31 | }
32 | 
33 | .spinner {
34 |   border: 4px solid rgba(0, 0, 0, 0.1);
35 |   border-left-color: #000;
36 |   border-radius: 50%;
37 |   width: 40px;
38 |   height: 40px;
39 |   animation: spin 1s linear infinite;
40 | }
41 | 
42 | @keyframes spin {
43 |   to {
44 |     transform: rotate(360deg);
45 |   }
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { IconChevronLeft, IconChevronRight } from "@tabler/icons-vue";
 3 | import { Link } from "@inertiajs/vue3";
 4 | 
 5 | defineProps({
 6 |   nextPageUrl: {
 7 |     type: String,
 8 |   },
 9 |   prevPageUrl: {
10 |     type: String,
11 |   },
12 |   links: {
13 |     type: Object,
14 |   },
15 | });
16 | </script>
17 | 
18 | <template>
19 |   <nav aria-label="Page navigation example">
20 |     <ul class="flex items-center -space-x-px h-8 text-sm">
21 |       <li>
22 |         <Link
23 |           :href="prevPageUrl || '#'"
24 |           preserve-state
25 |           preserve-scroll
26 |           :class="{
27 |             'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white':
28 |               prevPageUrl,
29 |             'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg cursor-not-allowed dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:cursor-default':
30 |               !prevPageUrl,
31 |           }"
32 |         >
33 |           <span class="sr-only">Previous</span>
34 |           <IconChevronLeft class="size-5" />
35 |         </Link>
36 |       </li>
37 |       <li v-for="(link, index) in links" :key="index">
38 |         <Link
39 |           v-if="index != 0 && index != links.length - 1"
40 |           preserve-state
41 |           preserve-scroll
42 |           :href="link.url || '#'"
43 |           :class="{
44 |             'z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white':
45 |               link.active,
46 |             'flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white':
47 |               !link.active,
48 |             'cursor-not-allowed': link.url == null,
49 |           }"
50 |         >
51 |           {{ link.label }}
52 |         </Link>
53 |       </li>
54 |       <li>
55 |         <Link
56 |           :href="nextPageUrl || '#'"
57 |           preserve-state
58 |           preserve-scroll
59 |           :class="{
60 |             'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white':
61 |               nextPageUrl,
62 |             'flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg cursor-not-allowed dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:cursor-default':
63 |               !nextPageUrl,
64 |           }"
65 |         >
66 |           <span class="sr-only">Next</span>
67 |           <IconChevronRight class="size-5" />
68 |         </Link>
69 |       </li>
70 |     </ul>
71 |   </nav>
72 | </template>
73 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/SelectSimple.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Listbox as="div" v-model="model">
 3 |         <div class="relative mt-2">
 4 |             <ListboxButton
 5 |                 class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
 6 |                 <span class="block truncate">{{ model.value }}</span>
 7 |                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 8 |           <IconChevronDown class="h-5 w-5 text-gray-400" aria-hidden="true"/>
 9 |         </span>
10 |             </ListboxButton>
11 | 
12 |             <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
13 |                         leave-to-class="opacity-0">
14 |                 <ListboxOptions
15 |                     class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
16 |                     <ListboxOption as="template" v-for="item in items" :key="item.id" :value="item"
17 |                                    v-slot="{ active, model }">
18 |                         <li :class="[active ? 'bg-indigo-600 text-white' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-3 pr-9']">
19 |                             <span
20 |                                 :class="[model ? 'font-semibold' : 'font-normal', 'block truncate']">{{
21 |                                     item.value
22 |                                 }}</span>
23 | 
24 |                             <span v-if="model"
25 |                                   :class="[active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4']">
26 |                 <IconCheck class="h-5 w-5" aria-hidden="true"/>
27 |               </span>
28 |                         </li>
29 |                     </ListboxOption>
30 |                 </ListboxOptions>
31 |             </transition>
32 |         </div>
33 |     </Listbox>
34 | </template>
35 | 
36 | <script setup>
37 | import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
38 | import {IconCheck, IconChevronDown} from '@tabler/icons-vue'
39 | 
40 | defineProps({
41 |     items: {
42 |         type: Object,
43 |         default: () => [],
44 |     },
45 | })
46 | 
47 | const model = defineModel({
48 |     required: true,
49 | });
50 | </script>
51 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/SideBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import SideBarMenuItem from "./SideBarMenuItem.vue";
 3 | import { useMenuItems } from "./Utils/menu-items";
 4 | const { menuItems } = useMenuItems();
 5 | </script>
 6 | 
 7 | <template>
 8 |   <aside
 9 |     class="absolute top-0 left-0 z-40 w-64 h-screen transition-transform"
10 |     aria-label="Sidebar"
11 |   >
12 |     <div
13 |       class="h-full px-3 overflow-y-auto bg-white dark:bg-gray-800 text-sm dark:text-white"
14 |     >
15 |       <ul class="font-medium flex flex-col">
16 |         <li v-for="item in menuItems" :key="item.id">
17 |           <SideBarMenuItem :item="item" />
18 |         </li>
19 |       </ul>
20 |     </div>
21 |   </aside>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/SideBarMenuItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { Link } from "@inertiajs/vue3";
 3 | import SideBarSubMenuItem from "./SideBarSubMenuItem.vue";
 4 | defineProps({
 5 |   item: {
 6 |     type: Object,
 7 |     required: true,
 8 |   },
 9 | });
10 | </script>
11 | 
12 | <template>
13 |   <!-- jika tidak mempunyai sub menu -->
14 |   <template v-if="!item.children">
15 |     <Link
16 |       :method="item.method ? item.method : 'get'"
17 |       :as="item.method ? 'button' : 'a'"
18 |       :href="route(item.routeName)"
19 |       :class="[
20 |         'flex w-full gap-2 py-2 px-4 rounded mb-2',
21 |         $page.component === item.component
22 |           ? 'bg-gray-100 dark:bg-gray-700'
23 |           : 'hover:bg-gray-100 dark:hover:bg-gray-700',
24 |         item.class,
25 |       ]"
26 |     >
27 |       <component v-if="item.icon" :is="item.icon" class="size-5" />
28 |       {{ item.title }}
29 |     </Link>
30 |   </template>
31 |   <!-- jika mempunyai sub menu -->
32 |   <template v-else>
33 |     <SideBarSubMenuItem :item="item" />
34 |   </template>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/SideBarSubMenuItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <button
 4 |       @click="toggleSubmenu"
 5 |       class="flex items-center justify-between w-full py-2 px-4 mb-2 rounded focus:outline-none hover:bg-gray-100 hover:dark:bg-gray-700"
 6 |       :class="item.class"
 7 |     >
 8 |       <span>{{ item.title }}</span>
 9 |       <svg
10 |         class="w-4 h-4 transition-transform"
11 |         :class="{ 'rotate-180': isOpen }"
12 |         fill="none"
13 |         stroke="currentColor"
14 |         viewBox="0 0 24 24"
15 |         xmlns="http://www.w3.org/2000/svg"
16 |       >
17 |         <path
18 |           stroke-linecap="round"
19 |           stroke-linejoin="round"
20 |           stroke-width="2"
21 |           d="M19 9l-7 7-7-7"
22 |         ></path>
23 |       </svg>
24 |     </button>
25 |     <ul v-show="isOpen" class="mx-4 mb-2">
26 |       <li v-for="child in item.children" :key="child.id">
27 |         <SideBarMenuItem :item="child" />
28 |       </li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script setup>
34 | import { ref, onMounted } from "vue";
35 | import { usePage } from "@inertiajs/vue3";
36 | import SideBarMenuItem from "./SideBarMenuItem.vue";
37 | 
38 | const props = defineProps({
39 |   item: {
40 |     type: Object,
41 |     required: true,
42 |   },
43 | });
44 | 
45 | onMounted(() => {
46 |   const active = checkActive(props.item);
47 |   if (active) {
48 |     toggleSubmenu();
49 |   }
50 | });
51 | 
52 | const page = usePage();
53 | const isOpen = ref(false);
54 | 
55 | function containSamePrefix(first, second) {
56 |   if (first.split("/")[0] == second.split("/")[0]) {
57 |     return true;
58 |   }
59 |   return false;
60 | }
61 | 
62 | function checkActive(item) {
63 |   if (item.component) {
64 |     if (page.component === item.component) {
65 |       return true;
66 |     }
67 |     if (containSamePrefix(page.component, item.component)) {
68 |       return true;
69 |     }
70 |   }
71 |   if (item.children) {
72 |     return item.children.some((child) => checkActive(child));
73 |   }
74 |   return false;
75 | }
76 | 
77 | const toggleSubmenu = () => {
78 |   isOpen.value = !isOpen.value;
79 | };
80 | </script>
81 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Table.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import {
  3 |   IconDotsVertical,
  4 |   IconFilterFilled,
  5 |   IconSearch,
  6 |   IconTableColumn,
  7 |   IconX,
  8 | } from "@tabler/icons-vue";
  9 | import DeleteModal from "./DeleteModal.vue";
 10 | import Checkbox from "./Checkbox.vue";
 11 | import InputText from "./InputText.vue";
 12 | import Loading from "./Loading.vue";
 13 | import Pagination from "./Pagination.vue";
 14 | import { useTableLogic } from "./Utils/table-logic";
 15 | 
 16 | const props = defineProps({
 17 |   title: String,
 18 |   items: {
 19 |     type: Object,
 20 |     default: () => {},
 21 |   },
 22 |   pageOptions: {
 23 |     type: Array,
 24 |     default: () => [],
 25 |   },
 26 |   limit: {
 27 |     type: Number,
 28 |     default: 10,
 29 |   },
 30 |   allIds: {
 31 |     type: Array,
 32 |     default: () => [],
 33 |   },
 34 |   columns: {
 35 |     type: Array,
 36 |     default: () => [],
 37 |   },
 38 |   module: {
 39 |     type: String,
 40 |     default: "",
 41 |     required: true,
 42 |   },
 43 |   filters: {
 44 |     type: Array,
 45 |     default: () => ["search"],
 46 |   },
 47 |   defaultSort: {
 48 |     type: String,
 49 |     default: "-id",
 50 |   },
 51 | });
 52 | 
 53 | const {
 54 |   openFilter,
 55 |   filter,
 56 |   filterCount,
 57 |   selectedRows,
 58 |   selectAll,
 59 |   sortKey,
 60 |   sortOrder,
 61 |   openAction,
 62 |   confirmDeleteDialog,
 63 |   columns,
 64 |   visibleColumns,
 65 |   openToggleColumn,
 66 |   pageOptionValue,
 67 |   isLoading,
 68 |   resetFilter,
 69 |   onSearchInput,
 70 |   clearSearch,
 71 |   clearSearchAndFilter,
 72 |   removeFilter,
 73 |   toggleSelectAll,
 74 |   selectAllRows,
 75 |   clearSelectedRows,
 76 |   sortColumn,
 77 |   confirmDelete,
 78 |   toggleColumn,
 79 |   changePageOptions,
 80 | } = useTableLogic(props);
 81 | </script>
 82 | 
 83 | <template>
 84 |   <Loading :loading="isLoading" />
 85 |   <!-- table container -->
 86 |   <div
 87 |     class="mt-4 bg-white dark:bg-gray-800 dark:text-white border border-slate-300 rounded-lg"
 88 |   >
 89 |     <!-- action, search dan filter -->
 90 |     <div class="flex items-center justify-between">
 91 |       <!-- action -->
 92 |       <div class="relative flex justify-start items-center gap-2 px-4">
 93 |         <button
 94 |           class="flex items-center border border-slate-300 p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700"
 95 |           v-if="selectedRows.length"
 96 |           @click="openAction = !openAction"
 97 |         >
 98 |           <IconDotsVertical class="size-6 hover:cursor-pointer text-sm" />
 99 |           <span class="text-sm font-semibold">Action</span>
100 |         </button>
101 |         <Transition
102 |           enter-active-class="transition-opacity duration-500 ease-in-out"
103 |           leave-active-class="transition-opacity duration-500 ease-in-out"
104 |           enter-from-class="opacity-0"
105 |           enter-to-class="opacity-100"
106 |           leave-from-class="opacity-100"
107 |           leave-to-class="opacity-0"
108 |         >
109 |           <div
110 |             v-if="openAction"
111 |             v-click-away="() => (openAction = false)"
112 |             class="z-10 bg-white dark:bg-gray-800 dark:text-white w-40 absolute top-11 border border-slate-300 rounded-lg p-1"
113 |           >
114 |             <div class="flex flex-col text-slate-700 justify-start items-start">
115 |               <template v-if="$slots.bulkaction">
116 |                 <slot
117 |                   name="bulkaction"
118 |                   :selectedRows="selectedRows"
119 |                   :confirmDelete="confirmDelete"
120 |                   :route="route"
121 |                   :module="props.module"
122 |                 ></slot>
123 |               </template>
124 |             </div>
125 |           </div>
126 |         </Transition>
127 |         <template v-if="$slots.moreaction">
128 |           <slot name="moreaction"></slot>
129 |         </template>
130 |       </div>
131 |       <!-- end action -->
132 | 
133 |       <!-- toggle columns, search and filter -->
134 |       <div class="relative flex justify-end items-center gap-2 px-4">
135 |         <!-- search -->
136 |         <div class="rounded-tl rounded-tr p-2">
137 |           <label for="search" class="sr-only">Search</label>
138 |           <div class="flex items-center align-middle relative">
139 |             <div class="pointer-events-none absolute flex items-center pl-3">
140 |               <IconSearch class="size-4" />
141 |             </div>
142 |             <InputText
143 |               autocomplete="off"
144 |               @input="onSearchInput"
145 |               v-model="filter.search"
146 |               placeholder="Search"
147 |               name="search"
148 |               class="w-min-sm py-2 pl-9"
149 |               v-on:keyup.escape="clearSearch"
150 |             />
151 |             <div
152 |               v-if="filter.search"
153 |               class="absolute left-[90%] hover:cursor-pointer flex items-center"
154 |               @click="clearSearch"
155 |             >
156 |               <IconX class="size-4" />
157 |             </div>
158 |           </div>
159 |         </div>
160 |         <!-- end search -->
161 | 
162 |         <!-- custom filter -->
163 |         <div class="relative" v-if="props.filters.length > 1">
164 |           <IconFilterFilled
165 |             class="size-6 hover:cursor-pointer text-gray-600 hover:text-gray-400 dark:hover:text-gray-300 dark:text-gray-400"
166 |             @click="openFilter = !openFilter"
167 |           />
168 |           <span
169 |             class="absolute -top-2 -right-2 bg-slate-100 dark:bg-inherit px-1 text-xs rounded-3xl"
170 |           >
171 |             {{ filterCount }}
172 |           </span>
173 |         </div>
174 |         <Transition
175 |           enter-active-class="transition-opacity duration-500 ease-in-out"
176 |           leave-active-class="transition-opacity duration-500 ease-in-out"
177 |           enter-from-class="opacity-0"
178 |           enter-to-class="opacity-100"
179 |           leave-from-class="opacity-100"
180 |           leave-to-class="opacity-0"
181 |         >
182 |           <div
183 |             v-if="openFilter"
184 |             v-click-away="() => (openFilter = false)"
185 |             class="z-10 bg-white dark:bg-gray-800 dark:text-white w-1/2 absolute top-[85%] border border-slate-300 rounded-lg p-2"
186 |           >
187 |             <div class="flex flex-col flex-wrap gap-2 text-slate-700">
188 |               <div class="flex justify-between">
189 |                 <span class="font-semibold dark:text-gray-100">Filter</span>
190 |                 <button
191 |                   type="button"
192 |                   class="text-red-400 font-semibold hover:text-red-500 text-sm"
193 |                   @click="resetFilter"
194 |                 >
195 |                   Reset
196 |                 </button>
197 |               </div>
198 | 
199 |               <template v-if="$slots.filter">
200 |                 <slot name="filter" :filter="filter"></slot>
201 |               </template>
202 |             </div>
203 |           </div>
204 |         </Transition>
205 |         <!-- end custom filter -->
206 | 
207 |         <!-- toggle columns -->
208 |         <IconTableColumn
209 |           class="size-6 hover:cursor-pointer text-gray-600 hover:text-gray-400 dark:hover:text-gray-300 dark:text-gray-400"
210 |           @click="openToggleColumn = !openToggleColumn"
211 |         />
212 |         <Transition
213 |           enter-active-class="transition-opacity duration-500 ease-in-out"
214 |           leave-active-class="transition-opacity duration-500 ease-in-out"
215 |           enter-from-class="opacity-0"
216 |           enter-to-class="opacity-100"
217 |           leave-from-class="opacity-100"
218 |           leave-to-class="opacity-0"
219 |         >
220 |           <div
221 |             v-if="openToggleColumn"
222 |             v-click-away="() => (openToggleColumn = false)"
223 |             class="z-10 bg-white dark:bg-gray-800 dark:text-white w-1/2 absolute top-[85%] border border-slate-300 rounded-lg p-4"
224 |           >
225 |             <div class="flex flex-col flex-wrap gap-4 text-slate-500 text-sm">
226 |               <span class="font-semibold dark:text-gray-100">Toggle Column</span>
227 |               <div class="flex flex-col gap-2 justify-between">
228 |                 <div
229 |                   v-for="column in columns"
230 |                   :key="column.key"
231 |                   class="flex gap-3 items-center"
232 |                 >
233 |                   <Checkbox
234 |                     :id="column.key"
235 |                     v-model="column.visible"
236 |                     @change="toggleColumn(column.key)"
237 |                     class="text-slate-500 focus:ring-0"
238 |                   />
239 |                   <label class="block font-medium dark:text-gray-100">{{
240 |                     column.label
241 |                   }}</label>
242 |                 </div>
243 |               </div>
244 |             </div>
245 |           </div>
246 |         </Transition>
247 |         <!-- end toggle columns -->
248 | 
249 |         <template v-if="$slots.createaction">
250 |           <slot name="createaction"></slot>
251 |         </template>
252 |       </div>
253 |       <!-- end toggle columns, search and filter -->
254 |     </div>
255 |     <!-- end search dan filter -->
256 | 
257 |     <!-- selected rows indicator -->
258 |     <div
259 |       class="flex justify-between items-center border-t bg-slate-100 dark:bg-gray-800 dark:text-white py-2 px-4 text-sm font-bold"
260 |       v-if="selectedRows.length"
261 |     >
262 |       <span>{{ selectedRows.length }} records selected</span>
263 |       <div class="flex justify-between items-center gap-4" v-if="items.total">
264 |         <button @click="selectAllRows">
265 |           <span class="text-yellow-500 hover:text-yellow-700"
266 |             >Select all ({{ items.total }})</span
267 |           >
268 |         </button>
269 |         <button @click="clearSelectedRows">
270 |           <span class="text-red-500 hover:text-red-700">Deselect all</span>
271 |         </button>
272 |       </div>
273 |     </div>
274 |     <!-- end selected rows indicator -->
275 | 
276 |     <!-- selected filter indicator -->
277 |     <div
278 |       class="flex justify-between items-center border-t border-slate-300 dark:border-gray-300 bg-slate-100 py-2 px-4 dark:bg-gray-800 dark:text-white"
279 |       v-if="route().params.filter"
280 |     >
281 |       <div class="text-sm flex gap-2 items-center">
282 |         <span>Filter aktif</span>
283 |         <div
284 |           class="border border-slate-300 px-1 rounded"
285 |           v-for="key in Object.keys(route().params.filter)"
286 |           :key="key"
287 |         >
288 |           <div
289 |             class="flex gap-1 justify-between items-center hover:cursor-pointer hover:text-neutral-500"
290 |             @click="removeFilter(key)"
291 |           >
292 |             <span>{{ key }} : {{ route().params.filter[key] }}</span>
293 |             <IconX class="size-4" />
294 |           </div>
295 |         </div>
296 |       </div>
297 |       <button>
298 |         <IconX class="size-4" @click="clearSearchAndFilter"></IconX>
299 |       </button>
300 |     </div>
301 |     <!-- end selected filter indicator -->
302 | 
303 |     <!-- table title section -->
304 |     <div
305 |       v-if="title"
306 |       class="px-4 py-2 text-slate-700 font-bold border-t border-slate-300 bg-slate-100 dark:bg-gray-800 dark:text-white"
307 |     >
308 |       <h1>{{ title }}</h1>
309 |     </div>
310 |     <!-- end table title section -->
311 | 
312 |     <!-- table -->
313 |     <div class="overflow-x-auto border-t border-slate-300" v-if="items.data.length">
314 |       <table class="w-full table-auto text-left text-sm">
315 |         <!-- table head -->
316 |         <thead>
317 |           <tr>
318 |             <th class="bg-slate-100 dark:bg-gray-800 dark:text-white px-4 py-2">
319 |               <input
320 |                 type="checkbox"
321 |                 id="selectAll"
322 |                 v-model="selectAll"
323 |                 @change="toggleSelectAll"
324 |                 class="text-slate-500 h-4 w-4 rounded focus:ring-0"
325 |               />
326 |             </th>
327 |             <th
328 |               v-for="column in visibleColumns"
329 |               :key="column.key"
330 |               class="bg-slate-100 dark:bg-gray-800 dark:text-white px-4 py-2"
331 |               :class="column.sortable ? 'hover:cursor-pointer hover:text-slate-500' : ''"
332 |               @click="column.sortable ? sortColumn(column.key) : ''"
333 |             >
334 |               <span> {{ column.label }}</span>
335 |               <span
336 |                 v-if="sortKey === column.key"
337 |                 :class="{
338 |                   'text-red-500': sortOrder === 'desc',
339 |                   'text-green-500': sortOrder === 'asc',
340 |                 }"
341 |               >
342 |                 {{ sortOrder === "asc" ? "↑" : "↓" }}
343 |               </span>
344 |             </th>
345 |             <th class="bg-slate-100 dark:bg-gray-800 dark:text-white px-4 py-2">
346 |               Action
347 |             </th>
348 |           </tr>
349 |         </thead>
350 |         <!-- end table head -->
351 | 
352 |         <!-- table body -->
353 |         <tbody class="bg-white dark:bg-gray-800 dark:text-white">
354 |           <tr class="border-t border-slate-300" v-for="item in items.data" :key="item.id">
355 |             <!-- checkbox -->
356 |             <td class="whitespace-nowrap px-4 py-2 font-medium">
357 |               <input
358 |                 type="checkbox"
359 |                 :id="item.id"
360 |                 v-model="selectedRows"
361 |                 :value="item.id"
362 |                 class="text-slate-500 h-4 w-4 rounded focus:ring-0"
363 |               />
364 |             </td>
365 | 
366 |             <!-- columns item -->
367 |             <td
368 |               class="whitespace-nowrap px-4 py-2 font-medium"
369 |               v-for="column in visibleColumns"
370 |               :key="column.key"
371 |             >
372 |               {{ item[column.key] }}
373 |             </td>
374 | 
375 |             <!-- actions -->
376 |             <td class="whitespace-nowrap px-4 py-2 font-medium">
377 |               <template v-if="$slots.rowaction">
378 |                 <slot
379 |                   name="rowaction"
380 |                   :item-id="item.id"
381 |                   :confirmDelete="confirmDelete"
382 |                   :route="route"
383 |                   :module="props.module"
384 |                 ></slot>
385 |               </template>
386 |             </td>
387 |             <!-- end actions -->
388 |           </tr>
389 |         </tbody>
390 |         <!-- end table body -->
391 |       </table>
392 |     </div>
393 |     <!-- end table -->
394 | 
395 |     <!-- table empty state -->
396 |     <div
397 |       v-if="!items.data.length"
398 |       class="text-center p-4 h-72 flex flex-col justify-center items-center gap-2 border-t border-slate-300 dark:border-gray-300"
399 |     >
400 |       <IconX class="size-7"></IconX>
401 |       <span>No Data</span>
402 |     </div>
403 |     <!-- end table empty state -->
404 | 
405 |     <!-- table pagination -->
406 |     <div
407 |       class="border-t border-slate-300 dark:border-gray-300 flex justify-between items-center px-4 py-2 dark:text-white"
408 |       v-if="items.data.length"
409 |     >
410 |       <span class="text-sm hidden md:block" v-if="items.total && items.from && items.to">
411 |         Showing {{ items.from }} to {{ items.to }} of {{ items.total }} entries
412 |       </span>
413 |       <span
414 |         class="text-sm hidden md:block"
415 |         v-else-if="items.total == undefined && items.from && items.to"
416 |       >
417 |         Showing {{ items.from }} to {{ items.to }}
418 |       </span>
419 |       <div
420 |         class="rounded-lg text-sm grid grid-cols-2 divide-x-4 divide-slate-400 items-center justify-evenly"
421 |       >
422 |         <span class="hidden sm:block">Showing</span>
423 |         <select
424 |           v-model="pageOptionValue"
425 |           @change="changePageOptions"
426 |           class="hidden sm:block border-none focus:ring-0 dark:bg-gray-800"
427 |         >
428 |           <option v-for="option in pageOptions" :key="option" :value="option">
429 |             <span class="text-sm">{{ option }}</span>
430 |           </option>
431 |         </select>
432 |       </div>
433 |       <Pagination
434 |         :next-page-url="items.next_page_url"
435 |         :prev-page-url="items.prev_page_url"
436 |         :links="items.links"
437 |       />
438 |     </div>
439 |     <!-- end table pagination -->
440 |   </div>
441 |   <!-- end table container -->
442 | 
443 |   <!-- confirm delete dialog -->
444 |   <DeleteModal ref="confirmDeleteDialog" />
445 |   <!-- end confirm delete dialog -->
446 | </template>
447 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/TextArea.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const model = defineModel({
 3 |   type: String,
 4 |   required: true,
 5 | });
 6 | </script>
 7 | 
 8 | <template>
 9 |   <textarea v-model="model"
10 |     class="rounded-md border-0 py-1.5 text-gray-900 placeholder:text-gray-400 sm:text-sm sm:leading-6 shadow-sm
11 |     ring-1 ring-inset ring-gray-300  focus:ring-2 focus:ring-inset focus:ring-indigo-600 " />
12 | </template>


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Toast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Transition name="fade" :duration="1000" mode="in-out">
 3 |     <div
 4 |       v-if="isVisible"
 5 |       class="border border-gray-200 dark:border-gray-100 shadow-xl rounded-lg"
 6 |     >
 7 |       <div
 8 |         class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 dark:divide-gray-700 divide-x divide-gray-200"
 9 |       >
10 |         <!-- icon -->
11 |         <div
12 |           v-if="type !== 'empty'"
13 |           :class="{
14 |             'bg-blue-700 dark:bg-blue-600': true,
15 |             'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg': true,
16 |             'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200':
17 |               type == 'danger',
18 |             'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200 ':
19 |               type == 'success',
20 |             'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200':
21 |               type == 'warning',
22 |             'text-sky-500 bg-sky-100 dark:bg-sky-700 dark:text-sky-200':
23 |               type == 'info',
24 |           }"
25 |         >
26 |           <IconInfoCircle class="size-5" v-if="type == 'info'" />
27 |           <IconX class="size-5" v-if="type == 'danger'" />
28 |           <IconCheck class="size-5" v-if="type == 'success'" />
29 |           <IconAlertTriangle class="size-5" v-if="type == 'warning'" />
30 |         </div>
31 |         <!-- end icon -->
32 | 
33 |         <!-- message -->
34 |         <div
35 |           :class="[
36 |             'text-sm font-normal pl-3',
37 |             {
38 |               'ml-3': type !== 'empty',
39 |             },
40 |           ]"
41 |         >
42 |           {{ message }}
43 |         </div>
44 |         <!-- end message -->
45 | 
46 |         <!-- close button -->
47 |         <button
48 |           aria-label="Close"
49 |           class="border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
50 |           type="button"
51 |           @click="onClose"
52 |         >
53 |           <span class="sr-only">Close</span>
54 |           <IconX class="w-5 h-5" />
55 |         </button>
56 |         <!-- end close button -->
57 |       </div>
58 |     </div>
59 |   </Transition>
60 | </template>
61 | 
62 | <script setup>
63 | import {
64 |   IconAlertTriangle,
65 |   IconCheck,
66 |   IconInfoCircle,
67 |   IconX,
68 | } from "@tabler/icons-vue";
69 | import { onMounted, ref } from "vue";
70 | const props = defineProps({
71 |   message: String,
72 |   type: String,
73 | });
74 | const isVisible = ref(true);
75 | 
76 | const hideMessage = () => {
77 |   isVisible.value = false;
78 | };
79 | 
80 | onMounted(() => {
81 |   isVisible.value = true;
82 |   setTimeout(() => hideMessage(), 5000);
83 | });
84 | 
85 | const onClose = () => {
86 |   isVisible.value = false;
87 | };
88 | </script>
89 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Toggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <SwitchGroup as="div" class="flex items-center justify-between">
 3 |     <span class="flex flex-grow flex-col">
 4 |       <SwitchDescription as="span" class="text-sm text-gray-500">{{ description }}</SwitchDescription>
 5 |     </span>
 6 |         <Switch v-model="enabled"
 7 |                 :class="[enabled ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2']">
 8 |             <span aria-hidden="true"
 9 |                   :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']"/>
10 |         </Switch>
11 |     </SwitchGroup>
12 | </template>
13 | 
14 | <script setup>
15 | import {Switch, SwitchDescription, SwitchGroup} from '@headlessui/vue'
16 | 
17 | defineProps({
18 |     description: {
19 |         type: String,
20 |         default: ''
21 |     }
22 | })
23 | 
24 | const enabled = defineModel({
25 |     required: true,
26 |     default: false
27 | })
28 | </script>
29 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/ToggleDarkMode.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted, ref } from "vue";
 3 | import { IconMoon, IconSun } from "@tabler/icons-vue";
 4 | 
 5 | const colorMode = ref(localStorage.getItem("color-mode") || "light");
 6 | 
 7 | onMounted(() => {
 8 |   const rootElement = document.documentElement;
 9 |   if (colorMode.value === "light") {
10 |     rootElement.classList.remove("dark");
11 |   } else {
12 |     rootElement.classList.add("dark");
13 |   }
14 | });
15 | 
16 | const toggleColorMode = () => {
17 |   colorMode.value = colorMode.value === "light" ? "dark" : "light";
18 |   localStorage.setItem("color-mode", colorMode.value);
19 |   const rootElement = document.documentElement;
20 |   if (colorMode.value === "light") {
21 |     rootElement.classList.remove("dark");
22 |   } else {
23 |     rootElement.classList.add("dark");
24 |   }
25 | };
26 | </script>
27 | 
28 | <template>
29 |   <button
30 |     class="inline-flex items-center p-2 focus:outline-none rounded-md"
31 |     @click="toggleColorMode"
32 |   >
33 |     <IconSun class="size-4" v-if="colorMode === 'light'" />
34 |     <IconMoon class="size-4 stroke-white" v-else />
35 |   </button>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/debounce.js:
--------------------------------------------------------------------------------
 1 | function debounce(func, timeout = 300) {
 2 |     let timer
 3 |     return (...args) => {
 4 |         clearTimeout(timer)
 5 |         timer = setTimeout(() => {
 6 |             func.apply(this, args)
 7 |         }, timeout)
 8 |     }
 9 | }
10 | 
11 | export default debounce
12 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/menu-items.js:
--------------------------------------------------------------------------------
 1 | import { ref } from "vue";
 2 | import { usePage } from "@inertiajs/vue3";
 3 | import {
 4 |   IconHome,
 5 |   IconSettings,
 6 |   IconUsers,
 7 | } from "@tabler/icons-vue";
 8 | 
 9 | export function useMenuItems() {
10 |     /**
11 |      * id harus unique
12 |      * semua attribut wajib diisi
13 |      */
14 |     const menuItems = ref([
15 |         {
16 |             id: 1,
17 |             title: "Dashboard",
18 |             routeName: "dashboard",
19 |             component: "Dashboard",
20 |             icon: IconHome,
21 |         },
22 |         {
23 |             id: 2,
24 |             title: "Core",
25 |             children: [
26 |             {
27 |                 id: 21,
28 |                 title: "User",
29 |                 routeName: "users.index",
30 |                 component: "User/Index",
31 |                 icon: IconUsers,
32 |             },
33 |             {
34 |                 id: 22,
35 |                 title: "Setting",
36 |                 routeName: "settings.index",
37 |                 component: "Setting/Index",
38 |                 icon: IconSettings,
39 |             },
40 |             ],
41 |         },
42 |         {
43 |             id: 3,
44 |             title: usePage().props.auth.user.name,
45 |             class: "xl:hidden",
46 |             children: [
47 |             {
48 |                 id: 31,
49 |                 title: "Profile",
50 |                 routeName: "profile.edit",
51 |                 component: "Profile/Edit",
52 |                 icon: null,
53 |                 class: "xl:hidden",
54 |             },
55 |             {
56 |                 id: 32,
57 |                 title: "Logout",
58 |                 routeName: "logout",
59 |                 component: "",
60 |                 icon: null,
61 |                 method: "post",
62 |                 class: "xl:hidden",
63 |             },
64 |             ],
65 |         }
66 |     ]);
67 |     return {
68 |         menuItems
69 |     };
70 | }


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-action.js:
--------------------------------------------------------------------------------
 1 | import { ref } from "vue";
 2 | 
 3 | // action and confirm dialog handler section
 4 | export function useTableAction() {
 5 |   // bulk action button state
 6 |   const openAction = ref(false);
 7 |   // reference to delete modal component -> DeleteModal.vue
 8 |   const confirmDeleteDialog = ref(null);
 9 | 
10 |   const confirmDelete = (deleteRoute, message) => {
11 |     confirmDeleteDialog.value.openModal(deleteRoute, message);
12 |   };
13 |   return {
14 |     openAction,
15 |     confirmDeleteDialog,
16 |     confirmDelete,
17 |   };
18 | }
19 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-filter.js:
--------------------------------------------------------------------------------
  1 | import debounce from "./debounce";
  2 | import { computed, reactive, ref, watchEffect } from "vue";
  3 | import { router } from "@inertiajs/vue3";
  4 | 
  5 | // filter handler section
  6 | export function useTableFilter(props, selectedRows, selectAll) {
  7 |   const openFilter = ref(false);
  8 |   // example filter param ?filter[name]=budi
  9 |   // example filter param ?filter[search]=budi
 10 |   const filter = reactive({});
 11 | 
 12 |   // function to initialize default value from dynamic filter
 13 |   const updateReactiveFilters = (items) => {
 14 |     Object.keys(filter).forEach((key) => {
 15 |       delete filter[key];
 16 |     });
 17 |     items.forEach((item) => {
 18 |       filter[item] = "";
 19 |     });
 20 |   };
 21 | 
 22 |   // initialize default value params filter
 23 |   updateReactiveFilters(props.filters);
 24 | 
 25 |   /**
 26 |    * watch changed params filter
 27 |    * when user typing in filter input
 28 |    */
 29 |   props.filters.forEach((item) => {
 30 |     watchEffect(() => {
 31 |       if (filter[item] !== "") {
 32 |         debouncedFilter();
 33 |       }
 34 |     });
 35 |   });
 36 | 
 37 |   // input debounce filter
 38 |   const debouncedFilter = debounce(() => {
 39 |     applyFilter();
 40 |   }, 300);
 41 | 
 42 |   // function to apply filter
 43 |   const applyFilter = () => {
 44 |     let params = {
 45 |       filter: {},
 46 |     };
 47 |     for (const [key, value] of Object.entries(props.filters)) {
 48 |       if (filter[value] !== "") {
 49 |         params.filter[value] = filter[value];
 50 |       }
 51 |     }
 52 |     router.get(route(`${props.module}.index`), params, {
 53 |       preserveState: true,
 54 |     });
 55 |     selectAll.value = false;
 56 |     selectedRows.value = [];
 57 |   };
 58 | 
 59 |   // reset filter
 60 |   const resetFilter = () => {
 61 |     for (const [key, value] of Object.entries(props.filters)) {
 62 |       if (value == "search") {
 63 |         continue;
 64 |       }
 65 |       filter[value] = "";
 66 |     }
 67 |     applyFilter();
 68 |   };
 69 | 
 70 |   // when user typing on input search
 71 |   const onSearchInput = () => {
 72 |     debouncedFilter();
 73 |   };
 74 | 
 75 |   // clear search
 76 |   const clearSearch = () => {
 77 |     filter.search = "";
 78 |     applyFilter();
 79 |   };
 80 | 
 81 |   // clear search and filter
 82 |   const clearSearchAndFilter = () => {
 83 |     clearSearch();
 84 |     resetFilter();
 85 |   };
 86 | 
 87 |   // clear specific filter or clear search
 88 |   const removeFilter = (key) => {
 89 |     if (key == "search") {
 90 |       clearSearch();
 91 |     } else {
 92 |       filter[key] = "";
 93 |     }
 94 |     applyFilter();
 95 |   };
 96 | 
 97 |   // count applied filter
 98 |   const filterCount = computed(() => {
 99 |     let count = 0;
100 |     for (const [key, value] of Object.entries(props.filters)) {
101 |       if (filter[value] != "") {
102 |         count++;
103 |       }
104 |     }
105 |     return count;
106 |   });
107 | 
108 |   return {
109 |     filterCount,
110 |     openFilter,
111 |     filter,
112 |     resetFilter,
113 |     onSearchInput,
114 |     clearSearch,
115 |     clearSearchAndFilter,
116 |     removeFilter,
117 |   };
118 | }
119 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-logic.js:
--------------------------------------------------------------------------------
 1 | import { router } from "@inertiajs/vue3";
 2 | import { ref } from "vue";
 3 | import { useTableFilter } from "./table-filter";
 4 | import { useTableRow } from "./table-row";
 5 | import { useTableSort } from "./table-sort";
 6 | import { useTableToggleColumn } from "./table-toggle-column";
 7 | import { useTableAction } from "./table-action";
 8 | 
 9 | export function useTableLogic(props) {
10 |   // spinner modal reference
11 |   const isLoading = ref(false);
12 | 
13 |   const {
14 |     selectedRows,
15 |     selectAll,
16 |     toggleSelectAll,
17 |     selectAllRows,
18 |     clearSelectedRows,
19 |   } = useTableRow(props, isLoading);
20 | 
21 |   const {
22 |     filter,
23 |     resetFilter,
24 |     onSearchInput,
25 |     clearSearch,
26 |     clearSearchAndFilter,
27 |     removeFilter,
28 |     filterCount,
29 |     openFilter,
30 |   } = useTableFilter(props, selectedRows, selectAll);
31 | 
32 |   const { sortKey, sortOrder, sortColumn } = useTableSort(props);
33 | 
34 |   const { columns, visibleColumns, openToggleColumn, toggleColumn } =
35 |     useTableToggleColumn(props);
36 | 
37 |   const { openAction, confirmDeleteDialog, confirmDelete } = useTableAction();
38 | 
39 |   // page option handler section
40 |   const pageOptionValue = ref(props.limit);
41 |   const changePageOptions = () => {
42 |     router.get(
43 |       route(`${props.module}.index`),
44 |       { limit: pageOptionValue.value },
45 |       { preserveState: true },
46 |     );
47 |   };
48 | 
49 |   return {
50 |     props,
51 |     openFilter,
52 |     filter,
53 |     filterCount,
54 |     selectedRows,
55 |     selectAll,
56 |     sortKey,
57 |     sortOrder,
58 |     openAction,
59 |     confirmDeleteDialog,
60 |     columns,
61 |     visibleColumns,
62 |     openToggleColumn,
63 |     pageOptionValue,
64 |     isLoading,
65 |     resetFilter,
66 |     onSearchInput,
67 |     clearSearch,
68 |     clearSearchAndFilter,
69 |     removeFilter,
70 |     toggleSelectAll,
71 |     selectAllRows,
72 |     clearSelectedRows,
73 |     sortColumn,
74 |     confirmDelete,
75 |     toggleColumn,
76 |     changePageOptions,
77 |   };
78 | }
79 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-row.js:
--------------------------------------------------------------------------------
 1 | import { ref } from "vue";
 2 | 
 3 | // select row handler section
 4 | export function useTableRow(props, isLoading) {
 5 |   const selectedRows = ref([]);
 6 |   const selectAll = ref(false);
 7 | 
 8 |   // select all visible rows
 9 |   const toggleSelectAll = () => {
10 |     if (selectAll.value) {
11 |       selectedRows.value = props.items.data.map((item) => item.id);
12 |     } else {
13 |       selectedRows.value = [];
14 |     }
15 |   };
16 | 
17 |   // select all rows even if it is not visible
18 |   const selectAllRows = async () => {
19 |     if (selectedRows.value.length < props.allIds.length) {
20 |       isLoading.value = true;
21 |       await new Promise((r) => setTimeout(r, 100));
22 |       selectAll.value = true;
23 |       selectedRows.value = props.allIds;
24 |       await new Promise((r) => setTimeout(r, 100));
25 |       isLoading.value = false;
26 |     }
27 |   };
28 | 
29 |   // clear all selected rows
30 |   const clearSelectedRows = () => {
31 |     selectedRows.value = [];
32 |     selectAll.value = false;
33 |   };
34 | 
35 |   return {
36 |     selectedRows,
37 |     selectAll,
38 |     toggleSelectAll,
39 |     selectAllRows,
40 |     clearSelectedRows,
41 |   };
42 | }
43 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-sort.js:
--------------------------------------------------------------------------------
 1 | import { router } from "@inertiajs/vue3";
 2 | import { ref } from "vue";
 3 | 
 4 | // sorting handler section
 5 | export function useTableSort(props) {
 6 |   // example sort param ?sort=-created_at
 7 |   const defaultSorts = props.defaultSort.split("-");
 8 |   const sortKey = ref(defaultSorts[1] || defaultSorts[0]);
 9 |   const sortOrder = ref(defaultSorts.length > 1 ? "desc" : "asc");
10 | 
11 |   // function to sort column
12 |   const sortColumn = (key) => {
13 |     if (sortKey.value === key) {
14 |       sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
15 |     } else {
16 |       sortKey.value = key;
17 |       sortOrder.value = "asc";
18 |     }
19 |     const sort =
20 |       sortOrder.value === "desc" ? `-${sortKey.value}` : sortKey.value;
21 |     router.get(
22 |       route(`${props.module}.index`),
23 |       { sort: sort },
24 |       { preserveState: true },
25 |     );
26 |   };
27 | 
28 |   return {
29 |     sortKey,
30 |     sortOrder,
31 |     sortColumn,
32 |   };
33 | }
34 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/Vien/Utils/table-toggle-column.js:
--------------------------------------------------------------------------------
 1 | import { computed, ref } from "vue";
 2 | 
 3 | // toggle column handler section
 4 | export function useTableToggleColumn(props) {
 5 |   const columns = ref(props.columns);
 6 |   const openToggleColumn = ref(false);
 7 | 
 8 |   // recalculate visible columns if columns is changed
 9 |   const visibleColumns = computed(() =>
10 |     columns.value.filter((column) => column.visible),
11 |   );
12 | 
13 |   // function to toggle column make it visible or hidden
14 |   const toggleColumn = (key) => {
15 |     const column = columns.value.find((col) => col.key === key);
16 |     column.visible = !column.visible;
17 |   };
18 | 
19 |   return {
20 |     columns,
21 |     visibleColumns,
22 |     openToggleColumn,
23 |     toggleColumn,
24 |   };
25 | }
26 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/database/factories/SettingFactory.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Database\Factories;
 4 | 
 5 | use Illuminate\Database\Eloquent\Factories\Factory;
 6 | 
 7 | /**
 8 |  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Setting>
 9 |  */
10 | class SettingFactory extends Factory
11 | {
12 |     /**
13 |      * Define the model's default state.
14 |      *
15 |      * @return array<string, mixed>
16 |      */
17 |     public function definition(): array
18 |     {
19 |         return [
20 |             'key'   => $this->faker->word,
21 |             'value' => $this->faker->sentence,
22 |         ];
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/database/migrations/0001_01_01_000003_create_settings_tables.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Database\Migrations\Migration;
 4 | use Illuminate\Database\Schema\Blueprint;
 5 | use Illuminate\Support\Facades\Schema;
 6 | 
 7 | return new class extends Migration
 8 | {
 9 |     /**
10 |      * Run the migrations.
11 |      */
12 |     public function up(): void
13 |     {
14 |         Schema::create('settings', function (Blueprint $table) {
15 |             $table->id();
16 |             $table->string('key')->unique();
17 |             $table->string('value');
18 |             $table->timestamps();
19 |         });
20 |     }
21 | 
22 |     /**
23 |      * Reverse the migrations.
24 |      */
25 |     public function down(): void
26 |     {
27 |         Schema::dropIfExists('settings');
28 |     }
29 | };
30 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/database/seeders/DatabaseSeeder.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Database\Seeders;
 4 | 
 5 | // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 6 | 
 7 | use App\Models\Setting;
 8 | use App\Models\User;
 9 | use Illuminate\Database\Seeder;
10 | 
11 | class DatabaseSeeder extends Seeder
12 | {
13 |     /**
14 |      * Seed the application's database.
15 |      */
16 |     public function run(): void
17 |     {
18 |         User::factory()->create([
19 |             'name'     => 'Test User',
20 |             'email'    => 'test@example.com',
21 |             'password' => bcrypt('password'),
22 |         ]);
23 |         Setting::factory(20)->create();
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/stubs/inertia-vue/routes/web.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use App\Http\Controllers\ProfileController;
 4 | use App\Http\Controllers\SettingController;
 5 | use App\Http\Controllers\UserController;
 6 | use Illuminate\Foundation\Application;
 7 | use Illuminate\Support\Facades\Route;
 8 | use Inertia\Inertia;
 9 | 
10 | Route::get('/', function () {
11 |     return Inertia::render('Welcome', [
12 |         'canLogin'       => Route::has('login'),
13 |         'canRegister'    => Route::has('register'),
14 |         'laravelVersion' => Application::VERSION,
15 |         'phpVersion'     => PHP_VERSION,
16 |     ]);
17 | });
18 | 
19 | Route::middleware(['auth', 'verified'])->group(function () {
20 |     Route::get('/dashboard', function () {
21 |         return Inertia::render('Dashboard');
22 |     })->name('dashboard');
23 |     Route::delete('users/bulk-delete', [UserController::class, 'bulkDestroy'])->name('users.bulk-delete');
24 |     Route::resource('users', UserController::class);
25 |     Route::delete('settings/bulk-delete', [SettingController::class, 'bulkDestroy'])->name('settings.bulk-delete');
26 |     Route::resource('settings', SettingController::class);
27 | });
28 | 
29 | Route::middleware('auth')->group(function () {
30 |     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
31 |     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
32 |     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
33 | });
34 | 
35 | require __DIR__ . '/auth.php';
36 | 


--------------------------------------------------------------------------------