@skewedaspect/sleekspace-ui 0.5.1 → 0.7.0

package/src/components/ContextMenu/SkContextMenuRadioGroup.vue

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

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/Panel/SkPanel.vue

@@ -40,7 +40,7 @@
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkPanelKind, SkPanelSize } from './types';
+    import type { SkPanelCorner, SkPanelKind, SkPanelSize } from './types';
 
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
@@ -81,6 +81,20 @@
          * @default false
          */
         noBorder ?: boolean;
+
+        /**
+         * Which corners receive the beveled cut. Any combination of the four corners can be
+         * specified. Pass an empty array for no cut corners.
+         * @default ['bottom-right']
+         */
+        corners ?: SkPanelCorner[];
+
+        /**
+         * Which corner displays the decorative accent stripe. Must be one of the active
+         * `corners` for the decoration to be visible.
+         * @default 'bottom-right'
+         */
+        decorationCorner ?: SkPanelCorner;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -90,6 +104,8 @@
         size: 'md',
         showDecoration: true,
         noBorder: false,
+        corners: () => [ 'bottom-right' ],
+        decorationCorner: 'bottom-right',
     });
 
     //------------------------------------------------------------------------------------------------------------------
@@ -101,6 +117,11 @@
             [`sk-${ props.kind }`]: true,
             [`sk-${ props.size }`]: true,
             'sk-no-border': props.noBorder,
+            'sk-cut-top-left': props.corners.includes('top-left'),
+            'sk-cut-top-right': props.corners.includes('top-right'),
+            'sk-cut-bottom-right': props.corners.includes('bottom-right'),
+            'sk-cut-bottom-left': props.corners.includes('bottom-left'),
+            [`sk-decoration-${ props.decorationCorner }`]: true,
         };
     });
 
@@ -116,14 +137,18 @@
     //------------------------------------------------------------------------------------------------------------------
 
     // Control decoration visibility
-    // Note: noBorder automatically disables decoration
+    // Hidden when: noBorder, showDecoration is false, or decorationCorner isn't in corners
     const decorationDisplay = computed(() =>
     {
-        if(props.noBorder)
+        if(props.noBorder || !props.showDecoration)
+        {
+            return 'none';
+        }
+        if(!props.corners.includes(props.decorationCorner))
         {
             return 'none';
         }
-        return props.showDecoration ? 'block' : 'none';
+        return 'block';
     });
 </script>
 

package/src/components/Panel/types.ts

@@ -12,4 +12,7 @@ export type SkPanelKind = ComponentKind;
 // Panel sizes (only affects cut size, not padding or dimensions)
 export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// Which corners get the bevel cut
+export type SkPanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+
 //----------------------------------------------------------------------------------------------------------------------

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';
+
+//----------------------------------------------------------------------------------------------------------------------