fixed migrate bug

added submenu expandable to homayon-menu repsonosive

README-fa.md

@@ -18,6 +18,7 @@
 - کاهش سایز پروژه
 - UI/UX شخصی‌سازی شده
 - دوستانه تر شدن محیط توسعه
+- شخصی سازی قالب وبسایت
 
 ## مستندات 
 

README.md

@@ -17,6 +17,7 @@
 - Project size compression
 - UI/UX is more specific
 - Developer Friendlier
+- Custom theme design 
 
 
 ## Documentation

app/Console/Commands/clientAssetGenerator.php

@@ -32,8 +32,8 @@ class clientAssetGenerator extends Command
 
         $vars['xshop-background'] = $gfxes['background'] ?? '#000000';
         $vars['xshop-primary'] = $gfxes['primary'] ?? '#6e0000';
-        $vars['xshop-diff'] =  getGrayscaleTextColor($gfxes['primary']) ?? '#6e0000';
-        $vars['xshop-diff2'] =  getGrayscaleTextColor($gfxes['secondary']) ?? '#6e0000';
+        $vars['xshop-diff'] = getGrayscaleTextColor($gfxes['primary']) ?? '#6e0000';
+        $vars['xshop-diff2'] = getGrayscaleTextColor($gfxes['secondary']) ?? '#6e0000';
         $vars['xshop-secondary'] = $gfxes['secondary'] ?? '#ff0000';
         $vars['xshop-text'] = $gfxes['text'] ?? '#111111';
         $vars['xshop-border-radius'] = $gfxes['border-radius'] ?? '7px';
@@ -43,21 +43,23 @@ class clientAssetGenerator extends Command
         // prepare client.scss and add gfx variable
         $js = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW JS INTO client-custom \n import axios from 'axios'; \n window.axios = axios; \n \n window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';" . PHP_EOL;
         $variables = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom" . PHP_EOL;
+        $appVariables = '';
         foreach ($vars as $k => $var) {
-            $variables .= '$'."$k:$var;" . PHP_EOL;
+            $appVariables .= '$' . "$k:$var;" . PHP_EOL;
         }
-        $variables .= ":root{" . PHP_EOL;
+        $appVariables .= ":root{" . PHP_EOL;
         foreach ($vars as $k => $var) {
-            $variables .= "--$k:$var;" . PHP_EOL;
+            $appVariables .= "--$k:$var;" . PHP_EOL;
         }
-        $variables .= "}" . PHP_EOL . PHP_EOL;
+        $appVariables .= "}" . PHP_EOL . PHP_EOL;
 
+        file_put_contents(resource_path() . '/sass/client-custom/_app_variables.scss', $appVariables);
         // add custom scss and js
         $files = File::allFiles(resource_path() . '/sass/client-custom');
 
         foreach ($files as $file) {
             if ($file->getType() == 'file' && $file->getExtension() == 'scss') {
-                $variables .= '@import "client-custom/' .
+                $variables .= '@use "client-custom/' .
                     substr(trim($file->getBasename(), '_'), 0, -5)
                     . '";' . PHP_EOL;
             }
@@ -74,18 +76,28 @@ class clientAssetGenerator extends Command
         }
         // add parts scss & js
         foreach (Part::distinct()->get() as $part) {
-            if (filesize(__DIR__.'/../../../resources/views/segments/' . $part->segment . '/' . $part->part .'/' . $part->part . '.scss' ) > 10) {
-                $variables .= '@import "../views/segments/' . $part->segment . '/'
+            if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.scss') > 10) {
+                $variables .= '@use "../views/segments/' . $part->segment . '/'
                     . $part->part . '/' . $part->part . '";' . PHP_EOL;
             }
-            if (filesize(__DIR__.'/../../../resources/views/segments/' . $part->segment . '/' . $part->part .'/' . $part->part . '.js' ) > 10){
+            if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.js') > 10) {
                 $js .= 'import "../views/segments/' . $part->segment . '/'
                     . $part->part . '/' . $part->part . '.js";' . PHP_EOL;
             }
         }
 
         // save scss
