diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json index bb4dab1802..952a490fea 100644 --- a/packages/analytics/dashboard-renderer/package.json +++ b/packages/analytics/dashboard-renderer/package.json @@ -82,6 +82,7 @@ "dependencies": { "@kong-ui-public/core": "workspace:^", "@kong-ui-public/entities-shared": "workspace:^", - "ajv": "^8.12.0" + "ajv": "^8.12.0", + "swapy": "^0.0.6" } } diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue index 0703b6b093..34954d08ea 100644 --- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue +++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue @@ -8,6 +8,7 @@ () + dragAndDrop: boolean, +}>(), { + dragAndDrop: false, +}) const { i18n } = composables.useI18n() diff --git a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue index 3c0a22903a..f933d538ca 100644 --- a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue +++ b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue @@ -10,13 +10,16 @@ :class="{ 'empty-cell': !cell.tile, }" + :data-swapy-slot="cell.key" :style="cell.style" > - +
+ +
@@ -26,6 +29,7 @@ import { computed, type PropType, ref, onMounted, onUnmounted } from 'vue' import type { GridSize, Cell, GridTile } from 'src/types' import { DEFAULT_TILE_HEIGHT } from '../../constants' import { calculateRowDefs } from './grid-utils' +import { createSwapy } from 'swapy' const props = defineProps({ gridSize: { @@ -41,10 +45,16 @@ const props = defineProps({ type: Array as PropType[]>, required: true, }, + dragAndDrop: { + type: Boolean, + required: false, + default: false, + }, }) const gridContainer = ref(null) + const containerWidth = ref(0) const resizeObserver = new ResizeObserver(entries => { @@ -63,6 +73,11 @@ onMounted(() => { if (gridContainer.value) { resizeObserver.observe(gridContainer.value) } + + const swapy = createSwapy(gridContainer.value, { + animation: 'dynamic', // or spring or none + }) + swapy.enable(props.dragAndDrop) }) onUnmounted(() => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b75589f54..611db37b87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -360,6 +360,9 @@ importers: ajv: specifier: ^8.12.0 version: 8.12.0 + swapy: + specifier: ^0.0.6 + version: 0.0.6 devDependencies: '@kong-ui-public/analytics-chart': specifier: workspace:^ @@ -8085,6 +8088,9 @@ packages: swagger2har@1.0.6: resolution: {integrity: sha512-Nqn0VCeYSrslBMM/WnG4OrPi0r+ri86/a2uK4rzLsXj9HWxOOGW+Rgh4D6jUIE8V+44jyL/IUR50gfBwdDFyuA==} + swapy@0.0.6: + resolution: {integrity: sha512-c53c1vza/FkB1Zk/nzoomiDs7zE4VHjPSlbSpUSeCgnqT5swgHl3t1cNJ+zxAwqa2z80FIQ3LftMNCNPsWZh3Q==} + swrv@1.0.4: resolution: {integrity: sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==} peerDependencies: @@ -17477,6 +17483,8 @@ snapshots: - '@babel/core' - rollup + swapy@0.0.6: {} + swrv@1.0.4(vue@3.3.13(typescript@5.3.3)): dependencies: vue: 3.3.13(typescript@5.3.3)