feat: add useDraggable composable #4486

TFX-98 · 2025-03-03T08:40:35Z

Description

Closes Draggable and resizeable options for Modal #4422
Added useDraggable composable
Added stories for VaModal
Added stories for useDraggable
Update Docs for VaModal
Update VaModal component with provide draggable logic

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

netlify · 2025-03-03T08:40:39Z

👷 Deploy request for vuestic-docs pending review.

Name	Link
🔨 Latest commit	`270b5a0`

netlify · 2025-03-03T08:41:02Z

✅ Deploy Preview for vuestic-storybook ready!

Name	Link
🔨 Latest commit	`270b5a0`
🔍 Latest deploy log	https://app.netlify.com/sites/vuestic-storybook/deploys/67c57124466858000897ee8b
😎 Deploy Preview	https://deploy-preview-4486--vuestic-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

TFX-98 · 2025-03-03T09:08:23Z

packages/docs/page-config/ui-elements/modal/modal-api.ts

@@ -38,6 +38,8 @@ const modalOptions: Record<keyof ModalOptions, string> = {
  overlay: "boolean",
  overlayOpacity: "number | string",
  zIndex: "number | string",
+  draggable: "boolean",
+  draggablePosition: "{ x?: number | string, y?: number | string }",


May be better to set type like number | '${number}%'?

asvae

Let's move remainders in separate issue and merge this.

What I recall:

Composable docs are missing.
Touch events are not working.
There is a bug with compiled docs attachEvent

asvae

Let's move remainders in separate issue and merge this.

What I recall:

Composable docs are missing.
Touch events are not working.
There is a bug with compiled docs attachEvent
Interaction tests + check rotate font

m0ksem · 2025-03-08T04:38:24Z

packages/ui/src/components/va-modal/VaModal.vue

@@ -422,12 +422,44 @@ watch(isTopLevelModal, newIsTopLevelModal => {
  }
 }, { immediate: true })

+const initialPosition = toRef(props, 'draggablePosition')
+
+const containerRef = ref<HTMLElement | null>(null)


Suggested change

const containerRef = ref<HTMLElement | null>(null)

const containerRef = useSelectorTemplateRef(toRef(props,'attachElement'))

m0ksem · 2025-03-08T04:40:46Z

packages/ui/src/components/va-modal/VaModal.vue

+const { positionStyle, startDrag } = useDraggable({
+  draggableRef: modalDialog,
+  containerRef,
+  isDraggable: props.draggable,


Suggested change

isDraggable: props.draggable,

isDraggable: toRef(props, 'draggable'),

m0ksem · 2025-03-08T05:02:48Z

packages/ui/src/composables/useDraggable.ts

+    stopDrag()
+  })
+
+  watch(position, () => {


PositionStyle can be computed.

m0ksem

VaModal vs VaDialog

Modal position is broken. Draggable must be applied to the dialog window, instead of overlay element.

The purpose of a modal window is to block the application until it is closed. Therefore, there is no reason for modal window to be draggable actually. Instead, we need a dialog window that wouldn't block the application and can be dragged over the page.

I'd not use a draggable prop in VaModal, but instead have it in the VaDialog component, which seems more reasonable. In such case, draggable dialog is more of a popup.

m0ksem · 2025-03-08T05:21:20Z

packages/ui/src/components/va-modal/VaModal.stories.ts

+// TODO: add tests
+type PositionType = number | `${number}%`
+type initialPositionType = { x?: PositionType; y?: PositionType }
+export const DraggableAndAttachElement: StoryFn = () => ({


Suggested change

export const DraggableAndAttachElement: StoryFn = () => ({

export const DraggableAndAttachElement = defineStory({

tests

m0ksem · 2025-03-08T05:42:05Z

useDraggable api

Would be also nice to have no-return api for useDraggable and expose it to end user.

const dialogRef = ref()
const draggableArea = computed(() => dialogRef.value.querySelector('.va-dialog-header'))
useDraggable(dialogRef, {
  draggableChild: draggableArea
})

<VaDialog ref="dialogRef" />

This way, useDraggable must apply position style to dialogRef.
This will be helpful when optimizing the framework for LLMs and Visual Editors. It also removes the extra step of binding styles - if you have multiple draggable windows, you need to rename positionStyle.
See useInputMask, useStickyTableHeader.

This can be considered as step 2 and is not required right now.

TFX-98 added the feature Something useful to end user label Mar 3, 2025

TFX-98 requested review from asvae and m0ksem March 3, 2025 08:40

TFX-98 self-assigned this Mar 3, 2025

TFX-98 changed the title ~~add useDraggable composable~~ feat: add useDraggable composable Mar 3, 2025

add useDraggable composable

270b5a0

TFX-98 force-pushed the feature/draggable-composable branch from 0d48bd9 to 270b5a0 Compare March 3, 2025 09:06

TFX-98 commented Mar 3, 2025

View reviewed changes

asvae approved these changes Mar 3, 2025

View reviewed changes

m0ksem reviewed Mar 8, 2025

View reviewed changes

m0ksem requested changes Mar 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add useDraggable composable #4486

feat: add useDraggable composable #4486

TFX-98 commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading

TFX-98 Mar 3, 2025 •

edited

Loading

asvae left a comment

asvae left a comment •

edited

Loading

m0ksem Mar 8, 2025

m0ksem Mar 8, 2025

m0ksem Mar 8, 2025 •

edited

Loading

m0ksem left a comment

m0ksem Mar 8, 2025

m0ksem commented Mar 8, 2025

	const containerRef = ref<HTMLElement \| null>(null)
	const containerRef = useSelectorTemplateRef(toRef(props,'attachElement'))

	isDraggable: props.draggable,
	isDraggable: toRef(props, 'draggable'),

	export const DraggableAndAttachElement: StoryFn = () => ({
	export const DraggableAndAttachElement = defineStory({

feat: add useDraggable composable #4486

Are you sure you want to change the base?

feat: add useDraggable composable #4486

Conversation

TFX-98 commented Mar 3, 2025 • edited Loading

Description

Types of changes

netlify bot commented Mar 3, 2025 • edited Loading

👷 Deploy request for vuestic-docs pending review.

netlify bot commented Mar 3, 2025 • edited Loading

✅ Deploy Preview for vuestic-storybook ready!

TFX-98 Mar 3, 2025 • edited Loading

Choose a reason for hiding this comment

asvae left a comment

Choose a reason for hiding this comment

asvae left a comment • edited Loading

Choose a reason for hiding this comment

m0ksem Mar 8, 2025

Choose a reason for hiding this comment

m0ksem Mar 8, 2025

Choose a reason for hiding this comment

m0ksem Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

m0ksem left a comment

Choose a reason for hiding this comment

VaModal vs VaDialog

m0ksem Mar 8, 2025

Choose a reason for hiding this comment

m0ksem commented Mar 8, 2025

useDraggable api

TFX-98 commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading

TFX-98 Mar 3, 2025 •

edited

Loading

asvae left a comment •

edited

Loading

m0ksem Mar 8, 2025 •

edited

Loading