feat: add reject cancel option to QuotationCard and KebabAction components

src/components/05_quotation/QuotationCard.vue

@@ -24,6 +24,7 @@ defineProps<{
   hideAction?: boolean;
   useCancel?: boolean;
   disableCancel?: boolean;
+  useRejectCancel?: boolean;
 
   customData?: {
     label: string;
@@ -41,6 +42,7 @@ defineEmits<{
   (e: 'example'): void;
   (e: 'preview'): void;
   (e: 'cancel'): void;
+  (e: 'rejectCancel'): void;
 }>();
 
 const rand = Math.random();
@@ -62,15 +64,16 @@ const rand = Math.random();
           solid
         />
       </div>
-      <div class="q-mr-sm" style="font-size: 90%">
+      <div class="q-mr-sm col row q-gutter-xs" style="font-size: 90%">
         <BadgeComponent
           :title="status"
           :hsla-color="badgeColor || '--blue-6-hsl'"
           :border="urgent"
         />
+        <slot name="badge"></slot>
       </div>
 
-      <nav class="col text-right no-wrap">
+      <nav class="text-right no-wrap">
         <q-btn
           v-if="!hidePreview"
           flat
@@ -97,6 +100,7 @@ const rand = Math.random();
           hide-toggle
           :use-cancel
           :disable-cancel
+          :use-reject-cancel
           :hide-delete="hideKebabDelete"
           :hide-view="hideKebabView"
           :hide-edit="hideKebabEdit"
@@ -106,6 +110,7 @@ const rand = Math.random();
           @upload="$emit('upload')"
           @delete="$emit('delete')"
           @cancel="$emit('cancel')"
+          @reject-cancel="$emit('rejectCancel')"
         />
       </nav>
     </header>

src/components/shared/KebabAction.vue

@@ -15,6 +15,7 @@ const props = withDefaults(
     useLink?: boolean;
     useUpload?: boolean;
     useCancel?: boolean;
+    useRejectCancel?: boolean;
     disableCancel?: boolean;
     disableDelete?: boolean;
   }>(),
@@ -31,6 +32,7 @@ defineEmits<{
   (e: 'upload'): void;
   (e: 'delete'): void;
   (e: 'cancel'): void;
+  (e: 'rejectCancel'): void;
   (e: 'changeStatus'): void;
 }>();
 
@@ -193,12 +195,41 @@ watch(
             }"
           />
           <span class="col-9 q-px-md flex items-center">
-            <slot name="labelDelete">
+            <slot name="labelCancel">
               {{ $t('general.cancel') }}
             </slot>
           </span>
         </q-item>
 
+        <q-item
+          v-if="useRejectCancel"
+          v-close-popup
+          dense
+          class="row"
+          style="white-space: nowrap"
+          :clickable="!disableCancel"
+          :id="`btn-kebab-delete-${idName}`"
+          :class="{
+            'surface-3': disableCancel,
+            'app-text-muted': disableCancel,
+          }"
+          @click.stop="() => $emit('rejectCancel')"
+        >
+          <q-icon
+            size="xs"
+            name="mdi-close"
+            class="col-3"
+            :class="{
+              'app-text-negative': !disableCancel,
+            }"
+          />
+          <span class="col-9 q-px-md flex items-center">
+            <slot name="labelRejectCancel">
+              {{ $t('requestList.status.work.RejectCancel') }}
+            </slot>
+          </span>
+        </q-item>
+
         <q-item v-if="!hideToggle" dense>
           <q-item-section class="q-py-sm">
             <div class="q-pa-sm surface-2 rounded flex items-center">