-        file_put_contents(resource_path() . '/sass/client.scss', $variables);
-        file_put_contents(resource_path() . '/js/client.js', $js);
+        file_put_contents(resource_path() . '/sass/client.scss', $this->removeDuplicateLines($variables));
+        file_put_contents(resource_path() . '/js/client.js', $this->removeDuplicateLines( $js ));
+    }
+
+
+    // remove duplicate lines
+    private function removeDuplicateLines($text)
+    {
+        $lines = explode("\n", $text);
+        $uniqueLines = array_unique($lines);
+        $uniqueText = implode("\n", $uniqueLines);
+        return $uniqueText;
     }
 }

app/Console/Commands/makePart.php

@@ -82,7 +82,7 @@ DOC;
         file_put_contents($folderPath . '/' . $part . '.json', json_encode($detail,JSON_PRETTY_PRINT));
         file_put_contents($folderPath . '/' . ucfirst($part) . '.php', $handler);
         file_put_contents($folderPath . '/' . $part . '.scss', $scss);
-        File::copy(__DIR__.'/data/screen.png',$folderPath .'/screenshot.png');
+        File::copy(__DIR__.'/data/screen.webp',$folderPath .'/screenshot.webp');
 
 
 

app/Http/Controllers/Admin/AreaController.php

@@ -100,7 +100,7 @@ class AreaController extends Controller
      */
     public function image($segment, $part)
     {
-        return response()->file(resource_path() . '/views/segments/' . $segment . '/' . $part . '/screenshot.png', ['Content-Type' => 'image/png']);
+        return response()->file(resource_path() . '/views/segments/' . $segment . '/' . $part . '/screenshot.webp', ['Content-Type' => 'image/png']);
     }
 
     public function update(Request $request, Area $area)

package.json

