@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/components/Dropdown/SkDropdown.vue

@@ -94,6 +94,7 @@
 
     // Context
     import { NAVBAR_SIZE_KEY } from '../NavBar/context';
+    import { DROPDOWN_KIND_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -170,7 +171,7 @@
     const effectiveSize = computed<SkDropdownSize>(() => props.size ?? navbarSize?.value ?? 'md');
 
     // Provide kind for submenus (reactive computed so changes propagate)
-    provide('dropdown-kind', computed(() => props.kind));
+    provide(DROPDOWN_KIND_KEY, computed(() => props.kind));
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Dropdown/SkDropdownSubmenu.vue

@@ -75,6 +75,8 @@
     // Types
     import type { SkDropdownKind } from './types';
 
+    import { DROPDOWN_KIND_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkDropdownSubmenuComponentProps
@@ -105,12 +107,11 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
-    // Inject parent dropdown kind (will be a ComputedRef)
-    const parentKind = inject<any>('dropdown-kind', computed(() => 'neutral'));
+    const parentKind = inject(DROPDOWN_KIND_KEY, computed(() => undefined));
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => props.kind || parentKind.value || 'neutral');
+    const effectiveKind = computed<SkDropdownKind>(() => props.kind ?? parentKind.value ?? 'neutral');
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Dropdown/context.ts

@@ -0,0 +1,16 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Dropdown Context
+//
+// Injection key for nested SkDropdownSubmenu descendants to inherit the surrounding SkDropdown's
+// kind without manual wiring.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { SkDropdownKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const DROPDOWN_KIND_KEY : InjectionKey<ComputedRef<SkDropdownKind | undefined>> = Symbol('sk-dropdown-kind');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/SkField.test.ts

@@ -0,0 +1,88 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkField Tests — focuses on the validation-kind provide contract.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { computed, defineComponent, h, inject } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkField from './SkField.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Probe component that surfaces the validation-kind / inherited-kind it sees as data attributes.
+// Lets us assert what SkField actually puts on each channel without relying on a leaf form
+// component's class output.
+const Probe = defineComponent({
+    setup()
+    {
+        const validation = inject(validationKindKey, computed(() => 'NONE'));
+        const inherited = inject(inheritedKindKey, computed(() => 'NONE'));
+        return () => h('div', {
+            'data-validation': validation.value ?? 'undef',
+            'data-inherited': inherited.value ?? 'undef',
+        });
+    },
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function mountField(props : Record<string, unknown> = {}) : ReturnType<typeof mount>
+{
+    return mount(SkField, {
+        props,
+        slots: { default: () => h(Probe) },
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkField validation-kind contract', () =>
+{
+    it('provides undefined on validation-kind when state is null', () =>
+    {
+        const wrapper = mountField({ state: null });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('undef');
+    });
+
+    it('provides undefined on validation-kind when state is omitted', () =>
+    {
+        const wrapper = mountField();
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('undef');
+    });
+
+    it('provides validKind on validation-kind when state is true', () =>
+    {
+        const wrapper = mountField({ state: true });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('success');
+    });
+
+    it('provides invalidKind on validation-kind when state is false', () =>
+    {
+        const wrapper = mountField({ state: false });
+        expect(wrapper.find('[data-validation]').attributes('data-validation')).toBe('danger');
+    });
+
+    it('honors custom validKind / invalidKind', () =>
+    {
+        const valid = mountField({ state: true, validKind: 'accent' });
+        expect(valid.find('[data-validation]').attributes('data-validation')).toBe('accent');
+
+        const invalid = mountField({ state: false, invalidKind: 'warning' });
+        expect(invalid.find('[data-validation]').attributes('data-validation')).toBe('warning');
+    });
+
+    it('does NOT touch the inherited-kind channel', () =>
+    {
+        // Validation override and ambient default live on separate channels. SkField must not
+        // bleed into inherited-kind, or an InputGroup further down the tree would pick up the
+        // validation kind as if it were an ambient default. The probe falls back to 'NONE' when
+        // no provider exists for inherited-kind — that's the assertion.
+        const wrapper = mountField({ state: false });
+        expect(wrapper.find('[data-inherited]').attributes('data-inherited')).toBe('NONE');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Field/SkField.vue

@@ -58,8 +58,12 @@
     import { computed, provide } from 'vue';
 
     // Types
+    import type { ComponentKind } from '@/types';
     import type { SkFieldLabelPosition } from './types';
 
+    // Composables
+    import { validationKindKey } from '@/composables/injectionKeys';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkFieldComponentProps
@@ -127,7 +131,7 @@
          * inputs via Vue's provide/inject system.
          * @default 'success'
          */
-        validKind ?: string;
+        validKind ?: ComponentKind;
 
         /**
          * Semantic kind to apply to the child input when `state` is `false` (invalid). Typically
@@ -135,7 +139,7 @@
          * inputs via Vue's provide/inject system.
          * @default 'danger'
          */
-        invalidKind ?: string;
+        invalidKind ?: ComponentKind;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -189,8 +193,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Determine the kind to apply based on state prop
-    const effectiveKind = computed(() =>
+    // Determine the kind to apply based on state prop. Only emits a non-undefined value when the
+    // dev opted into validation by setting `state`; otherwise children fall through to their own
+    // kind prop / inherited-kind / default.
+    const effectiveKind = computed<ComponentKind | undefined>(() =>
     {
         if(props.state === true)
         {
@@ -200,13 +206,15 @@
         {
             return props.invalidKind;
         }
-        return undefined; // Let the input use its own kind prop
+        return undefined;
     });
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Provide kind to child inputs so they can automatically pick it up
-    provide('field-kind', effectiveKind);
+    // Validation channel: always wins over the child's prop and any inherited-kind ambient
+    // default. Only carries a value when `state` is set, so the absence of a state prop leaves
+    // children fully in control.
+    provide(validationKindKey, effectiveKind);
 
     //------------------------------------------------------------------------------------------------------------------
 

package/src/components/Input/SkInput.test.ts

@@ -0,0 +1,61 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkInput — input-group-size inject tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { mount } from '@vue/test-utils';
+import { computed, defineComponent, h, provide } from 'vue';
+import { describe, expect, it } from 'vitest';
+
+import { inputGroupSizeKey } from '@/composables/injectionKeys';
+
+import SkInput from './SkInput.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInput input-group-size inject', () =>
+{
+    it('uses injected size when no explicit size prop is set', () =>
+    {
+        const Provider = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inputGroupSizeKey, computed(() => 'lg'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(Provider, {
+            slots: { default: () => h(SkInput) },
+        });
+
+        const input = wrapper.find('input.sk-input');
+        expect(input.classes()).toContain('sk-lg');
+    });
+
+    it('explicit size prop overrides injected size', () =>
+    {
+        const Provider = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inputGroupSizeKey, computed(() => 'lg'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(Provider, {
+            slots: { default: () => h(SkInput, { size: 'sm' }) },
+        });
+
+        const input = wrapper.find('input.sk-input');
+        expect(input.classes()).toContain('sk-sm');
+        expect(input.classes()).not.toContain('sk-lg');
+    });
+
+    it('falls back to md when neither prop nor inject is set', () =>
+    {
+        const wrapper = mount(SkInput);
+        expect(wrapper.classes()).toContain('sk-md');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Input/SkInput.vue

@@ -43,13 +43,20 @@
      * ```
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkInputKind, SkInputSize, SkInputType } from './types';
+    import type { SkInputCorner, SkInputKind, SkInputSize, SkInputType } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -79,6 +86,13 @@
          */
         size ?: SkInputSize;
 
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * When omitted, defaults to the input's standalone visual (`top-right` only).
+         * @default undefined (renders as ['top-right'])
+         */
+        corners ?: SkInputCorner[];
+
         /**
          * Placeholder text displayed when the input is empty. Use to provide hints about expected
          * input format or example values. The placeholder disappears when the user begins typing.
@@ -131,7 +145,8 @@
     const props = withDefaults(defineProps<SkInputComponentProps>(), {
         type: 'text',
         kind: undefined,
-        size: 'md',
+        size: undefined,
+        corners: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -151,20 +166,40 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject kind from parent SkField if available
-    const fieldKind = inject<ComputedRef<SkInputKind | undefined>>('field-kind', computed(() => undefined));
+    // Validation override (SkField with `state` set) always wins. Inherited kind (an ambient
+    // provider like SkInputGroup) is the default when the dev didn't set `kind` themselves.
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkInputKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    const effectiveSize = computed<SkInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() => ({
         'sk-input': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
         'sk-readonly': props.readonly,
+        'sk-cut-top-left': props.corners?.includes('top-left') ?? false,
+        'sk-cut-top-right': props.corners?.includes('top-right') ?? false,
+        'sk-cut-bottom-right': props.corners?.includes('bottom-right') ?? false,
+        'sk-cut-bottom-left': props.corners?.includes('bottom-left') ?? false,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Input/types.ts

@@ -3,9 +3,11 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 export type SkInputKind = ComponentKind;
 export type SkInputSize = ComponentSize;
 export type SkInputType = 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'number';
+export type SkInputCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/InputGroup/SkInputGroup.test.ts

@@ -0,0 +1,171 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkInputGroup Tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { computed, defineComponent, h, inject, provide } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkInputGroup from './SkInputGroup.vue';
+import SkInputGroupAddon from './SkInputGroupAddon.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInputGroup', () =>
+{
+    it('renders a div with the group class and default classes', () =>
+    {
+        const wrapper = mount(SkInputGroup);
+        const div = wrapper.find('div.sk-input-group');
+        expect(div.exists()).toBe(true);
+        expect(div.classes()).toContain('sk-md');
+        expect(div.classes()).toContain('sk-neutral');
+    });
+
+    it('applies corner classes from corners prop', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { corners: [ 'top-left', 'bottom-right' ] },
+        });
+        const div = wrapper.find('div.sk-input-group');
+        expect(div.classes()).toContain('sk-cut-top-left');
+        expect(div.classes()).toContain('sk-cut-bottom-right');
+        expect(div.classes()).not.toContain('sk-cut-top-right');
+        expect(div.classes()).not.toContain('sk-cut-bottom-left');
+    });
+
+    it('provides input-group-size to children', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { size: 'lg' },
+            slots: { default: () => h(SkInputGroupAddon, null, { default: () => '$' }) },
+        });
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(addon.classes()).toContain('sk-lg');
+    });
+
+    it('provides inherited-kind to children', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { kind: 'primary' },
+            slots: { default: () => h(SkInputGroupAddon, null, { default: () => '$' }) },
+        });
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(addon.classes()).toContain('sk-primary');
+    });
+
+    it('inherits ambient kind from a parent inherited-kind provider', () =>
+    {
+        const AmbientStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inheritedKindKey, computed(() => 'accent'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(AmbientStub, {
+            slots: {
+                default: () => h(SkInputGroup, null, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-accent');
+        expect(addon.classes()).toContain('sk-accent');
+    });
+
+    it('explicit kind prop wins over ambient inherited-kind', () =>
+    {
+        const AmbientStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inheritedKindKey, computed(() => 'accent'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(AmbientStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'success' }, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-success');
+        expect(addon.classes()).toContain('sk-success');
+        expect(addon.classes()).not.toContain('sk-accent');
+    });
+
+    it('parent validation-kind always wins over explicit kind', () =>
+    {
+        const FieldStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(validationKindKey, computed(() => 'danger'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(FieldStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'success' }, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-danger');
+        expect(addon.classes()).toContain('sk-danger');
+    });
+
+    it('re-provides inherited-kind from props.kind, not the validation-resolved kind', () =>
+    {
+        // The property under test: SkInputGroup's `inherited-kind` re-provide must use props.kind
+        // (or the parent's inherited-kind), NOT the validation-overridden effectiveKind. Otherwise
+        // a parent SkField's validation override would leak onto the inherited-kind channel and
+        // clobber descendants that consult only inherited-kind.
+        //
+        // To observe what the InputGroup actually puts on inherited-kind, we mount a synthetic
+        // probe inside the group that injects ONLY inherited-kind (no validation-kind) and
+        // surfaces the resolved value as a data attribute.
+        const Probe = defineComponent({
+            setup()
+            {
+                const seen = inject(inheritedKindKey, computed(() => 'NONE'));
+                return () => h('div', { 'data-seen': seen.value });
+            },
+        });
+
+        const FieldStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(validationKindKey, computed(() => 'danger'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(FieldStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'primary' }, {
+                    default: () => h(Probe),
+                }),
+            },
+        });
+
+        // The probe sees 'primary' (props.kind), not 'danger' (validation override).
+        expect(wrapper.find('[data-seen]').attributes('data-seen')).toBe('primary');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------