refactor: kebab action

src/components/04_product-service/ProductCardComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { dateFormat } from 'src/utils/datetime';
 import { Status } from 'stores/types';
-import ToggleButton from '../button/ToggleButton.vue';
+import KebabAction from '../shared/KebabAction.vue';
 withDefaults(
   defineProps<{
     title?: string;
@@ -52,102 +52,16 @@ withDefaults(
           :style="`color:hsl(${color});background-color:var(--surface-1) `"
         />
 
-        <q-btn
+        <KebabAction
+          :id-name="id"
+          :status="status"
+          class="absolute-top-right"
           v-if="action"
-          flat
-          round
-          padding="sm"
-          class="absolute-top-right dots-btn"
-          icon="mdi-dots-vertical"
-          style="z-index: 99; position: absolute; opacity: 1"
-          size="sm"
-          @click.stop=""
-        >
-          <q-menu class="bordered">
-            <q-list v-close-popup>
-              <q-item
-                clickable
-                dense
-                class="row q-py-sm"
-                style="white-space: nowrap"
-                @click="
-                  () => {
-                    $emit('viewCard');
-                  }
-                "
-              >
-                <q-icon
-                  name="mdi-eye-outline"
-                  class="col-3"
-                  size="xs"
-                  style="color: hsl(var(--green-6-hsl))"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('general.viewDetail') }}
-                </span>
-              </q-item>
-              <q-item
-                v-if="!isDisabled && !noAction"
-                dense
-                clickable
-                class="row q-py-sm"
-                style="white-space: nowrap"
-                @click="
-                  () => {
-                    $emit('updateCard');
-                  }
-                "
-                v-close-popup
-              >
-                <q-icon
-                  name="mdi-pencil-outline"
-                  class="col-3"
-                  size="xs"
-                  style="color: hsl(var(--cyan-6-hsl))"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('general.edit') }}
-                </span>
-              </q-item>
-              <q-item
-                v-if="!isDisabled && !noAction"
-                dense
-                clickable
-                @click="
-                  () => {
-                    $emit('deleteCard');
-                  }
-                "
-                v-close-popup
-              >
-                <q-icon
-                  name="mdi-trash-can-outline"
-                  size="xs"
-                  class="col-3 app-text-negative"
-                />
-                <span class="col-9 q-px-md flex items-center">
-                  {{ $t('general.delete') }}
-                </span>
-              </q-item>
-              <q-item dense>
-                <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded flex items-center">
-                    <ToggleButton
-                      two-way
-                      @click="$emit('toggleStatus', id)"
-                      :model-value="!isDisabled"
-                    />
-                    <span class="q-pl-md">
-                      {{
-                        !isDisabled ? $t('general.open') : $t('general.close')
-                      }}
-                    </span>
-                  </div>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
+          @view="$emit('viewCard')"
+          @edit="$emit('updateCard')"
+          @delete="$emit('deleteCard')"
+          @change-status="$emit('toggleStatus', id)"
+        />
       </div>
 
       <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">