@@ -14,7 +14,8 @@
         "laravel-vite-plugin": "^1.0",
         "sass": "^1.56.1",
         "vite": "^5.0",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "path": "^0.12.7"
     },
     "dependencies": {
         "bs5-lightbox": "^1.8.3",

resources/js/app.js

@@ -19,7 +19,7 @@ import ToastPlugin from 'vue-toast-notification';
 import {useToast} from 'vue-toast-notification';
 import store from "./components/libs/store.js";
 import chartjs from 'chart.js/auto';
-import './panel/raw.js';
+// import './panel/raw.js';
 import './panel/navbar.js';
 import './panel/list-checkboxs.js';
 import './panel/general-events.js';

resources/js/client-custom/customerActions.js

@@ -5,7 +5,7 @@ window.addEventListener('load', function () {
     document.querySelectorAll('.fav-btn')?.forEach(function (el) {
         el.addEventListener('click', async function () {
             let resp = await axios.get(favUrl+this.getAttribute('data-slug'));
-            if (resp.data.success){
+            if (resp.data.OK){
                 this.setAttribute('data-is-fav',resp.data.data);
                 window.$toast.success(resp.data.message);
             }else {
@@ -16,7 +16,7 @@ window.addEventListener('load', function () {
     document.querySelectorAll('.compare-btn')?.forEach(function (el) {
         el.addEventListener('click', async function () {
             let resp = await axios.get(compUrl+this.getAttribute('data-slug'));
-            if (resp.data.success){
+            if (resp.data.OK){
                 window.$toast.success(resp.data.message);
             }else {
                 window.$toast.error("Error!");
@@ -28,7 +28,7 @@ window.addEventListener('load', function () {
         el.addEventListener('click', async function (e) {
             e.preventDefault();
             let resp = await axios.get(this.getAttribute('href'));
-            if (resp.data.success){
+            if (resp.data.OK){
                 window.$toast.success(resp.data.message);
                 document.querySelectorAll('.card-count')?.forEach(function (el2) {
                    el2.innerText = resp.data.data.count;

resources/js/client-vue/vueDateTimePickerClient.vue

@@ -918,7 +918,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/FontAwesomeIconPicker.vue

@@ -2574,7 +2574,6 @@ export default {
 }
 
 #icon-dropdown{
-    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/MetaInput.vue

@@ -47,7 +47,7 @@
                     </template>
                     <template v-if="prop.type == 'multi'">
                         <searchable-multi-select :items="prop.optionList" value-field="value"
-                                                 v-model="meta[prop.name]"></searchable-multi-select>   
+                                                 v-model="meta[prop.name]"></searchable-multi-select>
                     </template>
                     <template v-if="prop.type == 'date'">
                         <vue-date-time-picker v-model="meta[prop.name]"></vue-date-time-picker>
@@ -353,7 +353,6 @@ export default {
     background: #00000033;
     backdrop-filter: blur(5px);
     z-index: 10;
-    //display: none;
 }
 
 .img-index{

resources/js/components/RemixIconPicker.vue

@@ -2695,7 +2695,6 @@ export default {
 }
 
 #icon-dropdown{
-    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/vueDateRangePicker.vue

@@ -943,7 +943,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueDateTimePicker.vue

@@ -918,7 +918,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueJalaliCalendar.vue

@@ -23,6 +23,8 @@
                 </div>
             </div>
             <table id="vue-cal-table">
+                <thead>
+
                 <tr>
                     <th @click="selectByWeekDay(0)">
                         {{ __("Saturday") }}
@@ -46,6 +48,10 @@
                         {{ __("Friday") }}
                     </th>
                 </tr>
+                </thead>
+                <tbody>
+
+
                 <tr v-for="(tr,i) in monthArray">
                     <td v-for="(td,j) in tr" @mouseenter="hover" @click="selecting(td)" :class="getClass(td)" :title="td.date+' '+td.pDate"
                         :data-timpstamp="td.unixTimeStamp">
@@ -55,6 +61,7 @@
                         </template>
                     </td>
                 </tr>
+                </tbody>
             </table>
             <input type="hidden" :value="JSON.stringify(selected)" :name="inputName">
         </div>

resources/sass/app.scss

@@ -1,9 +1,18 @@
+@use "sass:color";
 // Fonts
-@import 'vazirmatn/Vazirmatn-font-face.css';
-@import "remixicon/fonts/remixicon.css";
-@import "vue-toast-notification/dist/theme-bootstrap.css";
+@use 'vazirmatn/Vazirmatn-font-face.css';
+@use "remixicon/fonts/remixicon.css";
+@use "vue-toast-notification/dist/theme-bootstrap.css";
 // Variables
-@import 'panel/variables';
+@use 'panel/variables';
+
+@use "panel/common";
+@use "panel/raw";
+@use "panel/fix";
+@use "panel/navbar";
+@use "panel/breadcrumbs";
+@use "panel/item-list";
+@use "panel/steps";
 
 // Bootstrap
 //@import 'bootstrap/scss/bootstrap';
@@ -53,7 +62,7 @@ a{
 
     >aside{
         background-image: url("../images/pattern.png");
-        background-color: lighten($body-bg,7);
+        background-color: color.adjust(variables.$body-bg, $lightness: 7%);
         position: relative;
     }
     &.sided{
@@ -65,10 +74,3 @@ a{
 }
 
 
-@import "panel/common";
-@import "panel/raw";
-@import "panel/fix";
-@import "panel/navbar";
-@import "panel/breadcrumbs";
-@import "panel/item-list";
-@import "panel/steps";

resources/sass/client-custom/.gitignore

@@ -0,0 +1 @@
+_app_variables.scss

resources/sass/client-custom/_app_variables.scss

@@ -0,0 +1,19 @@
+$xshop-background:#eeeeee;
+$xshop-primary:#03b2b5;
+$xshop-diff:#ffffff;
+$xshop-diff2:#ffffff;
+$xshop-secondary:#0064c2;
+$xshop-text:#111111;
+$xshop-border-radius:7px;
+$xshop-shadow:2px 2px 4px #777777;
+:root{
+--xshop-background:#eeeeee;
+--xshop-primary:#03b2b5;
+--xshop-diff:#ffffff;
+--xshop-diff2:#ffffff;
+--xshop-secondary:#0064c2;
+--xshop-text:#111111;
+--xshop-border-radius:7px;
+--xshop-shadow:2px 2px 4px #777777;
+}
+

resources/sass/client-custom/_assetsNode.scss

@@ -1,5 +1,5 @@
-@import "remixicon/fonts/remixicon.css";
-@import "tiny-slider/dist/tiny-slider.css";
-@import "vue-toast-notification/dist/theme-bootstrap.css";
-@import "vazir-xui/font-face.css";
-@import "vazirmatn/Vazirmatn-font-face.css";
+@use "remixicon/fonts/remixicon.css";
+@use "tiny-slider/dist/tiny-slider.css";
+@use "vue-toast-notification/dist/theme-bootstrap.css";
+@use "vazir-xui/font-face.css";
+@use "vazirmatn/Vazirmatn-font-face.css";

resources/sass/panel/_common.scss

@@ -1,12 +1,14 @@
+@use "sass:color";
+@use "variables";
 body {
-    background: $body-bg;
+    background: variables.$body-bg;
 }
 
 .circle-btn {
     width: 75px;
     height: 75px;
     border-radius: 50%;
-    background: $secondary-color-panel;
+    background: variables.$secondary-color-panel;
     backdrop-filter: blur(4px);
     border: 0;
     box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred;
@@ -56,7 +58,7 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .general-form {
-    background: $lighter-color;
+    background: variables.$lighter-color;
     border-radius: 7px;
     margin-bottom: 4rem;
     position: relative;
@@ -155,11 +157,11 @@ a.btn, a.action-btn, a.circle-btn {
         color: white;
 
         &.active {
-            background: $primary-color-panel;
+            background: variables.$primary-color-panel;
         }
 
         &:hover {
-            background: rgba($primary-color-panel, .7);
+            background: rgba(variables.$primary-color-panel, .7);
         }
     }
 }
@@ -167,7 +169,7 @@ a.btn, a.action-btn, a.circle-btn {
 #setting-sections {
     section {
         display: none;
-        background: $lighter-color;
+        background: variables.$lighter-color;
         padding: 1rem;
 
         .setting-field {
@@ -206,10 +208,10 @@ a.btn, a.action-btn, a.circle-btn {
     height: 125px;
     text-align: center;
     display: block;
-    color: $text-muted;
+    color: variables.$text-muted;
 
     &:hover {
-        color: lighten($primary-color-panel, 10);
+        color:  color.adjust(variables.$primary-color-panel, $lightness: 7%);
     }
 
     i {
@@ -224,12 +226,12 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .avatar-x64 {
-    background: $body-bg;
+    background: variables.$body-bg;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     object-fit: cover;
-    border: 3px rgba($primary-color-panel, 127) solid;
+    border: 3px rgba(variables.$primary-color-panel, 127) solid;
 }
 
 .skewed-container {
@@ -253,7 +255,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: $secondary-color-panel;
+        color: variables.$secondary-color-panel;
     }
 
     .card-body {
@@ -275,7 +277,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: $secondary-color-panel;
+        color: variables.$secondary-color-panel;
     }
 
     .card-body {
@@ -319,7 +321,7 @@ a.btn, a.action-btn, a.circle-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: lighten($primary-color-panel, 15);
+    color:  color.adjust(variables.$primary-color-panel, $lightness: 15%);
 
     .loader {
         position: relative;
@@ -554,7 +556,7 @@ a.btn, a.action-btn, a.circle-btn {
     bottom: -50vh;
     left: 1rem;
     right: 1rem;
-    background: $lighter-color;
+    background: variables.$lighter-color;
     height: 40vh;
     border-radius: 7px 7px 0 0;
     border: 1px solid #aaaaaa55;

resources/sass/panel/_fix.scss

@@ -1,3 +1,4 @@
+@use "variables";
 .form-control:focus,.form-check-input:focus{
     box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25);
 border-color: #bc86fe;
@@ -7,7 +8,7 @@ border-color: #bc86fe;
 
     .card{
         background-color: rgba(var(--bs-body-bg),.5);
-        background-image: url("../../images/pattern.png");
+        background-image: url("$resImage/pattern.png");
         backdrop-filter: blur(4px);
         box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
     }
@@ -15,7 +16,7 @@ border-color: #bc86fe;
 
 main{
     .card{
-        background-color: $lighter-color;
+        background-color: variables.$lighter-color;
         border: 0;
         .card-header{
             background: #00000011;

resources/sass/panel/_item-list.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+@use "variables";
 .item-list {
     overflow: hidden;
-    background: $lighter-color;
+    background: variables.$lighter-color;
     //margin: 0 1rem;
     border-radius: 4px;
 
@@ -74,7 +76,7 @@
                 border-radius: 3px;
             }
              input:checked + label{
-                background: lighten($primary-color-panel,10);
+                background: color.adjust(variables.$primary-color-panel, $lightness: 10%)
             }
             input{
                 display: none;

resources/sass/panel/_navbar.scss

@@ -1,3 +1,4 @@
+@use "variables";
 #panel-navbar {
     height: 100%;
     overflow-y: auto;
@@ -38,7 +39,7 @@
             color: white;
 
             &:hover {
-                color: $secondary-color-panel;
+                color: variables.$secondary-color-panel;
             }
         }
     }

resources/sass/panel/_steps.scss

@@ -1,3 +1,5 @@
+@use "variables";
+@use "sass:color";
 .steps {
 
 
@@ -25,14 +27,14 @@
         top: 50%;
         inset-inline-start: 0;
         inset-inline-end: calc(100% - var(--progress));
-        border-bottom: 1px solid lighten($primary-color-panel,20);
+        border-bottom: 1px solid color.adjust(variables.$primary-color-panel, $lightness: 20%);
         transition: all 0.3s ease-in-out;
     }
 
     li {
         position: relative;
         z-index: 2;
-        background: $lighter-color;
+        background: variables.$lighter-color;
         cursor: pointer;
         border: 1px solid #ccc;
         border-radius: 50%;
@@ -47,8 +49,8 @@
         }
 
         &.active {
-            border-color: lighten($primary-color-panel,20);
-            background-color: $primary-color-panel;
+            border-color: color.adjust(variables.$primary-color-panel, $lightness: 20%);
+            background-color: variables.$primary-color-panel;
         }
     }
 }
@@ -86,11 +88,11 @@
     justify-content: center;
 
     &:hover {
-        border-color: $primary-color-panel;
+        border-color: variables.$primary-color-panel;
     }
 }
 #upload-drag-drop.active {
-    border-color: $primary-color-panel;
+    border-color: variables.$primary-color-panel;
 }
 
 .img-preview{
@@ -105,7 +107,7 @@
 
 
 .indexed{
-    background: $primary-color-panel;
+    background: variables.$primary-color-panel;
 }
 
 #upload-image-select{

resources/views/components/assets.blade.php

@@ -4,12 +4,7 @@
     <link rel="stylesheet" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css')}}">
 @endif
 
-@if(config('app.debug') && !config('app.deployed'))
     <!-- Scripts -->
-    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
-@else
-    <link rel="stylesheet" href="{{asset('build/assets/app-B_xQQxAx.css')}}">
-    <script src="{{asset('build/assets/app-1AxZ3O2-.js')}}" defer type="module"></script>
-@endif
+    @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/panel/raw.js'])
 
 <script src="{{asset('assets/vendor/editor/ckeditor.js')}}"></script>

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.scss

@@ -1,3 +1,5 @@
+@use "../../../../sass/client-custom/app_variables";
+
 .ClipListGrid {
     .container,.container-fluid{
         overflow: hidden;
@@ -33,7 +35,7 @@
             display: flex;
             position: absolute;
             z-index: 2;
-            background: rgba($xshop-diff, .7);
+            background: rgba(app_variables.$xshop-diff, .7);
             padding: 7px;
             bottom: 0;
             left: 0;