Merge branch 'master' into frontend-performance-improvements

resources/scripts/components/base/BaseCustomerSelectInput.vue

@@ -21,7 +21,7 @@
         @click="addCustomer"
       >
         <BaseIcon
-          name="UserAddIcon"
+          name="UserPlusIcon"
           class="h-4 mr-2 -ml-2 text-center text-primary-400"
         />
 

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -357,7 +357,7 @@
               "
               @click="openCustomerModal"
             >
-              <BaseIcon name="UserAddIcon" class="text-primary-400" />
+              <BaseIcon name="UserPlusIcon" class="text-primary-400" />
 
               <label
                 class="
@@ -492,6 +492,7 @@ async function searchCustomer() {
     page: 1,
   }
 
+  customerStore.$reset()
   await customerStore.fetchCustomers(data)
   isSearchingCustomer.value = false
 }

resources/scripts/components/base/BaseErrorAlert.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { XCircleIcon } from '@heroicons/vue/solid'
+import { XCircleIcon } from '@heroicons/vue/24/solid'
 
 const props = defineProps({
   errorTitle: {

resources/scripts/components/base/BaseFileUploader.vue

@@ -67,7 +67,7 @@
     <!-- Not Selected -->
     <div v-else-if="!localFiles.length" class="flex flex-col items-center">
       <BaseIcon
-        name="CloudUploadIcon"
+        name="CloudArrowUpIcon"
         class="h-6 mb-2 text-xl leading-6 text-gray-400"
       />
       <p class="text-xs leading-4 text-center text-gray-400">
@@ -171,7 +171,7 @@
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+        <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
       </a>
     </div>
 
@@ -272,7 +272,7 @@
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
         </span>
       </a>
     </div>
@@ -370,7 +370,7 @@
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
+          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-black" />
         </span>
       </a>
     </div>

resources/scripts/components/base/BaseIcon.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import * as heroIcons from '@heroicons/vue/outline'
+import * as heroIcons from '@heroicons/vue/24/outline'
 
 const isLoaded = ref(false)
 

resources/scripts/components/base/BaseInfoAlert.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rounded-md bg-yellow-50 p-4 relative">
     <BaseIcon
-      name="XIcon"
+      name="XMarkIcon"
       class="h-5 w-5 text-yellow-500 absolute right-4 cursor-pointer"
       @click="$emit('hide')"
     />
@@ -83,8 +83,8 @@
 </template>
 
 <script setup>
-import { XCircleIcon } from '@heroicons/vue/solid'
 import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import { XCircleIcon } from '@heroicons/vue/24/solid'
 
 const emits = defineEmits(['hide'])
 const props = defineProps({

resources/scripts/components/base/BaseText.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="whitespace-normal">
-    <BaseCustomTag :tag="tag" :title="text" class="line-clamp-1">
+    <BaseCustomTag :tag="tag" :title="props.text" class="line-clamp-1">
       {{ displayText }}
     </BaseCustomTag>
   </div>
 </template>
+
 <script setup>
 import { computed } from "vue"
 import BaseCustomTag from '@/scripts/components/base/BaseCustomTag.vue'
@@ -26,13 +27,12 @@ const props = defineProps({
   }
 })
 
-const { text, length } = props;
-
 const displayText = computed(() => {
-  if (length) {
-    return text.length <= length ? text : `${text.substring(0, length)}...`;
+  if (props.length) {
+    return props.text.length <= props.length 
+      ? props.text 
+      : `${props.text.substring(0, props.length)}...`
   }
-  return text;
-});
-
+  return props.text
+})
 </script>

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -17,7 +17,7 @@
             <div
               class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-black bg-white rounded-sm md:h-9 md:w-9"
             >
-              <dots-vertical-icon class="w-6 h-6 text-gray-600" />
+              <EllipsisVerticalIcon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
           <div class="flex flex-wrap space-x-1">
@@ -74,7 +74,7 @@ import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import TextAlign from '@tiptap/extension-text-align'
 import Link from '@tiptap/extension-link'
-import { DotsVerticalIcon } from '@heroicons/vue/outline'
+import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 import {
   BoldIcon,
   CodingIcon,
@@ -89,10 +89,11 @@ import {
   CodeBlockIcon,
   MenuCenterIcon,
 } from './icons/index.js'
-import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon, LinkIcon } from '@heroicons/vue/solid'
+
 import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
 import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
 import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+import { Bars3BottomLeftIcon, Bars3BottomRightIcon, Bars3Icon, LinkIcon } from '@heroicons/vue/24/solid'
 
 export default {
   components: {
@@ -100,7 +101,7 @@ export default {
     BaseContentPlaceholdersBox,
     BaseDropdown,
     EditorContent,
-    DotsVerticalIcon,
+    EllipsisVerticalIcon,
   },
 
   props: {
@@ -149,9 +150,9 @@ export default {
       { name: 'codeBlock', icon: markRaw(CodeBlockIcon), action: () => editor.value.chain().focus().toggleCodeBlock().run() },
       { name: 'undo', icon: markRaw(UndoIcon), action: () => editor.value.chain().focus().undo().run() },
       { name: 'redo', icon: markRaw(RedoIcon), action: () => editor.value.chain().focus().redo().run() },
-      { name: 'alignLeft', icon: markRaw(MenuAlt2Icon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
-      { name: 'alignRight', icon: markRaw(MenuAlt3Icon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
-      { name: 'alignJustify', icon: markRaw(MenuIcon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
+      { name: 'alignLeft', icon: markRaw(Bars3BottomLeftIcon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
+      { name: 'alignRight', icon: markRaw(Bars3BottomRightIcon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
+      { name: 'alignJustify', icon: markRaw(Bars3Icon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
       { name: 'alignCenter', icon: markRaw(MenuCenterIcon), action: () => editor.value.chain().focus().setTextAlign('center').run() },
       { name: 'addLink', icon: markRaw(LinkIcon), action: () => {
         const url = window.prompt('URL')