Feat/chip component

packages/components/chip/index.ts

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

packages/components/chip/src/chip.ts

@@ -0,0 +1,64 @@
+import { buildProps } from '@puik/utils'
+import type { PuikTooltipPosition } from '@puik/components'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type Chip from './chip.vue'
+
+export const chipColorsVariants = [
+  'neutral',
+  'blue',
+  'yellow',
+  'green',
+  'purple',
+] as const
+
+export const chipSizeVariants = ['default', 'small'] as const
+
+export type PuikChipColorVariant = (typeof chipColorsVariants)[number]
+export type PuikChipSizeVariant = (typeof chipSizeVariants)[number]
+
+export const chipProps = 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 ChipProps = ExtractPropTypes<typeof chipProps>
+
+export type ChipInstance = InstanceType<typeof Chip>

packages/components/chip/src/chip.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :id="id"
+    :class="[
+      `puik-chip puik-chip--${variant as PuikChipColorVariant} puik-chip--${size as PuikChipSizeVariant}`,
+      { 'puik-chip--disabled': disabled },
+    ]"
+  >
+    <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
+    <div class="puik-chip__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-chip__close"
+      @click="disabled ? '' : handleCloseEvent()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PuikIcon } from '@puik/components/icon'
+import { PuikTooltip } from '@puik/components/tooltip'
+import {
+  chipProps,
+  type PuikChipSizeVariant,
+  type PuikChipColorVariant,
+} from './chip'
+import type { PuikTooltipPosition } from '@puik/components/tooltip'
+defineOptions({
+  name: 'PuikChip',
+})
+
+const props = defineProps(chipProps)
+const emit = defineEmits(['close'])
+
+const handleCloseEvent = () => {
+  emit('close')
+}
+</script>