Merge pull request #92 from IBEC-BOX/config

update config
IBEC-BOX · Mar 14, 2024 · f9a374c · f9a374c
2 parents e32e87c + 4f1090e
commit f9a374c
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 171 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,7 +1,40 @@
 export default defineNuxtConfig({
   modules: ['../src/module', '@pinia/nuxt'],
   nuxt3UIKit: {
-    theme: 'dark',
+    theme: {
+      defaultTheme: 'light',
+      themes: {
+        dark: {
+          dark: true,
+          colors: {
+            'black': '#fff',
+            primary: "#545151",
+            'primary-gray': '#74767A',
+            secondary: "#8e44ad",
+            background: "#2f3640",
+            error: "#c0392b",
+            info: "#2980b9",
+            success: "#27ae60",
+            warning: "#f1c40f",
+          }
+        },
+        light: {
+          dark: false,
+          colors: {
+            primary: "#545151",
+            'primary-gray': '#74767A',
+            secondary: "#8e44ad",
+            background: "#ecf0f1",
+            error: "#c0392b",
+            'red': "#FB2424",
+            info: "#2980b9",
+            success: "#27ae60",
+            'green': "#44AE76",
+            warning: "#f1c40f",
+          }
+        },
+      },
+    },
     components: [
       'pagesTestVuetify',
       'partsFooterDefault',

diff --git a/src/module.ts b/src/module.ts
@@ -7,7 +7,15 @@ import {
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
-  theme: string;
+  theme: {
+    defaultTheme: string,
+    themes: {
+      [key: string]: {
+        dark: boolean,
+        colors: Record<string, string>
+      }
+    }
+  };
   components: string[];
 }
 
@@ -18,13 +26,33 @@ export default defineNuxtModule<ModuleOptions>({
   },
   // Default configuration options of the Nuxt module
   defaults: {
-    theme: "light",
+    theme: {
+      defaultTheme: 'light',
+      themes: {
+        dark: {
+          dark: false,
+          colors: {
+            'black': '#fff',
+            primary: "#545151",
+            'primary-gray': '#74767A',
+            secondary: "#8e44ad",
+            background: "#2f3640",
+            error: "#c0392b",
+            info: "#2980b9",
+            success: "#27ae60",
+            warning: "#f1c40f",
+          }
+        },
+      },
+    },
     components: []
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const runtimeDir = resolver.resolve("./runtime");
 
+    nuxt.options.runtimeConfig.public.nuxt3UIKitTheme = options.theme;
+
     const isDevelopment =
       runtimeDir.endsWith("src/runtime") || runtimeDir.endsWith("src\\runtime");
 

diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
@@ -1,36 +1,11 @@
 <template>
   <v-app class="">
     <partsHeaderErg
-      :burger="false"
-      :set-lang="[
-        {
-          code: 'ruru',
-          name: 'ru'
-        },
-        {
-          code: 'kakak',
-          name: 'kz'
-        },
-        {
-          code: 'enenen',
-          name: 'eng'
-        }
-      ]
-      "
-      :active-lang="'ru'"
-      @select-lang="asd"
     />
     <NuxtPage />
     <section class="h-100">
       <v-container class=" px-4">
 
-        <partsSlider
-          :slides="slides2"
-          :static-chips="{
-            text: 'ads'
-          }"
-        />
-
       </v-container>
     </section>
 
@@ -55,95 +30,6 @@
 </template>
 
 <script setup>
-const slides2 = [
-  {
-    id: 0,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Кредитная карта с целым годом без %',
-    subtitle: 'Подзаголовок маленький, в две строки',
-    titleAttrs: {
-      class: 'text-white w-75'
-    },
-    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    buttons: [
-      {
-        id: 0,
-        text: 'Large button',
-        attrs: {
-          size: 'large',
-          color: 'primary',
-          class: 'text-body-1',
-        }
-      }
-    ],
-    active: true,
-  },
-  {
-    id: 1,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Экологические акции',
-    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
-    textBlockAttrs: {
-      class: ''
-    },
-    subTitleAttrs: {
-      class: 'text-primary'
-    },
-    titleAttrs: {
-      class: 'text-primary text-h5 w-75'
-    },
-    img: {
-      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
-      attrs: {
-        'max-height': 400,
-        'max-width': '98%',
-        class: 'rounded-xl'
-      }
-    },
-    active: true,
-  },
-  {
-    id: 2,
-    chip: {
-      text: 'abvgd',
-      attrs: {
-        color: 'primary'
-      }
-    },
-    title: 'Экологические акции',
-    subtitle: 'Команда АО “ССГПО” активно принимает участие в мероприятиях, направленных на помощь экологии',
-    textBlockAttrs: {
-      class: ''
-    },
-    subTitleAttrs: {
-      class: 'text-primary'
-    },
-    titleAttrs: {
-      class: 'text-primary text-h5 w-75'
-    },
-    img: {
-      src: 'https://s3-alpha-sig.figma.com/img/555c/6876/cb9c4c93facc41f9da4145fa73aca28f?Expires=1708300800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GuQUtcWbVrWRn1GfwukhEdmCQ9ZxpWBc8-kYGxqc~kInBXYg7QiQUdnC11N6CBJyNYPhZmkMoCyqJLchOvtrizsQiSWQytj96hkeDbtlODJe60UxBq9LQqLWuzCoq8~9-IL~oKeji3ECSklL1VCqbv5NQ-Lxi~ItwX-sunBEXVsx9g9oxZIZrkuIVOfBA9vqYz1PVaG9FrIP7zL5R73ahu0m2V-MLPBe8OUFEQSWbDw9xUPIUKyXOfbm9En80I9oV8k55cLvyNaid-2qCCPtXrm26v7ohCeXQILx1-9j8xBHjy0cLploNutzmGMC0uiPQnr115gYHEhBXaJk2Ez8zA__',
-      attrs: {
-        'max-height': 400,
-        'max-width': '98%',
-        class: 'rounded-xl'
-      }
-    },
-    active: true,
-  },
-]
-
-
 
 </script>
 

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -3,10 +3,12 @@ import { defineNuxtPlugin } from '#app'
 import vuetify from './plugins/vuetify/index'
 import { vMaska } from "maska"
 
-export default defineNuxtPlugin((nuxtApp) => {
-  console.log('Plugin injected by NUXT3-UI-KIT!')
-  nuxtApp.vueApp.use(vuetify);
-  nuxtApp.vueApp.directive("maska", vMaska)
+export default defineNuxtPlugin(nuxtApp => {
+  console.log('Plugin injected by NUXT3-UI-KIT!');
 
-  if (!process.server) console.log('❤️ Initialized Vuetify 3', vuetify);
-})
+  const vuetifyInstance = vuetify(nuxtApp);
+  nuxtApp.vueApp.use(vuetifyInstance);
+  nuxtApp.vueApp.directive("maska", vMaska);
+
+  if (!process.server) console.log('❤️ Initialized Vuetify 3', vuetifyInstance);
+});
diff --git a/src/runtime/plugins/vuetify/index.ts b/src/runtime/plugins/vuetify/index.ts
@@ -1,5 +1,5 @@
-import { createVuetify } from 'vuetify';
-import type { ThemeDefinition } from "vuetify";
+import type {ThemeDefinition} from "vuetify";
+import {createVuetify} from 'vuetify';
 import 'vuetify/styles'; // pre-build css styles
 // import '../style/vuetify.scss'
 
@@ -9,58 +9,75 @@ import * as directives from 'vuetify/directives';
 
 /* Add build-in icon used internally in various components */
 /* Described in https://next.vuetifyjs.com/en/features/icon-fonts/ */
-import { mdi, aliases as allAliases } from 'vuetify/iconsets/mdi';
-const aliases = allAliases;
+import {aliases as allAliases, mdi} from 'vuetify/iconsets/mdi';
 import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
 import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files
+const aliases = allAliases;
 
-const lightTheme: ThemeDefinition = {
-  dark: false,
-  colors: {
-    primary: "#d35400",
-    'primary-gray': '#74767A',
-    secondary: "#8e44ad",
-    background: "#ecf0f1",
-    error: "#c0392b",
-    'red': "#FB2424",
-    info: "#2980b9",
-    success: "#27ae60",
-    'green': "#44AE76",
-    warning: "#f1c40f",
-  },
+const vuetify = (nuxtApp: any) => {
+  return createVuetify({
+    components,
+    directives,
+    icons: {
+      defaultSet: 'mdi',
+      aliases: allAliases,
+      sets: {mdi},
+    },
+    theme: nuxtApp.$config.public.nuxt3UIKitTheme
+  });
 };
 
-const darkTheme: ThemeDefinition = {
-  dark: true,
-  colors: {
-    'black': '#fff',
-    primary: "#d35400",
-    'primary-gray': '#74767A',
-    secondary: "#8e44ad",
-    background: "#2f3640",
-    error: "#c0392b",
-    info: "#2980b9",
-    success: "#27ae60",
-    warning: "#f1c40f",
-  },
-};
+// const lightTheme: ThemeDefinition = {
+//   dark: false,
+//   colors: {
+//     primary: "#d35400",
+//     'primary-gray': '#74767A',
+//     secondary: "#8e44ad",
+//     background: "#ecf0f1",
+//     error: "#c0392b",
+//     'red': "#FB2424",
+//     info: "#2980b9",
+//     success: "#27ae60",
+//     'green': "#44AE76",
+//     warning: "#f1c40f",
+//   },
+// };
+//
+// const darkTheme: ThemeDefinition = {
+//   dark: true,
+//   colors: {
+//     'black': '#fff',
+//     primary: "#d35400",
+//     'primary-gray': '#74767A',
+//     secondary: "#8e44ad",
+//     background: "#2f3640",
+//     error: "#c0392b",
+//     info: "#2980b9",
+//     success: "#27ae60",
+//     warning: "#f1c40f",
+//   },
+// };
+//
+// const vuetify = createVuetify({
+//   components,
+//   directives,
+//   icons: {
+//     defaultSet: 'mdi',
+//     aliases,
+//     sets: { mdi }
+//   },
+//   theme: {
+//     defaultTheme: "light",
+//     themes: {
+//       light: lightTheme,
+//       dark: darkTheme,
+//       yellow: {
+//         primary: 'asd'
+//       }
+//     },
+//   }
+// });
 
-const vuetify = createVuetify({
-  components,
-  directives,
-  icons: {
-    defaultSet: 'mdi',
-    aliases,
-    sets: { mdi }
-  },
-  theme: {
-    defaultTheme: "light",
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-    },
-  }
-});
 
 export default vuetify