Реализация VuTag компонента

src/components/Tag/VuTag.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { fn } from 'storybook/test';
+import VuTag from './VuTag.vue';
+
+const meta = {
+  title: 'Viribus Unitis/VuTag',
+  component: VuTag,
+  tags: ['autodocs'],
+  args: {
+    onClick: fn(),
+    onClose: fn(),
+    text: 'Тег',
+    active: false,
+    danger: false,
+    closable: false,
+    size: 24,
+  },
+  argTypes: {
+    text: {
+      control: 'text',
+    },
+    active: {
+      control: 'boolean',
+    },
+    danger: {
+      control: 'boolean',
+    },
+    closable: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: [24, 32],
+    },
+  },
+} satisfies Meta<typeof VuTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Механика',
+  },
+};
+
+export const Active: Story = {
+  args: {
+    text: 'Механика',
+    active: true,
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    text: 'Страйк',
+    danger: true,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    text: 'Механика',
+    size: 32,
+  },
+};
+
+export const LargeActive: Story = {
+  args: {
+    text: 'Механика',
+    size: 32,
+    active: true,
+  },
+};
+
+
+export const LargeClosable: Story = {
+  args: {
+    text: 'Механика',
+    size: 32,
+    closable: true,
+  },
+};

src/components/Tag/VuTag.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+	text: string;
+	active?: boolean;
+	danger?: boolean;
+	closable?: boolean;
+	size?: 24 | 32;
+}>();
+
+defineEmits<{
+	(e: 'click'): void;
+	(e: 'close'): void;
+}>();
+</script>
+
+<template>
+	<v-chip
+		class="text-body-2"
+		:color="active ? 'primary' : danger ? 'error' : 'surface-variant'"
+		:class="{
+			'vu-tag-active': active,
+			'vu-tag-danger': danger,
+		}"
+		:size="size === 24 ? 'small' : 'default'"
+		:closable="closable"
+		@click="$emit('click')"
+		@click:close="$emit('close')"
+	>
+		{{ text }}
+		<template v-if="closable" #close>
+			<v-icon icon="mdi-close" size="16" @click.stop="$emit('close')" />
+		</template>
+	</v-chip>
+</template>
+
+<style scoped>
+.vu-tag {
+	color: rgb(0 0 0 / 100%) !important;
+}
+
+.vu-tag-active,
+.vu-tag-danger {
+	color: rgb(255 255 255) !important;
+}
+
+.vu-tag-active {
+	background-color: rgb(var(--v-theme-primary));
+	color: rgb(var(--v-theme-on-primary));
+}
+
+.vu-tag-danger {
+	background-color: rgb(var(--v-theme-alert-1));
+	color: rgb(var(--v-theme-on-error));
+}
+</style>