mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
chore: add local module for better development dx (#2)
* chore: add local module for better dx developing nuxt/ui * up * up * up * feat(Kbd): new * chore(Badge): update * chore(Collapsible): remove content prop * chore(Container): clean * chore(Avatar): update root bg * chore(Link): clean * feat(Tooltip): handle shortcuts * playground(collapsible): update --------- Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Daniel Roe
GitHub
@@ -5,7 +5,7 @@ import ComponentRender from '../component-render'
|
||||
describe('Badge', () => {
|
||||
it.each([
|
||||
['with label', { props: { label: 'Badge' } }],
|
||||
['with class', { props: { class: 'rounded-full font-bold' } }],
|
||||
['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
|
||||
['with size xs', { props: { label: 'Badge', size: 'xs' as const } }],
|
||||
['with size sm', { props: { label: 'Badge', size: 'sm' as const } }],
|
||||
['with size md', { props: { label: 'Badge', size: 'md' as const } }],
|
||||
|
||||
17
test/components/Kbd.spec.ts
Normal file
17
test/components/Kbd.spec.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Kbd, { type KbdProps } from '../../src/runtime/components/Kbd.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Kbd', () => {
|
||||
it.each([
|
||||
['with value', { props: { value: 'K' } }],
|
||||
['with class', { props: { value: 'K', class: 'font-bold' } }],
|
||||
['with size xs', { props: { value: 'K', size: 'xs' as const } }],
|
||||
['with size sm', { props: { value: 'K', size: 'sm' as const } }],
|
||||
['with size md', { props: { value: 'K', size: 'md' as const } }],
|
||||
['with default slot', { slots: { default: () => 'Default slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: KbdProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Kbd)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -1,31 +1,31 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></span>"`;
|
||||
exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
|
||||
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-5 text-[10px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-20 text-3xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-20 text-3xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-4 text-[8px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-12 text-lg"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-12 text-lg"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-10 text-base"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-10 text-base"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-14 text-xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-14 text-xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-6 text-xs"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
|
||||
exports[`Avatar > renders with text correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
|
||||
|
||||
exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="leading-none text-gray-500 dark:text-gray-400 truncate font-bold"></span></span>"`;
|
||||
exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-50 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="leading-none text-gray-500 dark:text-gray-400 truncate font-bold"></span></span>"`;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900 rounded-full font-bold"></span>"`;
|
||||
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900 rounded-full font-bold">Badge</span>"`;
|
||||
|
||||
exports[`Badge > renders with color black correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
|
||||
|
||||
|
||||
13
test/components/__snapshots__/Kbd.spec.ts.snap
Normal file
13
test/components/__snapshots__/Kbd.spec.ts.snap
Normal file
@@ -0,0 +1,13 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
|
||||
|
||||
exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
|
||||
|
||||
exports[`Kbd > renders with size md correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-6 min-w-[24px] text-[12px]">K</kbd>"`;
|
||||
|
||||
exports[`Kbd > renders with size sm correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
|
||||
|
||||
exports[`Kbd > renders with size xs correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-4 min-w-[16px] text-[10px]">K</kbd>"`;
|
||||
|
||||
exports[`Kbd > renders with value correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</kbd>"`;
|
||||
Reference in New Issue
Block a user