component boilerplate removed and setup script used

inertiajs · Apr 23, 2024 · e2b3be8 · e2b3be8
1 parent b123250
commit e2b3be8
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 72 deletions.
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
@@ -6,14 +6,6 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Head } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-
-export default {
-  components: {
-    Head,
-  },
-  layout: Layout,
-}
 </script>
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
@@ -8,10 +8,8 @@
   <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" /></svg>
 </template>
 
-<script>
-export default {
-  props: {
-    name: String,
-  },
-}
+<script setup>
+const pops=defineProps({
+  name: String,
+})
 </script>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
@@ -10,7 +10,9 @@
             </Link>
             <dropdown class="md:hidden" placement="bottom-end">
               <template #default>
-                <svg class="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
+                <svg class="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+                </svg>
               </template>
               <template #dropdown>
                 <div class="mt-2 px-8 py-4 bg-indigo-800 rounded shadow-lg">
@@ -19,7 +21,8 @@
               </template>
             </dropdown>
           </div>
-          <div class="md:text-md flex items-center justify-between p-4 w-full text-sm bg-white border-b md:px-12 md:py-0">
+          <div
+            class="md:text-md flex items-center justify-between p-4 w-full text-sm bg-white border-b md:px-12 md:py-0">
             <div class="mr-4 mt-1">{{ auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <template #default>
@@ -28,14 +31,19 @@
                     <span>{{ auth.user.first_name }}</span>
                     <span class="hidden md:inline">&nbsp;{{ auth.user.last_name }}</span>
                   </div>
-                  <icon class="w-5 h-5 fill-gray-700 group-hover:fill-indigo-600 focus:fill-indigo-600" name="cheveron-down" />
+                  <icon class="w-5 h-5 fill-gray-700 group-hover:fill-indigo-600 focus:fill-indigo-600"
+                        name="cheveron-down" />
                 </div>
               </template>
               <template #dropdown>
                 <div class="mt-2 py-2 text-sm bg-white rounded shadow-xl">
-                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" :href="`/users/${auth.user.id}/edit`">My Profile</Link>
+                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500"
+                        :href="`/users/${auth.user.id}/edit`">My Profile
+                  </Link>
                   <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" href="/users">Manage Users</Link>
-                  <Link class="block px-6 py-2 w-full text-left hover:text-white hover:bg-indigo-500" href="/logout" method="delete" as="button">Logout</Link>
+                  <Link class="block px-6 py-2 w-full text-left hover:text-white hover:bg-indigo-500" href="/logout"
+                        method="delete" as="button">Logout
+                  </Link>
                 </div>
               </template>
             </dropdown>
@@ -53,25 +61,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Link } from '@inertiajs/vue3'
 import Icon from '@/Shared/Icon.vue'
 import Logo from '@/Shared/Logo.vue'
 import Dropdown from '@/Shared/Dropdown.vue'
 import MainMenu from '@/Shared/MainMenu.vue'
 import FlashMessages from '@/Shared/FlashMessages.vue'
 
-export default {
-  components: {
-    Dropdown,
-    FlashMessages,
-    Icon,
-    Link,
-    Logo,
-    MainMenu,
-  },
-  props: {
-    auth: Object,
-  },
-}
+const props = defineProps({
+  auth: Object,
+})
 </script>
diff --git a/resources/js/Shared/LoadingButton.vue b/resources/js/Shared/LoadingButton.vue
@@ -5,10 +5,8 @@
   </button>
 </template>
 
-<script>
-export default {
-  props: {
-    loading: Boolean,
-  },
-}
+<script setup>
+const props = defineProps({
+  loading: Boolean,
+})
 </script>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
@@ -27,23 +27,17 @@
   </div>
 </template>
 
-<script>
-import { Link } from '@inertiajs/vue3'
+<script setup>
+import { Link, usePage } from '@inertiajs/vue3'
 import Icon from '@/Shared/Icon.vue'
 
-export default {
-  components: {
-    Icon,
-    Link,
-  },
-  methods: {
-    isUrl(...urls) {
-      let currentUrl = this.$page.url.substr(1)
-      if (urls[0] === '') {
-        return currentUrl === ''
-      }
-      return urls.filter((url) => currentUrl.startsWith(url)).length
-    },
-  },
+const pageProps=usePage()
+const isUrl=(...urls)=> {
+  let currentUrl = pageProps.url.substr(1)
+  if (urls[0] === '') {
+    return currentUrl === ''
+  }
+  return urls.filter((url) => currentUrl.startsWith(url)).length
 }
+
 </script>
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
@@ -9,15 +9,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Link } from '@inertiajs/vue3'
 
-export default {
-  components: {
-    Link,
-  },
-  props: {
-    links: Array,
-  },
-}
+const  props=defineProps({
+  links: Array,
+})
+
 </script>
diff --git a/resources/js/Shared/TrashedMessage.vue b/resources/js/Shared/TrashedMessage.vue
@@ -6,17 +6,15 @@
         <slot />
       </div>
     </div>
-    <button class="text-yellow-800 hover:underline text-sm" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
+    <button class="text-yellow-800 hover:underline text-sm" tabindex="-1" type="button" @click="handleRestore">Restore</button>
   </div>
 </template>
 
-<script>
+<script setup>
 import Icon from '@/Shared/Icon.vue'
+const  emit=defineEmits(['restore'])
 
-export default {
-  components: {
-    Icon,
-  },
-  emits: ['restore'],
+const handleRestore = () => {
+  emit('restore')
 }
 </script>