@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/src/components/TagsInput/SkTagsInput.vue

@@ -64,7 +64,7 @@
      * @slot - Not applicable. This component does not accept slot content.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
     import {
         TagsInputInput,
         TagsInputItem,
@@ -78,6 +78,13 @@
     import type { SkTagsInputKind, SkTagsInputSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -151,7 +158,7 @@
 
     const props = withDefaults(defineProps<SkTagsInputComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: 'Add tag...',
         disabled: false,
         max: undefined,
@@ -172,12 +179,26 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject field kind
-    const fieldKind = inject<ComputedRef<SkTagsInputKind | 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<SkTagsInputKind>(() =>
+    {
+        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<SkTagsInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -204,7 +225,7 @@
     const wrapperClasses = computed(() => ({
         'sk-tags-input': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------
@@ -218,7 +239,7 @@
     const tagClasses = computed(() => ({
         [`sk-${ effectiveTagKind.value }`]: true,
         [`sk-${ props.tagVariant }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Textarea/SkTextarea.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 { SkTextareaKind, SkTextareaSize } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -131,7 +138,7 @@
 
     const props = withDefaults(defineProps<SkTextareaComponentProps>(), {
         kind: undefined,
-        size: 'md',
+        size: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -152,19 +159,33 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject kind from parent SkField if available
-    const fieldKind = inject<ComputedRef<SkTextareaKind | 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<SkTextareaKind>(() =>
+    {
+        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<SkTextareaSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() => ({
         'sk-textarea': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
         'sk-readonly': props.readonly,
     }));
 

package/src/components/TreeView/SkTreeItem.vue

@@ -32,7 +32,7 @@
         <div v-else-if="showChevron" class="sk-tree-item-chevron-spacer" />
 
         <!-- Leading slot (icons, checkboxes, etc.) -->
-        <div v-if="$slots.leading" class="sk-tree-item-leading">
+        <div v-if="hasSlotContent(slots.leading)" class="sk-tree-item-leading">
             <slot name="leading" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
 
@@ -47,7 +47,7 @@
         </div>
 
         <!-- Trailing slot -->
-        <div v-if="$slots.trailing" class="sk-tree-item-trailing">
+        <div v-if="hasSlotContent(slots.trailing)" class="sk-tree-item-trailing">
             <slot name="trailing" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
     </TreeItem>
@@ -62,8 +62,12 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
+    import { type Slots, useSlots } from 'vue';
     import { type FlattenedItem, TreeItem } from 'reka-ui';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTreeItemComponentProps
@@ -79,6 +83,10 @@
         disabled: false,
         showChevron: true,
     });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots : Slots = useSlots();
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/composables/injectionKeys.ts

@@ -0,0 +1,52 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Injection Keys
+//
+// Typed Vue `InjectionKey` symbols for the cross-component context channels. Replaces the
+// stringly-typed `inject('field-kind')` calls that used to be repeated at every consumer site.
+//
+// Two channels carry kind context, with deliberately distinct semantics:
+//
+//   validation-kind  — set ONLY by SkField when its `state` prop is true/false (validation
+//                      override). Always wins over a component's explicit `kind` prop. Empty
+//                      otherwise.
+//
+//   inherited-kind   — set by ambient kind providers (currently SkInputGroup). Used as the
+//                      default when the component's own `kind` prop is undefined. Never
+//                      overrides an explicit prop.
+//
+// The unified resolution rule for every form component is therefore:
+//
+//   validationKind ?? props.kind ?? inheritedKind ?? 'neutral'
+//
+// Size has a single ambient channel (`input-group-size`); validation does not affect sizing.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { type ComputedRef, type InjectionKey, computed } from 'vue';
+
+// Types
+import type { ComponentKind, ComponentSize } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type KindContext = ComputedRef<ComponentKind | undefined>;
+export type SizeContext = ComputedRef<ComponentSize | undefined>;
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export const validationKindKey : InjectionKey<KindContext> = Symbol('validation-kind');
+
+export const inheritedKindKey : InjectionKey<KindContext> = Symbol('inherited-kind');
+
+export const inputGroupSizeKey : InjectionKey<SizeContext> = Symbol('input-group-size');
+
+//----------------------------------------------------------------------------------------------------------------------
+// Shared inject fallbacks. Use these as the default argument to `inject(key, NO_KIND)` instead of
+// constructing a fresh `computed(() => undefined)` per component setup. Identity stable, so
+// nothing memoises against them anyway, but it keeps the call sites tidy.
+//----------------------------------------------------------------------------------------------------------------------
+
+export const NO_KIND : KindContext = computed(() => undefined);
+
+export const NO_SIZE : SizeContext = computed(() => undefined);
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/index.ts

@@ -12,6 +12,14 @@ import type { SkThemeComponentProps } from './components/Theme/types';
 import SkAccordion, { type SkAccordionComponentProps } from './components/Accordion/SkAccordion.vue';
 import SkAccordionItem, { type SkAccordionItemComponentProps } from './components/Accordion/SkAccordionItem.vue';
 import SkAlert, { type SkAlertComponentProps } from './components/Alert/SkAlert.vue';
+import SkAutocomplete, { type SkAutocompleteComponentProps } from './components/Autocomplete/SkAutocomplete.vue';
+import SkAutocompleteEmpty from './components/Autocomplete/SkAutocompleteEmpty.vue';
+import SkAutocompleteGroup from './components/Autocomplete/SkAutocompleteGroup.vue';
+import SkAutocompleteGroupLabel from './components/Autocomplete/SkAutocompleteGroupLabel.vue';
+import SkAutocompleteItem, {
+    type SkAutocompleteItemComponentProps,
+} from './components/Autocomplete/SkAutocompleteItem.vue';
+import SkAutocompleteSeparator from './components/Autocomplete/SkAutocompleteSeparator.vue';
 import SkAvatar, { type SkAvatarComponentProps } from './components/Avatar/SkAvatar.vue';
 import SkBreadcrumbItem, {
     type SkBreadcrumbItemComponentProps,
@@ -63,6 +71,8 @@ import SkDropdownSubmenu, {
 import SkField, { type SkFieldComponentProps } from './components/Field/SkField.vue';
 import SkGroup, { type SkGroupComponentProps } from './components/Group/SkGroup.vue';
 import SkInput, { type SkInputComponentProps } from './components/Input/SkInput.vue';
+import SkInputGroup, { type SkInputGroupComponentProps } from './components/InputGroup/SkInputGroup.vue';
+import SkInputGroupAddon, { type SkInputGroupAddonComponentProps } from './components/InputGroup/SkInputGroupAddon.vue';
 import SkListbox, { type SkListboxComponentProps } from './components/Listbox/SkListbox.vue';
 import SkListboxItem, { type SkListboxItemComponentProps } from './components/Listbox/SkListboxItem.vue';
 import SkListboxSeparator from './components/Listbox/SkListboxSeparator.vue';
@@ -139,6 +149,7 @@ export * from './types';
 
 export * from './components/Accordion/types';
 export * from './components/Alert/types';
+export * from './components/Autocomplete/types';
 export * from './components/Avatar/types';
 export * from './components/Breadcrumbs/types';
 export * from './components/Button/types';
@@ -152,6 +163,7 @@ export * from './components/Dropdown/types';
 export * from './components/Field/types';
 export * from './components/Group/types';
 export * from './components/Input/types';
+export * from './components/InputGroup/types';
 export * from './components/Listbox/types';
 export * from './components/Modal/types';
 export * from './components/NavBar/types';
@@ -195,6 +207,12 @@ export { useToast } from './components/Toast/useToast';
 export { SkAccordion, type SkAccordionComponentProps };
 export { SkAccordionItem, type SkAccordionItemComponentProps };
 export { SkAlert, type SkAlertComponentProps };
+export { SkAutocomplete, type SkAutocompleteComponentProps };
+export { SkAutocompleteEmpty };
+export { SkAutocompleteGroup };
+export { SkAutocompleteGroupLabel };
+export { SkAutocompleteItem, type SkAutocompleteItemComponentProps };
+export { SkAutocompleteSeparator };
 export { SkAvatar, type SkAvatarComponentProps };
 export { SkBreadcrumbItem, type SkBreadcrumbItemComponentProps };
 export { SkBreadcrumbs, type SkBreadcrumbsComponentProps };
@@ -224,6 +242,8 @@ export { SkDropdownSubmenu, type SkDropdownSubmenuComponentProps };
 export { SkField, type SkFieldComponentProps };
 export { SkGroup, type SkGroupComponentProps };
 export { SkInput, type SkInputComponentProps };
+export { SkInputGroup, type SkInputGroupComponentProps };
+export { SkInputGroupAddon, type SkInputGroupAddonComponentProps };
 export { SkListbox, type SkListboxComponentProps };
 export { SkListboxItem, type SkListboxItemComponentProps };
 export { SkListboxSeparator };
@@ -286,6 +306,12 @@ const SleekSpaceUI : Plugin = {
         app.component('SkAccordion', SkAccordion);
         app.component('SkAccordionItem', SkAccordionItem);
         app.component('SkAlert', SkAlert);
+        app.component('SkAutocomplete', SkAutocomplete);
+        app.component('SkAutocompleteEmpty', SkAutocompleteEmpty);
+        app.component('SkAutocompleteGroup', SkAutocompleteGroup);
+        app.component('SkAutocompleteGroupLabel', SkAutocompleteGroupLabel);
+        app.component('SkAutocompleteItem', SkAutocompleteItem);
+        app.component('SkAutocompleteSeparator', SkAutocompleteSeparator);
         app.component('SkAvatar', SkAvatar);
         app.component('SkBreadcrumbItem', SkBreadcrumbItem);
         app.component('SkBreadcrumbs', SkBreadcrumbs);
@@ -315,6 +341,8 @@ const SleekSpaceUI : Plugin = {
         app.component('SkField', SkField);
         app.component('SkGroup', SkGroup);
         app.component('SkInput', SkInput);
+        app.component('SkInputGroup', SkInputGroup);
+        app.component('SkInputGroupAddon', SkInputGroupAddon);
         app.component('SkListbox', SkListbox);
         app.component('SkListboxItem', SkListboxItem);
         app.component('SkListboxSeparator', SkListboxSeparator);

package/src/static/__tests__/parity.test.ts

@@ -39,10 +39,11 @@ import { field } from '../components/field';
 import { table } from '../components/table';
 
 import { compareParity } from './parityHarness';
+import type { H } from '../h';
 
 //----------------------------------------------------------------------------------------------------------------------
 
-type StaticFn = (p : Record<string, unknown>, c ?: string) => string;
+type StaticFn = (h : H<string>, p : Record<string, unknown>, c ?: string) => string;
 
 function expectParity(result : ReturnType<typeof compareParity>) : void
 {

package/src/static/__tests__/parityHarness.ts

@@ -13,12 +13,15 @@
 import { mount } from '@vue/test-utils';
 import type { Component } from 'vue';
 
+import { stringH } from '../stringH';
+import type { H } from '../h';
+
 //----------------------------------------------------------------------------------------------------------------------
 
 export interface ParityInput
 {
     vueComponent : Component;
-    staticHelper : (props : Record<string, unknown>, children ?: string) => string;
+    staticHelper : (h : H<string>, props : Record<string, unknown>, children ?: string) => string;
     props : Record<string, unknown>;
     children ?: string;
 }
@@ -235,7 +238,7 @@ export function compareParity(input : ParityInput) : ParityResult
     });
     const vueHtml = wrapper.html();
 
-    const staticHtml = input.staticHelper(input.props, input.children);
+    const staticHtml = input.staticHelper(stringH, input.props, input.children);
 
     const parser = new DOMParser();
     const vueDoc = parser.parseFromString(`<div>${ vueHtml }</div>`, 'text/html');