Merge pull request #21 from shahabzebare/master

Refactor code to be more vue and nova compliant

dist/js/tool.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

nova.mix.js

@@ -18,10 +18,8 @@ class NovaExtension {
 
     webpackConfig.resolve.alias = {
       ...(webpackConfig.resolve.alias || {}),
-      'laravel-nova': path.join(
-        __dirname,
-        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
-      ),
+      'laravel-nova': path.join(__dirname,'../../vendor/laravel/nova/resources/js/mixins/packages.js'),
+      'laravel-nova-ui': path.join(__dirname, '../../vendor/laravel/nova/node_modules/laravel-nova-ui'),
     }
 
     webpackConfig.output = {

resources/js/components/LanguageSwitcher.vue

@@ -1,40 +1,35 @@
 <template>
-  <Dropdown placement="bottom-end">
-    <DropdownTrigger
-        :show-arrow="false"
-        class="h-10 w-full hover:text-primary-500"
-    >
-
-      <Icon type="language"  />
-      <span class="ml-1 font-bold hidden md:inline">{{selectedDisplay}}</span>
-    </DropdownTrigger>
+  <Dropdown placement="bottom-end" class="relative">
+    <Button variant="action" icon="globe-alt" class="text-primary-500"></Button>
     <template #menu>
       <DropdownMenu>
         <template v-for="(value,key) in langs">
-          <div class="flex flex-col py-1">
+          <nav class="flex flex-col py-1">
             <DropdownMenuItem
                               :key="key"
                                as="button"
                                class="flex items-center hover:bg-gray-100"
                                @click.prevent="changeLang(key)"
             >
-              <span  class="ml-2" v-if="selected!==key">{{value}}</span>
-              <span class="ml-2 font-bold text-primary-500"  v-else>{{value}}</span>
+              <span  class="ml-2" v-if="selected!==key">
+                {{value}}
+              </span>
+              <span class="ml-2 font-mediun text-primary-500"  v-else>{{value}}</span>
             </DropdownMenuItem>
-          </div>
+          </nav>
         </template>
-
       </DropdownMenu>
     </template>
   </Dropdown>
-
 </template>
 
 <script>
+import { Button } from 'laravel-nova-ui'
 
 export default {
   name: "LanguageSwitcher",
-
+  components: { Button },
+  props: [ 'langs', 'selected', 'selectedDisplay' ],
   methods:{
     changeLang(key) {
       if (key !== this.selected) {

resources/js/tool.js

@@ -1,38 +1,45 @@
 import LanguageSwitcher from "./components/LanguageSwitcher";
-import {createApp,defineComponent} from 'vue';
+import { createVNode, render} from 'vue';
 
 Nova.booting((app, store) => {
 
-    window.addEventListener('DOMContentLoaded',()=>{
-        let appHeader = document.getElementsByTagName('header');
-
-        if (appHeader.length > 0) {
-           let languages = Nova.config('nova_language_switcher').languages;
-           let selected = Nova.config('nova_language_switcher').current_lang;
-           let switchLang = defineComponent({
-                extends: LanguageSwitcher, data() {
-                    return {
+    app.mixin({
+        data() {
+            return {
+                toDestroy: [],
+            }
+        },
+        async mounted() {
+            if (this._.type?.__file?.endsWith('MainHeader.vue')) {
+                const languages = Nova.config('nova_language_switcher').languages;
+                let selected = Nova.config('nova_language_switcher').current_lang;
+
+                const container = document.createElement('div')
+                container.className = 'relative z-50';
+
+                const element = this._.vnode.el.querySelector('header > div:last-child > div:last-child > div');
+                if (element) {
+                    const vnode = createVNode(LanguageSwitcher, {
                         langs: languages,
                         selectedDisplay:languages[selected],
                         selected:selected
-                    }
-                }
-            })
-
-           let lang =  document.createElement('div');
-           lang.className = 'mr-3';
-           let newApp = createApp(switchLang);
+                    })
 
-           newApp.component('Dropdown',app._context.components.Dropdown);
-           newApp.component('DropdownTrigger',app._context.components.DropdownTrigger);
-           newApp.component('DropdownMenu',app._context.components.DropdownMenu);
-           newApp.component('DropdownMenuItem',app._context.components.DropdownMenuItem);
-           newApp.component('Icon', app._context.components.HeroiconsOutlineGlobe);
+                    vnode.appContext = app._context
+                    render(vnode, container)
+
+                    element.insertAdjacentElement('beforebegin', container)
 
-           newApp.mount(lang);
-
-           appHeader[0].lastChild.lastChild.insertBefore(lang,appHeader[0].lastChild.lastChild.firstChild);
-        }
+                    this.toDestroy.push(container)
+                }
+            }
+        },
+        unmounted() {
+            for (const element of this.toDestroy) {
+                render(null, element)
+            }
+
+        },
     })
 })