-
-
- +
-
- + - - +- + + {{ get(item, props.labelKey as string) }} @@ -105,9 +107,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
-
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index e4a9efa9..343438e2 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -1,9 +1,8 @@
-
- -
+
-
+
-
- - + + - -" @@ -87,7 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `+
+@@ -316,7 +322,7 @@ const lists = computed{{ get(childItem, props.labelKey as string) }} -
-+ +
{{ childItem.description }}
- diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue index c4fe209a..e95ead0a 100644 --- a/src/runtime/components/RadioGroup.vue +++ b/src/runtime/components/RadioGroup.vue @@ -12,6 +12,8 @@ export type RadioGroupItem = { description?: string disabled?: boolean value?: RadioGroupValue + class?: any + ui?: Pick+ - ++ -- + -" `; +exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = ` +"+ +" `; -exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `""`; +exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `""`; exports[`Badge > renders with avatar and trailingIcon correctly 1`] = ` -"{{ item.label }} +
{{ item.description }} diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue index 57cf358c..0a19f6c0 100644 --- a/src/runtime/components/Select.vue +++ b/src/runtime/components/Select.vue @@ -24,6 +24,8 @@ interface SelectItemBase { value?: AcceptableValue | boolean disabled?: boolean onSelect?(e?: Event): void + class?: any + ui?: Pick- + {{ get(item, props.labelKey as string) }} -+ - -- + + + {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} - + - + {{ get(item, props.labelKey as string) }} -+ - - +- + + {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} - +- + - - - - - - -- - - -- - - + + /> +- - + diff --git a/src/runtime/inertia/components/LinkBase.vue b/src/runtime/inertia/components/LinkBase.vue new file mode 100644 index 00000000..2019d9ce --- /dev/null +++ b/src/runtime/inertia/components/LinkBase.vue @@ -0,0 +1,77 @@ + + + + + ++ + ++ + + diff --git a/src/runtime/utils/link.ts b/src/runtime/utils/link.ts index 6678c1cf..d8ebbd51 100644 --- a/src/runtime/utils/link.ts +++ b/src/runtime/utils/link.ts @@ -1,4 +1,5 @@ import { reactivePick } from '@vueuse/core' +import { isEqual, diff } from 'ohash/utils' import type { LinkProps } from '../types' export function pickLinkProps(link: LinkProps & { [key: string]: any }) { @@ -19,3 +20,17 @@ export function pickLinkProps(link: LinkProps & { [key: string]: any }) { return reactivePick(link, ...propsToInclude) } + +export function isPartiallyEqual(item1: any, item2: any) { + const diffedKeys = diff(item1, item2).reduce((filtered, q) => { + if (q.type === 'added') { + filtered.add(q.key) + } + return filtered + }, new Set+ ()) + + const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key))) + const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key))) + + return isEqual(item1Filtered, item2Filtered) +} diff --git a/src/runtime/vue/components/Link.vue b/src/runtime/vue/components/Link.vue index 73aec38a..07d955ce 100644 --- a/src/runtime/vue/components/Link.vue +++ b/src/runtime/vue/components/Link.vue @@ -87,15 +87,17 @@ export interface LinkSlots { - - + + diff --git a/src/theme/badge.ts b/src/theme/badge.ts index 22c184c3..62e65a73 100644 --- a/src/theme/badge.ts +++ b/src/theme/badge.ts @@ -53,6 +53,9 @@ export default (options: Required@@ -258,12 +242,12 @@ function resolveLinkClass({ route, isActive, isExactActive }: any = {}) { type, disabled, href: (to as string), - target: isExternal ? '_blank' : undefined + target: isExternal ? '_blank' : undefined, + isExternal }" - :is-external="isExternal" :class="resolveLinkClass()" > - + ) => ({ leadingAvatarSize: '2xs', trailingIcon: 'size-6' } + }, + square: { + true: '' } }, compoundVariants: [...(options.theme.colors || []).map((color: string) => ({ @@ -87,6 +90,26 @@ export default (options: Required ) => ({ color: 'neutral', variant: 'subtle', class: 'ring ring-inset ring-accented text-default bg-elevated' + }, { + size: 'xs', + square: true, + class: 'p-0.5' + }, { + size: 'sm', + square: true, + class: 'p-1' + }, { + size: 'md', + square: true, + class: 'p-1' + }, { + size: 'lg', + square: true, + class: 'p-1' + }, { + size: 'xl', + square: true, + class: 'p-1' }], defaultVariants: { color: 'primary', diff --git a/src/theme/checkbox-group.ts b/src/theme/checkbox-group.ts index fe80ad44..25611cb8 100644 --- a/src/theme/checkbox-group.ts +++ b/src/theme/checkbox-group.ts @@ -1,4 +1,6 @@ -export default { +import type { ModuleOptions } from '../module' + +export default (options: Required ) => ({ slots: { root: 'relative', fieldset: 'flex gap-x-2', @@ -14,6 +16,17 @@ export default { fieldset: 'flex-col' } }, + color: { + ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {}])), + neutral: {} + }, + variant: { + list: {}, + card: {}, + table: { + item: 'border border-muted' + } + }, size: { xs: { fieldset: 'gap-y-0.5', @@ -42,7 +55,53 @@ export default { } } }, + compoundVariants: [ + { size: 'xs', variant: 'table', class: { item: 'p-2.5' } }, + { size: 'sm', variant: 'table', class: { item: 'p-3' } }, + { size: 'md', variant: 'table', class: { item: 'p-3.5' } }, + { size: 'lg', variant: 'table', class: { item: 'p-4' } }, + { size: 'xl', variant: 'table', class: { item: 'p-4.5' } }, + { + orientation: 'horizontal', + variant: 'table', + class: { + item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg', + fieldset: 'gap-0 -space-x-px' + } + }, + { + orientation: 'vertical', + variant: 'table', + class: { + item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg', + fieldset: 'gap-0 -space-y-px' + } + }, + ...(options.theme.colors || []).map((color: string) => ({ + color, + variant: 'table', + class: { + item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]` + } + })), + { + color: 'neutral', + variant: 'table', + class: { + item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]' + } + }, + { + variant: 'table', + disabled: true, + class: { + item: 'cursor-not-allowed opacity-75' + } + } + ], defaultVariants: { - size: 'md' + size: 'md', + variant: 'list', + color: 'primary' } -} +}) diff --git a/src/theme/link.ts b/src/theme/link.ts index 538a8d2f..e0b4bb2e 100644 --- a/src/theme/link.ts +++ b/src/theme/link.ts @@ -5,10 +5,15 @@ export default (options: Required ) => ({ variants: { active: { true: 'text-primary', - false: ['text-muted hover:text-default', options.theme.transitions && 'transition-colors'] + false: 'text-muted' }, disabled: { true: 'cursor-not-allowed opacity-75' } - } + }, + compoundVariants: [{ + active: false, + disabled: false, + class: ['hover:text-default', options.theme.transitions && 'transition-colors'] + }] }) diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts index 5378ee44..a9452e9e 100644 --- a/test/components/Badge.spec.ts +++ b/test/components/Badge.spec.ts @@ -21,6 +21,7 @@ describe('Badge', () => { ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }], ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }], ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }], + ['with square', { props: { label: 'Badge', square: true } }], ['with as', { props: { label: 'Badge', as: 'div' } }], ['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }], ['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }], diff --git a/test/components/CheckboxGroup.spec.ts b/test/components/CheckboxGroup.spec.ts index 1cb37206..01cac48f 100644 --- a/test/components/CheckboxGroup.spec.ts +++ b/test/components/CheckboxGroup.spec.ts @@ -9,7 +9,7 @@ import type { FormInputEvents } from '~/src/module' describe('CheckboxGroup', () => { const sizes = Object.keys(theme.variants.size) as any - const variants = Object.keys(themeCheckbox.variants.variant) as any + const variants = Object.keys(theme.variants.variant) as any const indicators = Object.keys(themeCheckbox.variants.indicator) as any const items = [ diff --git a/test/components/Link.spec.ts b/test/components/Link.spec.ts index 8e21e0c6..2a231ea2 100644 --- a/test/components/Link.spec.ts +++ b/test/components/Link.spec.ts @@ -10,10 +10,12 @@ describe('Link', () => { ['with to', { props: { to: '/' } }], ['with type', { props: { type: 'submit' as const } }], ['with disabled', { props: { disabled: true } }], - ['with raw', { props: { raw: true } }], - ['with class', { props: { class: 'font-medium' } }], ['with activeClass', { props: { active: true, activeClass: 'text-highlighted' } }], ['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-primary' } }], + ['with raw', { props: { raw: true } }], + ['with raw activeClass', { props: { raw: true, active: true, activeClass: 'text-highlighted' } }], + ['with raw inactiveClass', { props: { raw: true, active: false, inactiveClass: 'hover:text-primary' } }], + ['with class', { props: { class: 'font-medium' } }], // Slots ['with default slot', { slots: { default: () => 'Default slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: LinkProps, slots?: Partial }) => { diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts index 7ee6b8de..ca5326fe 100644 --- a/test/components/NavigationMenu.spec.ts +++ b/test/components/NavigationMenu.spec.ts @@ -84,12 +84,12 @@ describe('NavigationMenu', () => { it.each([ // Props ['with items', { props }], - ['with modelValue', { props: { ...props, modelValue: '0' } }], + ['with modelValue', { props: { ...props, modelValue: 'item-0' } }], ['with labelKey', { props: { ...props, labelKey: 'icon' } }], - ['with arrow', { props: { ...props, arrow: true, modelValue: '0' } }], - ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const, modelValue: '0' } }], - ['with orientation vertical and collapsed', { props: { ...props, orientation: 'vertical' as const, modelValue: '0', collapsed: true } }], - ['with content orientation vertical', { props: { ...props, contentOrientation: 'vertical' as const, modelValue: '0' } }], + ['with arrow', { props: { ...props, arrow: true, modelValue: 'item-0' } }], + ['with orientation vertical', { props: { ...props, orientation: 'vertical' as const, modelValue: 'item-0' } }], + ['with orientation vertical and collapsed', { props: { ...props, orientation: 'vertical' as const, modelValue: 'item-0', collapsed: true } }], + ['with content orientation vertical', { props: { ...props, contentOrientation: 'vertical' as const, modelValue: 'item-0' } }], ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]), ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant, color: 'neutral' } }]), ...variants.map((variant: string) => [`with primary variant ${variant} highlight`, { props: { ...props, variant, highlight: true } }]), diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap index 3d754615..1d544baa 100644 --- a/test/components/__snapshots__/Badge-vue.spec.ts.snap +++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap @@ -7,15 +7,15 @@ exports[`Badge > renders with as correctly 1`] = ` 
+"
"
`;
exports[`Badge > renders with avatar correctly 1`] = `
-"
+"
"
`;
@@ -27,18 +27,18 @@ exports[`Badge > renders with class correctly 1`] = `
exports[`Badge > renders with default slot correctly 1`] = `"Default slot"`;
-exports[`Badge > renders with icon correctly 1`] = `""`;
+exports[`Badge > renders with icon correctly 1`] = `""`;
exports[`Badge > renders with label correctly 1`] = `
"Badge
"
`;
-exports[`Badge > renders with leading and icon correctly 1`] = `""`;
+exports[`Badge > renders with leading and icon correctly 1`] = `""`;
-exports[`Badge > renders with leading slot correctly 1`] = `"Leading slot"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"Leading slot"`;
-exports[`Badge > renders with leadingIcon correctly 1`] = `""`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `""`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `
"Badge
@@ -105,11 +105,16 @@ exports[`Badge > renders with size xs correctly 1`] = `
"
`;
-exports[`Badge > renders with trailing and icon correctly 1`] = `""`;
+exports[`Badge > renders with square correctly 1`] = `
+"Badge
+"
+`;
-exports[`Badge > renders with trailing slot correctly 1`] = `"Trailing slot"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `""`;
-exports[`Badge > renders with trailingIcon correctly 1`] = `""`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"Trailing slot"`;
+
+exports[`Badge > renders with trailingIcon correctly 1`] = `""`;
exports[`Badge > renders with ui correctly 1`] = `
"Badge
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index 16e2f112..c53a59ef 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -8,18 +8,18 @@ exports[`Badge > renders with as correctly 1`] = `
`;
exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
-"
+"
"
`;
exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"
+"
"
`;
exports[`Badge > renders with avatar correctly 1`] = `
-"
+"
"
`;
@@ -32,7 +32,7 @@ exports[`Badge > renders with class correctly 1`] = `
exports[`Badge > renders with default slot correctly 1`] = `"Default slot"`;
exports[`Badge > renders with icon correctly 1`] = `
-"
+"
"
`;
@@ -43,15 +43,15 @@ exports[`Badge > renders with label correctly 1`] = `
`;
exports[`Badge > renders with leading and icon correctly 1`] = `
-"
+"
"
`;
-exports[`Badge > renders with leading slot correctly 1`] = `"Leading slot"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"Leading slot"`;
exports[`Badge > renders with leadingIcon correctly 1`] = `
-"
+"
"
`;
@@ -121,11 +121,16 @@ exports[`Badge > renders with size xs correctly 1`] = `
"
`;
-exports[`Badge > renders with trailing and icon correctly 1`] = `""`;
+exports[`Badge > renders with square correctly 1`] = `
+"Badge
+"
+`;
-exports[`Badge > renders with trailing slot correctly 1`] = `"Trailing slot"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `""`;
-exports[`Badge > renders with trailingIcon correctly 1`] = `""`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"Trailing slot"`;
+
+exports[`Badge > renders with trailingIcon correctly 1`] = `""`;
exports[`Badge > renders with ui correctly 1`] = `
"Badge
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 0288cb64..0c48889d 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -357,6 +357,41 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
+ + +" +`; + exports[`CheckboxGroup > renders with indicator end correctly 1`] = ` "" `; +exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = ` +"+ + +" +`; + exports[`CheckboxGroup > renders with primary variant card correctly 1`] = ` "" `; +exports[`CheckboxGroup > renders with primary variant table correctly 1`] = ` +"+ + +" +`; + exports[`CheckboxGroup > renders with required correctly 1`] = ` "" `; +exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = ` +"+ + +" +`; + exports[`CheckboxGroup > renders with indicator end correctly 1`] = ` "" `; +exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = ` +"+ + +" +`; + exports[`CheckboxGroup > renders with primary variant card correctly 1`] = ` "" `; +exports[`CheckboxGroup > renders with primary variant table correctly 1`] = ` +"+ + +" +`; + exports[`CheckboxGroup > renders with required correctly 1`] = ` "-Must be at least 8 characters
+Must be at least 8 characters
-
-
-
Must be at least 8 characters
+