Merge pull request #2843 from PrefectHQ/update-packages

Update vue to 3.5.x and fix breaking changes

package.json

@@ -79,7 +79,7 @@
         "@prefecthq/vue-charts": "^2.0.3",
         "@prefecthq/vue-compositions": "^1.11.4",
         "vee-validate": "^4.7.0",
-        "vue": "^3.4.26",
+        "vue": "^3.5.0",
         "vue-router": "^4.3.0"
     }
 }

src/components/ArtifactMenu.vue

@@ -5,18 +5,14 @@
   </p-icon-button-menu>
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'ArtifactMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import CopyOverflowMenuItem from '@/components/CopyOverflowMenuItem.vue'
   import { Artifact, ArtifactCollection } from '@/models'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     artifact: Artifact | ArtifactCollection,
   }>()

src/components/BlockCapabilityBlockDocumentInput.vue

@@ -27,14 +27,6 @@
   </div>
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'BlockCapabilityBlockDocumentInput',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { SelectOptionGroup, useAttrsStylesClassesAndListeners } from '@prefecthq/prefect-design'
   import { useSubscription, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
@@ -48,6 +40,10 @@
   import { mapper } from '@/services'
   import { withQuery } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   const props = defineProps<{
     modelValue: string | null | undefined,
     capability: string,

src/components/BlockDocumentMenu.vue

@@ -15,14 +15,6 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'BlockDocumentMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { PIconButtonMenu, POverflowMenuItem } from '@prefecthq/prefect-design'
   import { useRouter } from 'vue-router'
@@ -33,6 +25,10 @@
   import { BlockDocument } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   const props = defineProps<{
     blockDocument: BlockDocument,
   }>()

src/components/ConcurrencyLimitMenu.vue

@@ -13,20 +13,16 @@
   <ConcurrencyLimitResetModal v-model:showModal="showResetModal" :concurrency-limit="concurrencyLimit" />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'ConcurrencyLimitsMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { CopyOverflowMenuItem, ConfirmDeleteModal, ConcurrencyLimitResetModal } from '@/components'
   import { useShowModal, useCan, useWorkspaceApi } from '@/compositions'
   import { ConcurrencyLimit } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     concurrencyLimit: ConcurrencyLimit,
   }>()

src/components/ConcurrencyLimitV2Menu.vue

@@ -15,20 +15,16 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'ConcurrencyV2LimitsMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { CopyOverflowMenuItem, ConcurrencyLimitV2ResetModal, ConfirmDeleteModal, ConcurrencyLimitsV2UpdateModal } from '@/components'
   import { useShowModal, useCan, useWorkspaceApi } from '@/compositions'
   import { ConcurrencyV2Limit } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     concurrencyLimit: ConcurrencyV2Limit,
   }>()

src/components/ConfirmDeleteModalWithSlot.vue

@@ -1,30 +1,20 @@
-<template inheritAttrs="false">
+<template>
   <slot :show-modal="showModal" :is-open="isOpen" :open="open" :close="close" :toggle="toggle" />
+
   <ConfirmDeleteModal v-model:showModal="showModal" v-bind="$attrs">
     <template v-for="(index, name) in $slots" #[name]="data">
       <slot :name="name" v-bind="data" />
     </template>
   </ConfirmDeleteModal>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script lang="ts" setup>
   import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
   import { useShowModal } from '@/compositions/useShowModal'
 
-  export default defineComponent({
-    name: 'ConfirmDeleteModalWithSlot',
-    expose: [],
-    components: {
-      ConfirmDeleteModal,
-    },
-
+  defineOptions({
     inheritAttrs: false,
-
-    setup() {
-      const { showModal, isOpen, open, close, toggle } = useShowModal()
-
-      return { showModal, isOpen, open, close, toggle }
-    },
   })
+
+  const { showModal, isOpen, open, close, toggle } = useShowModal()
 </script>

src/components/DeploymentMenu.vue

@@ -27,21 +27,17 @@
   <QuickRunParametersModal v-model:showModal="showParametersModal" :deployment="deployment" />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'DeploymentMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { DeploymentQuickRunOverflowMenuItem, DeploymentCustomRunOverflowMenuItem, ConfirmDeleteModal, CopyOverflowMenuItem } from '@/components'
   import QuickRunParametersModal from '@/components/QuickRunParametersModal.vue'
   import { useWorkspaceApi, useWorkspaceRoutes, useShowModal } from '@/compositions'
   import { Deployment } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     deployment: Deployment,
     showAll?: boolean,

src/components/DeploymentScheduleMenu.vue

@@ -15,14 +15,6 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'DeploymentScheduleMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { showToast } from '@prefecthq/prefect-design'
   import { ref } from 'vue'
@@ -33,6 +25,9 @@
   import { Deployment, DeploymentSchedule, DeploymentScheduleCompatible } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
 
   const props = defineProps<{
     deployment: Deployment,

src/components/DeploymentsDeleteButton.vue

@@ -8,14 +8,6 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'DeploymentsDeleteButton',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { showToast } from '@prefecthq/prefect-design'
   import { computed, useAttrs } from 'vue'
@@ -24,6 +16,10 @@
   import { localization } from '@/localization'
   import { getApiErrorMessage } from '@/utilities/errors'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     selected: string[],
   }>()

src/components/FlowMenu.vue

@@ -22,21 +22,17 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'FlowMenu',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import CopyOverflowMenuItem from '@/components/CopyOverflowMenuItem.vue'
   import { ConfirmDeleteModal } from '@/components/index'
   import { useCan, useShowModal, useWorkspaceApi, useWorkspaceRoutes } from '@/compositions'
   import { Flow } from '@/models'
   import { deleteItem } from '@/utilities'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     flow: Flow,
   }>()

src/components/FlowsDeleteButton.vue

@@ -8,14 +8,6 @@
   />
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'FlowsDeleteButton',
-    expose: [],
-    inheritAttrs: false,
-  }
-</script>
-
 <script lang="ts" setup>
   import { showToast } from '@prefecthq/prefect-design'
   import { computed, useAttrs } from 'vue'
@@ -24,6 +16,10 @@
   import { localization } from '@/localization'
   import { getApiErrorMessage } from '@/utilities/errors'
 
+  defineOptions({
+    inheritAttrs: false,
+  })
+
   defineProps<{
     selected: string[],
   }>()