refactoring code order

Author: devhus

packages/bootstrap-vue-3/src/components/BFormInput/BFormInput.vue

@@ -59,6 +59,8 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change', 'blur', 'input'],
   setup(props, {emit}) {
+    const isHighlighted = ref(false)
+
     const classes = computed(() => {
       const isRange = props.type === 'range'
       const isColor = props.type === 'color'
@@ -81,7 +83,6 @@ export default defineComponent({
     const {input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
       useFormInput(props, emit)
 
-    const isHighlighted = ref(false)
     const highlight = () => {
       if (isHighlighted.value === true) return
       isHighlighted.value = true

packages/bootstrap-vue-3/src/components/BTable/BTable.vue

@@ -265,19 +265,6 @@ const props = withDefaults(defineProps<BTableProps>(), {
   emptyFilteredText: 'There are no records matching your request',
 })
 
-const footCloneBoolean = useBooleanish(toRef(props, 'footClone'))
-const sortDescBoolean = useBooleanish(toRef(props, 'sortDesc'))
-const sortInternalBoolean = useBooleanish(toRef(props, 'sortInternal'))
-const selectableBoolean = useBooleanish(toRef(props, 'selectable'))
-const stickySelectBoolean = useBooleanish(toRef(props, 'stickySelect'))
-const busyBoolean = useBooleanish(toRef(props, 'busy'))
-const showEmptyBoolean = useBooleanish(toRef(props, 'showEmpty'))
-const noProviderPagingBoolean = useBooleanish(toRef(props, 'showEmpty'))
-const noProviderSortingBoolean = useBooleanish(toRef(props, 'showEmpty'))
-const noProviderFilteringBoolean = useBooleanish(toRef(props, 'showEmpty'))
-
-const internalBusyFlag = ref(busyBoolean.value)
-
 interface BTableEmits {
   (
     e: 'headClicked',
@@ -314,6 +301,32 @@ interface BTableEmits {
 const emit = defineEmits<BTableEmits>()
 const slots = useSlots()
 
+const itemHelper = useItemHelper()
+
+const footCloneBoolean = useBooleanish(toRef(props, 'footClone'))
+const sortDescBoolean = useBooleanish(toRef(props, 'sortDesc'))
+const sortInternalBoolean = useBooleanish(toRef(props, 'sortInternal'))
+const selectableBoolean = useBooleanish(toRef(props, 'selectable'))
+const stickySelectBoolean = useBooleanish(toRef(props, 'stickySelect'))
+const busyBoolean = useBooleanish(toRef(props, 'busy'))
+const showEmptyBoolean = useBooleanish(toRef(props, 'showEmpty'))
+const noProviderPagingBoolean = useBooleanish(toRef(props, 'showEmpty'))
+const noProviderSortingBoolean = useBooleanish(toRef(props, 'showEmpty'))
+const noProviderFilteringBoolean = useBooleanish(toRef(props, 'showEmpty'))
+
+const internalBusyFlag = ref(busyBoolean.value)
+itemHelper.filterEvent.value = async (items) => {
+  if (usesProvider.value) {
+    await callItemsProvider()
+    return
+  }
+  const clone = await cloneDeepAsync(items)
+  emit('filtered', clone)
+}
+
+const selectedItems = ref<Set<TableItem>>(new Set([]))
+const isSelecting = computed(() => selectedItems.value.size > 0)
+
 const tableClasses = computed(() => ({
   [`align-${props.align}`]: props.align !== undefined,
   'b-table-selectable': selectableBoolean.value,
@@ -340,17 +353,6 @@ const containerAttrs = computed(() => ({
   stickyHeader: props.stickyHeader,
 }))
 
-const itemHelper = useItemHelper()
-
-itemHelper.filterEvent.value = async (items) => {
-  if (usesProvider.value) {
-    await callItemsProvider()
-    return
-  }
-  const clone = await cloneDeepAsync(items)
-  emit('filtered', clone)
-}
-
 const computedFields = computed(() => itemHelper.normaliseFields(props.fields, props.items))
 const computedFieldsTotal = computed(
   () => computedFields.value.length + (selectableBoolean.value ? 1 : 0)
@@ -359,6 +361,15 @@ const computedFieldsTotal = computed(
 const isFilterableTable = computed(() => props.filter !== undefined && props.filter !== '')
 const usesProvider = computed(() => props.provider !== undefined)
 
+const addSelectableCell = computed(
+  () => selectableBoolean.value && (!!props.selectHead || slots.selectHead !== undefined)
+)
+
+const isSortable = computed(
+  () =>
+    props.fields.filter((field) => (typeof field === 'string' ? false : field.sortable)).length > 0
+)
+
 const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
 const computedItems = computed(() => {
   if (usesProvider.value) return itemHelper.internalItems.value
@@ -384,26 +395,21 @@ const headerClicked = (field: TableField, event: MouseEvent, isFooter = false) =
 
   handleFieldSorting(field)
 }
+
 const onRowClick = (row: TableItem, index: number, e: MouseEvent) => {
   emit('rowClicked', row, index, e)
 
   handleRowSelection(row, index, e.shiftKey)
 }
 const onRowDblClick = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowDblClicked', row, index, e)
+
 const onRowMouseEnter = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowHovered', row, index, e)
+
 const onRowMouseLeave = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowUnhovered', row, index, e)
 
-const addSelectableCell = computed(
-  () => selectableBoolean.value && (!!props.selectHead || slots.selectHead !== undefined)
-)
-
-const isSortable = computed(
-  () =>
-    props.fields.filter((field) => (typeof field === 'string' ? false : field.sortable)).length > 0
-)
 const handleFieldSorting = (field: TableField) => {
   if (!isSortable.value) return
 
@@ -419,13 +425,11 @@ const handleFieldSorting = (field: TableField) => {
   }
 }
 
-const selectedItems = ref<Set<TableItem>>(new Set([]))
-const isSelecting = computed(() => selectedItems.value.size > 0)
-
 const notifySelectionEvent = () => {
   if (!selectableBoolean.value) return
   emit('selection', Array.from(selectedItems.value))
 }
+
 const handleRowSelection = (row: TableItem, index: number, shiftClicked = false) => {
   if (!selectableBoolean.value) return
 
@@ -517,6 +521,7 @@ const getFieldColumnClasses = (field: TableFieldObject) => [
     'b-table-sticky-column': field.stickyColumn,
   },
 ]
+
 const getFieldRowClasses = (field: TableFieldObject, tr: TableItem) => [
   field.class,
   field.tdClass,
@@ -575,22 +580,6 @@ const unselectRow = (index: number) => {
   notifySelectionEvent()
 }
 
-onMounted(() => {
-  if (usesProvider.value) {
-    callItemsProvider()
-  }
-})
-
-watch(
-  () => props.filter,
-  (filter, oldFilter) => {
-    if (filter === oldFilter || usesProvider.value) return
-    if (!filter) {
-      cloneDeepAsync(props.items).then((item) => emit('filtered', item))
-    }
-  }
-)
-
 const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
   if (val === oldVal) return
 
@@ -613,6 +602,16 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
   await callItemsProvider()
 }
 
+watch(
+  () => props.filter,
+  (filter, oldFilter) => {
+    if (filter === oldFilter || usesProvider.value) return
+    if (!filter) {
+      cloneDeepAsync(props.items).then((item) => emit('filtered', item))
+    }
+  }
+)
+
 watch(
   () => internalBusyFlag.value,
   () => internalBusyFlag.value !== busyBoolean.value && emit('update:busy', internalBusyFlag.value)
@@ -642,6 +641,12 @@ watch(
   (val, oldVal) => providerPropsWatch('sortDesc', val, oldVal)
 )
 
+onMounted(() => {
+  if (usesProvider.value) {
+    callItemsProvider()
+  }
+})
+
 defineExpose({
   selectAllRows,
   clearSelected,