tailwind 3 upgrade part 3

resources/js/components/Others/Forms/SelectInput.vue

@@ -10,7 +10,7 @@
                     <user-icon v-if="selected.icon === 'user'" size="14" class="vue-feather text-theme" />
                     <edit2-icon v-if="selected.icon === 'user-edit'" size="14" class="vue-feather text-theme" />
                 </div>
-                <span class="whitespace-nowrap w-full inline-block overflow-hidden overflow-ellipsis option-value pl-2">
+                <span class="whitespace-nowrap w-full inline-block overflow-hidden text-ellipsis option-value pl-2">
 					{{ selected.label }}
 				</span>
             </div>

resources/js/components/Others/Tables/DatatableCellImage.vue

@@ -1,7 +1,7 @@
  <template>
-	 <div class="flex items-center flex-shrink-0 flex-grow-0">
+	 <div class="flex items-center shrink-0 grow-0">
 		 <MemberAvatar
-			 class="mr-3 flex-shrink-0"
+			 class="mr-3 shrink-0"
 			 :is-border="false"
 			 :size="52"
 			 :member="member"

resources/js/components/Others/ThumbnailItem.vue

@@ -34,7 +34,7 @@
 		<div class="pl-2">
 
 			<!--Item Title-->
-			<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
+			<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
 				{{ item.data.attributes.name }}
 			</b>
 

resources/js/components/Others/TreeMenu.vue

@@ -24,7 +24,7 @@
 			<!--Item label-->
 			<b
 				@click="getFolder"
-				class="text-sm font-bold whitespace-nowrap overflow-x-hidden overflow-ellipsis inline-block ml-3 transition-all duration-150"
+				class="text-sm font-bold whitespace-nowrap overflow-x-hidden text-ellipsis inline-block ml-3 transition-all duration-150"
 				:class="{'text-theme': isSelectedItem}"
 			>
 				{{ nodes.name }}
@@ -32,7 +32,7 @@
         </div>
 
 		<!--Children-->
-        <TreeMenu
+        <tree-node
 			:disabled-by-id="disabledById"
 			:depth="depth + 1"
 			v-if="isVisible"
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-    import TreeMenu from './TreeMenu'
+    //import TreeMenu from './TreeMenu'
 	import {FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon} from 'vue-feather-icons'
 	import {events} from '../../bus'
 	import {mapGetters} from 'vuex'
@@ -62,7 +62,7 @@
 			UserPlusIcon,
 			FolderIcon,
 			UsersIcon,
-			TreeMenu,
+			'tree-node': () => import('./TreeMenuNavigator'),
 		},
 		computed: {
 			...mapGetters([

resources/js/components/Others/TreeMenuNavigator.vue

@@ -18,18 +18,17 @@
 			</div>
 			<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': isSelected}" />
 			<b
-				class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
+				class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap"
 				:class="{'text-theme': isSelected}"
 			>
 				{{ nodes.name }}
 			</b>
 		</div>
-		<TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
+		<tree-node :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
 	</div>
 </template>
 
 <script>
-    import TreeMenuNavigator from './TreeMenuNavigator'
 	import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
 	import {mapGetters} from 'vuex'
 	import {events} from '../../bus'
@@ -42,7 +41,7 @@
 			'depth',
 		],
 		components: {
-			TreeMenuNavigator,
+			'tree-node': () => import('./TreeMenuNavigator'),
 			ChevronRightIcon,
 			FolderIcon,
 		},