add: only delete swipe, edit on tap

Edit price cards on tap, only delete swipe exists, fixed dialogs, add ripple

app/components/Pp/DeleteDialog.vue

@@ -1,9 +1,9 @@
 <template>
   <dialog
     ref="dialog"
-    closedby="any"
+    closedby="none"
   >
-    <form method="dialog" class="wrapper">
+    <form method="dialog" class="wrapper" ref="wrapper">
       <header class="flex-row">
         Wirklich löschen?
         <PpButton class="round text">
@@ -35,5 +35,11 @@ type Props = {
 defineProps<Props>()
 defineEmits(['delete'])
 
+const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const wrapper = useTemplateRef<HTMLElement>('wrapper')
+
+onMounted(() => {
+  onClickOutside(wrapper, () => dialog.value?.close())
+})
 
 </script>

app/components/Pp/PriceCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard roboto-condensed">
+  <article class="PriceCard roboto-condensed" v-ripple="{ color: 'rgba(0, 0, 0, 0.1)' }">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />
@@ -13,6 +13,7 @@
       class="top flex-col"
       :class="{ 'animated' : !isSwiping }"
       :style="{ left }"
+      @click="update"
     >
       <header>
         <div class="name-price">
@@ -20,10 +21,10 @@
           <span>{{ intl.format(+replaceComma(card.price))}}</span>
         </div>
         <div v-if="$device.isDesktop" class="flex-row gap-default">
-          <PpButton class="icon-button" @click="update()">
+          <PpButton class="icon-button" @click="update">
             <Icon class="icon" name="uil:pen" mode="svg" />
           </PpButton>
-          <PpButton class="icon-button" @click="deleteCard()">
+          <PpButton class="icon-button" @click="deleteCard">
             <Icon class="icon" name="uil:trash-alt" mode="svg" />
           </PpButton>
         </div>
@@ -78,14 +79,13 @@ const intl = Intl.NumberFormat('de-DE', {
 
 const { lengthX, direction, isSwiping } = useSwipe(top, {
   passive: true,
-  threshold: 30,
+  threshold: 20,
   onSwipe() {
     if (['down', 'up'].includes(direction.value)) return
-    left.value = `${-clamp(lengthX.value, -100, 100)}px`
+    left.value = `${-clamp(lengthX.value, 0, 100)}px`
   },
   onSwipeEnd() {
     if (['down', 'up'].includes(direction.value)) return
-    if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
     vibrate(100)
     left.value = '0'
@@ -98,7 +98,6 @@ const pps = computed(() => (ppr.value / +card.sheets) * 100)
 const ppl = computed(() => (pps.value / +card.layers) * 10)
 
 const update = () => emit('update')
-
 const deleteCard = () => emit('remove')
 
 defineExpose({

app/components/Pp/PriceCardDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <dialog ref="dialog" closedby="any">
-    <div class="wrapper">
+  <dialog ref="dialog" closedby="none">
+    <div class="wrapper" ref="wrapper">
       <form method="dialog">
         <header class="flex-row">
           {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
@@ -81,38 +81,32 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../../shared/Card';
+import type { Card } from '../../../shared/Card'
 
 type Props = {
-  currentCardIndex: number;
-  currentCard?: Card;
-};
+  currentCardIndex: number
+  currentCard?: Card
+}
 
-const { currentCardIndex, currentCard } = defineProps<Props>();
-const emit = defineEmits(['update']);
+const { currentCardIndex, currentCard } = defineProps<Props>()
+const emit = defineEmits(['update'])
 
-const dialog = useTemplateRef<HTMLDialogElement>("dialog");
+const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const wrapper = useTemplateRef<HTMLElement>('wrapper')
 
 const checkPrice = () => {
-  if (!currentCard) {
-    return false;
-  }
-  if (currentCard.price.length === 0) {
-    return false;
-  }
-  const price = +replaceComma(currentCard.price);
-  return !isNaN(price);
-};
+  if (!currentCard) return false
+  if (currentCard.price.length === 0) return false
+
+  const price = +replaceComma(currentCard.price)
+  return !isNaN(price)
+}
 
 const checkIfInteger = (toBeNumber: string) => {
-  if (toBeNumber.length === 0) {
-    return false;
-  }
-  if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
-    return false;
-  }
-  return !isNaN(+toBeNumber);
-};
+  if (toBeNumber.length === 0) return false
+  if (toBeNumber.includes(',') || toBeNumber.includes(',')) return false
+  return !isNaN(+toBeNumber)
+}
 
 const validFields = reactive({
   name: true,
@@ -120,32 +114,32 @@ const validFields = reactive({
   roles: true,
   sheets: true,
   layers: true,
-});
+})
 
 const validate = () => {
-  if (!currentCard) {
-    return;
-  }
+  if (!currentCard) return
 
-  validFields.name = currentCard.name.length > 0;
-  validFields.price = checkPrice();
-  validFields.roles = checkIfInteger(currentCard.roles);
-  validFields.sheets = checkIfInteger(currentCard.sheets);
-  validFields.layers = checkIfInteger(currentCard.layers);
+  validFields.name = currentCard.name.length > 0
+  validFields.price = checkPrice()
+  validFields.roles = checkIfInteger(currentCard.roles)
+  validFields.sheets = checkIfInteger(currentCard.sheets)
+  validFields.layers = checkIfInteger(currentCard.layers)
 
   if (Object.values(validFields).every((value) => value)) {
-    emit('update');
-    dialog.value?.close();
+    emit('update')
+    dialog.value?.close()
   }
-};
+}
 
 onMounted(() => {
   dialog.value?.addEventListener('close', () => {
-    validFields.name = true;
-    validFields.price = true;
-    validFields.roles = true;
-    validFields.sheets = true;
-    validFields.layers = true;
-  });
-});
+    validFields.name = true
+    validFields.price = true
+    validFields.roles = true
+    validFields.sheets = true
+    validFields.layers = true
+  })
+
+  onClickOutside(wrapper, () => dialog.value?.close())
+})
 </script>