@skewedaspect/sleekspace-ui 0.6.0 → 0.7.0

package/src/components/ContextMenu/SkContextMenuRadioItem.vue

@@ -0,0 +1,53 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuRadioItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuRadioItem
+        :class="classes"
+        :value="value"
+        :disabled="disabled"
+        @select.prevent
+    >
+        <ContextMenuItemIndicator class="sk-menu-item-indicator">
+            <div class="sk-menu-radio-dot" />
+        </ContextMenuItemIndicator>
+        <slot />
+    </ContextMenuRadioItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { ContextMenuItemIndicator, ContextMenuRadioItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuRadioItemComponentProps
+    {
+        value : string;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkContextMenuRadioItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-item': true,
+        'sk-menu-radio-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuSeparator.vue

@@ -0,0 +1,21 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuSeparator Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuSeparator class="sk-menu-separator" />
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { ContextMenuSeparator } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/SkContextMenuSubmenu.vue

@@ -0,0 +1,94 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ContextMenuSubmenu Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ContextMenuSub>
+        <ContextMenuSubTrigger :class="triggerClasses">
+            {{ triggerText }}
+            <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"
+                class="sk-submenu-caret"
+            >
+                <polyline points="9 6 15 12 9 18" />
+            </svg>
+        </ContextMenuSubTrigger>
+        <ContextMenuPortal>
+            <ContextMenuSubContent
+                :data-scheme="theme"
+                :class="contentClasses"
+            >
+                <slot />
+            </ContextMenuSubContent>
+        </ContextMenuPortal>
+    </ContextMenuSub>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles use shared menu styles from /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, inject } from 'vue';
+    import {
+        ContextMenuPortal,
+        ContextMenuSub,
+        ContextMenuSubContent,
+        ContextMenuSubTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { SkContextMenuKind } from './types';
+
+    // Composables
+    import { usePortalContext } from '@/composables/usePortalContext';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkContextMenuSubmenuComponentProps
+    {
+        triggerText : string;
+        kind ?: SkContextMenuKind;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkContextMenuSubmenuComponentProps>(), {
+        kind: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const { theme } = usePortalContext();
+
+    const parentKind = inject<any>('context-menu-kind', computed(() => 'neutral'));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed(() => props.kind || parentKind.value || 'neutral');
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const triggerClasses = computed(() => ({
+        'sk-menu-item': true,
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const contentClasses = computed(() => ({
+        'sk-menu-content': true,
+        [`sk-${ effectiveKind.value }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ContextMenu/index.ts

@@ -0,0 +1,15 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ContextMenu Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkContextMenu } from './SkContextMenu.vue';
+export { default as SkContextMenuCheckboxItem } from './SkContextMenuCheckboxItem.vue';
+export { default as SkContextMenuItem } from './SkContextMenuItem.vue';
+export { default as SkContextMenuLabel } from './SkContextMenuLabel.vue';
+export { default as SkContextMenuRadioGroup } from './SkContextMenuRadioGroup.vue';
+export { default as SkContextMenuRadioItem } from './SkContextMenuRadioItem.vue';
+export { default as SkContextMenuSeparator } from './SkContextMenuSeparator.vue';
+export { default as SkContextMenuSubmenu } from './SkContextMenuSubmenu.vue';
+export type { SkContextMenuKind } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/ContextMenu/types.ts

@@ -0,0 +1,9 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ContextMenu Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkContextMenuKind = ComponentKind;
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Dropdown/SkDropdown.vue

@@ -177,7 +177,7 @@
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() => ({
-        'sk-dropdown-menu-content': true,
+        'sk-menu-content': true,
         [`sk-${ props.kind }`]: true,
     }));
 

package/src/components/Dropdown/SkDropdownCheckboxItem.vue

@@ -0,0 +1,72 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - DropdownCheckboxItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuCheckboxItem
+        :class="classes"
+        :model-value="modelValue"
+        :disabled="disabled"
+        @update:model-value="$emit('update:modelValue', $event)"
+        @select.prevent
+    >
+        <DropdownMenuItemIndicator class="sk-menu-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: 0.875rem; height: 0.875rem;"
+            >
+                <polyline points="4 12 10 18 20 6" />
+            </svg>
+        </DropdownMenuItemIndicator>
+        <slot />
+    </DropdownMenuCheckboxItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkDropdownCheckboxItemComponentProps
+    {
+        modelValue ?: boolean;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkDropdownCheckboxItemComponentProps>(), {
+        modelValue: false,
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : boolean];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-item': true,
+        'sk-menu-checkbox-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownMenuItem.vue

@@ -70,7 +70,7 @@
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() => ({
-        'sk-dropdown-menu-item': true,
+        'sk-menu-item': true,
     }));
 </script>
 

package/src/components/Dropdown/SkDropdownMenuLabel.vue

@@ -0,0 +1,17 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - DropdownMenuLabel Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuLabel class="sk-menu-label">
+        <slot />
+    </DropdownMenuLabel>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { DropdownMenuLabel } from 'reka-ui';
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownRadioGroup.vue

@@ -0,0 +1,36 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - DropdownRadioGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuRadioGroup :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
+        <slot />
+    </DropdownMenuRadioGroup>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { DropdownMenuRadioGroup } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkDropdownRadioGroupComponentProps
+    {
+        modelValue ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkDropdownRadioGroupComponentProps>(), {
+        modelValue: '',
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    defineEmits<{
+        'update:modelValue' : [value : string];
+    }>();
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownRadioItem.vue

@@ -0,0 +1,53 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - DropdownRadioItem Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <DropdownMenuRadioItem
+        :class="classes"
+        :value="value"
+        :disabled="disabled"
+        @select.prevent
+    >
+        <DropdownMenuItemIndicator class="sk-menu-item-indicator">
+            <div class="sk-menu-radio-dot" />
+        </DropdownMenuItemIndicator>
+        <slot />
+    </DropdownMenuRadioItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_menu.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from 'reka-ui';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkDropdownRadioItemComponentProps
+    {
+        value : string;
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    withDefaults(defineProps<SkDropdownRadioItemComponentProps>(), {
+        disabled: false,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-menu-item': true,
+        'sk-menu-radio-item': true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Dropdown/SkDropdownSubmenu.vue

@@ -115,13 +115,13 @@
     //------------------------------------------------------------------------------------------------------------------
 
     const triggerClasses = computed(() => ({
-        'sk-dropdown-menu-item': true,
+        'sk-menu-item': true,
     }));
 
     //------------------------------------------------------------------------------------------------------------------
 
     const contentClasses = computed(() => ({
-        'sk-dropdown-menu-content': true,
+        'sk-menu-content': true,
         [`sk-${ effectiveKind.value }`]: true,
     }));
 </script>

package/src/components/Dropdown/index.ts

@@ -3,8 +3,12 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 export { default as SkDropdown } from './SkDropdown.vue';
+export { default as SkDropdownCheckboxItem } from './SkDropdownCheckboxItem.vue';
+export { default as SkDropdownMenuLabel } from './SkDropdownMenuLabel.vue';
 export { default as SkDropdownMenuItem } from './SkDropdownMenuItem.vue';
 export { default as SkDropdownMenuSeparator } from './SkDropdownMenuSeparator.vue';
+export { default as SkDropdownRadioGroup } from './SkDropdownRadioGroup.vue';
+export { default as SkDropdownRadioItem } from './SkDropdownRadioItem.vue';
 export { default as SkDropdownSubmenu } from './SkDropdownSubmenu.vue';
 export type { SkDropdownAlign, SkDropdownKind, SkDropdownSide } from './types';
 

package/src/components/ScrollArea/SkScrollArea.vue

@@ -0,0 +1,87 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - ScrollArea Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <ScrollAreaRoot :type="type" :class="classes" :style="customColorStyles">
+        <ScrollAreaViewport class="sk-scroll-area-viewport">
+            <slot />
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar
+            v-if="orientation !== 'horizontal'"
+            class="sk-scroll-area-scrollbar"
+            orientation="vertical"
+        >
+            <ScrollAreaThumb class="sk-scroll-area-thumb" />
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar
+            v-if="orientation !== 'vertical'"
+            class="sk-scroll-area-scrollbar"
+            orientation="horizontal"
+        >
+            <ScrollAreaThumb class="sk-scroll-area-thumb" />
+        </ScrollAreaScrollbar>
+        <ScrollAreaCorner v-if="orientation === 'both'" class="sk-scroll-area-corner" />
+    </ScrollAreaRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are in /src/styles/components/_scroll-area.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    import { computed, toRef } from 'vue';
+    import {
+        ScrollAreaCorner,
+        ScrollAreaRoot,
+        ScrollAreaScrollbar,
+        ScrollAreaThumb,
+        ScrollAreaViewport,
+    } from 'reka-ui';
+
+    // Types
+    import type { SkScrollAreaKind, SkScrollAreaOrientation, SkScrollAreaType } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkScrollAreaComponentProps
+    {
+        type ?: SkScrollAreaType;
+        orientation ?: SkScrollAreaOrientation;
+        kind ?: SkScrollAreaKind;
+        baseColor ?: string;
+        textColor ?: string;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkScrollAreaComponentProps>(), {
+        type: 'hover',
+        orientation: 'vertical',
+        kind: 'neutral',
+        baseColor: undefined,
+        textColor: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'scroll-area',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    const classes = computed(() => ({
+        'sk-scroll-area': true,
+        [`sk-${ props.kind }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/ScrollArea/index.ts

@@ -0,0 +1,8 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Component Exports
+//----------------------------------------------------------------------------------------------------------------------
+
+export { default as SkScrollArea } from './SkScrollArea.vue';
+export type { SkScrollAreaKind, SkScrollAreaOrientation, SkScrollAreaType } from './types';
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/ScrollArea/types.ts

@@ -0,0 +1,11 @@
+//----------------------------------------------------------------------------------------------------------------------
+// ScrollArea Component Types
+//----------------------------------------------------------------------------------------------------------------------
+
+import type { ComponentKind } from '@/types';
+
+export type SkScrollAreaKind = ComponentKind;
+export type SkScrollAreaType = 'auto' | 'always' | 'scroll' | 'hover';
+export type SkScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+
+//----------------------------------------------------------------------------------------------------------------------

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>
+
+<!--------------------------------------------------------------------------------------------------------------------->