fix: bugs

src/components/DropdownMenu.vue

@@ -1,7 +1,13 @@
 <template>
   <Teleport to="body">
     <Transition name="dropdown">
-      <div v-if="modelValue" ref="floatingEl" class="dropdown-menu" :style="floatingStyle">
+      <div
+        v-if="modelValue"
+        ref="floatingEl"
+        class="dropdown-menu"
+        :class="{ 'dropdown-menu--center': align === 'center' }"
+        :style="floatingStyle"
+      >
         <ul class="dropdown-menu__list">
           <li
             v-for="(item, i) in items"
@@ -11,11 +17,21 @@
             <button
               type="button"
               class="dropdown-menu__item"
-              :class="{ 'dropdown-menu__item--danger': item.danger }"
+              :class="{
+                'dropdown-menu__item--danger': item.danger,
+                'dropdown-menu__item--colored': item.color,
+              }"
+              :style="{ color: item.color }"
               :disabled="item.disabled"
               @click="handleClick(item)"
             >
-              <SvgIcon v-if="item.icon" :name="item.icon" :size="16" class="dropdown-menu__icon" />
+              <SvgIcon
+                v-if="item.icon"
+                :name="item.icon"
+                :size="16"
+                :color="item.iconColor ?? item.color"
+                class="dropdown-menu__icon"
+              />
               <span class="dropdown-menu__label">{{ item.label }}</span>
             </button>
           </li>
@@ -43,6 +59,7 @@ const props = defineProps({
   placement: { type: String, default: 'bottom-end' },
   offset: { type: Number, default: 8 },
   minWidth: { type: String, default: '12rem' },
+  align: { type: String, default: 'start' },
 })
 
 const emit = defineEmits(['update:modelValue', 'select'])
@@ -180,6 +197,21 @@ onBeforeUnmount(unmountFloating)
   &__icon {
     flex-shrink: 0;
   }
+
+  &__item--colored &__icon {
+    :deep([stroke]) {
+      stroke: currentcolor;
+    }
+  }
+
+  &--center &__item {
+    justify-content: center;
+  }
+
+  &--center &__label {
+    flex: 0 1 auto;
+    text-align: center;
+  }
 }
 
 .dropdown-enter-active,