Ditch global components

resources/scripts/components/base/BaseButton.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import BaseCustomTag from '@/scripts/components/base/BaseCustomTag.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 const props = defineProps({
   contentLoading: {
     type: Boolean,

resources/scripts/components/base/BaseCustomInput.vue

@@ -66,6 +66,12 @@
 <script setup>
 import { computed, ref, watch, onMounted } from 'vue'
 import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
+import BaseEditor from '@/scripts/components/base/base-editor/BaseEditor.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {

resources/scripts/components/base/BaseCustomerSelectInput.vue

@@ -41,6 +41,9 @@ import { useI18n } from 'vue-i18n'
 import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   modelValue: {

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -395,6 +395,11 @@ import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
 import { useRoute } from 'vue-router'
 import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseText from '@/scripts/components/base/BaseText.vue'
+import BaseInput from '@/scripts/components/base/BaseInput.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   valid: {

resources/scripts/components/base/BaseDatePicker.vue

@@ -82,6 +82,8 @@ import { Mandarin } from 'flatpickr/dist/l10n/zh.js'
 import { computed, reactive, watch, ref, useSlots } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 import { useUserStore } from '@/scripts/admin/stores/user'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const dp = ref(null)
 

resources/scripts/components/base/BaseDescriptionListItem.vue

@@ -20,6 +20,10 @@
 </template>
 
 <script setup>
+import BaseLabel from '@/scripts/components/base/BaseLabel.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
+
 const props = defineProps({
   label: {
     type: String,

resources/scripts/components/base/BaseDialog.vue

@@ -152,6 +152,8 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
+import BaseButton from '@/scripts/components/base/BaseButton.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const dialogStore = useDialogStore()
 

resources/scripts/components/base/BaseDropdown.vue

@@ -39,6 +39,8 @@
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
 import { computed, onMounted, ref, onUpdated } from 'vue'
 import { usePopper } from '@/scripts/helpers/use-popper'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   containerClass: {

resources/scripts/components/base/BaseFileUploader.vue

@@ -381,6 +381,7 @@
 import { ref, onMounted, watch } from 'vue'
 import axios from 'axios'
 import utils from '@/scripts/helpers/utilities'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const props = defineProps({
   multiple: {

resources/scripts/components/base/BaseInfoAlert.vue

@@ -84,6 +84,7 @@
 
 <script setup>
 import { XCircleIcon } from '@heroicons/vue/solid'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
 
 const emits = defineEmits(['hide'])
 const props = defineProps({

resources/scripts/components/base/BaseInput.vue

@@ -148,6 +148,8 @@
 
 <script setup>
 import { computed, ref, useSlots } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 let inheritAttrs = ref(false)
 

resources/scripts/components/base/BaseInputGroup.vue

@@ -43,6 +43,9 @@
 
 <script setup>
 import { computed, useSlots } from 'vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {

resources/scripts/components/base/BaseItemSelect.vue

@@ -89,6 +89,10 @@ import { useItemStore } from '@/scripts/admin/stores/item'
 import { useModalStore } from '@/scripts/stores/modal'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import abilities from '@/scripts/admin/stub/abilities'
+import BaseTextarea from '@/scripts/components/base/BaseTextarea.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseSelectAction from '@/scripts/components/base/BaseSelectAction.vue'
+import BaseMultiselect from '@/scripts/components/base-select/BaseMultiselect.vue'
 
 const props = defineProps({
   contentLoading: {

resources/scripts/components/base/BaseMoney.vue

@@ -19,6 +19,8 @@
 import { computed, ref } from 'vue'
 import { Money3Component } from 'v-money3'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 let money3 = Money3Component
 

resources/scripts/components/base/BaseSelectInput.vue

@@ -140,6 +140,9 @@ import {
   ListboxOption,
   ListboxOptions,
 } from '@headlessui/vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {

resources/scripts/components/base/BaseSettingCard.vue

@@ -29,6 +29,8 @@
 </template>
 
 <script setup>
+import BaseCard from '@/scripts/components/base/BaseCard.vue'
+
 defineProps({
   title: {
     type: String,

resources/scripts/components/base/BaseTabGroup.vue

@@ -48,6 +48,7 @@
 <script setup>
 import { computed, useSlots } from 'vue'
 import { TabGroup, TabList, Tab, TabPanels } from '@headlessui/vue'
+import BaseBadge from '@/scripts/components/base/BaseBadge.vue'
 
 const props = defineProps({
   defaultIndex: {

resources/scripts/components/base/BaseText.vue

@@ -7,6 +7,7 @@
 </template>
 <script setup>
 import { computed } from "vue"
+import BaseCustomTag from '@/scripts/components/base/BaseCustomTag.vue'
 
 const props = defineProps({
   tag: {

resources/scripts/components/base/BaseTextarea.vue

@@ -20,6 +20,8 @@
 
 <script setup>
 import { computed, onMounted, ref } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   contentLoading: {

resources/scripts/components/base/BaseTimePicker.vue

@@ -52,6 +52,8 @@
 import FlatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import { computed, reactive, useSlots, ref } from 'vue'
+import BaseContentPlaceholdersBox from '@/scripts/components/base/BaseContentPlaceholdersBox.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 const dpt = ref(null)
 
 const props = defineProps({

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

@@ -90,9 +90,15 @@ import {
   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'
 
 export default {
   components: {
+    BaseContentPlaceholders,
+    BaseContentPlaceholdersBox,
+    BaseDropdown,
     EditorContent,
     DotsVerticalIcon,
   },

resources/scripts/components/base/base-table/BaseTable.vue

@@ -149,6 +149,9 @@ import Row from './Row'
 import Column from './Column'
 import BaseTablePagination from './BaseTablePagination.vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
+import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
 
 const props = defineProps({
   columns: {

resources/scripts/components/base/base-table/BaseTablePagination.vue

@@ -282,7 +282,10 @@
 <script>
 // Todo: Need to convert this to Composition API
 
+import BaseIcon from '@/scripts/components/base/BaseIcon.vue'
+
 export default {
+  components: { BaseIcon },
   props: {
     pagination: {
       type: Object,