feat(Chip): new component

playground/app.vue

@@ -5,7 +5,7 @@ useHead({
   }
 })
 
-const components = ['avatar', 'badge', 'button', 'collapsible', 'kbd', 'popover', 'skeleton', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'chip', 'collapsible', 'kbd', 'popover', 'skeleton', 'tooltip']
 </script>
 
 <template>

playground/pages/chip.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <UChip v-for="position in positions" :key="position" :position="(position as any)">
+        <UButton icon="i-heroicons-inbox" color="gray" />
+      </UChip>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <UChip v-for="{ name, icon, count } in items" :key="name" :text="count" :show="count > 0" size="lg">
+        <UButton :icon="icon" color="gray" />
+      </UChip>
+    </div>
+
+    <div class="flex items-center gap-2 -ml-[84px]">
+      <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
+        <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
+      </UChip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import chip from '#build/ui/chip'
+
+const sizes = Object.keys(chip.variants.size)
+const positions = Object.keys(chip.variants.position)
+
+const items = [{
+  name: 'messages',
+  icon: 'i-heroicons-chat-bubble-oval-left',
+  count: 3
+}, {
+  name: 'notifications',
+  icon: 'i-heroicons-bell',
+  count: 0
+}]
+</script>

src/runtime/components/Chip.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps extends Omit<PrimitiveProps, 'asChild'> {
+  text?: string | number
+  inset?: boolean
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  class?: any
+  ui?: Partial<typeof theme.slots>
+}
+
+export interface ChipSlots {
+  default(): any
+  content(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+
+const show = defineModel<boolean>('show', { default: true })
+const props = withDefaults(defineProps<ChipProps>(), { as: 'div' })
+defineSlots<ChipSlots>()
+
+// FIXME: Cannot extend multiple times: https://github.com/nextui-org/tailwind-variants/issues/168
+// const ui = computed(() => tv({ extend: chip, slots: props.ui })({
+const ui = computed(() => chip({
+  color: props.color,
+  size: props.size,
+  position: props.position,
+  inset: props.inset
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
+    <slot />
+
+    <span v-if="show" :class="ui.base()">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </Primitive>
+</template>

src/theme/chip.ts

@@ -0,0 +1,56 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative inline-flex items-center justify-center shrink-0',
+    base: 'absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      gray: 'bg-gray-500 dark:bg-gray-400',
+      white: 'bg-white dark:bg-gray-900',
+      black: 'bg-gray-900 dark:bg-white'
+    },
+    size: {
+      '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+      '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+      xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+      sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+      md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+      lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+      xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+      '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+      '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
+    },
+    position: {
+      'top-right': 'top-0 right-0',
+      'bottom-right': 'bottom-0 right-0',
+      'top-left': 'top-0 left-0',
+      'bottom-left': 'bottom-0 left-0'
+    },
+    inset: {
+      false: ''
+    }
+  },
+  compoundVariants: [{
+    position: 'top-right',
+    inset: false,
+    class: '-translate-y-1/2 translate-x-1/2 transform'
+  }, {
+    position: 'bottom-right',
+    inset: false,
+    class: 'translate-y-1/2 translate-x-1/2 transform'
+  }, {
+    position: 'top-left',
+    inset: false,
+    class: '-translate-y-1/2 -translate-x-1/2 transform'
+  }, {
+    position: 'bottom-left',
+    inset: false,
+    class: 'translate-y-1/2 -translate-x-1/2 transform'
+  }],
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary',
+    position: 'top-right'
+  }
+})

src/theme/index.ts

@@ -2,6 +2,7 @@ export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'
 export { default as card } from './card'
+export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'

test/components/Chip.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import Chip, { type ChipProps } from '../../src/runtime/components/Chip.vue'
+import ComponentRender from '../component-render'
+
+describe('Chip', () => {
+  it.each([
+    ['basic case', {}],
+    ['with as', { props: { as: 'span' } }],
+    ['with class', { props: { class: 'mx-auto' } }],
+    ['with ui', { props: { ui: { base: 'text-gray-500 dark:text-gray-400' } } }],
+    ['with show', { props: { show: true } }],
+    ['with inset', { props: { inset: true } }],
+    ['with position top-right', { props: { show: true, position: 'top-right' as const } }],
+    ['with position bottom-right', { props: { show: true, position: 'bottom-right' as const } }],
+    ['with position top-left', { props: { show: true, position: 'top-left' as const } }],
+    ['with position bottom-left', { props: { show: true, position: 'bottom-left' as const } }],
+    ['with size 3xs', { props: { show: true, size: '3xs' as const } }],
+    ['with size 2xs', { props: { show: true, size: '2xs' as const } }],
+    ['with size xs', { props: { show: true, size: 'xs' as const } }],
+    ['with size sm', { props: { show: true, size: 'sm' as const } }],
+    ['with size md', { props: { show: true, size: 'md' as const } }],
+    ['with size lg', { props: { show: true, size: 'lg' as const } }],
+    ['with size xl', { props: { show: true, size: 'xl' as const } }],
+    ['with size 2xl', { props: { show: true, size: '2xl' as const } }],
+    ['with size 3xl', { props: { show: true, size: '3xl' as const } }],
+    ['with color green', { props: { show: true, color: 'green' as const } }],
+    ['with color white', { props: { show: true, color: 'white' as const } }],
+    ['with color gray', { props: { show: true, color: 'gray' as const } }],
+    ['with color black', { props: { show: true, color: 'black' as const } }],
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+    ['with content slot', { slots: { content: () => 'Content slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ChipProps & { show?: boolean }, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Chip)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/__snapshots__/Chip.spec.ts.snap

@@ -0,0 +1,51 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Chip > renders basic case correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with as correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></span>"`;
+
+exports[`Chip > renders with class correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0 mx-auto"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with color black correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-900 dark:bg-white h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with color gray correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-gray-500 dark:bg-gray-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with color green correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-green-500 dark:bg-green-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with color white correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-white dark:bg-gray-900 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with content slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform">Content slot</span></div>"`;
+
+exports[`Chip > renders with default slot correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0">Default slot<span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with inset correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0"></span></div>"`;
+
+exports[`Chip > renders with position bottom-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 bottom-0 left-0 translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with position bottom-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 bottom-0 right-0 translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with position top-left correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 left-0 -translate-y-1/2 -translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with position top-right correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with show correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size 2xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-4 min-w-[1rem] text-[12px] p-1 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size 2xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[5px] min-w-[5px] text-[5px] p-px top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size 3xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-5 min-w-[1.25rem] text-[14px] p-1 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size 3xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-[4px] min-w-[4px] text-[4px] p-px top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size lg correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-3 min-w-[0.75rem] text-[10px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size md correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2.5 min-w-[0.625rem] text-[8px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size sm correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size xl correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-3.5 min-w-[0.875rem] text-[11px] p-1 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with size xs correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-1.5 min-w-[0.375rem] text-[6px] p-px top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;
+
+exports[`Chip > renders with ui correctly 1`] = `"<div class="relative inline-flex items-center justify-center shrink-0"><span class="absolute rounded-full ring ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap bg-primary-500 dark:bg-primary-400 h-2 min-w-[0.5rem] text-[7px] p-0.5 top-0 right-0 -translate-y-1/2 translate-x-1/2 transform"></span></div>"`;