Merge pull request #28 from thomasKn/vaul

Add no drag attribute
frontvibe · Feb 3, 2024 · 8a46b5e · 8a46b5e
2 parents 8247463 + 8502414
commit 8a46b5e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git a/app/components/QuantitySelector.tsx b/app/components/QuantitySelector.tsx
@@ -26,9 +26,10 @@ function Button(
         variant === 'increase' && 'Increase quantity',
       ])}
       className={cx([
-        'size-10 transition hover:bg-muted',
+        'size-10 transition hover:bg-muted [&>*]:pointer-events-none',
         variant === 'decrease' && 'disabled:opacity-30',
       ])}
+      data-vaul-no-drag
       name={cx([
         variant === 'decrease' && 'decrease-quantity',
         variant === 'increase' && 'increase-quantity',
@@ -50,7 +51,9 @@ function Button(
 
 function Value(props: {children: React.ReactNode}) {
   return (
-    <div className="min-w-[2.5rem] px-2 text-center">{props.children}</div>
+    <div className="min-w-[2.5rem] px-2 text-center" data-vaul-no-drag>
+      {props.children}
+    </div>
   );
 }
 

diff --git a/app/components/cart/CartDetails.tsx b/app/components/cart/CartDetails.tsx
@@ -58,7 +58,7 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl: string}) {
   return (
     <div className="mt-2 flex flex-col">
       <Button asChild>
-        <a href={checkoutUrl} target="_self">
+        <a data-vaul-no-drag href={checkoutUrl} target="_self">
           {/* Todo => add theme content string */}
           Continue to Checkout
         </a>

diff --git a/app/components/cart/CartDiscounts.tsx b/app/components/cart/CartDiscounts.tsx
@@ -33,7 +33,7 @@ export function CartDiscounts({
           <span>Discount(s)</span>
           <div className="flex items-center justify-between">
             <UpdateDiscountForm>
-              <button>
+              <button className="[&>*]:pointer-events-none" data-vaul-no-drag>
                 <IconRemove
                   aria-hidden="true"
                   style={{height: 18, marginRight: 4}}
@@ -49,8 +49,13 @@ export function CartDiscounts({
       <UpdateDiscountForm discountCodes={codes}>
         <div className={cx('flex', 'items-center justify-between gap-4')}>
           {/* Todo => add theme content string */}
-          <Input name="discountCode" placeholder="Discount code" type="text" />
-          <Button variant="outline">
+          <Input
+            data-vaul-no-drag
+            name="discountCode"
+            placeholder="Discount code"
+            type="text"
+          />
+          <Button data-vaul-no-drag variant="outline">
             {/* Todo => add theme content string */}
             Apply Discount
           </Button>

diff --git a/app/components/cart/CartLineItem.tsx b/app/components/cart/CartLineItem.tsx
@@ -152,7 +152,8 @@ function ItemRemoveButton({lineId}: {lineId: CartLine['id']}) {
       route={cartPath}
     >
       <button
-        className="flex size-10 items-center justify-center overflow-hidden rounded border border-border hover:bg-muted"
+        className="flex size-10 items-center justify-center overflow-hidden rounded border border-border hover:bg-muted [&>*]:pointer-events-none"
+        data-vaul-no-drag
         type="submit"
       >
         {/* Todo => add theme content string */}

diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import {cn} from '~/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     defaultVariants: {
       size: 'default',

diff --git a/app/components/ui/Input.tsx b/app/components/ui/Input.tsx
@@ -10,7 +10,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}