fix all examples for touch devices

qcp · qcp · commit 906e7ef2d5fe · 2026-04-10T10:10:05.000+03:00
diff --git a/docs/.vitepress/components/v2/Examples/Activation/ActivationItem.vue b/docs/.vitepress/components/v2/Examples/Activation/ActivationItem.vue
@@ -78,10 +78,12 @@
     font-weight: 500;
     font-size: 0.875rem;
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     text-align: center;
     transition: opacity 0.15s;
+    
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .activation-item:active {
diff --git a/docs/.vitepress/components/v2/Examples/Animation/AnimatedCard.vue b/docs/.vitepress/components/v2/Examples/Animation/AnimatedCard.vue
@@ -68,8 +68,6 @@
     background: color-mix(in srgb, var(--card-color) 10%, var(--vp-c-bg));
     border: 1px solid color-mix(in srgb, var(--card-color) 25%, transparent);
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     transition: opacity 0.15s ease;
   }
 
@@ -85,6 +83,10 @@
     color: color-mix(in srgb, var(--card-color) 60%, transparent);
     font-size: 1.1rem;
     flex-shrink: 0;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .emoji {
diff --git a/docs/.vitepress/components/v2/Examples/AutoScroll/SortItem.vue b/docs/.vitepress/components/v2/Examples/AutoScroll/SortItem.vue
@@ -56,10 +56,12 @@
     font-weight: 500;
     font-size: 0.875rem;
     cursor: move;
-    user-select: none;
-    touch-action: none;
     display: flex;
     align-items: center;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .sort-item.is-dragging {
diff --git a/docs/.vitepress/components/v2/Examples/BaseDrop/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/BaseDrop/DraggableItem.vue
@@ -38,6 +38,10 @@
     user-select: none;
     font-weight: 500;
     display: inline-block;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .draggable-item:active {
diff --git a/docs/.vitepress/components/v2/Examples/Checkers/CheckerPiece.vue b/docs/.vitepress/components/v2/Examples/Checkers/CheckerPiece.vue
@@ -42,12 +42,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    user-select: none;
-    touch-action: none;
     position: relative;
     transition:
       transform 0.08s ease,
       opacity 0.2s ease;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .piece:not(.ghost):hover {
diff --git a/docs/.vitepress/components/v2/Examples/Chess/ChessPiece.vue b/docs/.vitepress/components/v2/Examples/Chess/ChessPiece.vue
@@ -40,14 +40,16 @@
     justify-content: center;
     font-size: 2.2rem;
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     transition:
       opacity 0.15s ease,
       transform 0.08s ease;
     position: relative;
     z-index: 1;
     line-height: 1;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .piece:not(.ghost):hover {
diff --git a/docs/.vitepress/components/v2/Examples/ConstraintArea/DragChip.vue b/docs/.vitepress/components/v2/Examples/ConstraintArea/DragChip.vue
@@ -24,13 +24,15 @@
     color: var(--vp-c-bg);
     font-weight: 500;
     font-size: 0.875rem;
-    user-select: none;
-    touch-action: none;
     cursor: grab;
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
     width: fit-content;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .chip:active {
diff --git a/docs/.vitepress/components/v2/Examples/Copy/BlockItem.vue b/docs/.vitepress/components/v2/Examples/Copy/BlockItem.vue
@@ -72,12 +72,14 @@
     background: var(--vp-c-bg);
     border: 1px solid var(--vp-c-divider);
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     transition:
       background 0.15s,
       border-color 0.15s,
       box-shadow 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .block-item:active {
diff --git a/docs/.vitepress/components/v2/Examples/CustomOverlay/DraggableNote.vue b/docs/.vitepress/components/v2/Examples/CustomOverlay/DraggableNote.vue
@@ -42,6 +42,8 @@
     font-size: 0.82rem;
     font-weight: 500;
     cursor: grab;
+    
+    /* See Mobile & Touch section */
     touch-action: none;
     user-select: none;
   }
diff --git a/docs/.vitepress/components/v2/Examples/CustomOverlay/DraggableTask.vue b/docs/.vitepress/components/v2/Examples/CustomOverlay/DraggableTask.vue
@@ -47,11 +47,13 @@
     border-radius: 8px;
     font-size: 0.875rem;
     cursor: grab;
-    touch-action: none;
-    user-select: none;
     background: rgba(59, 130, 246, 0.12);
     border: 1px solid rgba(59, 130, 246, 0.3);
     color: rgb(147, 197, 253);
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .task:active { cursor: grabbing; }
diff --git a/docs/.vitepress/components/v2/Examples/Disabled/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/Disabled/DraggableItem.vue
@@ -47,12 +47,14 @@
     font-size: 0.875rem;
     font-weight: 500;
     cursor: grab;
-    touch-action: none;
-    user-select: none;
     background-color: rgba(62, 175, 124, 0.12);
     border: 1px solid rgba(62, 175, 124, 0.35);
     color: rgba(62, 175, 124, 0.9);
     width: 100%;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .item:active {
diff --git a/docs/.vitepress/components/v2/Examples/DragHandle/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/DragHandle/DraggableItem.vue
@@ -76,8 +76,6 @@
     background-color: var(--vp-c-brand-1);
     color: var(--vp-c-bg);
     font-weight: 500;
-    user-select: none;
-    touch-action: none;
     width: fit-content;
   }
 
@@ -91,9 +89,12 @@
     border: none;
     color: rgba(255, 255, 255, 0.7);
     cursor: grab;
-    touch-action: none;
     flex-shrink: 0;
     transition: color 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .drag-handle:active {
diff --git a/docs/.vitepress/components/v2/Examples/DraggableZone/DualNode.vue b/docs/.vitepress/components/v2/Examples/DraggableZone/DualNode.vue
@@ -133,7 +133,6 @@
 <style scoped>
   .node {
     position: relative;
-    user-select: none;
   }
 
   .node-row {
@@ -166,8 +165,11 @@
     line-height: 1;
     flex-shrink: 0;
     padding: 0 2px;
-    touch-action: none;
     transition: color 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .node-row:hover .drag-handle {
diff --git a/docs/.vitepress/components/v2/Examples/GroupValidation/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/GroupValidation/DraggableItem.vue
@@ -58,7 +58,6 @@
     border-radius: 8px;
     font-size: 0.8rem;
     font-weight: 500;
-    user-select: none;
     border: 1px solid transparent;
     transition: border-color 0.15s, background 0.15s;
   }
@@ -119,6 +118,10 @@
     padding: 0 2px;
     touch-action: none;
     transition: opacity 0.12s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .handle:hover { opacity: 0.8; }
diff --git a/docs/.vitepress/components/v2/Examples/Groups/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/Groups/DraggableItem.vue
@@ -42,6 +42,8 @@
     font-size: 0.875rem;
     font-weight: 500;
     cursor: grab;
+    
+    /* See Mobile & Touch section */
     touch-action: none;
     user-select: none;
   }
diff --git a/docs/.vitepress/components/v2/Examples/Keyboard/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/Keyboard/DraggableItem.vue
@@ -38,14 +38,16 @@
     font-size: 0.875rem;
     font-weight: 500;
     cursor: grab;
-    touch-action: none;
-    user-select: none;
     background-color: rgba(99, 102, 241, 0.15);
     border: 1px solid rgba(99, 102, 241, 0.4);
     color: rgb(165, 180, 252);
     transition: box-shadow 0.15s, background-color 0.15s;
     width: 100%;
     text-align: left;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .item:focus-visible {
diff --git a/docs/.vitepress/components/v2/Examples/Modifier/ModifierCard.vue b/docs/.vitepress/components/v2/Examples/Modifier/ModifierCard.vue
@@ -43,13 +43,15 @@
     font-weight: 500;
     font-size: 0.875rem;
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
     text-align: center;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .modifier-card:active {
diff --git a/docs/.vitepress/components/v2/Examples/MultiSelection/TaskItem.vue b/docs/.vitepress/components/v2/Examples/MultiSelection/TaskItem.vue
@@ -83,7 +83,6 @@
     background-color: var(--vp-c-bg-soft);
     border: 1px solid var(--vp-c-divider);
     transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
-    user-select: none;
   }
 
   .task--selected {
@@ -120,8 +119,11 @@
     background: transparent;
     color: var(--vp-c-text-3);
     cursor: grab;
-    touch-action: none;
     transition: color 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .handle:active {
diff --git a/docs/.vitepress/components/v2/Examples/OverlayTransition/Item.vue b/docs/.vitepress/components/v2/Examples/OverlayTransition/Item.vue
@@ -28,9 +28,11 @@
     font-size: 0.8rem;
     font-weight: 500;
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     transition: opacity 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .item:active {
diff --git a/docs/.vitepress/components/v2/Examples/Performance/PerfItem.vue b/docs/.vitepress/components/v2/Examples/Performance/PerfItem.vue
@@ -56,11 +56,14 @@
     background: var(--vp-c-bg-soft);
     border: 1px solid var(--vp-c-divider);
     cursor: grab;
-    user-select: none;
     font-size: 0.8125rem;
     transition: opacity 0.1s;
     box-sizing: border-box;
     width: 100%;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
   .perf-item.dragging {
     opacity: 0;
diff --git a/docs/.vitepress/components/v2/Examples/PromiseDrop/DraggableBox.vue b/docs/.vitepress/components/v2/Examples/PromiseDrop/DraggableBox.vue
@@ -45,13 +45,15 @@
     background-color: var(--vp-c-brand-1);
     color: var(--vp-c-bg);
     cursor: grab;
-    user-select: none;
-    touch-action: none;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: max-content;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .draggable:active {
diff --git a/docs/.vitepress/components/v2/Examples/SelectionStrategy/SelectionItem.vue b/docs/.vitepress/components/v2/Examples/SelectionStrategy/SelectionItem.vue
@@ -45,7 +45,6 @@
     border-radius: 8px;
     background: var(--vp-c-bg-soft);
     border: 1px solid var(--vp-c-divider);
-    user-select: none;
     transition: background 0.15s, border-color 0.15s, opacity 0.15s;
   }
 
@@ -77,6 +76,10 @@
     cursor: grab;
     font-size: 1rem;
     line-height: 1;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .ind {
diff --git a/docs/.vitepress/components/v2/Examples/SnapGrid/SnapChip.vue b/docs/.vitepress/components/v2/Examples/SnapGrid/SnapChip.vue
@@ -24,14 +24,16 @@
     color: var(--vp-c-bg);
     font-weight: 600;
     font-size: 0.875rem;
-    user-select: none;
-    touch-action: none;
     cursor: grab;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
     transition: box-shadow 0.15s;
+
+    /* See Mobile & Touch section */
+    touch-action: none;
+    user-select: none;
   }
 
   .chip:active {
diff --git a/docs/.vitepress/components/v2/Examples/SortingLists/DraggableItem.vue b/docs/.vitepress/components/v2/Examples/SortingLists/DraggableItem.vue
diff --git a/docs/.vitepress/components/v2/Examples/Swap/PlayerCard.vue b/docs/.vitepress/components/v2/Examples/Swap/PlayerCard.vue
diff --git a/docs/.vitepress/components/v2/Examples/Tree/TreeItem.vue b/docs/.vitepress/components/v2/Examples/Tree/TreeItem.vue
diff --git a/docs/.vitepress/components/v2/Examples/VModelTree/GroupItem.vue b/docs/.vitepress/components/v2/Examples/VModelTree/GroupItem.vue
diff --git a/docs/.vitepress/components/v2/Examples/VModelTree/VModelItem.vue b/docs/.vitepress/components/v2/Examples/VModelTree/VModelItem.vue

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,8 @@`
`42`	`42`	`font-size: 0.82rem;`
`43`	`43`	`font-weight: 500;`
`44`	`44`	`cursor: grab;`
	`45`	`+`
	`46`	`+ /* See Mobile & Touch section */`
`45`	`47`	`touch-action: none;`
`46`	`48`	`user-select: none;`
`47`	`49`	`}`