Merge branch 'feature/transferlist-enhancements'

formkit · Dec 11, 2023 · 9a25693 · 9a25693
2 parents 415957e + e985780
commit 9a25693
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/src/inputs/pro/autocomplete.ts b/src/inputs/pro/autocomplete.ts
@@ -19,6 +19,18 @@ export default {
     data-[active-selection=true]:ring-$accentColor-$baseColorShade(-1,*)
     dark:bg-$colorTemperature-600
     dark:group-data-[multiple]:border-$colorTemperature-$borderShadeDarkMode(0,300,700)
+
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      - touchDragging
+      - longTouch .*/
+    }
+    [&.formkit-dropZone]:opacity-25
+    [&.formkit-touchDropZone]:opacity-25
+    [&.formkit-touchDragging]:!flex
+    [&.formkit-longTouch]:opacity-25
   `,
   selection: `
     $radius

diff --git a/src/inputs/pro/dropdown.ts b/src/inputs/pro/dropdown.ts
@@ -43,6 +43,16 @@ export default {
     whitespace-nowrap
     mr-1
   `,
+  tagWrapper: `
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      .*/
+    }
+    [&.formkit-dropZone_.formkit-tag]:opacity-25
+    [&.formkit-touchDropZone_.formkit-tag]:opacity-25
+  `,
   truncationCount: `
     flex
     items-center

diff --git a/src/inputs/pro/taglist.ts b/src/inputs/pro/taglist.ts
@@ -8,6 +8,16 @@ export default {
   tags: `
     pl-$spacing(2,2,4)
   `,
+  tagWrapper: `
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - touchDropZone
+      .*/
+    }
+    [&.formkit-dropZone_.formkit-tag]:opacity-25
+    [&.formkit-touchDropZone_.formkit-tag]:opacity-25
+  `,
   input: `
     !p-0
     !w-[0%]

diff --git a/src/inputs/pro/transferlist.ts b/src/inputs/pro/transferlist.ts
@@ -103,6 +103,25 @@ export default {
     dark:ring-$colorTemperature-$borderShadeDarkMode(2,400,700) 
     dark:data-[is-active=true]:ring-$accentColor-$borderShadeDarkMode(2,300,600) 
     dark:aria-selected:ring-$accentColor-$borderShadeDarkMode(2,300,600)
+
+    ${
+      "" /** Drag and drop styles:
+      - dropZone
+      - selectionDropZone
+      - touchDropZone
+      - touchSelectionDropZone
+      - longTouch .*/
+    }
+    [&.formkit-dropZone]:bg-$accentColor-100
+    [&.formkit-selectionDropZone]:bg-$accentColor-100
+    [&.formkit-touchDropZone]:bg-$accentColor-100
+    [&.formkit-touchSelectionDropZone]:bg-$accentColor-100
+    [&.formkit-longTouch]:bg-$accentColor-100
+    dark:[&.formkit-dropZone]:bg-$accentColor-900
+    dark:[&.formkit-selectionDropZone]:bg-$accentColor-900
+    dark:[&.formkit-touchDropZone]:bg-$accentColor-900
+    dark:[&.formkit-touchSelectionDropZone]:bg-$accentColor-900
+    dark:[&.formkit-longTouch]:bg-$accentColor-900
   `,
   transferlistOption: `
     text-$scale(-1,*)