@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

package/src/components/Select/SkSelect.vue

@@ -0,0 +1,210 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Select Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="wrapperClasses" :style="customColorStyles">
+        <SelectRoot v-model="modelValue" :disabled="disabled">
+            <SelectTrigger :class="triggerClasses">
+                <SelectValue :placeholder="placeholder">
+                    <template v-if="displayText">
+                        {{ displayText }}
+                    </template>
+                </SelectValue>
+                <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; flex-shrink: 0;"
+                >
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </SelectTrigger>
+
+            <SelectPortal>
+                <SelectContent
+                    :data-scheme="theme"
+                    :class="contentClasses"
+                    :style="customColorStyles"
+                    position="popper"
+                    side="bottom"
+                    align="start"
+                    :side-offset="4"
+                >
+                    <SelectViewport>
+                        <slot />
+                    </SelectViewport>
+                </SelectContent>
+            </SelectPortal>
+        </SelectRoot>
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelect
+     * @description A simple dropdown select for picking from predefined options. Unlike SkListbox which includes
+     * a search input for filtering, SkSelect provides a clean trigger button that opens a dropdown panel.
+     * Built on RekaUI's Select primitive with full keyboard navigation and portal rendering.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selectedCountry" kind="primary" placeholder="Select a country...">
+     *     <SkSelectItem value="us">United States</SkSelectItem>
+     *     <SkSelectItem value="uk">United Kingdom</SkSelectItem>
+     *     <SkSelectItem value="ca">Canada</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot default - SkSelectItem components representing the available options. Use SkSelectSeparator
+     *                 to create visual dividers between groups of options.
+     */
+
+    import { type ComputedRef, computed, inject, provide, reactive, toRef } from 'vue';
+    import {
+        SelectContent,
+        SelectPortal,
+        SelectRoot,
+        SelectTrigger,
+        SelectValue,
+        SelectViewport,
+    } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkSelectKind, SkSelectSize } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSelectComponentProps extends ComponentCustomColors
+    {
+        /**
+         * Semantic color kind that controls the trigger border, focus ring, and selected
+         * item highlight appearance. When used inside SkField, inherits the field's
+         * kind if not explicitly set.
+         * @default 'neutral' (or inherited from parent SkField)
+         */
+        kind ?: SkSelectKind;
+
+        /**
+         * Size of the trigger and dropdown content. Controls the trigger height,
+         * text size, and option item dimensions. Available sizes: 'sm' (small),
+         * 'md' (medium), 'lg' (large).
+         * @default 'md'
+         */
+        size ?: SkSelectSize;
+
+        /**
+         * Placeholder text displayed in the trigger when no option is selected.
+         * Use to guide users on what type of selection to make.
+         * @default 'Select...'
+         */
+        placeholder ?: string;
+
+        /**
+         * When true, the select is disabled and cannot be interacted with. The trigger
+         * is non-clickable and the dropdown cannot be opened. The component appears
+         * with reduced opacity and the cursor changes to not-allowed.
+         * @default false
+         */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSelectComponentProps>(), {
+        kind: undefined,
+        size: 'md',
+        placeholder: 'Select...',
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * The selected value. Use with `v-model` for two-way binding. The value corresponds
+     * to the `value` prop of the selected SkSelectItem.
+     */
+    const modelValue = defineModel<string>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Handle portal context (theme injection/re-provision for nested portal components)
+    const { theme } = usePortalContext();
+
+    // Inject field kind from parent SkField
+    const fieldKind = inject<ComputedRef<SkSelectKind | undefined>>('field-kind', computed(() => undefined));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Item label registry -- items register their value→label on mount so we can display
+    // the selected text synchronously, avoiding the flash from SelectValue's async detection.
+    const itemLabels = reactive(new Map<string, string>());
+
+    provide('sk-select-register', (value : string, label : string) =>
+    {
+        itemLabels.set(value, label);
+    });
+
+    provide('sk-select-unregister', (value : string) =>
+    {
+        itemLabels.delete(value);
+    });
+
+    const displayText = computed(() =>
+    {
+        if(!modelValue.value) { return ''; }
+        return itemLabels.get(modelValue.value) || modelValue.value;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const wrapperClasses = computed(() => ({
+        'sk-select': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ props.size }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-select-trigger': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-select-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'select',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/SkSelectItem.vue

@@ -0,0 +1,112 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SelectItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SelectItem :class="classes" :value="value" :disabled="disabled">
+        <SelectItemText ref="textEl">
+            <slot />
+        </SelectItemText>
+        <SelectItemIndicator class="sk-select-item-indicator">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="square"
+                stroke-linejoin="miter"
+                style="width: 1rem; height: 1rem;"
+            >
+                <polyline points="20 6 9 17 4 12" />
+            </svg>
+        </SelectItemIndicator>
+    </SelectItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelectItem
+     * @description A selectable option within an SkSelect dropdown. When selected, the item displays a
+     * checkmark indicator and its value is set as the select's v-model. Built on RekaUI's SelectItem
+     * with keyboard navigation support.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selected">
+     *     <SkSelectItem value="option1">First Option</SkSelectItem>
+     *     <SkSelectItem value="option2">Second Option</SkSelectItem>
+     *     <SkSelectItem value="option3" disabled>Unavailable Option</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot default - The display content for this option. Can be plain text or rich content including
+     *                 icons, formatted text, or custom layouts. This is what users see in the dropdown.
+     */
+
+    import { computed, inject, onMounted, onUnmounted, useTemplateRef } from 'vue';
+    import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSelectItemComponentProps
+    {
+        /**
+         * The value this option represents. When selected, the parent SkSelect's v-model
+         * will be set to this value. Must be a string and unique within the select.
+         */
+        value : string;
+
+        /**
+         * When true, this option is disabled and cannot be selected. The item appears
+         * with reduced opacity and is skipped during keyboard navigation.
+         * @default false
+         */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSelectItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const textEl = useTemplateRef<InstanceType<typeof SelectItemText>>('textEl');
+    const register = inject<(value : string, label : string) => void>('sk-select-register', undefined);
+    const unregister = inject<(value : string) => void>('sk-select-unregister', undefined);
+
+    onMounted(() =>
+    {
+        const el = (textEl.value as unknown as { $el ?: HTMLElement })?.$el;
+        if(register)
+        {
+            register(props.value, el?.textContent?.trim() || props.value);
+        }
+    });
+
+    onUnmounted(() =>
+    {
+        if(unregister)
+        {
+            unregister(props.value);
+        }
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-select-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/SkSelectSeparator.vue

@@ -0,0 +1,40 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SelectSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SelectSeparator class="sk-select-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_select.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkSelectSeparator
+     * @description A visual divider for organizing options within an SkSelect dropdown. Use to create
+     * logical groups of related options without affecting selection behavior. Renders as a horizontal
+     * line between items with appropriate spacing.
+     *
+     * @example
+     * ```vue
+     * <SkSelect v-model="selected">
+     *     <SkSelectItem value="recent1">Recent Document 1</SkSelectItem>
+     *     <SkSelectItem value="recent2">Recent Document 2</SkSelectItem>
+     *     <SkSelectSeparator />
+     *     <SkSelectItem value="all">Browse All Documents...</SkSelectItem>
+     * </SkSelect>
+     * ```
+     *
+     * @slot - Not applicable. This component does not accept slot content.
+     */
+
+    import { SelectSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Select/index.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Select Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkSelect } from './SkSelect.vue';
+export { default as SkSelectItem } from './SkSelectItem.vue';
+export { default as SkSelectSeparator } from './SkSelectSeparator.vue';
+export type { SkSelectKind, SkSelectSize } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Select/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Select Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind, ComponentSize } from '@/types';
+
+export type SkSelectKind = ComponentKind;
+export type SkSelectSize = ComponentSize;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Sidebar/SkSidebar.vue

@@ -3,11 +3,13 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <aside :class="classes">
+    <aside :class="classes" :style="sidebarStyles">
         <SkPanel
             :kind="kind"
             :base-color="baseColor"
             :text-color="textColor"
+            :corners="panelCorners"
+            :decoration-corner="panelDecorationCorner"
             class="sk-sidebar-panel"
         >
             <div class="sk-panel-scroll-content">
@@ -49,8 +51,13 @@
      */
 
     import { computed } from 'vue';
-    import type { SkSidebarKind } from './types';
+
+    // Types
+    import type { SkSidebarKind, SkSidebarSide } from './types';
     import type { ComponentCustomColors } from '@/types';
+    import type { SkPanelCorner } from '../Panel/types';
+
+    // Components
     import SkPanel from '../Panel/SkPanel.vue';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -72,6 +79,13 @@
          * @default '180px'
          */
         width ?: string;
+
+        /**
+         * Which side of the layout the sidebar is placed on. Controls the direction of the
+         * panel bevel and the sidebar-item clip-path cuts so they mirror appropriately.
+         * @default 'left'
+         */
+        side ?: SkSidebarSide;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -79,17 +93,40 @@
     const props = withDefaults(defineProps<SkSidebarComponentProps>(), {
         kind: 'neutral',
         width: '180px',
+        side: 'left',
     });
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const panelCorners = computed<SkPanelCorner[]>(() =>
+    {
+        return props.side === 'right' ? [ 'bottom-left' ] : [ 'bottom-right' ];
+    });
+
+    const panelDecorationCorner = computed<SkPanelCorner>(() =>
+    {
+        return props.side === 'right' ? 'bottom-left' : 'bottom-right';
+    });
+
     const classes = computed(() =>
     {
         return {
             'sk-sidebar': true,
             [`sk-${ props.kind }`]: true,
+            'sk-sidebar-right': props.side === 'right',
         };
     });
+
+    // Bridge custom colors to sidebar item theming
+    const sidebarStyles = computed(() =>
+    {
+        const styles : Record<string, string> = {};
+        if(props.baseColor)
+        {
+            styles['--sk-sidebar-color-base'] = props.baseColor;
+        }
+        return styles;
+    });
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Sidebar/types.ts

@@ -1,3 +1,5 @@
 import type { ComponentKind } from '@/types';
 
 export type SkSidebarKind = ComponentKind;
+
+export type SkSidebarSide = 'left' | 'right';

package/src/components/Splitter/SkSplitter.vue

@@ -0,0 +1,65 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Splitter Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SplitterGroup :direction="direction" :class="classes" :style="customColorStyles">
+        <slot />
+    </SplitterGroup>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_splitter.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, provide, toRef } from 'vue';
+    import { SplitterGroup } from 'reka-ui';
+
+    // Types
+    import type { SkSplitterDirection, SkSplitterKind } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSplitterComponentProps
+    {
+        direction ?: SkSplitterDirection;
+        kind ?: SkSplitterKind;
+        baseColor ?: string;
+        textColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkSplitterComponentProps>(), {
+        direction: 'horizontal',
+        kind: 'neutral',
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    provide('splitter-kind', computed(() => props.kind));
+
+    const customColorStyles = useCustomColors(
+        'splitter',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    const classes = computed(() => ({
+        'sk-splitter': true,
+        [`sk-${ props.kind }`]: true,
+        [`sk-${ props.direction }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Splitter/SkSplitterHandle.vue

@@ -0,0 +1,40 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SplitterHandle Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SplitterResizeHandle class="sk-splitter-handle" :disabled="disabled">
+        <div class="sk-splitter-handle-grip">
+            <div class="sk-splitter-handle-dot" />
+            <div class="sk-splitter-handle-dot" />
+            <div class="sk-splitter-handle-dot" />
+        </div>
+    </SplitterResizeHandle>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_splitter.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { SplitterResizeHandle } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSplitterHandleComponentProps
+    {
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkSplitterHandleComponentProps>(), {
+        disabled: false,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Splitter/SkSplitterPanel.vue

@@ -0,0 +1,45 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - SplitterPanel Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <SplitterPanel
+        class="sk-splitter-panel"
+        :default-size="defaultSize"
+        :min-size="minSize"
+        :max-size="maxSize"
+        :collapsible="collapsible"
+        :collapsed-size="collapsedSize"
+    >
+        <slot />
+    </SplitterPanel>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { SplitterPanel } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkSplitterPanelComponentProps
+    {
+        defaultSize ?: number;
+        minSize ?: number;
+        maxSize ?: number;
+        collapsible ?: boolean;
+        collapsedSize ?: number;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkSplitterPanelComponentProps>(), {
+        defaultSize: undefined,
+        minSize: undefined,
+        maxSize: undefined,
+        collapsible: false,
+        collapsedSize: undefined,
+    });
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Splitter/index.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkSplitter } from './SkSplitter.vue';
+export { default as SkSplitterHandle } from './SkSplitterHandle.vue';
+export { default as SkSplitterPanel } from './SkSplitterPanel.vue';
+export type { SkSplitterDirection, SkSplitterKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Splitter/types.ts

@@ -0,0 +1,10 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Splitter Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkSplitterKind = ComponentKind;
+export type SkSplitterDirection = 'horizontal' | 'vertical';
+
+//----------------------------------------------------------------------------------------------------------------------