@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/src/components/Accordion/SkAccordionItem.vue

@@ -63,7 +63,7 @@
      *               Use this for complex headers with icons, badges, or conditional styling.
      */
 
-    import { type ComputedRef, type Ref, computed, inject, ref } from 'vue';
+    import { computed, inject } from 'vue';
     import {
         AccordionContent,
         AccordionHeader,
@@ -74,6 +74,9 @@
     // Types
     import type { SkAccordionKind } from './types';
 
+    // Context
+    import { ACCORDION_KIND_KEY, ACCORDION_MODEL_VALUE_KEY } from './context';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkAccordionItemComponentProps
@@ -119,11 +122,11 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Inject parent kind and compute effective kind
-    const parentKind = inject<ComputedRef<SkAccordionKind>>('accordion-kind', computed(() => 'neutral'));
-    const effectiveKind = computed(() => props.kind ?? parentKind.value);
+    const parentKind = inject(ACCORDION_KIND_KEY, computed(() => undefined));
+    const effectiveKind = computed<SkAccordionKind>(() => props.kind ?? parentKind.value ?? 'neutral');
 
     // Inject parent modelValue to check if this item is open
-    const parentModelValue = inject<Ref<string | string[] | undefined>>('accordion-modelValue', ref(undefined));
+    const parentModelValue = inject(ACCORDION_MODEL_VALUE_KEY, computed(() => undefined));
     const isOpen = computed(() =>
     {
         const modelValue = parentModelValue.value;

package/src/components/Accordion/context.ts

@@ -0,0 +1,23 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Accordion Context
+//
+// Injection keys for SkAccordionItem descendants. The kind channel lets items pick up the parent
+// SkAccordion's kind without manual wiring; the model-value channel lets each item observe the
+// open-state shared with its siblings.
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+
+import type { SkAccordionKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const ACCORDION_KIND_KEY : InjectionKey<ComputedRef<SkAccordionKind | undefined>>
+    = Symbol('sk-accordion-kind');
+
+// SkAccordion provides a writable computed for two-way binding; consumers only read, so the
+// ambient channel is typed as a plain Ref to accept both writable and readonly providers.
+export const ACCORDION_MODEL_VALUE_KEY : InjectionKey<Ref<string | string[] | undefined>>
+    = Symbol('sk-accordion-model-value');
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Autocomplete/SkAutocomplete.test.ts

@@ -0,0 +1,83 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkAutocomplete Component Tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import SkAutocomplete from './SkAutocomplete.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkAutocomplete', () =>
+{
+    it('renders the wrapper with the default kind class', () =>
+    {
+        const wrapper = mount(SkAutocomplete);
+        const root = wrapper.find('.sk-autocomplete');
+        expect(root.exists()).toBe(true);
+        expect(root.classes()).toContain('sk-neutral');
+        expect(root.classes()).toContain('sk-md');
+    });
+
+    it('applies the explicit kind and size as classes', () =>
+    {
+        const wrapper = mount(SkAutocomplete, {
+            props: { kind: 'primary', size: 'lg' },
+        });
+        const root = wrapper.find('.sk-autocomplete');
+        expect(root.classes()).toContain('sk-primary');
+        expect(root.classes()).toContain('sk-lg');
+    });
+
+    it('omits the clear button by default', () =>
+    {
+        const wrapper = mount(SkAutocomplete);
+        expect(wrapper.find('.sk-autocomplete-cancel').exists()).toBe(false);
+    });
+
+    it('renders the clear button when clearable is true', () =>
+    {
+        const wrapper = mount(SkAutocomplete, { props: { clearable: true } });
+        expect(wrapper.find('.sk-autocomplete-cancel').exists()).toBe(true);
+    });
+
+    it('passes the placeholder to the input', () =>
+    {
+        const wrapper = mount(SkAutocomplete, { props: { placeholder: 'Find things...' } });
+        const input = wrapper.find('input');
+        expect(input.attributes('placeholder')).toBe('Find things...');
+    });
+
+    it('disables the input when disabled is true', () =>
+    {
+        const wrapper = mount(SkAutocomplete, { props: { disabled: true } });
+        const input = wrapper.find('input');
+        expect(input.attributes('disabled')).toBeDefined();
+    });
+
+    it('emits update:search when the user types', async () =>
+    {
+        const wrapper = mount(SkAutocomplete);
+        const input = wrapper.find('input');
+        await input.setValue('hello');
+        const events = wrapper.emitted('update:search');
+        expect(events).toBeDefined();
+        expect(events?.at(-1)).toEqual([ 'hello' ]);
+    });
+
+    it('two-way binds the typed string via v-model', async () =>
+    {
+        const wrapper = mount(SkAutocomplete, {
+            props: {
+                'modelValue': '',
+                'onUpdate:modelValue': (value : string) => wrapper.setProps({ modelValue: value }),
+            },
+        });
+        const input = wrapper.find('input');
+        await input.setValue('typed');
+        expect(wrapper.props('modelValue')).toBe('typed');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Autocomplete/SkAutocomplete.vue

@@ -0,0 +1,305 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Autocomplete Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteRoot
+        v-model="modelValue"
+        :disabled="disabled"
+        :ignore-filter="ignoreFilter"
+        :open-on-focus="openOnFocus"
+        :open-on-click="openOnClick"
+        :class="wrapperClasses"
+        :style="customColorStyles"
+        @update:model-value="onUpdateModel"
+    >
+        <AutocompleteAnchor :class="anchorClasses">
+            <AutocompleteInput :class="inputClasses" :placeholder="placeholder" />
+            <AutocompleteCancel v-if="clearable" :class="cancelClasses" aria-label="Clear">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="square"
+                    stroke-linejoin="miter"
+                    style="width: 0.875rem; height: 0.875rem;"
+                >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+            </AutocompleteCancel>
+            <AutocompleteTrigger :class="triggerClasses">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="square"
+                    stroke-linejoin="miter"
+                    style="width: 1rem; height: 1rem;"
+                >
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </AutocompleteTrigger>
+        </AutocompleteAnchor>
+
+        <AutocompletePortal>
+            <AutocompleteContent
+                :data-scheme="theme"
+                :class="contentClasses"
+                :style="customColorStyles"
+                position="popper"
+                side="bottom"
+                align="start"
+                :side-offset="4"
+            >
+                <AutocompleteViewport>
+                    <slot />
+                </AutocompleteViewport>
+            </AutocompleteContent>
+        </AutocompletePortal>
+    </AutocompleteRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocomplete
+     * @description A text input with advisory suggestions. Unlike SkListbox (which restricts the user to a
+     * predefined list), SkAutocomplete accepts free-form text and surfaces matching suggestions as the user
+     * types. Built on RekaUI's Autocomplete primitive with full keyboard navigation, client-side filtering,
+     * and portal rendering.
+     *
+     * Use SkAutocomplete for search bars, free-form fields with helpful suggestions, and any case where the
+     * user may type a value that isn't in the suggestion list. Use SkListbox when the user must pick from
+     * the list. Use SkSelect for short, fixed lists.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query" kind="primary" placeholder="Search...">
+     *     <SkAutocompleteItem value="apple">Apple</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="banana">Banana</SkAutocompleteItem>
+     *     <SkAutocompleteEmpty>No matches</SkAutocompleteEmpty>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @example Async suggestions
+     * ```vue
+     * <SkAutocomplete v-model="query" :ignore-filter="true" @update:search="loadSuggestions">
+     *     <SkAutocompleteItem v-for="item in results" :key="item.id" :value="item.label">
+     *         {{ item.label }}
+     *     </SkAutocompleteItem>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot default - SkAutocompleteItem, SkAutocompleteSeparator, SkAutocompleteGroup, and
+     *                 SkAutocompleteEmpty components representing the available suggestions.
+     */
+
+    import { computed, inject, toRef } from 'vue';
+    import {
+        AutocompleteAnchor,
+        AutocompleteCancel,
+        AutocompleteContent,
+        AutocompleteInput,
+        AutocompletePortal,
+        AutocompleteRoot,
+        AutocompleteTrigger,
+        AutocompleteViewport,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkAutocompleteKind, SkAutocompleteSize } from './types';
+
+    // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkAutocompleteComponentProps extends ComponentCustomColors
+    {
+        /**
+         * Semantic color kind that controls the input border, focus ring, and highlighted
+         * suggestion appearance. When used inside SkField, inherits the field's kind if not
+         * explicitly set.
+         * @default 'neutral' (or inherited from parent SkField)
+         */
+        kind ?: SkAutocompleteKind;
+
+        /**
+         * Size of the input field and dropdown content. Controls input height, text size,
+         * and option dimensions. Available sizes: 'sm', 'md', 'lg'.
+         * @default 'md'
+         */
+        size ?: SkAutocompleteSize;
+
+        /**
+         * Placeholder text displayed in the input field when empty.
+         * @default 'Search...'
+         */
+        placeholder ?: string;
+
+        /**
+         * When true, the autocomplete is disabled and cannot be interacted with.
+         * @default false
+         */
+        disabled ?: boolean;
+
+        /**
+         * When true, opens the suggestion menu as soon as the input gains focus.
+         * Set to false to require typing before suggestions appear.
+         * @default true
+         */
+        openOnFocus ?: boolean;
+
+        /**
+         * When true, opens the suggestion menu on click. RekaUI's default is false; opt in
+         * if you want a click-to-open UX in addition to focus-based opening.
+         * @default false
+         */
+        openOnClick ?: boolean;
+
+        /**
+         * When true, displays a clear button inside the input that resets the typed value.
+         * @default false
+         */
+        clearable ?: boolean;
+
+        /**
+         * When true, disables the built-in client-side filtering. Use this for async or
+         * server-driven suggestions, where you'll listen to `@update:search` and provide
+         * pre-filtered items.
+         * @default false
+         */
+        ignoreFilter ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkAutocompleteComponentProps>(), {
+        kind: undefined,
+        size: undefined,
+        placeholder: 'Search...',
+        disabled: false,
+        openOnFocus: true,
+        openOnClick: false,
+        clearable: false,
+        ignoreFilter: false,
+    });
+
+    const emit = defineEmits<{
+        /**
+         * Fires whenever the input text changes. Useful for async suggestion loading
+         * (combine with `:ignore-filter="true"`).
+         */
+        'update:search' : [ value : string ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * The typed text. Use with `v-model` for two-way binding.
+     */
+    const modelValue = defineModel<string>({ default: '' });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed<SkAutocompleteKind>(() =>
+    {
+        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<SkAutocompleteSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function onUpdateModel(value : string) : void
+    {
+        emit('update:search', value);
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-autocomplete': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const anchorClasses = computed(() => ({
+        'sk-autocomplete-anchor': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const inputClasses = computed(() => ({
+        'sk-autocomplete-input': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const cancelClasses = computed(() => ({
+        'sk-autocomplete-cancel': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-autocomplete-trigger': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-autocomplete-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'autocomplete',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/SkAutocompleteEmpty.vue

@@ -0,0 +1,39 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteEmpty Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteEmpty class="sk-autocomplete-empty">
+        <slot />
+    </AutocompleteEmpty>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteEmpty
+     * @description Content displayed inside an SkAutocomplete dropdown when no suggestions match the
+     * current input. RekaUI handles the show/hide logic automatically based on the filter result.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query">
+     *     <SkAutocompleteItem value="apple">Apple</SkAutocompleteItem>
+     *     <SkAutocompleteEmpty>No matches found</SkAutocompleteEmpty>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot default - The empty-state message. Can be plain text or rich content.
+     */
+
+    import { AutocompleteEmpty } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/SkAutocompleteGroup.vue

@@ -0,0 +1,46 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteGroup class="sk-autocomplete-group">
+        <slot />
+    </AutocompleteGroup>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteGroup
+     * @description Semantic grouping wrapper for related suggestions within an SkAutocomplete dropdown.
+     * Pair with SkAutocompleteGroupLabel to give the group a heading.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query">
+     *     <SkAutocompleteGroup>
+     *         <SkAutocompleteGroupLabel>Fruits</SkAutocompleteGroupLabel>
+     *         <SkAutocompleteItem value="apple">Apple</SkAutocompleteItem>
+     *         <SkAutocompleteItem value="banana">Banana</SkAutocompleteItem>
+     *     </SkAutocompleteGroup>
+     *     <SkAutocompleteGroup>
+     *         <SkAutocompleteGroupLabel>Vegetables</SkAutocompleteGroupLabel>
+     *         <SkAutocompleteItem value="carrot">Carrot</SkAutocompleteItem>
+     *     </SkAutocompleteGroup>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot default - SkAutocompleteGroupLabel and SkAutocompleteItem children.
+     */
+
+    import { AutocompleteGroup } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/SkAutocompleteGroupLabel.vue

@@ -0,0 +1,39 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteGroupLabel Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteLabel class="sk-autocomplete-group-label">
+        <slot />
+    </AutocompleteLabel>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteGroupLabel
+     * @description A non-selectable heading for a group of related suggestions inside an
+     * SkAutocompleteGroup. Use to label groups like "Fruits" or "Recent searches".
+     *
+     * @example
+     * ```vue
+     * <SkAutocompleteGroup>
+     *     <SkAutocompleteGroupLabel>Recent</SkAutocompleteGroupLabel>
+     *     <SkAutocompleteItem value="recent1">Recent search 1</SkAutocompleteItem>
+     * </SkAutocompleteGroup>
+     * ```
+     *
+     * @slot default - The heading text.
+     */
+
+    import { AutocompleteLabel } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Autocomplete/SkAutocompleteItem.vue

@@ -0,0 +1,85 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - AutocompleteItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AutocompleteItem
+        :class="classes"
+        :value="value"
+        :disabled="disabled"
+        :text-value="textValue"
+    >
+        <slot />
+    </AutocompleteItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_autocomplete.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkAutocompleteItem
+     * @description A selectable suggestion within an SkAutocomplete dropdown. When chosen, the item's
+     * `value` is written into the input. Built on RekaUI's AutocompleteItem with keyboard navigation
+     * and type-ahead support.
+     *
+     * @example
+     * ```vue
+     * <SkAutocomplete v-model="query">
+     *     <SkAutocompleteItem value="apple">Apple</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="banana">Banana</SkAutocompleteItem>
+     *     <SkAutocompleteItem value="cherry" disabled>Cherry (out of stock)</SkAutocompleteItem>
+     * </SkAutocomplete>
+     * ```
+     *
+     * @slot default - The display content for this suggestion. Can be plain text or rich content.
+     */
+
+    import { computed } from 'vue';
+    import { AutocompleteItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkAutocompleteItemComponentProps
+    {
+        /**
+         * The string written into the input when this item is selected. Must be unique
+         * within the autocomplete to ensure proper highlight/match behavior.
+         */
+        value : string;
+
+        /**
+         * When true, this suggestion is disabled and cannot be selected. Skipped during
+         * keyboard navigation.
+         * @default false
+         */
+        disabled ?: boolean;
+
+        /**
+         * Optional override for filter/typeahead matching. Use when the slot content is
+         * non-textual (icons, custom layouts) and you need to specify what text the
+         * client-side filter should match against.
+         */
+        textValue ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkAutocompleteItemComponentProps>(), {
+        disabled: false,
+        textValue: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-autocomplete-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->