@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/components/InputGroup/SkInputGroup.vue

@@ -0,0 +1,131 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - InputGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes" :style="customColorStyles">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_input-group.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkInputGroup
+     * @description Wraps form inputs, buttons, selects, and SkInputGroupAddon children into a
+     * single visually unified control. Bevels appear only on the group's outer corners; interior
+     * joins are clean. Cascades kind and size to Vue children via provide/inject — size on the
+     * `input-group-size` channel, kind on the `inherited-kind` ambient-default channel. A
+     * parent SkField's validation override (the `validation-kind` channel) takes precedence over
+     * both the group's own kind and the descendants' kinds.
+     *
+     * @example
+     * ```vue
+     * <SkInputGroup :corners="['top-left', 'bottom-right']" size="md" kind="primary">
+     *     <SkInputGroupAddon>$</SkInputGroupAddon>
+     *     <SkInput v-model="amount" />
+     *     <SkButton>Submit</SkButton>
+     * </SkInputGroup>
+     * ```
+     *
+     * @slot default - Form components, SkButton, and SkInputGroupAddon children in left-to-right order.
+     */
+
+    import { computed, inject, provide, toRef } from 'vue';
+
+    // Types
+    import type {
+        SkInputGroupBaseProps,
+        SkInputGroupCorner,
+        SkInputGroupKind,
+        SkInputGroupSize,
+    } from './types';
+
+    export type { SkInputGroupComponentProps } from './types';
+
+    // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkInputGroupBaseProps>(), {
+        kind: undefined,
+        size: 'md',
+        corners: () => [ 'top-left', 'bottom-right' ],
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Same resolution rule as the leaf form components: validation override (from a parent
+    // SkField with `state` set) wins, then explicit prop, then ambient inherited-kind, then
+    // 'neutral'. Validation-kind passes through to descendants on its own channel — we never
+    // re-provide it.
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+
+    const effectiveKind = computed<SkInputGroupKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Re-provide on the inherited-kind channel so descendants pick up the group's prop-driven
+    // kind as their default. Use the prop directly (not the resolved value) so a parent SkField's
+    // validation override doesn't propagate as the group's "ambient default" and clobber children
+    // that have their own explicit kind.
+    const ambientKind = computed<SkInputGroupKind | undefined>(() =>
+    {
+        if(props.kind !== undefined) { return props.kind; }
+        return inheritedKind.value;
+    });
+    provide(inheritedKindKey, ambientKind);
+
+    // Size passes straight through to the input-group-size channel — no resolution to do.
+    const sizeRef = toRef(props, 'size');
+    provide(inputGroupSizeKey, sizeRef);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function hasCorner(corner : SkInputGroupCorner) : boolean
+    {
+        return props.corners.includes(corner);
+    }
+
+    const classes = computed<Record<string, boolean>>(() => ({
+        'sk-input-group': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ sizeRef.value }`]: true,
+        'sk-cut-top-left': hasCorner('top-left'),
+        'sk-cut-top-right': hasCorner('top-right'),
+        'sk-cut-bottom-right': hasCorner('bottom-right'),
+        'sk-cut-bottom-left': hasCorner('bottom-left'),
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'input-group',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

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

@@ -0,0 +1,104 @@
+import { type InjectionKey, computed, defineComponent, h, provide } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, inputGroupSizeKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkInputGroupAddon from './SkInputGroupAddon.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function withProvides(
+    children : () => ReturnType<typeof h>,
+    provides : Map<InjectionKey<unknown>, unknown> = new Map<InjectionKey<unknown>, unknown>()
+) : ReturnType<typeof defineComponent>
+{
+    return defineComponent({
+        setup()
+        {
+            for(const [ key, value ] of provides)
+            {
+                provide(key, value);
+            }
+            return () => h('div', children());
+        },
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInputGroupAddon', () =>
+{
+    it('renders a span with the addon class', () =>
+    {
+        const wrapper = mount(SkInputGroupAddon, { slots: { default: '$' } });
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.exists()).toBe(true);
+        expect(span.text()).toBe('$');
+    });
+
+    it('uses injected input-group-size when no explicit size is set', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, null, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([ [ inputGroupSizeKey, computed(() => 'lg') ] ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-lg');
+    });
+
+    it('uses injected inherited-kind when no explicit kind is set', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, null, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([ [ inheritedKindKey, computed(() => 'primary') ] ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-primary');
+    });
+
+    it('validation-kind always wins over explicit kind and inherited-kind', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, { kind: 'success' }, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([
+                [ validationKindKey, computed(() => 'danger') ],
+                [ inheritedKindKey, computed(() => 'primary') ],
+            ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-danger');
+        expect(span.classes()).not.toContain('sk-success');
+        expect(span.classes()).not.toContain('sk-primary');
+    });
+
+    it('explicit props override inherited-kind and input-group-size', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, { size: 'sm', kind: 'danger' }, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([
+                [ inputGroupSizeKey, computed(() => 'lg') ],
+                [ inheritedKindKey, computed(() => 'primary') ],
+            ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-sm');
+        expect(span.classes()).toContain('sk-danger');
+        expect(span.classes()).not.toContain('sk-lg');
+        expect(span.classes()).not.toContain('sk-primary');
+    });
+
+    it('defaults to md/neutral when nothing is provided', () =>
+    {
+        const wrapper = mount(SkInputGroupAddon);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-md');
+        expect(span.classes()).toContain('sk-neutral');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/InputGroup/SkInputGroupAddon.vue

@@ -0,0 +1,107 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - InputGroup Addon Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <span :class="classes">
+        <slot />
+    </span>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_input-group.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkInputGroupAddon
+     * @description Styled wrapper for non-component content (text, icons, plain HTML) inside an
+     * SkInputGroup. Renders as a span with the addon background, border, and font sizing matching
+     * the surrounding group. Inherits size and kind from the parent SkInputGroup via inject.
+     *
+     * @example
+     * ```vue
+     * <SkInputGroup>
+     *     <SkInputGroupAddon>$</SkInputGroupAddon>
+     *     <SkInput v-model="amount" />
+     * </SkInputGroup>
+     * ```
+     *
+     * @slot default - Addon content. Text, icons, or any inline element.
+     */
+
+    import { computed, inject } from 'vue';
+
+    // Types
+    import type { SkInputGroupAddonKind, SkInputGroupAddonSize } from './types';
+
+    // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkInputGroupAddonComponentProps
+    {
+        /**
+         * Semantic color kind. Inherits from a parent SkInputGroup or SkField when not set.
+         * @default inherited or 'neutral'
+         */
+        kind ?: SkInputGroupAddonKind;
+
+        /**
+         * Size of the addon. Inherits from a parent SkInputGroup when not set.
+         * @default inherited or 'md'
+         */
+        size ?: SkInputGroupAddonSize;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkInputGroupAddonComponentProps>(), {
+        kind: undefined,
+        size: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed<SkInputGroupAddonKind>(() =>
+    {
+        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<SkInputGroupAddonSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed<Record<string, boolean>>(() => ({
+        'sk-input-group-addon': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/InputGroup/types.ts

@@ -0,0 +1,27 @@
+//----------------------------------------------------------------------------------------------------------------------
+// InputGroup Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentCustomColors, ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
+
+export type SkInputGroupKind = ComponentKind;
+export type SkInputGroupSize = ComponentSize;
+
+export type SkInputGroupCorner = SkCorner;
+
+export type SkInputGroupAddonKind = SkInputGroupKind;
+export type SkInputGroupAddonSize = SkInputGroupSize;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export interface SkInputGroupBaseProps extends ComponentCustomColors
+{
+    kind ?: SkInputGroupKind;
+    size ?: SkInputGroupSize;
+    corners ?: SkInputGroupCorner[];
+}
+
+export type SkInputGroupComponentProps = SkInputGroupBaseProps;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Listbox/SkListbox.vue

@@ -71,7 +71,7 @@
      *                 to create visual dividers between groups of options.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         ComboboxAnchor,
         ComboboxContent,
@@ -87,6 +87,13 @@
     import type { SkListboxKind, SkListboxSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
@@ -131,7 +138,7 @@
 
     const props = withDefaults(defineProps<SkListboxComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Search...',
         disabled: false,
     });
@@ -150,19 +157,33 @@
     // Handle portal context (theme injection/re-provision for nested portal components)
     const { theme } = usePortalContext();
 
-    // Inject field kind from parent SkField
-    const fieldKind = inject<ComputedRef<SkListboxKind | undefined>>('field-kind', computed(() => undefined));
+    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<SkListboxKind>(() =>
+    {
+        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<SkListboxSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-listbox': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Modal/SkModal.vue

@@ -1,6 +1,6 @@
 <template>
     <DialogRoot v-model:open="isOpen">
-        <DialogTrigger v-if="$slots.trigger || triggerText" as-child>
+        <DialogTrigger v-if="hasSlotContent(slots.trigger) || triggerText" as-child>
             <slot name="trigger">
                 <SkButton :kind="kind">
                     {{ triggerText }}
@@ -17,7 +17,7 @@
                 @pointer-down-outside="handleOverlayClick"
                 @interact-outside="handleOverlayClick"
             >
-                <div v-if="$slots.title || title" class="sk-modal-header">
+                <div v-if="hasSlotContent(slots.title) || title" class="sk-modal-header">
                     <DialogTitle class="sk-modal-title">
                         <slot name="title" :close="close">
                             {{ title }}
@@ -40,7 +40,7 @@
                 <div class="sk-modal-body">
                     <slot :close="close" />
                 </div>
-                <div v-if="$slots.footer" class="sk-modal-footer">
+                <div v-if="hasSlotContent(slots.footer)" class="sk-modal-footer">
                     <slot name="footer" :close="close" />
                 </div>
             </DialogContent>
@@ -88,7 +88,7 @@
      * @slot footer - Footer content, typically containing action buttons. Receives `{ close }` slot prop.
      */
 
-    import { computed, ref, toRef, watch } from 'vue';
+    import { type Slots, computed, ref, toRef, useSlots, watch } from 'vue';
     import {
         DialogClose,
         DialogContent,
@@ -106,6 +106,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     // Components
     import SkButton from '../Button/SkButton.vue';
 
@@ -206,6 +209,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const isOpen = ref(props.open);
 
     watch(() => props.open, (newValue) =>

package/src/components/NavBar/SkNavBar.vue

@@ -5,19 +5,19 @@
 <template>
     <nav :class="classes" :style="customColorStyles">
         <div class="sk-navbar-content">
-            <div v-if="slots.leading" class="sk-navbar-leading">
+            <div v-if="hasSlotContent(slots.leading)" class="sk-navbar-leading">
                 <slot name="leading" />
             </div>
 
-            <div v-if="slots.brand" class="sk-navbar-brand">
+            <div v-if="hasSlotContent(slots.brand)" class="sk-navbar-brand">
                 <slot name="brand" />
             </div>
 
-            <div v-if="slots.default" class="sk-navbar-nav">
+            <div v-if="hasSlotContent(slots.default)" class="sk-navbar-nav">
                 <slot />
             </div>
 
-            <div v-if="slots.actions" class="sk-navbar-actions">
+            <div v-if="hasSlotContent(slots.actions)" class="sk-navbar-actions">
                 <slot name="actions" />
             </div>
         </div>
@@ -62,6 +62,7 @@
     import type { SkNavBarKind, SkNavBarSize } from './types';
     import type { ComponentCustomColors } from '@/types';
     import { useCustomColors } from '@/composables/useCustomColors';
+    import { hasSlotContent } from '@/utils/slots';
     import { NAVBAR_KIND_KEY, NAVBAR_SIZE_KEY } from './context';
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/NumberInput/SkNumberInput.vue

@@ -17,7 +17,7 @@
             :step="step"
         >
             <NumberFieldInput :class="inputClasses" :placeholder="placeholder" />
-            <div class="sk-number-input-steppers">
+            <div v-if="showSteppers" class="sk-number-input-steppers">
                 <NumberFieldIncrement class="sk-number-input-increment">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@
      * ```
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         NumberFieldDecrement,
         NumberFieldIncrement,
@@ -84,9 +84,16 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkNumberInputKind, SkNumberInputSize } from './types';
+    import type { SkNumberInputCorner, SkNumberInputKind, SkNumberInputSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -170,13 +177,27 @@
          * @default 1
          */
         step ?: number;
+
+        /**
+         * When true, renders the increment/decrement stepper buttons on the right side of the
+         * input. Set to false for a plain numeric text field (users can still use arrow keys
+         * and type values directly).
+         * @default true
+         */
+        showSteppers ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * @default undefined (renders as ['top-right'])
+         */
+        corners ?: SkNumberInputCorner[];
     }
 
     //------------------------------------------------------------------------------------------------------------------
 
     const props = withDefaults(defineProps<SkNumberInputComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -185,6 +206,8 @@
         min: undefined,
         max: undefined,
         step: 1,
+        showSteppers: true,
+        corners: undefined,
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -198,19 +221,37 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject kind from parent SkField if available
-    const fieldKind = inject<ComputedRef<SkNumberInputKind | undefined>>('field-kind', computed(() => undefined));
+    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<SkNumberInputKind>(() =>
+    {
+        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<SkNumberInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const wrapperClasses = computed(() => ({
         'sk-number-input-wrapper': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+        '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/NumberInput/types.ts

@@ -3,8 +3,10 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 export type SkNumberInputKind = ComponentKind;
 export type SkNumberInputSize = ComponentSize;
+export type SkNumberInputCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------