Feature/tag component

packages/components/index.ts

@@ -27,3 +27,4 @@ export * from './sidebar'
 export * from './textarea'
 export * from './tab-navigation'
 export * from './progress-stepper'
+export * from './tag'

packages/components/tag/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import Tag from './src/tag.vue'
+
+export const PuikTag = withInstall(Tag)
+export default PuikTag
+
+export * from './src/tag'

packages/components/tag/src/tag.ts

@@ -0,0 +1,64 @@
+import { buildProps } from '@puik/utils'
+import type { PuikTooltipPosition } from '@puik/components'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Tag from './tag.vue'
+
+export const tagColorsVariants = [
+  'neutral',
+  'blue',
+  'yellow',
+  'green',
+  'purple',
+] as const
+
+export const tagSizeVariants = ['default', 'small'] as const
+
+export type PuikTagColorVariant = (typeof tagColorsVariants)[number]
+export type PuikTagSizeVariant = (typeof tagSizeVariants)[number]
+
+export const tagProps = buildProps({
+  id: {
+    type: String,
+    required: true,
+    default: undefined,
+  },
+  content: {
+    type: String,
+    required: true,
+    default: undefined,
+  },
+  variant: {
+    type: String,
+    required: false,
+    default: 'neutral',
+  },
+  size: {
+    type: String,
+    required: false,
+    default: 'default',
+  },
+  icon: {
+    type: String,
+    default: '',
+    required: false,
+  },
+  closeable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  tooltipPosition: {
+    type: String as PropType<PuikTooltipPosition>,
+    Required: false,
+    default: 'bottom',
+  },
+} as const)
+
+export type TagProps = ExtractPropTypes<typeof tagProps>
+
+export type TagInstance = InstanceType<typeof Tag>

packages/components/tag/src/tag.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :id="id"
+    :class="[
+      `puik-tag puik-tag--${variant as PuikTagColorVariant} puik-tag--${size as PuikTagSizeVariant}`,
+      { 'puik-tag--disabled': disabled },
+    ]"
+  >
+    <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
+    <div class="puik-tag__content">
+      <puik-tooltip
+        v-if="content?.length >= 30"
+        :position="(tooltipPosition as PuikTooltipPosition)"
+        :description="content"
+      >
+        <template #description>{{ content }}</template>
+        {{ content }}
+      </puik-tooltip>
+      {{ content }}
+    </div>
+    <PuikIcon
+      v-if="closeable"
+      icon="close"
+      class="puik-tag__close"
+      @click="disabled ? '' : handleCloseEvent()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PuikIcon } from '@puik/components/icon'
+import { PuikTooltip } from '@puik/components/tooltip'
+import {
+  tagProps,
+  type PuikTagSizeVariant,
+  type PuikTagColorVariant,
+} from './tag'
+import type { PuikTooltipPosition } from '@puik/components/tooltip'
+defineOptions({
+  name: 'PuikTag',
+})
+
+const props = defineProps(tagProps)
+const emit = defineEmits(['close'])
+
+const handleCloseEvent = () => {
+  emit('close')
+}
+</script>