feat: rework dropdown-item

src/components/misc/dropdown-item.vue

@@ -1,46 +1,24 @@
 <template>
-	<component
+	<BaseButton class="dropdown-item">
-		:is="componentNodeName"
-		v-bind="elementBindings"
-		:to="to"
-		class="dropdown-item">
 		<span class="icon" v-if="icon">
-			<icon :icon="icon"/>
+			<Icon :icon="icon"/>
 		</span>
 		<span>
-			<slot></slot>
+			<slot  />
 		</span>
-	</component>
+	</BaseButton>
 </template>
 
 <script lang="ts" setup>
-import {ref, useAttrs, watchEffect} from 'vue'
+import BaseButton, { type BaseButtonProps } from '@/components/base//BaseButton.vue'
+import Icon from '@/components/misc/Icon'
+import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
-const props = defineProps<{
+export interface DropDownItemProps extends BaseButtonProps {
-	to?: object,
+	icon?: IconProp,
-	icon?: string | string[],
+}
-}>()
 
-const componentNodeName = ref<Node['nodeName']>('a')
+defineProps<DropDownItemProps>()
-const elementBindings = ref({})
-
-const attrs = useAttrs()
-watchEffect(() => {
-	let nodeName = 'a'
-
-	if (props.to) {
-		nodeName = 'router-link'
-	}
-
-	if ('href' in attrs) {
-		nodeName = 'BaseButton'
-	}
-
-	componentNodeName.value = nodeName
-	elementBindings.value = {
-		...attrs,
-	}
-})
 </script>
 
 <style scoped lang="scss">
@@ -91,5 +69,4 @@ button.dropdown-item {
 		}
 	}
 }
-
 </style>

src/components/misc/subscription.vue

@@ -13,7 +13,7 @@
 		v-else-if="type === 'dropdown'"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:class="{'is-disabled': disabled}"
+		:disabled="disabled"
 		:icon="iconName"
 	>
 		{{ buttonText }}